CodeGuideDev · CodeGuideDev · Aug 10, 2025
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,71 @@
+# Claude Code Task Management Guide
+
+## Documentation Available
+
+📚 **Project Documentation**: Check the documentation files in this directory for project-specific setup instructions and guides.
+**Project Tasks**: Check the tasks directory in documentation/tasks for the list of tasks to be completed. Use the CLI commands below to interact with them.
+
+## MANDATORY Task Management Workflow
+
+🚨 **YOU MUST FOLLOW THIS EXACT WORKFLOW - NO EXCEPTIONS** 🚨
+
+### **STEP 1: DISCOVER TASKS (MANDATORY)**
+You MUST start by running this command to see all available tasks:
+```bash
+task-manager list-tasks
+```
+
+### **STEP 2: START EACH TASK (MANDATORY)**
+Before working on any task, you MUST mark it as started:
+```bash
+task-manager start-task <task_id>
+```
+
+### **STEP 3: COMPLETE EACH TASK (MANDATORY)**
+After finishing implementation, you MUST mark the task as completed:
+```bash
+task-manager complete-task <task_id> "Brief description of what was implemented"
+```
+
+## Task Files Location
+
+📁 **Task Data**: Your tasks are organized in the `documentation/tasks/` directory:
+- Task JSON files contain complete task information
+- Use ONLY the `task-manager` commands listed above
+- Follow the mandatory workflow sequence for each task
+
+## MANDATORY Task Workflow Sequence
+
+🔄 **For EACH individual task, you MUST follow this sequence:**
+
+1. 📋 **DISCOVER**: `task-manager list-tasks` (first time only)
+2. 🚀 **START**: `task-manager start-task <task_id>` (mark as in progress)
+3. 💻 **IMPLEMENT**: Do the actual coding/implementation work
+4. ✅ **COMPLETE**: `task-manager complete-task <task_id> "What was done"`
+5. 🔁 **REPEAT**: Go to next task (start from step 2)
+
+## Task Status Options
+
+- `pending` - Ready to work on
+- `in_progress` - Currently being worked on  
+- `completed` - Successfully finished
+- `blocked` - Cannot proceed (waiting for dependencies)
+- `cancelled` - No longer needed
+
+## CRITICAL WORKFLOW RULES
+
+❌ **NEVER skip** the `task-manager start-task` command
+❌ **NEVER skip** the `task-manager complete-task` command  
+❌ **NEVER work on multiple tasks simultaneously**
+✅ **ALWAYS complete one task fully before starting the next**
+✅ **ALWAYS provide completion details in the complete command**
+✅ **ALWAYS follow the exact 3-step sequence: list → start → complete**
+
+## Final Requirements
+
+🚨 **CRITICAL**: Your work is not complete until you have:
+1. ✅ Completed ALL tasks using the mandatory workflow
+2. ✅ Committed all changes with comprehensive commit messages  
+3. ✅ Created a pull request with proper description
+
+Remember: The task management workflow is MANDATORY, not optional!
diff --git a/app/globals.css b/app/globals.css
@@ -1,11 +1,27 @@
-@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-.logo-text {
-  font-family: Parkinsans, sans-serif;
+/* Modern font overrides */
+body {
+  font-family: 'Inter', var(--font-geist-sans), sans-serif !important;
+}
+
+.font-mono {
+  font-family: 'JetBrains Mono', var(--font-geist-mono), monospace !important;
+}
+
+/* Black and white theme utilities */
+.bg-pattern {
+  background-image: 
+    linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
+    linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
+    linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
 @layer utilities {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,8 +14,8 @@ const geistMono = localFont({
 })
 
 export const metadata: Metadata = {
-  title: 'CodeGuide Starter Lite',
-  description: 'Starter kit from codeguide.dev',
+  title: 'Codespace - AI CLI Tool',
+  description: 'Intelligent command-line interface that understands your code and accelerates your productivity.',
 }
 
 export default function RootLayout({

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Hero } from '@/components/ui/animated-hero'
+import { Hero } from '../components/ui/animated-hero'
 import Image from 'next/image'
 
 export default function Home() {

diff --git a/components/ui/animated-hero.tsx b/components/ui/animated-hero.tsx
@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
-import { MoveRight, PhoneCall } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import Image from 'next/image'
+import { Terminal, Download, ChevronRight, Code } from 'lucide-react'
+import { Button } from './button'
 
 function Hero() {
   const [titleNumber, setTitleNumber] = useState(0)
-  const titles = useMemo(() => ['Modern', 'Full-stack', 'Secure', 'Scalable', 'Powerful'], [])
+  const titles = useMemo(() => ['Intelligent', 'Efficient', 'Powerful', 'Modern'], [])
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
@@ -15,63 +14,112 @@ function Hero() {
       } else {
         setTitleNumber(titleNumber + 1)
       }
-    }, 2000)
+    }, 2500)
     return () => clearTimeout(timeoutId)
   }, [titleNumber, titles])
 
   return (
-    <div className="w-full">
-      <div className="container mx-auto">
-        <div className="flex flex-col items-center justify-center gap-8 py-20 lg:py-40">
-          <div>
-            <a
-              href="https://codeguide.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex flex-row items-center gap-2"
-            >
-              <Image src="/codeguide-logo.png" alt="CodeGuide" width={42} height={42} />
-              <span className="logo-text text-3xl font-bold">CodeGuide</span>
-            </a>
+    <div className="w-full min-h-screen bg-white text-black">
+      <div className="container mx-auto px-6">
+        <div className="flex flex-col items-center justify-center gap-12 py-20 lg:py-32">
+          {/* Logo and Brand */}
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex items-center gap-3">
+              <div className="p-3 border-2 border-black rounded-lg">
+                <Terminal className="h-8 w-8 text-black" />
+              </div>
+              <h1 className="text-4xl font-bold tracking-tight text-black font-mono">
+                Codespace
+              </h1>
+            </div>
+            <div className="h-px w-24 bg-black"></div>
           </div>
-          <div className="flex flex-col gap-4">
-            <h1 className="font-regular max-w-2xl text-center text-5xl tracking-tighter md:text-7xl">
-              <span className="relative flex w-full justify-center overflow-hidden text-center md:mb-1">
-                &nbsp;
-                {titles.map((title, index) => (
-                  <motion.span
-                    key={index}
-                    className="absolute font-semibold"
-                    initial={{ opacity: 0, y: '-100' }}
-                    transition={{ type: 'spring', stiffness: 50 }}
-                    animate={
-                      titleNumber === index
-                        ? {
-                            y: 0,
-                            opacity: 1,
-                          }
-                        : {
-                            y: titleNumber > index ? -150 : 150,
-                            opacity: 0,
-                          }
-                    }
-                  >
-                    {title}
-                  </motion.span>
-                ))}
-              </span>
-              <span className="text-spektr-cyan-50">Starter Kit Lite</span>
-            </h1>
 
-            <p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:mt-8 md:text-xl">
-              Start building with a modern web application template featuring authentication,
-              database integration. Built with Next.js 14, Clerk, Supabase.
+          {/* Animated Title */}
+          <div className="flex flex-col gap-6 text-center">
+            <div className="relative">
+              <h2 className="text-6xl md:text-7xl lg:text-8xl font-light tracking-tight">
+                <span className="relative flex w-full justify-center overflow-hidden text-center">
+                  {titles.map((title, index) => (
+                    <motion.span
+                      key={index}
+                      className="absolute font-light"
+                      initial={{ opacity: 0, y: 100 }}
+                      transition={{ type: 'spring', stiffness: 60, damping: 20 }}
+                      animate={
+                        titleNumber === index
+                          ? {
+                              y: 0,
+                              opacity: 1,
+                            }
+                          : {
+                              y: titleNumber > index ? -100 : 100,
+                              opacity: 0,
+                            }
+                      }
+                    >
+                      {title}
+                    </motion.span>
+                  ))}
+                </span>
+              </h2>
+              <div className="mt-4">
+                <h3 className="text-4xl md:text-5xl font-mono font-bold tracking-tight">
+                  AI CLI Tool
+                </h3>
+              </div>
+            </div>
+
+            <p className="max-w-2xl text-xl md:text-2xl leading-relaxed text-gray-700 font-light">
+              Supercharge your development workflow with an intelligent command-line interface
+              that understands your code and accelerates your productivity.
             </p>
           </div>
-          <div className="flex flex-row gap-3">
-            <Button size="lg" className="gap-4">
-              Get Started <MoveRight className="h-4 w-4" />
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 items-center">
+            <Button 
+              size="lg" 
+              className="bg-black text-white hover:bg-gray-800 border-0 px-8 py-6 text-lg font-medium rounded-lg transition-all duration-200"
+            >
+              <Download className="h-5 w-5 mr-2" />
+              Download Now
             </Button>
+            <Button 
+              variant="outline" 
+              size="lg"
+              className="border-2 border-black text-black bg-transparent hover:bg-black hover:text-white px-8 py-6 text-lg font-medium rounded-lg transition-all duration-200"
+            >
+              View Documentation
+              <ChevronRight className="h-5 w-5 ml-2" />
+            </Button>
+          </div>
+
+          {/* Features Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 w-full max-w-4xl">
+            <div className="text-center p-6 border border-gray-200 rounded-lg hover:border-black transition-colors duration-200">
+              <Code className="h-8 w-8 text-black mx-auto mb-4" />
+              <h4 className="text-lg font-semibold mb-2">Smart Code Analysis</h4>
+              <p className="text-gray-600 text-sm">
+                Understands your codebase and provides intelligent suggestions and optimizations.
+              </p>
+            </div>
+            <div className="text-center p-6 border border-gray-200 rounded-lg hover:border-black transition-colors duration-200">
+              <Terminal className="h-8 w-8 text-black mx-auto mb-4" />
+              <h4 className="text-lg font-semibold mb-2">Natural Language</h4>
+              <p className="text-gray-600 text-sm">
+                Execute complex commands using plain English. No need to memorize syntax.
+              </p>
+            </div>
+            <div className="text-center p-6 border border-gray-200 rounded-lg hover:border-black transition-colors duration-200">
+              <div className="h-8 w-8 text-black mx-auto mb-4 border-2 border-black rounded flex items-center justify-center">
+                <span className="text-xs font-bold">AI</span>
+              </div>
+              <h4 className="text-lg font-semibold mb-2">Context Aware</h4>
+              <p className="text-gray-600 text-sm">
+                Learns from your project structure and coding patterns for personalized assistance.
+              </p>
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

diff --git a/documentation/app_flowchart.md b/documentation/app_flowchart.md
@@ -0,0 +1,17 @@
+flowchart TD
+    A[Start] --> B[Collect User Input]
+    B --> C[Generate Outline]
+    C --> D{Create Summary}
+    D -->|Yes| E[Generate Summary]
+    D -->|No| F[Customize Output]
+    E --> F
+    F --> G{Export Or Integrate}
+    G -->|Export| H[Export To Formats]
+    G -->|Integrate| I[Integrate With Tools]
+    H --> J{Enable Collaboration}
+    I --> J
+    J -->|Yes| K[Collaborate And Share]
+    J -->|No| L[View Analytics]
+    K --> L
+    L --> M[Display Analytics And Insights]
+    M --> N[End]