Skip to content

feat: add comprehensive landing page with Clerk authentication #2

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

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add comprehensive landing page with Clerk authentication #2

wants to merge 1 commit into from

Conversation

@RafiulM
Copy link
Collaborator

@RafiulM RafiulM commented Aug 8, 2025

Summary

This PR adds a complete, responsive landing page for the Webpage Analyzer that introduces the product and guides users to sign up or log in via Clerk authentication.

Key Features

  • Responsive Landing Page: Modern, mobile-first design built with Next.js 14, Tailwind CSS, and shadcn/ui components
  • Clerk Authentication: Integrated sign-up and sign-in modals with automatic routing
  • Hero Section: Eye-catching hero with clear value proposition and CTAs
  • Features Section: Comprehensive feature showcase with cards and animations
  • Testimonials: Social proof with customer testimonials and ratings
  • SEO Optimized: Updated metadata, semantic HTML, and accessibility features
  • Framer Motion: Smooth animations and transitions throughout
  • Automatic Routing: Users are redirected appropriately based on authentication status

Technical Implementation

  • Routing: serves the landing page, serves the original tool
  • Authentication: Uses Clerk middleware for route protection and user management
  • Responsive Design: Mobile-first approach with breakpoints for all screen sizes
  • Performance: Optimized images and minimal bundle size
  • Accessibility: WCAG 2.1 AA compliant with proper ARIA labels and keyboard navigation

Testing Checklist

  • Landing page renders correctly on desktop and mobile
  • Clerk authentication widgets display and function properly
  • Responsive breakpoints work across all devices
  • Automatic redirects work for authenticated/unauthenticated users
  • All animations and transitions are smooth
  • SEO metadata is properly configured

Screenshots

The landing page includes:

  • Hero section with gradient background and animated elements
  • Feature cards highlighting key benefits
  • Customer testimonials with star ratings
  • Clear call-to-action buttons throughout
  • Professional footer with navigation links

Ready for review and deployment!

feat: add comprehensive landing page with Clerk authentication integr…
de723ac 
…ation

- Created responsive landing page with hero section, features showcase, and testimonials
- Implemented Clerk authentication with sign-up/sign-in modals
- Added mobile-first responsive design using Tailwind CSS
- Integrated Framer Motion for smooth animations and transitions
- Moved existing analyzer to protected /protected/analyzer route
- Updated middleware for automatic routing between landing and analyzer
- Enhanced SEO with updated metadata and accessibility features
- Added comprehensive footer with navigation and social links
- All components use shadcn/ui for consistent design system
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@RafiulM