# Gaps: Implementation vs. SDD

This document lists all identified gaps between the Software Design Documents (SDD) and the current implementation in `./jenado-unlimited-website`.

---

## 1. Technical Stack Gaps

| SDD Requirement | Current Implementation | Status |
|---|---|---|
| React + Tailwind CSS | ✅ Next.js (React) + Tailwind | Implemented |
| Node.js + Express backend | ❌ No Express server — all server logic lives in Next.js | **Missing** |
| PostgreSQL database | ❌ No database, no ORM, no migrations, no DB client | **Missing** |
| Vercel (frontend hosting) | ✅ README mentions Vercel; standard Next.js deploy | Implemented |
| AWS (backend/DB hosting) | ❌ No AWS infrastructure configured | **Missing** |

---

## 2. Core Feature Gaps

### 2.1 User Authentication (JWT)

**SDD Requirement:** User authentication using JWT tokens for secure login/signup.

**Current State:** No authentication system exists. There are no login or signup pages, no auth routes, no JWT middleware, no session management, and no protected pages.

**Impact:** Users cannot create accounts, log in, or have any personalized experience.

### 2.2 Shopping Cart

**SDD Requirement:** Full shopping cart with add-to-cart buttons, quantity adjustment, cart page, and subtotal calculation.

**Current State:** No cart state management (no Context, localStorage, or store). No "add to cart" buttons anywhere in the UI. No cart page. No quantity handling.

**Impact:** Users cannot add products to a cart or manage their selections before checkout.

### 2.3 Checkout Process (Stripe Integration)

**SDD Requirement:** Checkout page with shipping details, payment processing via Stripe, and order summary.

**Current State:** No checkout page exists. No Stripe library installed. No payment processing of any kind.

**Impact:** Users cannot complete purchases. This is the core revenue-generating feature described in the SDD and it is entirely missing.

### 2.4 User Profile Management

**SDD Requirement:** User profile page with order history, profile settings, and saved addresses.

**Current State:** No user accounts means no profile pages, no order history, and no settings.

**Impact:** No post-purchase experience or account management.

---

## 3. Website Design Document Gaps

### 3.1 Home Page — Missing Testimonials

**SDD Requirement:** Home page with hero section, featured products, **and testimonials**.

**Current State:** Home page has a hero section and an offerings grid. No testimonials, no reviews, no social proof section.

**Gap:** No testimonials component or data structure for customer reviews.

### 3.2 Product Listing Page — Missing Search & Filters

**SDD Requirement:** Product listing page with **filters, search, and product cards**.

**Current State:** The `/offerings` page displays a static grid of offerings with status badges (active/soft-launch/coming-soon). There is no search input, no category filters, and no sorting.

**Gap:** No search functionality. No filter UI or logic. No dynamic filtering by category, price, or status.

### 3.3 Product Detail Page — Missing Cart Integration & Reviews

**SDD Requirement:** Product detail page with **image gallery, descriptions, reviews, and add-to-cart button**.

**Current State:** Detail pages (`/offerings/[slug]`) show a summary, description, pillars as emojis, and an "Inquire" CTA linking to the contact form. There is no "Add to Cart" button and no reviews section.

**Gap:** No add-to-cart CTA. No reviews/ratings system. The inquiry form is a lead capture, not a purchase.

### 3.4 Image Galleries

**SDD Requirement:** Image galleries on product detail pages.

**Current State:** The `GalleryGrid` component and `VerticalGallery` data structure exist but all galleries are empty or show "coming soon" placeholders. The `public/` directory contains no images.

**Gap:** No real product images uploaded. Gallery component is wired up but has no visual content.

### 3.5 Shopping Cart Page

**SDD Requirement:** Shopping cart page with list of items, quantity adjustment, and subtotal.

**Current State:** No cart page exists at all. No `/cart` route.

**Gap:** Entirely missing.

### 3.6 Checkout Page

**SDD Requirement:** Checkout page with shipping details, payment integration, and order summary.

**Current State:** No `/checkout` route. No shipping forms. No payment integration.

**Gap:** Entirely missing.

### 3.7 User Account Page

**SDD Requirement:** User account page with order history, profile settings, and saved addresses.

**Current State:** No user accounts exist. No `/account` route.

**Gap:** Entirely missing.

---

## 4. Design & Branding Gaps

### 4.1 Color Palette

| SDD | Actual Implementation |
|---|---|
| Primary: `#000000` (Black) | `#1c1917` (Warm stone) / `#0c0a09` (headings) |
| Secondary: `#FFFFFF` (White) | `#fafaf9` (Light bg) / `#fff` (surface) |
| Accent: `#FFD700` (Gold) | `#a16207` (Warm amber/brown) |

**Gap:** The implementation uses a warm stone/earthy amber palette instead of the SDD's black/white/gold. This may be intentional but deviates from the brand spec.

### 4.2 Typography

| SDD | Actual Implementation |
|---|---|
| Headings: Inter, sans-serif | Tailwind system font stack |
| Body: Roboto, sans-serif | Tailwind system font stack |

**Gap:** Inter and Roboto fonts are not loaded or applied. The implementation relies on Tailwind's default system font stack.

---

## 5. Implemented Features (for reference)

| Feature | Status | Notes |
|---|---|---|
| Home page with hero | ✅ | Hero section + offerings grid |
| Offerings catalog listing | ✅ | Static grid with status badges |
| Offerings detail pages | ✅ | Description, pillars, inquiry CTA |
| Contact form | ✅ | Zod validation, honeypot, Resend email |
| Responsive design | ✅ | Mobile-first, all breakpoints |
| Accessibility | ✅ | Skip-to-content, semantic HTML, ARIA labels |
| Dark/light theme toggle | ✅ | Persisted via localStorage |
| JSON-LD structured data | ✅ | Organization, WebSite, ContactPage schemas |
| Favicon + metadata | ✅ | Next.js image config |

---

## 6. Summary by Development Phase

| SDD Phase | Status | Gap Level |
|---|---|---|
| **Phase 1: Foundation** | ✅ | None — project structure, deployment config, and contact form are solid |
| **Phase 2: Core Features** | ❌ | **Critical** — auth, catalog (dynamic), cart, and checkout are all missing |
| **Phase 3: Refinement** | ⚠️ | Partial — UI is polished but missing testimonials, search, filters, galleries, and reviews |
| **Phase 4: Launch** | ⚠️ | Partial — site is deployable as a brochure but not as the full e-commerce store described in the SDD |

---

## 7. Priority Recommendations

1. **P0 — Database & Backend:** Set up PostgreSQL + Prisma/Drizzle to store products, users, orders, and cart data.
2. **P0 — Authentication:** Implement JWT or NextAuth.js for user registration, login, and session management.
3. **P0 — Shopping Cart:** Add cart state management (Context + localStorage), add-to-cart buttons, and a cart page.
4. **P0 — Checkout:** Integrate Stripe for payment processing with shipping forms and order summaries.
5. **P1 — Dynamic Catalog:** Replace static vertical data with database-backed products, search, and filters.
6. **P1 — Testimonials & Reviews:** Add a testimonials component and a review system.
7. **P1 — Image Galleries:** Upload real product images and wire them into the gallery component.
8. **P2 — User Profile:** Add order history, saved addresses, and account settings.
9. **P2 — Brand Alignment:** Apply Inter/Roboto fonts and adjust color palette to match the SDD if desired.