Changes

Co-authored-by: yusuf-intern <248833874+yusuf-intern@users.noreply.github.com>

src/routes/enquiry.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PageHero, Section } from "@/components/page-shell";
+import { useState } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+export const Route = createFileRoute("/enquiry")({
+  head: () => ({
+    meta: [
+      { title: "Enquiry — Request a Misting System Quote" },
+      { name: "description", content: "Send a quick enquiry to Promist for a misting system quote or consultation." },
+      { property: "og:title", content: "Enquiry" },
+      { property: "og:description", content: "Request a Promist misting system quote." },
+    ],
+  }),
+  component: Enquiry,
+});
+
+function Enquiry() {
+  const [sent, setSent] = useState(false);
+  return (
+    <>
+      <PageHero
+        eyebrow="Enquiry"
+        title="Tell us about your project."
+        lede="A Promist engineer will get back to you with sizing, pricing and delivery details."
+      />
+      <Section>
+        <div className="grid lg:grid-cols-5 gap-16">
+          <form
+            className="lg:col-span-3 space-y-6"
+            onSubmit={(e) => { e.preventDefault(); setSent(true); }}
+          >
+            {[
+              { l: "Full name", n: "name", t: "text" },
+              { l: "Email address", n: "email", t: "email" },
+              { l: "Phone", n: "phone", t: "tel" },
+              { l: "Company (optional)", n: "company", t: "text" },
+            ].map((f) => (
+              <label key={f.n} className="block">
+                <span className="text-xs uppercase tracking-widest text-muted-foreground">{f.l}</span>
+                <input required={f.n !== "company"} type={f.t} name={f.n} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red" />
+              </label>
+            ))}
+            <label className="block">
+              <span className="text-xs uppercase tracking-widest text-muted-foreground">How can we help?</span>
+              <textarea required name="message" rows={5} className="mt-2 w-full border-b bg-transparent py-3 outline-none focus:border-brand-red resize-none" />
+            </label>
+            <button type="submit" className="inline-flex items-center gap-2 bg-brand-red text-white px-6 py-3.5 rounded-md text-sm font-semibold hover:opacity-90">
+              {sent ? "Thanks — we'll be in touch" : "Submit enquiry"} <ArrowUpRight className="h-4 w-4" />
+            </button>
+          </form>
+          <aside className="lg:col-span-2 border-l pl-10 space-y-8">
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Call</div>
+              <p className="mt-2 font-display text-2xl font-bold">+971 4 251 5596</p>
+              <p className="font-display text-2xl font-bold">+971 55 209 8628</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Email</div>
+              <p className="mt-2">info@promistcool.com</p>
+            </div>
+            <div>
+              <div className="text-xs uppercase tracking-widest text-brand-red font-semibold">Location</div>
+              <p className="mt-2">Dubai, United Arab Emirates</p>
+            </div>
+          </aside>
+        </div>
+      </Section>
+    </>
+  );
+}