Overview
A centered, card-based contact section that presents multiple contact methods in an elegant grid, followed by a comprehensive contact form. Features interactive hover effects, topic selection buttons, and bottom information cards for key contact details.
Features
- Contact Method Grid: Four interactive cards for Email, Phone, Live Chat, and Schedule
- Live Status Indicator: Green dot on Live Chat card showing availability
- Integrated Contact Form: Full-featured form with name, company, email, phone, and message
- Topic Selection: Visual button grid for Sales, Support, Billing, and Other
- Bottom Info Cards: Three cards displaying location, email, and phone information
- Gradient Form Background: Subtle gradient backdrop with blur effects
- Hover Animations: Cards lift and glow on hover for better interactivity
- Response Time Badge: Trust element showing 24-hour response commitment
- Centered Layout: All content centered for maximum visual impact
- Fully Responsive: Adapts from 1 to 4 columns based on screen size
Usage
import { CenteredGridContactSection } from "@/components/blocks/contact-sections/centered-grid-contact-section";
export default function Page() {
return <CenteredGridContactSection />;
}
Customization
Tailor the component to your needs:
- Add or remove contact method cards
- Update topic selection buttons for your use case
- Modify contact information in bottom cards
- Change live chat status indicator based on availability
- Customize form fields and validation
- Update gradient colors via theme tokens
- Adjust grid columns based on number of contact methods
