Skip to content

readme.md

Latest commit

 

History

History
52 lines (42 loc) · 3.42 KB

readme.md

File metadata and controls

52 lines (42 loc) · 3.42 KB
Raw

Vesta & Co. — Furniture Schedule Hero Experience

This is a high-end, modern React-based e-commerce platform built for a Japandi-style furniture brand called Vesta & Co.

The website's core feature is the Furniture Schedule Hero Experience, which integrates procurement logistics and white-glove setup planning directly into the landing page curation workflow.

Project Structure

The project has been fully scaffolded inside /vesta-co:

/vesta-co
├── package.json               # Project metadata and dependencies
├── tailwind.config.js         # Custom Japandi theme (cream, sand, oak, charcoal, moss)
├── index.html                 # Embedded Japanese / Scandinavian typography CDNs
├── src
│   ├── main.jsx               # React entry point
│   ├── index.css              # Custom base layer, scrollbars, and scroll layouts
│   ├── App.jsx                # Global state orchestrator, filters, and mobile drawer
│   └── components
│       ├── Hero.jsx           # Split-screen slideshow gallery & integrated schedule panel
│       ├── ProductCard.jsx    # Configurable room assignment selector & status ribbons
│       ├── SchedulePanel.jsx  # Active schedule tracker, lead-time consolidator & progress milestones
│       └── TimelineModal.jsx  # Interactive Gantt-style timeline builder & downloadable manifest

Features Implemented

  1. Japandi Design Aesthetic: Styled with a bespoke custom color scheme based on unbleached linens, white oak, natural travertine stone, and deep charcoal slate. Heading fonts utilize Cormorant Garamond for a premium serif appeal, contrasted against modern, clean sans-serif body copy.
  2. Interactive Hero Slideshow: The left side of the split hero features a slideshow of flagship pieces, allowing users to select rooms and click "Add to Schedule" directly from the showcase.
  3. Adaptive Logistics Panel: The right side displays a "Live Schedule" panel on desktop and transitions to a beautiful slide-out drawer on mobile devices.
  4. Interactive Configuration: Users can change their target Room Assignment (e.g., Living Room, Bedroom) directly inside individual product cards before scheduling, or dynamically re-route them in the Live Schedule panel dropdown.
  5. Logistics Aggregation Logic: Calculates the "Projected Delivery Date" by computing the longest single lead time of scheduled items. It presents a dynamic visual progress bar illustrating order milestones (from procurement through joinery to consolidated white-glove setup).
  6. Timeline Matrix Export: Clicking "Finalize Timeline & Export" transitions the landing page into a stunning, responsive, full-screen project manager modal. Here, users can personalize their project name, view dynamic weekly milestones, print their delivery manifest, or simulate downloading a styled local text manifest containing items, individual lead times, pricing, and logistics stages.

Running Locally

Because the sandbox restricts external internet traffic to secure endpoints, dependencies cannot be installed inside this container. To run this project locally on your machine:

  1. Copy or extract the /vesta-co directory to your local system.
  2. Inside the root directory, install dependencies: 
    npm install
  3. Launch the local development server: 
    npm run dev
  4. Build for production: 
    npm run build