A modern, responsive landing page for the fictional product "Slerate Sales Boost" - an AI platform to boost sales team performance.

• Next.js 15 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• Heroicons for icons
• React for UI components

• Compelling headline with value proposition
• Call-to-action buttons (Free Trial & Live Demo)
• Attractive dashboard visual with gradient design
• Fully responsive design

• 3 main features with icons and descriptions:
  1. Smart Analytics - Dashboard analytics with deep insights
  2. AI Automation - Automate repetitive tasks
  3. Team Collaboration - Integrated collaboration tools

• 3 testimonials from "clients" with 5-star ratings
• Avatar and credentials for credibility
• Responsive grid layout

• 3 tier pricing (Starter, Professional, Enterprise)
• Highlight on "Professional" package as most popular
• Feature comparison with checkmark icons

• Strong closing message
• Multiple CTA buttons
• Social proof (10,000+ companies)
• Trust indicators (no credit card, 5-minute setup, 24/7 support)

• Fixed navigation with smooth scrolling
• Mobile-responsive navigation
• Clean footer with branding

• Responsive: Optimized for desktop, tablet, and mobile
• Modern UI: Clean design with consistent spacing
• Color Scheme: Professional blue (#3B82F6) as primary color
• Typography: Clear hierarchy with readable fonts
• Hover Effects: Interactive elements with smooth transitions
• Accessibility: Proper contrast ratios and semantic HTML

1. Clone and Install Dependencies:

npm install

2. Run Development Server:

npm run dev

3. Open in Browser:

http://localhost:3000

slerate/
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   └── Button.tsx          # Reusable button component
│   │   ├── layout/
│   │   │   └── Logo.tsx           # Logo component
│   │   └── sections/
│   │       ├── Navigation.tsx     # Navigation component
│   │       ├── FeatureCard.tsx    # Feature card component
│   │       ├── TestimonialCard.tsx # Testimonial card component
│   │       └── PricingCard.tsx    # Pricing card component
│   ├── data/
│   │   └── constants.ts           # Static data constants
│   └── app/
│       ├── globals.css            # Global styles and custom CSS
│       ├── layout.tsx             # Root layout
│       └── page.tsx               # Main landing page
├── public/                        # Static assets
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md

• Large headline with emphasis on "300%" increase
• Two-column layout with content and visual
• Primary and secondary CTA buttons

• 3-column responsive grid
• Icon + title + description pattern
• Consistent spacing and alignment

• Card-based layout with customer quotes
• 5-star ratings with filled icons
• Customer avatars and credentials

• 3-tier comparison table
• Feature lists with checkmarks
• Highlighted "popular" option with scale effect

Primary colors can be changed in tailwind.config.js or directly in classes:

• Primary: blue-600 (#3B82F6)
• Secondary: gray-600 (#4B5563)
• Accent: purple-600 (#9333EA)

All content can be modified directly in src/data/constants.ts:

• Headlines and copy text
• Feature descriptions
• Testimonial content
• Pricing tiers and features

Custom styles are in src/app/globals.css:

• Smooth scrolling behavior
• Custom animations
• Hover effects
• Responsive utilities

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Layout automatically adapts to Tailwind CSS default breakpoints.

• Next.js Image Optimization: Automatic image optimization
• TypeScript: Type safety for better development experience
• Tailwind CSS: Utility-first CSS for optimal file size
• App Router: Faster navigation with modern Next.js features

• Single Responsibility: Each component has one clear purpose
• Reusability: Components can be used across the application
• Type Safety: Strong TypeScript interfaces for all components
• Separation of Concerns: UI separated from business logic

• Button: Multiple variants (primary, secondary, outline, ghost)
• Logo: Reusable with custom href and className
• FeatureCard: Accepts any icon, title, and description
• TestimonialCard: Structured testimonial with rating and author
• PricingCard: Flexible pricing with highlighting support

• All static data centralized in constants.ts
• Easy content modification without touching components
• Type-safe data structures
• Centralized content management

1. Maintainability: Easy to update and modify
2. Reusability: Components can be used anywhere
3. Scalability: Easy to add new features
4. Type Safety: TypeScript prevents runtime errors
5. Testing: Smaller components are easier to test
6. Performance: Better component optimization
7. Developer Experience: Clear component APIs

• Add new button variants by updating the Button component
• Add new sections by creating new components
• Modify content by updating constants
• Change styling by updating component styles

MIT License - Free to use for any project.

Built with ❤️ using Next.js, TypeScript, and Tailwind CSS