Dental Care

components/landing/contact.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+interface Contact2Props {
+  title?: string;
+  description?: string;
+  phone?: string;
+  email?: string;
+  web?: { label: string; url: string };
+}
+
+const Contact = ({
+  title = "Get In Touch",
+  description = "Have questions about our services or need help with booking? We're here to help! Reach out to us and we'll get back to you as soon as possible.",
+  phone = "(+63) 917-123-4567",
+  email = "info@dentalucare.com",
+  web = { label: "dentalucare.com", url: "https://dentalucare.com" },
+}: Contact2Props) => {
+  return (
+    <section className="py-32">
+      <div className="container">
+        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-10 lg:flex-row lg:gap-20">
+          <div className="mx-auto flex max-w-sm flex-col justify-between gap-10">
+            <div className="text-center lg:text-left">
+              <h1 className="mb-2 text-5xl font-semibold lg:mb-1 lg:text-6xl">
+                {title}
+              </h1>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+            <div className="mx-auto w-fit lg:mx-0">
+              <h3 className="mb-6 text-center text-2xl font-semibold lg:text-left">
+                Contact Details
+              </h3>
+              <ul className="ml-4 list-disc">
+                <li>
+                  <span className="font-bold">Phone: </span>
+                  {phone}
+                </li>
+                <li>
+                  <span className="font-bold">Email: </span>
+                  <a href={`mailto:${email}`} className="underline">
+                    {email}
+                  </a>
+                </li>
+                <li>
+                  <span className="font-bold">Web: </span>
+                  <a href={web.url} target="_blank" className="underline">
+                    {web.label}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="mx-auto flex max-w-3xl flex-col gap-6 rounded-lg border p-10">
+            <div className="flex gap-4">
+              <div className="grid w-full items-center gap-1.5">
+                <Label htmlFor="firstname">First Name</Label>
+                <Input type="text" id="firstname" placeholder="First Name" />
+              </div>
+              <div className="grid w-full items-center gap-1.5">
+                <Label htmlFor="lastname">Last Name</Label>
+                <Input type="text" id="lastname" placeholder="Last Name" />
+              </div>
+            </div>
+            <div className="grid w-full items-center gap-1.5">
+              <Label htmlFor="email">Email</Label>
+              <Input type="email" id="email" placeholder="Email" />
+            </div>
+            <div className="grid w-full items-center gap-1.5">
+              <Label htmlFor="subject">Subject</Label>
+              <Input type="text" id="subject" placeholder="Subject" />
+            </div>
+            <div className="grid w-full gap-1.5">
+              <Label htmlFor="message">Message</Label>
+              <Textarea placeholder="Type your message here." id="message" />
+            </div>
+            <Button className="w-full">Send Message</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contact };