slides, first slide

src/app/page.tsx

@@ -1,9 +1,62 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import Slide from '@/components/Slide';
+import Slide1 from '@/components/Slide1';
+import Slide2 from '@/components/Slide2';
+import Slide3 from '@/components/Slide3';
+import Slide4 from '@/components/Slide4';
+import Slide5 from '@/components/Slide5';
+
+
+const slides = [
+  <Slide1 key={1} />,
+  //<Slide2 key={2} />,
+  //<Slide3 key={3} />,
+  //<Slide4 key={4} />,
+  //<Slide5 key={5} />,
+]
+
 export default function Home() {
+  const [current, setCurrent] = useState(0)
+
+  
+  const nextSlide = useCallback(() => {
+    if (current < slides.length - 1) setCurrent(current + 1)
+  }, [current])
+
+  const prevSlide = useCallback(() => {
+    if (current > 0) setCurrent(current - 1)
+  }, [current])
+
+  useEffect(() => {
+    const handleScroll = (e: WheelEvent) => {
+      if (e.deltaY > 0) nextSlide()
+      else prevSlide()
+    }
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') nextSlide()
+      if (e.key === 'ArrowUp') prevSlide()
+    }
+
+    window.addEventListener('wheel', handleScroll)
+    window.addEventListener('keydown', handleKey)
+
+    return () => {
+      window.removeEventListener('wheel', handleScroll)
+      window.removeEventListener('keydown', handleKey)
+    }
+  }, [current, nextSlide, prevSlide])
+
+
   return (
-    <div className="flex min-h-screen flex-col items-center justify-between p-24">
-      <main className="flex flex-col items-center justify-center">
-        <h1 className="text-4xl font-bold">Work in Progress</h1>
-      </main>
-    </div>
-  );
-}
+    <main className="relative h-screen w-screen overflow-hidden">
+      {slides.map((slide, idx) => (
+        <Slide key={idx} index={idx} currentSlide={current}>
+          {slide}
+        </Slide>
+      ))}
+    </main>
+  )
+}