stellar-launch

What this skill does

# Stellar Launch — Launchex Awards Landing Page

Produce a premium **awards / venture-prize landing page** ("Launchex Awards") with an editorial, angular, clip-path-driven aesthetic. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy, video URLs, and image URLs; do **not** rewrite the CSS or invent a new visual language. The seed already encodes the exact shell, fonts, colors, clip-path chamfers, section layout, and responsive behavior described below.

This is the authoritative build brief. Follow it exactly — the named colors, fonts, clip-paths, video/image URLs, and breakpoints are locked.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed). Vanilla HTML/CSS plus one small `<script>` of vanilla JS for the scroll-driven page indicator.
- If the user explicitly asks for a **React + Vite + Tailwind + TypeScript** project, port the seed faithfully: same shell, same tokens, same markup structure, same clip-paths. Use **lucide-react** for the `Sparkles` and `ArrowUpRight` icons only. Do not change the design while porting.

## Fonts

Load via `<link>`:
- Google Fonts **Inter**: weights 300, 400, 500, 600, 700 (`https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap`).
- **TT Firs Neue** (display headings): `https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue`.

CSS:
```
html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: #ffffff; }
.font-firs { font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
```

## Color palette — locked

- Primary dark: `#154359`
- Teal accent: `#066377`
- Light background (submissions): `#F0F0F0`
- Lighter background (about): `#F0F5F7`
- Gradient text: `linear-gradient(294deg, #185B7B 20%, #4BBDF0)`
- Nomination stroke: `rgba(6, 99, 119, 0.25)`

## Outer shell structure

- `.shell`: `height: 100vh`, `background: #fff`, padding `12px` (mobile) / `20px` (≥640px).
- `.frame`: `position: relative; width:100%; height:100%; overflow:hidden; background:#fff`, `border-radius: 28px` (mobile) / `36px` (≥640px). This rounded container **clips all content**.
- `.scroll`: `position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden`, with `.no-scrollbar`. Sections live here; persistent overlays live **outside** `.scroll` but inside `.frame`.

## Section 1 — Hero

- `min-height: calc(100vh - 40px)`, `position: relative; overflow: hidden`.
- Background `<video>` (`autoplay loop muted playsinline`, `object-fit: cover`, fills the section, `z-index:0`):
  `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260511_151648_2bdfbd1c-6bde-4f5d-a967-f57cbced97f6-fb3729.mp4`
- Overlay gradient on the video (`z-index:1`): `linear-gradient(to bottom, rgba(0,0,0,0.10), transparent 50%, rgba(0,0,0,0.20))`.
- **Top bar** (`z-index:20`, flex row, justify-between, padding `20px 16px 0` → `32px 40px 0` at ≥640px):
  - Left: logo = lucide `Sparkles` (20px → 24px, strokeWidth 1.5, white) + "launchex" (14/15px, font-semibold, tracking-tight) and "awards" below (10/11px, font-light, opacity 0.9, `-mt-0.5`). All white.
  - Right: CTA. Teal `#066377` bg, white text, 10/11px, uppercase, letter-spacing `0.14em`, font-medium, padding `12px 18px`. Chamfered via `clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)`. Contains lucide `ArrowUpRight` (14px) that shifts `translate(2px,-2px)` on hover; button `hover: brightness(1.25)`. Label "Send in your entry form" ≥640px, "Enter" on mobile.
- **Center content** (`z-index:10`, flex-col, items-center, text-center, color `#154359`, padding-top `128px` → `160px`, padding-bottom `96px`):
  - Eyebrow "Prize for ventures": 11/12px, uppercase, letter-spacing `0.3em`, font-medium, margin-bottom 24px, opacity 0.9.
  - Heading "launchex" `<br/>` "prizes": `.font-firs`, font-normal, letter-spacing `-0.04em`, line-height `0.9`, sizes 48px / 76px (≥640) / 100px (≥1024) / 120px (≥1280).
  - Subtext "Bridging visions with reality, helping ventures soar up to the stars": 12/14px, uppercase, letter-spacing `0.22em`, font-medium, max-width 28rem, line-height 1.8, opacity 0.9, margin-top 32px.

## Section 2 — Submissions (nominations)

- Background `#F0F0F0`, padding `80px 24px` → `112px 40px`, `position: relative; overflow: hidden`.
- Layout: `max-width: 64rem; margin: 0 auto`. Mobile = stacked, order **center → left → right**. ≥1024px = 3 columns (left | center | right), gap 40px → 48px; left and right columns pushed down with `margin-top: 144px` (`lg:mt-36`).
- **Center column:**
  - Kicker "[submissions]" (12px, letter-spacing `0.24em`, uppercase, color `#154359`).
  - Title "submissions" below (`.font-firs`, 44px → 54px, font-semibold, tracking-tight, uppercase, `#154359`).
  - Square video below (margin-top 24px → 32px), 220px → 380px → 460px, `object-fit: cover`, `autoplay loop muted playsinline`:
    `https://plugin-assets.open-design.ai/plugins/stellar-launch/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667-c6b971.mp4`
- **Left nominations** (3 cards): "Lead" / "AI venture for commerce" · "Emerging innovations" / "in food commerce" · "The finest innovations" / "for learners and young students".
- **Right nominations** (3 cards): "Innovations for advanced" / "career training" · "The finest innovations" / "in finance" · "Categories" / "coming soon".
- **NominationCard**: `<a>`, `max-width: 20em`, `height: 5em`, `hover: translateY(-2px)`. Border is an SVG chamfered rectangle `polygon(points="14,0 100,0 100,86 86,100 0,100 0,14")`, `viewBox="0 0 100 100"`, `preserveAspectRatio="none"`, stroke `rgba(6,99,119,0.25)`, stroke-width 1, `vector-effect="non-scaling-stroke"`, fill none. Centered text: title 13px font-semibold, subtitle 12px font-normal opacity 0.8, color `#154359`.
- **Bottom fade** (`pointer-events:none; position:absolute; bottom:0; width:100%; z-index:10`, height 160px → 224px): `linear-gradient(to bottom, rgba(240,245,247,0) 0%, rgba(240,245,247,0.7) 60%, #F0F5F7 100%)`.

## Section 3 — About the founders

- Background `#F0F5F7`, padding `80px 24px` → `112px 40px`, `max-width: 80rem; margin: 0 auto`, relative + overflow hidden.
- **Top row** (color `#154359`): flex-col mobile, flex-row at ≥1024px (justify-between).
  - Left heading "About the" `<br/>` "founders": `.font-firs`, 36px / 48px / 54px, font-semibold, uppercase, tracking-tight, line-height 0.95.
  - Right (max-width 36rem): two paragraphs (17/18px, line-height 1.5):
    - "Launchex.Hub is a platform that is part of a portfolio of companies Launchex, for sourcing and showcasing groundbreaking innovations."
    - "Launchex.Hub's mission is to offer every local-language innovator the chance to reshape our world with their pioneering creation."
  - Link "Launchex.Hub website" → `https://base.launchex.vc/` (margin-top 24px, 14px, font-medium). Arrow in a chamfered 32×32 box, border `#154359`, `clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`; `hover: translateY(-2px)`. Use lucide `ArrowUpRight`.
- **Stats grid** (margin-top 56px): 1 col / 2 col (≥768px) / 3 col (≥1024px), gap 20px. Card 2 pushed down with `margin-top: 96px` (`lg:mt-24`) at ≥1024px.
- Each stat card:
  - Outer: `width:100%; height: 280px → 340px; background-color: rgba(255,255,255,0.8); padding: 1.5px` (acts as border), clip-path applied.
  - Inner image: `width/height 100%; overflow:hidden; background-size: cover; background-position: center; mix-blend-mode: plus-darker`, same clip-path.
  - Text overlay (absolute): value `.font-firs`, font-semibold, uppercase, 36px → 52px, gradient text `linear-gradient(294deg, #185B7B 20%, #4BBDF0)` (`background-clip: text; color: transparent`). Description 14p