Update gallery to bento grid, add real reviews, update phone numbers and locations

2026-07-15 13:51:22 +03:00
parent d4bcbb0cc3
commit 7a874ab11d
43 changed files with 1234 additions and 790 deletions
@@ -0,0 +1,90 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Star, ArrowRight } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+interface AboutSectionProps {
+  aboutData: {
+    image: string;
+    badge: string;
+    statsGuestCount: string;
+    statsGuestLabel: string;
+    statsYearCount: string;
+    statsYearLabel: string;
+    badgeIkoTitle: string;
+    badgeIkoLabel: string;
+    titleLine1: string;
+    titleLine2: string;
+    titleHighlight: string;
+    description1: string;
+    description2: string;
+  };
+  lang: string;
+}
+
+export default function AboutSection({ aboutData, lang }: AboutSectionProps) {
+  return (
+    <section className="py-28 bg-background overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
+          <ScrollReveal className="relative">
+            <div className="relative h-[540px] lg:h-[660px] rounded-3xl overflow-hidden shadow-2xl">
+              <Image
+                src={aboutData.image}
+                alt={aboutData.badge}
+                fill
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                className="object-cover"
+              />
+            </div>
+            {/* Stats card */}
+            <div className="absolute -bottom-5 -right-4 md:-right-8 bg-white rounded-2xl p-6 shadow-xl border border-sand">
+              <div className="grid grid-cols-2 gap-6 divide-x divide-sand">
+                <div className="text-center">
+                  <span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsGuestCount}</span>
+                  <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsGuestLabel}</span>
+                </div>
+                <div className="text-center pl-6">
+                  <span className="block font-serif text-3xl font-bold text-primary">{aboutData.statsYearCount}</span>
+                  <span className="block text-[10px] text-muted uppercase tracking-wider mt-1">{aboutData.statsYearLabel}</span>
+                </div>
+              </div>
+            </div>
+            {/* IKO badge */}
+            <div className="absolute -top-4 -left-4 bg-accent text-white rounded-2xl p-4 shadow-lg">
+              <Star className="w-4 h-4 mb-1" fill="white" />
+              <span className="block text-xs font-bold leading-none">{aboutData.badgeIkoTitle}</span>
+              <span className="block text-[10px] opacity-80 mt-0.5">{aboutData.badgeIkoLabel}</span>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal delay={200}>
+            <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-5">
+              {aboutData.badge}
+            </span>
+            <h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-dark leading-[1.05] mb-8">
+              {aboutData.titleLine1}<br />{aboutData.titleLine2}<br />
+              <span className="text-primary italic">{aboutData.titleHighlight}</span>
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-5">
+              {aboutData.description1}
+            </p>
+            <p className="text-gray-600 leading-relaxed mb-10">
+              {aboutData.description2}
+            </p>
+            <div className="section-line mb-8" />
+            <Link
+              href={`/${lang}/hakkimizda`}
+              className="inline-flex items-center gap-2 text-dark font-bold text-sm tracking-wide group"
+            >
+              <span className="border-b-2 border-accent pb-0.5">
+                {lang === "en" ? "Read Our Story" : "Hikayemizi Okuyun"}
+              </span>
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1.5 transition-transform" />
+            </Link>
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}