112 lines
4.3 KiB
TypeScript
112 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
export interface InstagramPost {
|
|
id: string;
|
|
url: string;
|
|
imageUrl: string;
|
|
caption: string;
|
|
isVideo: boolean;
|
|
}
|
|
|
|
function InstagramIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-4 h-4">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
|
<circle cx="12" cy="12" r="4" />
|
|
<circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function InstagramFeed({ dict, posts = [] }: { dict: any, posts?: InstagramPost[] }) {
|
|
return (
|
|
<section className="py-24 bg-sand-light text-sea-dark overflow-hidden">
|
|
<div className="container mx-auto px-6 max-w-7xl">
|
|
|
|
{/* Header */}
|
|
<div className="text-center mb-14">
|
|
<div className="flex items-center justify-center gap-3 mb-4">
|
|
<span className="w-8 h-px bg-coral" />
|
|
<h2 className="text-sm font-bold tracking-widest uppercase text-coral flex items-center gap-2">
|
|
<InstagramIcon />
|
|
{dict.social.title}
|
|
</h2>
|
|
<span className="w-8 h-px bg-coral" />
|
|
</div>
|
|
|
|
<h3 className="text-4xl md:text-5xl font-serif mb-5">{dict.social.heading}</h3>
|
|
|
|
<a
|
|
href="https://www.instagram.com/moy_akyaka/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-sm text-sea-dark/60 hover:text-coral transition-colors tracking-wide"
|
|
>
|
|
<InstagramIcon />
|
|
@moy_akyaka
|
|
</a>
|
|
</div>
|
|
|
|
{/* Reels grid */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
|
{posts.map((post) => (
|
|
<a
|
|
key={post.id}
|
|
href={post.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:shadow-sea-dark/10 transition-all duration-500 hover:-translate-y-1 block"
|
|
>
|
|
{/* Thin coral top border accent */}
|
|
<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-coral/0 via-coral to-coral/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10" />
|
|
|
|
<div className="relative aspect-[4/5] w-full overflow-hidden bg-sand-dark/10">
|
|
<img
|
|
src={post.imageUrl ? `/api/instagram-proxy?url=${encodeURIComponent(post.imageUrl)}` : ''}
|
|
alt={post.caption ? post.caption.substring(0, 50) : 'Instagram Post'}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
|
|
{/* Hover Overlay */}
|
|
<div className="absolute inset-0 bg-sea-dark/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
<div className="text-white transform scale-90 group-hover:scale-100 transition-transform duration-300">
|
|
{post.isVideo ? (
|
|
<svg className="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
) : (
|
|
<InstagramIcon />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{post.caption && (
|
|
<div className="p-4">
|
|
<p className="text-sm text-sea-dark/80 line-clamp-2">
|
|
{post.caption}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="text-center mt-12">
|
|
<a
|
|
href="https://www.instagram.com/moy_akyaka/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="btn-shimmer inline-flex items-center gap-2.5 bg-sea-dark hover:bg-sea-blue text-white px-8 py-3.5 rounded-full text-sm tracking-widest uppercase font-medium transition-colors shadow-md hover:shadow-lg"
|
|
>
|
|
<InstagramIcon />
|
|
{dict.social.button}
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|