project-4e3357bf

As a frontend developer, implement the LandingHero section using React Three Fiber `Canvas` with `Float` and `Environment` from @react-three/drei. Build `PizzaBase` component with `cylinderGeometry`, `torusGeometry` for crust rim, sauce and cheese layers, using `useFrame` to read CSS `--scroll` custom property for scroll-driven rotation. Build `Topping` components using `sphereGeometry` with entrance easing (`1 - Math.pow(1 - animProgress, 3)`) and sinusoidal float animation post-entrance. Use `useInView` from Framer Motion for text reveal. Manage state with `useState`, `useRef`, `useMemo`, `useCallback`. Integrate `AnimatePresence` for hero content transitions. Toppings defined by `TOPPINGS` constant array with position, color, scale, delay, speed props.

As a frontend developer, implement the 3DPizzaInteractive section with a full 3D pizza builder using React Three Fiber `Canvas`, `OrbitControls`, and `Environment` from @react-three/drei. Build `PizzaBase` 3D model with `groupRef` rotation driven by `state.pointer.x` and continuous `rotation.y += 0.002` in `useFrame`. Build `ToppingMesh` with bounce animation using `Math.abs(Math.sin(elapsed * Math.PI * 3))` damping and scale-in over 0.3s, then continuous `rotation.y += 0.003`. Manage 8 toppings (`TOPPINGS` array: cheese, pepperoni, mushroom, onion, olive, pepper, tomato, basil) with fixed `TOPPING_POSITIONS` (3D) and `MOBILE_POSITIONS` (percentage-based CSS). Use Framer Motion `AnimatePresence` for topping toggle UI. Wrap 3D canvas in `Suspense`. Import both `ThreeDPizzaInteractive.css` and `3DPizzaInteractive.css`.

As a frontend developer, implement the MenuPreview section displaying 6 pizza cards (`PIZZAS` array: Маргарита, Пепероні, Чотири сири, Гавайська, М'ясна Феєрія, Овочева Дольче) with Unsplash images, prices, badges, and ingredients. Build `PizzaCard` component with `isFlipped` state for 3D card-flip interaction, `addAnim` state for add-to-cart animation. Use `containerVariants` with `staggerChildren: 0.12` and `delayChildren: 0.15`, `cardVariants` with `opacity: 0, y: 40` entrance. Use `useInView` for scroll-triggered reveal. Include `headerVariants` for section heading animation. Render `AnimatePresence` for flip transitions. Attach `onAddToCart` callback prop for cart integration.

As a frontend developer, implement the SpecialOffer section with a live countdown timer targeting `TARGET_DATE = new Date('2026-05-16T23:59:59')`. Build `CountdownDigit` component using `AnimatePresence mode='popLayout'` with spring animation (stiffness 400, damping 20) for digit transitions. Build `RippleEffect` component rendering animated SVG circles (`r: 10 → 90`, `strokeWidth: 3 → 0.5`) on CTA click via `ripples` state array. Use `useAnimation` for infinite background gradient `backgroundPosition` animation (duration 6s). Implement `setInterval` every 1000ms calling `getTimeLeft` helper. Pad numbers with `pad()` helper. Four countdown units: Дні, Год, Хв, Сек. Handle CTA click adding ripple objects to state.

As a frontend developer, implement the WhyChooseUs section displaying 4 feature cards (`features` array: fresh, fast, quality, love) each with a custom inline SVG icon, title, description, and variant CSS class. Use Framer Motion `useInView` with a `useRef` for scroll-triggered entrance. Apply `containerVariants` stagger animation on the card grid. Each card has a `variant` prop ('fresh', 'fast', 'quality', 'love') for themed border/accent color via CSS. SVG icons use stroke colors: `#FFC300` (fresh), `#FF5733` (fast), `#4A90E2` (quality), `#FF6F61` (love). Section is fully static (no state), pure presentation.

As a frontend developer, implement the CustomerReviews section with an auto-advancing carousel (`AUTOPLAY_MS = 5000ms`) of 6 reviews (`REVIEWS` array with name, role, initials, rating, quote). Build `StarIcon` SVG component with filled/empty state. Implement `useIsMobile` custom hook with `window.innerWidth < 768` resize listener. On mobile: single card slide using `cardVariants` with directional `x: ±300` enter/exit and `scale: 0.92`. On desktop: grouped 3-card slide using `desktopGroupVariants` with `x: ±200`. Use `AnimatePresence` with `custom={direction}` for directional animation. Manage `direction` state for prev/next navigation. Include dot pagination indicators and prev/next arrow buttons.

As a frontend developer, implement the HowItWorks section showing 4 steps (`STEPS` array: browse menu, customize order, checkout, receive delivery) each with an inline SVG icon, step number, headline, and description. Build `AnimatedNumber` component using Framer Motion `useMotionValue`, `useTransform`, and `animate` to count up from 0 to `target` when `inView` becomes true. Use `useInView` with `useRef` for scroll-triggered activation. Apply step entrance animations with stagger. Import both `StepItem.css` and `HowItWorks.css`. Step icons are stroke-based SVGs: book (step 1), settings gear (step 2), credit card (step 3), delivery truck (step 4).

As a frontend developer, implement the QuickMenuShowcase section displaying 6 pizza category tiles (`categories` array: М'ясні/12, Овочеві/8, Морські/6, Вегетаріанські/9, Спеціальні/5, Солодкі/4) each linking to /Menu. Build `CategoryTile` component with `hovered` state, `tileRevealVariants` using clipPath animation (`polygon(0 0, 0% 0, 0% 100%, 0 100%)` → full reveal) with staggered `i * 0.12` delay via `whileInView`. Apply `overlayVariants` for hover overlay sliding up from `y: 100%` with spring (stiffness 300, damping 28). Apply `badgeVariants` with bounce scale `[0.8, 1.12, 1]` on hover. Include `headerVariants` for section title entrance. All tiles are anchor tags.

As a frontend developer, implement the NewsletterSignup section with an email subscription form. Manage state: `email`, `focused`, `submitted`, `showSuccess`, `touched` via `useState`; use `useRef` for input focus. Build `validateEmail` regex function returning `'valid'` | `'invalid'` | `''`. Implement floating label effect (`labelUp` = focused or email.length > 0). Show inline error only when `touched && !focused && validity === 'invalid'`. On valid submit: set `submitted = true`, after 600ms timeout set `showSuccess = true`. Compute `glowColor` dynamically (red for error, yellow for valid+focused, blue default). Render two parallax layers (`ns-decor-bg` at `--scroll * -0.25px`, `ns-decor-mid` at `--scroll * -0.45px`) with blob divs and ingredient emoji spans. Use `whileInView` for headline and subtitle entrance.

As a frontend developer, implement the LandingCTA section with a full-width call-to-action. Use `useInView` with `sectionRef` (once: true, margin: '-80px') to trigger `containerVariants` stagger (0.15s children, 0.1s delay). Manage magnetic button offsets via `primaryOffset`/`secondaryOffset` state and `secondaryHovered` state. Implement `handleMagneticMove` callback computing `distX/distY` from button center with `magnetStrength = 0.15` applied on `mousemove`. Render three parallax layers: `lcta-decor-bg` at `--scroll * -0.3px` (3 blob divs), `lcta-decor-mid` at `--scroll * -0.5px` (2 mid-shapes). Render pulsing accent glow SVG with `radialGradient id='lcta-glow-grad'` animated `opacity: [0.25, 0.5, 0.25]` over 4s infinite. Apply `fadeUpVariant` and `buttonVariant` animations to heading and CTA buttons.

As a frontend developer, implement the Footer section with three columns animated via `columnVariants` using Framer Motion. Column 1: brand logo + description. Column 2: `quickLinks` array (5 links: Меню, Кошик, Замовлення, Підтвердження, Головна). Column 3: `contactInfo` array (3 items with inline SVG icons for phone, email, address) and `socialLinks` array (4 platforms: Facebook, Instagram, Telegram, TikTok each with fill/stroke SVG icons). Apply stagger entrance animation per column via `columnVariants`. Include bottom bar with copyright text. Note: this Footer component may already exist from a previous page — reuse if available.

Implement global cart state management using React Context API (or Zustand). Create CartContext/CartProvider with state: items array (id, name, price, quantity, variant, size), actions: addItem, removeItem, updateQuantity, clearCart, applyPromo. Persist cart state to localStorage. Export useCart hook for consumption across all pages (MenuPreview, CartItems, CartSummary, PromoCode, Navbar cart badge). This is a cross-cutting concern required by both Landing MenuPreview (onAddToCart) and Cart page sections. Note: frontend section tasks for Cart page depend on this being implemented.

Implement FastAPI backend endpoints for the pizza menu resource. Endpoints: GET /api/menu - return paginated list of pizzas with optional query params: category (filter by category slug), page, limit. GET /api/menu/{pizza_id} - return single pizza details. GET /api/menu/categories - return list of categories with slug and item count. Response schema (Pydantic): PizzaOut(id, name_uk, description_uk, price, badge, badge_type, category, ingredients_uk: list[str], image_url, is_available). Seed database with at least 12 pizzas matching the Ukrainian names used in frontend: Маргарита, Пепероні, Чотири сири, Гавайська, М'ясна Феєрія, Овочева Дольче, BBQ Курка, plus category entries. Used by: Menu page (tmp_menu_page), MenuPreview section (8e9998f3). Note: depends on DB models/migrations (tmp_db_models).

Implement FastAPI backend endpoints for the orders resource. Endpoints: POST /api/orders - create a new order; request body OrderCreate(customer_name, customer_surname, phone, email, delivery_type: 'delivery'|'pickup', address?, city?, comment?, payment_method: 'cash'|'card', items: list[OrderItemIn(pizza_id, quantity, variant?, size?)], promo_code?); returns OrderOut(id, order_number, status, total, created_at). GET /api/orders/{order_id} - retrieve order status by ID (used on Confirmation page). Validate pizza IDs exist, apply promo discount server-side, calculate total. Return HTTP 422 on validation errors. Used by: Order Form page (tmp_order_form_page), Confirmation page (tmp_confirmation_page). Note: depends on DB models (tmp_db_models) and optionally promo codes table.

Implement FastAPI endpoint for newsletter subscriptions. POST /api/newsletter/subscribe - request body NewsletterSubscribe(email: EmailStr); validates email format, checks for duplicate, inserts into newsletter_subscribers table, returns 201 on success or 409 if already subscribed. Used by: NewsletterSignup section on Landing page (91b36bf1). Note: depends on DB models (tmp_db_models).

Configure React Router v6 for the single-page application. Define routes: / → Landing, /menu → Menu, /cart → Cart, /order → Order Form, /confirmation → Confirmation. Create App.tsx root with BrowserRouter, route definitions, and lazy-loaded page components (React.lazy + Suspense with loading spinner). Add ScrollToTop component resetting window.scrollY on route change. Set up the --scroll CSS custom property update on window scroll event (document.documentElement.style.setProperty('--scroll', window.scrollY)) needed by parallax sections (LandingCTA, NewsletterSignup, 3DPizzaInteractive). Configure Vite with base path and proxy to backend API at /api → http://backend:8000. This is a prerequisite for all page-level frontend tasks.

As a frontend developer, implement the Navbar section for the Cart page. This component may already exist from the Landing page (task 23cd80f1-ba32-4f20-867c-7c68b66f34c3) — reuse if possible. The Navbar uses framer-motion with useScroll and useMotionValueEvent to toggle between nb-transparent and nb-solid classes at 40px scroll threshold. Features: animated SVG pizza-slice logo with strokeDashoffset path-draw animation (PIZZA_PATH_LENGTH=220, 1.6s duration), staggered desktop nav links via staggerContainer/linkVariant variants (staggerChildren: 0.1, delayChildren: 0.5), mobile hamburger button toggling drawerOpen state with body overflow lock via useEffect, AnimatePresence-driven slide-in drawer with drawerVariants (spring stiffness:300, damping:30) and overlay with overlayVariants, and custom drawerLinkVariant with per-index delay (0.1 + i*0.08). NAV_LINKS array includes Меню, Кошик, Замовлення, Підтвердження hrefs.

Implement the full Menu page (v1 design). Build sections: (1) MenuNavbar - reuse Navbar component from Landing. (2) MenuHero - page header with Ukrainian title 'Наше Меню' and subtitle. (3) MenuFilters - category filter tabs (М'ясні, Овочеві, Морські, Вегетаріанські, Спеціальні, Салатки) with active state and framer-motion underline indicator. (4) MenuGrid - responsive pizza card grid fetching from /api/menu endpoint; each PizzaCard shows image, name, ingredients, price, badge, 'Додати до кошика' button wired to useCart; apply staggered entrance via containerVariants. (5) MenuPagination or infinite scroll. (6) MenuFooter - reuse Footer component. All text in Ukrainian. Micro-animations on filter switch and card entrance. Note: depends on Global Cart State (tmp_cart_state) and Menu API (tmp_api_menu).

Implement the full Order Form page (v1 design). Build sections: (1) Navbar - reuse existing Navbar component. (2) OrderFormHeader - breadcrumb (Головна → Кошик → Замовлення) and progress steps (Кошик/done, Замовлення/active, Підтвердження/pending). (3) OrderFormFields - controlled form with fields: ім'я, прізвище, телефон (+380 mask), email, адреса доставки, місто, коментар; real-time validation with error states; framer-motion shake on invalid submit. (4) DeliveryOptions - radio toggle between 'Доставка' and 'Самовивіз' with animated panel expand for address fields. (5) PaymentOptions - radio toggle Cash/Card with icons. (6) OrderSummary sidebar - read cart from useCart, display items, subtotal, delivery cost, total in Ukrainian hryvnias. (7) SubmitButton with loading spinner state; on success redirect to /Confirmation. (8) Footer - reuse existing. All text Ukrainian. Note: depends on Cart State (tmp_cart_state) and Orders API (tmp_api_orders).

Implement the full Confirmation page (v1 design). Build sections: (1) Navbar - reuse existing. (2) ConfirmationHero - animated success checkmark SVG (stroke-dashoffset draw animation), order number display, Ukrainian success message 'Ваше замовлення прийнято!'. (3) OrderDetails - display submitted order summary (items, delivery address, payment method, estimated delivery time). (4) ProgressSteps - show all 3 steps completed (Кошик ✓, Замовлення ✓, Підтвердження ✓). (5) CTAButtons - links back to Menu ('Переглянути меню') and Landing ('На головну'). (6) Footer - reuse existing. Confetti or particle burst animation on page load using framer-motion. Clear cart via useCart.clearCart() on mount. All text Ukrainian. Note: depends on Global Cart State (tmp_cart_state) and order data from Orders API (tmp_api_orders).

As a frontend developer, implement the CartHeader section for the Cart page. Renders a <header className='ch-root'> with motion.div using containerVariants (staggerChildren:0.08, duration:0.4 easeOut) wrapping three animated children via itemVariants. Includes: (1) breadcrumb <ol> with BREADCRUMBS array (Головна→/Landing, Меню→/Menu, Кошик→null) and ChevronRight SVG separators between items, (2) title row with <h1 className='ch-title'>Ваш кошик</h1> and ch-badge span with ch-badge-dot and Ukrainian pluralization logic for itemCount (1→товар, 2-4→товари, 5+→товарів, hardcoded itemCount=3), (3) progress steps bar with STEPS array (Кошик/active, Замовлення/pending, Підтвердження/pending), ch-step-connector dividers with conditional ch-step-connector--done class, and CheckIcon SVG for completed steps.

As a frontend developer, implement the CartItems section for the Cart page. Uses useState for items (INITIAL_ITEMS array with 3 pizzas: Маргарита/245грн, Пепероні/315грн, Чотири сири/280грн), bumpMap object, and removingIds Set. Key interactions: triggerBump callback sets bumpMap[id]=true then clears after timeout for quantity-change animation; removeItem sets removingIds then calls setItems to filter after 350ms delay; updateQty increments/decrements quantity with floor at 1. AnimatePresence wraps item list with cardVariants (spring stiffness:280, damping:24; exit: opacity:0, x:80, scaleY:0). Each card shows PizzaIcon SVG placeholder, item name/variant/size, TrashIcon delete button, and +/- quantity controls. CartEmptyIcon SVG (dashed-circle cart with crosshair) shown when items array is empty.

As a frontend developer, implement the PromoCode section for the Cart page. State includes: open (accordion toggle), inputVal, status ('idle'|'success'|'error'), appliedCode, and shakeKey. VALID_CODES object maps codes PIZZA10/WELCOME20/FREESHIP/PIZZA4U to description and amountLabel. Collapsible panel via AnimatePresence with bodyVariants (height:0→auto, opacity:0→1, duration:0.32 cubic-bezier). ChevronIcon rotates via pc-open class when open. On apply: validates inputVal.trim().toUpperCase() against VALID_CODES, sets status to 'success' or 'error', triggers shake animation via shakeKey increment for invalid codes. Applied code displayed with BadgeIcon, code label, amountLabel, and TrashIcon remove button with AnimatePresence item transition via itemVariants (opacity, x:-12, scale:0.97). TagIcon decorates the section header, ArrowRightIcon on apply button.

As a frontend developer, implement the CartSummary section for the Cart page. Constants: SUBTOTAL=647, TAX_RATE=0.0, SHIPPING_THRESHOLD=500, SHIPPING_COST=59, PROMO_DISCOUNT=65, PROMO_CODE='PIZZA10'. Derived state: shipping (0 if SUBTOTAL>=500 else 59), tax, discount, total. Uses useState for prevTotal/totalUpdated/rowsUpdated/ringActive and useRef for isFirstRender. useEffect watches total vs prevTotal — when changed, activates update pulse states and clears via setTimeout (700ms for rows/total, 800ms for ring). cs-update-ring div gets cs-ring-active class during update. Summary rows use rowVariants with custom index delay (0.08*i) for staggered whileInView entrance; total section uses totalVariants (spring stiffness:280, damping:22, delay:0.4). hasSavings badge shows totalSaved when discount>0 or free shipping applies. formatPrice formats to '### ₴'. SVG monitor icon in title.

As a frontend developer, implement the CartActions section for the Cart page. Renders <section className='cta-root'> with cta-inner containing: (1) cta-divider horizontal rule, (2) cta-buttons flex row with two motion.a elements — secondary link to /Menu ('Продовжити покупки') animating from x:-16/opacity:0 with delay:0.15 and chevron-left SVG icon, and primary link to /Order Form ('Перейти до замовлення') animating from x:16/opacity:0 with delay:0.05 and chevron-right SVG icon, both using whileInView with viewport once:true, (3) cta-security-note motion.div animating opacity:0→1 with delay:0.3 containing shield SVG path icon and Ukrainian security text 'Безпечна оплата та захист персональних даних'.

As a frontend developer, implement the RelatedProducts section for the Cart page. Uses useState for addedIds object tracking temporarily-added product IDs. PRODUCTS array has 4 items: Маргерита/199грн (Хіт badge), Пепероні/249грн (Популярна badge), Чотири сири/279грн (no badge), BBQ Курка/259грн (Новинка badge) each with emoji placeholder. handleAdd sets addedIds[id]=true then clears after 1600ms via setTimeout. Header uses headerVariants (x:-16→0, duration:0.5) with whileInView; rp-title-badge includes star SVG path. Grid maps PRODUCTS with cardVariants (custom index, delay: i*0.1, y:24→0) via whileInView viewport margin:-30px. Each rp-card gets rp-card--added class when in addedIds. Cards show emoji placeholder in rp-card-image-placeholder, optional badge span, product name/description, price formatted as '### ₴', and add-to-cart button that changes label/style when addedIds[id] is truthy.

As a frontend developer, implement the Footer section for the Cart page. This component may already exist from the Landing page (task 2b700b17-e033-407a-bd80-e21837dc78ee) — reuse if possible. Footer uses motion with columnVariants (hidden/visible) for staggered column entrance via whileInView. Contains: quickLinks array (Меню, Кошик, Замовлення, Підтвердження, Головна with hrefs), contactInfo array with 3 entries (phone SVG icon/+380 44 123-45-67, email SVG icon/info@project-4e3357bf.ua, location pin SVG icon/м. Київ вул. Хрещатик 22), and socialLinks array with 4 items (Facebook filled SVG, Instagram stroked SVG, Telegram filled path SVG, TikTok filled path SVG). All text in Ukrainian.