infini-coffee

As a user, I want to use the Home page to explore the infini-coffee brand, view featured products, USPs, testimonials, blog highlights, and navigate to Products, Process, Blog, and Contact pages. Implement the Home page based on the existing JSX design (v2) which includes: NavBar, Hero with parallax & steam animations, BrandStory, FeaturedProducts, CoffeeJourneyTimeline, WhyChooseUs, ManufacturingProcessTeaser, Testimonials, BlogHighlights, CallToAction, and Footer sections. Scrolling background transitions from soft beige to rich brown. All CTAs (Shop Now, Explore Models) must be functional links.

As an admin, I want to use a secure Admin Login page to sign in with my credentials and be redirected to the Dashboard. Implement the Admin Login page with the infini-coffee theme: centered card on Soft Beige background, logo, email/password fields, coral CTA login button. Validate credentials against the backend auth API. Show error state on failed login. On success redirect to Dashboard.

As a user, I want to browse coffee machine models on the Products page with filters (price, type, capacity, features) and sorting options, and click through to Product Detail. Implement the Products listing page: responsive grid of product cards (image, name, tagline, price in INR, star rating, Add to Cart & View Details actions), filter sidebar/drawer, sort dropdown. On mobile, cards display as a single column. Links to Product Detail page per card. Supports both guest and authenticated users per the user flows for Individual Buyer, Business Buyer, and Distributor.

As a user, I want to browse industry insight blog posts on the Blog page, filter by category, and click through to read full articles. Implement the Blog listing page: 3-column grid on desktop (1-column mobile), blog cards with landscape thumbnail, coral category badge, bold title, 2-line excerpt, publish date, Read More link. Category filter tabs at top. Visit Blog section links from Home page BlogHighlights. Follows Business Buyer flow: Product Detail -> Blog.

As a guest or distributor, I want to explore the manufacturing process on the Process page to build trust in the brand's craftsmanship and quality. Implement the Process page: full-bleed rich brown background, step-by-step visual storytelling (sourcing, manufacturing, quality assurance, innovation) with illustrated icons, descriptive text, looping muted video or image gallery of factory floor, quality assurance highlights section. Follows Distributor flow: Home -> Process -> Products.

As a distributor or user, I want to submit an inquiry on the Contact page and receive confirmation that my message was received. Implement the Contact page: contact form (name, email, phone, message, subject dropdown), company address and map embed, email and phone display, submit CTA button in coral. Form submission calls backend contact API. Follows Distributor flow: Product Detail -> Contact.

As a user, I want to use the backend API to browse, filter, sort, and retrieve coffee machine product data. Implement FastAPI endpoints: GET /products (with filter/sort query params), GET /products/{id}, POST /products (admin), PUT /products/{id} (admin), DELETE /products/{id} (admin). Include image/video upload support. Backed by MySQL with Alembic migration for products table.

As a user, I want to use the backend API to fetch, filter, and read blog posts. As an admin, I want to create, update, and publish posts. Implement FastAPI endpoints: GET /blogs (with category/pagination params), GET /blogs/{id}, POST /blogs (admin), PUT /blogs/{id} (admin), DELETE /blogs/{id} (admin). Backed by MySQL with Alembic migration for blogs table.

As a user or distributor, I want to use the backend API to submit contact inquiries and receive email confirmation. Implement FastAPI endpoint: POST /contact — accepts name, email, phone, subject, message; stores in DB; sends confirmation email via SMTP/SendGrid. Backed by MySQL contacts table.

As an admin, I want to use the Dashboard page to get an overview of orders, products, and blog posts, and navigate to manage listings, publish posts, and generate invoices. Implement a Dashboard overview page with the infini-coffee theme: sidebar navigation linking to Products, Blog, Orders sections; summary stat cards (total orders, active products, published blogs); recent orders table; quick action buttons. Follows the user flow: Admin Login -> Dashboard -> Products / Blog / Orders.

As a user, I want to view detailed specifications, images, videos, and pricing of a coffee machine on the Product Detail page, and either add it to cart or submit a bulk enquiry. Implement the Product Detail page: image gallery with 3D rotate-on-hover, spec table, price display in INR, Add to Cart button (coral filled), Bulk Enquiry form for business buyers, related products section. Navigates from Products listing and links to Cart. Follows Individual Buyer and Business Buyer flows.

As a user, I want to use the backend API to place orders, process payments via Razorpay/Stripe/PayPal, and receive order confirmation. Implement FastAPI endpoints: POST /orders, GET /orders (admin), GET /orders/{id}, PATCH /orders/{id}/status, POST /payments/initiate, POST /payments/confirm. Integrate payment gateway webhooks. Generate invoice PDF on order completion.

As a user, I want to review items in my cart, update quantities, remove items, and proceed to checkout from the Cart page. Implement the Cart page with the infini-coffee theme: line items with product thumbnail, name, quantity stepper, unit price, subtotal; order summary panel with total in INR; Proceed to Checkout coral CTA button; Continue Shopping link back to Products. Follows Individual Buyer and Business Buyer flows (Product Detail -> Cart -> Checkout).

As an admin, I want to view and manage all customer orders on the Orders page, track their status, and generate invoices. Implement the Orders management page: paginated orders table (order ID, customer, product, amount in INR, status, date), status filter and search, order detail drill-down panel, Generate Invoice button per order that produces a downloadable PDF/invoice. Follows Admin flow: Dashboard -> Orders.

As an admin, I want to manage product listings on the Products admin page — add, edit, and remove coffee machine models and upload visuals. Implement the Products admin page: table/grid of all products with edit/delete actions, Add New Model modal/form (name, description, specs, price, images, videos upload, category), inline status toggle (active/inactive). Follows Admin flow: Dashboard -> Products -> Add/Edit Model.

As an admin, I want to publish and manage blog posts on the Blog admin page, categorize them, and upload visuals. Implement the Blog admin page: list of all posts with edit/delete/publish actions, rich text editor for new post creation, category assignment, thumbnail upload, publish/draft toggle. Follows Admin flow: Dashboard -> Blog -> Publish Post.

As a user, I want to securely complete my purchase on the Checkout page with payment gateway integration and receive an order confirmation. Implement the Checkout page: shipping address form, order summary, payment method selection (Razorpay, Stripe, PayPal), place order CTA, order confirmation/invoice screen post-payment. Validate form fields, handle payment success/failure states. Follows Individual Buyer flow: Cart -> Checkout.

As a developer, I want to wire all frontend pages to their respective backend API endpoints so that data is live and dynamic. Tasks include: connecting Products listing & detail to products API, Cart/Checkout to orders & payments API, Blog listing to blogs API, Contact form to contact API, Admin pages (Products, Blog, Orders) to their respective admin APIs. Implement loading states, error boundaries, and toast notifications for user feedback.