# RSL Showcase Landing Page

A comprehensive landing page template showcasing 25+ RSL components. Perfect for SaaS products, startups, and any business looking for a high-converting landing page.

## Features

- **25+ RSL Components** - The most comprehensive RSL template available
- **Dark Mode** - Full dark mode support
- **Fully Responsive** - Mobile-first design
- **Accessible** - WCAG 2.1 AA compliant
- **Clean Code** - Well-organized, commented code
- **Zero Dependencies** - No external JavaScript libraries (except Font Awesome for icons)

## RSL Components Used

### Navigation & Layout
- Navbar (with dropdown)
- Scroll Progress
- Off-Canvas Panel
- Grid System

### Hero & Content
- Hero Section (animated gradient, typewriter effect)
- Cards
- Tabs
- Accordion
- Timeline

### Data & Visualization
- KPI Cards (with count-up animation)
- Charts (bar, line)
- Progress Bars (circular)
- Pricing Table

### Media
- Video Player
- Gallery (with lightbox)
- Carousel

### Interactive
- Modal (multiple instances)
- Toast Notifications
- Tooltips
- Badges

### Social Proof
- Testimonials (carousel with ratings)
- Star Rating

### Forms
- Form Elements
- Custom Select

### Utility
- Animate on Scroll
- Accessibility Widget
- Announcements Bar

## Page Structure

1. **Announcement Bar** - Promo/launch offer
2. **Navbar** - Sticky navigation with dropdown
3. **Hero Section** - Big headline with typewriter, CTAs, trust badges
4. **Trust Section** - KPI stats, client logos
5. **Features Section** - Tabbed feature cards with tooltips
6. **Demo Section** - Video player, screenshot gallery
7. **How It Works** - Timeline/process steps
8. **Results Section** - Charts and progress indicators
9. **Pricing Section** - 3-tier pricing table
10. **Testimonials** - Carousel with star ratings
11. **FAQ** - Accordion
12. **Contact/CTA** - Lead generation form
13. **Footer** - Links and social

## Customization

### Colors

The template uses CSS custom properties for easy theming:

```css
:root {
    --template-primary: #3B82F6;
    --template-accent: #8B5CF6;
    --template-success: #10B981;
    /* See rsl-showcase-landing-style.css for all variables */
}
```

### Content

Replace placeholder content:
- Update text in `index.html`
- Replace video URL in Video Player component
- Replace Unsplash images with your own product screenshots
- Update form action to your backend

### Branding

- Replace logo in navbar and footer
- Update color scheme in CSS variables
- Update favicons in `/images/`

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included - no build step required

## Browser Support

- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Credits

Built with [Responsive Slot Layout (RSL)](https://rslayout.com)

Icons: [Font Awesome](https://fontawesome.com)

Placeholder Images: [Unsplash](https://unsplash.com)

## License

MIT License - Free to use for personal and commercial projects
