db connect

2026-04-17 11:16:00 +03:00
parent b675fff437
commit 5a48605c35
25 changed files with 2607 additions and 298 deletions
--- a/app/HomePageClient.tsx
+++ b/app/HomePageClient.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import ProjectSlider from '@/components/ProjectSlider'
+
+export default function HomePageClient({ initialProjects }: { initialProjects: any[] }) {
+  const [isRevealed, setIsRevealed] = useState(false)
+  const [isAtCorners, setIsAtCorners] = useState(false)
+
+  useEffect(() => {
+    const reveal = setTimeout(() => setIsRevealed(true), 500)
+    const move = setTimeout(() => setIsAtCorners(true), 2500)
+    
+    return () => {
+      clearTimeout(reveal)
+      clearTimeout(move)
+    }
+  }, [])
+
+  const transition = { duration: 1.8, ease: [0.76, 0, 0.24, 1] as const }
+
+  return (
+    <main className="relative h-screen w-full bg-white overflow-hidden">
+      
+      <div className="absolute inset-0 z-50 pointer-events-none">
+        <div className="relative w-full h-full">
+          
+          <motion.div
+            animate={{
+              top: isAtCorners ? "100%" : "50%",
+              left: isAtCorners ? "0%" : "50%",
+              x: isAtCorners ? "0%" : "-50%",
+              y: isAtCorners ? "-100%" : "-100%",
+            }}
+            transition={transition}
+            className="absolute overflow-hidden"
+          >
+            <motion.div
+              initial={{ y: "100%" }}
+              animate={{ y: isRevealed ? "0%" : "100%" }}
+              transition={transition}
+              className="relative"
+            >
+              <motion.h1
+                animate={{ opacity: isAtCorners ? 0 : 1 }}
+                transition={{ duration: 0.8, ease: "easeInOut" }}
+                className="text-[10vw] md:text-[8vw] font-bebas leading-[0.75] text-black tracking-tighter whitespace-nowrap"
+              >
+                AYÇA NUR TURHAN
+              </motion.h1>
+
+              <motion.h1
+                initial={{ opacity: 0 }}
+                animate={{ opacity: isAtCorners ? 1 : 0 }}
+                transition={{ duration: 0.8, ease: "easeInOut" }}
+                className="absolute inset-0 text-[10vw] md:text-[8vw] font-bebas leading-[0.75] text-black tracking-tighter whitespace-nowrap"
+              >
+                A.N.T
+              </motion.h1>
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            animate={{
+              top: isAtCorners ? "100%" : "50%",
+              left: isAtCorners ? "100%" : "50%",
+              x: isAtCorners ? "-100%" : "-50%",
+              y: isAtCorners ? "-100%" : "0%",
+            }}
+            transition={transition}
+            className="absolute overflow-hidden"
+          >
+            <motion.h1
+              initial={{ y: "100%" }}
+              animate={{ y: isRevealed ? "0%" : "100%" }}
+              transition={{ ...transition, delay: 0.1 }}
+              className="text-[10vw] md:text-[8vw] font-bebas leading-[0.75] text-black tracking-tighter whitespace-nowrap"
+            >
+              ARCHITECTURE
+            </motion.h1>
+          </motion.div>
+
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isAtCorners && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: 0.6, duration: 1.2, ease: "easeOut" }}
+            className="h-full flex flex-col justify-center z-10"
+          >
+            <ProjectSlider projects={initialProjects} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+    </main>
+  )
+}