Art in Motion 3x2 grid, Instagram-style social cards

- Art in Motion: 3-column grid with 4:3 aspect ratio, 2 rows of 3
- Connect on Socials: restyled as Instagram post cards with profile
  header, action icons (heart, comment, share), white card with
  shadow and gradient avatar ring

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/page.tsx

@@ -574,7 +574,7 @@ function AboutSection() {
           </h3>
           <div className="divider"></div>
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-8">
+        <div className="grid grid-cols-3 gap-3 mt-8">
           {[
             { src: '/images/about/painting-process.webp', alt: 'Ximena painting' },
             { src: '/images/art/mural-bio-centro.webp', alt: 'Mural Bio Centro Guembe' },
@@ -583,7 +583,7 @@ function AboutSection() {
             { src: '/images/about/portrait-4.jpg', alt: 'Ximena at ceremony' },
             { src: '/images/about/pachamama.jpg', alt: 'Ximena — ritual with smoke' },
           ].map((photo, index) => (
-            <div key={index} className="relative aspect-square rounded-lg overflow-hidden group">
+            <div key={index} className="relative aspect-[4/3] rounded-lg overflow-hidden group">
               <Image
                 src={photo.src}
                 alt={photo.alt}
@@ -798,25 +798,52 @@ function SocialSection() {
           <div className="divider"></div>
         </div>
 
-        {/* Image Grid */}
-        <a
-          href="https://www.instagram.com/xhiva_art"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-10 group"
-        >
+        {/* Instagram-style Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-5 mb-10">
           {instagramPosts.map((post, index) => (
-            <div key={index} className="relative aspect-square overflow-hidden rounded-lg">
-              <Image
-                src={post.image}
-                alt={post.alt}
-                fill
-                className="object-cover transition-all duration-500 group-hover:brightness-90"
-                style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
-              />
-            </div>
+            <a
+              key={index}
+              href="https://www.instagram.com/xhiva_art"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100"
+            >
+              {/* Post Header */}
+              <div className="flex items-center gap-2 px-3 py-2.5">
+                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] p-[2px]">
+                  <div className="w-full h-full rounded-full bg-white p-[1px]">
+                    <div className="relative w-full h-full rounded-full overflow-hidden">
+                      <Image src="/images/about/portrait-1.jpg" alt="xhiva_art" fill className="object-cover object-[30%_center]" />
+                    </div>
+                  </div>
+                </div>
+                <span className="text-xs font-semibold text-[var(--text-dark)]">xhiva_art</span>
+              </div>
+              {/* Post Image */}
+              <div className="relative aspect-square">
+                <Image
+                  src={post.image}
+                  alt={post.alt}
+                  fill
+                  className="object-cover"
+                  style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
+                />
+              </div>
+              {/* Post Actions */}
+              <div className="px-3 py-2.5 flex items-center gap-4">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)] group-hover:text-red-500 transition-colors">
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                </svg>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)]">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)]">
+                  <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                </svg>
+              </div>
+            </a>
           ))}
-        </a>
+        </div>
 
         {/* Social Buttons */}
         <div className="flex flex-col sm:flex-row justify-center items-center gap-4">