"use client"; import { motion, AnimatePresence, useScroll, useTransform, useMotionValue, useSpring, } from "framer-motion"; import { useRef, useState, useEffect, useCallback } from "react"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import type { Locale } from "@/i18n-config"; import Link from "next/link"; import { blogPosts } from "@/data/blog"; // ── EASING ── const expo: [number, number, number, number] = [0.16, 1, 0.3, 1]; // ── SVG ICONS ── const IconAI = () => ( ); const IconChain = () => ( ); const IconMobile = () => ( ); const IconWeb = () => ( ); const IconArrow = () => ( ); const IconArrowUpRight = () => ( ); const IconPlus = () => ( ); const IconCheck = () => ( ); // ── ANIMATED COUNTER ── function Counter({ target, suffix = "" }: { target: number; suffix?: string }) { const [count, setCount] = useState(0); const ref = useRef(null); const [started, setStarted] = useState(false); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setStarted(true); }, { threshold: 0.5 } ); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); useEffect(() => { if (!started) return; let cur = 0; const steps = 50; const inc = target / steps; const iv = setInterval(() => { cur += inc; if (cur >= target) { setCount(target); clearInterval(iv); } else setCount(Math.floor(cur)); }, 1600 / steps); return () => clearInterval(iv); }, [started, target]); return {count.toLocaleString()}{suffix}; } // ── MAGNETIC BUTTON ── function MagneticBtn({ children, className, href }: { children: React.ReactNode; className?: string; href?: string }) { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, { stiffness: 200, damping: 20 }); const sy = useSpring(y, { stiffness: 200, damping: 20 }); const handleMouse = useCallback((e: React.MouseEvent) => { if (!ref.current) return; const { left, top, width, height } = ref.current.getBoundingClientRect(); x.set((e.clientX - left - width / 2) * 0.3); y.set((e.clientY - top - height / 2) * 0.3); }, [x, y]); const handleLeave = useCallback(() => { x.set(0); y.set(0); }, [x, y]); const Tag = href ? "a" : "div"; return ( {children} ); } // ── MARQUEE TEXT ── function Marquee({ text, reverse = false }: { text: string; reverse?: boolean }) { const repeated = Array(8).fill(text).join(" · "); return (
{[0, 1].map(i => ( {repeated} ))}
); } // ── SPLIT TEXT ANIMATION ── function SplitReveal({ text, className, delay = 0 }: { text: string; className?: string; delay?: number }) { const words = text.split(" "); return ( {words.map((word, i) => ( {word} ))} ); } // ── SECTION LABEL ── function Label({ children }: { children: React.ReactNode }) { return (
{children}
); } // ── MAIN COMPONENT ── export default function HomeClient({ lang, dict }: { lang: Locale; dict: any }) { const heroRef = useRef(null); const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] }); const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]); const heroOpacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]); const [activeFaq, setActiveFaq] = useState(null); const [formSent, setFormSent] = useState(false); const [hoverCase, setHoverCase] = useState(null); const serviceIcons = [, , , ]; const serviceCodes = ["AI / ML", "BC / WEB3", "MOB / DART", "WEB / NEXT"]; const services = dict.services.items ? Object.entries(dict.services.items as Record).map(([, val], idx) => ({ icon: serviceIcons[idx], code: serviceCodes[idx], title: val.title, desc: val.desc, items: [ ["Predictive Models", "NLP Pipelines", "Computer Vision", "Agentic Workflows"], ["Smart Contract Audit", "DeFi Architecture", "Tokenomics Design", "Cross-chain Bridges"], ["Universal Codebase", "Offline Syncing", "Biometric Protocols", "Core Bundle Optimization"], ["Next.js App Router", "Server Components", "Headless Commerce", "Modular API Mesh"], ][idx], })) : []; const caseStudies = (dict.work.items as any[]).map((item: any, idx: number) => ({ ...item, tech: [ ["Python", "TensorFlow", "Next.js", "PostgreSQL"], ["Solidity", "React", "IPFS", "Node.js"], ["Flutter", "Firebase", "Django", "AWS"], ["Next.js", "Stripe", "Redis", "Vercel"], ][idx] || ["React", "TypeScript", "Node.js"], accent: ["#FFE600", "#FF4500", "#0A0A0A", "#00CC77"][idx] || "#FFE600", })); const processes = dict.process.items as any[]; const featuredPosts = blogPosts; const faqs = dict.faq.items as any[]; return (
{/* Noise overlay */}
{/* ──────────────── HERO ──────────────── */}
{/* Dot grid bg */} {/* Big watermark letters */} AT {/* Yellow right accent */}
{/* Meta bar */}
{dict.hero.badge}
EST. 2025 — MUĞLA {/* Headline */}

{dict.hero.titleLine1} {dict.hero.titleLine2}

{/* Bottom bar */}

{dict.hero.desc}

{dict.hero.ctaQuote} {dict.hero.ctaWork}
{/* ──────────────── MARQUEE 1 ──────────────── */} {/* ──────────────── STATS ──────────────── */}
{[ { val: 48, suffix: "+", label: dict.stats.deliveries }, { val: 98, suffix: "%", label: dict.stats.retention }, { val: 12, suffix: "+", label: dict.stats.regions }, { val: 1, suffix: "wk", label: lang === "tr" ? "MVP Süresi" : "Avg Cycle To MVP" }, ].map((s, idx) => (
{s.label}
))}
{/* ──────────────── SERVICES ──────────────── */}

{dict.services.desc}

{services.map((s, idx) => ( {/* Hover accent left bar */}
{s.icon}
{s.code}

{s.title}

{s.desc}

{s.items?.map((item: string) => ( {item} ))}
{/* Number watermark */}
{String(idx + 1).padStart(2, "0")}
))}
{/* ──────────────── MARQUEE 2 ──────────────── */} {/* ──────────────── CASE STUDIES ──────────────── */}

{caseStudies.map((study: any, idx: number) => ( setHoverCase(idx)} onHoverEnd={() => setHoverCase(null)} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: idx * 0.08 }} >
{/* Index */}
{study.num}
{/* Title */}
↗

{study.title}

{/* Tag */}
{study.tag}
{/* Description */}

{study.desc}

{/* Arrow */}
{/* Expanded tech stack */} {hoverCase === idx && ( STACK: {study.tech.map((t: string) => ( {t} ))} )} ))}
{dict.work.analyzeBtn}
{/* ──────────────── PROCESS ──────────────── */}

{processes.map((p: any, idx: number) => (
{p.num}
{p.timeframe}

{p.title}

{p.desc}

))}
{/* ──────────────── BLOG FEATURED ──────────────── */}

{dict.blog.viewAll} →
{featuredPosts.map((post, idx) => { const content = post[lang] || post.en; const accent = ["#FFE600", "#FF4500", "#00CC77"][idx] || "#FFE600"; return (
{content.category} {post.date}

{content.title}

{content.excerpt}

{post.author} {post.authorRole}
{/* Top line category accent */}
); })}
{/* ──────────────── FAQ ──────────────── */}

{faqs.map((faq: any, idx: number) => ( {activeFaq === idx && (

{faq.a}

)} ))}
{/* ──────────────── CONTACT ──────────────── */}

{dict.contact.desc}

{/* Form */}
{!formSent ? ( { e.preventDefault(); setFormSent(true); }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.3 }} >
{[ { label: dict.contact.formName, placeholder: dict.contact.formNamePlaceholder, type: "text" }, { label: dict.contact.formEmail, placeholder: dict.contact.formEmailPlaceholder, type: "email" }, { label: dict.contact.formCompany, placeholder: dict.contact.formCompanyPlaceholder, type: "text" }, { label: dict.contact.formTrack, type: "select", options: ["$5k – $20k", "$20k – $50k", "$50k – $100k", "$100k+"] }, ].map((field, fi) => (
{field.type === "select" ? ( ) : ( )}
))}