ZeroSum-Solutions/mishmash

Stellar.ai — AI Productivity Landing Hero

Hero section vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A single-screen, centered hero section for an AI-productivity SaaS landing page featuring a navbar, a black-to-gray gradient headline, a primary CTA, an auto-cycling tab bar with four workflow stages (Analyse, Train, Testing, Deploy), a looping background video with tab-driven overlay cards, and a company logo row — all entering with staggered fade-in-up animations. Built with React 18, Vite, Tailwind CSS 3, and Lucide icons with the Inter typeface.

Workflow

1. Clone example.html into the user's workspace as the working file.
2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
3. Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
4. Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="stellar-ai-landing-hero" type="text/html" title="Stellar.ai — AI Productivity Landing Hero">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

Stellar.ai — Landing Page Hero Section

Overview

Build the hero section for a "Stellar.ai" AI-productivity landing page. It is a single-screen, centered, white-background layout featuring a navbar, a gradient headline, a CTA, an auto-cycling tab bar, a looping background video with four tab-driven overlay cards, and a row of company logos. Everything animates in with a staggered fade-in-up effect.

Tech Stack

• Framework: React 18 (react ^18.3.1, react-dom ^18.3.1), bootstrapped with React.StrictMode.
• Build tool: Vite (vite ^5.4.11) with @vitejs/plugin-react (^4.3.4).
• Styling: Tailwind CSS (tailwindcss ^3.4.17) with postcss (^8.4.49) and autoprefixer (^10.4.20). Default config, no theme extensions.
• Icons: Lucide React (lucide-react ^0.468.0).
• Font: Inter (weights 400, 500, 600, 700) imported from Google Fonts.
• Testing tooling: Playwright (playwright ^1.60.0).
• Notable techniques: Custom CSS keyframe animations with staggered inline animationDelay, an auto-cycling tab state via setInterval, and conditional overlay components keyed off the active tab.

Global Setup

Fonts

Import Inter (weights 400, 500, 600, 700) from Google Fonts in index.html (with preconnect hints):

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Set the body font in src/index.css:

body {
  font-family: 'Inter', sans-serif;
}

index.html

• lang="en", charset="UTF-8", viewport width=device-width, initial-scale=1.0.
• <title>: Stellar.ai — Work Smarter. Move Faster.
• <meta name="description">: Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time.
• Root mount: <div id="root"></div> with <script type="module" src="/src/main.jsx"></script>.

Entry point (src/main.jsx)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Tailwind config (tailwind.config.js)

Default config with no custom theme extensions. Content paths:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

PostCSS config (postcss.config.js)

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Vite config (vite.config.js)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Animations

Defined in src/index.css on top of the Tailwind layers (@tailwind base; @tailwind components; @tailwind utilities;).

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-overlay {
  animation: fadeInOverlay 0.4s ease-out forwards;
}

@keyframes fadeInDialog {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-up-overlay {
  animation: fadeInDialog 0.5s ease-out forwards;
  transform: translate(-50%, -50%);
}

• fadeInUp → from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) }. Class .animate-fade-in-up runs it with 0.6s ease-out forwards.
• fadeInOverlay → from { opacity: 0 } to { opacity: 1 }. Class .animate-fade-in-overlay runs it with 0.4s ease-out forwards.
• fadeInDialog → from { opacity: 0 } to { opacity: 1 }. Class .animate-slide-up-overlay runs it with 0.5s ease-out forwards and applies transform: translate(-50%, -50%) (for the centered dialog card).
• Every major section uses .animate-fade-in-up with a staggered inline animationDelay (starting at 0.1s and incrementing by 0.1s). Each element starts with inline opacity: 0 so the animation fills it to visible.

Layout

• Root wrapper: bg-white min-h-screen text-black.
• Page is built from a <Navigation /> header plus a centered <main>.
• <main> classes: px-6 pt-24 pb-32 max-w-7xl mx-auto text-center.

Navbar

Wrapped in a <header> with animate-fade-in-up and inline style={{ opacity: 0, animationDelay: '0.1s' }}. The <nav> uses px-6 py-4 flex items-center justify-between max-w-7xl mx-auto.

• Left (logo): an <a href="#" className="flex items-center gap-2"> containing a Lucide Star icon (w-5 h-5 fill-black text-black) and the brand text Stellar.ai in a <span className="text-lg font-semibold">.
• Center (hidden on mobile): hidden md:flex items-center gap-8. Four links:
  • Solutions with a ChevronDown icon (w-4 h-4), link classes flex items-center gap-1 text-sm text-gray-700 hover:text-black transition-colors.
  • For Teams with a ChevronDown icon (w-4 h-4), same link classes.
  • About Us — text-sm text-gray-700 hover:text-black transition-colors.
  • Learn Hub — text-sm text-gray-700 hover:text-black transition-colors.
• Right: flex items-center gap-4.
  • Login link — text-sm text-gray-700 hover:text-black transition-colors.
  • Get started free button — bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors.

Hero

All hero elements live inside <main> and use animate-fade-in-up with staggered inline delays.

Reviews badge (delay 0.2s)

• Wrapper: inline-flex items-center gap-2 mb-8.
• A bordered square: w-6 h-6 border border-gray-300 rounded flex items-center justify-center containing a filled Star icon (w-3.5 h-3.5 fill-black text-black).
• Text: 4.9 rating from 18.3K+ users in text-sm font-medium text-black.

Main heading (delay 0.3s)

• <h1> classes: text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5.
• First line: Work Smarter. Move Faster.
• <br />
• Second line (gradient text): AI Powers You Up. wrapped in a <span> with bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent.

Subheading (delay 0.4s)

• <p> classes: text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto.
• Text: Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time.

CTA button (delay 0.5s)

• Wrapped in a div with animate-fade-in-up and inline style={{ opacity: 0, animationDelay: '0.5s' }}.
• Button classes: bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12.
• Text: Begin Free Trial.

Tab Bar (delay 0.6s)

Wrapper: animate-fade-in-up flex justify-center mb-8 with inline style={{ opacity: 0, animationDelay: '0.6s' }}.

Four tabs, defined as a TABS constant:

const TABS = [
  { id: 'analyse', label: 'Analyse', icon: BarChart3 },
  { id: 'train', label: 'Train', icon: BookOpen },
  { id: 'testing', label: 'Testing', icon: Users },
  { id: 'deploy', label: 'Deploy', icon: Rocket },
]

• Mobile (md:hidden): a 2×2 grid — md:hidden grid grid-cols-2 gap-1 bg-gray-100 rounded-lg p-1 — rendering all four buttons.
• Desktop (hidden md:flex): a row — hidden md:flex items-center bg-gray-100 rounded-lg p-1 — with a vertical divider before every button except the first: <div className="w-px h-5 bg-gray-300 mx-1" />.
• Each tab button: flex items-center justify-center gap-2 px-5 py-2 rounded-md text-sm font-medium transition-colors, with a Lucide icon (w-4 h-4) and the label.
  • Active: bg-white text-black shadow-sm.
  • Inactive: text-gray-600.
• Tabs auto-cycle every 4000ms (4s) via setInterval inside a useEffect, advancing to the next tab id (wrapping around). State: useState('analyse'). The interval is cleared on unmount.

useEffect(() => {
  const interval = setInterval(() => {
    setActiveTab((current) => {
      const index = TABS.findIndex((tab) => tab.id === current)
      return TABS[(index + 1) % TABS.length].id
    })
  }, 4000)
  return () => clearInterval(interval)
}, [])

Video + Overlay Section (delay 0.7s)

• Container: animate-fade-in-up relative rounded-3xl overflow-hidden h-[400px] md:h-[500px] with inline style={{ opacity: 0, animationDelay: '0.7s' }}.

• Video element: autoPlay, loop, muted, playsInline, classes w-full h-full object-cover. Source comes from a VIDEO_SRC constant:

  const VIDEO_SRC =
    '/assets/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4'
  

  Note: The original brief referenced a remote CloudFront URL (https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4). The asset has since been vendored locally and the source now points to /assets/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4 (served from public/assets/). The local path is the ground truth.

• Active overlay: <ActiveOverlay key={activeTab} /> — the overlay component is chosen from an OVERLAYS map keyed by the active tab id, and remounted on each tab change (via the key) to retrigger its animation.

const OVERLAYS = {
  analyse: AnalyseOverlay,
  train: TrainOverlay,
  testing: TestingOverlay,
  deploy: DeployOverlay,
}

Shared overlay shell (OverlayCard)

Each overlay is wrapped in a reusable OverlayCard component that renders the dim backdrop and the centered animated dialog card:

function OverlayCard({ children }) {
  return (
    <div className="absolute inset-0 animate-fade-in-overlay" style={{ opacity: 0 }}>
      <div className="absolute inset-0 bg-black/30" />
      <div
        className="animate-slide-up-overlay absolute top-1/2 left-1/2 w-[calc(100%-3rem)] max-w-sm bg-white rounded-2xl shadow-2xl p-6 text-left"
        style={{ opacity: 0 }}
      >
        {children}
      </div>
    </div>
  )
}

• Outer wrapper: absolute inset-0 animate-fade-in-overlay with inline opacity: 0.
• Backdrop: absolute inset-0 bg-black/30.
• Inner card: animate-slide-up-overlay absolute top-1/2 left-1/2 w-[calc(100%-3rem)] max-w-sm bg-white rounded-2xl shadow-2xl p-6 text-left with inline opacity: 0.

Overlay A — Analyse: "Set Up Your AI Workspace"

A 4-step setup wizard with a purple progress bar at 25%.

• Header row (flex items-center justify-between mb-1): title <h3 className="text-base font-semibold text-black">Set Up Your AI Workspace</h3> and a step counter <span className="text-xs font-medium text-gray-500">Step 1 of 4</span>.
• Subtext (text-xs text-gray-500 mb-4): A few quick steps and Stellar.ai is ready to work.
• Progress track: h-1.5 w-full bg-gray-100 rounded-full mb-5 overflow-hidden with fill h-full w-1/4 bg-purple-600 rounded-full.
• Step list (<ul className="space-y-3">), four items:
  1. Connect your tools — state active
  2. Import workspace data — state pending
  3. Configure AI assistant — state pending
  4. Invite your team — state pending
• Each step: a numbered badge w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold and a label.
  • Active badge: bg-purple-600 text-white; active label: font-medium text-black.
  • Pending badge: bg-gray-100 text-gray-400; pending label: text-gray-500.

Overlay B — Train: "AI Model Training"

A training panel with an orange progress bar at 67% and four metric cards.

• Header row (flex items-center justify-between mb-1): title <h3 className="text-base font-semibold text-black">AI Model Training</h3> and a status pill flex items-center gap-1.5 text-xs font-medium text-orange-600 containing a pulsing dot (w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse) and the text Running.
• Subtext (text-xs text-gray-500 mb-4): Fine-tuning on your workspace data.
• Progress label row (flex items-center justify-between text-xs font-medium mb-1.5): Training progress (text-gray-500) and 67% (text-black).
• Progress track: h-1.5 w-full bg-gray-100 rounded-full mb-5 overflow-hidden with fill h-full w-[67%] bg-orange-500 rounded-full.
• Metrics grid (grid grid-cols-2 gap-3), four cards (rounded-lg border border-gray-100 bg-gray-50 px-3 py-2.5):
  • Accuracy → 94.2%
  • Loss → 0.018
  • Epoch → 8 / 12
  • ETA → 14 min
• Each card: label text-[11px] uppercase tracking-wide text-gray-400 font-medium and value text-sm font-semibold text-black.

Overlay C — Testing: "Test Suite Results"

A green success panel showing 127/127 tests passing.

• Header row (flex items-center gap-3 mb-4): an icon badge w-10 h-10 rounded-full bg-green-100 flex items-center justify-center with a CheckCircle2 icon (w-5 h-5 text-green-600), then a title block — <h3 className="text-base font-semibold text-black">Test Suite Results</h3> and <p className="text-xs text-green-600 font-medium">All tests passed</p>.
• Count row (flex items-end justify-between mb-1.5): 127 in text-2xl font-bold text-black leading-none followed by <span className="text-gray-400 font-medium"> / 127</span>, and 100% passing in text-xs font-medium text-gray-500.
• Progress track: h-1.5 w-full bg-gray-100 rounded-full mb-5 overflow-hidden with a full green fill h-full w-full bg-green-500 rounded-full.
• Suite list (<ul className="space-y-2.5">):
  • Unit → 84 passed
  • Integration → 31 passed
  • End-to-end → 12 passed
• Each row (flex items-center justify-between text-sm): left side flex items-center gap-2 text-gray-600 with a Check icon (w-4 h-4 text-green-500) and the label; right side font-medium text-black showing {count} passed.

Overlay D — Deploy: "Deploy to Production"

A pre-launch checklist with a deploy button.

• Title: <h3 className="text-base font-semibold text-black mb-1">Deploy to Production</h3>.
• Subtext (text-xs text-gray-500 mb-4): Everything checks out. You are clear for launch.
• Checklist (<ul className="space-y-2.5 mb-5">), four items:
  • Build completed in 42s
  • All 127 tests passing
  • Security scan clean
  • Preview approved
• Each item (flex items-center gap-2.5 text-sm text-gray-700): a check badge w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0 with a Check icon (w-3 h-3 text-green-600), then the text.
• Deploy button: w-full bg-black text-white py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors flex items-center justify-center gap-2, containing a Rocket icon (w-4 h-4) and the text Deploy Now.

Company Logos (delay 0.8s)

Wrapper: animate-fade-in-up mt-24 flex flex-wrap items-center justify-center gap-x-12 gap-y-8 text-gray-400 with inline style={{ opacity: 0, animationDelay: '0.8s' }}.

Six logo treatments, in order:

1. Interscope — INTERSCOPE in text-sm font-semibold tracking-[0.3em].
2. Spotify — SPOTIFY in text-sm font-bold tracking-[0.25em].
3. Nexera — flex items-center gap-2: a 3×3 dot grid (grid grid-cols-3 gap-0.5 with nine w-1 h-1 rounded-full bg-gray-400 dots) followed by Nexera in text-base font-semibold tracking-tight.
4. M3 — M3 in font-serif italic text-2xl.
5. Laura Cole — flex items-center gap-2: an LC circle (w-7 h-7 rounded-full border border-gray-400 flex items-center justify-center text-[10px] font-semibold) followed by LAURA COLE in text-xs font-medium tracking-[0.25em].
6. Vertex — flex items-center gap-1.5: vertex in text-base font-semibold tracking-tight lowercase, followed by a two-dot cluster (flex gap-1) with w-1.5 h-1.5 rounded-full bg-gray-400 and w-1.5 h-1.5 rounded-full bg-gray-300.

Color Palette

Built entirely from Tailwind's default palette utilities — no custom theme colors. Key tokens used:

• Base: bg-white, text-black, fill-black.
• Grays: text-gray-700, text-gray-600, text-gray-500, text-gray-400, bg-gray-800 (hover), bg-gray-100, bg-gray-50, border-gray-300, border-gray-400, border-gray-100, bg-gray-300.
• Heading gradient: bg-gradient-to-r from-black via-gray-500 to-gray-400.
• Accent — purple (Analyse): bg-purple-600.
• Accent — orange (Train): text-orange-600, bg-orange-500.
• Accent — green (Testing/Deploy): bg-green-100, text-green-600, bg-green-500, text-green-500.
• Overlay backdrop: bg-black/30.

Icons (Lucide React)

Imported from lucide-react: BarChart3, BookOpen, Check, CheckCircle2, ChevronDown, Rocket, Star, Users.

File Structure

stellar-ai-landing-hero/
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── public/
│   └── assets/
│       └── hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4
└── src/
    ├── main.jsx
    ├── App.jsx
    └── index.css

src/App.jsx component breakdown

• Navigation — the header/navbar.
• AnalyseOverlay, TrainOverlay, TestingOverlay, DeployOverlay — the four tab overlay panels.
• OverlayCard — shared backdrop + centered dialog shell for the overlays.
• TabBar — the mobile (2×2 grid) and desktop (row with dividers) tab selector.
• CompanyLogos — the logo row.
• App (default export) — composes everything, owns the activeTab state, the auto-cycle useEffect, and the OVERLAYS map lookup.

Module-level constants: TABS, VIDEO_SRC, OVERLAYS.

Source & license

Vendored from MIT-licensed pulkitxm/claude-directory. The upstream MIT licence text ships in this template at LICENSE and must be redistributed alongside any copy of example.html or assets/.

Webfonts and full-resolution imagery are not vendored: local @font-face rules are served from the Google Fonts CDN and referenced images are downscaled. Fetch the upstream folder for the original assets.