- {/* Section Header */}
- Multi-Mode AI Assistance
+ Comprehensive AI Modes
-
- Specialized modes for every stage of your development cycle. From debugging to deployment,
- Async Coder has the right mode for your needs.
+
+ Specialized modes for every stage of your development cycle. From debugging to autonomous development,
+ choose the mode that fits your workflow.
- {/* BentoGrid Features */}
-
-
- {/* Additional Features */}
-
-
- In-Built Development Tools
-
-
- {[
- {
- icon: "๐งช",
- title: "Automated Test Generation",
- description: "Unit tests, integration tests, and coverage reports"
- },
- {
- icon: "๐",
- title: "Intelligent Logging",
- description: "Inserts optimized logging for easier debugging"
- },
- {
- icon: "๐",
- title: "Code Review Assistant",
- description: "Detects anti-patterns and suggests clean refactors"
- },
- {
- icon: "๐ง ",
- title: "Continuous Learning",
- description: "Stores bug-fix patterns and reusable templates"
- }
- ].map((tool, index) => (
+
+ {features.map((feature, index) => {
+ const Icon = feature.icon;
+ return (
-
{tool.icon}
-
- {tool.title}
-
-
- {tool.description}
+
+
+
+ {feature.title}
+
+
+ {feature.description}
- ))}
-
+ );
+ })}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1a0ed18..aa43976 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,147 @@
-import { Component } from "@/components/ui/footer-taped-design";
+import Link from "next/link";
+import { Github, Twitter, Linkedin } from "lucide-react";
export default function Footer() {
- return
;
+ const currentYear = new Date().getFullYear();
+
+ return (
+
+
+
+
+
+
+ AC
+
+
+ Async Coder
+
+
+
+ The last AI assistant you'll ever need for coding.
+
+
+
+
+
+ Product
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ยฉ {currentYear} Async Coder. All rights reserved.
+
+
+
+
+
+ );
}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 977456d..0000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import Link from "next/link";
-
-export default function Hero() {
- return (
-
-
-
- {/* Logo/Brand */}
-
-
- AC
-
-
- Async Coder
-
-
-
- {/* Main Tagline */}
-
- The last{" "}
-
- AI assistant
-
-
-
- {/* Description */}
-
- An open-source, end-to-end AI coding assistant built to empower developers with full control,
- unmatched flexibility, and an autonomous development pipeline . Think of it as your{" "}
- developer co-pilot on steroids .
-
-
- {/* Key Features Pills */}
-
- {[
- "๐ Debug Mode",
- "๐ฌ Ask Mode",
- "๐ Documentation",
- "๐๏ธ Architect Planner",
- "๐ PR Review",
- "๐ Async Mode"
- ].map((feature) => (
-
- {feature}
-
- ))}
-
-
- {/* CTA Buttons */}
-
-
-
- {/* Stats or Social Proof */}
-
-
- Open source โข Apache 2.0 License โข Built for developers, by developers
-
-
-
-
- );
-}
diff --git a/src/components/QuickStart.tsx b/src/components/QuickStart.tsx
index 83e3f2a..67c9867 100644
--- a/src/components/QuickStart.tsx
+++ b/src/components/QuickStart.tsx
@@ -1,35 +1,68 @@
-import { FeatureSteps } from "@/components/ui/feature-section";
+import { Download, Settings, Rocket } from "lucide-react";
-const features = [
+const steps = [
{
- step: "Step 1",
+ number: "01",
+ icon: Download,
title: "Install Async Coder",
- content: "Get started by installing Async Coder CLI tool with simple pip command. Works on Windows, macOS, and Linux.",
- image: "https://images.unsplash.com/photo-1629904853716-f0bc54eea481?q=80&w=2070&auto=format&fit=crop"
+ description: "Get started by installing Async Coder CLI tool with a simple pip command. Works on Windows, macOS, and Linux."
},
{
- step: "Step 2",
- title: "Configure API Keys",
- content: "Set up your AI backend preferences by adding API keys for Claude, Gemini, OpenAI, or other supported models.",
- image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2070&auto=format&fit=crop"
+ number: "02",
+ icon: Settings,
+ title: "Configure Your Setup",
+ description: "Set up your AI backend preferences by adding API keys for Claude, GPT-4, Gemini, or other supported models."
},
{
- step: "Step 3",
- title: "Start Coding with AI",
- content: "Begin using powerful AI modes like Debug, Ask, Documentation, Architect, or let Async Mode handle everything autonomously.",
- image: "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?q=80&w=2069&auto=format&fit=crop"
+ number: "03",
+ icon: Rocket,
+ title: "Start Developing",
+ description: "Begin using powerful AI modes like Debug, Ask, Documentation, Architect, or let Async Mode handle everything autonomously."
}
];
export default function QuickStart() {
return (
-
+
+
+ Get Started in 3 Steps
+
+
+ Set up Async Coder in minutes and start leveraging AI-powered development immediately.
+
+
+
+
+ {steps.map((step, index) => {
+ const Icon = step.icon;
+ return (
+
+
+
+
+ {step.number}
+
+
+
+
+
+ {step.title}
+
+
+ {step.description}
+
+
+ {index < steps.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+
);
}
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx
deleted file mode 100644
index 6c0f7e1..0000000
--- a/src/components/Roadmap.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-export default function Roadmap() {
- const roadmapItems = [
- {
- title: "Core modes (Debug, Ask, Documentation, Architect)",
- description: "Foundation modes for debugging, questioning, documentation generation, and architecture planning",
- status: "in-progress",
- progress: 25
- },
- {
- title: "Async Mode (autonomous chaining)",
- description: "Autonomous mode that chains multiple AI modes to handle end-to-end project development",
- status: "planned",
- progress: 0
- },
- {
- title: "PR creation and review",
- description: "Automated pull request creation, review, and intelligent code suggestions",
- status: "planned",
- progress: 0
- },
- {
- title: "CI/CD integrations (GitHub Actions, GitLab)",
- description: "Seamless integration with popular CI/CD platforms for automated workflows",
- status: "planned",
- progress: 0
- },
- {
- title: "Containerized DevOps Mode (Docker + Kubernetes)",
- description: "Full DevOps automation including containerization and orchestration setup",
- status: "planned",
- progress: 0
- },
- {
- title: "GUI Dashboard for Non-CLI Users",
- description: "Web-based interface for developers who prefer graphical tools over command-line",
- status: "planned",
- progress: 0
- },
- {
- title: "AI Model Plugins (easily add new backends)",
- description: "Plugin system to easily integrate new AI models and backends",
- status: "research",
- progress: 0
- }
- ];
-
- const getStatusConfig = (status: string) => {
- switch (status) {
- case "completed":
- return {
- color: "bg-green-500",
- text: "text-green-700 dark:text-green-300",
- bg: "bg-green-50 dark:bg-green-900",
- label: "Completed"
- };
- case "in-progress":
- return {
- color: "bg-blue-500",
- text: "text-blue-700 dark:text-blue-300",
- bg: "bg-blue-50 dark:bg-blue-900",
- label: "In Progress"
- };
- case "planned":
- return {
- color: "bg-gray-400",
- text: "text-gray-700 dark:text-gray-300",
- bg: "bg-gray-50 dark:bg-gray-800",
- label: "Planned"
- };
- case "research":
- return {
- color: "bg-purple-500",
- text: "text-purple-700 dark:text-purple-300",
- bg: "bg-purple-50 dark:bg-purple-900",
- label: "Research"
- };
- default:
- return {
- color: "bg-gray-400",
- text: "text-gray-700 dark:text-gray-300",
- bg: "bg-gray-50 dark:bg-gray-800",
- label: "Planned"
- };
- }
- };
-
- return (
-
-
- {/* Section Header */}
-
-
- Development Roadmap
-
-
- Our vision for the future of AI-powered development. Track our progress and see what's coming next.
-
-
-
- ๐ฏ Version 0.1.0 Target
-
-
-
-
- {/* Roadmap Timeline */}
-
- {/* Vertical Line */}
-
-
- {/* Roadmap Items */}
-
- {roadmapItems.map((item, index) => {
- const statusConfig = getStatusConfig(item.status);
- return (
-
- {/* Timeline Dot */}
-
-
- {/* Content */}
-
-
-
-
- {item.title}
-
-
- {statusConfig.label}
-
-
-
-
- {item.description}
-
-
- {/* Progress Bar */}
- {item.progress > 0 && (
-
-
- Progress
- {item.progress}%
-
-
-
- )}
-
- {/* Checkboxes for visual representation */}
-
-
- {item.status === "completed" ? "Completed" :
- item.status === "in-progress" ? "In Development" :
- item.status === "research" ? "Research Phase" : "Planned for v0.1.0"}
-
-
-
-
-
- );
- })}
-
-
-
- {/* Community Section */}
-
-
-
- Help Shape the Future
-
-
- Async Coder is built with and for the open-source community. Your feedback,
- contributions, and feature requests directly influence our roadmap.
-
-
-
-
-
- );
-}
diff --git a/src/components/demo-luma.tsx b/src/components/demo-luma.tsx
deleted file mode 100644
index e2c1d8c..0000000
--- a/src/components/demo-luma.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Component } from "@/components/ui/luma-spin";
-
-export default function DemoOne() {
- return
;
-}
\ No newline at end of file
diff --git a/src/components/demo.tsx b/src/components/demo.tsx
deleted file mode 100644
index 4734466..0000000
--- a/src/components/demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Component } from "@/components/ui/raycast-animated-background";
-
-export default function DemoOne() {
- return
;
-}
\ No newline at end of file
diff --git a/src/components/ui/bento-demo.tsx b/src/components/ui/bento-demo.tsx
deleted file mode 100644
index 870cef4..0000000
--- a/src/components/ui/bento-demo.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import {
- Bug,
- MessageCircle,
- FileText,
- Blocks,
- GitPullRequest,
- Rocket,
-} from "lucide-react";
-
-import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";
-
-const features = [
- {
- Icon: Bug,
- name: "Debug Mode",
- description: "Automatically detects bugs, generates fixes, and adds intelligent logging for better runtime insights.",
- href: "#debug",
- cta: "Start Debugging",
- background: (
-
- ),
- className: "lg:row-start-1 lg:row-end-3 lg:col-start-1 lg:col-end-2",
- },
- {
- Icon: MessageCircle,
- name: "Ask Mode",
- description: "Ask anything about your codebase or a specific file. Fetches relevant context and provides real-world examples.",
- href: "#ask",
- cta: "Ask Questions",
- background: (
-
- ),
- className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
- },
- {
- Icon: FileText,
- name: "Documentation Mode",
- description: "Generates and updates project documentation, inline code comments, and API references.",
- href: "#docs",
- cta: "Generate Docs",
- background: (
-
- ),
- className: "lg:row-start-3 lg:row-end-4 lg:col-start-1 lg:col-end-2",
- },
- {
- Icon: Blocks,
- name: "Architect Planner Mode",
- description: "Designs scalable architectures, proposes best practices, and outlines your technical roadmap.",
- href: "#architect",
- cta: "Plan Architecture",
- background: (
-
- ),
- className: "lg:col-start-3 lg:col-end-4 lg:row-start-1 lg:row-end-2",
- },
- {
- Icon: GitPullRequest,
- name: "PR Review Mode",
- description: "Creates new PRs or reviews incoming ones, offering detailed review comments and automated test suggestions.",
- href: "#pr-review",
- cta: "Review Code",
- background: (
-
- ),
- className: "lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3",
- },
- {
- Icon: Rocket,
- name: "Async Mode (Autonomous)",
- description: "The most advanced mode. Autonomously chains all other modes to handle your project end-to-end.",
- href: "#async",
- cta: "Go Autonomous",
- background: (
-
-
-
-
-
- Most Advanced
-
-
-
- ),
- className: "lg:col-start-3 lg:col-end-4 lg:row-start-3 lg:row-end-4",
- },
-];
-
-function BentoDemo() {
- return (
-
- {features.map((feature) => (
-
- );
-}
-
-export { BentoDemo };
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
deleted file mode 100644
index f9b9109..0000000
--- a/src/components/ui/bento-grid.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { ReactNode } from "react";
-import { ArrowRightIcon } from "@radix-ui/react-icons";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-const BentoGrid = ({
- children,
- className,
-}: {
- children: ReactNode;
- className?: string;
-}) => {
- return (
-
- {children}
-
- );
-};
-
-const BentoCard = ({
- name,
- className,
- background,
- Icon,
- description,
- href,
- cta,
-}: {
- name: string;
- className: string;
- background: ReactNode;
- Icon: React.ComponentType<{className?: string}>;
- description: string;
- href: string;
- cta: string;
-}) => (
-
-
{background}
-
-
-
- {name}
-
-
{description}
-
-
-
-
-
-);
-
-export { BentoCard, BentoGrid };
diff --git a/src/components/ui/feature-section.tsx b/src/components/ui/feature-section.tsx
deleted file mode 100644
index 81fa22d..0000000
--- a/src/components/ui/feature-section.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client"
-
-import React, { useState, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import Image from "next/image"
-import { cn } from "@/lib/utils"
-
-interface Feature {
- step: string
- title?: string
- content: string
- image: string
-}
-
-interface FeatureStepsProps {
- features: Feature[]
- className?: string
- title?: string
- autoPlayInterval?: number
- imageHeight?: string
-}
-
-export function FeatureSteps({
- features,
- className,
- title = "How to get Started",
- autoPlayInterval = 3000,
-}: FeatureStepsProps) {
- const [currentFeature, setCurrentFeature] = useState(0)
- const [progress, setProgress] = useState(0)
-
- useEffect(() => {
- const timer = setInterval(() => {
- if (progress < 100) {
- setProgress((prev) => prev + 100 / (autoPlayInterval / 100))
- } else {
- setCurrentFeature((prev) => (prev + 1) % features.length)
- setProgress(0)
- }
- }, 100)
-
- return () => clearInterval(timer)
- }, [progress, features.length, autoPlayInterval])
-
- return (
-
-
-
- {title}
-
-
-
-
- {features.map((feature, index) => (
-
-
- {index <= currentFeature ? (
- โ
- ) : (
- {index + 1}
- )}
-
-
-
-
- {feature.title || feature.step}
-
-
- {feature.content}
-
-
- ))}
-
-
-
-
- {features.map(
- (feature, index) =>
- index === currentFeature && (
-
-
-
- ),
- )}
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/ui/footer-taped-design.tsx b/src/components/ui/footer-taped-design.tsx
deleted file mode 100644
index 4ebbeed..0000000
--- a/src/components/ui/footer-taped-design.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import Link from 'next/link'
-import { Linkedin, Twitter, Github } from 'lucide-react';
-
-const tape =
-
-
-export const Component = () => {
- const currentYear = new Date().getFullYear();
-
- return (
-
-
-
- {tape}
-
-
- {tape}
-
-
-
-
-
- AC
-
-
- Async Coder
-
-
-
- The last AI assistant you'll ever need for coding. Open-source, autonomous development with full control.
-
-
-
-
-
-
Product
-
-
Features
-
AI Backends
-
Quick Start
-
Roadmap
-
Documentation
-
-
-
-
-
-
-
Legal
-
-
Apache 2.0
-
Privacy Policy
-
Terms of Service
-
-
-
-
-
-
-
- ยฉ{currentYear} Async Coder. All rights reserved.
-
-
-
- Open Source
-
-
- ๐
- v0.1.0-alpha
-
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/ui/glowing-effect-demo.tsx b/src/components/ui/glowing-effect-demo.tsx
deleted file mode 100644
index 0a14535..0000000
--- a/src/components/ui/glowing-effect-demo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";
-import { GlowingEffect } from "@/components/ui/glowing-effect";
-import { cn } from "@/lib/utils";
-
-export function GlowingEffectDemo() {
- return (
-
-
-
- Your Choice. Your Rules.
-
-
- Complete freedom to choose your AI backend, customize your workflow, and maintain full control over your development process.
-
-
-
-
-
-
- );
-}
-
-interface GridItemProps {
- area: string;
- icon: React.ReactNode;
- title: string;
- description: React.ReactNode;
-}
-
-const GridItem = ({ area, icon, title, description }: GridItemProps) => {
- return (
-
-
-
-
-
-
- {icon}
-
-
-
- {title}
-
-
- {description}
-
-
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/ui/glowing-effect.tsx b/src/components/ui/glowing-effect.tsx
deleted file mode 100644
index 1644a82..0000000
--- a/src/components/ui/glowing-effect.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-"use client";
-
-import { memo, useCallback, useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
-import { animate } from "motion/react";
-
-interface GlowingEffectProps {
- blur?: number;
- inactiveZone?: number;
- proximity?: number;
- spread?: number;
- variant?: "default" | "white";
- glow?: boolean;
- className?: string;
- disabled?: boolean;
- movementDuration?: number;
- borderWidth?: number;
-}
-const GlowingEffect = memo(
- ({
- blur = 0,
- inactiveZone = 0.7,
- proximity = 0,
- spread = 20,
- variant = "default",
- glow = false,
- className,
- movementDuration = 2,
- borderWidth = 1,
- disabled = true,
- }: GlowingEffectProps) => {
- const containerRef = useRef
(null);
- const lastPosition = useRef({ x: 0, y: 0 });
- const animationFrameRef = useRef(0);
-
- const handleMove = useCallback(
- (e?: MouseEvent | { x: number; y: number }) => {
- if (!containerRef.current) return;
-
- if (animationFrameRef.current) {
- cancelAnimationFrame(animationFrameRef.current);
- }
-
- animationFrameRef.current = requestAnimationFrame(() => {
- const element = containerRef.current;
- if (!element) return;
-
- const { left, top, width, height } = element.getBoundingClientRect();
- const mouseX = e?.x ?? lastPosition.current.x;
- const mouseY = e?.y ?? lastPosition.current.y;
-
- if (e) {
- lastPosition.current = { x: mouseX, y: mouseY };
- }
-
- const center = [left + width * 0.5, top + height * 0.5];
- const distanceFromCenter = Math.hypot(
- mouseX - center[0],
- mouseY - center[1]
- );
- const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
-
- if (distanceFromCenter < inactiveRadius) {
- element.style.setProperty("--active", "0");
- return;
- }
-
- const isActive =
- mouseX > left - proximity &&
- mouseX < left + width + proximity &&
- mouseY > top - proximity &&
- mouseY < top + height + proximity;
-
- element.style.setProperty("--active", isActive ? "1" : "0");
-
- if (!isActive) return;
-
- const currentAngle =
- parseFloat(element.style.getPropertyValue("--start")) || 0;
- const targetAngle =
- (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
- Math.PI +
- 90;
-
- const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
- const newAngle = currentAngle + angleDiff;
-
- animate(currentAngle, newAngle, {
- duration: movementDuration,
- ease: [0.16, 1, 0.3, 1],
- onUpdate: (value) => {
- element.style.setProperty("--start", String(value));
- },
- });
- });
- },
- [inactiveZone, proximity, movementDuration]
- );
-
- useEffect(() => {
- if (disabled) return;
-
- const handleScroll = () => handleMove();
- const handlePointerMove = (e: PointerEvent) => handleMove(e);
-
- window.addEventListener("scroll", handleScroll, { passive: true });
- document.body.addEventListener("pointermove", handlePointerMove, {
- passive: true,
- });
-
- return () => {
- if (animationFrameRef.current) {
- cancelAnimationFrame(animationFrameRef.current);
- }
- window.removeEventListener("scroll", handleScroll);
- document.body.removeEventListener("pointermove", handlePointerMove);
- };
- }, [handleMove, disabled]);
-
- return (
- <>
-
- 0 && "blur-[var(--blur)] ",
- className,
- disabled && "!hidden"
- )}
- >
-
-
-
- Core modes foundation including Debug, Ask, Documentation, and Architecture planning capabilities
-
-
-
-
- Debug Mode - Interactive debugging assistance
-
-
- Ask Mode - Natural language code queries (25% complete)
-
-
- Documentation Mode - Auto-generate docs
-
-
- Architect Mode - System design planning
-
-
-
-
-
-
-
- Autonomous chaining capabilities and intelligent PR management for seamless development workflows
-
-
-
-
- Async Mode - Autonomous task chaining
-
-
- PR Creation & Review - Automated pull requests
-
-
- Intelligent Code Suggestions
-
-
-
-
-
-
-
- Full DevOps integration with CI/CD pipelines, containerization, and Kubernetes orchestration
-
-
-
-
- CI/CD Integration - GitHub Actions & GitLab
-
-
- Docker Containerization
-
-
- Kubernetes Orchestration
-
-
- Automated Deployment Pipelines
-
-
-
-
-
-
-
- User-friendly interfaces and extensible plugin architecture for broad accessibility and customization
-
-
-
-
- GUI Dashboard - Web-based interface
-
-
- AI Model Plugin System
-
-
- Custom Backend Integration
-
-
- Community Extensions Marketplace
-
-
-
-
-
-