cafe-app

As a frontend developer, implement the HeroSection for the Landing page. This section features a 3D interactive scene using @react-three/fiber and @react-three/drei. It includes a CameraRig component that adjusts the camera based on scroll position, a CafeDoor component that opens on hover to reveal the menu, and a CoffeeCup component with hover effects. Ensure smooth animations and interactions.

As a frontend developer, implement the LocationSection for the Landing page. This section provides information about the café's location, including an interactive map placeholder and contact details. Ensure the section is visually appealing and responsive.

As a frontend developer, implement the MenuPreviewSection for the Landing page. This section displays a preview of the café's menu with categories and items. It includes interactive filters linked to the 3D scene in the HeroSection. Ensure the section is dynamic and updates based on user interactions.

As a frontend developer, implement the Navbar for the Landing page. This component includes a responsive navigation bar with a logo, links to other pages, and a hamburger menu for mobile views. It changes appearance on scroll and toggles the menu on click.

As a frontend developer, implement the PromotionsSection for the Landing page. This section showcases current deals and promotions with a featured deal and a grid of promotional cards. Ensure the section is engaging and visually highlights the offers.

As a frontend developer, implement the Navbar section for the Menu page. This component includes a responsive navigation bar with scroll detection to add a 'scrolled' class, a hamburger menu for mobile view, and navigation links to different pages. Ensure the 'Order Now' call-to-action is prominently displayed. This component may already exist from the Landing Page.

As a Data Engineer, create Alembic migrations for the database schema. Ensure migrations are reversible and tested.

As a frontend developer, implement the MenuHero section for the Menu page. This section features a hero banner with a badge icon, a title, a subtitle, and decorative elements. It sets the tone for the menu with a focus on quality and craftsmanship.

As a frontend developer, implement the MenuCategories section for the Menu page. This component allows users to filter menu items by category using buttons. It highlights the active category and triggers a callback function when a category is selected.

As a frontend developer, implement the MenuGridContainer section for the Menu page. This component displays menu items in a grid format, showing a message if no items match the current filters. It dynamically updates based on the active category and item count.

As a frontend developer, implement the MenuItemCard component for the Menu page. This interactive card displays item details, including an image, name, short description, and price. It expands to show a full description on hover and includes an 'Add' button to add items to the cart.

As a frontend developer, implement the MenuFilterPanel component for the Menu page. This panel allows users to filter menu items by dietary preferences and price range. It includes checkboxes for dietary options and range sliders for price, with a toggle to open/close the panel.

As a frontend developer, implement the MenuItemModal component for the Menu page. This modal displays detailed information about a menu item, including customizations, nutritional info, and allergens. It allows users to select options and adjust quantity before adding to the cart.

As a frontend developer, implement the MenuCTA section for the Menu page. This call-to-action section encourages users to place an order or view specials, featuring prominent buttons and a decorative glow effect.

As a frontend developer, implement the Footer section for the Menu page. This component includes brand information, social media links, navigation links, and contact details. It may already exist from the Landing Page.

As a frontend developer, implement the OffersHero section for the Offers page. This section features a full-width hero banner with a title, subtitle, and two call-to-action buttons linking to the OffersGrid and NewsletterCTA sections. Ensure the overlay and typography are styled according to the design specifications.

As a frontend developer, implement the OffersGrid section for the Offers page. This section displays a grid of promotional offers, each with a title, description, discount badge, expiry date, and a 'Claim Offer' button. Ensure the grid is responsive and styled according to the design specifications.

As a frontend developer, implement the LimitedTimePromo section for the Offers page. This section includes a countdown timer for a flash sale, updating every second, and a call-to-action button linking to the Menu page. Ensure the timer accurately reflects the time left until the sale ends.

As a frontend developer, implement the SeasonalHighlight section for the Offers page. This section showcases a seasonal product with an image, description, and a call-to-action button. Ensure the layout is responsive and visually appealing.

As a frontend developer, implement the TierBronze section for the Offers page. This section displays a membership tier card with benefits, pricing, and a sign-up button. Ensure the card is styled according to the design specifications.

As a frontend developer, implement the TierSilver section for the Offers page. This section displays a membership tier card with benefits, pricing, and a join button. Ensure the card is styled according to the design specifications and marked as the most popular tier.

As a frontend developer, implement the TierGold section for the Offers page. This section displays a membership tier card with benefits, pricing, and a 'Go Gold' button. Ensure the card is styled according to the design specifications.

As a frontend developer, implement the NewsletterCTA section for the Offers page. This section includes a form for users to subscribe to the newsletter with email and optional SMS updates. Ensure the form handles submission, displays a success message, and resets the input fields.

As a frontend developer, implement the ContactHero section for the Contact page. This section includes a breadcrumb navigation, a main title 'Get in Touch', and a subtitle encouraging users to contact the café. It features a decorative coffee icon. Ensure the design is responsive and visually appealing.

As a frontend developer, implement the ContactForm section for the Contact page. This form includes fields for name, email, subject, and message, with validation for each. It should display success messages upon submission and handle errors gracefully. Simulate an API call for form submission.

As a frontend developer, implement the LocationMap section for the Contact page. This section includes the café's address and a link to Google Maps for directions. It features a placeholder for an interactive map, which should be replaced with a Google Maps iframe in the future.

As a frontend developer, implement the BusinessHours section for the Contact page. This section displays the café's opening hours for each day of the week. It includes a note about private events. Ensure the layout is clear and accessible.

As a frontend developer, implement the SocialLinks section for the Contact page. This section includes links to the café's social media profiles (Instagram, Facebook, Twitter, LinkedIn) with appropriate icons. Ensure links open in a new tab and are accessible.

As a Tech Lead, verify the end-to-end integration between the Promotions frontend implementation and the Promotions backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Menu frontend implementation and the Menu backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Contact frontend implementation and the Contact backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.