Carousel — Logo Marquee (teal)

Summary

A clean, light SaaS landing page anchored on an infinite logo-marquee carousel, in a confident, friendly product-marketing voice. A sticky frosted white top nav (a teal rounded-square logo chip holding a ph:carousel-bold icon + a 'Carousel' wordmark, a hidden-on-mobile link row -- Customers / Product / Library / Pricing -- a ghost 'Sign in' link, a solid teal 'Start free' pill, and a md:hidden hamburger) sits above a centered, grid-textured hero: a teal 'Design system, generated in seconds' status pill, a big two-line 'Ship interfaces the whole world already recognizes' heading whose final word 'recognizes' is teal with a hand-drawn SVG underline swash beneath it, a muted lead, and a button pair (a solid teal 'Generate your first design' button with an arrow + a white-bordered ghost 'Watch the canvas' button with a play-circle icon). The centerpiece is a TWO-ROW logo marquee 'trusted by' section: an uppercase tracked 'Trusted by design & product teams at' label, then two edge-faded, overflow-hidden rows of logo chips that scroll infinitely on a CSS keyframe -- the top row translates left (40s), the bottom row translates right (28s) -- each built in JS from a logo list, rendered as icon+wordmark chips (a rounded slate icon square + a bold wordmark) and DUPLICATED so a translateX(-50%) loop is seamless; the edges fade to transparent via a CSS mask, hovering pauses the animation, and hovering a single logo tints it teal. Below the marquee: a 4-up metric trust strip (57k+ designers / 2.4M designs / 4.9/5 rating / 12s idea-to-mockup) laid out as a hairline-divided rounded card, a 3-up feature grid (Prompt to mockup / Infinite canvas / Clean export) of bordered cards that lift on hover, a teal gradient CTA card with blurred corner glow blobs and a faint grid texture, and a social footer (brand + copyright + x/github/discord icons). Built on the Tailwind CDN with Inter and Iconify Phosphor icons; below md the nav links collapse into the hamburger, the hero heading and buttons scale and stack, and the metric strip drops from 4 to 2 columns.

Style

A clean, light, trustworthy SaaS aesthetic: a soft slate ground (#f8fafc) with crisp white surfaces and a single disciplined teal accent family (teal-600 #0f766e, teal-700 #0d6660, teal-800 #115e59, with teal-50 #f0fdfa and teal-100 #ccfbf1 tints). Body text is near-black 'ink' (#0b1220) with slate-600 (#475569) supporting copy and slate-500 (#64748b) labels. Teal carries every primary action and brand mark: the solid teal nav 'Start free' pill and hero 'Generate your first design' button (white text, soft teal-tinted shadow shadow-teal-600/25-30), the teal logo chip, teal status-pill text on a teal-50 fill with a teal-600/20 border, teal section eyebrows, the teal stat numbers, the hand-drawn teal underline swash under the hero word, and a teal-700 gradient CTA card. Hover states resolve toward teal: nav links and footer icons go teal-700, feature cards gain a teal-600/40 border, and individual marquee logos tint teal (icon + wordmark to teal-600, icon chip background to teal-100). Surfaces are airy: hairline slate-200 borders, generous rounding (rounded-full pills/buttons, rounded-2xl feature + metric cards, rounded-3xl CTA card, rounded-xl logo + icon chips), and soft shadows (shadow-sm on the nav pill, shadow-lg shadow-slate-200/60 on hovered feature cards). Texture and atmosphere are subtle: a faint 44px teal grid behind the hero (grid lines at rgba(15,118,110,0.05)), a thin teal top hairline gradient on the hero, and on the CTA card two large blurred teal glow blobs (teal-400/30 top-right, teal-900/60 bottom-left) plus a faint 36px white grid. Typography is a single Inter family across weights 400-900, leaning on extrabold (800) for the hero, section headings, stat numbers and logo wordmarks, with tight tracking on big headings; Iconify Phosphor (ph:) icons throughout. The overall feel is bright, credible and motion-light, with the marquee providing the only continuous animation.

Layout & Structure

A single light scrolling landing page: a sticky nav, a grid-textured hero, then the two-row logo-marquee 'trusted by' section (the anchor), a 4-up metric strip, a 3-up feature grid, a teal CTA card, and a footer. The `<header>` nav is `sticky top-0 z-50 backdrop-blur-md bg-white/80 border-b border-slate-200/70` with an inner `mx-auto max-w-7xl px-6 lg:px-8` -> `flex h-16 items-center justify-between` row (brand cluster left, `hidden md:flex` link row center, sign-in/Start-free/hamburger right). The hero `<section>` is `relative overflow-hidden grid-bg` with a top hairline gradient and a centered `mx-auto max-w-7xl px-6 lg:px-8 pt-20 pb-16 text-center` column (status pill, the `max-w-3xl text-4xl sm:text-5xl lg:text-6xl font-extrabold` heading with the underlined teal 'recognizes', a `max-w-xl` lead, and a `flex flex-col sm:flex-row` button pair). The trusted/marquee `<section id="trusted">` is `border-y border-slate-200 bg-white py-14`: a centered uppercase `tracking-[0.18em]` label, then two `.marquee-wrap edge-fade overflow-hidden` rows, each holding a flex `.marquee-track` (or `.marquee-track-rev .marquee-fast`) whose logo chips are injected by JS and duplicated for a seamless loop. The metric `<section>` is `bg-slate-50` with a `mx-auto max-w-7xl px-6 lg:px-8 py-12` -> a `grid grid-cols-2 lg:grid-cols-4 gap-px overflow-hidden rounded-2xl border border-slate-200 bg-slate-200` strip of four white cells (so the gap-px on a slate-200 bg reads as hairline dividers), each a big teal-700 extrabold number + a slate-500 label. The feature `<section id="features">` is `bg-white py-20` with a left-aligned `max-w-2xl` heading/lead + a `mt-12 grid md:grid-cols-3 gap-6` of three bordered slate-50 cards (icon chip + title + body) that turn white and lift on hover. The CTA `<section>` is `bg-slate-50 pb-20` wrapping a `relative overflow-hidden rounded-3xl bg-teal-700 px-8 py-14 sm:px-14 text-center` card with corner glow blobs + a faint white grid + a heading/lead + a white 'Start designing free' pill. The `<footer>` is `border-t border-slate-200 bg-white` with a `py-10 flex flex-col sm:flex-row items-center justify-between` row (brand / copyright / social icons). Responsive: below md the nav links collapse into the hamburger, the hero heading scales `text-4xl -> sm:text-5xl -> lg:text-6xl` and the button pair stacks, the metric grid is `grid-cols-2 -> lg:grid-cols-4`, the feature grid is one column -> `md:grid-cols-3`, and the footer stacks.

Sticky frosted white top nav

Grid-textured hero with underlined accent word

Two-row logo marquee 'trusted by' section (the anchor)

4-up metric trust strip

3-up feature grid

Teal gradient CTA card

Social footer

Responsive reflow

Special Notes

Exact tokens (Tailwind config extend): `fontFamily.sans = ['Inter','system-ui','sans-serif']`; colors `teal: { 600: '#0f766e', 700: '#0d6660', 800: '#115e59', 50: '#f0fdfa', 100: '#ccfbf1' }`, `ink: '#0b1220'`, `slate: { 50: '#f8fafc' }`. Fonts: Inter only (Google Fonts weights 400;500;600;700;800;900). Icons: Iconify 3.1.1 Phosphor (`ph:`) set from https://code.iconify.design/3/3.1.1/iconify.min.js. Body `font-sans text-ink antialiased` with `body { background: #f8fafc }` and `html { scroll-behavior: smooth }`. One accent family (teal) carries all brand + action; slate-600 body, slate-500 labels, near-black ink (#0b1220) headings. Marquee CSS: `@keyframes marquee { translateX(0) -> translateX(-50%) }`, `@keyframes marquee-rev { translateX(-50%) -> translateX(0) }`; `.marquee-track { display:flex; width:max-content; animation: marquee 40s linear infinite }`, `.marquee-track-rev { animation: marquee-rev 50s linear infinite }`, `.marquee-fast { animation-duration: 28s }` (so row 1 scrolls left 40s, row 2 scrolls right 28s); `.marquee-wrap:hover` pauses both tracks (`animation-play-state: paused`). `.edge-fade { mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) }` (+ -webkit-). Logos are built in JS: two [icon,name] arrays (logosA, logosB), a `logoItem(icon,name)` returns a `.logo-item flex shrink-0 items-center gap-3 mx-6 sm:mx-8` chip (a `h-12 w-12 rounded-xl bg-slate-100 text-slate-600` icon square with a 26px ph icon + a `text-[21px] font-extrabold tracking-tight text-slate-600` wordmark), and `buildTrack(list)` returns the items TWICE so a translateX(-50%) loop is seamless; `.marquee-track`.innerHTML = buildTrack(logosA), `.marquee-track-rev`.innerHTML = buildTrack(logosB). Per-logo teal hover: `.logo-item:hover .iconify, .logo-item:hover span { color:#0f766e }`, `.logo-item:hover > span:first-child { background:#ccfbf1 }`. Hero texture: `.grid-bg` 44px teal grid (lines `rgba(15,118,110,0.05)`), a top `h-px bg-gradient-to-r from-transparent via-teal-600/30 to-transparent` hairline, and a hand-drawn underline SVG (path 'M2 7C60 2.5 240 2.5 298 7', stroke #0f766e, width 3, opacity .4) under the teal 'recognizes'. Metric strip: `grid grid-cols-2 lg:grid-cols-4 gap-px overflow-hidden rounded-2xl border border-slate-200 bg-slate-200` with `bg-white` cells (gap-px over the slate bg = hairline dividers). Feature cards: `border border-slate-200 bg-slate-50 hover:border-teal-600/40 hover:bg-white hover:shadow-lg`. CTA card: `rounded-3xl bg-teal-700` with `bg-teal-400/30 blur-3xl` (top-right) + `bg-teal-900/60 blur-3xl` (bottom-left) glow blobs + a faint white 36px grid at opacity .07, a white `text-teal-700` button. Responsive: nav links `hidden md:flex` (collapse into a `grid sm:hidden` hamburger), 'Sign in' + 'Start free' `hidden sm:inline-flex`, hero heading `text-4xl sm:text-5xl lg:text-6xl` (`<br>` `hidden sm:block`), hero buttons `flex-col sm:flex-row`, metric grid `grid-cols-2 lg:grid-cols-4`, feature grid `md:grid-cols-3`, footer `flex-col sm:flex-row`. This is an original prompt-library product for the placeholder design-tool brand 'Carousel' (faithfully reproducing the build HTML); the library value is the reusable light, teal, two-row infinite logo-marquee 'trusted by' pattern -- two edge-faded CSS-keyframe rows scrolling in opposite directions, each duplicated for a seamless translateX(-50%) loop, hover-to-pause, with per-logo teal hover tint -- wrapped in a clean SaaS landing page.