Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: Build Modern Landing Page for CodeGuide.dev #10

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.

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
sajeelzafir wants to merge 1 commit into main
base: main
Choose a base branch
Loading
from feature/modern-landing-page-codeguide-dev-Pwq4fktq
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion CLAUDE.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Claude Code Task Management Guide
# Codespace Task Management Guide

## Documentation Available

Expand Down
207 changes: 39 additions & 168 deletions app/page.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,175 +1,46 @@
"use client";

import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
Code,
Database,
Shield,
Zap,
Globe,
Palette,
Package,
} from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { AuthButtons, HeroAuthButtons } from "@/components/auth-buttons";
import Image from "next/image";
import {
HeaderNavigation,
HeroSection,
FeaturesSection,
HowItWorksSection,
PricingSection,
Footer
} from "@/components/landing";
import type { Metadata } from 'next';

export const metadata: Metadata = {
title: 'CodeGuide - Development Made Simple',
description: 'The ultimate full-stack development platform with everything you need to build, deploy, and scale modern web applications.',
keywords: ['development', 'fullstack', 'TypeScript', 'React', 'Next.js', 'AI'],
openGraph: {
title: 'CodeGuide - Development Made Simple',
description: 'Build better apps, ship faster with our comprehensive development platform.',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'CodeGuide - Development Made Simple',
description: 'Build better apps, ship faster with our comprehensive development platform.',
}
};

export default function Home() {
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
{/* Hero Section */}
<div className="text-center py-12 sm:py-16 relative px-4">
<div className="absolute top-4 right-4 sm:top-6 sm:right-6">
<div className="flex items-center gap-2 sm:gap-3">
<AuthButtons />
<ThemeToggle />
</div>
</div>

<div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-4">
<Image
src="/codeguide-logo.png"
alt="CodeGuide Logo"
width={50}
height={50}
className="rounded-xl sm:w-[60px] sm:h-[60px]"
/>
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-blue-600 via-blue-500 to-blue-400 bg-clip-text text-transparent font-parkinsans">
Codeguide Starter Fullstack
</h1>
</div>
<p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto px-4 mb-8">
A modern full-stack TypeScript starter with authentication, database, and UI components
</p>

<HeroAuthButtons />
</div>

<main className="container mx-auto px-4 sm:px-6 pb-12 sm:pb-8 max-w-5xl">
{/* Project Overview */}
<div className="text-center mb-8">
<div className="text-4xl sm:text-5xl mb-2">🚀</div>
<div className="font-bold text-lg sm:text-xl mb-2">Modern Full-Stack Starter</div>
<div className="text-sm sm:text-base text-muted-foreground max-w-2xl mx-auto">
This project includes everything you need to build a modern web application with TypeScript,
authentication, database integration, and a beautiful UI component library.
</div>
</div>

{/* Tech Stack Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
{/* Frontend */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/10 dark:to-indigo-900/10 border-blue-200/50 dark:border-blue-700/30">
<div className="flex items-center gap-3 mb-3">
<Globe className="w-6 h-6 text-blue-600 dark:text-blue-400" />
<h3 className="font-semibold text-lg">Frontend</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>Next.js 15</strong> - React framework with App Router</li>
<li>• <strong>React 19</strong> - Latest React with concurrent features</li>
<li>• <strong>TypeScript</strong> - Type-safe development</li>
<li>• <strong>Turbopack</strong> - Fast bundling and dev server</li>
</ul>
</Card>

{/* UI & Styling */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/10 dark:to-pink-900/10 border-purple-200/50 dark:border-purple-700/30">
<div className="flex items-center gap-3 mb-3">
<Palette className="w-6 h-6 text-purple-600 dark:text-purple-400" />
<h3 className="font-semibold text-lg">UI & Styling</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>Tailwind CSS 4</strong> - Utility-first CSS framework</li>
<li>• <strong>Radix UI</strong> - Accessible component primitives</li>
<li>• <strong>Lucide Icons</strong> - Beautiful icon library</li>
<li>• <strong>Dark Mode</strong> - Built-in theme switching</li>
</ul>
</Card>

{/* Authentication */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 border-green-200/50 dark:border-green-700/30">
<div className="flex items-center gap-3 mb-3">
<Shield className="w-6 h-6 text-green-600 dark:text-green-400" />
<h3 className="font-semibold text-lg">Authentication</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>Better Auth</strong> - Modern auth solution</li>
<li>• <strong>Session Management</strong> - Secure user sessions</li>
<li>• <strong>Type Safety</strong> - Fully typed auth hooks</li>
<li>• <strong>Multiple Providers</strong> - Social login support</li>
</ul>
</Card>

{/* Database */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-cyan-50 to-blue-50 dark:from-cyan-900/10 dark:to-blue-900/10 border-cyan-200/50 dark:border-cyan-700/30">
<div className="flex items-center gap-3 mb-3">
<Database className="w-6 h-6 text-cyan-600 dark:text-cyan-400" />
<h3 className="font-semibold text-lg">Database</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>PostgreSQL</strong> - Robust relational database</li>
<li>• <strong>Drizzle ORM</strong> - Type-safe database toolkit</li>
<li>• <strong>Docker Setup</strong> - Containerized development</li>
<li>• <strong>Migrations</strong> - Schema version control</li>
</ul>
</Card>

{/* Development */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-900/10 dark:to-red-900/10 border-orange-200/50 dark:border-orange-700/30">
<div className="flex items-center gap-3 mb-3">
<Code className="w-6 h-6 text-orange-600 dark:text-orange-400" />
<h3 className="font-semibold text-lg">Development</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>ESLint</strong> - Code linting and formatting</li>
<li>• <strong>Hot Reload</strong> - Instant development feedback</li>
<li>• <strong>Docker</strong> - Consistent dev environment</li>
<li>• <strong>npm Scripts</strong> - Automated workflows</li>
</ul>
</Card>

{/* Components */}
<Card className="p-4 sm:p-6 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/10 dark:to-purple-900/10 border-indigo-200/50 dark:border-indigo-700/30">
<div className="flex items-center gap-3 mb-3">
<Package className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
<h3 className="font-semibold text-lg">Components</h3>
</div>
<ul className="space-y-2 text-sm text-muted-foreground">
<li>• <strong>Form Handling</strong> - React Hook Form + Zod</li>
<li>• <strong>Data Visualization</strong> - Recharts integration</li>
<li>• <strong>Date Pickers</strong> - Beautiful date components</li>
<li>• <strong>Notifications</strong> - Toast and alert systems</li>
</ul>
</Card>
</div>

{/* Getting Started */}
<Card className="p-6 bg-gradient-to-r from-slate-50 to-gray-50 dark:from-slate-900/50 dark:to-gray-900/50">
<h3 className="font-bold text-xl mb-4 flex items-center gap-2">
<Zap className="w-5 h-5 text-yellow-500" />
Quick Start
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 className="font-semibold mb-2">Development</h4>
<div className="bg-black/5 dark:bg-white/5 rounded-lg p-3 font-mono text-sm">
<div>npm install</div>
<div>npm run db:dev</div>
<div>npm run dev</div>
</div>
</div>
<div>
<h4 className="font-semibold mb-2">Production</h4>
<div className="bg-black/5 dark:bg-white/5 rounded-lg p-3 font-mono text-sm">
<div>npm run build</div>
<div>npm run start</div>
<div>npm run docker:up</div>
</div>
</div>
</div>
</Card>
<div className="min-h-screen">
<HeaderNavigation />
<main>
<HeroSection />
<section id="features">
<FeaturesSection />
</section>
<section id="how-it-works">
<HowItWorksSection />
</section>
<section id="pricing">
<PricingSection />
</section>
</main>
<Footer />
</div>
);
}
129 changes: 129 additions & 0 deletions components/landing/FeaturesSection.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
Code,
Database,
Shield,
Zap,
Globe,
Palette,
Workflow,
Bot,
Rocket
} from "lucide-react";

const features = [
{
icon: Code,
title: "Modern Tech Stack",
description: "Built with Next.js 15, React 19, TypeScript, and Tailwind CSS for the best developer experience.",
gradient: "from-blue-500 to-cyan-500"
},
{
icon: Shield,
title: "Built-in Authentication",
description: "Secure authentication system with session management and multiple provider support out of the box.",
gradient: "from-green-500 to-emerald-500"
},
{
icon: Database,
title: "Database Integration",
description: "PostgreSQL with Drizzle ORM for type-safe database operations and seamless migrations.",
gradient: "from-purple-500 to-pink-500"
},
{
icon: Palette,
title: "Beautiful UI Components",
description: "40+ accessible UI components built with Radix UI and styled with Tailwind CSS.",
gradient: "from-orange-500 to-red-500"
},
{
icon: Bot,
title: "AI-Powered Development",
description: "Integrated AI tools to help you write better code, debug faster, and deploy with confidence.",
gradient: "from-violet-500 to-purple-500"
},
{
icon: Rocket,
title: "Production Ready",
description: "Docker configuration, performance optimizations, and best practices built-in from day one.",
gradient: "from-cyan-500 to-blue-500"
}
];

export function FeaturesSection() {
return (
<section className="py-24 bg-background">
<div className="container mx-auto px-4">
{/* Section header */}
<div className="text-center mb-16">
<div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-4">
<Zap className="w-4 h-4" />
Features
</div>
<h2 className="text-3xl md:text-5xl font-bold mb-4">
Everything You Need to
<span className="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Build Amazing Apps
</span>
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
CodeGuide provides all the tools, components, and integrations you need to build modern web applications faster than ever before.
</p>
</div>

{/* Features grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<Card key={index} className="relative group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
<CardHeader className="pb-4">
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
<Icon className="w-6 h-6 text-white" />
</div>
<CardTitle className="text-xl font-bold">
{feature.title}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground leading-relaxed">
{feature.description}
</p>
</CardContent>
</Card>
);
})}
</div>

{/* Additional features row */}
<div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center p-6">
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Globe className="w-8 h-8 text-white" />
</div>
<h3 className="text-lg font-semibold mb-2">Global CDN</h3>
<p className="text-muted-foreground">Deploy globally with edge functions and instant loading worldwide.</p>
</div>

<div className="text-center p-6">
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Workflow className="w-8 h-8 text-white" />
</div>
<h3 className="text-lg font-semibold mb-2">CI/CD Pipeline</h3>
<p className="text-muted-foreground">Automated testing, building, and deployment with every commit.</p>
</div>

<div className="text-center p-6">
<div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
<Shield className="w-8 h-8 text-white" />
</div>
<h3 className="text-lg font-semibold mb-2">Security First</h3>
<p className="text-muted-foreground">Built-in security best practices and vulnerability monitoring.</p>
</div>
</div>
</div>
</section>
);
}
Loading

AltStyle によって変換されたページ (->オリジナル) /