Keynote

# Build a website in the "Keynote" 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. 222).

## 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/keynote/ar.html
- Live demo (English): https://qalib.omardeek.tech/demos/keynote/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:** Stage black and hot pink; a spotlight follows the pointer over the hall, and the speakers pass sideways before the programme.

## 4. Design tokens

```css
:root {
  --bg: #08080C; /* page background */
  --surface: #12121A; /* cards, panels, alternate sections */
  --ink: #F4F4F6; /* main text */
  --muted: #9E9EAE; /* secondary text */
  --accent: #FF3D6E; /* buttons, links, highlights */
  --accent2: #3DDCFF; /* second highlight */
  --line: #22222E; /* rules and borders */
  --on-accent: #0A0A0E; /* text on the accent colour */
  --radius: 22px;
}
```

- Colour scheme: dark
- Fonts (available on Google Fonts and fontsource; self-host them):
  - Arabic headings: Kufam (400, 700, 800)
  - Arabic text: IBM Plex Sans Arabic (400, 600, 700)
  - Latin headings: Dela Gothic One (400)
  - Latin text: Inter Tight (500, 700, 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 Conference. Build the sections with these visual treatments, in this order:

1. **Header**: A sticky bar: logo at the start, then the links, and a call-to-action button at the end; it collapses into a menu button on phones.
2. **Hero**: A dark full-screen hero: a grayscale photo and an outlined headline; the pointer carries a circle of light that reveals the colour photo and the filled headline underneath.
3. **Running text band**: a band of short words running continuously sideways
4. **About** «About»: A large centred quote with a signature, then the heading and paragraphs in two columns, then a strip of two photos.
5. **Figures**: four very large numbers that count up as they scroll into view
6. **Extra section** «Speakers»: a row of tall photo cards that slides sideways as you scroll down while the section holds still
7. **Schedule** «Agenda»: a vertical timeline: times on one side, a line with dots
8. **Pricing** «Tickets»: pricing cards with the featured option highlighted, a feature list and a button
9. **Logos**: a row of client or partner names set as wordmarks
10. **FAQ** «Questions»: an accordion of questions with the first one open
11. **Contact** «Contact»: 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.

- Spotlight: two identical copies of the hero stacked exactly. The bottom one shows the photo in grayscale at about 30% brightness and the headline as an outline; the top one (`aria-hidden`, no links) shows the photo in full colour and the headline filled with the accent colour, masked with `mask-image: radial-gradient(circle R at x y, #000 40%, transparent 100%)`, where x and y follow the pointer, eased (about 0.2 per frame), and R is about 17vw; pressing widens it to about 34vw with a transition (register the radius with `@property`).
- 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.