# dkayush7373/herbal architecture

> Architecture diagram of the GitHub repository dkayush7373/herbal, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dkayush7373/herbal
- Repository: https://github.com/dkayush7373/herbal

## Overview

AKATSUKI is a product-marketing and direct-commerce site for Ayurvedic hair oils. The intended journey is product discovery and education, variant exploration, cart building, then WhatsApp checkout; supporting branches include a hair-care quiz, reviews, newsletter signup, referrals, and wishlists. The README documents the animated bottle rail and its physics engine. Several page sections and rail components are listed but unsampled, so their wiring is shown only as unverified rather than inferred as a call chain.

Main entry points: [`app/page.tsx`](https://github.com/dkayush7373/herbal/blob/main/app/page.tsx) (Storefront page), [`lib/cart-context.tsx`](https://github.com/dkayush7373/herbal/blob/main/lib/cart-context.tsx) (Cart state), [`app/layout.tsx`](https://github.com/dkayush7373/herbal/blob/main/app/layout.tsx) (Root layout), [`components/rail/bottle-rail.tsx`](https://github.com/dkayush7373/herbal/blob/main/components/rail/bottle-rail.tsx) (Bottle rail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Storefront experience"]
  node_home["Storefront page<br/>[page.tsx]"]
  node_rail["Bottle rail<br/>[bottle-rail.tsx]"]
  node_rail_detail["Product detail view<br/>[detail-view.tsx]"]
  node_bottle["Bottle rendering<br/>[bottle-image.tsx]"]
  node_jiggle["Rail physics"]
  node_physics_math["Spring calculations<br/>[jiggle.ts]"]
end

subgraph group_commerce["Cart and checkout"]
  node_cart_state["Cart state<br/>[cart-context.tsx]"]
  node_cart_drawer["Cart drawer<br/>[cart-drawer.tsx]"]
  node_referral["Referral capture<br/>[referral.ts]"]
  node_whatsapp["WhatsApp checkout"]
end

subgraph group_catalog["Product data"]
  node_catalog_data["Product catalog<br/>[products.ts]"]
  node_product_detail_data["Product education data<br/>[product-detail.ts]"]
end

subgraph group_engagement["Education and engagement"]
  node_quiz["Hair-care quiz<br/>[quiz.tsx]"]
  node_quiz_data["Quiz logic<br/>[quiz.ts]"]
  node_reviews["Customer reviews<br/>[reviews.tsx]"]
  node_newsletter["Newsletter signup<br/>[newsletter.tsx]"]
  node_wishlist["Wishlist"]
end

subgraph group_platform["Shared platform"]
  node_site_config["Site content config<br/>[site.ts]"]
  node_jsonld["Product structured data<br/>[jsonld.ts]"]
  node_layout["Root layout<br/>[layout.tsx]"]
end

node_visitor(("Shopper"))
node_newsletter_service["Newsletter endpoint"]

node_visitor -.->|"visits"| node_home
node_home -.->|"presents"| node_rail
node_rail -.->|"opens details"| node_rail_detail
node_rail -.->|"uses motion"| node_jiggle
node_jiggle -->|"calls calculations"| node_physics_math
node_jiggle -->|"uses rest angles"| node_bottle
node_home -.->|"offers cart"| node_cart_state
node_layout -->|"provides context"| node_cart_state
node_layout -->|"renders"| node_cart_drawer
node_cart_drawer -->|"reads cart"| node_cart_state
node_cart_state -->|"looks up prices"| node_catalog_data
node_cart_state -->|"captures referral"| node_referral
node_cart_state -.->|"builds checkout link"| node_whatsapp
node_home -.->|"offers quiz"| node_quiz
node_quiz -.->|"uses quiz logic"| node_quiz_data
node_home -.->|"shows reviews"| node_reviews
node_reviews -->|"reads reviews"| node_site_config
node_home -.->|"offers signup"| node_newsletter
node_newsletter -.->|"submits email"| node_newsletter_service
node_rail_detail -.->|"uses detail content"| node_product_detail_data
node_product_detail_data -->|"reads product data"| node_catalog_data
node_rail_detail -.->|"offers wishlist"| node_wishlist
node_layout -->|"generates structured data"| node_jsonld

click node_home "https://github.com/dkayush7373/herbal/blob/main/app/page.tsx"
click node_rail "https://github.com/dkayush7373/herbal/blob/main/components/rail/bottle-rail.tsx"
click node_rail_detail "https://github.com/dkayush7373/herbal/blob/main/components/rail/detail-view.tsx"
click node_bottle "https://github.com/dkayush7373/herbal/blob/main/components/bottle-image.tsx"
click node_jiggle "https://github.com/dkayush7373/herbal/blob/main/lib/physics/use-jiggle-engine.ts"
click node_physics_math "https://github.com/dkayush7373/herbal/blob/main/lib/physics/jiggle.ts"
click node_cart_state "https://github.com/dkayush7373/herbal/blob/main/lib/cart-context.tsx"
click node_cart_drawer "https://github.com/dkayush7373/herbal/blob/main/components/cart/cart-drawer.tsx"
click node_catalog_data "https://github.com/dkayush7373/herbal/blob/main/lib/products.ts"
click node_product_detail_data "https://github.com/dkayush7373/herbal/blob/main/lib/product-detail.ts"
click node_referral "https://github.com/dkayush7373/herbal/blob/main/lib/referral.ts"
click node_quiz "https://github.com/dkayush7373/herbal/blob/main/components/sections/quiz.tsx"
click node_quiz_data "https://github.com/dkayush7373/herbal/blob/main/lib/quiz.ts"
click node_reviews "https://github.com/dkayush7373/herbal/blob/main/components/sections/reviews.tsx"
click node_newsletter "https://github.com/dkayush7373/herbal/blob/main/components/sections/newsletter.tsx"
click node_wishlist "https://github.com/dkayush7373/herbal/blob/main/components/product-modal/wishlist-button.tsx"
click node_site_config "https://github.com/dkayush7373/herbal/blob/main/lib/site.ts"
click node_jsonld "https://github.com/dkayush7373/herbal/blob/main/lib/jsonld.ts"
click node_layout "https://github.com/dkayush7373/herbal/blob/main/app/layout.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_rail,node_rail_detail,node_bottle,node_jiggle,node_physics_math toneBlue
class node_cart_state,node_cart_drawer,node_referral,node_whatsapp toneAmber
class node_catalog_data,node_product_detail_data toneMint
class node_quiz,node_quiz_data,node_reviews,node_newsletter,node_wishlist toneRose
class node_site_config,node_jsonld,node_layout,node_visitor,node_newsletter_service toneIndigo
```

## Components

### Storefront experience

- [Storefront page](https://github.com/dkayush7373/herbal/blob/main/app/page.tsx): `app/page.tsx`
- [Bottle rail](https://github.com/dkayush7373/herbal/blob/main/components/rail/bottle-rail.tsx): `components/rail/bottle-rail.tsx`
- [Product detail view](https://github.com/dkayush7373/herbal/blob/main/components/rail/detail-view.tsx): `components/rail/detail-view.tsx`
- [Bottle rendering](https://github.com/dkayush7373/herbal/blob/main/components/bottle-image.tsx): `components/bottle-image.tsx`
- [Rail physics](https://github.com/dkayush7373/herbal/blob/main/lib/physics/use-jiggle-engine.ts): `lib/physics/use-jiggle-engine.ts`
- [Spring calculations](https://github.com/dkayush7373/herbal/blob/main/lib/physics/jiggle.ts): `lib/physics/jiggle.ts`

### Cart and checkout

- [Cart state](https://github.com/dkayush7373/herbal/blob/main/lib/cart-context.tsx): `lib/cart-context.tsx`
- [Cart drawer](https://github.com/dkayush7373/herbal/blob/main/components/cart/cart-drawer.tsx): `components/cart/cart-drawer.tsx`
- [Referral capture](https://github.com/dkayush7373/herbal/blob/main/lib/referral.ts): `lib/referral.ts`
- **WhatsApp checkout**

### Product data

- [Product catalog](https://github.com/dkayush7373/herbal/blob/main/lib/products.ts): `lib/products.ts`
- [Product education data](https://github.com/dkayush7373/herbal/blob/main/lib/product-detail.ts): `lib/product-detail.ts`

### Education and engagement

- [Hair-care quiz](https://github.com/dkayush7373/herbal/blob/main/components/sections/quiz.tsx): `components/sections/quiz.tsx`
- [Quiz logic](https://github.com/dkayush7373/herbal/blob/main/lib/quiz.ts): `lib/quiz.ts`
- [Customer reviews](https://github.com/dkayush7373/herbal/blob/main/components/sections/reviews.tsx): `components/sections/reviews.tsx`
- [Newsletter signup](https://github.com/dkayush7373/herbal/blob/main/components/sections/newsletter.tsx): `components/sections/newsletter.tsx`
- [Wishlist](https://github.com/dkayush7373/herbal/blob/main/components/product-modal/wishlist-button.tsx): `components/product-modal/wishlist-button.tsx`

### Shared platform

- [Site content config](https://github.com/dkayush7373/herbal/blob/main/lib/site.ts): `lib/site.ts`
- [Product structured data](https://github.com/dkayush7373/herbal/blob/main/lib/jsonld.ts): `lib/jsonld.ts`
- [Root layout](https://github.com/dkayush7373/herbal/blob/main/app/layout.tsx): `app/layout.tsx`

### Other components

- **Shopper**
- **Newsletter endpoint**

## Connections

- Shopper → Storefront page: visits (evidence: `README.md`)
- Storefront page → Bottle rail: presents
- Bottle rail → Product detail view: opens details
- Bottle rail → Rail physics: uses motion (evidence: `README.md`)
- Rail physics → Spring calculations: calls calculations (evidence: `lib/physics/use-jiggle-engine.ts`)
- Rail physics → Bottle rendering: uses rest angles (evidence: `lib/physics/use-jiggle-engine.ts`)
- Storefront page → Cart state: offers cart
- Root layout → Cart state: provides context (evidence: `app/layout.tsx`)
- Root layout → Cart drawer: renders (evidence: `app/layout.tsx`)
- Cart drawer → Cart state: reads cart (evidence: `components/cart/cart-drawer.tsx`)
- Cart state → Product catalog: looks up prices (evidence: `lib/cart-context.tsx`)
- Cart state → Referral capture: captures referral (evidence: `lib/cart-context.tsx`)
- Cart state → WhatsApp checkout: builds checkout link
- Storefront page → Hair-care quiz: offers quiz
- Hair-care quiz → Quiz logic: uses quiz logic
- Storefront page → Customer reviews: shows reviews
- Customer reviews → Site content config: reads reviews (evidence: `components/sections/reviews.tsx`)
- Storefront page → Newsletter signup: offers signup
- Newsletter signup → Newsletter endpoint: submits email (evidence: `README.md`)
- Product detail view → Product education data: uses detail content
- Product education data → Product catalog: reads product data (evidence: `lib/product-detail.ts`)
- Product detail view → Wishlist: offers wishlist
- Root layout → Product structured data: generates structured data (evidence: `app/layout.tsx`)