feat: enhance landing page UI/UX with new components and animations

docs/review/home-page-ui-ux-improvements.md

@@ -0,0 +1,164 @@
+# Home Page UI/UX Improvements
+
+## Purpose / Motivation
+
+The current home page is functional but lacks visual polish and modern design patterns that create emotional engagement and trust. This redesign will:
+
+- Increase conversion rates (sign-ups) through better visual hierarchy and CTAs
+- Build credibility with social proof, animations, and a more polished aesthetic
+- Improve user experience with micro-interactions and better information architecture
+- Make the page feel premium and professional
+
+## Scope
+
+The redesign will cover all sections of the landing page:
+
+1. **Header** - Enhanced navigation with better visual hierarchy
+2. **Hero Section** - More impactful with animated elements, gradient text, and floating UI mockup
+3. **Social Proof / Logos** - New section showing trusted companies/stats
+4. **Features Section** - Redesigned with cards, hover effects, and better visual grouping
+5. **How It Works** - Visual timeline/stepper with connecting lines and animations
+6. **Testimonials** - New section with user quotes
+7. **Pricing Preview** - Optional teaser section
+8. **CTA Section** - More compelling final call-to-action
+9. **Footer** - Enhanced with more links and better structure
+
+## Key UI/UX Improvements
+
+### Visual Enhancements
+- **Animated gradient backgrounds** - Subtle moving gradients for depth
+- **Glass morphism cards** - Frosted glass effect on feature cards
+- **Floating UI mockup** - Code review preview in hero section
+- **Micro-animations** - Framer Motion for scroll animations and hover states
+- **Better typography hierarchy** - Larger headings, improved spacing
+- **Enhanced color usage** - Strategic accent colors, gradient text
+
+### UX Improvements
+- **Better visual hierarchy** - Clear scanning patterns (F-pattern/Z-pattern)
+- **Reduced cognitive load** - Chunked information, clear sections
+- **Social proof** - Trust badges, company logos, statistics
+- **Clear value proposition** - Benefits-focused copy
+- **Smooth scroll animations** - Fade-in effects as user scrolls
+- **Mobile-first responsive** - Better mobile experience
+
+## Technical Implementation
+
+### Dependencies
+- **Framer Motion** - Already in stack, will use for animations
+- **Tailwind CSS** - Enhanced utility usage
+- **Lucide Icons** - Extended icon usage
+- **shadcn/ui** - Card, Badge, Avatar components
+
+### New Components to Create
+- `src/components/landing/hero-section.tsx` - Animated hero with code mockup
+- `src/components/landing/features-section.tsx` - Feature cards grid
+- `src/components/landing/how-it-works.tsx` - Visual stepper
+- `src/components/landing/social-proof.tsx` - Logos and stats
+- `src/components/landing/testimonials.tsx` - User testimonials
+- `src/components/landing/cta-section.tsx` - Final CTA
+- `src/components/landing/footer.tsx` - Enhanced footer
+- `src/components/ui/animated-gradient.tsx` - Background animation
+
+### File Changes
+- `src/app/page.tsx` - Complete rewrite using new components
+- `src/app/globals.css` - Add gradient text class, animation keyframes
+
+## Inputs & Outputs
+
+**Inputs:**
+- Current page structure and content
+- Brand colors from existing theme
+- shadcn/ui component library
+
+**Outputs:**
+- Visually polished landing page
+- Improved conversion funnel
+- Better mobile responsiveness
+- Animated, engaging user experience
+
+## Edge Cases / Error Conditions
+
+- **Reduced motion preference** - Respect `prefers-reduced-motion` media query
+- **Slow connections** - Ensure page is usable before animations load
+- **JavaScript disabled** - Graceful degradation for animations
+- **Mobile viewports** - Simplified animations, touch-friendly interactions
+- **Dark mode** - All enhancements work in both light and dark themes
+
+## Dependencies
+
+- Framer Motion (already installed)
+- Tailwind CSS (already installed)
+- shadcn/ui components (already installed)
+- Lucide React icons (already installed)
+
+## User Interface Preview
+
+### Hero Section
+```
+┌─────────────────────────────────────────────────────────────┐
+│  [Logo]                              [Sign in] [Get Started]│
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│     🚀 Trusted by 10,000+ developers                        │
+│                                                             │
+│     Ship better code,                                       │
+│     faster ← (gradient animated text)                       │
+│                                                             │
+│     AI-powered code reviews that catch bugs...              │
+│                                                             │
+│     [⚡ Start for free]  [Watch demo]                       │
+│                                                             │
+│     ✓ Free forever  ✓ No credit card  ✓ 5min setup         │
+│                                                             │
+│  ┌─────────────────────────────────┐                        │
+│  │  [Floating Code Review Mockup] │  ← Glass card with     │
+│  │  with animated typing effect   │    code diff preview   │
+│  └─────────────────────────────────┘                        │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Features Section
+```
+┌─────────────────────────────────────────────────────────────┐
+│              Why developers love CodeReviewAI               │
+│                                                             │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
+│  │   ⚡        │  │   🛡️        │  │   💬        │          │
+│  │  Instant    │  │  Security   │  │   Clear     │          │
+│  │  Feedback   │  │  Scanning   │  │  Suggestions│          │
+│  │             │  │             │  │             │          │
+│  │  Reviews in │  │  Detect     │  │  Actionable │          │
+│  │  seconds... │  │  vulns...   │  │  feedback..│          │
+│  └─────────────┘  └─────────────┘  └─────────────┘          │
+│                                                             │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
+│  │   🔗        │  │   🔍        │  │   ✨        │          │
+│  │    PR       │  │  Context    │  │   Always    │          │
+│  │ Integration │  │   Aware     │  │  Improving  │          │
+│  └─────────────┘  └─────────────┘  └─────────────┘          │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### How It Works (Timeline)
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  Up and running in minutes                  │
+│                                                             │
+│     ①──────────────②──────────────③                         │
+│     │              │              │                         │
+│  Connect       Open a PR      Merge with                    │
+│  GitHub                       confidence                    │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Approval Request
+
+Please review this feature description and let me know if you'd like me to:
+1. Proceed with implementation as described
+2. Add/remove any sections
+3. Modify the visual approach
+4. Adjust the component structure
+
+Once approved, I'll implement the changes.

package.json

@@ -19,6 +19,7 @@
     "better-auth": "^1.4.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
     "inngest": "^3.52.1",
     "lucide-react": "^0.564.0",
     "next": "16.1.6",

src/app/globals.css

@@ -119,10 +119,115 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
-    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .text-gradient {
+    @apply bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent;
+  }
+
+  .text-gradient-animated {
+    background: linear-gradient(
+      90deg,
+      oklch(0.7 0.25 250) 0%,
+      oklch(0.65 0.28 300) 25%,
+      oklch(0.7 0.25 330) 50%,
+      oklch(0.65 0.28 300) 75%,
+      oklch(0.7 0.25 250) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradient-shift 3s ease-in-out infinite;
+  }
+
+  .dark .text-gradient-animated {
+    background: linear-gradient(
+      90deg,
+      oklch(0.8 0.2 250) 0%,
+      oklch(0.75 0.22 300) 25%,
+      oklch(0.8 0.2 330) 50%,
+      oklch(0.75 0.22 300) 75%,
+      oklch(0.8 0.2 250) 100%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .glass {
+    @apply bg-background/60 backdrop-blur-xl border border-border/50;
+  }
+
+  .glass-card {
+    @apply bg-card/50 backdrop-blur-lg border border-border/40 shadow-lg;
+  }
+}
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% center;
+  }
+  50% {
+    background-position: 100% center;
+  }
+  100% {
+    background-position: 0% center;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 4s ease-in-out infinite;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.6s ease-out forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .text-gradient-animated,
+  .animate-float,
+  .animate-pulse-glow,
+  .animate-slide-up {
+    animation: none;
   }
 }