Vibe Coding Project 1: Dark Landing Page

Build a full, dark-themed landing page from scratch using AI as your CSS co-pilot. Then port it to WordPress with Bricks Builder.

🎯 Project Goal

A dark, modern SaaS landing page featuring:

• Sticky glassmorphism navigation.
• Hero section with gradient background and animated headline.
• 3-column features section.
• Testimonial quote block.
• CTA banner.
• Footer.

Phase 1: Prompt AI for the Base Design

Use this master prompt:

Build a complete dark-themed SaaS landing page in one HTML file with embedded CSS.
Design specs:
- Color scheme: background #0f0f0f, surface #1c1c1e, primary #6c63ff, text #f0f0f0
- Font: 'Inter' from Google Fonts
- CSS variables for all tokens in :root
- Sections: sticky nav, hero, 3-col features, testimonial, CTA banner, footer
- Hero: min-height 100vh, flexbox centered, gradient background, h1 uses clamp() for fluid size
- Nav: position sticky, backdrop-filter blur(12px), semi-transparent background
- Feature cards: hover lift effect (transform translateY), box-shadow transition
- Fully mobile-first responsive with media queries at 768px and 1024px
- Use BEM-style class naming
- Add smooth scroll behavior
Output: a single, complete, ready-to-view HTML file.

Phase 2: Review Checklist

Before accepting AI output, verify:

• Does it use your CSS variables from :root?
• Do the cards have transition on box-shadow and transform?
• Is the nav actually position: sticky (not fixed)?
• Does the hero text scale correctly on mobile?
• Does it load Inter from Google Fonts?

Phase 3: Refinement Prompts

1. "The hero headline should fade in from below on page load using CSS keyframes."
2. "Add a subtle animated gradient background to the CTA banner section."
3. "Make the feature card icons use a glow effect consistent with --color-primary."
4. "Add a mobile hamburger menu using only CSS (checkbox toggle technique)."

Phase 4: Extract the CSS System

Once happy, ask AI to refactor:

Extract all CSS from this landing page into a standalone style.css file.
Ensure all colors, spacing, and typography use the :root variables.
Group the CSS into sections: Reset, Base, Layout, Components, Utilities.

Phase 5: Port to Bricks Builder

HTML Section	Bricks Element	CSS Class
.site-nav	Header template	.site-nav
.hero	Section	.hero-section
.features	Section → 3-col grid	.features-section
.feature-card	Container	.feature-card
.cta-banner	Section	.cta-banner
footer	Footer template	.site-footer

Apply all extracted CSS in Bricks → Settings → Custom Code → Custom CSS.