ui/ replace emojis with lucide react icons

This commit is contained in:
Leon van Zyl
2025-08-27 08:13:09 +02:00
parent eb71ad75b6
commit a0de269975
8 changed files with 70 additions and 24 deletions

View File

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
import { SetupChecklist } from "@/components/setup-checklist";
import { useDiagnostics } from "@/hooks/use-diagnostics";
import { StarterPromptModal } from "@/components/starter-prompt-modal";
import { Video, Shield, Database, Palette, Bot } from "lucide-react";
export default function Home() {
const { isAuthReady, isAiReady, loading } = useDiagnostics();
@@ -12,8 +13,16 @@ export default function Home() {
<main className="flex-1 container mx-auto px-4 py-12">
<div className="max-w-4xl mx-auto text-center space-y-8">
<div className="space-y-4">
<h2 className="text-4xl font-bold tracking-tight">
Welcome to Your Agentic Coding Boilerplate
<div className="flex items-center justify-center gap-3 mb-2">
<div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10">
<Bot className="h-7 w-7 text-primary" />
</div>
<h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent">
Starter Kit
</h1>
</div>
<h2 className="text-2xl font-semibold text-muted-foreground">
Complete Boilerplate for AI Applications
</h2>
<p className="text-xl text-muted-foreground">
A complete agentic coding boilerplate with authentication, database, AI
@@ -23,7 +32,10 @@ export default function Home() {
{/* YouTube Tutorial Video */}
<div className="space-y-4">
<h3 className="text-2xl font-semibold">📺 Video Tutorial</h3>
<h3 className="text-2xl font-semibold flex items-center justify-center gap-2">
<Video className="h-6 w-6" />
Video Tutorial
</h3>
<p className="text-muted-foreground">
Watch the complete walkthrough of this agentic coding boilerplate:
</p>
@@ -42,25 +54,37 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
<div className="p-6 border rounded-lg">
<h3 className="font-semibold mb-2">🔐 Authentication</h3>
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Shield className="h-4 w-4" />
Authentication
</h3>
<p className="text-sm text-muted-foreground">
Better Auth with Google OAuth integration
</p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold mb-2">🗄 Database</h3>
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Database className="h-4 w-4" />
Database
</h3>
<p className="text-sm text-muted-foreground">
Drizzle ORM with PostgreSQL setup
</p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold mb-2">🤖 AI Ready</h3>
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Bot className="h-4 w-4" />
AI Ready
</h3>
<p className="text-sm text-muted-foreground">
Vercel AI SDK with OpenAI integration
</p>
</div>
<div className="p-6 border rounded-lg">
<h3 className="font-semibold mb-2">🎨 UI Components</h3>
<h3 className="font-semibold mb-2 flex items-center gap-2">
<Palette className="h-4 w-4" />
UI Components
</h3>
<p className="text-sm text-muted-foreground">
shadcn/ui with Tailwind CSS
</p>