Contact Section
A scroll-triggered contact CTA section with a GSAP entrance animation and a hover shine effect on the email button.
ContactSection reveals its heading, description, and email CTA button with a staggered GSAP ScrollTrigger animation. The button has a shine sweep effect on hover. Fully data-agnostic — no personal details are baked in.
Installation
npx shadcn@latest add @adv/contact-sectionUsage
import { ContactSection } from '@/components/sections/contact-section';
<ContactSection
heading="CONTACT"
description="Interested in working together? Let's talk about your project."
ctaLabel="Work with me"
email="hello@example.com"
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | "CONTACT" | Section heading text. |
description | string | "Interested in working together?..." | Sub-heading paragraph. |
ctaLabel | string | "Work with me" | Button label. |
email | string | "mailto:hello@example.com" | Email address or full mailto: href for the CTA. |