feat: Implement glassmorphism landing page for CodeGuide

CLAUDE.md

@@ -0,0 +1,64 @@
+# 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 OR CANCEL EACH TASK (MANDATORY)**
+After finishing implementation, you MUST mark the task as completed, or cancel if you cannot complete it:
+```bash
+task-manager complete-task <task_id> "Brief description of what was implemented"
+# or
+task-manager cancel-task <task_id> "Reason for cancellation"
+```
+
+## 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"` (or cancel with `task-manager cancel-task <task_id> "Reason"`)
+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  (use `task-manager cancel-task` if a task is not planned, not required, or you must stop it)
+❌ **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 (or cancel if not required)**

app/globals.css

@@ -12,6 +12,104 @@
   .text-balance {
     text-wrap: balance;
   }
+
+  /* Glassmorphism Base Class */
+  .glass {
+    background: linear-gradient(
+      135deg,
+      var(--glass-gradient-start),
+      var(--glass-gradient-end)
+    );
+    backdrop-filter: blur(var(--glass-blur-md));
+    -webkit-backdrop-filter: blur(var(--glass-blur-md));
+    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
+    box-shadow: var(--glass-shadow);
+  }
+
+  /* Fallback for browsers without backdrop-filter support */
+  @supports not (backdrop-filter: blur(1px)) {
+    .glass {
+      background: rgba(255, 255, 255, var(--glass-opacity-medium));
+    }
+  }
+
+  /* Glassmorphism Variants */
+  .glass-sm {
+    backdrop-filter: blur(var(--glass-blur-sm));
+    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--glass-opacity-light)),
+      rgba(255, 255, 255, 0.02)
+    );
+  }
+
+  .glass-md {
+    backdrop-filter: blur(var(--glass-blur-md));
+    -webkit-backdrop-filter: blur(var(--glass-blur-md));
+    background: linear-gradient(
+      135deg,
+      var(--glass-gradient-start),
+      var(--glass-gradient-end)
+    );
+  }
+
+  .glass-lg {
+    backdrop-filter: blur(var(--glass-blur-lg));
+    -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--glass-opacity-heavy)),
+      rgba(255, 255, 255, 0.08)
+    );
+  }
+
+  .glass-xl {
+    backdrop-filter: blur(var(--glass-blur-xl));
+    -webkit-backdrop-filter: blur(var(--glass-blur-xl));
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--glass-opacity-heavy)),
+      rgba(255, 255, 255, 0.1)
+    );
+  }
+
+  /* Glassmorphism Hover Effects */
+  .glass-hover {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .glass-hover:hover {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--glass-hover-opacity)),
+      rgba(255, 255, 255, 0.08)
+    );
+    transform: translateY(-2px);
+    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);
+  }
+
+  /* Glassmorphism Card Component */
+  .glass-card {
+    @apply glass glass-hover rounded-2xl p-6;
+    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
+  }
+
+  /* Glassmorphism Button Variant */
+  .glass-button {
+    @apply glass glass-hover rounded-full px-8 py-3;
+    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
+    backdrop-filter: blur(var(--glass-blur-sm));
+    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  }
+
+  .glass-button:hover {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, var(--glass-hover-opacity)),
+      rgba(255, 255, 255, 0.1)
+    );
+  }
 }
 
 @layer base {
@@ -49,6 +147,20 @@
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    /* Glassmorphism Custom Properties */
+    --glass-blur-sm: 8px;
+    --glass-blur-md: 12px;
+    --glass-blur-lg: 16px;
+    --glass-blur-xl: 20px;
+    --glass-opacity-light: 0.1;
+    --glass-opacity-medium: 0.15;
+    --glass-opacity-heavy: 0.2;
+    --glass-border-opacity: 0.3;
+    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+    --glass-gradient-start: rgba(255, 255, 255, 0.25);
+    --glass-gradient-end: rgba(255, 255, 255, 0.05);
+    --glass-hover-opacity: 0.25;
   }
   .dark {
     --background: 240 10% 3.9%;
@@ -83,6 +195,15 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+
+    /* Dark Mode Glassmorphism Properties */
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --glass-gradient-start: rgba(255, 255, 255, 0.1);
+    --glass-gradient-end: rgba(255, 255, 255, 0.02);
+    --glass-opacity-light: 0.05;
+    --glass-opacity-medium: 0.08;
+    --glass-opacity-heavy: 0.12;
+    --glass-hover-opacity: 0.15;
   }
 }
 

app/layout.tsx

@@ -15,8 +15,35 @@ const geistMono = localFont({
 })
 
 export const metadata: Metadata = {
-  title: 'CodeGuide Starter Pro',
-  description: 'Starter kit from codeguide.dev',
+  title: 'CodeGuide - AI-Powered Code Development Platform',
+  description: 'Elevate your coding experience with AI-powered insights, real-time suggestions, and intelligent code analysis. Transform how you write, review, and optimize code with CodeGuide.',
+  keywords: 'code analysis, AI programming, development tools, code review, programming assistant, software development, code optimization',
+  authors: [{ name: 'CodeGuide Team' }],
+  creator: 'CodeGuide',
+  publisher: 'CodeGuide',
+  robots: 'index, follow',
+  openGraph: {
+    title: 'CodeGuide - AI-Powered Code Development Platform',
+    description: 'Revolutionize your development workflow with AI-powered code analysis, real-time suggestions, and intelligent programming assistance.',
+    url: 'https://codeguide.dev',
+    siteName: 'CodeGuide',
+    type: 'website',
+    images: [
+      {
+        url: '/codeguide-logo.png',
+        width: 1200,
+        height: 630,
+        alt: 'CodeGuide - AI-Powered Development Platform',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'CodeGuide - AI-Powered Code Development Platform',
+    description: 'Transform your coding experience with intelligent AI-powered development tools.',
+    images: ['/codeguide-logo.png'],
+  },
+  viewport: 'width=device-width, initial-scale=1',
 }
 
 export default function RootLayout({

app/page.tsx

@@ -1,8 +1,21 @@
 "use client"
 
-import { Hero } from '@/components/ui/animated-hero'
-import Image from 'next/image'
+import { Hero } from '@/components/hero-glassmorphism'
+import { Features } from '@/components/features-glassmorphism'
 
 export default function Home() {
-  return <Hero />
+  return (
+    <main className="relative">
+      {/* Main Content */}
+      <Hero />
+      <Features />
+
+      {/* Smooth Scroll Behavior */}
+      <style jsx global>{`
+        html {
+          scroll-behavior: smooth;
+        }
+      `}</style>
+    </main>
+  )
 }