Skip to content

updates #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
atharhive merged 1 commit into from
Mar 18, 2026
Merged

updates #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 149 additions & 13 deletions frontend/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,96 @@
"use client";

import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { BrainCircuit, Activity, Code2, Network } from "lucide-react";
import {
BrainCircuit,
Activity,
Code2,
Network,
Cpu,
Database,
Globe,
Layers,
ShieldCheck,
Zap,
Github,
Linkedin,
MessageCircle,
} from "lucide-react";
import Link from "next/link";
import { GlowyWavesHero } from "@/components/ui/glowy-waves-hero-shadcnui";
import { SkewCard } from "@/components/ui/gradient-card-showcase";
import {
FeatureCard,
AnimatedContainer,
} from "@/components/ui/grid-feature-cards";
import VisionBentoGrid from "@/components/ui/vision-bento-grid";
import { Footer } from "@/components/ui/modem-animated-footer";

const techStack = [
{
title: "Next.js & TypeScript",
icon: Globe,
description:
"Type-safe, high-performance frontend architecture with React 19 and Next.js 15 for a seamless developer experience.",
},
{
title: "FastAPI Backend",
icon: Cpu,
description:
"Asynchronous Python core designed for high-concurrency agent orchestration and low-latency system responses.",
},
{
title: "Qdrant Vector DB",
icon: Database,
description:
"Long-term semantic memory and high-dimensional vector retrieval for autonomous reasoning and knowledge persistence.",
},
{
title: "Multi-LLM Routing",
icon: Layers,
description:
"Dynamic orchestration across Gemini, HuggingFace, and custom models to balance reasoning power, speed, and cost.",
},
{
title: "Self-Evolving Skills",
icon: Zap,
description:
"Autonomous Python module generation and hot-loading, allowing the system to expand its capability graph live.",
},
{
title: "Distributed Infrastructure",
icon: ShieldCheck,
description:
"Dockerized microservices architecture with automated CI/CD and secure cloud orchestration on DigitalOcean.",
},
];

export default function LandingPage() {
const socialLinks = [
{
icon: <Github className="w-6 h-6" />,
href: "https://github.com/Invariants0/axon",
label: "GitHub",
},
{
icon: <Linkedin className="w-6 h-6" />,
href: "https://www.linkedin.com/company/112679037/",
label: "LinkedIn",
},
{
icon: <MessageCircle className="w-6 h-6" />,
href: "https://discord.gg/Q36RGfCbew",
label: "Discord",
},
];

const navLinks = [
{ label: "Features", href: "#features" },
{ label: "Technology", href: "#technology" },
{ label: "Vision", href: "#vision" },
{ label: "Enter System", href: "/dashboard" },
];

return (
<div className="min-h-screen bg-black text-foreground selection:bg-white/30">
<div className="relative z-10">
Expand All @@ -30,20 +113,29 @@ export default function LandingPage() {
Features
</Link>
<Link
href="#developers"
href="#technology"
className="hover:text-white transition-colors"
>
Technology
</Link>
<Link
href="#vision"
className="hover:text-white transition-colors"
>
Vision
</Link>
<Link
href="#architecture"
className="hover:text-white transition-colors"
>
Developers
Architecture
</Link>
Comment on lines +127 to 132
<Link
href="#company"
className="hover:text-white transition-colors"
>
Company
</Link>
<Link href="#blog" className="hover:text-white transition-colors">
Blog
</Link>
</div>
<Button
className="rounded-full px-6 bg-white hover:bg-white/90 text-black font-medium"
Expand Down Expand Up @@ -76,29 +168,60 @@ export default function LandingPage() {
title="Self-Evolving Architecture"
description="Convert your projects into self-evolving systems. Constantly review, overlook, and upgrade the entire codebase autonomously."
icon={Network}
gradientFrom="#ffffff"
gradientTo="#d1dceb"
gradientFrom="#e2e8f0"
gradientTo="#94a3b8"
/>

<SkewCard
title="Real-Time Reasoning"
description="Watch the system's thought process unfold live. Transparent logs reveal exactly how decisions are made, hypotheses are formed, and failures are analyzed."
icon={Activity}
gradientFrom="#d1dceb"
gradientTo="#94a3b8"
gradientFrom="#f8fafc"
gradientTo="#cbd5e1"
/>

<SkewCard
title="Autonomous Skill Creation"
description="When faced with a novel problem, AXON writes, tests, and integrates new code modules dynamically. It expands its own capability graph without human intervention."
icon={Code2}
gradientFrom="#94a3b8"
gradientTo="#475569"
gradientFrom="#ffffff"
gradientTo="#e2e8f0"
/>
</div>
</div>
</section>

{/* Technology Section */}
<section
id="technology"
className="py-32 px-6 bg-white/[0.02] border-y border-white/5 relative"
>
<div className="container mx-auto max-w-6xl">
<div className="mx-auto w-full space-y-12">
<AnimatedContainer className="mx-auto max-w-3xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl mb-6">
The Neural Infrastructure
</h2>
<p className="text-muted-foreground mt-4 text-lg md:text-xl">
AXON is built on a foundation of high-performance, distributed
technologies designed for autonomous evolution.
</p>
</AnimatedContainer>

<AnimatedContainer
delay={0.3}
className="grid grid-cols-1 divide-x divide-y divide-white/5 border border-white/5 sm:grid-cols-2 md:grid-cols-3 rounded-3xl overflow-hidden bg-black/40 backdrop-blur-xl"
>
{techStack.map((tech, i) => (
<FeatureCard key={i} feature={tech} />
))}
</AnimatedContainer>
</div>
</div>
</section>

{/* Vision Section */}
<VisionBentoGrid />

{/* Footer CTA */}
<section className="py-32 px-6 border-t border-white/5 relative overflow-hidden">
Expand All @@ -115,6 +238,19 @@ export default function LandingPage() {
</Button>
</div>
</section>

<Footer
className="bg-black"
brandName="AXON"
brandDescription="Autonomous AI engineering platform that researches, writes, tests, and deploys evolving capabilities in production."
socialLinks={socialLinks}
navLinks={navLinks}
creatorName="Invariants"
creatorUrl="https://github.com/Invariants0/axon"
brandIcon={
<BrainCircuit className="w-8 sm:w-10 md:w-14 h-8 sm:h-10 md:h-14 text-background drop-shadow-lg" />
}
/>
</div>
</div>
);
Expand Down
60 changes: 39 additions & 21 deletions frontend/components/ui/gradient-card-showcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,62 @@ export const SkewCard = ({
return (
<div
className={cn(
"group relative w-full h-[400px] transition-all duration-500",
"group relative w-full h-[420px] transition-all duration-700 ease-out",
className
)}
>
{/* Skewed gradient panels */}
{/* Subtle Glow Layers */}
<span
className="absolute top-0 left-[20px] md:left-[50px] w-1/2 h-full rounded-3xl transform skew-x-[10deg] md:skew-x-[15deg] transition-all duration-500 group-hover:skew-x-0 group-hover:left-[10px] md:group-hover:left-[20px] group-hover:w-[calc(100%-20px)] md:group-hover:w-[calc(100%-40px)]"
className="absolute top-0 left-[20px] md:left-[40px] w-3/4 h-full rounded-[2rem] transform skew-x-[12deg] transition-all duration-700 group-hover:skew-x-0 group-hover:left-[10px] md:group-hover:left-[20px] group-hover:w-[calc(100%-20px)] md:group-hover:w-[calc(100%-40px)] opacity-20 blur-xl"
style={{
background: `linear-gradient(315deg, ${gradientFrom}, ${gradientTo})`,
background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
}}
/>
<span
className="absolute top-0 left-[20px] md:left-[50px] w-1/2 h-full rounded-3xl transform skew-x-[10deg] md:skew-x-[15deg] blur-[30px] opacity-50 transition-all duration-500 group-hover:skew-x-0 group-hover:left-[10px] md:group-hover:left-[20px] group-hover:w-[calc(100%-20px)] md:group-hover:w-[calc(100%-40px)]"
className="absolute top-4 left-[30px] md:left-[50px] w-1/2 h-[90%] rounded-[2rem] transform skew-x-[12deg] transition-all duration-700 group-hover:skew-x-0 group-hover:left-[20px] group-hover:w-[calc(100%-40px)] opacity-10 blur-3xl"
style={{
background: `linear-gradient(315deg, ${gradientFrom}, ${gradientTo})`,
background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
}}
/>

{/* Animated blurs */}
<span className="pointer-events-none absolute inset-0 z-10">
<span className="absolute top-0 left-0 w-0 h-0 rounded-full opacity-0 bg-[rgba(255,255,255,0.15)] backdrop-blur-[10px] shadow-[0_5px_15px_rgba(0,0,0,0.1)] transition-all duration-100 animate-blob group-hover:top-[-40px] group-hover:left-[40px] group-hover:w-[80px] group-hover:h-[80px] group-hover:opacity-100" />
<span className="absolute bottom-0 right-0 w-0 h-0 rounded-full opacity-0 bg-[rgba(255,255,255,0.15)] backdrop-blur-[10px] shadow-[0_5px_15px_rgba(0,0,0,0.1)] transition-all duration-500 animate-blob animation-delay-1000 group-hover:bottom-[-40px] group-hover:right-[40px] group-hover:w-[80px] group-hover:h-[80px] group-hover:opacity-100" />
</span>
{/* Main Content Card */}
<div className="relative z-20 h-full flex flex-col justify-center p-10 bg-black/60 backdrop-blur-2xl border border-white/10 rounded-[2rem] text-white transition-all duration-700 group-hover:translate-x-[-10px] group-hover:translate-y-[-5px] group-hover:bg-black/40 group-hover:border-white/20 shadow-2xl overflow-hidden">

{/* Subtle Grid Pattern Overlay */}
<div className="absolute inset-0 opacity-[0.03] pointer-events-none"
style={{ backgroundImage: 'radial-gradient(circle, #fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />

{/* Content */}
<div className="relative z-20 h-full flex flex-col justify-center p-10 bg-black/40 backdrop-blur-xl border border-white/10 rounded-3xl text-white transition-all duration-500 group-hover:left-[-15px] group-hover:bg-black/20">
<Icon className="w-12 h-12 text-white mb-6 transition-transform duration-500 group-hover:scale-110" />
<h3 className="text-2xl font-bold mb-4">{title}</h3>
<p className="text-muted-foreground leading-relaxed text-lg">{description}</p>
<div className="relative z-10">
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center border border-white/10 mb-8 transition-all duration-700 group-hover:scale-110 group-hover:bg-white/10 group-hover:border-white/20">
<Icon className="w-8 h-8 text-white" strokeWidth={1.5} />
</div>

<h3 className="text-2xl font-bold mb-4 tracking-tight text-white group-hover:text-white transition-colors duration-500">
{title}
</h3>

<p className="text-white/70 font-medium leading-relaxed text-lg group-hover:text-white/90 transition-colors duration-500">
{description}
</p>
</div>

{/* Dynamic Gradient Accent */}
<div
className="absolute -bottom-24 -right-24 w-48 h-48 rounded-full blur-[60px] opacity-20 transition-opacity duration-700 group-hover:opacity-40"
style={{
background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
}}
/>
</div>

<style dangerouslySetInnerHTML={{ __html: `
@keyframes blob {
0%, 100% { transform: translateY(10px); }
50% { transform: translate(-10px); }
@keyframes subtle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.group:hover .relative.z-20 {
animation: subtle-float 6s ease-in-out infinite;
}
.animate-blob { animation: blob 4s ease-in-out infinite; }
.animation-delay-1000 { animation-delay: -2s; }
`}} />
Comment on lines 73 to 81
</div>
);
Expand Down
Loading
Loading