ID: exam-bot-ai-study-assistant Category: EdTech / AI Study Assistant Hero Type: hero Create a single-file HTML+CSS+vanilla-JS hero section with the following exact specifications: ## Tech Stack * Deliverable filename: `exam-bot-hero.html` * Plain HTML \+ CSS \+ vanilla JS. No frameworks, no build step. * Fonts — literal copy-pasteable block: \ \ \ - DM Sans (400/500/700) → all UI text: nav, buttons, hero copy, card labels/price-equivalent text - Poppins (400/700) → the small file-card description paragraphs only * Global reset: \*{ margin:0; padding:0; box-sizing:border-box; } html, body{ width:100%; height:100%; overflow:hidden; font-family:'DM Sans', sans-serif; color:\#fff; } ## Canvas & Scaling * True fullscreen, edge-anchored page. No fixed design canvas, no `transform:scale()`. * Do NOT add `transform:scale(...)` anywhere on this page and do NOT wrap content in a fixed-size `.stage-wrap`/`.stage` pair. * `.stage{ position:fixed; inset:0; overflow:hidden; background:#000; }` is the fullscreen root. * Background is a **video**, not a photo: `.bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }`, rendered as `

`. `autoplay` requires `muted` to work in every browser — never drop `muted`. * A bottom fade-to-black sits above the video: `position:fixed; left:0; bottom:0; width:100%; height:152px; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%); z-index:2; pointer-events:none;` * Header uses `left:40px; top:22px; right:50px` (edge-anchored both sides, NOT centered) so it stays pinned at any viewport width. * Hero title/subtitle anchor from `left:124px` only (not centered) — top offsets are flat px (`top:115px` / `top:270px`), not tied to any other element. * The bottom-left icon rail \+ caption row is `left:43px; bottom:29px; right:44px` (bottom-anchored, not top) since it sits near the viewport's bottom edge. * The three file cards and the upload button are **top-anchored with flat px values** (`top:354.47px` … `top:583.71px`) — they are NOT tied to the hero title's height, so if the title copy changes length, re-check these offsets don't collide with the subtitle above them. ## Design Tokens \--green: \#168B52; \--accent: \#91EB8A; \--pill: rgba(255,255,255,0.12); \--text-72: rgba(255,255,255,0.72); \--text-60: rgba(255,255,255,0.6); Font sizes used: 70px (title) / 20px / 16px / 15.7px / 11px. Card corner radius: 18.8px. Pill/circle radius: 999px / 25px (buttons). ## Elements (background first, then header, then hero copy, then bottom caption row, then the three floating cards, then the upload button — visual/DOM order) ### 1\. Background video * Full-bleed, `object-fit:cover`, `autoplay muted loop playsinline`. * Asset (promptsites.net, permanent): `https://api.promptsites.net/s3/promptsites/previews/110fa7c9-ff47-46df-b4db-f77601fef455.mp4` * Do NOT reintroduce a static background photo, gradient wash, or blurred color-dodge glow blobs — this design intentionally has **no** decorative background layers besides the video and the bottom fade. ### 2\. Header — `position:fixed; left:40px; top:22px; right:50px; z-index:10;` flex row, `justify-content:space-between; align-items:center; gap:44px;` Two children: - **`.header-nav`** (flex:1, flex row, `justify-content:space-between`): - **`.header-left`** (flex, gap:66px): - Logo icon, 18×18px. Asset: `https://api.promptsites.net/s3/promptsites/previews/b35ac67d-21ab-4e9e-a75f-1c0d3698a5f9.png` - `.nav-pill` (flex, gap:32px), four links, `font-size:16px; line-height:24px; text-transform:capitalize; color:var(--text-72);` — hover: `color:#fff;` (transition 0.2s): **features**, **how it works**, **pricing**, **about**. - **`.header-auth`** (flex, gap:8px): two pill buttons, `height:44px; padding:10px 20px; border-radius:999px; background:var(--pill); color:#fff; font-size:16px; text-transform:capitalize;` — hover: `background:rgba(255,255,255,0.22)`: **Log In**, **Sign Up**. - **`.header-rail`** (flex column, gap:16px, align-items:center): three 18×18px icons, `opacity:0.85`. Assets: `https://api.promptsites.net/s3/promptsites/previews/d623e490-a7aa-408e-b8bc-8fea5ee1dd8b.png`, `https://api.promptsites.net/s3/promptsites/previews/3d7a6721-052b-4e9a-b5a0-2ffa432641e5.png`, `https://api.promptsites.net/s3/promptsites/previews/ea9c2502-d51a-4776-8ded-f9ccb844b9f3.png`. * **Fragile coupling:** the middle rail icon asset is reused verbatim in the bottom-left rail (element 4\) — same file, two places. Keep them pointing at the same asset if either is swapped. ### 3\. Hero title — `position:fixed; left:124px; top:115px; width:472px; z-index:10;` * `font-size:70px; line-height:70px; letter-spacing:-3.4px; font-weight:400; white-space:nowrap;` * Exact copy, split across two lines via `
` (NOT natural wrap): **"Exam Bot AI"** (white) then **"Study Assistant"** (gradient). * `white-space:nowrap` is required on the container — with a plain space instead of `
`, font-metric differences between environments can wrap "Exam Bot AI" itself onto two lines and push the whole block down into the subtitle. Do NOT remove the explicit `
` in favor of natural wrapping. * `.accent` (the "Study Assistant" line): `background:linear-gradient(90deg, #91EB8A 0%, rgba(145,235,138,0.5) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;` * **Fragile coupling:** `letter-spacing:-3.4px` is deliberately tight — Figma's own inspector was misleading here (a per-span override of `-0.64px` looked more "correct" but is actually a stray value from an unrelated text style). Do NOT loosen this tracking; it was tuned specifically to keep "Exam Bot AI" from wrapping. ### 4\. Hero subtitle — `position:fixed; left:124px; top:270px; width:446px; z-index:10;` * Exact copy: **"Examix is your virtual assistant that simplifies the research process effortlessly."** * `font-size:20px; line-height:24px; color:#fff;` ### 5\. Bottom-left rail \+ caption — `position:fixed; left:43px; bottom:29px; right:44px; z-index:10;` flex row, `justify-content:space-between; align-items:center;` - `.bottom-rail` (flex, gap:14px): three 18×18px icons, `opacity:0.85`. Assets: `https://api.promptsites.net/s3/promptsites/previews/bce05995-db47-4574-8c95-01d39c3eb752.png`, `https://api.promptsites.net/s3/promptsites/previews/3d7a6721-052b-4e9a-b5a0-2ffa432641e5.png` (same asset as header element 2), `https://api.promptsites.net/s3/promptsites/previews/2c782bcc-dac8-4ff0-890f-9b60fc7cbf7d.png`. - `.bottom-caption` (flex, gap:18px, `max-width:447px`): a 13.66×13.66px icon (`https://api.promptsites.net/s3/promptsites/previews/30505321-3a4b-4bef-8b7a-700d71e2004b.png`, `flex-shrink:0`) \+ paragraph, `font-size:20px; line-height:24px; color:#fff;`, exact copy: **"Upload your file to Examix and it will help you prepare for the exam quickly and painlessly."** ### 6\. Floating file cards — Figma's rotated-bounding-box technique Each card is built as an **outer flex-centered box sized to the card's rotated footprint**, containing the actual **unrotated** card centered inside it, rotated around its own center via a CSS custom property `--rot`. This is not optional set-dressing — get it wrong and the rotation pivots from the wrong point and the card drifts off its intended position. .card-box{ position:fixed; display:flex; align-items:center; justify-content:center; z-index:10; pointer-events:none; } .file-card{ width:211.893px; backdrop-filter:blur(31.328px); background:rgba(255,255,255,0.08); border-radius:18.8px; padding:18.8px; display:flex; flex-direction:column; gap:17.2px; pointer-events:auto; } Card internals (identical structure for all three): - `.row` (flex, `justify-content:space-between`): file-type label (`font-size:15.7px; line-height:18.8px;`) \+ a 26.6×26.6px icon slot (folder-icon image at 100%×100%, plus a small overlaid glyph image positioned absolutely inside it — see per-card values). - `.desc` (Poppins, `font-size:15.7px; line-height:18.8px;`, bold spans via `` for emphasis words, `.dim` span at `color:rgba(255,255,255,0.7)` for de-emphasized text). **Card 1 — PNG** (`#box-png`: `left:142px; top:354.47px; width:233.93px; height:279.59px;` / `#card-png`: `height:262.12px; --rot:-5deg;`) - Folder icon asset: `https://api.promptsites.net/s3/promptsites/previews/dd79b129-5b3a-440d-b743-decb0c3c1610.png`; overlay glyph: `https://api.promptsites.net/s3/promptsites/previews/45998587-19b8-4500-b382-5b36b7f061d0.png` at `position:absolute; width:54%; height:54%; left:23%; top:33%;` - Label: **PNG File**. Copy: **"Just upload your PNG to instantly start analyzing, sharing, or securely saving it."** **Card 2 — DOC** (`#box-doc`: `left:204.4px; top:368.33px; width:229.32px; height:226.92px;` / `#card-doc`: `height:209.24px; --rot:5deg;`) - Folder icon asset: `https://api.promptsites.net/s3/promptsites/previews/83d47cf0-bdf5-49f0-be2b-903a25e04b62.png`; overlay glyph: `https://api.promptsites.net/s3/promptsites/previews/879bcd37-28dd-48f6-b45f-939cfdd2a4e2.png` at `position:absolute; width:38%; height:26%; left:26%; top:44%;` - Label: **DOC File**. `.desc.small` (11px): **"Easily upload your PDF file to begin analyzing, sharing, or storing it securely in seconds."** **Card 3 — PDF** (`#box-pdf`: `left:174.21px; top:415.32px; width:211.89px; height:209.24px; overflow:hidden; border-radius:18.8px;` / `#card-pdf`: `height:209.24px; position:relative; z-index:1; background:rgba(255,255,255,0.08); --rot:0deg;`) - Folder icon asset: `https://api.promptsites.net/s3/promptsites/previews/6ae6b557-85a3-45d2-91c4-cc96c9a2945b.png` (no overlay glyph on this one). - Label: **PDF File**. Copy: **"Easily upload your PDF file to begin analyzing, sharing, or storing it securely in seconds."** - Do NOT add a decorative background graphic behind this card that isn't fully contained by `#box-pdf`'s `overflow:hidden` — an earlier iteration of this design had one and it overflowed the rounded corners badly. ### 7\. Upload button — `position:fixed; left:142.88px; top:583.71px; width:274.12px; height:70.49px; z-index:11;` * `background:#fff; border:none; border-radius:25px; overflow:hidden;` centers `Upload File` (`font-weight:600; font-size:15.7px; color:#000;`). * Hover: `transform:scale(1.06); color:#fff; box-shadow:0 12px 30px rgba(145,235,138,0.4);` * Hover fill is a `::before` pseudo-element, `background:linear-gradient(90deg, var(--accent), var(--green)); transform-origin:center;`, resting at `transform:scaleX(0)` and animating to `scaleX(1)` on hover (0.35s ease) — a center-out horizontal wipe, not a plain fade. ## Interactive (JS) Behavior **Title typewriter** — types "Exam Bot AI" then "Study Assistant" in sequence on page load, character by character, no blinking cursor: (function(){ var reduceMotion \= window.matchMedia('(prefers-reduced-motion: reduce)').matches; var line1 \= document.getElementById('typeLine1'); var line2 \= document.getElementById('typeLine2'); var text1 \= 'Exam Bot AI'; var text2 \= 'Study Assistant'; if (reduceMotion){ line1.textContent \= text1; line2.textContent \= text2; return; } function typeInto(el, text, speed, onDone){ var i \= 0; (function step(){ if (i \<= text.length){ el.textContent \= text.slice(0, i); i++; setTimeout(step, speed); } else if (onDone){ onDone(); } })(); } typeInto(line1, text1, 55, function(){ typeInto(line2, text2, 55); }); })(); The title markup must be `

` — empty spans that JS fills in. Do NOT pre-fill them with the final text in HTML; the reveal is the point. ## Animations Entrance sequence, in load order (no scroll-trigger — this all plays once on page load): 1. **Cards pop up, staggered, one after another** — each card starts below the viewport, small and rotated to its final angle, then bounces up into place: .file-card{ opacity:0; transform:translateY(90px) scale(0.6) rotate(var(--rot)); animation:cardPop 0.75s cubic-bezier(0.22, 1.6, 0.4, 1\) forwards; } \#card-png{ animation-delay:0.2s; } \#card-doc{ animation-delay:0.5s; } \#card-pdf{ animation-delay:0.8s; } @keyframes cardPop{ 0%{ opacity:0; transform:translateY(90px) scale(0.6) rotate(var(--rot)); } 65%{ opacity:1; transform:translateY(-14px) scale(1.05) rotate(var(--rot)); } 100%{ opacity:1; transform:translateY(0) scale(1) rotate(var(--rot)); } } 2. **Upload button wipes in from the center**, timed to finish right as the last card lands: .upload-btn{ clip-path:inset(0 50% 0 50% round 25px); animation:btnWipeIn 0.55s cubic-bezier(0.4, 0, 0.2, 1\) 1.15s forwards; } @keyframes btnWipeIn{ from{ clip-path:inset(0 50% 0 50% round 25px); } to{ clip-path:inset(0 0 0 0 round 25px); } } * **Do NOT write the `to` state as `clip-path:inset(0 0 0 0)` without `round 25px`.** `clip-path` does not inherit `border-radius` — omitting the rounding leaves the button permanently clipped to a sharp-cornered rectangle after the animation ends, which then makes the `::before` hover-fill (element 7\) visibly overflow past the button's rounded corners. This is a real bug that shipped once; both keyframe states must include the matching `round 25px`. 3. Title/subtitle animate via the JS typewriter in "Interactive (JS) Behavior" above, not CSS. * `prefers-reduced-motion: reduce` — cards and button render in their final resting state immediately, no animation: @media (prefers-reduced-motion: reduce){ .file-card{ opacity:1; animation:none; transform:rotate(var(--rot)); } .upload-btn{ clip-path:none; animation:none; } } ## Z-index Layering 1. `.bg-video` — z-index: 0 2. `.bottom-fade` — z-index: 2 3. `.header` — z-index: 10 4. `.hero-title` / `.hero-sub` — z-index: 10 5. `.bottom-row` — z-index: 10 6. `.card-box` (all three) — z-index: 10 7. `#card-pdf` — z-index: 1 (local, inside its own `#box-pdf` stacking context) 8. `.upload-btn` — z-index: 11 (above the cards, since it visually sits in front of/below them) ## Notes * **Fragile coupling — rotated-bounding-box cards.** Each card's outer `.card-box` dimensions (e.g. `233.93×279.59` for the PNG card) are the *rotated* footprint of a `211.893px`\-wide unrotated card at `--rot:-5deg`, not an arbitrary padding value. If you resize a card, you must recompute its bounding box's width/height to match the new rotated footprint, or the flex-centering will visibly misplace it. * **Fragile coupling — `clip-path` \+ `border-radius`.** See the callout under Animations — any future `clip-path` added to `.upload-btn` must carry `round 25px` (or whatever the current border-radius is) or the rounded-corner hover fill breaks. * **Asset hosting:** all image/icon and video assets are hosted on permanent promptsites.net URLs (`https://api.promptsites.net/s3/promptsites/previews/...`). No Cloudinary or Figma temp URLs remain in this spec. Please ensure the output is a clean, production-ready single HTML file that renders pixel-identically to this spec, filling the entire browser viewport edge-to-edge at any window size with no letterboxing and no canvas scaling — every block must remain correctly pinned to its respective viewport edge via position:fixed.

AI bot assistant