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

Built with vanilla HTML, Tailwind CSS (CDN), FontAwesome icons, and Google Fonts (Outfit). Zero framework overhead — a single, self-contained HTML file.