initial dev

src/components/layout/Layout.tsx

@@ -1,24 +1,33 @@
 import { type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { ScrollToTop } from './ScrollToTop';
+import { cn } from '../../lib/cn';
 
 type LayoutProps = {
   children: ReactNode;
 };
 
 export const Layout = ({ children }: LayoutProps) => {
+  const { pathname } = useLocation();
+  const isHome = pathname === '/';
+
   return (
-    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
+    <div className={cn('relative min-h-screen bg-mist text-ink', !isHome && 'overflow-hidden')}>
       <ScrollToTop />
-      {/* Decorative gradient blurs */}
-      <div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
-      <div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
-      <div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
-      
       <Header />
-      <main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
-      <Footer />
+      <main
+        className={cn(
+          'relative z-10',
+          isHome
+            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
+            : 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32',
+        )}
+      >
+        {children}
+      </main>
+      {!isHome && <Footer />}
     </div>
   );
 };