[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-146-FinTech-Plataforma-Financeira":3},"# System Prompt: Build \"FinTech Financial Platform\" Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Landing Page** for a premium FinTech financial platform on the first attempt. The design language is **2020s FinTech: Premium, Dark, Trustworthy** — dark backgrounds with gold accents, minimalist data visualizations, subtle glow hovers, and a modern dashboard-inspired aesthetic.\n\n**Sections required (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. All styling lives in `style.css`.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic. Changing the site's look must only require editing the CSS file.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` using CSS variables:\n\n* **Colors:** `--primary: #FFD700` (Gold), `--secondary: #C9A84C` (Soft Gold), `--bg-primary: #1A1A1A` (Dark Grey), `--bg-secondary: #000000` (Black), `--bg-elevated: #333333` (Charcoal), `--text-primary: #FFFFFF` (White), `--text-secondary: #C9C9C9`, `--text-success`, `--text-error`, `--border-default: rgba(255,215,0,0.15)`, `--border-error`, `--border-success`.\n* **Contrast Pairing:** Dark background tokens pair with light text tokens; gold accents used on dark surfaces must maintain WCAG AA contrast. Never place gold text on gold backgrounds.\n* **Light Mode Background Exception:** This theme is dark-first. If a light variant is produced via the theme toggle, do not use pure white — use `#fefefe` for near-white surfaces, paired with dark text tokens.\n* **Border Radius & Shadows:** `--radius-sm: 6px`, `--radius-md: 8px`, `--radius-lg: 16px`, `--shadow-sm`, `--shadow-md`, plus `--glow-gold: 0 0 15px rgba(255,215,0,0.2)` for the signature hover glow.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.\n* **Elevation\u002FStacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n### 1.3 Mandatory Dark Mode Support\n* **Default State:** Dark mode (`#1A1A1A` background, white text, gold accents) is the **default and primary theme**.\n* **Implementation:** Define dark tokens under `:root` and a light variant under `.light` and\u002For `@media (prefers-color-scheme: light)`. Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Persist the user's theme choice via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle control (sun\u002Fmoon Google Icon) with correct `aria-pressed` and `aria-label` states in the header.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex` \u002F Tailwind flex utilities).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an explicitly justified exception exists.\n* **Mobile-Friendly First:** All flex layouts must be responsive out of the box — multi-column rows (feature cards, pricing tiers, testimonial grids) collapse to single-column stacks on small viewports. No horizontal scrolling at any breakpoint.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n* Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` \u002F `@apply` directives). All utility classes must map back to CSS variables or reusable semantic class names (`.btn`, `.btn-gold`, `.card`, `.pricing-card`, `.faq-item`).\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Inter** via Google Fonts `\u003Clink>` and bind it to `--font-base`. Use a clear type scale: large bold hero headline, medium section headings, comfortable body text (min 16px).\n* **Icons:** Use **Google Material Symbols** exclusively for all icons (security shield, chart, credit card, transaction arrows, checkmarks, FAQ chevrons, etc.).\n* **Icon Exception Clause:** The source specification requests \"minimalist SVG charts.\" Honor the mandatory icon rule: use Google Material Symbols for all UI icons; for the Hero's decorative chart visualization, build it with CSS-only elements (bars, gradients, animated widths) or a single `\u003Csvg>` chart rendered via CSS-styled markup — but **no ad-hoc inline SVG icons** may replace Material Symbols anywhere in the UI.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes (`.btn`, `.btn-primary`, `.btn-outline`, `.btn-ghost`):\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`. Minimum touch target 44x44px. Primary CTA uses gold background (`--primary`) with dark text; outline variant uses gold border on dark surface.\n* **Hover:** Subtle gold glow (`box-shadow: var(--glow-gold)`) with `cursor: pointer` and slight brightness shift.\n* **Focus:** Distinct focus ring using CSS variables (`outline` \u002F `box-shadow`) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading:** Disables interactions, prevents double-clicks, renders an animated Google Icon spinner without distorting button dimensions.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError:** Temporary feedback states driven by `--text-success` \u002F `--text-error`.\n\n### 2.2 Card Component Requirements\nApplies to Feature cards, Testimonial cards, and Pricing cards:\n* **Default:** Flexible Flexbox layout, `background: var(--bg-elevated)` or `#1A1A1A` over black, subtle gold-tinted borders (`--border-default`), `border-radius: var(--radius-md)`, soft shadow.\n* **Hover:** Gold glow (`box-shadow: 0 0 15px rgba(255,215,0,0.2)`) and `transform: translateY(-2px)`.\n* **Focus-within:** Card border highlights when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.\n* **Empty State:** Structured fallback with a Google Icon and clear guidance text.\n* **Pricing-specific:** The recommended\u002Fmiddle tier must be visually elevated (gold border, glow, \"Most Popular\" badge) and remain distinct in both themes.\n\n### 2.3 Form & Input Requirements\nUsed in the Final CTA (e.g., email capture) and FAQ search if applicable:\n* **States:** Empty, Focused (gold outline ring), Filled, Valid (success border + Google Icon check), Invalid (error border, error text, error icon), Disabled, Read-only.\n* **Structure:** Flex container wrapping a label, input field, and dedicated error feedback container with `aria-live=\"polite\"`.\n\n### 2.4 Modal \u002F Popup Requirements\nApply to FAQ answers (accordion expansion) and any \"Talk to Sales\" pricing action:\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX Features:** Centered flex container (`align-items: center`), dark backdrop overlay with blur, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing, standard breakpoints, zero horizontal overflow.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable glow pulses, counters, and transforms).\n* **Incremental Number Counters:** Implement `@keyframes counter-increment`-style animated number counters in the Hero (e.g., transactions processed, assets under management, active users) triggered on scroll into view, with an `aria-live` announcement of the final value.\n* **Accessibility (a11y):** WCAG AA contrast in dark and light variants. Never rely on color alone to communicate state. Semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cfooter>`, `\u003Cnav>`), correct ARIA roles\u002Flabels on the FAQ accordion (`aria-expanded`, `aria-controls`), theme toggle, and any custom widgets. Logical DOM\u002Ffocus order, full keyboard operability, `aria-live` regions for dynamic feedback.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Destructive\u002FDanger Actions:** Any destructive action uses a visually distinct `.btn-danger` class, distinguishable in both themes.\n* **Copy:** Write all user-facing copy in **English**. Use realistic FinTech copy (no lorem ipsum): feature titles, step descriptions, testimonial quotes with names\u002Froles, pricing tier names with feature lists, FAQ questions and answers, footer link columns (Product, Company, Legal, Social). Placeholder-free where content is specified above.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference. No inline CSS.\n* **Naming Convention:** One consistent convention (BEM, e.g., `.hero__title`, `.pricing-card__badge`, `.faq-item--open`) across the entire deliverable — never mix conventions.\n* **No Unrequested Placeholders:** All sections listed must be fully built with real, themed copy. Placeholders only where content was genuinely unspecified.\n* **Section Order:** Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.\n",1791954982185]