podperos - Modern Brand Website

A modern, responsive website for podperos - a Slovak brand operating vending machines with nicotine pouches and special vaping products.

🎨 Design Features

Color Palette

• Primary Red: #ff0033
• Primary Pink: #ff4d6d
• Accent Pink: #ff006e
• Dark Background: #0a0a0a
• Darker Background: #050505

Typography

• Headings: Bebas Neue (wide, modern font)
• Body: Poppins (clean, readable)

🚀 Features

1. Age Verification Modal

• Required 18+ age verification on first visit
• Session-based storage (persists during browser session)
• Smooth fade-out animation
• Redirects users who select "No"

2. Responsive Navigation

• Fixed navbar with scroll effect
• Mobile hamburger menu
• Smooth scroll to sections
• Active state animations

3. Hero Section

• Large, bold typography with gradient effects
• Animated background with pulsing lips overlay
• Parallax scrolling effect
• Scroll indicator with bounce animation

4. About Section

• Three feature cards with hover effects
• Icons and descriptions
• AOS (Animate On Scroll) integration
• Responsive grid layout

5. Products Info

• Visual illustrations for product categories
• Hover animations with scale and rotation
• Centered, clean layout

6. Philosophy Section

• Two-column layout (text + visual)
• Rotating circular animations
• Bullet-point list with checkmarks
• Brand tagline emphasis

7. CTA Section

• Statistics display (24/7, 100%, ∞)
• Gradient text effects
• Call-to-action messaging

8. Footer

• Brand information
• Navigation links
• Contact information
• Age warning disclaimer

🎭 Animations & Effects

Scroll Animations

• Fade-in effects using AOS library
• Parallax hero section
• Scroll-triggered visibility changes

Hover Effects

• Card lift animations
• Button hover states with shadows
• Link underline animations
• Visual element scaling

Micro-interactions

• Cursor trail effect
• Floating decorative elements
• Smooth transitions throughout
• Mobile menu slide-in

📱 Responsive Design

Breakpoints

• Desktop: 1200px+ (full layout)
• Tablet: 768px - 968px (adapted layout)
• Mobile: < 640px (stacked layout)

Mobile Optimizations

• Hamburger menu navigation
• Stacked card layouts
• Adjusted typography sizes
• Touch-friendly button sizes
• Optimized spacing

🛠️ Technologies Used

Core Technologies

• HTML5: Semantic markup
• CSS3: Modern styling with Grid & Flexbox
• JavaScript (ES6+): Interactive features

External Libraries

• AOS (Animate On Scroll): Scroll animations
• Google Fonts: Bebas Neue, Poppins

Performance Features

• Lazy loading support
• Intersection Observer API
• Session storage for age verification
• Optimized animations (GPU-accelerated)

📂 File Structure

/workspace/
├── index.html          # Main HTML file
├── styles.css          # All CSS styling
├── script.js           # JavaScript functionality
├── images/
│   └── logo.png        # Brand logo
└── README.md           # This file

🌐 Browser Compatibility

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🎯 Usage Instructions

Local Development

1. Open index.html in a web browser
2. Accept age verification (18+)
3. Navigate through sections using menu or scroll

Deployment

1. Upload all files to web server
2. Ensure images/ folder is accessible
3. No build process required - pure HTML/CSS/JS

🔧 Customization

Changing Colors

Edit CSS variables in styles.css:

:root {
    --primary-red: #ff0033;
    --primary-pink: #ff4d6d;
    --accent-pink: #ff006e;
}

Updating Content

• Edit text directly in index.html
• All content is in Slovak language
• Maintain semantic HTML structure

Adding Sections

1. Add HTML section in index.html
2. Add navigation link if needed
3. Style in styles.css
4. Add animations with AOS attributes

📝 Content Sections

Slovak Language Elements

• Tagline: "Pod perou, vždy čerstvé" (Under lips, always fresh)
• Sections: Domov, O nás, Filozofia, Kontakt
• Age Verification: Full Slovak text
• All UI elements: Localized to Slovak

Brand Voice

• Fresh, trendy, slightly rebellious
• Youth-oriented (young adults)
• Urban, modern aesthetic
• Emphasis on "always new" and "fresh drops"

⚠️ Legal Compliance

Age Verification

• Modal enforces 18+ age requirement
• Session-based (reappears on new session)
• Clear warning messages

Disclaimers

• Footer warning about nicotine content
• Age restriction notices
• Addictive substance warnings

🎨 Design Philosophy

The website embodies the podperos brand identity:

• Bold & Modern: Large typography, striking colors
• Dark Aesthetic: Black background for edgy vibe
• Smooth & Polished: Professional animations
• Mobile-First: Fully responsive across devices
• Interactive: Engaging hover effects and transitions

🔮 Future Enhancements (Optional)

• Location finder for vending machines
• Product showcase carousel
• Newsletter signup
• Social media integration
• Multi-language support
• Admin panel for content updates

📞 Support

For technical issues or questions about the website, contact:

• Email: info@podperos.sk
• Phone: +421 XXX XXX XXX

---

podperos - Pod perou, vždy čerstvé 🔥