add neroswap icon and dynamic feature to bento

apps/web/src/app/globals.css

@@ -85,7 +85,9 @@
     box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     position: relative;
     overflow: hidden;
-    transition: all 300ms;
+    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
+                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
+                border-color 300ms ease;
   }
 
   .section-container {
@@ -100,6 +102,52 @@
     border-color: hsl(var(--primary) / 0.3);
   }
 
+  /* Bento grid entrance animation */
+  @keyframes bento-enter {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .bento-item {
+    animation: bento-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  /* Hover lift for bento links */
+  .bento-item:hover .glass-card {
+    transform: translateY(-4px);
+    box-shadow: 0 32px 64px -16px rgb(0 0 0 / 0.3);
+  }
+
+  /* Focus-visible ring for keyboard navigation */
+  .bento-item:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 4px;
+    border-radius: 2.5rem;
+  }
+
+  /* Respect reduced motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .bento-item {
+      animation: none;
+    }
+    .bento-item:hover .glass-card {
+      transform: none;
+    }
+    .glass-card {
+      transition: border-color 300ms;
+    }
+    .glass-card .object-contain,
+    .glass-card .object-cover {
+      transition: none !important;
+    }
+  }
+
   /* Typography customization for blog posts */
   .prose {
     --tw-prose-body: hsl(var(--foreground));

apps/web/src/components/portfolio/bento-grid.tsx

@@ -6,7 +6,7 @@ export const PortfolioGrid = () => {
   return (
     <section className="grid grid-cols-1 md:grid-cols-4 auto-rows-[300px] gap-6 w-full max-w-7xl mx-auto p-4 z-10 relative">
       {/* Row 1: r/CryptoCurrency (2x1) */}
-      <Link href="https://rcryptocurrency.com" target="_blank" rel="noopener noreferrer" className="md:col-span-2">
+      <Link href="https://rcryptocurrency.com" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "0ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-slate-950/90 cursor-pointer">
           <div className="absolute inset-0 z-20 bg-gradient-to-t from-black/95 via-black/40 to-transparent p-8 flex flex-col justify-end items-center text-center pointer-events-none">
             <h3 className="text-3xl font-bold text-white shadow-black drop-shadow-xl tracking-tight">r/CryptoCurrency</h3>
@@ -27,7 +27,7 @@ export const PortfolioGrid = () => {
       </Link>
 
       {/* Row 1: MoonPlace (1x1) */}
-      <Link href="https://moonplace.io" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
+      <Link href="https://moonplace.io" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-1" style={{ animationDelay: "75ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-indigo-50/95 dark:!bg-indigo-950/95 !border-indigo-500/20 cursor-pointer">
            <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
             <h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
@@ -46,7 +46,7 @@ export const PortfolioGrid = () => {
       </Link>
 
       {/* Row 1-2: Smirk Wallet (1x2 tall, far right) */}
-      <Link href="https://smirk.cash" target="_blank" rel="noopener noreferrer" className="md:col-span-1 md:row-span-2">
+      <Link href="https://smirk.cash" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-1 md:row-span-2" style={{ animationDelay: "150ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-amber-50/95 dark:!bg-amber-950/95 !border-amber-500/20 cursor-pointer">
            <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
             <h3 className="text-xl font-bold text-amber-700 dark:text-amber-400">Smirk Wallet</h3>
@@ -64,40 +64,27 @@ export const PortfolioGrid = () => {
         </Card>
       </Link>
 
-      {/* Row 2: Neroswap (1x1) */}
+      {/* Row 2: Neroswap (2x1) */}
-      <Link href="https://neroswap.com" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
+      <Link href="https://neroswap.com" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "225ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-yellow-50/95 dark:!bg-yellow-950/95 !border-yellow-500/20 cursor-pointer">
           <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
             <h3 className="text-xl font-bold text-yellow-700 dark:text-yellow-400">Neroswap</h3>
             <p className="text-sm mt-1 text-foreground font-semibold">DEX &amp; CEX orderbook aggregator.</p>
           </div>
-        </Card>
+          <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-yellow-500/10 shadow-inner">
-      </Link>
+            <Image
-
+              src="/images/products/neroswap.png"
-      {/* Row 2: Privacy Labs (1x1) */}
+              alt="Screenshot of Neroswap DEX and CEX orderbook aggregator interface"
-      <Link href="https://play.wowne.ro" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
+              fill
-        <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20 cursor-pointer">
+              className="object-cover opacity-50 transition-transform duration-1000 group-hover:scale-105"
-          <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
+              sizes="(max-width: 768px) 100vw, 50vw"
-            <h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
+            />
-            <ul className="mt-2 space-y-1 text-sm text-foreground font-semibold">
-              <li className="flex items-center gap-2">Monerogue / Wownerogue</li>
-              <li className="flex items-center gap-2"><span className="text-xs opacity-60">(Blockchain Gaming)</span></li>
-            </ul>
           </div>
-           <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-orange-500/10 shadow-inner">
-              <Image
-                src="/images/products/privacy-labs.png"
-                alt="Screenshots of Monerogue roguelike game and Wowne.ro WebAssembly wallet interface"
-                fill
-                className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
-                sizes="(max-width: 768px) 100vw, 25vw"
-              />
-           </div>
         </Card>
       </Link>
 
       {/* Row 2: Bauhaus Echo (1x1) */}
-      <Link href="/products/bauhaus-echo" className="md:col-span-1">
+      <Link href="/products/bauhaus-echo" className="bento-item md:col-span-1" style={{ animationDelay: "300ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-blue-50/95 dark:!bg-blue-950/95 !border-blue-500/20 cursor-pointer">
           <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
             <h3 className="text-xl font-bold text-blue-700 dark:text-blue-400">Bauhaus Echo</h3>
@@ -115,8 +102,8 @@ export const PortfolioGrid = () => {
         </Card>
       </Link>
 
-      {/* Row 3: Occupy Wallets (4x1, full width) */}
+      {/* Row 3: Occupy Wallets (2x1) */}
-      <Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="md:col-span-4">
+      <Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "375ms" }}>
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] cursor-pointer">
           <div className="absolute inset-0 z-20 p-8 flex flex-col justify-center items-center text-center pointer-events-none">
             <h3 className="text-2xl font-bold text-zinc-900 dark:text-white drop-shadow-sm bg-white/60 dark:bg-black/60 backdrop-blur-3xl rounded-xl px-6 py-2">Occupy Wallets</h3>
@@ -133,6 +120,28 @@ export const PortfolioGrid = () => {
           </div>
         </Card>
       </Link>
+
+      {/* Row 3: Privacy Labs (2x1) */}
+      <Link href="https://play.wowne.ro" target="_blank" rel="noopener noreferrer" className="bento-item md:col-span-2" style={{ animationDelay: "450ms" }}>
+        <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20 cursor-pointer">
+          <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
+            <h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
+            <ul className="mt-2 space-y-1 text-sm text-foreground font-semibold">
+              <li className="flex items-center gap-2">Monerogue / Wownerogue</li>
+              <li className="flex items-center gap-2"><span className="text-xs opacity-60">(Blockchain Gaming)</span></li>
+            </ul>
+          </div>
+           <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-orange-500/10 shadow-inner">
+              <Image
+                src="/images/products/privacy-labs.png"
+                alt="Screenshots of Monerogue roguelike game and Wowne.ro WebAssembly wallet interface"
+                fill
+                className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
+                sizes="(max-width: 768px) 100vw, 50vw"
+              />
+           </div>
+        </Card>
+      </Link>
     </section>
   );
 };