feat: add responsive carousel and dark theme to agents gallery section

src/hooks/useMediaQuery.ts

@@ -0,0 +1,21 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => {
+      setMatches(media.matches)
+    }
+    media.addEventListener('change', listener)
+    return () => media.removeEventListener('change', listener)
+  }, [matches, query])
+
+  return matches
+}

src/hooks/useResponsiveCarousel.ts

@@ -0,0 +1,39 @@
+'use client'
+
+import { useState, useEffect } from 'react';
+
+// 🔧 Carousel Config
+const desktopConfig = {
+  GAP: 300,
+  ROT_Y: 18,
+  DEPTH: 210,
+  SCALE_DROP: 0.12,
+};
+
+const mobileConfig = {
+  GAP: 110, // Smaller gap for mobile
+  ROT_Y: 0,   // Flatter view on mobile
+  DEPTH: 150, // Less depth
+  SCALE_DROP: 0.1, // Less aggressive scaling
+};
+
+export const useResponsiveCarousel = () => {
+  const [config, setConfig] = useState(desktopConfig);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      if (window.innerWidth < 768) {
+        setConfig(mobileConfig);
+      } else {
+        setConfig(desktopConfig);
+      }
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  return config;
+};

src/hooks/useScroll.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+
+export function useScroll() {
+  const [isAtBottom, setIsAtBottom] = useState(false)
+
+  const handleScroll = useCallback(() => {
+    const footer = document.querySelector('footer')
+    if (footer) {
+      const footerTop = footer.getBoundingClientRect().top
+      setIsAtBottom(footerTop < window.innerHeight)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    handleScroll() // Initial check
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
+  const scrollToNext = () => {
+    const sections = Array.from(
+      document.querySelectorAll('section[id]')
+    ) as HTMLElement[]
+    const scrollPosition = window.scrollY + window.innerHeight / 2
+
+    const currentSection = sections.reduce((acc, section) => {
+      return section.offsetTop < scrollPosition ? section : acc
+    }, sections[0])
+
+    const currentIndex = sections.findIndex((sec) => sec.id === currentSection.id)
+    const nextIndex = currentIndex + 1
+
+    if (nextIndex < sections.length) {
+      sections[nextIndex].scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return { isAtBottom, scrollToNext, scrollToTop }
+}