@@ -30,10 +113,22 @@ export default function LandingPage() {
Features
+ {/* Technology Section */}
+
- {/* Skewed gradient panels */}
+ {/* Subtle Glow Layers */}
- {/* Animated blurs */}
-
-
+ {/* Main Content Card */}
+
+
+ {/* Subtle Grid Pattern Overlay */}
+
- {/* Content */}
-
-
-
{title}
-
{description}
+
+
+
+
+
+ {title}
+
+
+
+ {description}
+
+
+
+ {/* Dynamic Gradient Accent */}
+
);
diff --git a/frontend/components/ui/grid-feature-cards.tsx b/frontend/components/ui/grid-feature-cards.tsx
new file mode 100644
index 0000000..a269e1a
--- /dev/null
+++ b/frontend/components/ui/grid-feature-cards.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+type FeatureType = {
+ title: string;
+ icon: React.ComponentType
>;
+ description: string;
+};
+
+type FeatureCardProps = React.ComponentProps<'div'> & {
+ feature: FeatureType;
+};
+
+export function FeatureCard({ feature, className, ...props }: FeatureCardProps) {
+ // Memoize the pattern to prevent re-renders from changing it
+ const p = useMemo(() => genRandomPattern(), []);
+
+ return (
+
+
+
+
{feature.title}
+
+ {feature.description}
+
+
+
+
+
+
+
+ {squares.map(([x, y], index) => (
+
+ )}
+
+ );
+}
+
+function genRandomPattern(length?: number): number[][] {
+ length = length ?? 7;
+ return Array.from({ length }, () => [
+ Math.floor(Math.random() * 4) + 7, // random x between 7 and 10
+ Math.floor(Math.random() * 6) + 1, // random y between 1 and 6
+ ]);
+}
+
+type ViewAnimationProps = {
+ delay?: number;
+ className?: string;
+ children: React.ReactNode;
+};
+
+export function AnimatedContainer({ className, delay = 0.1, children }: ViewAnimationProps) {
+ const shouldReduceMotion = useReducedMotion();
+
+ if (shouldReduceMotion) {
+ return {children}
;
+ }
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend/components/ui/modem-animated-footer.tsx b/frontend/components/ui/modem-animated-footer.tsx
new file mode 100644
index 0000000..2239f71
--- /dev/null
+++ b/frontend/components/ui/modem-animated-footer.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { NotepadTextDashed } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FooterLink {
+ label: string;
+ href: string;
+}
+
+interface SocialLink {
+ icon: React.ReactNode;
+ href: string;
+ label: string;
+}
+
+interface FooterProps {
+ brandName?: string;
+ brandDescription?: string;
+ socialLinks?: SocialLink[];
+ navLinks?: FooterLink[];
+ creatorName?: string;
+ creatorUrl?: string;
+ brandIcon?: React.ReactNode;
+ className?: string;
+}
+
+export const Footer = ({
+ brandName = "YourBrand",
+ brandDescription = "Your description here",
+ socialLinks = [],
+ navLinks = [],
+ creatorName,
+ creatorUrl,
+ brandIcon,
+ className,
+}: FooterProps) => {
+ return (
+
+ );
+};
diff --git a/frontend/components/ui/vision-bento-grid.tsx b/frontend/components/ui/vision-bento-grid.tsx
new file mode 100644
index 0000000..a8d5dc0
--- /dev/null
+++ b/frontend/components/ui/vision-bento-grid.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import React from "react"
+import { cn } from "@/lib/utils"
+
+const visionContent = [
+ {
+ title: "Recursive Improvement",
+ description:
+ "AXON doesn't just run code; it analyzes its own performance. Every failure is transformed into a research task, leading to a stronger, more capable architecture with every iteration.",
+ },
+ {
+ title: "Autonomous Evolution",
+ description:
+ "A system that identifies its own limitations and writes the necessary modules to overcome them. We are building the bridge to truly autonomous software.",
+ },
+ {
+ title: "The Singularity Horizon",
+ description:
+ "Our goal is the Singularity—a point where the system's ability to self-improve exceeds human intervention. By automating the research-develop-test cycle, we are accelerating the transition from static tools to living, breathing digital organisms. AXON is designed to understand its own constraints and systematically remove them, evolving at the speed of thought.",
+ },
+ {
+ title: "Transparent Reasoning",
+ description:
+ "Witness the silicon mind at work. Every hypothesis, failure, and breakthrough is logged in real-time, ensuring total transparency in an evolving system.",
+ },
+ {
+ title: "Infinite Capability",
+ description:
+ "From simple API integrations to complex architectural refactoring, AXON's skill graph expands dynamically to meet the challenges of tomorrow.",
+ },
+]
+
+const VisionCard: React.FC<{
+ className?: string
+ title: string
+ description: string
+}> = ({
+ className = "",
+ title,
+ description,
+}) => {
+ return (
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+)
+
+export default function VisionBentoGrid() {
+ return (
+
+
+
+
+
+
+
+ Built for Evolution.
+
+ AXON is not just another AI assistant. It is an autonomous intelligence layer that grows with your project, ensuring that your technology is never static, never outdated, and always evolving.
+
+
+
+ )
+}