Contact Section One

1import { ArrowUpRight, BookOpen, Code2, Mail, MessagesSquare } from 'lucide-react'
2import Link from 'next/link'
3 
4const contactCards = [
5  {
6    title: 'Sales',
7    description: 'Talk with our team about plans, pricing, team rollout, or custom requirements.',
8    href: '#',
9    linkLabel: 'Contact sales',
10  },
11  {
12    title: 'Support',
13    description: 'Get help with product questions, account issues, billing, or technical problems.',
14    href: '#',
15    linkLabel: 'Get support',
16  },
17]
18 
19const contactLinks = [
20  {
21    title: 'Community',
22    description: 'Connect with builders, ask questions, and share feedback.',
23    href: '#',
24    linkLabel: 'Join community',
25    icon: MessagesSquare,
26  },
27  {
28    title: 'General questions',
29    description: 'For partnerships, press, or anything that does not fit elsewhere.',
30    href: 'mailto:hello@example.com',
31    linkLabel: 'hello@example.com',
32    icon: Mail,
33  },
34  {
35    title: 'Documentation',
36    description: 'Browse setup guides, feature details, and product tutorials.',
37    href: '#',
38    linkLabel: 'View docs',
39    icon: BookOpen,
40  },
41  {
42    title: 'Developers',
43    description: 'Explore API guides, SDKs, webhooks, and integration examples.',
44    href: '#',
45    linkLabel: 'Developer docs',
46    icon: Code2,
47  },
48]
49 
50export default function ContactSectionOne() {
51  return (
52    <section className="relative py-16 md:py-24">
53      <div className="relative mx-auto max-w-6xl px-6">
54        <div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
55          {/* Left side */}
56          <div className="lg:sticky lg:top-24 lg:self-start">
57            <p className="text-sm font-medium text-primary">Contact</p>
58 
59            <h2 className="mt-3 max-w-xl text-4xl font-semibold tracking-tight text-foreground md:text-5xl">
60              How can we help?
61            </h2>
62 
63            <p className="mt-5 max-w-md text-lg leading-7 text-balance text-muted-foreground">
64              Get in touch with the right team for sales, support, partnerships, product questions,
65              or technical help.
66            </p>
67          </div>
68 
69          {/* Right side */}
70          <div className="min-w-0">
71            <div className="grid gap-4 md:grid-cols-2">
72              {contactCards.map((card) => {
73                return (
74                  <Link
75                    key={card.title}
76                    href={card.href}
77// … truncated