Contact

Forms 210

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;