GoodCase.aiAI News · Radar↗AI Map↗Course · LearnPrompt↗
ProjectsGoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
GoodCase.ai
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Projects

AI News · Radar ↗AI Map ↗Course · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Loading…

GoodCase.ai · AI Prompt Case Collection
DSH PluginsChangelogFeedback
ModelsCreatorsSeedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKlingQwen ImageGPT Image 1.5MiniMax H3

AI Workflow Agents

Creator · MotionSites

AI Coding (UI)MotionSitesAdded 08/13/2026Independently retested#not-rerun#web-ui
View original source ↗

Prompt

The reproduction prompt keeps the original and adds runtime, asset and acceptance requirements. These additions are not the author’s words.

Build a single-page hero landing page for a product called "Axon" — a platform that deploys digital workers for mundane workflows. The page is a full-viewport hero section with a looping background video and overlaid content.

**Fonts:**
- Load Google Fonts: `Instrument Serif` (regular + italic) and `Inter` (weights 400, 500, 600).
- Body font: `Inter`, color `#1B133C`.
- Heading font: `Instrument Serif`.

**Page structure (single full-screen section, 100vh):**

1. **Navigation bar** — centered at the top with `pt-4 md:pt-6` padding. A horizontal nav pill with `bg-white/70 backdrop-blur-md rounded-xl px-4 md:px-6 py-3 shadow-sm`. Contains:
   - A custom SVG logo (two geometric arrow/chevron shapes in `#1B133C`, 24x24px). The SVG paths are: `M 256 256 L 128 256 L 0 128 L 128 128 Z` and `M 256 128 L 128 128 L 0 0 L 128 0 Z` inside a 256x256 viewBox.
   - Navigation links (hidden on mobile, shown `sm:` and up): "Features", "Plans", "Security", "About" — styled as `text-sm font-medium text-[#1B133C]/80` with hover transition to full opacity.

2. **Hero content** — centered below nav with `mt-8 md:mt-16`, stacked vertically:
   - **Badge**: `mb-6`, inline-flex pill with `rounded-xl border border-[#1B133C]/10 bg-white/70 backdrop-blur-sm px-4 py-2 text-sm font-medium`. Contains an orange square icon (`bg-orange-500 rounded w-5 h-5`) with a bold white "Y" letter, followed by text "Funded by Y Combinator".
   - **Heading**: `font-['Instrument_Serif'] text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[0.95] tracking-tight text-[#1B133C] max-w-4xl`. Two lines:
     - "Deploy digital workers"
     - "for mundane workflows"
   - **Subtitle**: `mt-5 sm:mt-6 max-w-3xl text-xs sm:text-sm md:text-base leading-relaxed text-[#1B133C]/70`. Text: "Eliminate your tedious browser work and 10x your team's capacity. Put intelligent agents on every routine process so you grow faster and deliver more for clients — effortlessly."
   - **CTA button**: `mt-7 sm:mt-8`, styled as `rounded-xl bg-[#FEFEFE] px-6 sm:px-8 py-3 sm:py-3.5 text-sm font-semibold text-[#1B133C] shadow-[0px_4px_12px_rgba(0,0,0,0.15)]` with hover shadow `shadow-[0px_6px_16px_rgba(0,0,0,0.2)]` and `transition-all duration-300`. Text: "Get Early Access".

3. **Background video** — absolutely positioned (`absolute inset-0 z-0`) behind all content. The video element uses:
   - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260714_113715_c7e0daa0-8bdd-4486-a2da-040901f8f0ea.mp4`
   - Attributes: `autoPlay muted loop playsInline`
   - Styling: `w-full h-[130%] object-cover object-top` — full width, 130% height so it overflows vertically, with the focal point anchored to the top.

**CSS reset in index.css:**
```
body { font-family: 'Inter', sans-serif; color: #1B133C; }
```

**Key details:**
- The hero section uses `relative h-screen w-full overflow-hidden flex flex-col`.
- All content elements are `relative z-10` to sit above the video (`z-0`).
- No other sections or pages — just this single hero.
- Color palette: deep navy `#1B133C` for text, white/translucent for glass elements, orange-500 for the Y Combinator badge accent.
- Page title: "Axon — Digital Workers for Mundane Workflows"
≡Provenance · verifiedPublished prompts are human-checked against the original post; platform-reconstructed prompts are not accepted.Compare with source ↗

Models & stability

Recommended models

待补充模型
Stability
92 / 100
Cost
Medium
Related SkillsWeb section recreation spec ↗

Independent reproductions

1 person reproduced this prompt with their own work.

Reproductions · not the creator's original
卡尔
Reproduced by卡尔
Oct 15, 2026
Reproduction by 卡尔Open reproduction ↗
glm-5.3

GLM-5.3 单次生成;Codex 人工修复运行依赖、必要源码及移动布局,未重新生成。桌面/手机真实渲染和资源检查通过;完整功能与视觉还原尚未全部验收。源码、截图和修复记录见复现出处。

Reproduction source ↗

Keep exploring

Explore related cases.

View all AI Coding (UI) Case →
3D Jack Portfolio
AI Coding (UI)MotionSitesAdded 08/13/2026

3D Jack Portfolio

Portfolio landing page for 3D creator Jack, built with React, TypeScript and Framer Motion on a #0C0C0C dark background.

Skill · 3D and motion heroSkill · Portfolio story architecture

Prompt

Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The page has a dark theme (#0C0C0C background) with the font Kanit (Google Fonts, weights 300-900). The page title…

Source heat · MotionSites
—
Stability
65
View case →
404 Planet
AI Coding (UI)MotionSitesAdded 08/13/2026

404 Planet

A 404 page for the hosting provider NEXOVA, with a looping video background and navigation, giving an error page the polish of a landing page.

Skill · Web section recreation spec

Prompt

Build a full-page 404 error page for a hosting company called "NEXOVA". The entire page is a single viewport-height layout with a looping background video, a navigation bar, a centered hero/404 section, and a multi-column footer. Use React…

Source heat · MotionSites
—
Stability
94
View case →
ADHD Planner
AI Coding (UI)MotionSitesAdded 08/13/2026

ADHD Planner

Landing site for Drift, a schedule app friendly to people with ADHD, built with React, Vite, TypeScript and Tailwind. The calm, low-stimulation visual direction is itself the selling point.

Skill · Web section recreation spec

Prompt

Build a single-page landing site for "Drift" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries. ### Fonts Import via Google Fonts in `index.css`: - **Inter** …

Source heat · MotionSites
—
Stability
91
View case →

Same creator

More from @MotionSites →

  • Quantum LucidAI Coding (UI) · 2026-09-18
  • Rare GalleryAI Coding (UI) · 2026-08-30
  • Palomar LabsAI Coding (UI) · 2026-08-30
  • Quantum CoreAI Coding (UI) · 2026-08-30
  • Agent WaveAI Coding (UI) · 2026-08-19
  • Aurex FinanceAI Coding (UI) · 2026-08-19

Each detail page keeps the original result, the prompt, and retest evidence in one reading path.