Merge pull request #4 from nexa-sol/landing-page-ui

Landing page UI

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,16 @@
+"use client";
 import Link from "next/link";
+import { Motion, Staggered } from "tailwind-motlib";
+import {
+  Shield,
+  Zap,
+  Brain,
+  Scan,
+  BarChart3,
+  Filter,
+  Send,
+  TrendingDown,
+} from "lucide-react";
 
 export default function Landing() {
   return (
@@ -12,25 +24,29 @@ export default function Landing() {
       {/* Hero */}
       <section className="relative z-10 px-6 pt-32 pb-24 max-w-7xl mx-auto">
         <div className="max-w-3xl">
-          <h1 className="text-5xl md:text-6xl font-semibold leading-tight">
+          <h1 className="text-5xl md:text-6xl font-semibold leading-tight animate-fade-in-up">
-            Trade memecoins <br />
+            Your copilot for <br />
             <span className="text-transparent bg-clip-text bg-linear-to-r from-primary to-accent">
-              without trading blind
+              memecoin trading
             </span>
           </h1>
 
-          <p className="mt-6 text-lg text-muted-foreground max-w-xl">
+          <p className="mt-6 text-lg text-muted-foreground max-w-xl animate-fade-in-up animate-delay-100">
-            Nexa filters noise, intercepts high-rug setups, and executes faster,
+            Catch rugs before they happen, execute trades at Solana
-            so you spend less time guessing and more time surviving.
+            speed, and automate the research pro traders do.
           </p>
 
           <div className="mt-10 flex gap-4">
-            <Link href="/markets">
+            <Link
+              href="/markets"
+              className="animate-fade-in-up animate-duration-500 animate-delay-200"
+            >
               <button className="px-6 py-3 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition">
                 Open Terminal
               </button>
             </Link>
             <Link
+              className="animate-fade-in-up animate-duration-500 animate-delay-300"
               href="https://github.com/nexa-sol/nexa-trade?tab=readme-ov-file#-nexa-roadmap--alpha-release"
               target="_blank"
             >
@@ -42,104 +58,102 @@ export default function Landing() {
         </div>
       </section>
 
-      {/* Live signal strip */}
+      {/* Features */}
-      {/* <section className="relative z-10 border-y border-border/60 bg-card/40 backdrop-blur">
-        <div className="max-w-7xl mx-auto px-6 py-4 flex gap-8 text-sm text-muted-foreground overflow-x-auto">
-          <span>🟢 12 rugs intercepted today</span>
-          <span>⚡ Median execution: 420ms</span>
-          <span>📉 Top 10 holder risk flagged</span>
-          <span>🔍 Bundler detected pre-launch</span>
-        </div>
-      </section> */}
-
-      {/* 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 className="grid md:grid-cols-3 gap-8">
-          <div>
+          <Staggered stagger={100}>
-            <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,
+                icon: Shield,
-              deployer behavior, and liquidity signals, before execution.
+                title: "Warns You Before Rugs",
-            </p>
+                desc: "Nexa scans each token for risks like holder concentration, grouped wallets, deployer history, and liquidity issues. You see exactly what's wrong before you trade.",
+              },
+              {
+                icon: Zap,
+                title: "Routes Trades Fast",
+                desc: "Nexa handles batching and Jupiter routing to keep your execution quick when the network is busy. You catch opportunities while they're still there.",
+              },
+              {
+                icon: Brain,
+                title: "Does the Research For You",
+                desc: "Nexa runs wallet analysis, deployer vetting, and liquidity checks on every trade. You skip the manual work and focus on timing.",
+              },
+            ].map(({ icon: Icon, title, desc }, i) => (
+              <Motion
+                key={i}
+                className="animate-fade-in-up animate-duration-500"
+              >
+                <div className="opacity-0 group">
+                  <div className="p-6 rounded-xl border border-border h-full transition-colors duration-500 bg-card/20 hover:bg-card/40 hover:border-primary/30">
+                    <div className="flex flex-col items-center">
+                      <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/15 transition-colors duration-500">
+                        <Icon className="w-6 h-6 text-primary" />
                       </div>
-
+                      <h3 className="text-xl font-medium mb-3">{title}</h3>
-          <div>
-            <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>
-
+                    <p className="text-muted-foreground text-sm leading-relaxed text-center">
-          <div>
+                      {desc}
-            <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
-              routing keep latency low even during peak volume.
                     </p>
                   </div>
                 </div>
-      </section>
+              </Motion>
-
+            ))}
-      {/* Risk interception highlight */}
+          </Staggered>
-      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
-        <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
-            call. But it won't be blind.
-          </p>
         </div>
       </section>
 
       {/* How it works */}
       <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
-        <h2 className="text-3xl font-semibold mb-12">How it works</h2>
+        <Motion className="animate-fade-in-right animate-duration-800">
-
+          <h2 className="text-3xl font-semibold mb-12 opacity-0">
-        <div className="grid md:grid-cols-4 gap-8 text-sm">
+            How Nexa works
-          <div className="text-muted-foreground">
-            <span className="block text-foreground font-medium mb-1">
-              1. Detect
-            </span>
-            New pairs, migrations, and liquidity events are tracked in real
-            time.
-          </div>
-          <div className="text-muted-foreground">
-            <span className="block text-foreground font-medium mb-1">
-              2. Analyze
-            </span>
-            Risk signals, holder distribution, and deployer behavior are scored.
-          </div>
-          <div className="text-muted-foreground">
-            <span className="block text-foreground font-medium mb-1">
-              3. Decide
-            </span>
-            AI filters or manual overrides determine execution eligibility.
-          </div>
-          <div className="text-muted-foreground">
-            <span className="block text-foreground font-medium mb-1">
-              4. Execute
-            </span>
-            Trades are routed through Jupiter with minimal latency.
-          </div>
-        </div>
-      </section>
-
-      {/* Fees & alignment */}
-      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
-        <div className="max-w-2xl">
-          <h2 className="text-3xl font-semibold mb-4">
-            Fees that scale with success
           </h2>
-          <p className="text-muted-foreground">
+        </Motion>
-            Nexa charges a small platform fee on executed trades, with optional
+
-            AI and quant features available per-use. No subscriptions. No hidden
+        <div className="grid md:grid-cols-4 gap-6">
-            incentives.
+          <Staggered stagger={150}>
+            {[
+              {
+                icon: Scan,
+                step: "Watches",
+                desc: "Tracks new pairs, migrations, and liquidity events in real time.",
+              },
+              {
+                icon: BarChart3,
+                step: "Scores",
+                desc: "Analyzes risk signals, holder distribution, and deployer behavior.",
+              },
+              {
+                icon: Filter,
+                step: "Flags",
+                desc: "Alerts you to risks automatically, or lets you override and trade anyway.",
+              },
+              {
+                icon: Send,
+                step: "Routes",
+                desc: "Executes your trades through Jupiter with minimal latency.",
+              },
+            ].map(({ icon: Icon, step, desc }, i) => (
+              <Motion key={i} className="animate-fade-in-up">
+                <div className="opacity-0">
+                  <div className="p-5 rounded-lg border border-border h-full transition-colors duration-500 bg-card/20 hover:bg-card/40 hover:border-primary/30">
+                    <div className="flex flex-col items-center">
+                      <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3 bg-primary/10 group-hover:bg-primary/20 transition-colors duration-500">
+                        <Icon className="w-5 h-5 text-primary" />
+                      </div>
+                      <span className="block text-foreground font-semibold text-base mb-2">
+                        {step}
+                      </span>
+                    </div>
+                    <p className="text-muted-foreground text-sm leading-relaxed text-center">
+                      {desc}
                     </p>
                   </div>
+                </div>
+              </Motion>
+            ))}
+          </Staggered>
+        </div>
       </section>
     </main>
   );