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,78 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+export default function About({ dict }: { dict: any }) {
+  const stats = [
+    { value: "5+", label: dict.about.stats.years },
+    { value: "10K+", label: dict.about.stats.guests },
+    { value: "4.8★", label: dict.about.stats.rating },
+  ];
+
+  return (
+    <section id="about" className="py-24 bg-sand-light text-sea-dark overflow-hidden">
+      <div className="container mx-auto px-6 max-w-6xl">
+        <div className="grid md:grid-cols-2 gap-16 items-center">
+
+          {/* Text side */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8 }}
+            className="space-y-6"
+          >
+            {/* Label with decorative lines */}
+            <div className="flex items-center gap-3">
+              <span className="w-8 h-px bg-coral" />
+              <h2 className="text-sm font-bold tracking-widest uppercase text-coral">{dict.about.title}</h2>
+              <span className="w-8 h-px bg-coral" />
+            </div>
+
+            <h3 className="text-4xl md:text-5xl font-serif leading-tight" dangerouslySetInnerHTML={{ __html: dict.about.heading }}></h3>
+
+            <p className="text-base opacity-75 leading-relaxed">
+              {dict.about.p1}
+            </p>
+            <p className="text-base opacity-75 leading-relaxed">
+              {dict.about.p2}
+            </p>
+
+            {/* Stats row */}
+            <div className="grid grid-cols-3 gap-6 pt-6 border-t border-sand-dark/40">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-2xl md:text-3xl font-serif font-bold text-sea-dark">{stat.value}</div>
+                  <div className="text-xs text-gray-500 uppercase tracking-wide mt-1">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Image side */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="relative h-[520px] w-full"
+          >
+            {/* Shadow shape behind */}
+            <div className="absolute inset-0 bg-sand-dark/25 rounded-t-full rounded-br-full transform translate-x-5 translate-y-5" />
+            {/* Image clipped to shape */}
+            <div className="absolute inset-0 rounded-t-full rounded-br-full overflow-hidden shadow-2xl">
+              <Image
+                src="/moy-beach.jpg"
+                alt="Moy Beach Atmosphere"
+                fill
+                className="object-cover"
+                sizes="(max-width: 768px) 100vw, 50vw"
+              />
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}