From 2663c9da045a0f378e48649d34effd5eaaae117f Mon Sep 17 00:00:00 2001
From: jhpin2 <jahidhasanpintu82@gmail.com>
Date: Mon, 3 Mar 2025 12:50:14 +0600
Subject: [PATCH] contact page added

---
 src/app/contact/page.tsx        |   5 +
 src/components/contact-page.tsx | 232 ++++++++++++++++++++++++++++++++
 src/components/ui/textarea.tsx  |  22 +++
 3 files changed, 259 insertions(+)
 create mode 100644 src/app/contact/page.tsx
 create mode 100644 src/components/contact-page.tsx
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..df5289b
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,5 @@
+import ContactPage from "@/components/contact-page";
+
+export default function Contact() {
+  return <ContactPage />;
+}
diff --git a/src/components/contact-page.tsx b/src/components/contact-page.tsx
new file mode 100644
index 0000000..6f6494d
--- /dev/null
+++ b/src/components/contact-page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import type React from "react";
+
+import { useState } from "react";
+import { Facebook, Twitter, Linkedin, Instagram, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    company: "",
+    message: "",
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    // toast({
+    //   title: "Message sent!",
+    //   description: "We'll be in touch with you shortly.",
+    // });
+    // Reset form
+    setFormData({
+      name: "",
+      email: "",
+      phone: "",
+      company: "",
+      message: "",
+    });
+  };
+
+  return (
+    <main className="min-h-screen bg-gray-50">
+      <div className="h-20"></div>
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
+          {/* Left Column - Contact Information */}
+          <div className="space-y-8">
+            <div>
+              <h1 className="text-5xl font-bold leading-tight">
+                Get in touch <br />
+                with us directly
+              </h1>
+              <p className="mt-6 text-lg text-gray-700">
+                We are here to help you! Tell us how we can help & we&apos;ll be
+                in touch with an expert within the next 24 hours.
+              </p>
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-xl font-semibold">Send us an email:</h3>
+                <a
+                  href="mailto:contact@adspillar.com"
+                  className="text-xl hover:underline"
+                >
+                  contact@adspillar.com
+                </a>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold">Give us a call:</h3>
+                <a
+                  href="tel:+8801784493232"
+                  className="text-xl hover:underline"
+                >
+                  +880 1784-493232
+                </a>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold mb-4">Follow us:</h3>
+                <div className="flex space-x-4">
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Facebook"
+                  >
+                    <Facebook size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Twitter"
+                  >
+                    <Twitter size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="LinkedIn"
+                  >
+                    <Linkedin size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Instagram"
+                  >
+                    <Instagram size={20} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Contact Form */}
+          <div className="bg-white p-8 rounded-lg shadow-sm">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <label htmlFor="name" className="text-lg font-medium">
+                    Enter your name
+                  </label>
+                  <Input
+                    id="name"
+                    name="name"
+                    placeholder="Enter your name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="email" className="text-lg font-medium">
+                    Email address
+                  </label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="example@gmail.com"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <label htmlFor="phone" className="text-lg font-medium">
+                    Phone number
+                  </label>
+                  <Input
+                    id="phone"
+                    name="phone"
+                    placeholder="(123) 456 - 7890"
+                    value={formData.phone}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="company" className="text-lg font-medium">
+                    Company
+                  </label>
+                  <Input
+                    id="company"
+                    name="company"
+                    placeholder="EX Facebook"
+                    value={formData.company}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label htmlFor="message" className="text-lg font-medium">
+                  Message
+                </label>
+                <Textarea
+                  id="message"
+                  name="message"
+                  placeholder="Write your message here..."
+                  rows={6}
+                  value={formData.message}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full md:w-auto px-8 py-6 bg-pink-500 hover:bg-pink-600 text-white text-lg rounded-full"
+              >
+                Submit
+              </Button>
+            </form>
+          </div>
+        </div>
+
+        {/* Map Section */}
+        <div className="mt-16 space-y-6">
+          <div className="flex items-center space-x-2">
+            <MapPin className="text-pink-500" size={24} />
+            <h2 className="text-2xl font-semibold">Our Location</h2>
+          </div>
+          <p className="text-lg">
+            Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
+            1216)
+          </p>
+
+          <div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Ads Pillar Location"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+      {/* <Toaster /> */}
+    </main>
+  );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }