# SAMYTH — Crème Capillaire Protéinée · Landing Page

Premium, high-converting one-page e-commerce landing page for **SAMYTH Hair Care Protein Cream**.
Luxury cosmetic aesthetic (glassmorphism, soft gradients, rounded cards), fully responsive and **mobile-first**, built with vanilla web technologies — **no frameworks**.

---

## ✨ Features

- **Hero** with animated gradient, floating product, parallax (GSAP) and glass badges
- **Benefits** — 4 premium hover cards + animated counters
- **Ingredients** — Nid d'Oiseau, Acides Aminés, Protéines (real photos)
- **Before / After** — interactive drag comparison slider
- **Why Choose Us** — responsive checklist grid
- **Testimonials** — auto-playing SwiperJS carousel
- **Price** — premium dark card with pulsing CTA
- **Order Form** — quantity selector, live total, full JS validation, success popup (no backend)
- **FAQ** — smooth accordion
- **Footer** — trust badges + social icons
- **Sticky mobile bottom bar** (price + Commander)
- SEO: meta, Open Graph, Twitter Card, JSON-LD structured data, favicon
- Performance: lazy loading, preloaded hero image, AOS scroll reveals

---

## 🛠 Tech Stack

| Purpose      | Library                          |
|--------------|----------------------------------|
| Markup       | HTML5                            |
| Styling      | Tailwind CSS + custom `style.css` |
| Logic        | Vanilla JavaScript (`script.js`) |
| Scroll anims | AOS                              |
| Motion       | GSAP + ScrollTrigger             |
| Carousel     | SwiperJS                         |
| Icons        | Lucide                           |
| Fonts        | Cormorant Garamond + Manrope     |

> ✅ **Works 100% offline.** All libraries **and the fonts** are vendored locally in
> `assets/vendor/` — no internet connection or CDN is required. Just open `index.html`.
> (To update a library, replace the matching file in `assets/vendor/`.)

---

## 🎨 Design Tokens

| Token       | Value     |
|-------------|-----------|
| Primary     | `#E39A14` |
| Dark        | `#3A2208` |
| Background  | `#FFF9F1` |
| Secondary   | `#F8EFE3` |
| Accent      | `#FFB000` |

---

## 📁 Project Structure

```
cream protein/
├── index.html          # Page markup + SEO + structured data
├── style.css           # Custom luxury styles & animations
├── script.js           # Interactions, validation, sliders
├── README.md
└── assets/
    ├── favicon.png / favicon-32.png
    └── img/
        ├── hero-lifestyle.png  # Hero (woman + jar)
        ├── showcase-badges.png # Product showcase (jar + ingredients)
        ├── progression.png     # Results — 3-stage hair progression
        ├── salon.png           # Professional / salon section
        ├── ba-full.png         # Before/After (static proof)
        ├── ba-avant.png / ba-apres.png   # Before/After comparison slider
        ├── ing_nest.png / ing_honey.png / ing_cream.png  # Ingredients
        ├── model.png / results-trio.png / before.png / after.png  # Gallery
        ├── testi1-3.png        # Testimonial avatars
        ├── hero-pot.png        # Order summary thumbnail
        ├── og-image.jpg        # Social share image
        └── poster-main.png / poster-info.png  # Full product posters (gallery)
```

> **Every image** in `assets/img/` is used somewhere on the page (hero, showcase,
> results, professional, gallery, testimonials or order summary).

All product imagery was **automatically extracted and cropped** from the two source
images provided in this folder (`ChatGPT Image 30 juin 2026...png`). No stock or
placeholder images are used.

---

## 🚀 Run Locally

It's a static site — just open `index.html`, or serve the folder:

```bash
# Python
python -m http.server 5230

# Node
npx serve .
```

Then visit `http://localhost:5230`.

---

## 🔌 Order Form → Google Sheet (connected)

The order form posts each order to a **Google Apps Script Web App**, which appends a row
to the linked Google Sheet. The endpoint is set in `script.js`:

```js
const SHEET_ENDPOINT = 'https://script.google.com/macros/s/AKfycb…/exec';
```

**Payload → sheet columns (B–F):**

| JSON key        | Source field      | Sheet column |
|-----------------|-------------------|--------------|
| `Customer_Name` | Nom complet       | B            |
| `Phone`         | Téléphone         | C            |
| `address`       | Adresse complète  | D            |
| `Quantity`      | Quantité (1–3)    | E            |
| `total_price`   | quantité × 230000 | F            |

**Why `no-cors` / `text/plain`:** Apps Script Web Apps don't return CORS headers, so a
normal JSON `fetch` would fail a CORS preflight. The request is sent as a *simple* request
(`Content-Type: text/plain`, `mode: 'no-cors'`); Apps Script reads the JSON via
`e.postData.contents`. The response is opaque, so a resolved fetch is treated as success
(the button shows a spinner during submit and the success popup appears on completion).

**To change the destination sheet:** deploy your Apps Script as a Web App (Execute as: *Me*,
Access: *Anyone*), then paste the new `/exec` URL into `SHEET_ENDPOINT`.

---

## 📱 Mobile-only layout

This landing page is built as a **mobile-only experience**. The page always renders the
mobile layout (Tailwind breakpoints are disabled in the config) and is centered as a
**phone-width column (max 480px)** on larger screens, sitting on a soft backdrop like a
device preview. No horizontal scroll at **320 / 360 / 390 / 412 px**, large tap targets,
readable typography and a sticky bottom CTA bar.

To re-enable a full desktop layout later, remove the `screens: { … }` override in the
`tailwind.config` block of `index.html` and drop the `.app-shell` wrapper.

---

## 📝 Notes

- Tailwind runs from the locally vendored Play CDN build (`assets/vendor/tailwind.js`).
  For a production build you can compile Tailwind via the CLI/PostCSS and purge unused
  classes to shrink the payload.
- Price: **230.000 GNF** — Livraison gratuite à Conakry.

© SAMYTH Hair Care — All rights reserved.
