added instagram embed

src/app/globals.css

@@ -146,23 +146,23 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  border: 1px dotted white;
+  border: 2px dotted #f5f5f5;
   pointer-events: none;
 }
 
 .dotted-border-corners::after {
   content: '';
   position: absolute;
-  top: -2px;
+  top: -3px;
-  left: -2px;
+  left: -3px;
-  right: -2px;
+  right: -3px;
-  bottom: -2px;
+  bottom: -3px;
   background: 
     /* Corner dots */
-    radial-gradient(circle, white 1px, transparent 1px) 0 0 / 4px 4px,
+    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 0 / 6px 6px,
-    radial-gradient(circle, white 1px, transparent 1px) 100% 0 / 4px 4px,
+    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 0 / 6px 6px,
-    radial-gradient(circle, white 1px, transparent 1px) 0 100% / 4px 4px,
+    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 0 100% / 6px 6px,
-    radial-gradient(circle, white 1px, transparent 1px) 100% 100% / 4px 4px;
+    radial-gradient(circle, #f5f5f5 2px, transparent 2px) 100% 100% / 6px 6px;
   background-repeat: no-repeat;
   pointer-events: none;
 }

src/components/InstagramFeed.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function InstagramFeed() {
+  useEffect(() => {
+    // Load LightWidget script for Instagram feed
+    const script = document.createElement('script');
+    script.src = 'https://cdn.lightwidget.com/widgets/lightwidget.js';
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      // Cleanup script on unmount
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="mb-8">
+      <p className="mb-4 text-base sm:text-lg">
+        <strong>Latest from our studio:</strong>
+      </p>
+      
+      {/* Instagram Feed Grid - Posts Only */}
+      <div className="mb-4">
+        <iframe 
+          src="//lightwidget.com/widgets/fc10b535bf965f9dac01cf8efd6d0189.html" 
+          scrolling="no" 
+          allowTransparency={true}
+          className="lightwidget-widget" 
+          style={{
+            width: '100%',
+            height: '200px',
+            border: 'none',
+            overflow: 'hidden'
+          }}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Temp-Placeholder.tsx

@@ -2,6 +2,7 @@
 
 import { CursorDotBackground } from "./CursorDotBackground";
 import { HorizontalAccordion } from "./HorizontalAccordion";
+import { InstagramFeed } from "./InstagramFeed";
 import { useEffect, useRef, useState } from "react";
 
 export function TempPlaceholder() {
@@ -67,7 +68,7 @@ export function TempPlaceholder() {
             className="rounded"
           />
           <div className="relative z-10">
-        <p className="text-sm text-gray-500 mb-6">10-12-2025</p>
+        <p className="text-sm text-gray-500 mb-6">Last updated: 10-12-2025</p>
 
         <h1 ref={titleRef} className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight">
           <span ref={titleInnerRef} className="inline-block">
@@ -146,7 +147,7 @@ export function TempPlaceholder() {
           <li className="flex items-start">
             <span className="text-gray-400 mr-3 mt-1">•</span>
             <a
-              href="https://www.instagram.com/p/DMykfRxssMR/?utm_source=ig_web_copy_link&igsh=Nmg0YXFuOG9yNGE2"
+              href="https://www.instagram.com/biohazardvfx/"
               className="hover:underline transition-all duration-200 hover:brightness-105 block leading-relaxed"
               style={{ color: '#ff4d00' }}
               target="_blank"
@@ -221,20 +222,7 @@ export function TempPlaceholder() {
           </li>
         </ul>
 
-        <p className="mb-4 md:mb-6 text-base sm:text-lg">
+        <InstagramFeed />
-          <strong>
-            Here's our{" "}
-            <a
-              href="https://www.instagram.com/biohazardvfx/"
-              className="hover:underline transition-all duration-200 hover:brightness-105 inline-block break-words"
-            style={{ color: '#ff4d00' }}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Instagram
-            </a>
-          </strong>
-        </p>
 
         <p className="mb-2 text-sm sm:text-base text-gray-300">
         Contact us:{" "}

src/lib/instagram-api.ts

@@ -0,0 +1,118 @@
+// Instagram API utilities for fetching posts and media
+// Based on Instagram Graph API documentation from Context7
+
+export interface InstagramPost {
+  id: string;
+  caption: string;
+  media_url: string;
+  permalink: string;
+  timestamp: string;
+  media_type: string;
+  thumbnail_url?: string;
+}
+
+// Instagram Graph API oEmbed endpoint for getting embeddable HTML
+export async function getInstagramEmbedHtml(postUrl: string): Promise<string | null> {
+  try {
+    const response = await fetch(
+      `https://graph.facebook.com/v23.0/instagram_oembed?url=${encodeURIComponent(postUrl)}`
+    );
+    
+    if (!response.ok) {
+      throw new Error('Failed to fetch Instagram embed');
+    }
+    
+    const data = await response.json();
+    return data.html || null;
+  } catch (error) {
+    console.error('Error fetching Instagram embed:', error);
+    return null;
+  }
+}
+
+// Fetch Instagram page media using Graph API (requires access token)
+export async function getInstagramPageMedia(
+  pageId: string, 
+  accessToken: string,
+  limit: number = 6
+): Promise<InstagramPost[]> {
+  try {
+    const response = await fetch(
+      `https://graph.facebook.com/v23.0/${pageId}/media?fields=id,caption,media_url,permalink,timestamp,media_type,thumbnail_url&limit=${limit}&access_token=${accessToken}`
+    );
+    
+    if (!response.ok) {
+      throw new Error('Failed to fetch Instagram media');
+    }
+    
+    const data = await response.json();
+    return data.data || [];
+  } catch (error) {
+    console.error('Error fetching Instagram media:', error);
+    return [];
+  }
+}
+
+// Alternative: Use a third-party service like EmbedSocial or SnapWidget
+export function getEmbedSocialWidget(username: string): string {
+  // This would return the embed code for services like EmbedSocial
+  return `
+    <div class="embedsocial-hashtag" data-ref="instagram" data-hashtag="${username}">
+      <a class="feed-powered-by-es" href="https://embedsocial.com/instagram/" target="_blank" title="Widget by EmbedSocial">Widget by EmbedSocial</a>
+    </div>
+  `;
+}
+
+// Sample data for development/demo purposes
+export const sampleInstagramPosts: InstagramPost[] = [
+  {
+    id: "1",
+    caption: "Working on some sick VFX for an upcoming project... 🔥",
+    media_url: "https://picsum.photos/400/400?random=1",
+    permalink: "https://www.instagram.com/p/sample1/",
+    timestamp: "2025-01-10T10:00:00Z",
+    media_type: "IMAGE"
+  },
+  {
+    id: "2", 
+    caption: "Behind the scenes of our latest work 🎬",
+    media_url: "https://picsum.photos/400/400?random=2",
+    permalink: "https://www.instagram.com/p/sample2/",
+    timestamp: "2025-01-08T15:30:00Z",
+    media_type: "VIDEO",
+    thumbnail_url: "https://picsum.photos/400/400?random=2"
+  },
+  {
+    id: "3",
+    caption: "Studio life - coffee, code, and VFX magic ✨",
+    media_url: "https://picsum.photos/400/400?random=3",
+    permalink: "https://www.instagram.com/p/sample3/",
+    timestamp: "2025-01-05T12:00:00Z",
+    media_type: "IMAGE"
+  },
+  {
+    id: "4",
+    caption: "Client project reveal - can't wait to share this one! 🚀",
+    media_url: "https://picsum.photos/400/400?random=4",
+    permalink: "https://www.instagram.com/p/sample4/",
+    timestamp: "2025-01-03T14:20:00Z",
+    media_type: "IMAGE"
+  },
+  {
+    id: "5",
+    caption: "Late night render session - the magic happens when everyone else is sleeping 🌙",
+    media_url: "https://picsum.photos/400/400?random=5",
+    permalink: "https://www.instagram.com/p/sample5/",
+    timestamp: "2025-01-01T22:30:00Z",
+    media_type: "VIDEO",
+    thumbnail_url: "https://picsum.photos/400/400?random=5"
+  },
+  {
+    id: "6",
+    caption: "New year, new projects, same dedication to quality VFX 💪",
+    media_url: "https://picsum.photos/400/400?random=6",
+    permalink: "https://www.instagram.com/p/sample6/",
+    timestamp: "2024-12-30T09:00:00Z",
+    media_type: "IMAGE"
+  }
+];