Contact 01

1import { cn } from "@/lib/utils";
2import { Button } from "@/components/ui/button";
3import { Card } from "@/components/ui/card";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import { Phone, Mail, Send } from "lucide-react";
7 
8interface ContactInfo {
9  icon: React.ReactNode;
10  value: string;
11}
12 
13interface Contact01Props {
14  title?: string;
15  description?: string;
16  contactInfo?: ContactInfo[];
17  className?: string;
18}
19 
20const Contact01 = ({
21  title = "Get in Touch",
22  description = "Have questions about our components? Want to collaborate? We'd love to hear from you.",
23  contactInfo = [
24    { icon: <Phone className="size-4" />, value: "+1 (555) 123-4567" },
25    { icon: <Mail className="size-4" />, value: "hello@example.com" },
26  ],
27  className,
28}: Contact01Props) => {
29  return (
30    <section className={cn("container max-w-7xl mx-auto py-12 md:py-24", className)}>
31      <div className="px-6 md:px-12">
32        <div className="grid items-center gap-12 lg:grid-cols-2">
33          <div>
34            <h2 className="text-4xl md:text-5xl font-semibold leading-tight tracking-tight">
35              {title}
36            </h2>
37            <p className="mt-2 text-lg text-muted-foreground">{description}</p>
38            <div className="mt-8 flex flex-wrap gap-6">
39              {contactInfo.map((info, i) => (
40                <div key={i} className="flex items-center gap-3">
41                  <div className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
42                    {info.icon}
43                  </div>
44                  <span className="text-sm font-medium">{info.value}</span>
45                </div>
46              ))}
47            </div>
48          </div>
49          <Card className="p-8">
50            <form className="space-y-6">
51              <div className="space-y-2">
52                <Label>Your Name</Label>
53                <Input placeholder="John Doe" />
54              </div>
55              <div className="space-y-2">
56                <Label>Your Email</Label>
57                <Input type="email" placeholder="john@example.com" />
58              </div>
59              <div className="space-y-2">
60                <Label>Message</Label>
61                <Input placeholder="How can we help?" />
62              </div>
63              <Button size="lg" className="w-full">
64                <Send className="size-4" />
65                Send Message
66              </Button>
67            </form>
68// … truncated