first commit

2026-06-03 04:27:40 +03:00
parent dcfaf2723c
commit 48277fe8d2
22 changed files with 1610 additions and 117 deletions
@@ -0,0 +1,83 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Meteors } from "@/components/ui/Meteors";
+
+export default function Hero() {
+  return (
+    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
+      {/* Background Image / Video overlay */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-primary/60 mix-blend-multiply z-10" />
+        <div className="absolute inset-0 bg-gradient-to-b from-primary/30 via-transparent to-primary z-10" />
+        <img
+          src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=2070&auto=format&fit=crop"
+          alt="Luna Cocktail Rooftop Vibe"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 z-20 overflow-hidden">
+          <Meteors number={15} />
+        </div>
+      </div>
+
+      <div className="relative z-20 text-center px-4 flex flex-col items-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="mb-6"
+        >
+          <div className="inline-flex items-center rounded-full border border-accent1/25 bg-accent1/10 px-5 py-2 backdrop-blur-sm overflow-hidden relative">
+            <span className="text-accent1 uppercase tracking-[0.25em] text-xs font-semibold relative z-10">
+              Muğla'nın En Özel Terası
+            </span>
+            <span className="pointer-events-none absolute inset-0 animate-shimmer-slide bg-gradient-to-r from-transparent via-white/15 to-transparent" />
+          </div>
+        </motion.div>
+        
+        <motion.h1 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          className="font-serif text-5xl md:text-7xl lg:text-8xl text-text-main mb-6 leading-tight max-w-4xl"
+        >
+          From Sunset <br />
+          <span className="text-accent1 italic">to Night</span>
+        </motion.h1>
+        
+        <motion.p 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          className="text-text-main/80 text-lg md:text-xl font-light mb-10 max-w-xl mx-auto"
+        >
+          Güneş ufukta kaybolurken müzik yükseliyor, kokteyller doluyor ve gece yeni başlıyor.
+        </motion.p>
+        
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <a
+            href="#contact"
+            className="inline-block bg-transparent border border-accent1 text-accent1 hover:bg-accent1 hover:text-primary transition-colors duration-300 px-10 py-4 uppercase tracking-[0.2em] text-sm font-bold"
+          >
+            Rezervasyon Yap / Book Now
+          </a>
+        </motion.div>
+      </div>
+
+      {/* Scroll Indicator */}
+      <motion.div 
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.5, duration: 1 }}
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2"
+      >
+        <span className="text-[10px] uppercase tracking-widest text-text-main/50">Scroll</span>
+        <div className="w-[1px] h-12 bg-gradient-to-b from-text-main/50 to-transparent" />
+      </motion.div>
+    </section>
+  );
+}