🏛️ MINERVA & CO.

Production E-Commerce Storefront & Admin Portal

"Luxurious botanical formulations, cold-process artisan soaps, and organic natural oils crafted for refined daily skincare rituals."

---

📜 Overview

Minerva & Co. is a production e-commerce storefront and admin console built with Next.js 16 (App Router), Tailwind CSS v4, TypeScript, and pnpm.

It features an editorial storefront design with a light claymorphism aesthetic, dedicated full-page product detail views (/products/[id]), interactive cart & checkout workflows, and a full-featured admin portal (/admin) designed to interface with a Spring Boot REST API backend (/api/v1/*).

---

⚜️ E-Commerce Features & Storefront Architecture

🛒 Storefront (/)

• Hero Section (HeroSection.tsx): Fullscreen hero banner featuring custom local typography (spotify_mix_ui_title_bold.otf), editorial copy, and quick navigation actions.
• Top Navigation (Navigation.tsx): Route-aware header (adapts text color between Hero and inner pages), interactive quick search modal (Cmd+K), contact drawer, and mobile menu.
• Side Index Navigation (SideIndexNav.tsx): Fixed Roman numeral side navigator (I — Artisan Soaps, II — Natural Oils & Balms, III — FAQ) with smooth-scroll locking.
• Artisan Soaps Showcase (ArtisanSoapsSection.tsx): Product grid with cold-process botanical soaps, pricing badges, inventory counters, and direct links to product detail routes.
• Natural Oils & Balms Specification (OilsBalmsSection.tsx): Detailed 2-column product spec cards highlighting extraction methods and botanical benefits.
• Interactive FAQ (FaqSection.tsx): Accordion section addressing formulation, shelf life, shipping, and return policies.
• Dedicated Product Detail View (/products/[id]): Full-page product view with dynamic volume selector, ingredient breakdown, stock availability, and cart dispatch.
• Cart & Checkout (/cart, /checkout): Shopping bag page and checkout workflow with delivery options and order summary.

---

🛡️ Admin Management Console (/admin)

• Dashboard Overview (/admin): Analytics overview displaying revenue, orders, active inventory, and average order value.
• Products Catalog Table (/admin/products): Filterable product inventory management table with status tags and edit actions.
• New Product Form (/admin/products/new): Form with image drag-and-drop upload zone configured for Spring Boot /api/v1/products API dispatch.
• Edit Product Page (/admin/products/[id]): Pre-filled edit form for existing inventory items.
• Order Pipeline (/admin/orders): Real-time order fulfillment status table with filter tabs.

---

🛠️ Technology Stack

Category	Technology	Purpose
Framework	Next.js 16 App Router	SSG/Prerendering, Route Handlers, & Dynamic Routing
Package Manager	pnpm	Fast, deterministic dependency management
Styling	Tailwind CSS v4	Custom Renaissance Claymorphism Design System
Icons	Lucide React	Domain-specific icons (Package, Droplets, HelpCircle, Leaf)
Typography	spotify_mix_ui_title_bold.otf, Lora, Plus Jakarta Sans, JetBrains Mono	Custom typography hierarchy
Backend Target	Spring Boot REST API	Target backend API integration (/api/v1/*)

---

🚀 Development & Execution

Prerequisites

• Node.js: 18.17+ or 20.x+
• pnpm: 9.x+ (exclusive package manager)

Commands

# Install dependencies
pnpm install

# Start local development server
pnpm dev

# Build production bundle (Static Export verification)
pnpm build

# Start production server
pnpm start

Open http://localhost:3000 in your browser.

---

🏛️ Project Directory Structure

minerva/
├── public/
│   ├── images/               # Organic product photography & botanical imagery
│   └── icon.png              # Storefront favicon
├── src/
│   ├── app/
│   │   ├── (storefront)/     # Customer storefront layout & pages
│   │   │   ├── cart/         # Shopping bag page
│   │   │   ├── checkout/     # Order checkout page
│   │   │   ├── products/[id]/# Dedicated full-page product details
│   │   │   ├── layout.tsx    # Storefront layout (Header, SideNav, Footer)
│   │   │   └── page.tsx      # Main storefront home page
│   │   ├── admin/            # Storefront admin portal (/admin/*)
│   │   │   ├── orders/       # Admin order management page
│   │   │   ├── products/     # Admin product inventory table & edit forms
│   │   │   └── page.tsx      # Admin dashboard metrics
│   │   ├── fonts/            # Custom local typography (spotify_mix_ui_title_bold.otf)
│   │   ├── globals.css       # Core design tokens, light clay shadows, & CSS variables
│   │   ├── layout.tsx        # Root HTML layout & font definitions
│   │   └── not-found.tsx     # Editorial 404 archive page
│   └── components/
│       ├── admin/            # Admin UI components (EditProductForm, etc.)
│       ├── layout/           # Shared layout components (Navigation, Footer)
│       ├── storefront/       # Storefront section components (Hero, Soaps, Oils, FAQ, DetailView)
│       └── ui/               # Reusable UI primitives (button, sheet, etc.)
├── .agents/rules/rules.md    # Repository build protocols & engineering standards
├── DESIGN.md                 # Design system tokens & color palette specs
└── README.md

---

📜 License

Private & Proprietary. All rights reserved by Minerva & Co.