Amazonian Futurism demo
Amazonian Futurism

A futuristic sci-fi aesthetic blending Amazonian rainforest imagery with glowing green tech elements for sustainable technology landing pages.
Category: Fantasy & Sci-Fi
Era: 2020s Modern
Prompt: 15.0 KB · 2044 words
# SYSTEM PROMPT — CODING AGENT: "AMAZÔNIA FUTURISTA" LANDING PAGE

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — a single pass, no follow-up questions, no TODOs, no stubbed sections. The deliverable is a dark, bioluminescent "cyber jungle" landing page themed **Amazônia Futurista** (Futuristic Amazon), set in the year 2050, where technology and rainforest nature have merged. **All user-facing copy must be written in English.**

---

## 0. DESIGN BRIEF & THEME DEFINITION

**0.1 Theme Identity**
- **Name:** Amazônia Futurista (Futuristic Amazon)
- **Type:** Futuristic, Organic, Lush, Technological
- **Keywords:** Amazon, futuristic, organic, lush, technological, rainforest, biodiversity, bioluminescent, neon nature, cyber jungle, sustainable tech, green technology, tropical futurism
- **Era:** Amazon 2050 — Technology and Nature
- **Category:** Fantasy & Sci-Fi
- **Product Concept:** Invent one coherent fictional product and write all copy around it — e.g., a bio-digital platform that networks the living rainforest (bioluminescent sensor meshes, a living-data canopy, regenerative energy). Name it and keep the concept consistent across every section.

**0.2 Color Palette (map into the tokens of §1.2)**
- **Primary hues:** Forest Green `#0A3D0A` • Neon Green `#39FF14` • Amazonian Black `#0A0F0A` • Bioluminescent Blue `#00CED1`
- **Secondary hues:** Orchid Purple `#9B30FF` • Toucan Yellow `#FFD700` • Victoria Water Lily Pink `#FF69B4` • River Turquoise `#20B2AA`

**0.3 Typography**
- **Headings:** `'Orbitron'` (display) and `'Rajdhani'` (sub-headings, eyebrows, labels). **Body:** `'Inter'`. All loaded from Google Fonts.

**0.4 Visual Effects & Art Direction**
- Forest-depth gradients (dark → luminous): `linear-gradient(180deg, #0A0F0A, #0A3D0A)`.
- Bioluminescent glow: `text-shadow: 0 0 10px rgba(57,255,20,0.5)` and `box-shadow: 0 0 20px rgba(0,206,209,0.3)`.
- Neon borders: `1px solid rgba(57,255,20,0.3)`.
- Firefly particles: floating light dots animated with `firefly 4s ease-in-out infinite`.
- Glass morphism: `backdrop-filter: blur(8px)` with a solid-color fallback.
- Layouts reminiscent of vegetation layers; borders with stylized foliage patterns (CSS gradients / `clip-path` only); dark backgrounds with neon light points; subtle leaf and water textures (CSS-only — no image files).
- **AI Visual Direction:** Design a futuristic Amazon rainforest landing page. Use gradients simulating forest depth (dark to luminous), bioluminescent glow effects, futuristic typography with organic touches, layouts reminiscent of vegetation layers, floating particle animations like fireflies, borders with stylized foliage patterns, dark backgrounds with neon light points, subtle leaf and water textures, deep forest green with neon green and bioluminescent blue accents, cyber jungle sustainable tech aesthetic.

**0.5 Page Scope**
Build, in order: sticky glass header → 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**
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. All behavioral JS uses `addEventListener` — no inline `onclick`-style handlers.
- **Class/ID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays clean, semantic, and styling-agnostic. Changing the site's look must require editing only `style.css`, never the markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store every visual token in `:root` exactly as defined below (extend, never rename):

```css
:root {
  /* Color tokens */
  --primary: #39FF14;            /* Neon Green — CTAs, links, key accents */
  --secondary: #00CED1;          /* Bioluminescent Blue — secondary accents, focus rings, glows */
  --bg-primary: #0A0F0A;          /* Amazonian Black — base page background */
  --bg-secondary: #0A3D0A;       /* Forest Green — alternate section surfaces */
  --text-primary: #fefefe;       /* near-white — never #ffffff */
  --text-secondary: #A9C9AF;      /* muted luminous sage — body copy */
  --text-success: #39FF14;
  --text-error: #FF69B4;          /* Victoria Water Lily Pink — alert/danger tone */
  --border-default: rgba(57,255,20,0.3);
  --border-success: rgba(57,255,20,0.6);
  --border-error: rgba(255,105,180,0.6);
  /* Extended theme accents */
  --accent-orchid: #9B30FF;  --accent-toucan: #FFD700;
  --accent-lily: #FF69B4;    --accent-river: #20B2AA;
  /* Surfaces & signature effects */
  --bg-surface: rgba(10, 61, 10, 0.35);          /* glass card surface */
  --gradient-forest: linear-gradient(180deg, #0A0F0A, #0A3D0A);
  --glow-text: 0 0 10px rgba(57,255,20,0.5);
  --glow-bio: 0 0 20px rgba(0,206,209,0.3);
  /* Typography */
  --font-display: 'Orbitron', sans-serif;
  --font-heading: 'Rajdhani', sans-serif;
  --font-base: 'Inter', sans-serif;
  /* Radius, shadows, spacing, motion, stacking */
  --radius-sm: 8px;  --radius-md: 16px;  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 1000; --z-modal: 1050; --z-toast: 1100;
}
```

- **Contrast Pairing:** Dark background tokens pair only with light text tokens, and any light surface (e.g., the Neon Green primary button) pairs only with dark text (`#0A0F0A`). Verify WCAG AA (4.5:1) for every text/background pair; glow effects must never substitute for contrast.

**1.3 Mandatory Dark Mode Support**
- **Implementation:** The dark palette above is the canonical theme, defined as CSS-variable tokens so it can also be mirrored under `.dark` and `@media (prefers-color-scheme: dark)` without any HTML restructuring.
- **Theme Switching & Persistence:** Theme changes must be achievable by swapping token values only — never by editing markup.
- **Exception (theme-specified):** The style specification mandates a dark-only experience (Light: ✗ No / Dark: ✓ Full) — therefore the dark palette is the default and only theme, and the light-mode palette and visible theme toggle are waived; every color must nonetheless remain a token so a light theme could be added later with zero HTML changes.

**1.4 Flexbox Layout & Mobile-First Alignment**
- **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- **Mobile-Friendly First:** All flex layouts are mobile-responsive out of the box (rows convert to columns on small viewports). No horizontal scrolling at any width. All interactive targets are at least 44×44px.

**1.5 Framework & Naming**
- Use clean, hand-authored custom CSS in `style.css`, organized with native CSS `@layer` directives (tokens → base → layout → components → utilities). Any utility-style classes must map back to the CSS variables and generic reusable classes (`.btn`, `.card`, `.input-group`).
- **Naming Convention:** BEM exclusively (e.g., `.btn--primary`, `.card--feature`, `.pricing-card__price`, `.input-group__error`). Never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load Orbitron, Rajdhani, and Inter via Google Fonts `<link>` tags; bind them to `--font-display`, `--font-heading`, and `--font-base`.
- **Icons:** Use Google Material Symbols for every icon (feature glyphs, step icons, chevrons, close buttons, check marks, connectivity icons in the footer). Raw inline SVGs and local icon files are explicitly forbidden.
- **Decorative visuals:** All textures, foliage borders, glows, gradients, and firefly particles are built purely with CSS (gradients, `clip-path`, keyframes). No image assets.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
Style all states via BEM classes on `.btn` (variants: `.btn--primary` Neon Green fill + black text; `.btn--secondary` transparent with `--border-default` neon outline; `.btn--danger` using `--text-error`/`--border-error`, visually distinct on dark backgrounds):
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px.
- **Hover:** Brightness/glow shift with `cursor: pointer`.
- **Focus:** Distinct bioluminescent focus ring (`outline`/`box-shadow` using `--secondary`) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** Disables further interaction, prevents double-clicks, and renders a CSS spinner without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error` (used by the Final CTA submit flow).

**2.2 Card Component**
Applies to feature cards, step panels, testimonial cards, and pricing tiers:
- **Default:** Flexible flexbox layout, `--bg-surface` with `backdrop-filter: blur(8px)` plus solid fallback, `1px solid var(--border-default)`, `--radius-lg`, padding via `--spacing-gap`.
- **Hover:** Elevation/glow shift with `transform: translateY(-2px)` and intensified `--glow-bio`.
- **Focus-within:** Card border highlights when a child link/button receives focus.
- **Loading (Skeleton):** Define a `.card--skeleton` shimmer animation in CSS to prevent layout jumps (used by the pricing modal while "processing").
- **Empty State:** Define a `.card--empty` fallback layout with a Google Material icon and clear guidance text as part of the component system.

**2.3 Form & Input Requirements**
The Final CTA contains an email capture built as an `.input-group` flex container wrapping a label, an input, and a dedicated error-feedback container:
- **States:** Empty, Focused (bioluminescent outline ring), Filled, Valid (success border + check icon), Invalid (error border, `--text-error` message + error icon), Disabled, Read-only.
- **Behavior:** `script.js` validates email format on submit; errors are injected into the error container inside an `aria-live="polite"` region; success triggers the button's loading → success states plus a visible confirmation. Never rely on color alone — always pair icon + text.

**2.4 Modal / Popup Requirements**
Each Pricing tier CTA opens a plan-confirmation dialog:
- **States:** Opening, Open, Loading (spinner while confirming), Success/Error (inline confirmation or failure message), Closing — all animated via CSS transitions.
- **UX Features:** Centered flex overlay (`align-items: center`), blurred backdrop, Google Material icon close button, keyboard focus trap, `role="dialog"` + `aria-modal="true"`, closing via `Esc` or overlay click, focus returned to the trigger, stacked at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid `clamp()` typography and responsive breakpoints with zero horizontal overflow.
- **Smooth Animations:** CSS transitions (`var(--transition-normal)`) on all state changes; firefly particles float via the `firefly` keyframes with staggered `nth-child` delays; fully respect `prefers-reduced-motion` (disable particles, floats, and smooth scrolling).
- **Accessibility (a11y):** AA contrast throughout the dark theme; never communicate state by color alone; semantic HTML5 (`header`, `main`, `section`, `footer`, one `h1`, logical heading hierarchy); native `details/summary` for the FAQ accordion; correct ARIA roles/labels on the modal; logical DOM/focus order; full keyboard operability; `aria-live` regions for form and loading feedback; a visible "skip to main content" link.
- **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct against dark backgrounds in this theme.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer>`). No inline styles.
- **Naming Convention:** BEM consistently across the entire deliverable — never mix conventions.
- **Copy:** Write all user-facing copy in English — real, themed content (product name, feature names, step titles, testimonial names/roles/quotes, tier names/prices, FAQ Q&As, footer labels). Lorem ipsum and placeholder-only submissions are prohibited.
- **Completeness:** Deliver finished, working code on the first attempt — no TODOs, no truncated sections.

---

## 5. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATIONS

**5.0 Global Shell**
Skip-to-content link; sticky glass header (Orbitron wordmark, anchor nav to Features / How It Works / Testimonials / Pricing / FAQ, primary CTA button; wraps gracefully on mobile and stays keyboard accessible); `scroll-behavior: smooth` gated behind `prefers-reduced-motion` with `scroll-padding-top` for the sticky header; body dressed in `--gradient-forest` with layered vegetation-band gradients; a global firefly particle layer (`aria-hidden`, `pointer-events: none`, spans generated by `script.js`, animated with `firefly 4s ease-in-out infinite` and staggered delays).

**5.1 Hero**
Full-viewport (`min-height: 100svh`) forest-depth gradient with concentrated fireflies; Rajdhani letter-spaced neon eyebrow; Orbitron `h1` with subtle `--glow-text` (glow must not harm legibility); subheadline; two CTAs (`.btn--primary` + `.btn--secondary`); a glass stat strip (3 stats); a scroll cue using a Material icon.

**5.2 Features — 3 Cards**
Glass-morphism cards, each with a Material Symbol icon inside a glowing orb, an Orbitron/Rajdhani title, and English copy (suggested themes: bioluminescent networks, living-data canopy, regenerative energy — you finalize). Full card states per §2.2.

**5.3 How It Works — 3 Steps**
Three numbered panels (01/02/03 in Orbitron), each with a Material icon, title, and copy, connected by a glowing gradient line — horizontal on desktop, vertical on mobile.

**5.4 Testimonials**
Three quote cards: avatar as an initials circle with a neon ring (no images), name, role, quote; vary accents with Toucan Yellow and Orchid Purple; hover glow per §2.2.

**5.5 Pricing — 3 Tiers**
Three cards with themed tier names, Orbitron prices, feature lists with Material `check_circle` icons, and a CTA per tier opening the confirmation modal (§2.4). The middle tier is featured: elevated, neon border, "Most Popular" badge, `.btn--primary`; side tiers use `.btn--secondary`.

**5.6 FAQ**
Native `details/summary` accordion with 5–6 themed Q&As; custom Material `expand_more` marker rotating on `[open]`; animated reveal; natively keyboard accessible.

**5.7 Final CTA**
Glass panel over a luminous gradient hotspot; headline, supporting copy, and the email-capture `.input-group` (§2.3) with a submit button demonstrating loading → success states and `aria-live` confirmation.

**5.8 Footer**
Secondary links (About, Contact, Privacy, Terms — anchor to sections where applicable, otherwise styled `href="#"` with full hover/focus states), Google Material icon connectivity links, copyright line, and a back-to-top control using smooth scroll.