# Solana Artisan Beverages Template

A modern, vibrant craft beverage brand website template built with the RSL Framework. Inspired by contemporary beverage brands, this template features warm colors, engaging animations, and a focus on natural products.

## Pages Included

1. **index.html** - Home page with hero, featured products, brand story, and newsletter signup
2. **flavors.html** - Product catalog with tabbed filtering, nutrition info, and FAQ accordion
3. **story.html** - Brand story with timeline, founders section, process tabs, values, and impact stats

## RSL Components Used

- **Grid System** - Responsive layouts with `slot-layout` and `slot-item`
- **Navbar** - Sticky navigation with dropdown menus
- **Cards** - Product cards with hover effects
- **Tabs** - Flavor category filtering and process steps
- **Accordion (Classic)** - FAQ sections with smooth animations
- **Toast** - Notification messages for cart and newsletter actions
- **Animate on Scroll** - Fade-in effects as content enters viewport
- **Form Elements** - Newsletter signup form styling
- **Theme Toggle** - Dark/light mode support
- **Accessibility Widget** - User accessibility controls

## Features

### Design
- Warm, inviting color palette with coral/orange primary color
- Playfair Display headings for elegance
- Inter body text for readability
- Space Grotesk accent font for modern touches
- Responsive from mobile to desktop
- Full dark mode support

### Accessibility
- Skip navigation link
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Focus indicators
- `prefers-reduced-motion` support

### Interactivity
- Navbar shadow on scroll
- Product card hover animations
- Add to cart toast notifications
- Newsletter signup with validation
- Smooth scroll for anchor links
- Theme toggle with localStorage persistence

## File Structure

```
solana-beverages-template/
├── index.html              # Home page
├── flavors.html            # Products/flavors page
├── story.html              # Brand story page
├── solana-beverages-style.css    # Template styles
├── solana-beverages-script.js    # Template JavaScript
├── README.md               # This file
├── LICENSE                 # MIT License
├── styles/                 # RSL CSS files
├── javascript/             # RSL JavaScript files
└── images/                 # Image assets
```

## Customization

### Colors
Edit the CSS custom properties in `solana-beverages-style.css`:

```css
:root {
    --sol-primary: #E85D3B;        /* Main brand color */
    --sol-primary-dark: #C94A2B;   /* Darker shade */
    --sol-primary-light: #FF7B5C;  /* Lighter shade */
    --sol-secondary: #2B4D3F;      /* Secondary color */
    --sol-accent: #F4B942;         /* Accent/highlight */
    --sol-cream: #FFF8F0;          /* Background */
}
```

### Typography
The template uses three Google Fonts:
- **Playfair Display** - Headings
- **Inter** - Body text
- **Space Grotesk** - Accent/UI elements

### Images
Replace placeholder images from Unsplash with your own product photos. Recommended sizes:
- Hero image: 600x700px
- Product cards: 300x400px
- Story sections: 600x500px
- Founder portraits: 300x300px (square)

## Theme Toggle

The template uses isolated localStorage for theme preference:
- Key: `solana-beverages-theme`
- Values: `light` or `dark`
- Position: Fixed bottom-right corner

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT License - See LICENSE file for details.

---

Built with the [RSL Framework](https://github.com/your-repo/responsive-slot-layout)
