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,122 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Star, Quote, Play } from "lucide-react";
+import Image from "next/image";
+
+const testimonials = [
+  {
+    name: "Ayşe Y.",
+    platform: "Google Yorumu",
+    text: "Ege'de gördüğüm en kaliteli mekanlardan biri. Yemekler harika, denizi zaten muhteşem. Özellikle kokteyllerini denemelisiniz.",
+    rating: 5,
+  },
+  {
+    name: "David M.",
+    platform: "TripAdvisor",
+    text: "Mükemmel bir deneyimdi. Ailece geldik ve çocuklar da biz de çok eğlendik. Personel çok ilgili ve güler yüzlüydü.",
+    rating: 5,
+  },
+  {
+    name: "Caner K.",
+    platform: "Google Yorumu",
+    text: "Harika bir atmosfer. Akşam yemeği için tercih ettik, gün batımı manzarası eşliğinde unutulmaz bir anı oldu.",
+    rating: 4,
+  },
+];
+
+export default function VideoTestimonials() {
+  return (
+    <section className="bg-sea-dark text-white overflow-hidden relative">
+      <div className="grid lg:grid-cols-2">
+
+        {/* Video / Image Panel */}
+        <div className="relative h-[50vh] lg:h-auto min-h-[500px] overflow-hidden">
+          <Image
+            src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=1200"
+            alt="Moy Beach Video"
+            fill
+            className="object-cover"
+            sizes="(max-width: 1024px) 100vw, 50vw"
+          />
+          <div className="absolute inset-0 bg-sea-dark/50 z-10" />
+
+          {/* Play button overlay */}
+          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-6 p-8 text-center">
+            <a
+              href="https://www.youtube.com/@moybeach"
+              target="_blank"
+              rel="noreferrer"
+              className="group w-20 h-20 bg-white/15 hover:bg-white/25 border-2 border-white/60 hover:border-white rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 backdrop-blur-sm"
+              aria-label="Videoyu izle"
+            >
+              <Play className="w-7 h-7 text-white ml-1 group-hover:scale-110 transition-transform" fill="white" />
+            </a>
+            <p className="text-sand/80 text-sm tracking-wide">Moy Beach&apos;i Keşfedin</p>
+          </div>
+        </div>
+
+        {/* Testimonials Panel */}
+        <div className="py-20 px-8 lg:px-14 flex flex-col justify-center">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="w-8 h-px bg-coral" />
+            <h2 className="text-sm font-bold tracking-widest uppercase text-coral">Referanslar</h2>
+          </div>
+          <h3 className="text-4xl md:text-5xl font-serif mb-10">Misafirlerimiz<br />Ne Diyor?</h3>
+
+          <div className="space-y-6">
+            {testimonials.map((testimonial, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: 40 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: index * 0.15 }}
+                className="bg-white/6 hover:bg-white/10 p-6 rounded-2xl relative border border-white/5 hover:border-white/10 transition-colors duration-300"
+              >
+                <Quote className="absolute top-5 right-6 text-coral/20 w-10 h-10" />
+
+                {/* Stars */}
+                <div className="flex text-coral mb-3">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-3.5 h-3.5 ${i < testimonial.rating ? "fill-current" : "opacity-25"}`}
+                    />
+                  ))}
+                </div>
+
+                <p className="text-base italic text-sand-light/90 mb-5 leading-relaxed">
+                  &quot;{testimonial.text}&quot;
+                </p>
+
+                <div className="flex items-center gap-3">
+                  <div className="w-9 h-9 bg-coral rounded-full flex items-center justify-center font-bold text-sm shrink-0">
+                    {testimonial.name.charAt(0)}
+                  </div>
+                  <div>
+                    <p className="font-medium text-sm">{testimonial.name}</p>
+                    <p className="text-xs text-gray-400">{testimonial.platform}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Aggregate rating */}
+          <div className="mt-8 flex items-center gap-4 pt-6 border-t border-white/10">
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-bold font-serif">4.8</span>
+              <span className="text-coral text-lg">/ 5</span>
+            </div>
+            <p className="text-sm text-gray-400 leading-snug">
+              Google &amp; TripAdvisor değerlendirmelerine göre
+              <br />
+              <span className="text-sand/60">(150+ Yorum)</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}