# CTA Section ("Let's Talk") — Summary & Build Guide

## 1. Summary

The CTA banner (`id="cta"`) is the closing call-to-action shown after Why Choose Us and before the FAQ. It is a rounded brand-blue panel with all content centred horizontally and vertically, a slowly shifting gradient, and a ripple animation on the right. 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 />`
- Shared UI: `ScrollReveal` only
- Icon (`lucide-react`): `ArrowRight`
- Animations (defined in `src/app/globals.css`): `animate-gradient-shift`, `animate-ripple`, `animate-core-pulse`, plus existing `animate-float-slow` and `animate-drift-a/b/c`

### Copy

| Element | Text |
|---------|------|
| Pill | Let's Talk |
| Heading | Have an idea worth / turning into an app? (line break from `sm` up) |
| Description | Let's turn your idea into a mobile product people love to use. |
| Primary button | Start a Conversation → `#contact` |
| Secondary button | Explore Our Apps → `#work` |

## 2. How It Is Built

### 2.1 Section shell

```tsx
<section id="cta"
  className="relative flex min-h-[34rem] items-center justify-center overflow-hidden rounded-[2rem]
             bg-[linear-gradient(135deg,var(--color-accent)_0%,var(--color-accent)_55%,var(--color-accent-600)_100%)]
             bg-[length:180%_180%] animate-gradient-shift py-24 text-center
             sm:min-h-[38rem] sm:rounded-[3rem] sm:py-28 lg:min-h-[42rem]">
```

- `flex items-center justify-center` centres the content both ways. Minimum height is 34rem on mobile, 38rem on tablet and 42rem on desktop.
- The background uses the **theme colour variables** (`--color-accent` `#0094EE`, `--color-accent-600` `#0077BE`), so it follows the site theme. It is mostly the theme blue and deepens only toward the bottom-right corner.
- `bg-[length:180%_180%]` plus `animate-gradient-shift` (18 s, ease-in-out, looping) slides the gradient slowly back and forth.

### 2.2 Background decoration (all CSS, `aria-hidden`)

- **Soft circles (left):** three large translucent white circles (`bg-white/[0.07]`), two of them drifting slowly (20 s and 24 s).
- **Dots:** three small dots that drift (`animate-drift-a/b/c`). Two are hidden on mobile.
- **Ripple waves (right):** a square container, 30rem on mobile up to 40rem on desktop, positioned on the right (`lg:right-[2%]`).
  - 2 static rings (22% and 8% inset), so the design still holds when motion is reduced.
  - 3 expanding rings (`animate-ripple`, 6 s, delays 0, −2 s and −4 s). Each scales from 0.3 to 1 while fading in and out, which reads as a wave.
  - A glowing cyan core (`animate-core-pulse`, 4 s) with a lighter inner circle.
  - On mobile the container sits low (`top-[84%]`) and at 70% opacity so the glow doesn't sit behind the text.

### 2.3 Content

A centred column (`max-w-[50rem]`) with each part wrapped in `ScrollReveal` at delays of 0, 100, 200 and 300 ms:

1. Pill: `bg-white/15`, `backdrop-blur-sm`, letter-spaced.
2. `h2`: display font, `text-4xl` → `sm:text-5xl` → `lg:text-[3.5rem]`, white.
3. Description: `max-w-xl`, white, `text-base` → `sm:text-lg`.
4. Buttons: stacked and full-width on mobile, in a row from `sm`:
   - Primary: white pill with theme-blue text, soft shadow, lifts on hover, arrow slides right.
   - Secondary: white outline pill that fills faintly on hover.
   - Both are at least 48px tall with a visible white focus ring (offset colour matched to the blue).

### 2.4 Animations added to `globals.css`

```css
@theme {
  --animate-ripple: ripple 6s cubic-bezier(0.22, 0.6, 0.36, 1) infinite;
  --animate-core-pulse: core-pulse 4s ease-in-out infinite;
  --animate-gradient-shift: gradient-shift 18s ease-in-out infinite;
  /* ripple: scale .3→1, opacity 0 → .55 (at 15%) → 0
     core-pulse: scale 1 ↔ 1.08
     gradient-shift: background-position 0% 40% ↔ 100% 60% */
}
```

### 2.5 Step-by-step to recreate

1. Add the three animations above to `globals.css`.
2. Create `CtaBanner.tsx` with the section, background decoration and content.
3. Place `<CtaBanner />` in `src/app/page.tsx` between `<WhyChoose />` and `<Faq />`.
4. Make sure `id="contact"` and `id="work"` exist so the buttons scroll somewhere.

## 3. Notes & Things to Review

- **Reduced motion:** the global `prefers-reduced-motion` rule already shortens animations, and each animated element also has `motion-reduce:animate-none`. The static rings and circles remain, so the section still looks designed.
- **Contrast:** white text on the `#0094EE` part of the gradient is roughly 3:1. That passes for the large heading and the buttons' labels but is borderline for the smaller description. If you need stricter accessibility, use a deeper blue (for example start the gradient at `--color-accent-600`).
- **Corners and neighbours:** the rounded corners (32px, 48px from `sm`) show the page background behind them. Above and below are light sections, so they look fine; changing neighbouring backgrounds could make the corners look off.
- **Performance:** there are no blur filters. The animations are opacity and transform only, plus a slow background-position shift, which repaints the section but is light. The ripple has three large concurrent elements; check on very low-end phones.
- **Copy and positioning:** "Have an idea worth turning into an app?" fits the mobile-app positioning. "Let's Talk" is kept as the pill. The contact form further down still uses some services-style wording ("Tell us about your project", "Work email").
- **Shared anchors:** nothing in the header links to `#cta`; it's reached by scrolling.
- **Removed earlier versions:** dark navy and light spotlight versions, the phone-screens showcase and its `MobileProductVisual` file, and the floating glass cards are all gone.