feat: add project files

2026-06-03 17:31:50 +03:00
parent 8050d67b18
commit a952f571b9
26 changed files with 1661 additions and 113 deletions
@@ -0,0 +1,141 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import Image from "next/image";
+
+export default function Hero({ dict }: { dict: any }) {
+  const words = ["MOY", "BEACH"];
+
+  return (
+    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
+
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&q=85&w=2400"
+          alt="Moy Beach Akyaka"
+          fill
+          className="object-cover object-center"
+          priority
+          sizes="100vw"
+        />
+      </div>
+
+      {/* Multi-layer gradient for depth */}
+      <div className="absolute inset-0 bg-gradient-to-b from-sea-dark/55 via-black/15 to-sea-dark/70 z-10" />
+      <div className="absolute inset-0 bg-gradient-to-r from-sea-dark/20 via-transparent to-sea-dark/20 z-10" />
+
+      {/* Main Content */}
+      <div className="relative z-20 text-center px-4 max-w-5xl mx-auto">
+
+        {/* Location badge */}
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1.4, delay: 0.1 }}
+          className="text-sand/60 text-[11px] md:text-xs uppercase tracking-[0.45em] mb-6 font-light"
+        >
+          Akyaka · Muğla · Türkiye
+        </motion.p>
+
+        {/* Decorative line */}
+        <motion.div
+          initial={{ scaleX: 0 }}
+          animate={{ scaleX: 1 }}
+          transition={{ duration: 0.7, delay: 0.25 }}
+          className="w-12 h-px bg-coral mx-auto mb-8 origin-center"
+        />
+
+        {/* Main Title — word-by-word reveal */}
+        <h1 className="text-[4.5rem] md:text-[8rem] lg:text-[11rem] font-serif text-white leading-none tracking-tight mb-6">
+          {words.map((word, i) => (
+            <span key={word} className="inline-block overflow-hidden">
+              <motion.span
+                initial={{ y: 110, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{
+                  duration: 0.9,
+                  delay: 0.4 + i * 0.2,
+                  ease: [0.22, 1, 0.36, 1],
+                }}
+                className="inline-block"
+              >
+                {word}
+              </motion.span>
+              {i === 0 && (
+                <span className="inline-block w-4 md:w-8 lg:w-12" />
+              )}
+            </span>
+          ))}
+        </h1>
+
+        {/* Subtitle */}
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1, delay: 1.0 }}
+          className="text-lg md:text-2xl text-sand-light font-light tracking-wide mb-12 drop-shadow-md"
+        >
+          {dict.hero.subtitle}
+        </motion.p>
+
+        {/* CTA Buttons */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 1.35 }}
+          className="flex flex-wrap items-center justify-center gap-4"
+        >
+          <a
+            href="#about"
+            className="border border-white/50 hover:border-white text-white px-8 py-3.5 rounded-full text-sm tracking-widest uppercase font-medium transition-all hover:bg-white/10 backdrop-blur-sm"
+          >
+            {dict.hero.explore}
+          </a>
+        </motion.div>
+      </div>
+
+      {/* Scroll Indicator — direct child of section, correctly positioned */}
+      <motion.a
+        href="#about"
+        className="absolute bottom-20 left-1/2 -translate-x-1/2 z-20 text-white flex flex-col items-center gap-2 cursor-pointer"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.65 }}
+        transition={{ duration: 1, delay: 2.2 }}
+        whileHover={{ opacity: 1 }}
+        aria-label="Aşağı kaydır"
+      >
+        <span className="text-[9px] uppercase tracking-[0.35em] font-light">Kaydır</span>
+        <motion.div
+          animate={{ y: [0, 7, 0] }}
+          transition={{
+            duration: 1.6,
+            repeat: Infinity,
+            repeatType: "loop",
+            ease: "easeInOut",
+            delay: 2.6,
+          }}
+        >
+          <ChevronDown size={18} />
+        </motion.div>
+      </motion.a>
+
+      {/* Wave divider into About section */}
+      <div className="absolute bottom-0 left-0 right-0 z-20 leading-none pointer-events-none">
+        <svg
+          viewBox="0 0 1440 56"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="none"
+          className="w-full h-14 block"
+        >
+          <path
+            d="M0,28 C360,56 720,0 1080,28 C1260,42 1380,14 1440,28 L1440,56 L0,56 Z"
+            fill="#F4EFEB"
+          />
+        </svg>
+      </div>
+    </section>
+  );
+}