# Let's Talk Section — Summary & Build Guide

The eyebrow "Let's talk" belongs to the dark call-to-action banner (`id="cta"`), which sits between Why Choose Us and the FAQ. Its buttons lead to the Contact section (`id="contact"`), so section 4 covers the Contact form too.

## 1. Summary

A full-width dark banner that asks visitors to start a conversation. It has a headline, one supporting line and two buttons, over a decorative background of glows, grid, rings and three floating cards. It has no state or data file, so it is a server component with hard-coded copy.

- Component: `src/components/CtaBanner.tsx`
- Rendered in `src/app/page.tsx` via `<CtaBanner />`, after `<WhyChoose />` and before `<Faq />`
- Shared UI: `ScrollReveal` only (it doesn't use `SectionHeader` or `SectionBackdrop`)
- Icons (`lucide-react`): `ArrowRight`, `BarChart3`, `CheckCircle2`, `Smartphone`

### Copy

| Element | Text |
|---------|------|
| Eyebrow | Let's talk |
| Heading | Have an idea worth building? |
| Sub-copy | Let's turn it into a product people love to use. |
| Primary button | Start a Conversation → `/#contact` |
| Secondary button | Explore Our Products → `/#work` |
| Floating card 1 | Product insights — Measured after launch |
| Floating card 2 | Release shipped — Design to deploy |
| Floating card 3 | iOS + Android — One product, every screen |

## 2. How It Is Built

### 2.1 Section shell

```tsx
<section id="cta" className="relative overflow-hidden bg-[#0B1220] py-20 text-center sm:py-24 lg:py-32">
  <div aria-hidden className="pointer-events-none absolute inset-0"> …background… </div>
  <div className="container relative">
    <ScrollReveal variant="scale" className="mx-auto max-w-3xl"> …content… </ScrollReveal>
  </div>
</section>
```

- Solid dark navy (`#0B1220`) background, centered text, `overflow-hidden` so the glows don't spill.
- The section has no `scroll-mt-*`, and nothing in the nav links to `#cta`.

### 2.2 Background layers (all CSS, no images)

- Two large blurred blue glows (top-left and bottom-right) that drift slowly with `animate-float-slow` (13 s and 15 s).
- A faint white grid (56px) masked to a radial fade in the centre.
- One solid and one dashed ring at the edges.
- Three small drifting dots and diamonds.
- Three floating glass cards (`bg-white/6 backdrop-blur-sm`), shown only from `xl`, positioned left-top, left-bottom and right, with floating animations.

### 2.3 Content

- Eyebrow: small uppercase text in a light accent (`accent-300`) with a dot.
- `h2`: display font, `text-3xl` → `sm:text-4xl` → `lg:text-[3rem]`, white.
- Supporting line: `max-w-xl`, white at 75% opacity.
- Buttons stack on mobile and sit in a row from `sm`:
  - Primary: solid accent pill with a blue shadow, lifts on hover, and its arrow slides right.
  - Secondary: outlined white pill that fills faintly on hover.
  - Both set `focus-visible:ring-offset-[#0B1220]` so the focus ring offset matches the dark background.

### 2.4 Step-by-step to recreate

1. Create `CtaBanner.tsx` with the section, background layers and content above.
2. Make sure the animation utilities exist in `globals.css` (`animate-float-slow`, `animate-drift-a/b/c`, `animate-float-card-a/b/c`) and `ScrollReveal` is available.
3. Place `<CtaBanner />` in `src/app/page.tsx` before the FAQ.
4. Make sure `id="contact"` and `id="work"` exist so the buttons scroll to something.

## 3. Where "Start a Conversation" Goes: the Contact Section (`#contact`)

- Component: `src/components/Contact.tsx` (client component). Text comes from `src/lib/content.ts` (`contactInfo`, `offices`, `contactSubmitCta`).
- Left column: eyebrow "Contact Us", heading "Let's build **something great** together.", a short line, four info rows (Offices, Email, Phone, Response time) and the office addresses.
- Right column: a card with a form (Name, Work email, Project details) and a submit button.
- The form posts with `fetch` to `process.env.NEXT_PUBLIC_FORMSPREE_ENDPOINT`. If that variable isn't set, it shows "Form is not configured. Please email us directly." Success shows a "Thank you!" state; failure shows an error message.
- It has a submitting state (spinner, disabled button), `required` fields and labelled inputs.

## 4. Notes & Things to Review

- **Positioning:** "Have an idea worth building? Let's turn it into a product people love to use." fits the product story. The form copy is more services-like ("Tell us about your project", "Project details", "Work email", "your requirements"). Consider "Tell us about your idea" and plain "Email" to match.
- **Floating cards:** "Release shipped" and "Product insights — Measured after launch" are decorative and imply no numbers, but they read like real product events. Keep them clearly generic.
- **Form setup:** `NEXT_PUBLIC_FORMSPREE_ENDPOINT` must be set in `.env` or the form can't send. The endpoint value is public in the browser bundle, which is normal for Formspree but worth knowing.
- **Reduced motion:** the drifting and floating animations are covered only by the global reduced-motion CSS; consider explicit `motion-reduce:` variants and fewer continuous animations.
- **Performance:** two large blurs (`blur-[120px]`, `blur-[130px]`) run with continuous float animations, which can be costly on low-end phones. `backdrop-blur-sm` on the cards adds to that, though they only render from `xl`.
- **Contrast:** `text-white/60` on the small card captions is close to the minimum contrast on the dark background. Check it if the cards become more prominent.
- **Duplicate CTA:** the header now has a "Join Us" button, the Hero has "Explore Our Products" and this banner repeats both. That is consistent but fairly repetitive.
- **Anchors:** nothing links to `#cta`, and the Contact section is reached through these buttons and the footer.