# Baeshen v4 – Project Brief

---

## Client Overview

**Full Name:** AMS Baeshen & Co. (Ahmed Mohamed Saleh Baeshen & Co.)
**Type:** Saudi closed joint stock corporation
**Industry:** FMCG – Tea & Beverages (primary), Sugar
**Founded:** 1887 (family trading origins); officially registered **April 11, 1957**
**Headquarters:** Jeddah, Saudi Arabia
**Reach:** 14 MENA markets
**Old site:** https://baeshen.com/

---

## Brand Identity

### Taglines / Messaging
- "The Authentic House of Teas"
- "Each Brand Tells A Unique Success Story"
- "Without History, There Would be no Future"
- "We have grown from a small family business to a great company"
- "More than a century of experience in the Arabian marketplace"

### Mission
> "To Become a Market Leader in Providing Superior High-Quality Products."

### Vision
> "To Become a World-Class Saudi Tea Inspired Beverage Company Aiming for a Profitable Leading Position in Pan Arab Markets."

### Core Values
Ownership · Integrity · Passion · Quality · Excellence

### Tone
Heritage-focused, premium, legacy-driven, trustworthy, community-rooted.
Bilingual: English primary + Arabic (عربي).

---

## Product Brands

| Brand | Category | Notes |
|---|---|---|
| **Rabea** | Tea (bags + loose leaf) | Trademarked 1969. Top 100 Saudi brands 2013. Gulfood Award 2014. Site: rabea.com |
| **Abu Jabal** | Premium long-leaf loose tea | In market since **1920**. Flagship brand. Sources from Sri Lanka. Site: abujabal.sa |
| **Al Nahla** | Cubed sugar | Registered 1954. Regular, mini & novelty cubes. Sourced from France, Belgium, Germany. Site: alnahla.com |

---

## Company Timeline (key moments for heritage section)

| Year | Milestone |
|---|---|
| 1887 | Family trading dhows to India (rice, sugar, goods) |
| 1920 | Abu Jabal introduced to the Arabian market |
| 1954 | Abu Jabal & Al Nahla registered with Saudi authorities |
| 1957 | Official company registration (April 11) |
| 1958 | Introduced iconic tea glass to Saudi Arabia |
| 1969 | Rabea Tea brand registered |
| 1994 | Built Kingdom's largest tea factory in South Jeddah |
| 1998 | Launched Rabea Premium (first tea bag brand) |
| 2000 | Introduced Rabea Express |
| 2013 | Rabea named Top 100 Saudi Brand |
| 2024 | v4 premium website — a new era |

---

## Navigation (old site structure)
Home · Our Path · Our Products · Our People · Company Highlights · Contact Us
Sub-pages: Activities & Events · Latest News · Apply Now

---

## Visual Style (old site observations)
- SVG-based logo: `baeshen_logo1-01.svg` — circular icon design
- Flat SVG icons throughout (`icon1-01.svg`, `icon2-01.svg`, `icon3-01.svg`)
- Agricultural/heritage imagery: fields, tea leaves
- Clean corporate WordPress layout — **v4 should be a radical upgrade**
- No explicit brand hex colors extracted from old site

### Inferred Brand Color Direction (for v4)
Based on the tea/heritage identity:
- **Gold/Amber** — tea liquor, premium, heritage (`#C9A84C` primary)
- **Deep Green** — tea leaves, freshness (`#1A3A2A` for accents)
- **Dark Charcoal** — luxury, premium dark mode (`#0D0D0D` base)
- **Cream/Ivory** — warmth, heritage, paper (`#F7F3EC`)
- **Rich Brown** — earth, spice, tradition (`#4A2E1A` for depth)

---

## v4 Build Approach

**Phase 1:** Frontend only — HTML, CSS, Vanilla JS, GSAP, Three.js, Lenis
**Goal:** Stunning, immersive, premium feel. Radical upgrade from old site.
**Workflow:** User shares reference site links → implement section by section
**Served at:** `localhost/baeshen/v4/` via XAMPP

---

## Tech Stack

| Tool | Version | Purpose |
|---|---|---|
| GSAP | 3.12.5 | Animations, ScrollTrigger, CustomEase |
| Three.js | r134 | 3D scenes (hero particles, product viewer) |
| Lenis | 1.1.14 | Smooth scroll, integrated with GSAP ticker |
| Cormorant Garamond | — | Serif display font (elegance/heritage) |
| Inter | — | Sans UI font (clarity/modernity) |

---

## Folder Structure

```
v4/
├── index.html
├── CLAUDE.md
├── css/
│   ├── reset.css
│   ├── variables.css      ← brand tokens live here
│   ├── base.css
│   ├── components.css     ← preloader, cursor, nav, cards
│   ├── sections.css       ← hero, about, products, heritage, contact
│   ├── animations.css     ← reveal states, keyframes
│   └── responsive.css
├── js/
│   ├── utils.js
│   ├── cursor.js
│   ├── preloader.js
│   ├── nav.js
│   ├── lenis.js
│   ├── animations.js
│   ├── main.js
│   ├── scenes/
│   │   ├── hero-scene.js      ← Three.js particle field
│   │   └── product-scene.js   ← Three.js product ambient scene
│   └── components/
│       ├── marquee.js
│       ├── products.js        ← PRODUCTS array — update with real data
│       └── timeline.js        ← TIMELINE array — update with real data
└── assets/
    ├── images/
    ├── videos/
    ├── fonts/
    └── icons/
```

---

## Important Notes for Future Sessions

- **Products data:** Update `js/components/products.js` PRODUCTS array with real Rabea / Abu Jabal / Al Nahla product images once assets are available
- **Timeline data:** `js/components/timeline.js` TIMELINE array is pre-populated with real Baeshen history from above
- **Logo:** Recreate Baeshen circular SVG logo in assets/icons/ — do not use old site assets directly
- **Image placeholders:** All `about__image-placeholder` and `product-card__img` divs await real photography
- **Arabic support:** Plan `dir="rtl"` toggle for Arabic version — add `lang` switching logic to `nav.js`
- **Color corrections needed:** Initial `variables.css` was set for a vinegar brand — Baeshen is a **TEA company**; deep green accent (`--c-green: #1A3A2A`) should be added alongside gold
