Загрузка...
Адаптивная форма для сбора запросов на проекты. Включает поля ввода, выбора, textarea, чекбокс NDA. Идеально для агентств.
<div id="contact" class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl mt-6 pt-5 pr-5 pb-5 pl-5 max-w-5xl">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="space-y-4">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-300 ring-1 ring-emerald-300/20 px-2.5 py-1 text-xs">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Booking Q4
</div>
<h4 class="text-white font-semibold tracking-tight">Start a project</h4>
<ul class="space-y-2 text-sm text-neutral-300">
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
<span class="">Senior engineers and designers only — no handoffs, no fluff.</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
<span class="">Transparent weekly demos, metrics, and delivery plans.</span>
</li>
<li class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-0.5"><path d="M20 6 9 17l-5-5" class=""></path></svg>
<span class="">Security, accessibility, and performance baked-in.</span>
</li>
</ul>
<div class="flex items-center gap-3 pt-2 text-sm">
<a href="mailto:hello@relay.dev" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail w-4 h-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
hello@relay.dev
</a>
<span class="text-white/20">•</span>
<a href="tel:+14155551234" class="inline-flex items-center gap-2 text-white hover:text-amber-300 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone w-4 h-4"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
+1 (415) 555‑1234
</a>
</div>
</div>
<form id="contact-form" class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="sm:col-span-1">
<label for="name" class="block text-xs font-medium text-white/80 mb-1">Your name</label>
<input id="name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="email" class="block text-xs font-medium text-white/80 mb-1">Email</label>
<input id="email" name="email" type="email" required="" placeholder="jane@company.com" class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="company" class="block text-xs font-medium text-white/80 mb-1">Company</label>
<input id="company" name="company" type="text" placeholder="Acme Inc." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
</div>
<div class="sm:col-span-1">
<label for="project-type" class="block text-xs font-medium text-white/80 mb-1">Project type</label>
<select id="project-type" name="projectType" class="w-full appearance-none outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3">
<option class="bg-neutral-900" value="product">New product build</option>
<option class="bg-neutral-900" value="feature">Feature delivery</option>
<option class="bg-neutral-900" value="advisory">Advisory / audit</option>
<option class="bg-neutral-900" value="ai">AI integration</option>
</select>
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-xs font-medium text-white/80 mb-1">What are you building?</label>
<textarea id="message" name="message" rows="4" placeholder="A few sentences about your goals, timeline, and success metrics." class="w-full placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-400/60 focus:border-amber-300 transition text-sm text-white bg-white/10 border-white/10 border rounded-xl pt-2.5 pr-3 pb-2.5 pl-3"></textarea>
</div>
<div class="sm:col-span-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div class="flex gap-2 text-xs text-white/70 items-center">
<input id="nda" name="nda" type="checkbox" class="h-4 w-4 rounded bg-white/10 border-white/20 text-amber-400 focus:ring-amber-400/60">
<label for="nda" class="">Please send an NDA</label>
</div>
<div class="flex items-center gap-2">
<button type="submit" class="inline-flex gap-2 ring-1 ring-amber-300 hover:bg-amber-300 transition text-sm font-medium text-neutral-900 bg-amber-400 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4 shadow items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
Send request
</button>
</div>
</div>
</form>
</div>
</div>