Contact Section Three

1import Image from 'next/image'
2import type { CSSProperties } from 'react'
3 
4const maskSvg = `
5<svg viewBox="0 0 700 760" xmlns="http://www.w3.org/2000/svg">
6  <path
7    fill="black"
8    d="M112 0H660Q700 0 700 40V640Q700 676 664 676H652Q622 676 622 706V720Q622 760 582 760H40Q0 760 0 720V105Q0 65 40 65H58Q82 65 82 41V40Q82 0 112 0Z"
9  />
10</svg>
11`
12 
13const maskUrl = `url("data:image/svg+xml,${encodeURIComponent(maskSvg)}")`
14 
15const imageMaskStyle: CSSProperties = {
16  WebkitMask: `${maskUrl} center / 100% 100% no-repeat`,
17  mask: `${maskUrl} center / 100% 100% no-repeat`,
18}
19 
20export default function ContactSection() {
21  return (
22    <section className="min-h-svh bg-background px-4 py-4 text-foreground md:px-6 lg:px-8">
23      <div className="mx-auto flex min-h-[calc(100svh-2rem)] max-w-7xl items-center">
24        <div className="grid w-full gap-6 lg:h-[calc(100svh-3rem)] lg:max-h-175 lg:grid-cols-[0.85fr_1.15fr] lg:items-stretch">
25          {/* Form */}
26          <div className="flex items-center rounded-[2rem] border bg-background px-5 py-8 md:px-8 lg:px-12">
27            <div className="w-full">
28              <div className="mb-8">
29                <span className="text-sm text-muted-foreground">Contact us</span>
30 
31                <h2 className="mt-3 max-w-md text-3xl font-semibold tracking-tight md:text-4xl">
32                  Let&apos;s build something useful together.
33                </h2>
34 
35                <p className="mt-4 max-w-md text-sm leading-6 text-muted-foreground md:text-base">
36                  Tell us what you&apos;re working on and we&apos;ll get back to you with a clear
37                  next step.
38                </p>
39              </div>
40 
41              <form className="space-y-4">
42                <div className="space-y-2">
43                  <label htmlFor="contact-name" className="text-sm font-medium">
44                    Name
45                  </label>
46                  <input
47                    id="contact-name"
48                    name="name"
49                    type="text"
50                    autoComplete="name"
51                    required
52                    placeholder="Your name"
53                    className="h-11 w-full rounded-lg border border-border bg-background px-3 text-sm transition outline-none placeholder:text-muted-foreground focus:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/40"
54                  />
55                </div>
56 
57                <div className="space-y-2">
58// … truncated