Skip to content

Frontend redesign to minimal SaaS aesthetic; preserve hero/navbar #9

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

Open
cto-new wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Frontend redesign to minimal SaaS aesthetic; preserve hero/navbar #9

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
67 changes: 65 additions & 2 deletions src/components/AIBackends.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,72 @@
import { GlowingEffectDemo } from "@/components/ui/glowing-effect-demo";
import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";

const features = [
{
icon: Box,
title: "Multiple AI Backends",
description: "Choose from Claude, GPT-4, Gemini, or any OpenAI-compatible API. Switch between models seamlessly based on your project needs."
},
{
icon: Settings,
title: "Fully Customizable",
description: "Configure every aspect of your AI assistant. From prompt templates to response formats, make it work exactly how you want."
},
{
icon: Lock,
title: "Data Privacy",
description: "Self-hosted option available. Your code never leaves your environment when using local models or private API endpoints."
},
{
icon: Sparkles,
title: "Advanced Modes",
description: "Beyond basic chat - Debug Mode for troubleshooting, Architect Mode for planning, and Async Mode for autonomous development."
},
{
icon: Search,
title: "Enterprise Security",
description: "Built with security in mind. Audit logs, role-based access, and compliance features for enterprise development teams."
}
];

export default function AIBackends() {
return (
<section id="ai-backends" className="py-20 bg-transparent">
<GlowingEffectDemo />
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Your Control, Your Rules
</h2>
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Complete flexibility to choose your AI backend, customize your workflow, and maintain full control over your development process.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 md:gap-8">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<div
key={index}
className="p-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:shadow-md dark:hover:shadow-lg transition-shadow duration-200"
>
<div className="flex items-start gap-4">
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-800 flex-shrink-0">
<Icon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{feature.title}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
{feature.description}
</p>
</div>
</div>
</div>
);
})}
</div>
</div>
</section>
);
}
122 changes: 96 additions & 26 deletions src/components/EnhancedRoadmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,129 @@
"use client";
import React from "react";
import { RoadmapTimeline } from "@/components/ui/roadmap-timeline";
import { CheckCircle2 } from "lucide-react";

const roadmapPhases = [
{
phase: "Phase 1",
title: "Foundation",
status: "In Progress",
items: [
"Debug Mode - Interactive debugging assistance",
"Ask Mode - Natural language code queries",
"Documentation Mode - Auto-generate docs",
"Architect Mode - System design planning"
]
},
{
phase: "Phase 2",
title: "Automation",
status: "Planned",
items: [
"Async Mode - Autonomous task chaining",
"PR Creation & Review - Automated pull requests",
"Intelligent Code Suggestions",
"Multi-language support"
]
},
{
phase: "Phase 3",
title: "DevOps",
status: "Planned",
items: [
"CI/CD Integration - GitHub Actions & GitLab",
"Docker Containerization",
"Kubernetes Orchestration",
"Automated Deployment Pipelines"
]
},
{
phase: "Phase 4",
title: "Platform",
status: "Planned",
items: [
"Web-based IDE Integration",
"Plugin Architecture",
"Team Collaboration Features",
"Analytics Dashboard"
]
}
];

export default function EnhancedRoadmap() {
return (
<section id="roadmap" className="py-20 bg-transparent">
<div className="max-w-6xl mx-auto px-6">
{/* Section Header */}
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Development Roadmap
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Our vision for the future of AI-powered development. Track our progress and see what&apos;s coming next.
</p>
<div className="inline-flex items-center space-x-2 bg-white dark:bg-gray-800 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700">
<span className="text-gray-600 dark:text-gray-300 text-sm font-medium">
🎯 Version 0.1.0 Target
</span>
</div>
</div>

{/* Enhanced Timeline Component */}
<div className="relative -mx-6">
<RoadmapTimeline />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
{roadmapPhases.map((phase, index) => (
<div
key={index}
className="p-8 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
>
<div className="flex items-start justify-between mb-6">
<div>
<div className="text-sm font-medium text-blue-600 dark:text-blue-400 mb-1">
{phase.phase}
</div>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
{phase.title}
</h3>
</div>
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800">
<div className={`w-2 h-2 rounded-full ${phase.status === 'In Progress' ? 'bg-blue-500' : 'bg-gray-400'}`} />
<span className="text-xs font-medium text-gray-600 dark:text-gray-300">
{phase.status}
</span>
</div>
</div>
<ul className="space-y-3">
{phase.items.map((item, itemIndex) => (
<li key={itemIndex} className="flex items-start gap-3">
<CheckCircle2 className="w-5 h-5 text-gray-300 dark:text-gray-700 flex-shrink-0 mt-0.5" />
<span className="text-sm text-gray-600 dark:text-gray-300">
{item}
</span>
</li>
))}
</ul>
</div>
))}
</div>

{/* Community Section */}
<div className="mt-20 text-center">
<div className="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
<div className="bg-gradient-to-r from-blue-50 to-transparent dark:from-blue-950/20 dark:to-transparent rounded-xl border border-blue-200 dark:border-blue-800/50 p-8">
<div className="max-w-2xl mx-auto text-center">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
Help Shape the Future
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
Async Coder is built with and for the open-source community. Your feedback,
contributions, and feature requests directly influence our roadmap.
<p className="text-gray-600 dark:text-gray-300 mb-6">
Async Coder is built with and for the open-source community. Your feedback, contributions, and feature requests directly influence our roadmap.
</p>
<div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
<div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
<a
href="https://github.com/your-org/async-coder/discussions"
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-200"
className="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200"
>
💬 Join Discussions
Discussions
</a>
<a
href="https://github.com/your-org/async-coder/issues"
className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
className="px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
>
🐛 Report Issues
Report Issues
</a>
<a
href="https://github.com/your-org/async-coder"
className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
className="px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
>
⭐ Star on GitHub
GitHub
</a>
</div>
</div>
Expand Down
100 changes: 53 additions & 47 deletions src/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,72 @@
import { BentoDemo } from "@/components/ui/bento-demo";
import { Bug, MessageCircle, FileText, Blocks, GitPullRequest, Rocket } from "lucide-react";

export default function Features() {
const features = [
{
icon: Bug,
title: "Debug Mode",
description: "Automatically detects bugs, generates fixes, and adds intelligent logging for better runtime insights."
},
{
icon: MessageCircle,
title: "Ask Mode",
description: "Ask anything about your codebase or a specific file. Fetches relevant context and provides real-world examples."
},
{
icon: FileText,
title: "Documentation",
description: "Generates and updates project documentation, inline code comments, and API references."
},
{
icon: Blocks,
title: "Architect Mode",
description: "Designs scalable architectures, proposes best practices, and outlines your technical roadmap."
},
{
icon: GitPullRequest,
title: "PR Review",
description: "Creates new PRs or reviews incoming ones, offering detailed review comments and automated test suggestions."
},
{
icon: Rocket,
title: "Async Mode",
description: "The most advanced mode. Autonomously chains all other modes to handle your project end-to-end."
}
];

export default function Features() {
return (
<section id="features" className="py-20 bg-transparent">
<div className="max-w-7xl mx-auto px-6">
{/* Section Header */}
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Multi-Mode AI Assistance
Comprehensive AI Modes
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Specialized modes for every stage of your development cycle. From debugging to deployment,
Async Coder has the right mode for your needs.
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Specialized modes for every stage of your development cycle. From debugging to autonomous development,
choose the mode that fits your workflow.
</p>
</div>

{/* BentoGrid Features */}
<BentoDemo />

{/* Additional Features */}
<div className="mt-20">
<h3 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-12">
In-Built Development Tools
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{
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) => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<div
key={index}
className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700"
className="group flex flex-col p-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-blue-300 dark:hover:border-blue-700 transition-colors duration-200"
>
<div className="text-3xl mb-3">{tool.icon}</div>
<h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{tool.title}
</h4>
<p className="text-gray-600 dark:text-gray-300 text-sm">
{tool.description}
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-800 group-hover:bg-blue-50 dark:group-hover:bg-blue-950 transition-colors duration-200 mb-4">
<Icon className="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200" />
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{feature.title}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
{feature.description}
</p>
</div>
))}
</div>
);
})}
</div>
</div>
</section>
Expand Down
Loading