diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..783a84f --- /dev/null +++ b/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 +``` + +### **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 "Brief description of what was implemented" +# or +task-manager cancel-task "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 ` (mark as in progress) +3. 💻 **IMPLEMENT**: Do the actual coding/implementation work +4. ✅ **COMPLETE**: `task-manager complete-task "What was done"` (or cancel with `task-manager cancel-task "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)** \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index c401399..042e352 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,17 @@ "use client" import { Hero } from '@/components/ui/animated-hero' -import Image from 'next/image' +import { FeaturesSection } from '@/components/ui/features-section' +import { UserFlowSection } from '@/components/ui/user-flow-section' +import { CTAAuthSection } from '@/components/ui/cta-auth-section' export default function Home() { - return + return ( +
+ + + + +
+ ) } diff --git a/components/ui/animated-hero.tsx b/components/ui/animated-hero.tsx index b47fa57..2c25599 100644 --- a/components/ui/animated-hero.tsx +++ b/components/ui/animated-hero.tsx @@ -1,12 +1,13 @@ import { useEffect, useMemo, useState } from 'react' import { motion } from 'framer-motion' -import { MoveRight, PhoneCall } from 'lucide-react' +import { MoveRight, FileText, BookOpen, Sparkles, Clock } from 'lucide-react' import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' import Image from 'next/image' function Hero() { const [titleNumber, setTitleNumber] = useState(0) - const titles = useMemo(() => ['Modern', 'Full-stack', 'Secure', 'Scalable', 'Powerful'], []) + const titles = useMemo(() => ['Outlines', 'Summaries', 'Documents', 'Ideas', 'Projects'], []) useEffect(() => { const timeoutId = setTimeout(() => { @@ -15,64 +16,149 @@ function Hero() { } else { setTitleNumber(titleNumber + 1) } - }, 2000) + }, 2500) return () => clearTimeout(timeoutId) }, [titleNumber, titles]) return ( -
-
-
-
+
+
+ -
-

- -   - {titles.map((title, index) => ( - index ? -150 : 150, - opacity: 0, - } - } - > - {title} - - ))} + + + {/* Benefit Badge */} + + + + Save 70% of your time on document creation + + + + {/* Main Headline */} +
+ + Turn Ideas Into Structured{' '} + + + {titles.map((title, index) => ( + index ? -100 : 100, + opacity: 0, + } + } + > + {title} + + ))} + - Starter Kit Lite -

+
+ In Seconds + -

- Start building with a modern web application template featuring authentication, - database integration. Built with Next.js 14, Clerk, Supabase. -

+ + Transform your raw project ideas into well-structured outlines and concise summaries using AI. + Stop juggling multiple documents and fragmented brainstorming sessions. +
-
- -
+ + + + {/* Features Preview */} + +
+
+ +
+

AI-Powered Generation

+

+ Advanced NLP creates structured content from your raw ideas +

+
+ +
+
+ +
+

Lightning Fast

+

+ Generate comprehensive outlines in under 2 seconds +

+
+ +
+
+ +
+

Export Ready

+

+ Download as DOCX, PDF, or Markdown instantly +

+
+
diff --git a/components/ui/cta-auth-section.tsx b/components/ui/cta-auth-section.tsx new file mode 100644 index 0000000..1f064ab --- /dev/null +++ b/components/ui/cta-auth-section.tsx @@ -0,0 +1,334 @@ +'use client' + +import { useState } from 'react' +import { motion } from 'framer-motion' +import { + ArrowRight, + Mail, + Shield, + Star, + Users, + Clock, + CheckCircle, + Loader2 +} from 'lucide-react' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' + +export function CTAAuthSection() { + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [isLoading, setIsLoading] = useState(false) + const [showSignUp, setShowSignUp] = useState(false) + + const handleEmailSignUp = async (e: React.FormEvent) => { + e.preventDefault() + setIsLoading(true) + + // Simulate API call + setTimeout(() => { + setIsLoading(false) + // Here would be the actual Clerk authentication + console.log('Sign up with:', email, password) + }, 2000) + } + + const handleOAuthSignUp = (provider: 'google' | 'microsoft') => { + // Here would be the actual OAuth integration with Clerk + console.log(`Sign up with ${provider}`) + } + + const testimonials = [ + { + name: "Sarah Chen", + role: "Product Manager at TechCorp", + content: "CodeGuide reduced our documentation time by 80%. Our team can now focus on building instead of writing.", + rating: 5 + }, + { + name: "Marcus Johnson", + role: "Startup Founder", + content: "From idea to investor pitch in minutes, not days. This tool is a game-changer for entrepreneurs.", + rating: 5 + }, + { + name: "Dr. Emily Rodriguez", + role: "Research Director", + content: "The AI understands context better than any tool I've used. Perfect for academic and research projects.", + rating: 5 + } + ] + + const stats = [ + { number: "50K+", label: "Happy Users" }, + { number: "2M+", label: "Documents Created" }, + { number: "70%", label: "Time Saved" }, + { number: "4.9/5", label: "User Rating" } + ] + + const features = [ + "Unlimited outline & summary generation", + "All export formats (DOCX, PDF, Markdown)", + "Real-time collaboration", + "Advanced customization options", + "Priority customer support", + "30-day money-back guarantee" + ] + + return ( +
+ {/* Background Elements */} +
+
+
+
+
+ +
+ {/* Social Proof Stats */} + + {stats.map((stat, index) => ( +
+
{stat.number}
+
{stat.label}
+
+ ))} + + +
+ {/* Left Side - CTA Content */} + +
+

+ Ready to Transform +
+ + Your Workflow? + +

+

+ Join thousands of professionals who are already saving hours every week + with AI-powered document creation. +

+
+ + {/* Feature List */} +
+ {features.map((feature, index) => ( + + + {feature} + + ))} +
+ + {/* Testimonials Preview */} +
+

What our users say:

+
+ {testimonials.slice(0, 2).map((testimonial, index) => ( + +
+ {[...Array(testimonial.rating)].map((_, i) => ( + + ))} +
+

“{testimonial.content}”

+
+
{testimonial.name}
+
{testimonial.role}
+
+ + ))} +
+
+ + + {/* Right Side - Sign Up Form */} + +
+
+

Start Your Free Trial

+

No credit card required • Full access for 14 days

+
+ + {!showSignUp ? ( +
+ {/* OAuth Buttons */} + + + + +
+
+
+
+
+ or +
+
+ + +
+ ) : ( +
+
+ setEmail(e.target.value)} + required + className="bg-white/10 border-white/30 text-white placeholder:text-blue-200" + /> +
+
+ setPassword(e.target.value)} + required + className="bg-white/10 border-white/30 text-white placeholder:text-blue-200" + /> +
+ + +
+ )} + + {/* Trust Indicators */} +
+
+ + Enterprise-grade security +
+
+ + Trusted by 50,000+ professionals +
+
+ + Setup in under 2 minutes +
+
+ + {/* Legal Links */} +
+ By signing up, you agree to our{' '} + Terms of Service + {' '}and{' '} + Privacy Policy +
+
+ +
+ + {/* Bottom Testimonial Section */} + + {testimonials.map((testimonial, index) => ( +
+
+ {[...Array(testimonial.rating)].map((_, i) => ( + + ))} +
+

“{testimonial.content}”

+
+
{testimonial.name}
+
{testimonial.role}
+
+
+ ))} + +
+
+ ) +} \ No newline at end of file diff --git a/components/ui/features-section.tsx b/components/ui/features-section.tsx new file mode 100644 index 0000000..95b6a53 --- /dev/null +++ b/components/ui/features-section.tsx @@ -0,0 +1,193 @@ +'use client' + +import { motion } from 'framer-motion' +import { + Sparkles, + FileText, + Settings, + Users, + Download, + Shield, + Zap, + RefreshCw, + BarChart3, + Bot +} from 'lucide-react' + +interface FeatureCardProps { + icon: React.ReactNode + title: string + description: string + gradient: string + delay: number +} + +const FeatureCard = ({ icon, title, description, gradient, delay }: FeatureCardProps) => { + return ( + +
+
+
+ {icon} +
+

{title}

+

{description}

+
+ + ) +} + +export function FeaturesSection() { + const features = [ + { + icon: , + title: "AI-Powered Outline Generation", + description: "Transform raw project ideas into well-structured outlines using advanced GPT-4 technology. Input your goals and audience to get comprehensive section breakdowns instantly.", + gradient: "bg-gradient-to-br from-blue-500 to-purple-600", + delay: 0.1 + }, + { + icon: , + title: "Smart Summary Creation", + description: "Turn lengthy text into concise, high-impact summaries. Our NLP engine distills key information while preserving essential context and meaning.", + gradient: "bg-gradient-to-br from-purple-500 to-pink-600", + delay: 0.2 + }, + { + icon: , + title: "Advanced Customization Panel", + description: "Fine-tune tone, adjust length, control detail levels, and select from pre-built templates or create your own. Complete control over output style.", + gradient: "bg-gradient-to-br from-green-500 to-teal-600", + delay: 0.3 + }, + { + icon: , + title: "Real-Time Collaboration", + description: "Co-edit documents with your team using WebSocket-powered live editing. Complete with version history and change tracking for seamless teamwork.", + gradient: "bg-gradient-to-br from-orange-500 to-red-600", + delay: 0.4 + }, + { + icon: , + title: "Multi-Format Export", + description: "Export your outlines and summaries as DOCX, PDF, or Markdown files. Perfect for sharing, presenting, or integrating into your existing workflows.", + gradient: "bg-gradient-to-br from-indigo-500 to-blue-600", + delay: 0.5 + }, + { + icon: , + title: "Secure Sharing Links", + description: "Generate secure sharing links with granular permissions. Control who can view, comment, or edit your documents with enterprise-grade security.", + gradient: "bg-gradient-to-br from-emerald-500 to-green-600", + delay: 0.6 + }, + { + icon: , + title: "Lightning Fast Performance", + description: "Generate comprehensive outlines in under 2 seconds. Optimized for speed without compromising on quality or accuracy.", + gradient: "bg-gradient-to-br from-yellow-500 to-orange-600", + delay: 0.7 + }, + { + icon: , + title: "Template Library", + description: "Access pre-built templates for common use cases or save your own custom templates. Streamline your workflow with reusable document structures.", + gradient: "bg-gradient-to-br from-cyan-500 to-blue-600", + delay: 0.8 + }, + { + icon: , + title: "Usage Analytics", + description: "Track your productivity gains with detailed analytics. Monitor template usage, content ratings, and time saved across all your projects.", + gradient: "bg-gradient-to-br from-violet-500 to-purple-600", + delay: 0.9 + } + ] + + return ( +
+
+ {/* Section Header */} + +
+ + + Core Features + +
+

+ Everything You Need to +
+ + Transform Ideas + +

+

+ Our comprehensive platform combines cutting-edge AI with intuitive design to help you create, + collaborate, and export professional documents faster than ever before. +

+ + + {/* Features Grid */} +
+ {features.map((feature, index) => ( + + ))} +
+ + {/* Bottom CTA */} + +
+

+ Ready to boost your productivity? +

+

+ Join thousands of professionals who have already saved hundreds of hours using CodeGuide. +

+
+ + Start Creating Now + + + View Demo + +
+
+ +
+
+ ) +} \ No newline at end of file diff --git a/components/ui/user-flow-section.tsx b/components/ui/user-flow-section.tsx new file mode 100644 index 0000000..f155def --- /dev/null +++ b/components/ui/user-flow-section.tsx @@ -0,0 +1,489 @@ +'use client' + +import { motion } from 'framer-motion' +import { useState } from 'react' +import { + UserPlus, + LayoutDashboard, + Edit3, + Bot, + Settings, + Download, + ChevronRight, + Play, + CheckCircle +} from 'lucide-react' +import { Button } from '@/components/ui/button' + +interface FlowStepProps { + step: number + title: string + description: string + icon: React.ReactNode + isActive: boolean + isCompleted: boolean + onClick: () => void + mockupContent: React.ReactNode +} + +const FlowStep = ({ + step, + title, + description, + icon, + isActive, + isCompleted, + onClick, + mockupContent +}: FlowStepProps) => { + return ( + <> + {/* Step Button */} + +
+ {isCompleted ? : icon} +
+
+
+ + Step {step} + + {!isCompleted && !isActive && } +
+

{title}

+

{description}

+
+ + + {/* Mockup Content */} + {isActive && ( + +
+ {mockupContent} +
+ + )} + + ) +} + +export function UserFlowSection() { + const [activeStep, setActiveStep] = useState(1) + const [completedSteps, setCompletedSteps] = useState([]) + + const handleStepClick = (step: number) => { + if (step <= activeStep || completedSteps.includes(step)) { + setActiveStep(step) + } + } + + const handleNextStep = () => { + if (activeStep < 6) { + setCompletedSteps(prev => [...prev, activeStep]) + setActiveStep(activeStep + 1) + } + } + + const steps = [ + { + title: "Sign Up & Get Started", + description: "Create your account with email or OAuth providers like Google and Microsoft", + icon: , + mockupContent: ( +
+
+
+ CG +
+ Welcome to CodeGuide +
+
+
+ + + +
+
+
or continue with
+ + +
+
+
+ ) + }, + { + title: "Choose Your Action", + description: "Access your dashboard and select between creating outlines or summaries", + icon: , + mockupContent: ( +
+
+

Welcome back, John!

+

What would you like to create today?

+
+
+
+
+ +
+

Create Outline

+

Transform your project ideas into structured outlines

+
+
+
+ +
+

Create Summary

+

Turn long text into concise summaries

+
+
+
+ ) + }, + { + title: "Input Your Content", + description: "Fill in project details, goals, audience, or paste text for summarization", + icon: , + mockupContent: ( +
+
+

Create New Outline

+
+
+ + +
+
+ +