95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
"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>
|
||
);
|
||
}
|