diff --git a/docs/review/home-page-ui-ux-improvements.md b/docs/review/home-page-ui-ux-improvements.md new file mode 100644 index 0000000..fc65193 --- /dev/null +++ b/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. diff --git a/package.json b/package.json index cf8b992..2e11bc9 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 069d6d6..d842d93 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + framer-motion: + specifier: ^12.34.3 + version: 12.34.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3) inngest: specifier: ^3.52.1 version: 3.52.1(@opentelemetry/core@2.5.1(@opentelemetry/api@1.9.0))(express@5.2.1)(hono@4.11.9)(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)(zod@4.3.6) @@ -3156,6 +3159,20 @@ packages: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} + framer-motion@12.34.3: + resolution: {integrity: sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fresh@2.0.0: resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==} engines: {node: '>= 0.8'} @@ -3867,6 +3884,12 @@ packages: module-details-from-path@1.0.4: resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==} + motion-dom@12.34.3: + resolution: {integrity: sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==} + + motion-utils@12.29.2: + resolution: {integrity: sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==} + ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -8338,6 +8361,15 @@ snapshots: forwarded@0.2.0: {} + framer-motion@12.34.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + dependencies: + motion-dom: 12.34.3 + motion-utils: 12.29.2 + tslib: 2.8.1 + optionalDependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + fresh@2.0.0: {} fs-extra@11.3.3: @@ -8979,6 +9011,12 @@ snapshots: module-details-from-path@1.0.4: {} + motion-dom@12.34.3: + dependencies: + motion-utils: 12.29.2 + + motion-utils@12.29.2: {} + ms@2.1.3: {} msw@2.12.10(@types/node@20.19.33)(typescript@5.9.3): diff --git a/src/app/globals.css b/src/app/globals.css index ddfc851..1216cb6 100644 --- a/src/app/globals.css +++ b/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; } } \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 77ef2b4..89234b4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,237 +1,40 @@ -import Link from "next/link"; import { - ArrowRight, - CheckCircle, - GitPullRequest, - GitMerge, - MessageSquare, - ScanSearch, - Shield, - Wand2, - Zap, -} from "lucide-react"; -import { Button } from "@/components/ui/button"; - + LandingHeader, + HeroSection, + SocialProof, + FeaturesSection, + HowItWorks, + Testimonials, + CTASection, + Footer, +} from "@/components/landing"; + +/** + * Landing page for CodeReviewAI. + * Showcases the product with hero, features, social proof, and CTAs. + * @returns JSX.Element - Home page component + */ export default function HomePage() { return (
- {/* Header */} -
-
- - CodeReviewAI - - -
- - -
-
-
+
- {/* Hero */} -
-
-
-
- -
-

- Ship better code, -
- faster -

- -

- Automated code reviews that catch bugs, security issues, and - maintainability problems before they reach production. -

- -
- - -
- -
- - - No credit card required - - - - GitHub integration - - - - Private repos supported - -
-
+ + +
+
- - {/* Features */} -
-
-
-

- Everything you need for better reviews -

-

- Focus on building. Let AI handle the repetitive review work. -

-
- -
- {[ - { - icon: Zap, - title: "Instant feedback", - description: - "Get comprehensive reviews in seconds, not hours.", - }, - { - icon: Shield, - title: "Security scanning", - description: - "Detect vulnerabilities and secrets automatically.", - }, - { - icon: MessageSquare, - title: "Clear suggestions", - description: "Actionable feedback you can apply immediately.", - }, - { - icon: GitPullRequest, - title: "PR integration", - description: "Reviews appear right in your pull requests.", - }, - { - icon: ScanSearch, - title: "Context aware", - description: "Understands your codebase patterns and style.", - }, - { - icon: Wand2, - title: "Always improving", - description: "Powered by the latest AI models.", - }, - ].map((feature) => ( -
-
- -
-

{feature.title}

-

- {feature.description} -

-
- ))} -
-
-
- - {/* How it works */} -
-
-
-

- Up and running in minutes -

-

- Three steps to better code reviews. -

-
- -
- {[ - { - step: "1", - icon: GitPullRequest, - title: "Connect GitHub", - description: "Sign in and select repositories to enable.", - }, - { - step: "2", - icon: ScanSearch, - title: "Open a PR", - description: - "CodeReviewAI triggers automatically on every pull request.", - }, - { - step: "3", - icon: GitMerge, - title: "Merge with confidence", - description: "Address suggestions and ship faster.", - }, - ].map((item) => ( -
-
- -
-

{item.title}

-

- {item.description} -

-
- ))} -
-
+
+
- - {/* CTA */} -
-
-

- Ready to improve your code reviews? -

-

- Start free. Upgrade when your team needs more. -

- -
+
+
+
- {/* Footer */} -
-
- © 2025 CodeReviewAI -
- - Sign in - - - Get started - -
-
-
+
); } diff --git a/src/components/landing/animated-background.tsx b/src/components/landing/animated-background.tsx new file mode 100644 index 0000000..1b4f911 --- /dev/null +++ b/src/components/landing/animated-background.tsx @@ -0,0 +1,66 @@ +"use client"; + +import { motion } from "framer-motion"; + +/** + * Animated gradient background with floating orbs. + * Creates a subtle, dynamic backdrop for the hero section. + * @returns JSX.Element - Animated background component + */ +export function AnimatedBackground() { + return ( +
+ {/* Primary gradient orb */} + + + {/* Secondary gradient orb */} + + + {/* Tertiary accent orb */} + + + {/* Grid pattern overlay */} +
+
+ ); +} diff --git a/src/components/landing/code-review-mockup.tsx b/src/components/landing/code-review-mockup.tsx new file mode 100644 index 0000000..c9c27fd --- /dev/null +++ b/src/components/landing/code-review-mockup.tsx @@ -0,0 +1,148 @@ +"use client"; + +import { motion } from "framer-motion"; +import { CheckCircle, AlertTriangle, MessageSquare } from "lucide-react"; + +/** + * Floating code review mockup showing a simulated PR review. + * Creates visual appeal and demonstrates the product. + * @returns JSX.Element - Code review mockup component + */ +export function CodeReviewMockup() { + return ( +
+ {/* Glow effect behind card */} +
+ + {/* Main card */} + + {/* Window chrome */} +
+
+
+
+
+
+ + Pull Request #142 — feat: add user authentication + +
+ + {/* Code content */} +
+ {/* File header */} +
+ + src/auth/login.ts + + +24 -8 +
+ + {/* Code lines */} +
+ + {`const validateUser = async (email: string) => {`} + + + {` const user = await db.query(email);`} + + + {` const user = await db.query(sanitize(email));`} + + + {` if (!user) throw new Error("Not found");`} + +
+ + {/* AI Review comment */} + +
+ +
+

+ Security Fix Detected +

+

+ Good catch! Sanitizing input prevents SQL injection attacks. +

+
+
+ +
+ + + {/* Floating notification card */} + +
+
+ +
+
+

3 suggestions

+

Ready to review

+
+
+ + + {/* Floating warning badge */} + +
+ + 1 warning +
+ +
+ ); +} + +/** + * Single line of code in the mockup. + */ +function CodeLine({ + number, + type, + children, +}: { + number: number; + type: "added" | "removed" | "context"; + children: React.ReactNode; +}) { + const styles = { + added: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400", + removed: "bg-red-500/10 text-red-700 dark:text-red-400 line-through opacity-60", + context: "text-muted-foreground", + }; + + const prefix = { + added: "+", + removed: "-", + context: " ", + }; + + return ( +
+ {number} + {prefix[type]} + {children} +
+ ); +} diff --git a/src/components/landing/cta-section.tsx b/src/components/landing/cta-section.tsx new file mode 100644 index 0000000..40fa7ee --- /dev/null +++ b/src/components/landing/cta-section.tsx @@ -0,0 +1,89 @@ +"use client"; + +import Link from "next/link"; +import { motion } from "framer-motion"; +import { ArrowRight, Sparkles } from "lucide-react"; +import { Button } from "@/components/ui/button"; + +/** + * Final call-to-action section with compelling design. + * Encourages users to sign up. + * @returns JSX.Element - CTA section component + */ +export function CTASection() { + return ( +
+
+ + {/* Background gradient */} +
+ + {/* Animated circles */} +
+ + +
+ + {/* Content */} +
+ + + Start free, upgrade anytime + + +

+ Ready to transform your +
+ code review process? +

+ +

+ Join thousands of developers shipping better code, faster. Get + started in under 5 minutes with no credit card required. +

+ +
+ + +
+
+ +
+
+ ); +} diff --git a/src/components/landing/features-section.tsx b/src/components/landing/features-section.tsx new file mode 100644 index 0000000..4df1ba2 --- /dev/null +++ b/src/components/landing/features-section.tsx @@ -0,0 +1,149 @@ +"use client"; + +import { motion } from "framer-motion"; +import { + Zap, + Shield, + MessageSquare, + GitPullRequest, + ScanSearch, + Wand2, + Code2, +} from "lucide-react"; + +const features = [ + { + icon: Zap, + title: "Instant Feedback", + description: + "Get comprehensive code reviews in seconds, not hours. Ship faster without sacrificing quality.", + gradient: "from-yellow-500 to-orange-500", + }, + { + icon: Shield, + title: "Security Scanning", + description: + "Automatically detect vulnerabilities, exposed secrets, and security anti-patterns in your code.", + gradient: "from-emerald-500 to-teal-500", + }, + { + icon: MessageSquare, + title: "Clear Suggestions", + description: + "Receive actionable, contextual feedback you can understand and apply immediately.", + gradient: "from-blue-500 to-cyan-500", + }, + { + icon: GitPullRequest, + title: "PR Integration", + description: + "Reviews appear directly in your pull requests. No context switching needed.", + gradient: "from-purple-500 to-pink-500", + }, + { + icon: ScanSearch, + title: "Context Aware", + description: + "Understands your codebase patterns, coding style, and project-specific conventions.", + gradient: "from-rose-500 to-red-500", + }, + { + icon: Wand2, + title: "Always Improving", + description: + "Powered by the latest AI models. Gets smarter and more accurate over time.", + gradient: "from-indigo-500 to-violet-500", + }, +]; + +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + }, + }, +}; + +const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { duration: 0.5 }, + }, +}; + +/** + * Features section with glass-effect cards and hover animations. + * Showcases the main product features. + * @returns JSX.Element - Features section component + */ +export function FeaturesSection() { + return ( +
+
+ {/* Section header */} + +
+ + Features +
+

+ Everything you need for{" "} + better reviews +

+

+ Focus on building amazing products. Let AI handle the repetitive + code review work. +

+ + + {/* Features grid */} + + {features.map((feature) => ( + + {/* Card */} +
+ {/* Icon with gradient background */} +
+ +
+ + {/* Content */} +

{feature.title}

+

+ {feature.description} +

+ + {/* Hover gradient overlay */} +
+
+ + ))} + + +
+
+ ); +} diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx new file mode 100644 index 0000000..eb1e9bc --- /dev/null +++ b/src/components/landing/footer.tsx @@ -0,0 +1,139 @@ +import Link from "next/link"; +import { Github, Twitter } from "lucide-react"; +import { Logo } from "./logo"; + +const footerLinks = { + product: [ + { label: "Features", href: "#features" }, + { label: "Pricing", href: "#pricing" }, + { label: "Changelog", href: "#changelog" }, + { label: "Documentation", href: "#docs" }, + ], + company: [ + { label: "About", href: "#about" }, + { label: "Blog", href: "#blog" }, + { label: "Careers", href: "#careers" }, + { label: "Contact", href: "#contact" }, + ], + legal: [ + { label: "Privacy", href: "#privacy" }, + { label: "Terms", href: "#terms" }, + { label: "Security", href: "#security" }, + ], +}; + +/** + * Enhanced footer with multiple columns and social links. + * @returns JSX.Element - Footer component + */ +export function Footer() { + return ( +
+
+
+ {/* Brand column */} +
+ +

+ AI-powered code reviews that help you ship better code, faster. + Catch bugs before they reach production. +

+ {/* Social links */} + +
+ + {/* Product links */} +
+

Product

+
    + {footerLinks.product.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Company links */} +
+

Company

+
    + {footerLinks.company.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Legal links */} +
+

Legal

+
    + {footerLinks.legal.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+
+ + {/* Bottom bar */} +
+

+ © {new Date().getFullYear()} CodeReviewAI. All rights reserved. +

+
+ + Sign in + + + Get started + +
+
+
+
+ ); +} diff --git a/src/components/landing/header.tsx b/src/components/landing/header.tsx new file mode 100644 index 0000000..d8503e1 --- /dev/null +++ b/src/components/landing/header.tsx @@ -0,0 +1,133 @@ +"use client"; + +import { useState, useEffect } from "react"; +import Link from "next/link"; +import { motion } from "framer-motion"; +import { Menu, X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { ThemeToggle } from "@/components/theme-toggle"; +import { Logo } from "./logo"; + +/** + * Landing page header with responsive navigation. + * Includes glassmorphism effect on scroll. + * @returns JSX.Element - Header component + */ +export function LandingHeader() { + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 10); + }; + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + return ( +
+
+ {/* Logo */} + + + {/* Desktop navigation */} + + + {/* Desktop actions */} +
+ + + +
+ + {/* Mobile menu button */} +
+ + +
+
+ + {/* Mobile menu */} + {isMobileMenuOpen && ( + + + + )} +
+ ); +} diff --git a/src/components/landing/hero-section.tsx b/src/components/landing/hero-section.tsx new file mode 100644 index 0000000..64c18fa --- /dev/null +++ b/src/components/landing/hero-section.tsx @@ -0,0 +1,101 @@ +"use client"; + +import Link from "next/link"; +import { motion } from "framer-motion"; +import { ArrowRight, CheckCircle, Sparkles, Play } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { AnimatedBackground } from "./animated-background"; +import { CodeReviewMockup } from "./code-review-mockup"; + +/** + * Hero section with animated gradient text, floating code mockup, and CTAs. + * @returns JSX.Element - Hero section component + */ +export function HeroSection() { + return ( +
+ + +
+
+ {/* Left column - Content */} + + {/* Trust badge */} + + + Trusted by 10,000+ developers + + + {/* Headline */} +

+ Ship better code, +
+ faster +

+ + {/* Subheadline */} +

+ AI-powered code reviews that catch bugs, security vulnerabilities, + and maintainability issues before they reach production. +

+ + {/* CTAs */} +
+ + +
+ + {/* Trust indicators */} +
+ {[ + "Free forever plan", + "No credit card required", + "5 minute setup", + ].map((item) => ( + + + {item} + + ))} +
+ + + {/* Right column - Code mockup */} + + + +
+
+
+ ); +} diff --git a/src/components/landing/how-it-works.tsx b/src/components/landing/how-it-works.tsx new file mode 100644 index 0000000..c835396 --- /dev/null +++ b/src/components/landing/how-it-works.tsx @@ -0,0 +1,114 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Github, GitPullRequest, GitMerge, ArrowRight } from "lucide-react"; + +const steps = [ + { + number: "01", + icon: Github, + title: "Connect GitHub", + description: + "Sign in with GitHub and select which repositories you want to enable. Takes less than a minute.", + }, + { + number: "02", + icon: GitPullRequest, + title: "Open a Pull Request", + description: + "Push your code and open a PR as usual. CodeReviewAI automatically triggers on every pull request.", + }, + { + number: "03", + icon: GitMerge, + title: "Merge with Confidence", + description: + "Review AI suggestions, address issues, and ship knowing your code has been thoroughly checked.", + }, +]; + +/** + * How it works section with visual timeline. + * Shows the 3-step process to get started. + * @returns JSX.Element - How it works section component + */ +export function HowItWorks() { + return ( +
+
+ {/* Section header */} + +
+ + How it works +
+

+ Up and running in{" "} + minutes +

+

+ Three simple steps to better code reviews. No complex setup + required. +

+ + + {/* Steps */} +
+ {/* Connection line */} +
+
+
+
+
+ +
+ {steps.map((step, index) => ( + + {/* Step number badge */} +
+
+ {/* Glow effect */} +
+ {/* Icon circle */} +
+ +
+ {/* Step number */} +
+ {index + 1} +
+
+
+ + {/* Content */} +

{step.title}

+

+ {step.description} +

+ + {/* Arrow connector for mobile */} + {index < steps.length - 1 && ( +
+ +
+ )} + + ))} +
+
+
+
+ ); +} diff --git a/src/components/landing/index.ts b/src/components/landing/index.ts new file mode 100644 index 0000000..4edd29a --- /dev/null +++ b/src/components/landing/index.ts @@ -0,0 +1,11 @@ +export { LandingHeader } from "./header"; +export { HeroSection } from "./hero-section"; +export { SocialProof } from "./social-proof"; +export { FeaturesSection } from "./features-section"; +export { HowItWorks } from "./how-it-works"; +export { Testimonials } from "./testimonials"; +export { CTASection } from "./cta-section"; +export { Footer } from "./footer"; +export { AnimatedBackground } from "./animated-background"; +export { CodeReviewMockup } from "./code-review-mockup"; +export { Logo } from "./logo"; diff --git a/src/components/landing/logo.tsx b/src/components/landing/logo.tsx new file mode 100644 index 0000000..fe0eecd --- /dev/null +++ b/src/components/landing/logo.tsx @@ -0,0 +1,77 @@ +"use client"; + +import Link from "next/link"; +import { Code2, Sparkles } from "lucide-react"; + +/** + * CodeReviewAI logo component with icon and text. + * Features a code bracket icon with AI sparkle accent. + * @param props.showText - Whether to show the text (default: true) + * @param props.size - Size variant: "sm" | "default" | "lg" + * @returns JSX.Element - Logo component + */ +export function Logo({ + showText = true, + size = "default", +}: { + showText?: boolean; + size?: "sm" | "default" | "lg"; +}) { + const sizes = { + sm: { + icon: "h-5 w-5", + sparkle: "h-2 w-2", + sparklePosition: "-top-0.5 -right-0.5", + text: "text-base", + container: "h-7 w-7", + }, + default: { + icon: "h-6 w-6", + sparkle: "h-2.5 w-2.5", + sparklePosition: "-top-0.5 -right-0.5", + text: "text-xl", + container: "h-9 w-9", + }, + lg: { + icon: "h-8 w-8", + sparkle: "h-3 w-3", + sparklePosition: "-top-1 -right-1", + text: "text-2xl", + container: "h-11 w-11", + }, + }; + + const s = sizes[size]; + + return ( + + {/* Logo icon */} +
+ {/* Gradient background container */} +
+ +
+ + {/* AI sparkle accent */} +
+ +
+
+ + {/* Logo text */} + {showText && ( +
+ Code + Review + + AI + +
+ )} + + ); +} diff --git a/src/components/landing/social-proof.tsx b/src/components/landing/social-proof.tsx new file mode 100644 index 0000000..419fc6c --- /dev/null +++ b/src/components/landing/social-proof.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { motion } from "framer-motion"; +import { GitPullRequest, Users, Star, Zap } from "lucide-react"; + +const stats = [ + { + icon: Users, + value: "10,000+", + label: "Developers", + }, + { + icon: GitPullRequest, + value: "500K+", + label: "PRs Reviewed", + }, + { + icon: Zap, + value: "< 30s", + label: "Avg Review Time", + }, + { + icon: Star, + value: "4.9/5", + label: "User Rating", + }, +]; + +/** + * Social proof section with stats and company logos. + * Builds credibility and trust with potential users. + * @returns JSX.Element - Social proof section component + */ +export function SocialProof() { + return ( +
+
+ {/* Stats grid */} +
+ {stats.map((stat, index) => ( + +
+ +
+
+ {stat.value} +
+
+ {stat.label} +
+ + ))} +
+ +
+
+ ); +} diff --git a/src/components/landing/testimonials.tsx b/src/components/landing/testimonials.tsx new file mode 100644 index 0000000..7b1644f --- /dev/null +++ b/src/components/landing/testimonials.tsx @@ -0,0 +1,114 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Star, Quote } from "lucide-react"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; + +const testimonials = [ + { + quote: + "CodeReviewAI cut our review time in half. Our team ships faster and with more confidence than ever before.", + author: "Sarah Chen", + role: "Engineering Lead", + company: "TechStart", + initials: "SC", + }, + { + quote: + "The security scanning alone is worth it. It caught a critical vulnerability in our auth flow that we missed.", + author: "Marcus Rodriguez", + role: "Senior Developer", + company: "DevFlow", + initials: "MR", + }, + { + quote: + "Finally, code reviews that don't slow us down. The AI suggestions are surprisingly accurate and helpful.", + author: "Emily Watson", + role: "CTO", + company: "BuildIt", + initials: "EW", + }, +]; + +/** + * Testimonials section with user quotes. + * Builds trust through social proof. + * @returns JSX.Element - Testimonials section component + */ +export function Testimonials() { + return ( +
+
+ {/* Section header */} + +
+ + Testimonials +
+

+ Loved by developers{" "} + worldwide +

+

+ See what teams are saying about CodeReviewAI. +

+ + + {/* Testimonials grid */} +
+ {testimonials.map((testimonial, index) => ( + +
+ {/* Quote icon */} + + + {/* Stars */} +
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ + {/* Quote text */} +

+ "{testimonial.quote}" +

+ + {/* Author info */} +
+ + + {testimonial.initials} + + +
+

{testimonial.author}

+

+ {testimonial.role} at {testimonial.company} +

+
+
+
+ + ))} +
+
+
+ ); +}