chore: setup project for production

components/contact-us/ContactUs.jsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { Mail, MapPin, Phone } from "lucide-react";
+
+export default function ContactUs() {
+  const [message, setMessage] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    message: "",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setMessage((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const whatsappNumber = "9779803287986";
+    const formattedMessage = `Name: ${message.name}%0AEmail: ${message.email}%0APhone: ${message.phone}%0AMessage: ${message.message}`;
+
+    const whatsappURL = `https://api.whatsapp.com/send?phone=${whatsappNumber}&text=${formattedMessage}`;
+
+    window.open(whatsappURL, "_blank");
+
+    setMessage({
+      name: "",
+      email: "",
+      phone: "",
+      message: "",
+    });
+  };
+
+  return (
+    <div className="min-h-screen">
+      <header className="text-slate-800 py-4 text-center md:text-start md:ml-40 lg:ml-80">
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-emilys font-semibold">
+          Contact Us
+        </h1>
+        <p className="mt-2 text-sm md:text-base">
+          Empowering Spiritual Connections - Feel Free to Connect with Us - Our
+          Doorway to Spiritual Assistance
+        </p>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        <div className="flex justify-center">
+          <div className="flex flex-wrap -mx-4 w-full max-w-7xl">
+            <div className="w-full lg:w-1/3 px-4 mb-8">
+              <div className="bg-white custom-border p-6">
+                <StoreInfo
+                  title="Nepal Store"
+                  address="Gupta Rudraksha, Dakshinamurti, Guru Mandir Marg, Kathmandu 44600, Nepal"
+                  email="nepali.rudrakshabeads@gmail.com"
+                  phone="+9779803287986"
+                />
+                <StoreInfo
+                  title="Malayasia Store"
+                  address="14A, Villa Laman Tasik, Bandar Sri Permaisuri, Cheras 56000 Kuala Lumpur, Malaysia"
+                  email="nepali.rudrakshabeads@gmail.com"
+                />
+                <StoreInfo
+                  title="Gupta Rudraksha India"
+                  address="Sector 62, Noida, Uttar Pradesh-201301"
+                  email="nepali.rudrakshabeads@gmail.com"
+                  phone="+919431828698"
+                />
+              </div>
+            </div>
+            <div className="w-full lg:w-2/3 px-4 mb-8">
+              <div className="h-full custom-border p-6">
+                <h2 className="text-4xl text-black font-semibold mb-4">
+                  Connecting Souls
+                </h2>
+                <p className="mb-4 text-lg">
+                  Reach Out, Let&apos;s Share Spiritual Moments
+                </p>
+                <form onSubmit={handleSubmit}>
+                  <div className="flex flex-col gap-4 sm:flex-row">
+                    <input
+                      type="text"
+                      name="name"
+                      className="sm:w-full p-3 border outline-none"
+                      placeholder="Full Name"
+                      value={message.name}
+                      onChange={handleChange}
+                    />
+                    <input
+                      type="email"
+                      name="email"
+                      className="sm:w-full p-3 border outline-none"
+                      placeholder="Email"
+                      value={message.email}
+                      onChange={handleChange}
+                    />
+                  </div>
+                  <input
+                    type="text"
+                    name="phone"
+                    className="w-full p-3 border outline-none my-3"
+                    placeholder="Phone Number"
+                    value={message.phone}
+                    onChange={handleChange}
+                  />
+                  <textarea
+                    name="message"
+                    className="w-full p-2 border border-gray-300 rounded mb-4"
+                    rows="6"
+                    value={message.message}
+                    onChange={handleChange}
+                    placeholder="Your message"
+                  />
+                  <div className="flex justify-center">
+                    <button
+                      type="submit"
+                      className="bg-[#c08c38] uppercase text-white py-3 px-6 hover:bg-[#7D6032] transition duration-300"
+                    >
+                      Send Message
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function StoreInfo({ title, address, email, phone, note }) {
+  return (
+    <div className="mb-6">
+      <h3 className="text-3xl font-semibold text-black mb-2">{title}</h3>
+      <div className="flex items-start mb-5">
+        <MapPin className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
+        <span>{address}</span>
+      </div>
+      <div className="flex items-start mb-5">
+        <Mail className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
+        <span>Email: {email}</span>
+      </div>
+      {phone && (
+        <div className="flex items-start">
+          <Phone className="w-5 h-5 mr-2 flex-shrink-0 text-[#c08c38]" />
+          <span>Phone: {phone}</span>
+        </div>
+      )}
+      {note && (
+        <p className="mt-2 p-3 border border-[#c19a5b] w-3/4">
+          <span className="font-semibold">Note:</span>
+          <br />
+          {note}
+        </p>
+      )}
+    </div>
+  );
+}