Merge branch 'main' of https://git.ayris.tech/ayrisdev/kitebeachakyaka

app/[lang]/page.tsx

@@ -65,6 +65,33 @@ const testimonials = [
 import { getDictionary, Locale } from "./dictionaries";
 import prisma from "@/lib/prisma";
 
+async function getInstagramData() {
+  const url = 'https://instagram120.p.rapidapi.com/api/instagram/posts';
+  const options = {
+    method: 'POST',
+    headers: {
+      'x-rapidapi-key': process.env.RAPIDAPI_KEY || '',
+      'x-rapidapi-host': 'instagram120.p.rapidapi.com',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      username: 'kitebeachakyaka',
+      maxId: ''
+    }),
+    next: { revalidate: 86400 }
+  };
+
+  try {
+    const res = await fetch(url, options);
+    if (!res.ok) throw new Error('Instagram fetch failed');
+    const data = await res.json();
+    return data.result?.edges?.slice(0, 4).map((edge: any) => edge.node) || [];
+  } catch (err) {
+    console.error("Instagram fetch error:", err);
+    return [];
+  }
+}
+
 export default async function Home({ params }: { params: Promise<{ lang: string }> }) {
   const { lang } = await params;
   const dict = await getDictionary(lang as Locale);
@@ -106,6 +133,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
   };
 
   const displayFeatures = dbFeatures.length > 0 ? dbFeatures : defaultFeatures;
+  const instagramPosts = await getInstagramData();
 
   return (
     <div className="flex flex-col min-h-screen">
@@ -355,7 +383,7 @@ export default async function Home({ params }: { params: Promise<{ lang: string
               activities.map((act, i) => (
                 <ScrollReveal
                   key={act.id}
-                  className={activities.length === 1 ? "md:col-span-3" : i === 0 || i === 3 ? "md:col-span-2" : ""}
+                  className={i === 0 || i === 3 ? "md:col-span-2" : ""}
                   delay={i * 50}
                 >
                   <Link href="/aktiviteler" className={`group relative block rounded-3xl overflow-hidden ${activities.length === 1 ? "aspect-[4/3] md:aspect-video" : i < 2 ? "h-[400px]" : "h-[280px]"}`}>
@@ -465,6 +493,59 @@ export default async function Home({ params }: { params: Promise<{ lang: string
         </div>
       </section>
 
+      {/* ──────────────────────────────────────────
+          INSTAGRAM FEED
+      ────────────────────────────────────────── */}
+      {instagramPosts.length > 0 && (
+        <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">
+                    <Icons.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"
+              >
+                Bizi Takip Edin
+                <ArrowRight className="w-3.5 h-3.5" />
+              </a>
+            </div>
+          </div>
+        </section>
+      )}
+
       {/* ──────────────────────────────────────────
           TESTIMONIALS
       ────────────────────────────────────────── */}