From 76798e4704c6c5ef3f5628a8bb9963f80bf3f012 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 23 Jun 2026 13:32:43 +0200
Subject: [PATCH] refactor(ui): replace dragging carousel with centered grid
 layout

---
 components/blocks/ReferencesSlider.test.tsx |   9 +-
 components/blocks/ReferencesSlider.tsx      | 119 ++++++--------------
 2 files changed, 39 insertions(+), 89 deletions(-)

diff --git a/components/blocks/ReferencesSlider.test.tsx b/components/blocks/ReferencesSlider.test.tsx
index 4a8cd039c..d18b97d14 100644
--- a/components/blocks/ReferencesSlider.test.tsx
+++ b/components/blocks/ReferencesSlider.test.tsx
@@ -51,14 +51,15 @@ describe('ReferencesSlider TDD', () => {
     expect(screen.getByText('Referenz Projekt Zwei')).toBeTruthy();
   });
 
-  it('renders each tile as a static block and NOT wrapped in a link', () => {
+  it('renders each tile as a link to the reference detail page', () => {
     render(<ReferencesSlider references={mockReferences} />);
-    
-    const links = screen.queryAllByTestId('reference-tile-link');
-    expect(links).toHaveLength(0);
 
     const tiles = screen.getAllByTestId('reference-tile');
     expect(tiles).toHaveLength(2);
+    
+    // Check if they have href attributes
+    expect(tiles[0].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-eins');
+    expect(tiles[1].getAttribute('href')).toContain('/en/referenzen#referenz-projekt-zwei');
   });
 });
 
diff --git a/components/blocks/ReferencesSlider.tsx b/components/blocks/ReferencesSlider.tsx
index 547366146..45eddad5e 100644
--- a/components/blocks/ReferencesSlider.tsx
+++ b/components/blocks/ReferencesSlider.tsx
@@ -40,12 +40,6 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
   const { data } = props;
   const references = props.references || [];
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const dragDistanceRef = React.useRef(0);
-  const startXRef = React.useRef(0);
-  const scrollLeftRef = React.useRef(0);
-  const isDraggingRef = React.useRef(false);
-  const [isDragging, setIsDragging] = React.useState(false);
   
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');
@@ -63,36 +57,6 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
     '/assets/photos/DSC00010.JPG',
   ];
 
-  const onMouseDown = (e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    setIsDragging(true);
-    isDraggingRef.current = true;
-    const startXVal = e.clientX - (containerRef.current.offsetLeft || 0);
-    startXRef.current = startXVal;
-    scrollLeftRef.current = containerRef.current.scrollLeft || 0;
-    dragDistanceRef.current = 0;
-  };
-
-  const onMouseLeave = () => {
-    setIsDragging(false);
-    isDraggingRef.current = false;
-  };
-
-  const onMouseUp = () => {
-    setIsDragging(false);
-    isDraggingRef.current = false;
-  };
-
-  const onMouseMove = (e: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-    e.preventDefault();
-    const x = e.clientX - (containerRef.current.offsetLeft || 0);
-    const walk = (x - startXRef.current) * 2; // Scroll-fast
-    containerRef.current.scrollLeft = scrollLeftRef.current - walk;
-    dragDistanceRef.current = Math.abs(x - startXRef.current);
-  };
-
-
   return (
     <section id="referenzen" className="pt-16 pb-8 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
@@ -102,24 +66,13 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
           <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
           <h3 className="font-heading text-3xl md:text-5xl font-extrabold">{title}</h3>
         </div>
-        <div className="text-left max-w-3xl mx-auto md:mx-0 mb-8 md:mb-16">
+        <div className="text-left max-w-3xl mx-auto md:mx-0 md:mb-16">
           {description}
         </div>
       </div>
 
-      <div className="w-full relative z-10">
-        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-        
-        {/* Carousel: breaks viewport edge on both sides but initial padding aligns with container */}
-        <div 
-          ref={containerRef}
-          onMouseDown={onMouseDown}
-          onMouseLeave={onMouseLeave}
-          onMouseUp={onMouseUp}
-          onMouseMove={onMouseMove}
-          className={`select-none flex gap-6 overflow-x-auto pl-0 md:pl-0 pr-8 md:pr-[max(2rem,calc((100vw-80rem)/2))] pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
-        >
+      <div className="container relative z-10 w-full">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 justify-center items-stretch">
           {references.map((ref, i) => {
             const imgSrc = ref.image 
               ? (typeof ref.image === 'string' ? ref.image : ref.image.url) 
@@ -128,51 +81,47 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
             return (
               <LazyMotion key={ref.id} features={domAnimation}>
                 <m.div
-                  initial={{ opacity: 0, x: 20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
-                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
-                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
+                  transition={{ delay: i * 0.1, duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+                  className="w-full h-full group"
                 >
                   <Link
-                  href={`/${locale}/referenzen#${ref.slug}`}
-                  onClick={(e) => {
-                    if (dragDistanceRef.current > 5) {
-                      e.preventDefault();
-                    }
-                  }}
-                  data-testid="reference-tile"
-                  className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
-                >
-                  <Image
-                    draggable={false}
-                    src={imgSrc}
-                    alt={ref.title}
-                    fill
-                    sizes="(max-width: 768px) 320px, 480px"
-                    className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
-                  
-                  <HoverShineOverlay />
-                  
-                  <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
-                    <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
-                      {ref.category}
-                    </span>
-                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
-                  </div>
-                </Link>
+                    href={`/${locale}/referenzen#${ref.slug}`}
+                    data-testid="reference-tile"
+                    className="block relative h-[250px] md:h-[300px] w-full rounded-2xl overflow-hidden shadow-xl shadow-black/20"
+                  >
+                    <Image
+                      src={imgSrc}
+                      alt={ref.title}
+                      fill
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                      className="object-cover object-center group-hover:scale-105 transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
+                      priority={i < 3}
+                    />
+                    
+                    <div className="absolute inset-0 bg-gradient-to-t from-[#050B14]/90 via-[#050B14]/20 to-transparent pointer-events-none" />
+                    
+                    <HoverShineOverlay />
+
+                    <div className="absolute bottom-0 left-0 p-6 md:p-8 right-0 transform transition-transform duration-500 ease-out group-hover:-translate-y-2">
+                      <div className="bg-primary/20 backdrop-blur-md border border-primary/30 text-white text-[10px] md:text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full mb-3 inline-block shadow-[0_0_15px_rgba(14,122,92,0.3)]">
+                        {ref.category}
+                      </div>
+                      <h4 className="text-xl md:text-2xl font-bold font-heading leading-tight drop-shadow-md text-white group-hover:text-primary-light transition-colors duration-300">
+                        {ref.title}
+                      </h4>
+                    </div>
+                  </Link>
                 </m.div>
               </LazyMotion>
             );
           })}
-          {/* Right padding spacer so last card doesn't clip at viewport edge */}
-          <div className="flex-shrink-0 w-6" aria-hidden="true" />
         </div>
       </div>
 
-      <div className="container relative z-10 mt-4 flex justify-center">
+      <div className="container relative z-10 flex justify-center mt-12 md:mt-20 pb-4">
         <Link 
           href={ctaHref} 
           className="px-8 py-4 rounded-xl bg-white/5 border border-white/20 hover:bg-white hover:text-neutral-dark hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] transition-all font-bold flex items-center gap-3 backdrop-blur-sm"