Contact Form 1

1import { Mail, MapPin, Phone } from 'lucide-react'
2 
3import { Button } from '@/components/ui/button'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
6import { Input } from '@/components/ui/input'
7import { Textarea } from '@/components/ui/textarea'
8 
9export function ContactSection1() {
10  return (
11    <section className='py-16'>
12      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
13        <div className='mb-16 text-center'>
14          <h2 className='mb-4 text-3xl font-bold text-balance md:text-4xl'>Get in Touch</h2>
15          <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
16            Have a question or want to work together? We'd love to hear from you. Send us a message and we'll respond as
17            soon as possible.
18          </p>
19        </div>
20 
21        <div className='grid gap-6 lg:grid-cols-2 lg:items-stretch'>
22          <Card className='h-full py-6'>
23            <CardHeader className='px-6'>
24              <CardTitle className='text-balance'>Send us a Message</CardTitle>
25            </CardHeader>
26            <CardContent className='flex flex-col gap-6 px-6'>
27              <FieldGroup>
28                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
29                  <Field>
30                    <FieldLabel htmlFor='first-name-aB3x9'>First name</FieldLabel>
31                    <Input id='first-name-aB3x9' placeholder='John' className='h-9' />
32                  </Field>
33                  <Field>
34                    <FieldLabel htmlFor='last-name-cD4y8'>Last name</FieldLabel>
35                    <Input id='last-name-cD4y8' placeholder='Doe' className='h-9' />
36                  </Field>
37                </div>
38                <Field>
39                  <FieldLabel htmlFor='email-eF5z7'>Email</FieldLabel>
40                  <Input id='email-eF5z7' type='email' placeholder='john@example.com' className='h-9' />
41                </Field>
42                <Field>
43                  <FieldLabel htmlFor='subject-gH6w6'>Subject</FieldLabel>
44                  <Input id='subject-gH6w6' placeholder='How can we help?' className='h-9' />
45                </Field>
46                <Field>
47                  <FieldLabel htmlFor='message-iJ7v5'>Message</FieldLabel>
48                  <Textarea
49                    id='message-iJ7v5'
50                    placeholder='Tell us more about your project...'
51                    className='min-h-[120px]'
52// … truncated