Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Lathiya50 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 164 additions & 0 deletions docs/review/home-page-ui-ux-improvements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
# Home Page UI/UX Improvements
Copy link
Copy Markdown
Owner Author

@Lathiya50 Lathiya50 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚪ LOW — style

The documentation does not follow a standard formatting convention.

💡 Suggestion: Use a standard formatting convention for the documentation.


## 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

Copy link
Copy Markdown
Owner Author

@Lathiya50 Lathiya50 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 MEDIUM — bug

The scope of the redesign is not clearly defined, which may lead to misunderstandings or miscommunications.

💡 Suggestion: Clearly define the scope of the redesign and ensure all stakeholders are aware of the changes.

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.
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"better-auth": "^1.4.18",
Copy link
Copy Markdown
Owner Author

@Lathiya50 Lathiya50 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚪ LOW — style

The version of framer-motion is not following the standard versioning format.

💡 Suggestion: Use a standard versioning format for the framer-motion version.

"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",
Expand Down
38 changes: 38 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

109 changes: 107 additions & 2 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,115 @@
@layer base {
Copy link
Copy Markdown
Owner Author

@Lathiya50 Lathiya50 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚪ LOW — style

The CSS file has been heavily modified, but there are no major issues. However, some of the new classes and animations could be optimized for better performance.

💡 Suggestion: Consider optimizing the new CSS classes and animations for better performance.

* {
@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(
Copy link
Copy Markdown
Owner Author

@Lathiya50 Lathiya50 May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚪ LOW — style

The new .text-gradient-animated class uses a complex linear gradient, which may have performance implications. Consider simplifying the gradient or optimizing it for better performance.

💡 Suggestion: Consider simplifying the .text-gradient-animated class or optimizing it for better performance.

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;
}
}
Loading