feat: integrate RapidAPI Instagram feed, apply Bodoni Moda font globally, disable prisma query logs, and fix UI minor issues

components/InstagramFeed.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-const reels = [
-  { id: 1, url: "https://www.instagram.com/reel/C97iqFqoSyl/embed" },
-  { id: 2, url: "https://www.instagram.com/reel/C-slzOcIQB3/embed" },
-  { id: 3, url: "https://www.instagram.com/reel/DLM8ng6MOKf/embed" },
-  { id: 4, url: "https://www.instagram.com/reel/DX-BDErM5qd/embed" },
-];
+export interface InstagramPost {
+  id: string;
+  url: string;
+  imageUrl: string;
+  caption: string;
+  isVideo: boolean;
+}
 
 function InstagramIcon() {
   return (
@@ -17,7 +18,7 @@ function InstagramIcon() {
   );
 }
 
-export default function InstagramFeed({ dict }: { dict: any }) {
+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">
@@ -48,24 +49,46 @@ export default function InstagramFeed({ dict }: { dict: any }) {
 
         {/* Reels grid */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
-          {reels.map((reel) => (
-            <div
-              key={reel.id}
-              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"
+          {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" />
 
-              <iframe
-                src={reel.url}
-                className="w-full h-[520px] md:h-[580px]"
-                style={{ border: "none", display: "block" }}
-                scrolling="no"
-                frameBorder="0"
-                allow="encrypted-media"
-                title={`Instagram Reel ${reel.id}`}
-              />
-            </div>
+              <div className="relative aspect-[4/5] w-full overflow-hidden bg-sand-dark/10">
+                <img 
+                  src={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>