File size: 4,409 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | "use client";
import { useRouter } from "next/navigation";
import Navigation from "./components/Navigation";
import HeroSection from "./components/HeroSection";
import FlowAnimation from "./components/FlowAnimation";
import HowItWorks from "./components/HowItWorks";
import Features from "./components/Features";
import GetStarted from "./components/GetStarted";
import Footer from "./components/Footer";
export default function LandingPage() {
const router = useRouter();
return (
<div className="relative text-white font-sans overflow-x-hidden antialiased selection:bg-[#f97815] selection:text-white">
{/* Animated Background */}
<div className="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#181411]">
{/* Grid pattern */}
<div className="absolute inset-0 opacity-[0.06]" style={{
backgroundImage: `linear-gradient(to right, #f97815 1px, transparent 1px), linear-gradient(to bottom, #f97815 1px, transparent 1px)`,
backgroundSize: '50px 50px'
}}></div>
{/* Animated gradient orbs */}
<div className="absolute top-0 left-1/4 w-[700px] h-[700px] bg-[#f97815]/12 rounded-full blur-[130px] animate-blob"></div>
<div className="absolute top-1/3 right-1/4 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[130px] animate-blob" style={{ animationDelay: '2s', animationDuration: '22s' }}></div>
<div className="absolute bottom-0 left-1/2 w-[650px] h-[650px] bg-blue-500/8 rounded-full blur-[130px] animate-blob" style={{ animationDelay: '4s', animationDuration: '25s' }}></div>
{/* Vignette effect */}
<div className="absolute inset-0" style={{
background: 'radial-gradient(circle at center, transparent 0%, rgba(24, 20, 17, 0.4) 100%)'
}}></div>
</div>
<div className="relative z-10">
<Navigation />
<main>
{/* Hero with Flow Animation */}
<div className="relative">
<HeroSection />
<div className="flex justify-center pb-20">
<FlowAnimation />
</div>
</div>
<GetStarted />
<HowItWorks />
<Features />
{/* CTA Section */}
<section className="py-32 px-6 relative overflow-hidden">
<div className="absolute inset-0 bg-linear-to-t from-[#f97815]/5 to-transparent pointer-events-none"></div>
<div className="max-w-4xl mx-auto text-center relative z-10">
<h2 className="text-4xl md:text-5xl font-black mb-6">Ready to Simplify Your AI Infrastructure?</h2>
<p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
Join developers who are streamlining their AI integrations with 9Router. Open source and free to start.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<button
onClick={() => router.push("/dashboard")}
className="w-full sm:w-auto h-14 px-10 rounded-lg bg-[#f97815] hover:bg-[#e0650a] text-[#181411] text-lg font-bold transition-all shadow-[0_0_20px_rgba(249,120,21,0.5)]"
>
Start Free
</button>
<button
onClick={() => window.open("https://github.com/decolua/9router#readme", "_blank")}
className="w-full sm:w-auto h-14 px-10 rounded-lg border border-[#3a2f27] hover:bg-[#23180f] text-white text-lg font-bold transition-all"
>
Read Documentation
</button>
</div>
</div>
</section>
</main>
<Footer />
</div>
{/* Global styles for keyframes */}
<style jsx global>{`
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes dash {
to { stroke-dashoffset: -20; }
}
@keyframes blob {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
.animate-blob {
animation: blob 20s ease-in-out infinite;
}
`}</style>
</div>
);
}
|