Smash - Healthy Food Landing Page

Overview

A polished, interactive landing page for Smash — a fictional healthy food brand. Built as a standalone HTML page with Tailwind CSS and vanilla JavaScript.

Key Features

• Rotating Dish Carousel — Circular thumbnail track with smooth rotation animation; click any thumbnail or use prev/next to browse dishes
• Animated Transitions — Fade and scale transitions on image and text swaps
• Floating Leaf Decorations — CSS keyframe animations on SVG leaf icons for visual depth
• Responsive Layout — Full mobile-first responsive design using Tailwind breakpoints
• Interactive UI — Cart modal, search modal, mobile hamburger menu, and menu card grid
• Pairings Section — Curated juice and dressing recommendations alongside each salad

Tech Stack & Architecture

• Core Framework: Lightweight standalone HTML5 architecture with no bundler or runtime overhead.
• Styling & Motion: Tailwind CSS complemented with custom CSS keyframes for organic floating leaf animations and smooth dish rotations.
• Typography & Icons: Google Fonts (Outfit) and FontAwesome SVG icons optimized for high pixel-density mobile displays.
• State & Interactivity: Vanilla JavaScript managing active dish indexes, circular rotation angles, and modal dialogues cleanly without heavy client dependencies.

Performance & Accessibility Highlights

• Lightweight Footprint: Total page payload under 150KB (excluding media), ensuring immediate First Meaningful Paint even on constrained mobile networks.
• Smooth 60fps Animations: Hardware-accelerated CSS transform: rotate(...) and opacity transitions preventing layout recalculations and jank.
• Accessible Controls: Keyboard navigable carousel indicators with descriptive aria-label tags, allowing full screen-reader accessibility.

Experience the live page in the interactive Smash Healthy Food Demo.