About
Contact Section Description: A comprehensive and visually appealing contact section component featuring an animated background, a navigation bar, a main title, a contact form with various input types, and social media integration. Designed for reusability, responsiveness, and theme-adaptability using shadcn/ui.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Contact to your project and fits it to your theme.
Code
How Contact is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import React from 'react';
import { ContactSection } from '@/components/ui/contact';
/**
* Demo component to showcase the ContactSection.
* This demonstrates how to use the ContactSection component with various props.
*/
const DemoContactSection: React.FC = () => {
const customSocialLinks = [
{ id: '1', name: 'Facebook', iconSrc: 'https://cdn.21st.dev/assets/mirror/7a/7ab75ba93001302dc268b335c76585deec01579ae55537f9a12e93c38d478e56.svg', href: 'https://facebook.com/yourprofile' },
{ id: '2', name: 'Twitter', iconSrc: 'https://cdn.21st.dev/assets/mirror/e5/e5a4f4d91e2db3bb46e536e5c299d967834b07a389303379715a2690d182a5ac.svg', href: 'https://twitter.com/yourprofile' },
];
const handleFormSubmit = (data: any) => {
alert("Demo form submitted! Check console for data.");
console.log("Demo form data:", data);
// In a real application, you'd send this data to an API
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black">
{/*
The ContactSection component is highly customizable via props.
Here we demonstrate overriding some default values and providing
a custom submission handler.
*/}
<ContactSection
title="Let's build something amazing together!"
mainMessage="Reach out to us today! ✨"
contactEmail="info@yourcompany.com"
socialLinks={customSocialLinks}
onSubmit={handleFormSubmit}
// You can also change the background image
// backgroundImageSrc="https://images.unsplash.com/photo-1507525428034-b723cf961faf?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
</div>
);
};
export default DemoContactSection;