landing Animations

package-lock.json

@@ -15,7 +15,9 @@
         "radix-ui": "^1.4.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
-        "tailwind-merge": "^3.4.0"
+        "tailwind-animations": "^1.0.1",
+        "tailwind-merge": "^3.4.0",
+        "tailwind-motlib": "^1.0.4"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -7371,6 +7373,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwind-animations": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tailwind-animations/-/tailwind-animations-1.0.1.tgz",
+      "integrity": "sha512-5ouCdgfGS4kcyuzRSb/1O3o9f5Akssi7ue46PHfKjvPLMWjtnzmqM8i6ElES3tKVTyhjSaTPfLti7aB7WSxhZg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": "^4.0.0"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
@@ -7381,11 +7392,16 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-motlib": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tailwind-motlib/-/tailwind-motlib-1.0.4.tgz",
+      "integrity": "sha512-4M80sHBTmXQn/fWo8xZYRDlr8yqLv4ZC2MzpHw8MsGPTbXV75Y3NW518ec3CWSiO3WSEZlhXfOHBKpxEvCuoRw==",
+      "license": "ISC"
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/tapable": {

package.json

@@ -15,7 +15,9 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-animations": "^1.0.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-motlib": "^1.0.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/globals.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import 'tailwind-animations';
+
+@tailwind utilities;
 
 @custom-variant dark (&:is(.dark *));
 

src/app/page.tsx

@@ -1,4 +1,6 @@
+"use client";
 import Link from "next/link";
+import { Motion, Staggered } from "tailwind-motlib";
 
 export default function Landing() {
   return (
@@ -55,45 +57,60 @@ export default function Landing() {
       {/* Why Nexa */}
       <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
         <div className="grid md:grid-cols-3 gap-10">
-          <div>
+          <Staggered stagger={100}>
-            <h3 className="text-xl font-medium mb-2">Risk-aware by default</h3>
+            <Motion className="visible animate-fade-in-up">
+              <div className="invisible">
+                <h3 className="text-xl font-medium mb-2">
+                  Risk-aware by default
+                </h3>
                 <p className="text-muted-foreground">
-              Every trade is evaluated against holder concentration, bundlers,
+                  Every trade is evaluated against holder concentration,
-              deployer behavior, and liquidity signals, before execution.
+                  bundlers, deployer behavior, and liquidity signals, before
+                  execution.
                 </p>
               </div>
+            </Motion>
 
-          <div>
+            <Motion className="visible animate-fade-in-up">
-            <h3 className="text-xl font-medium mb-2">AI where it matters</h3>
+              <div className="invisible">
+                <h3 className="text-xl font-medium mb-2">
+                  AI where it matters
+                </h3>
                 <p className="text-muted-foreground">
                   No magic predictions. Just automated checks that experienced
                   traders already do, instantly and consistently.
                 </p>
               </div>
+            </Motion>
 
-          <div>
+            <Motion className="visible animate-fade-in-up">
+              <div className="invisible">
                 <h3 className="text-xl font-medium mb-2">Built for speed</h3>
                 <p className="text-muted-foreground">
-              Optimized request batching, Solana-native execution, and Jupiter
+                  Optimized request batching, Solana-native execution, and
-              routing keep latency low even during peak volume.
+                  Jupiter routing keep latency low even during peak volume.
                 </p>
               </div>
+            </Motion>
+          </Staggered>
         </div>
       </section>
 
       {/* Risk interception highlight */}
-      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
+      <Motion className="animate-fade-in-left">
+        <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto opacity-0">
           <div className="rounded-2xl border border-border bg-card/60 backdrop-blur p-10">
             <h2 className="text-3xl font-semibold mb-4">
               Nexa can stop you before you buy a rug
             </h2>
             <p className="text-muted-foreground max-w-2xl">
               When high-risk patterns are detected, Nexa blocks execution by
-            default and tells you exactly why. If you still want in, that's your
+              default and tells you exactly why. If you still want in, that's
-            call. But it won't be blind.
+              your call. But it won't be blind.
             </p>
           </div>
         </section>
+      </Motion>
 
       {/* How it works */}
       <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">