Contact Section + Footer

Glassmorphism form
Footer included
Form is a demo

Live preview

Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message

Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]

Step 2 — the prompt · Contact Section + Footer270 lines · 13,226 chars

You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

The closer: a split layout with your pitch and contact details on the left, a frosted-glass enquiry form on the right (name, phone, email, project type, message), a satisfying animated success state after sending — and a complete site footer built in.

Perfect for

The last section of literally any site in this course.

What to prepare

Your real phone, email, and location
The project-type options for the dropdown (e.g. “Residential / Commercial / Renovation”)
Footer details: company name, one-line description, nav links

Good to know

This one matters: out of the box, the form is a demo. It plays the success animation but doesn't actually send anything anywhere — there's a placeholder where the real sending logic goes. Getting your form submissions to your inbox is its own small topic, and we cover it in a later lesson. For now, integrate the section, fill in your real contact details, and know that the phone/email links work immediately even if the form doesn't yet.