feat: replace marquee with carousel, add mobile responsiveness

Author: janelletam

components.json

@@ -18,7 +18,5 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {
-    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
-  }
+  "registries": {}
 }

package-lock.json

@@ -23,6 +23,7 @@
     "cloudinary": "^2.8.0",
     "clsx": "^2.1.1",
     "embla-carousel": "^8.6.0",
+    "embla-carousel-auto-height": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.6",
     "lucide-react": "^0.539.0",

package.json

@@ -22,15 +22,6 @@
 
   --text-body: rgba(250, 250, 250, 0.562);
   --detail-medium-contrast: rgba(89, 83, 172, 0.452);
-
-  --animate-scroll: scroll var(--animation-duration, 40s)
-    var(--animation-direction, forwards) linear infinite;
-
-  @keyframes scroll {
-    to {
-      transform: translate(calc(-50% - 0.5rem));
-    }
-  }
 }
 
 /* @custom-variant dark (&:where(.dark, .dark *)); */

src/app/globals.css

@@ -12,6 +12,7 @@ import {
   Footer,
   FAQ,
   Gallery,
+  Testimonials,
 } from "@/components";
 
 const Home = () => {
@@ -32,6 +33,7 @@ const Home = () => {
                 <Hero />
               </div>
             </div>
+            <Testimonials />
             <About />
             <Gallery />
             <Sponsors />

src/app/page.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import Image from 'next/image'
+import { motion } from 'framer-motion'
+import useEmblaCarousel from 'embla-carousel-react'
+import AutoHeight from 'embla-carousel-auto-height'
+import type { EmblaPluginType } from 'embla-carousel'
+import {
+  PrevButton,
+  NextButton,
+  usePrevNextButtons
+} from '../gallery/embla/EmblaCarouselArrowButtons'
+import { useDotButton } from '../gallery/embla/EmblaCarouselDotButtons'
+import { cn } from '@/lib/utils'
+import testimonials from './testimonials.json'
+import '../../../app/embla.css'
+
+const CARD_BASE =
+  'rounded-2xl border-4 border-white/10 backdrop-blur-xs px-8 py-8 md:px-12 md:py-10 flex flex-col gap-6 transition-all duration-300 cursor-default'
+const CARD_ACTIVE =
+  'bg-light-mode/10 hover:scale-[1.010] hover:shadow-[0_0_26px_rgba(245,240,233,0.1)]'
+const CARD_INACTIVE = 'bg-light-mode/5 opacity-50'
+
+const KOI_STYLE = {
+  bottom: '-23vw',
+  x: '-200%',
+  rotate: 80,
+  height: '35vw',
+  minHeight: '140px',
+  minWidth: '140px',
+  width: '15vw',
+  maxHeight: '520px',
+  maxWidth: '520px'
+}
+
+const Testimonials: React.FC = () => {
+  const [plugins, setPlugins] = useState<EmblaPluginType[]>([])
+
+  useEffect(() => {
+    if (window.matchMedia('(max-width: 767px)').matches) {
+      setPlugins([AutoHeight()])
+    }
+  }, [])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'center' }, plugins)
+  const { selectedIndex } = useDotButton(emblaApi)
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } =
+    usePrevNextButtons(emblaApi)
+
+  // Track viewport height via ResizeObserver so nav buttons follow the
+  // AutoHeight animation in real-time (top: 50% doesn't trigger CSS transitions)
+  const viewportElRef = useRef<HTMLDivElement | null>(null)
+  const [btnTop, setBtnTop] = useState<number | undefined>(undefined)
+
+  const setViewportRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      viewportElRef.current = node
+      emblaRef(node)
+    },
+    [emblaRef]
+  )
+
+  useEffect(() => {
+    const el = viewportElRef.current
+    if (!el) return
+    setBtnTop(el.offsetHeight / 2)
+    const ro = new ResizeObserver(() => setBtnTop(el.offsetHeight / 2))
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [emblaApi])
+
+  return (
+    <div className='relative mt-[25vh] md:mt-[35vh]'>
+      <div
+        id='Testimonials'
+        className='max-w-[1800px] w-full flex flex-col items-center mx-auto'
+      >
+        <div className='w-full flex justify-center text-center mb-10'>
+          <h2 className='text-3xl md:text-5xl xl:text-6xl font-bold pb-4 border-b-1 text-light-mode'>
+            Why Join The Team
+          </h2>
+        </div>
+
+        <div className='relative w-full md:max-w-[75vw]'>
+          {/* edge fade overlays */}
+          <div className='absolute inset-y-0 left-0 w-[18%] z-10 pointer-events-none bg-gradient-to-r from-sea to-transparent' />
+          <div className='absolute inset-y-0 right-0 w-[18%] z-10 pointer-events-none bg-gradient-to-l from-sea to-transparent' />
+
+          {/* nav buttons — top set via JS so they track the AutoHeight animation */}
+          <div
+            className='absolute left-2 -translate-y-1/2 z-20 rounded-full bg-sea/70 backdrop-blur-md'
+            style={{ top: btnTop ?? '50%' }}
+          >
+            <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          </div>
+          <div
+            className='absolute right-2 -translate-y-1/2 z-20 rounded-full bg-sea/70 backdrop-blur-md'
+            style={{ top: btnTop ?? '50%' }}
+          >
+            <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+          </div>
+
+          <div
+            className='overflow-hidden py-5 transition-[height] duration-300 ease-in-out'
+            ref={setViewportRef}
+          >
+            <div className='flex items-center [touch-action:pan-y_pinch-zoom] -ml-6'>
+              {testimonials.map((item, idx) => (
+                <div key={idx} className='flex-[0_0_85%] md:flex-[0_0_70%] min-w-0 pl-6'>
+                  <div className={cn(CARD_BASE, idx === selectedIndex ? CARD_ACTIVE : CARD_INACTIVE)}>
+                    <p className='text-sm md:text-base leading-[1.6] text-light-mode'>
+                      {item.quote}
+                    </p>
+                    <div className='flex flex-col gap-1'>
+                      <span className='text-sm font-medium text-light-mode/60'>{item.name}</span>
+                      {item.title && (
+                        <span className='text-xs text-light-mode/40 whitespace-pre-line'>
+                          {item.title}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* decorative koi for desktop only */}
+      <motion.div
+        className='hidden md:block absolute left-1/2 z-10'
+        style={KOI_STYLE}
+        animate={{ y: ['0vw', '-0.8vw', '0vw'] }}
+        transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+      >
+        <div className='relative w-full h-full'>
+          <Image src='/images/koi2.svg' alt='Koi' fill className='object-contain opacity-80' />
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+export default Testimonials