Swell

# Build a website in the "Swell" style

You are building a production-ready website. Follow the design system below exactly and adapt the content to the project. The design comes from the Qalib library (design No. 217).

## 1. The project

- Name: [fill in]
- Type of site: [fill in]
- What it does: [fill in]
- Languages: Arabic and English: Arabic first (RTL) and a full English version (LTR) with a language switch
- Pages: One page with sections and anchor links
- Contact details: [fill in]
- Assets: No photos yet: use suitable placeholders and mark each one TODO for replacement.

## 2. Visual reference

- Live demo (Arabic): https://qalib.omardeek.tech/demos/swell/ar.html
- Live demo (English): https://qalib.omardeek.tech/demos/swell/en.html

Each demo is one HTML file with all its CSS in a <style> tag. Download the raw file (for example `curl -s <url>`), not a summary of it, and treat its CSS as the source of truth for spacing, sizes and effects. The demo's business and text are fictional: never copy them.

## 3. Design DNA: Interactive

Sites that move with their visitor: a photo that grows to fill the screen as you scroll, layers that follow the mouse, a light that reveals what lies underneath, a curtain that opens, sections read word by word. Every interaction has a still version that shows all the content to people who prefer less motion.

- **Typography:** Huge headlines in a strong display face (up to 7rem) on short lines, body text in a clear sans; the big words are part of the interaction.
- **Colour:** One strong background (very dark or very light) and a single vivid accent; the photos carry the rest of the colour.
- **Layout:** A full-screen hero that holds in place (sticky) while the scroll drives it, then regular sections broken by other pinned moments (a statement that lights up, a sideways rail of cards).
- **Shapes:** Pill buttons, large rounded photos that become full-bleed, floating cards with soft shadows.
- **Imagery:** Big, high-quality photos that work full screen, plus several smaller ones for layers and trails.
- **Motion:** Linked to the scroll and the pointer, not to time: a progress value from 0 to 1 drives the transforms, pointer movement is eased, buttons are magnetic; all of it stops with prefers-reduced-motion.
- **Details:** A progress bar along the top, a "scroll down" hint that fades once you start, a ring cursor that grows over links, counting numbers.
- **Avoid:** Scroll-jacking (never change or block the wheel), content that stays hidden without JavaScript, effects that get in the way of reading, heavy libraries for what CSS variables and requestAnimationFrame can do.

**This design in particular:** Sea mist and a sunset orange; the underwater photo grows with the scroll until it fills the screen, then a line about the sea lights up word by word.

## 4. Design tokens

```css
:root {
  --bg: #E6EFF1; /* page background */
  --surface: #FFFFFF; /* cards, panels, alternate sections */
  --ink: #0C2A36; /* main text */
  --muted: #4A6670; /* secondary text */
  --accent: #E8743B; /* buttons, links, highlights */
  --accent2: #0F6E83; /* second highlight */
  --line: #CBDDE2; /* rules and borders */
  --on-accent: #1A0B03; /* text on the accent colour */
  --radius: 22px;
}
```

- Colour scheme: light
- Fonts (available on Google Fonts and fontsource; self-host them):
  - Arabic headings: Aref Ruqaa (400, 700)
  - Arabic text: Readex Pro (300, 400, 600)
  - Latin headings: Fraunces (400, 600, 800)
  - Latin text: Outfit (300, 400, 600, 800)
- Type scale: h1: clamp(2.7rem, 6.2vw, 5.4rem) · h2: clamp(2rem, 4.2vw, 3.3rem) · h3: 1.25rem · text: 17px with 1.7 line height (Arabic 18px and 1.9) · max width 1200px · section spacing clamp(72px, 10vw, 136px)

## 5. Page structure

The demo shows a Dive centre. Build the sections with these visual treatments, in this order:

1. **Header**: A floating rounded "pill" menu with a frosted background, detached from the top edge.
2. **Hero**: A pinned hero: headline and lead at the top, a photo below in a rounded card that grows with the scroll to fill the screen, then the offer and buttons appear on it.
3. **Figures**: four very large numbers that count up as they scroll into view
4. **Main offering** «Courses»: a row of tall photo cards that slides sideways as you scroll down while the section holds still
5. **About** «About Marjan»: One very large statement held on screen, its words lighting up one after another as you scroll.
6. **Process** «Your first dive»: numbered steps in a row with big numbers
7. **Gallery** «Under water»: a masonry wall of photos with mixed heights
8. **Pricing** «Packages»: pricing cards with the featured option highlighted, a feature list and a button
9. **FAQ** «Questions»: an accordion of questions with the first one open
10. **Testimonials** «Divers say»: a row of testimonial cards drifting sideways, pausing on hover
11. **Contact** «Book»: A large card on a tinted background: contact details on one side, the hours and button on the other.
12. **Footer**: the business name set huge across the footer, above the columns

## 6. Motion

Rich: the headline rises word by word, 90ms staggered reveals, magnetic buttons, parallax photos and counters; all of it off under prefers-reduced-motion.

**Decorations in this design:**
- a thin progress bar along the top edge showing the scroll position
- a custom ring cursor that grows over links (fine pointers only)

**Interactions:** Build them without libraries. Pinned sections are tall, with a stage inside that is `position: sticky; top: 0; height: 100svh`. One requestAnimationFrame-throttled scroll handler writes each section's progress p (0 to 1) to a CSS variable, and CSS turns it into transforms, `clip-path` and opacity with `calc()`. Pointer effects write eased variables (−1 to 1, and pixel positions) in a single animation loop that runs only while the section is on screen; with no pointer for two seconds the values drift slowly on their own, so touch screens see the effect too. Pin only when JavaScript runs and `prefers-reduced-motion` is not set; otherwise every section is a still layout with all of its content visible (the zoom photo framed with its call to action, the curtain open, the statement fully lit, the rail scrollable by hand). Never change the scroll speed or block the wheel.

- Zoom: make the hero a tall section (about 260vh) holding a sticky stage of 100svh. Progress p is 0 at the top of the section and 1 when its end reaches the bottom of the screen. The photo fills the stage but is clipped with `clip-path: inset()`: it starts as a rounded card just below the headline and opens to the full screen as p nears 1 (the insets and corner radius multiplied by `1 − p`), while the image inside scales from 1.18 to 1. The headline moves up and fades out by p ≈ 0.4; the call to action (the offer line and buttons) fades in over the photo after p ≈ 0.6 on a dark gradient for legibility. A small "scroll down" hint fades as soon as scrolling starts.
- Statement: the about section is tall (about 220vh) with a sticky stage holding the section label, a small heading and the first paragraph set very large in the display face. Split the paragraph into words; each word's opacity is `clamp(0.16, p × (words + 8) − index, 1)`, so the words light up one after another as you scroll, over a thin progress line.
- Rail: a section with a sticky stage holding the heading and a single row of tall photo cards wider than the screen. Make the section as tall as the screen plus the row's overflow (`100vh × 1.15 + overflow`) and translate the row by `p × overflow` toward the start side (rightward in Arabic, leftward in English), with a progress line below. Without motion the row simply scrolls sideways by hand.

## 7. Technical requirements

- **Stack:** Choose the stack that fits the project; prefer static HTML, CSS and JavaScript unless it needs more.
- Semantic HTML, mobile first, adapting at 360, 768, 1024 and 1440px, with no horizontal scrolling.
- Arabic: <html lang="ar" dir="rtl">, CSS logical properties (margin-inline-start, inset-inline-end…), mirrored directional icons, never letter-space or uppercase Arabic, and Arabic text at 18px or more.
- Accessibility: WCAG AA contrast, visible focus states, alt text on images, and all motion off under prefers-reduced-motion.
- Performance: self-hosted fonts with font-display: swap and only the weights and subsets in use, WebP or AVIF images with set dimensions, lazy loading below the first screen, and no heavy libraries for simple effects.
- SEO: a title and description for every page, Open Graph, a favicon, and LocalBusiness structured data where relevant.
- Buttons: WhatsApp links as https://wa.me/<number>, phone as tel:, email as mailto:.

## 8. Delivery

1. Start with the tokens and base styles, then build the sections from top to bottom.
2. Compare the result with the live demo at phone and desktop widths before you finish.
3. Finish with how to run the site and how to deploy it.

Paste it into Claude Code inside a new project folder.