Contact Section Two

1export default function ContactSectionTwo() {
2  return (
3    <section className="bg-background px-4 py-20 text-foreground md:py-28">
4      <div className="mx-auto max-w-6xl">
5        <div className="max-w-2xl">
6          <div className="mb-4 flex items-center gap-3">
7            <span className="text-sm font-medium text-muted-foreground">Contact</span>
8          </div>
9 
10          <h2 className="text-3xl font-semibold tracking-tight text-balance md:text-6xl">
11            Have something in mind? Let&apos;s make it real.
12          </h2>
13 
14          <p className="mt-4 max-w-xl text-base text-muted-foreground">
15            Send over the details and we&apos;ll get back with a clear, practical response.
16          </p>
17        </div>
18 
19        <div className="mt-12 overflow-hidden rounded border border-border bg-background">
20          <div className="grid lg:grid-cols-[0.85fr_1.15fr]">
21            {/* Left info side */}
22            <div className="relative order-2 border-t border-border p-6 md:p-8 lg:order-1 lg:border-t-0 lg:border-r">
23              <div className="hidden lg:block">
24                <div className="flex items-center gap-3 text-sm text-muted-foreground">
25                  <span className="h-px w-8 bg-border" />
26                  <span>How it works</span>
27                </div>
28 
29                <h3 className="mt-8 text-2xl font-semibold tracking-tight text-balance">
30                  We&apos;ll review your message and follow up.
31                </h3>
32 
33                <p className="mt-4 text-sm leading-6 text-muted-foreground">
34                  Include your goal, timeline, and any important details.
35                </p>
36              </div>
37 
38              <div className="grid border lg:mt-10">
39                <div className="border-b p-4">
40                  <p className="text-xs tracking-wide text-muted-foreground uppercase">Email</p>
41                  <p className="mt-1 text-sm font-medium">hello@domain.com</p>
42                </div>
43 
44                <div className="border-b p-4">
45                  <p className="text-xs tracking-wide text-muted-foreground uppercase">
46                    Response time
47                  </p>
48                  <p className="mt-1 text-sm font-medium">Within 1-2 business days</p>
49                </div>
50 
51                <div className="p-4">
52                  <p className="text-xs tracking-wide text-muted-foreground uppercase">Location</p>
53                  <p className="mt-1 text-sm font-medium">Toronto, Canada</p>
54// … truncated