# Web UI Kit — Keren Aliza Project

A high‑fidelity, interactive recreation of the Keren Aliza Project homepage at desktop (1440 px). All components are written as small, focused React functions you can lift into other prototypes.

## Run it

Open `index.html` — it boots a React + Babel sandbox in the browser and stitches the components below into a clickable, scrolling homepage. The store cart counter, "Listen" play buttons, newsletter form, language switcher and the article modals are all live (state‑only — nothing persists).

## Files

| File                     | What it is                                                    |
| ------------------------ | -------------------------------------------------------------- |
| `index.html`             | Demo shell — loads React + Babel + every component below       |
| `Header.jsx`             | Navy chrome bar + yellow menu band + utility rail              |
| `Hero.jsx`               | Black hero card with the artist's name, quote, CTA, pagination |
| `SectionTitle.jsx`       | Bold H2 with an inline magenta arrow link on the right         |
| `VideoGrid.jsx`          | "Music for the Soul" video grid with floating play buttons    |
| `AlbumGrid.jsx`          | Audio album cells with magenta play orbs                       |
| `StoreGrid.jsx`          | The 4‑up product card grid with cool‑white surfaces            |
| `Schedule.jsx`           | Concert calendar table with magenta highlighted next row       |
| `Reviews.jsx`            | Centered review carousel with magenta navigation arrows        |
| `ArticleGrid.jsx`        | "Статьи о скрипке" — 3 article excerpts with "Читать" CTAs    |
| `Sidebar.jsx`            | The cream sticky right column: news, newsletter, tags, partners |
| `Footer.jsx`             | Navy footer with logo, sitemap, search, contacts, socials      |
| `Icons.jsx`              | Inline SVG icon set used by every component                    |

## Scope

This is the **desktop web** kit. Mobile breakpoints exist in the Figma file (`mob1..mob11`) but are not included here — ask if you'd like them next.

The components are **mainly cosmetic recreations** — they're meant to be sliced into mockups, not shipped as production code. Forms log, they don't submit. The cart count goes up but doesn't track items. Etc.

## Visual fidelity notes

- The logo is rendered with `assets/logo.svg` (our recreation) — flag if you need an export of the original Figma vectors.
- Hero photography is the dark card variant (no photo behind) — matches the desktop home page exactly.
- Decorative star pattern behind the header band is approximated with a tiled SVG.
- Footer "DoReMi Music Gnomes" sub‑mark is rendered as a placeholder line — it's an illustration in the original.