Added Landing Page with Navbar, Hero Section, and Agent Routing

package.json

@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^12.2.0",
+    "lucide-react": "^0.474.0",
+    "next": "15.1.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.6"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

src/app/base/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+
+const BasePage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-green-500 text-white">
+      <h1 className="text-5xl font-bold">Base Landing Page</h1>
+    </div>
+  );
+};
+
+export default BasePage;

src/app/eigen/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+
+const EigenPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-blue-500 text-white">
+      <h1 className="text-5xl font-bold">Eigen Landing Page</h1>
+    </div>
+  );
+};
+
+export default EigenPage;

src/app/globals.css

@@ -1,21 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Import Space Mono from Google Fonts */
+/* Set global font */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-primary: "Space Mono", monospace;
+  --button-primary: #1a1b1f;
+  --border-color: #2c2d30;
+  --card-content: #2c2d30;
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-primary);
 }

src/app/page.tsx

@@ -1,101 +1,88 @@
-import Image from "next/image";
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useRef, useState } from "react";
+import { Code2, BookOpen, Zap } from "lucide-react";
+import NavBar from "@/components/Navbar";
+import { useRouter } from "next/navigation";
+import WhatIs from "@/components/Landingpage/WhatIs";
 
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+import { motion } from "framer-motion";
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
+const Web3AssistanceLanding: React.FC = () => {
+  const router = useRouter();
+  return (
+    <div className="relative min-h-screen bg-[#0A192F] text-white overflow-hidden">
+      {/* Dynamic Background Elements */}
+      <div className="fixed inset-0 pointer-events-none">
+        {/* Floating Star-like Particles */}
+        {[...Array(50)].map((_, i) => (
+          <motion.div
+            key={`particle-${i}`}
+            className={`absolute rounded-full ${
+              i % 3 === 0
+                ? "w-1.5 h-1.5 bg-cyan-400/20"
+                : i % 2 === 0
+                ? "w-1 h-1 bg-blue-400/20"
+                : "w-0.5 h-0.5 bg-white/20"
+            }`}
+            animate={{
+              y: [0, -20, 0],
+              opacity: [0.2, 0.5, 0.2],
+              scale: [1, 1.2, 1],
+            }}
+            transition={{
+              duration: 3 + Math.random() * 4,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: Math.random() * 3,
+            }}
+            style={{
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+            }}
           />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
+        ))}
+
+        {/* Gradient Orbs */}
+        {[...Array(4)].map((_, i) => (
+          <motion.div
+            key={`orb-${i}`}
+            className="absolute w-[500px] h-[500px] rounded-full"
+            animate={{
+              scale: [1, 1.2, 1],
+              opacity: [0.1, 0.15, 0.1],
+            }}
+            transition={{
+              duration: 8 + Math.random() * 4,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: i * 2,
+            }}
+            style={{
+              background: `radial-gradient(circle, ${
+                i % 2 === 0 ? "rgba(34,211,238,0.1)" : "rgba(37,99,235,0.1)"
+              } 0%, transparent 70%)`,
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+              transform: `translate(-50%, -50%)`,
+            }}
           />
-          Go to nextjs.org →
-        </a>
-      </footer>
+        ))}
+
+        {/* Background Gradient Mesh */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-500/5 via-transparent to-transparent opacity-30" />
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-500/5 to-transparent" />
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10 pt-20">
+        <NavBar />
+        <div id="whatis">
+          <WhatIs />
+        </div>
+      </div>
     </div>
   );
-}
+};
+
+export default Web3AssistanceLanding;

src/app/warden/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+
+const WardenPage: React.FC = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-purple-500 text-white">
+      <h1 className="text-5xl font-bold">Warden Landing Page</h1>
+    </div>
+  );
+};
+
+export default WardenPage;