Corporate Horizontal Timeline demo
Corporate Horizontal Timeline

A clean, structured horizontal timeline layout presenting company milestones and history in a professional format ideal for corporate landing pages.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 8.6 KB · 1183 words
# System Prompt: Build "Timeline Horizontal Corporativo" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete Landing Page on the first attempt. Theme: **Horizontal Corporate Timeline** — a corporate modern infographic aesthetic featuring a horizontal timeline structure, flat vector iconography, geometric data modules, color-coded categorization, circular milestone markers, thin solid connectors, rounded rectangle labels, and a hierarchical grid system.

**Sections Required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in a dedicated `style.css`. The `style="..."` attribute is **forbidden** in HTML.
- All design properties, layout rules, and states must be targeted via class or ID selectors.
- HTML stays clean, semantic, and agnostic of visual styling — changing the look requires editing only CSS.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root` (and theme overrides):
- **Colors:** `--primary: #2E3B8F` (Navy), `--secondary: #FBAF18` (Amber), `--bg-primary`, `--bg-secondary`, `--text-primary: #333333`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Accent tokens for color-coded categorization:** `--accent-pink: #EC1C5F`, `--accent-cyan: #00AEEF`, `--accent-purple: #6556DF`. Assign one accent per timeline step / feature card category and keep the pairing consistent across the page.
- **Light Mode Background:** Do **not** use pure white as the page background; use `#fefefe` or a near-white tint that fits the corporate mood. `#FFFFFF` may only be used for card/module surfaces.
- **Contrast Pairing:** Every light background token pairs with dark text (`#333333`); every dark background token pairs with light text. Enforce in both themes.
- **Shape & Motion:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast`. Per the flat 2D aesthetic, keep shadows minimal/absent — prefer thin solid borders (`--border-default`) for module definition.

**1.3 Mandatory Dark Mode**
- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector.
- Theme switching must require zero HTML restructuring; persist user choice via `localStorage`, falling back to `prefers-color-scheme` on first visit.
- Include a visible theme toggle with correct `aria-pressed` / `aria-label` state.

**1.4 Flexbox Layout & Mobile-First**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a justified exception exists (document any exception in a CSS comment).
- Mobile-first: the horizontal timeline converts to a vertical timeline (left-aligned markers, stacked modules) on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework**
- Use Tailwind CSS (CDN or build) or clean custom CSS with `@layer`/`@apply`. All utilities map to CSS variables or reusable generic classes (`.btn`, `.card`, `.timeline`, `.milestone`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Text: a geometric sans-serif Google Font (e.g., Poppins or Inter) bound to `--font-base`. Headings/labels: **bold uppercase**; body descriptions: **sentence case**.
- Icons: Google Material Symbols only. **No inline SVGs, no local icon files.** Exception clause: the timeline connector line itself may be a single inline SVG `<line>`/`<path>` element or a CSS border — this is the only permitted SVG, purely structural.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44x44px touch target, rounded rectangle per theme.
- Hover: brightness shift with `cursor: pointer` (no shadow — flat design).
- Focus: distinct focus ring via `outline`/`box-shadow` using CSS variables.
- Active/Pressed: `transform: scale(0.97)`.
- Loading: disables interaction, prevents double-clicks, renders an animated Google Icon spinner without distorting dimensions.
- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- Success/Error: temporary feedback styles driven by `--text-success` / `--text-error`.
- `.btn-danger` (if any destructive action exists) must be visually distinct in both themes.

**2.2 Cards (Features, Testimonials, Pricing, Timeline Modules)**
- Default: flexible Flexbox layout, `--bg-secondary` or white surface, thin solid `--border-default` border, `--radius-md` rounded rectangles.
- Hover: `transform: translateY(-2px)` and/or border-color shift (no shadows — flat 2D illumination).
- Focus-within: border highlight when a child link/button receives focus.
- Loading (Skeleton): CSS shimmer animation, no layout jumps.
- Empty State: structured fallback with a Google Icon and guidance text (relevant for FAQ/dynamic content areas).

**2.3 Forms & Inputs (Final CTA / Newsletter signup if included)**
- States: Empty, Focused (outline ring), Filled, Valid (success border/icon), Invalid (error border, red text, error icon), Disabled, Read-only.
- Structure: flex container wrapping label, input, and a dedicated error feedback container.

**2.4 Modal / Popup (FAQ answers may expand inline instead)**
- If a modal is used: Opening, Open, Loading, Success/Error, Closing — all CSS-transition animated. Centered flex container, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click closing.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing, no horizontal overflow at any breakpoint.
- **Animations (theme-specific):** Implement the timeline **draw animation** (connector line grows/animates on scroll into view), **milestone pop-in** (circular markers scale in sequentially), **module slide-in** (data modules slide from below/side), and **color-coded category reveals** (accent colors fade in per category). All via CSS transitions/animations triggered by IntersectionObserver or CSS scroll-driven animation. Respect `prefers-reduced-motion` — disable all motion when set.
- **Accessibility:** Sufficient contrast in both themes. Never rely on color alone — pair each color-coded category with an icon and text label. Semantic HTML5 (`<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`, `<ol>` for timeline steps), correct ARIA roles/labels, logical DOM/focus order, full keyboard operability, `aria-live` regions for dynamic feedback (form errors, toasts, loading).
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Flat 2D aesthetic:** no gradients, no drop shadows on primary surfaces; depth is conveyed by color, borders, and spacing only.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference. No inline CSS.
- **Naming:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix.
- **Copy:** All user-facing copy in **English**, sentence case for descriptions, bold uppercase for section labels/headings. Use realistic corporate copy for the timeline/milestone theme (e.g., company milestones, process steps, roadmap phases). No lorem-ipsum where real content is expected.
- **Section content guidance:**
  - **Hero:** headline, subheadline, primary CTA button, and a visual anchor referencing the horizontal timeline motif.
  - **Features (3 cards):** one card per accent category (pink, cyan, purple), each with a Google Material icon and color-coded top border or marker.
  - **How It Works (3 steps):** the signature **horizontal timeline** — thin solid connector line, three circular milestone markers (one per accent color), rounded rectangle labels, geometric data modules above/below alternating. Converts to vertical on mobile.
  - **Testimonials:** 3 quote cards with avatar placeholders (initials in colored circles), name, and role.
  - **Pricing (3 tiers):** middle tier highlighted with `--primary` navy; each tier card lists features with check icons and a CTA button.
  - **FAQ:** accessible accordion (`<details>`/`<summary>` or ARIA-compliant custom), 4–6 realistic Q&As.
  - **Final CTA:** full-width navy band with headline and CTA button (amber accent).
  - **Footer:** brand area, secondary link groups, social links (Google Icons), copyright line, and the theme toggle.

Build the complete, production-ready landing page now — all files in a single response, fully functional in both light and dark modes.