From d86738560e52321aefa8c1d4a3428fe45ec6eaa9 Mon Sep 17 00:00:00 2001 From: jyswee Date: Thu, 23 Jul 2026 22:11:18 +0000 Subject: [PATCH] Seed: services template (18 files) --- src/pages/Contact.tsx | 200 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 src/pages/Contact.tsx diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx new file mode 100644 index 0000000..52e1ab7 --- /dev/null +++ b/src/pages/Contact.tsx @@ -0,0 +1,200 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; +import { MapPin, Phone, ArrowRight } from "lucide-react"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { useSaasMutation } from "@/hooks/use-tygarun"; + +const offices = [ + { city: "San Francisco", address: "123 Design Street, Suite 400, SF, CA 94105", phone: "+1 (555) 123-4567" }, + { city: "New York", address: "456 Creative Ave, Floor 12, NY, NY 10001", phone: "+1 (555) 987-6543" }, +]; + +const faqs = [ + { q: "How long does a typical project take?", a: "Most projects take 8-12 weeks from kickoff to launch, depending on scope and complexity. We will provide a detailed timeline during our discovery phase." }, + { q: "What is your design process?", a: "We follow a four-phase process: Discovery, Design, Development, and Delivery. Each phase includes client checkpoints to ensure alignment." }, + { q: "Do you work with startups?", a: "Absolutely! We love working with startups. Our Starter plan is specifically designed for early-stage companies looking to establish their digital presence." }, + { q: "Can you help with ongoing maintenance?", a: "Yes, we offer ongoing support and maintenance packages. Most clients stay with us well beyond the initial launch for continuous improvement." }, + { q: "What technologies do you use?", a: "We work with modern frameworks like React, Next.js, and TypeScript on the frontend, with Node.js, Python, and cloud services on the backend." }, + { q: "How do you handle project communication?", a: "Each project gets a dedicated Slack channel, weekly video check-ins, and access to our project management board for full transparency." }, +]; + +export default function ContactPage() { + const { mutate: bookConsult, loading: sending } = useSaasMutation("scheduling", "/bookings"); + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [company, setCompany] = useState(""); + const [budget, setBudget] = useState(""); + const [projectType, setProjectType] = useState(""); + const [message, setMessage] = useState(""); + const [submitted, setSubmitted] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + try { + await bookConsult({ name, email, company, budget, projectType, message }); + setSubmitted(true); + toast.success("Message sent! We'll get back to you within 24 hours."); + } catch (err) { + toast.error("Something went wrong. Please try again."); + } + }; + + return ( +
+
+ + {/* ── CONTACT SECTION ── */} +
+
+
+ {/* LEFT: Info */} +
+

+ Let’s Build Something Great +

+

+ Have a project in mind? We’d love to hear about it. Reach out and let’s start a conversation. +

+ +
+ {offices.map((office, i) => ( + + +
+
+ +
+
+

{office.city}

+

{office.address}

+

+ {office.phone} +

+
+
+ + + ))} +
+ + {/* Map Placeholder */} +
+
+
+ Map Placeholder +
+
+ + {/* RIGHT: Form */} +
+ + + Send us a message + + + {submitted ? ( +
+
+ +
+

Message Sent!

+

Thanks for reaching out. We will get back to you within 24 hours.

+
+ ) : ( +
+
+ + setName(e.target.value)} required /> +
+
+ + setEmail(e.target.value)} required /> +
+
+ + setCompany(e.target.value)} /> +
+
+ + +
+
+ + +
+
+ +