add atp pages to navbar and footer and home page

Author: kyegomez

components/footer.tsx

@@ -67,6 +67,7 @@ export function Footer() {
               <ul className="space-y-1 sm:space-y-2">
                 {[
                   { name: "Products Overview", icon: Package, url: "/products" },
+                  { name: "ATP", icon: DollarSign, url: "/atp" },
                   { name: "Simulations", icon: Network, url: "/simulations" },
                   { name: "Mobile App", icon: Smartphone, url: "/mobile" },
                   { name: "Swarms Python", icon: Github, url: "https://github.com/kyegomez/swarms" },

components/home-products.tsx

@@ -6,6 +6,7 @@ import { motion, useScroll, useTransform } from "framer-motion"
 import { ExternalLink } from "lucide-react"
 import { useRef } from "react"
 import Image from "next/image"
+import Link from "next/link"
 
 const swarmsStack = [
   {
@@ -95,7 +96,7 @@ async fn main() -> Result<()> {
     subtitle: "On-Chain Payment Settlement for AI Agents",
     description:
       "A Solana-based payment settlement system that automatically parses usage, executes split payments, and encrypts agent responses until payment is confirmed on-chain.",
-    link: "https://docs.swarms.ai/docs/atp/overview",
+    link: "/atp",
     docsLink: "https://docs.swarms.ai/docs/atp/overview",
     code: `from fastapi import FastAPI
 from atp.middleware import ATPSettlementMiddleware
@@ -306,10 +307,17 @@ function ProductSection({ product, index, isEven }: { product: typeof swarmsStac
                 className="bg-gradient-to-r from-red-900 via-red-800 to-red-900 text-white hover:from-red-800 hover:via-red-700 hover:to-red-800 font-bold w-full sm:w-auto transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-red-900/50 group border-0 text-xs sm:text-sm md:text-base px-3 sm:px-4 md:px-6 py-4 sm:py-5 md:py-6 flex-shrink-0" 
                 asChild
               >
-                <a href={product.link} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center">
-                  <span>Get Started</span>
-                  <ExternalLink className="h-3 w-3 sm:h-4 sm:w-4 ml-2 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1 flex-shrink-0" />
-                </a>
+                {product.link.startsWith("/") ? (
+                  <Link href={product.link} className="flex items-center justify-center">
+                    <span>Get Started</span>
+                    <ExternalLink className="h-3 w-3 sm:h-4 sm:w-4 ml-2 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1 flex-shrink-0" />
+                  </Link>
+                ) : (
+                  <a href={product.link} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center">
+                    <span>Get Started</span>
+                    <ExternalLink className="h-3 w-3 sm:h-4 sm:w-4 ml-2 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1 flex-shrink-0" />
+                  </a>
+                )}
               </Button>
               <Button 
                 variant="outline" 

components/navigation.tsx

@@ -218,6 +218,15 @@ export function Navigation() {
                         <p className="text-xs text-neutral-400 mt-0.5">Explore all products</p>
                       </div>
                     </Link>
+                    <Link href="/atp" className="group flex cursor-pointer items-center rounded-xl hover:bg-white/[0.05] transition-all duration-200 p-3 relative">
+                      <div className="mr-3 h-9 w-9 flex items-center justify-center rounded-lg bg-neutral-800/50 border border-neutral-700/30 group-hover:border-red-500/40 transition-all duration-200">
+                        <DollarSign className="h-4 w-4 text-red-500" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <span className="text-sm font-semibold text-white block">ATP</span>
+                        <p className="text-xs text-neutral-400 mt-0.5">Agent Trade Protocol</p>
+                      </div>
+                    </Link>
                     <Link href="/simulations" className="group flex cursor-pointer items-center rounded-xl hover:bg-white/[0.05] transition-all duration-200 p-3 relative">
                       <div className="mr-3 h-9 w-9 flex items-center justify-center rounded-lg bg-neutral-800/50 border border-neutral-700/30 group-hover:border-red-500/40 transition-all duration-200">
                         <Network className="h-4 w-4 text-red-500" />
@@ -664,6 +673,14 @@ export function Navigation() {
                     <Package className="mr-3 h-4 w-4 text-white/60 flex-shrink-0" />
                     Products Overview
                   </Link>
+                  <Link
+                    href="/atp"
+                    className="text-sm font-semibold text-white/85 hover:text-white transition-all duration-300 hover:bg-white/[0.05] p-3 rounded-lg flex items-center border border-transparent hover:border-white/10"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    <DollarSign className="mr-3 h-4 w-4 text-white/60 flex-shrink-0" />
+                    ATP
+                  </Link>
                   <Link
                     href="/simulations"
                     className="text-sm font-semibold text-white/85 hover:text-white transition-all duration-300 hover:bg-white/[0.05] p-3 rounded-lg flex items-center border border-transparent hover:border-white/10"