75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { KleapForm } from "@/components/kleap-form";
|
|
import { MessageSquare, Phone, Mail } from "lucide-react";
|
|
|
|
export function ContactSection() {
|
|
const fields = [
|
|
{ name: "name", label: "Full Name", type: "text", required: true },
|
|
{ name: "email", label: "Email Address", type: "email", required: true },
|
|
{ name: "phone", label: "Phone Number", type: "tel", required: false },
|
|
{
|
|
name: "business_type",
|
|
label: "Business Type",
|
|
type: "select",
|
|
options: ["Restaurant/Café", "Startup", "Local Business", "E-commerce", "Other"],
|
|
required: true
|
|
},
|
|
{ name: "message", label: "How can we help?", type: "textarea", required: true },
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-neutral-50 dark:bg-neutral-900/50">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
|
<div>
|
|
<Heading className="mb-4">Let's Build Something Great</Heading>
|
|
<Subheading className="mb-8">
|
|
Ready to take your business online? Fill out the form and we'll get back to you within 24 hours.
|
|
</Subheading>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<Phone className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Call Us</p>
|
|
<p className="text-lg font-semibold">+1 (555) 000-0000</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<Mail className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">Email Us</p>
|
|
<p className="text-lg font-semibold">hello@websitter.com</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-green-500/10 flex items-center justify-center">
|
|
<MessageSquare className="w-5 h-5 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-muted-foreground">WhatsApp</p>
|
|
<p className="text-lg font-semibold">Chat with us now</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-background p-8 rounded-2xl shadow-sm border">
|
|
<KleapForm
|
|
formId="contact-websitter-v2"
|
|
title="Get a Free Quote"
|
|
fields={fields}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|