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,63 @@
+import { ArrowRight, Camera } from "lucide-react";
+import ScrollReveal from "@/components/ScrollReveal";
+
+interface InstagramFeedProps {
+  instagramPosts: any[];
+  lang: string;
+}
+
+export default function InstagramFeed({ instagramPosts, lang }: InstagramFeedProps) {
+  if (!instagramPosts || instagramPosts.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="py-28 bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <ScrollReveal className="text-center mb-16">
+          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
+            @kitebeachakyaka
+          </span>
+          <h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
+        </ScrollReveal>
+
+        <ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
+          {instagramPosts.map((post: any) => (
+            <a
+              key={post.id}
+              href={`https://instagram.com/p/${post.code}`}
+              target="_blank"
+              rel="noreferrer"
+              className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={post.image_versions2?.candidates[0]?.url}
+                alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              />
+              <div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
+                <Camera className="w-8 h-8 mb-3" />
+                <p className="text-xs line-clamp-3">
+                  {post.caption?.text}
+                </p>
+              </div>
+            </a>
+          ))}
+        </ScrollReveal>
+
+        <div className="text-center mt-12">
+          <a
+            href="https://instagram.com/kitebeachakyaka"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
+          >
+            {lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
+            <ArrowRight className="w-3.5 h-3.5" />
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}