feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings

2026-06-09 21:28:45 +03:00
parent 2b3392dcb1
commit a4ad9344a0
52 changed files with 4300 additions and 263 deletions
@@ -0,0 +1,94 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Instagram } from "@/components/InstagramIcon";
+
+type InstaPost = {
+  id: string;
+  imageUrl: string;
+  url: string;
+  caption: string;
+};
+
+export default function InstagramFeed({ posts }: { posts: InstaPost[] }) {
+  if (!posts || posts.length === 0) {
+    return null; // Eğer post yoksa veya API hata verdiyse gizle
+  }
+
+  return (
+    <section className="py-24 bg-charcoal text-white relative overflow-hidden">
+      <div className="container mx-auto px-6 lg:px-12">
+        <div className="flex flex-col items-center justify-center mb-16 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="flex items-center gap-4 mb-4"
+          >
+            <div className="p-4 bg-gradient-to-tr from-[#f09433] via-[#dc2743] to-[#bc1888] rounded-2xl shadow-lg">
+              <Instagram size={28} className="text-white" />
+            </div>
+            <h2 className="font-heading text-4xl md:text-5xl font-black">
+              @kozmosbeach
+            </h2>
+          </motion.div>
+          <motion.p 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="text-white/60 text-lg max-w-xl"
+          >
+            Bizi Instagram'da takip edin, en yeni etkinliklerden ve plajımızdaki harika anlardan anında haberdar olun.
+          </motion.p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {posts.map((post, i) => (
+            <motion.a
+              href={post.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              key={post.id || i}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: i * 0.1 }}
+              className="group relative aspect-[4/5] rounded-2xl overflow-hidden bg-gray-900 border border-white/10 block"
+            >
+              {/* Instagram image is loaded via img instead of next/image to avoid domain config issues with FB/IG CDNs */}
+              {post.imageUrl ? (
+                <img 
+                  src={post.imageUrl} 
+                  alt={post.caption || "Instagram Post"} 
+                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center bg-gray-800">
+                  <Instagram size={32} className="text-white/20" />
+                </div>
+              )}
+              
+              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-6">
+                <Instagram size={32} className="text-white mb-3" />
+              </div>
+            </motion.a>
+          ))}
+        </div>
+
+        <div className="mt-16 text-center">
+          <a 
+            href="https://instagram.com/kozmosbeach" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-charcoal rounded-xl font-bold hover:bg-turquoise hover:text-white transition-colors duration-300"
+          >
+            <Instagram size={20} />
+            Daha Fazlası İçin Takip Et
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}