computecloud.in/src/lib/components/contact.svelte

<script lang="ts">
	import Altcha from './altcha.svelte';
	import { PUBLIC_LEAD_SUBMIT_URL } from '$env/static/public';

	let isSubmitted = false;

	const handleSubmit = async (
		e: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }
	) => {
		e.stopPropagation();
		e.preventDefault();
		const data = new FormData(e.currentTarget!);

		const res = await fetch(PUBLIC_LEAD_SUBMIT_URL, {
			body: data,
			method: 'POST'
		});

		if (res.ok) {
			isSubmitted = true;
		} else {
			alert('Something went wrong');
		}
	};
</script>

<section id="contact" class="bg-black py-32">
	<div class="container mx-auto px-8">
		<div
			class="flex flex-col gap-20 rounded-[3rem] border border-white/5 bg-[#080808] p-12 md:p-20 lg:flex-row"
		>
			<div class="lg:w-1/2">
				<h2 class="mb-8 text-5xl font-black tracking-tighter text-white">
					Initiate <br />Migration.
				</h2>
				<p class="mb-12 text-lg leading-relaxed font-light text-slate-400">
					Every great infrastructure starts with a conversation. Let's discuss your hardened
					roadmap.
				</p>

				<div class="space-y-10">
					<div class="flex items-start space-x-6">
						<div
							class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-cyan-500"
						>
							<i class="fas fa-envelope text-sm"></i>
						</div>
						<div>
							<p class="mb-1 text-[10px] font-bold tracking-widest text-slate-600 uppercase">
								Direct Communication
							</p>
							<p class="text-lg font-medium text-white">solutions@computecloud.in</p>
						</div>
					</div>
					<div class="flex items-start space-x-6">
						<div
							class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-cyan-500"
						>
							<i class="fas fa-map-pin text-sm"></i>
						</div>
						<div>
							<p class="mb-1 text-[10px] font-bold tracking-widest text-slate-600 uppercase">
								Operational Hub
							</p>
							<p class="text-lg font-medium text-white">Kochi, India</p>
						</div>
					</div>
				</div>
			</div>

			<div class="lg:w-1/2">
				{#if isSubmitted}
					<div
						class="animate-in fade-in zoom-in flex h-full flex-col items-center justify-center py-12 text-center duration-500"
					>
						<div
							class="mb-8 flex h-20 w-20 items-center justify-center rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-500"
						>
							<i class="fas fa-paper-plane text-2xl"></i>
						</div>
						<h3 class="mb-4 text-3xl font-black tracking-tighter text-white">Acknowledge.</h3>
						<p class="font-light text-slate-500">
							Our lead architect has been notified. Standby for contact.
						</p>
					</div>
				{:else}
					<form onsubmit={handleSubmit} class="space-y-6">
						<div class="grid gap-6 md:grid-cols-2">
							<div>
								<input
									type="text"
									class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
									placeholder="Your Name"
									name="name"
								/>
							</div>
							<div>
								<input
									type="email"
									required
									class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
									placeholder="Work Email"
									name="email"
								/>
							</div>
						</div>
						<div>
							<input
								type="text"
								class="w-full rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
								placeholder="Organization / Project"
								name="organization"
							/>
						</div>
						<div>
							<select
								class="w-full appearance-none rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-slate-400 transition-all focus:border-cyan-500 focus:outline-none"
								name="category"
							>
								<option class="bg-slate-900">Cost Optimization</option>
								<option class="bg-slate-900">Hardened Migration</option>
								<option class="bg-slate-900">DevSecOps Audit</option>
								<option class="bg-slate-900">Zero-Trust Implementation</option>
								<option class="bg-slate-900">Managed SRE</option>
							</select>
						</div>
						<div>
							<textarea
								rows={4}
								class="w-full resize-none rounded-2xl border border-white/10 bg-black/40 px-6 py-4 font-light text-white transition-all focus:border-cyan-500 focus:outline-none"
								placeholder="Tell us about your requirements..."
								name="requirements"
							></textarea>
						</div>
						<div>
							<Altcha hideFooter={true} hideLogo={true} />
						</div>
						<button
							type="submit"
							class="w-full rounded-2xl bg-white py-5 text-xs font-black tracking-[0.3em] text-black uppercase shadow-2xl transition-all hover:scale-[1.02] hover:bg-cyan-500 active:scale-95"
						>
							Ask us
						</button>
					</form>
				{/if}
			</div>
		</div>
	</div>
</section>