How dkayush7373/herbal works
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: page.tsx Storefront page · cart-context.tsx Cart state · layout.tsx Root layout · bottle-rail.tsx Bottle rail
Components 22
Storefront experience
- Storefront page
app/page.tsx - Bottle rail
components/rail/bottle-rail.tsx - Product detail view
components/rail/detail-view.tsx - Bottle rendering
components/bottle-image.tsx - Rail physics
lib/physics/use-jiggle-engine.ts - Spring calculations
lib/physics/jiggle.ts
Cart and checkout
- Cart state
lib/cart-context.tsx - Cart drawer
components/cart/cart-drawer.tsx - Referral capture
lib/referral.ts - WhatsApp checkout
Product data
- Product catalog
lib/products.ts - Product education data
lib/product-detail.ts
Education and engagement
- Hair-care quiz
components/sections/quiz.tsx - Quiz logic
lib/quiz.ts - Customer reviews
components/sections/reviews.tsx - Newsletter signup
components/sections/newsletter.tsx - Wishlist
components/product-modal/wishlist-button.tsx
Shared platform
- Site content config
lib/site.ts - Product structured data
lib/jsonld.ts - Root layout
app/layout.tsx
Other components
- Shopper
- Newsletter endpoint
Connections 23
- Shopper → Storefront page: visits
README.md - Storefront page → Bottle rail: presents
- Bottle rail → Product detail view: opens details
- Bottle rail → Rail physics: uses motion
README.md - Rail physics → Spring calculations: calls calculations
lib/physics/use-jiggle-engine.ts - Rail physics → Bottle rendering: uses rest angles
lib/physics/use-jiggle-engine.ts - Storefront page → Cart state: offers cart
- Root layout → Cart state: provides context
app/layout.tsx - Root layout → Cart drawer: renders
app/layout.tsx - Cart drawer → Cart state: reads cart
components/cart/cart-drawer.tsx - Cart state → Product catalog: looks up prices
lib/cart-context.tsx - Cart state → Referral capture: captures referral
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
components/sections/reviews.tsx - Storefront page → Newsletter signup: offers signup
- Newsletter signup → Newsletter endpoint: submits email
README.md - Product detail view → Product education data: uses detail content
- Product education data → Product catalog: reads product data
lib/product-detail.ts - Product detail view → Wishlist: offers wishlist
- Root layout → Product structured data: generates structured data
app/layout.tsx