🍣 Sushiman

Sushiman is a fully responsive restaurant landing page for a fictional Japanese restaurant. The project was a great excuse to get hands-on with frontend fundamentals — CSS variables, modular stylesheets, BEM naming, flexbox layouts, scroll-triggered animations, and a clean project structure powered by Vite.

📦 Technologies

• HTML5
• CSS3
• JavaScript (ES Modules)
• AOS — Animate On Scroll library for scroll-triggered animations
• Vite — frontend build tool and local dev server
• Google Fonts — Playfair Display & Plus Jakarta Sans

🌟 Features

• Responsive Navigation: A full desktop navbar with links to each section (Menu, Food, Services, About Us) that collapses into a hamburger icon on screens below 900px.

• Hero Section: A bold full-width hero with a large sushi image and a Japanese kanji overlay, a headline, two call-to-action buttons (Order Now and How to Order), and a customer testimonial block with a review quote and a happy customer count.

• About Us Section: A two-image side-by-side layout with a Learn More button and a short brand mission statement referencing the Japanese hospitality concept of Omotenashi.

• Popular Foods Catalog: A horizontally scrollable filter bar (All, Sushi, Ramen, Udon, Danggo, Others) with three product cards below, each showing a food image, name, star rating, and price. One card is highlighted as the active selection.

• Trending Section: Two subsections — Japanese Sushi and Japanese Drinks — each pairing a featured food/drink image with a checklist of six popular items. A centered "Discover" badge separates both subsections on larger screens.

• Newsletter Subscription: A full-width subscription banner with an email input and a Get Started CTA button.

• Footer: Logo, internal navigation links, and social media icons (Facebook, Instagram, Twitter).

• Scroll Animations: All major sections use data-aos attributes (fade-up, fade-left, fade-right, flip-up, zoom-in, etc.), powered by the AOS library with a 1000ms duration and 100px offset.

▶️ How to Run

1. Make sure Node.js is installed.
2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

4. Open http://localhost:5173 in your browser. To build for production:

npm run build

🍜 Preview