Access ALL prompts for stunning animated websites in one click:
motionsites.ai
**Recreate an "Arc" cloud hosting landing page -- a dark, minimal, modern SaaS site built with React Vite TypeScript Tailwind CSS. Use the Inter font (400, 500, 600, 700) from Google Fonts. The entire page uses a pure black (#000000) background with white text. Use lucide-react for icons. The page has the following sections in order:**
---
## 1. HEADER (sticky)
A sticky top header with `bg-dark-950/[0.92]` (92% opacity black) and `backdrop-blur-[10px]`. Contains:
- Left: Logo image at `/image copy.png` (a local PNG file -- this is the "Arc" brand logo), width `3.875rem`
- Center-right: Nav links "Services", "Ecosystems", "Careers" as text links with `text-dark-200` and `hover:text-white`, each `px-3 py-1.5 rounded-full`
- Far right: "Get Arc" link (hidden on mobile)
- Mobile: Hamburger menu using lucide `Menu`/`X` icons, opens a vertical nav dropdown
- Max width: `64rem` (custom `max-w-container`)
## 2. HERO SECTION
Centered text hero with generous padding (`pt-16 pb-16` mobile, `pt-[6.75rem] pb-[6.75rem]` desktop):
- **Announcement pill**: A rounded-full link "Arc Secures $72M in Round A" with an animated rotating conic gradient border. The pill has `bg-dark-800`, and behind it an absolutely positioned spinning element with `conic-gradient(rgba(0,0,0,0), rgba(0,0,0,0) 40%, rgba(255,255,255,0.17) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0))` that rotates via a CSS animation (`translate(-50%,-50%) rotate(0deg)` to `rotate(360deg)`, 4s linear infinite). Includes a small arrow icon (custom SVG arrow pointing right).
- **H1**: "Fast cloud hosting for all startups" -- sizes `text-5xl` up to `text-[80px]`, `font-medium`, `tracking-tight`, `max-w-[41.875rem]`, `leading-[1.05]`
- **Subtitle**: Two-tone paragraph. "Arc brings the fastest deployment tools" in `text-dark-100` (lighter), rest in `text-dark-300` (dimmer). `text-lg md:text-2xl`, `max-w-[56.5625rem]`
- **CTA button**: "Get started now" -- `bg-dark-100 text-dark-950` (light button, dark text), `rounded-full`, `px-5 py-2.5`, `hover:bg-white`
## 3. VIDEO HERO SECTION
A full-width autoplaying video in a `rounded-2xl` container, `max-w-[69.125rem]`, `aspect-video`. The video:
- URL: `
d8j0ntlcm91z4.cloudfront.net…`
- Attributes: `autoPlay`, `loop`, `muted`, `playsInline`
- Styling: `absolute inset-0 w-full h-full object-cover`
## 4. LOGO MARQUEE
An infinitely scrolling horizontal marquee of partner brand names (text-only logos, no images):
- Names: Streambase, Gridway, Vaultly, Meridian, Layrd, Velo, Canopy, Plex, Cloudwav
- Each name is rendered as uppercase, `tracking-wider`, `font-semibold`, `text-sm`, `text-dark-400`, `opacity-50`
- Each has specific widths (Streambase: `w-36`, Gridway: `w-28`, Vaultly: `w-[5.375rem]`, Meridian: `w-[7.75rem]`, Layrd: `w-[5.75rem]`, Velo: `w-28`, Canopy: `w-[7.5rem]`, Plex: `w-28`, Cloudwav: `w-[10rem]`)
- The logo set is duplicated 4 times in a row and animated with `translateX(0)` to `translateX(-25%)` over 30s linear infinite
- Left and right edges have gradient fade masks using CSS `mask-image: linear-gradient(...)` plus `backdrop-blur-[3px]`, transitioning from `dark-950` to transparent
- Container max-width: `64rem`
## 5. STATS SECTION
Left-aligned heading 3 stat cards in a row:
- Heading: "Proven in speed" (`text-3xl md:text-[48px]`, `font-medium`)
- Subheading: "Arc has processed billions in requests for millions of teams, in hundreds of countries." (`text-dark-300`, `max-w-lg`)
- 3 cards in `flex-row` (stacked on mobile): Each `bg-dark-700 rounded-2xl`, centered text, `min-h-[8.5rem] md:min-h-[8.875rem]`
- Card 1: "$42T " / "requests handled per year"
- Card 2: ">99.999%" / "uptime grade"
- Card 3: "<5s" / "time to deploy a new stack"
- Values are `text-2xl md:text-[30px] font-medium`, labels are `text-dark-300 text-sm md:text-base`
## 6. PRODUCTS SECTION (3 cards, alternating layout)
Left-aligned heading 3 large product cards stacked vertically:
- Heading: "Unlock bare-metal nodes" (`text-3xl md:text-[48px]`)
- Subheading: "Leverage the fastest provisioning flows for shipping applications to bare metal." (`text-dark-300`)
- Each card: `bg-dark-800 rounded-2xl`, `grid grid-cols-1 md:grid-cols-2`, `min-h-[25rem]`
- Cards alternate image/text position (`imageFirst` toggles order):
- **Compute** (text left, image right): "Elastic, self-healing node pools that consistently serve higher traffic and deliver reliable uptime for your app."
- Image: `
images.higgs.ai/?default=1&o…`
- **Transfer** (image left, text right): "Increase resilience through reliable and instant failovers."
- Image: `
images.higgs.ai/?default=1&o…`
- **Orchestration** (text left, image right): "Orchestrate how builds deploy, optimize routing and delivery, and ship code faster while scaling globally."
- Image: `
images.higgs.ai/?default=1&o…`
- Each card text side has: title (`text-2xl md:text-[30px] font-medium`), description (`text-dark-300`), and a "Learn more" pill button with arrow icon (`bg-white/[0.04] backdrop-blur-[10px] rounded-full hover:bg-white/10`)
- Images are `absolute inset-0 w-full h-full object-cover`
## 7. TESTIMONIALS SECTION (expandable video cards)
Left-aligned heading 3 side-by-side video cards with accordion-like expand behavior:
- Heading: "Trusted by leaders across the stack"
- Subheading: "Conversations with builders shaping the future of hosting, powered by Arc."
- Container: `max-w-[84rem]`, cards are `h-[25rem] md:h-[30rem]` in a flex row with `gap-3`
- Active card gets `flex-[5]`, inactive cards get `flex-1`. Transition: `duration-500 ease-in-out`
- Each card is a `<button>` with `rounded-2xl overflow-hidden border-2`
- Active: `border-white/10`; Inactive: `border-white/[0.07]`
- Each card has an autoplaying, looping, muted `<video>` filling the card (`absolute inset-0 w-full h-full object-cover`)
- A gradient overlay: `bg-gradient-to-t from-black/60 via-transparent to-transparent`
- Active card shows name role (bottom-left) and company name (bottom-right, desktop only). No play buttons anywhere.
- Videos:
1. Matthias Richter Thornton-Lin / Co-Founder & CTO, Canopy: `
d8j0ntlcm91z4.cloudfront.net…`
2. Priya Kaur / Co-Founder, Cloudwav: `
d8j0ntlcm91z4.cloudfront.net…`
3. Nikolai Sundstrom / Head of Engineering, Streambase: `
d8j0ntlcm91z4.cloudfront.net…`
## 8. INDUSTRIES SECTION (3 vertical cards)
Left-aligned heading 3 cards in a `grid-cols-3` (stacked on mobile):
- Heading: "Leading startups scale on Arc"
- Subheading: "The fastest moving, most ambitious startups boost their revenue with Arc."
- Each card: `bg-dark-800 rounded-2xl p-6 md:p-12`, `hover:bg-dark-700/80 transition-colors`, is an `<a>` link
- Card structure:
1. **DevOps & Platforms** (icon: `ArrowLeftRight` from lucide): stat "55 " / "active regions", company "CANOPY", description about RWI hosting
2. **Data & Caching** (icon: `Diamond`): stat "85B" / "monthly stored objects", company "VAULTLY", description about storage stack
3. **Media & Streams** (icon: `CircleDot`): stat "5M " / "daily served pages", company "STREAMBASE", description about streaming backend
- Icons are `w-6 h-6 text-dark-400`
- Stats: `text-4xl md:text-[48px] font-medium`
- Company name: `text-sm font-semibold tracking-wider uppercase text-dark-400`
## 9. GLOBE CTA SECTION
A centered CTA with animated dot grid background:
- Heading: "Elastic hosting for modern platforms" (`text-3xl md:text-[48px]`, `max-w-[35rem]`)
- CTA button: "Get started now" (same style as hero CTA)
- Below: A small status pill `bg-white/[0.07] backdrop-blur-md rounded-full` showing "us-e1.arc.i" (dimmed) and "req. -> 200"
- Background: A `<canvas>` element rendering an animated dot grid. Dots are placed on a 24px spacing grid, each with random phase/speed. They pulse using sine waves, brighter near the center. The canvas uses a radial `mask-image` (ellipse 70% 60%) to fade edges. Dot radius is 1.2px, colors are `rgba(255,255,255, alpha)` with very low alphas (0.01-0.15).
## 10. FOOTER
Two-part footer:
- **Top row**: Logo (left) 4 link columns (right, in a grid on mobile)
- Services: Compute, Transfer, Orchestration, Pipeline
- Ecosystems: DevOps & Platforms, Data & Caching, Media & Streams
- Careers: About, Careers
- Connect: X (Twitter), LinkedIn, Get Arc
- Column titles: `text-sm font-medium`; Links: `text-sm text-white/45 hover:text-white/70`
- Logo: same `/image copy.png`
- Below logo: "Cloud Platforms" "(c)2026 The Arc Cloud, Inc." in `text-white/40`
- **Bottom row**: "Terms" / "Privacy" links (`text-white/45`), then a disclaimer paragraph in `text-white/25 text-xs`
---
## TAILWIND CONFIG
Custom color scale `dark`: 950=#000000, 900=#141414, 800=#191919, 700=#222222, 600=#333333, 500=#666666, 400=#868686, 300=#999999, 200=
#b3b3b3, 100=
#eeeeee. Custom `max-w-container: 64rem`. Two keyframe animations: `marquee` (translateX 0 to -25%, 30s) and `spin` (translate-50%,-50% rotate 0-360deg, 4s). Font family: Inter, system-ui, -apple-system, sans-serif.
## CUSTOM CSS
In `index.css`: Tailwind base/components/utilities imports. Body gets `bg-dark-950 text-white font-sans`. Antialiased font smoothing. Two utility classes: `.gradient-fade-left` with `mask-image: linear-gradient(to right, red 50%, transparent)` and `.gradient-fade-right` with `mask-image: linear-gradient(to left, red 50%, transparent)`.
## CUSTOM COMPONENTS
- **ArrowIcon**: A custom SVG arrow (right-pointing, with rounded linecaps, no fill, stroke only)
- **FunLogo**: Renders `/image copy.png` with `object-fit: contain`
## GENERAL DESIGN NOTES
- Everything uses `rounded-2xl` for cards, `rounded-full` for buttons/pills
- Consistent section spacing: `py-12 md:py-20`
- Consistent horizontal padding: `px-5 lg:px-10`
- Content max-width: `64rem` for most sections, `69.125rem` for video hero, `84rem` for testimonials
- Card backgrounds: `bg-dark-800` (#191919)
- Muted text: `text-dark-300` (#999999)
- All interactive elements have `transition-colors`
- No purple, indigo, or violet colors anywhere -- strictly black/white/gray palette
- 3 local PNG files in `/public`: `image.png`, `image copy.png` (the logo), `image copy copy.png` (unused)