Business Landing Page

Create a project scaffold for a business landing page:

FILES:
- index.html
- assets/css/style.css
- assets/js/main.js

In style.css, define CSS custom properties on :root:
- Font families: a clean sans-serif for headings (system-ui),
  a readable sans-serif for body text
- Type scale: at least 6 steps from sm to 5xl
- Spacing scale: at least 8 steps from xs to 5xl
- Colors: a primary brand color (blue works well for trust),
  a contrasting CTA color, neutral grays for text and borders,
  a dark background and a white surface color
- Border radii: sm (4px), md (8px), lg (16px), full (9999px)
- Shadows: sm, md, lg for elevation
- Transitions: fast (0.15s), base (0.2s), slow (0.3s)
- Max content width: 1200px
- A full CSS reset (box-sizing, margin, padding)

In index.html, set up a minimal HTML5 document with lang="en",
viewport meta, and links to the stylesheet and script. Leave the
body empty for now.

Build the navigation and hero for this business landing page:

NAVIGATION:
- Sticky header that stays visible on scroll
- Logo/brand name on the left
- Nav links: Features, Pricing, FAQ, Contact
- CTA button on the right: "Get Started" with a filled
  background using the primary CTA color
- Use <header> and <nav> with aria-label="Main navigation"
- Mobile: collapse links into a hamburger <button> with
  aria-expanded. Keep the CTA visible outside the menu.

HERO:
- Centered layout, max-width container
- Large headline (<h1>): a clear value proposition,
  something like "Ship faster with [Product Name]"
- Subheadline (<p>): one sentence expanding on the value.
  Keep it under 20 words
- Two CTA buttons side by side:
  - Primary: "Get Started Free" (filled, high contrast)
  - Secondary: "See How It Works" (outlined/ghost)
- Trust bar below the CTAs: a row of 4-6 placeholder
  company logos (gray, small) with text like
  "Trusted by 10,000+ teams"
- The hero should feel spacious. Use generous vertical
  padding (at least 120px top and bottom)

Use CSS custom properties for all spacing, colors, and type.
Use BEM naming for CSS classes.

Build the features section for this business landing page:

SECTION HEADING:
- Centered <h2>: "Everything you need to [outcome]"
- Short subtitle paragraph below

FEATURE CARDS:
- 6 cards in a 3-column CSS Grid (2 columns tablet, 1 mobile)
- Each card is a <div> inside a <section>:
  - SVG icon placeholder (40x40) in a rounded container
  - Feature name as <h3>
  - 1-2 sentence description as <p>
- Cards should have padding, a subtle border, and rounded
  corners using the design token border-radius
- On hover, cards get a slight background shift or
  subtle shadow elevation

ICON PLACEHOLDERS:
- Use simple inline SVGs: a circle with a centered symbol
  like a checkmark, lightning bolt, shield, chart, gear, lock
- Keep them monochrome, using the primary brand color

Use an id="features" on the section so nav links work.
Maintain heading hierarchy: <h2> for section, <h3> for cards.

Build the social proof section for this business landing page:

TESTIMONIALS:
- Section <h2>: "What our customers say"
- 3 testimonial cards in a row (stack on mobile):
  - A <blockquote> with 2-3 sentences of placeholder text
  - Attribution: avatar placeholder (circle), name, and title/company
  - Use <figure> wrapping <blockquote> and <figcaption>
- Cards have a subtle border, padding, and rounded corners
- Add a large quotation mark as a decorative element
  (CSS ::before pseudo-element, not in the DOM)

LOGO BAR:
- A horizontal row of 5-6 company logo placeholders
- Use gray rectangles with rounded corners as placeholders
- Add "Trusted by leading companies" or similar as a
  small label above the logos
- Logos should be evenly spaced using flexbox with
  justify-content: space-around
- Add a subtle top border to separate from testimonials
- Logos are decorative: use <img> with alt=""

Keep the section background the same as the page.
All spacing uses design token custom properties.

Build the pricing section for this business landing page:

LAYOUT:
- Section <h2>: "Simple, transparent pricing"
- Subtitle: one line about no hidden fees
- 3 pricing cards side by side (stack on mobile)
- Add id="pricing" for anchor navigation

CARD STRUCTURE (each card):
- Plan name (<h3>): Starter, Pro, Enterprise
- Price: large number with "/mo" suffix
- Feature list: <ul> with 4-6 features per plan,
  each with a checkmark (✓) prefix
- CTA button at the bottom

HIGHLIGHTED PLAN:
- The middle card (Pro) should stand out:
  - Slightly taller (negative top margin or extra padding)
  - Stronger border or different border color
  - A "Most Popular" badge at the top using a pill shape
  - CTA button uses the primary filled style
- Other cards use an outlined/ghost CTA button

RESPONSIVE:
- 3 columns on desktop using CSS Grid
- Stack to single column on mobile
- The highlighted card should stay visually prominent
  when stacked

All prices, names, and features use placeholder content.

Build the FAQ section for this business landing page:

LAYOUT:
- Section <h2>: "Frequently asked questions"
- Centered, max-width 720px container
- Add id="faq" for anchor navigation

ACCORDION:
- Use native <details> and <summary> elements (no JS needed)
- 5-6 questions with placeholder answers
- Questions to include:
  - "How does the free trial work?"
  - "Can I change plans later?"
  - "What payment methods do you accept?"
  - "Is there a setup fee?"
  - "Do you offer refunds?"
- Each answer should be 2-3 sentences

STYLING:
- Each <details> has a bottom border to separate items
- <summary> has padding, cursor: pointer, and a
  custom open/close indicator (+ / −) on the right
  using ::after pseudo-element
- Hide the default disclosure triangle with
  summary::marker and ::-webkit-details-marker
- <summary> text is bold, answer text is regular weight
  with muted color
- Animate the open/close with a height transition
  if possible, otherwise keep it instant

Keep the section clean and minimal.

Build the final CTA section and footer for this business landing page:

FINAL CTA SECTION:
- Full-width section with a different background
  (slightly lighter or use a subtle gradient)
- Centered layout:
  - Bold <h2>: "Ready to get started?"
  - Short paragraph: one sentence reinforcing the value
  - Two CTA buttons (same style as hero):
    Primary "Start Free Trial" and Secondary "Talk to Sales"
- Generous vertical padding (at least 80px)
- Add id="contact" for anchor navigation

FOOTER:
- Use <footer> with role="contentinfo"
- 4-column grid layout:
  - Column 1: Logo, 2-sentence company description
  - Column 2: "Product" links (Features, Pricing, FAQ,
    Integrations, Changelog)
  - Column 3: "Company" links (About, Blog, Careers, Press)
  - Column 4: "Legal" links (Privacy, Terms, Security)
- Bottom bar with copyright text on left and social
  icons on right (GitHub, Twitter/X, LinkedIn)
- Social links use <a> with aria-label and
  target="_blank" rel="noopener noreferrer"

RESPONSIVE:
- Footer grid: 4 columns desktop, 2 columns tablet,
  1 column mobile
- CTA buttons stack vertically on mobile

Finalize this business landing page for production:

SEO:
- Complete <head> meta tags:
  - <title> matching the h1 + "| [Brand Name]"
  - meta description (150-160 characters)
  - Open Graph: og:title, og:description, og:image (1200x630),
    og:url, og:type="website"
  - Twitter card: summary_large_image
  - Canonical URL
  - Favicon (link to a placeholder SVG)
  - theme-color matching the background
- Add JSON-LD structured data using the Organization schema:
  name, url, logo, description, sameAs (social links)
- Verify heading hierarchy: single h1, no skipped levels

PERFORMANCE:
- Add loading="lazy" to all images below the fold
- Add width and height attributes to every <img>
- Add fetchpriority="high" to the hero LCP element
- Add <link rel="preconnect"> for external font domains
- Minify the CSS

ACCESSIBILITY:
- Color contrast meets WCAG AA (4.5:1 text, 3:1 large text)
- Keyboard navigation: tab through the page, verify focus
  order is logical, nothing is trapped
- Skip link as first focusable element
- All interactive elements have visible focus states
- FAQ accordion is keyboard-operable (native details/summary)
- CTA buttons have descriptive text (not just "Click here")

DEPLOYMENT:
- Add a netlify.toml or vercel.json with:
  - Custom 404 page
  - Security headers (X-Frame-Options, X-Content-Type-Options,
    Referrer-Policy, Permissions-Policy)
  - Cache-Control for static assets (1 year for CSS/JS/images)
- Create a README.md with project name and deploy instructions