Update carousels, card hover, and IranBay branding.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-04 13:21:51 +03:30
commit 42aff5aee9
162 changed files with 16828 additions and 0 deletions
@@ -0,0 +1,137 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import ContactFaq from "@/components/ContactFaq";
+import { contactInfo } from "@/data/pages";
+import styles from "./contact.module.css";
+
+export const metadata = {
+  title: "Contact Us | IranBay",
+};
+
+export default function ContactPage() {
+  return (
+    <div className={styles.page}>
+      <Header />
+      <main>
+        <section className={styles.bannerWrap}>
+          <div className={styles.banner}>
+            <h1 className={styles.bannerTitle}>Contact us page</h1>
+            <p className={styles.bannerSub}>
+              some of our most crowded categories
+            </p>
+          </div>
+        </section>
+
+        <section className={styles.container}>
+          <div className={styles.panel}>
+            <div>
+              <h2 className={styles.heading}>Get In Touch</h2>
+              <p className={styles.sendLabel}>Send message</p>
+              <p className={styles.sendHint}>
+                In publishing and graphic design, Lorem ipsum is a placeholder
+                text commonly used to.
+              </p>
+              <form className={styles.form}>
+                <div className={styles.row}>
+                  <label className={styles.field}>
+                    <span>Name</span>
+                    <input name="name" defaultValue="Arad Charta" />
+                  </label>
+                  <label className={styles.field}>
+                    <span>Family</span>
+                    <input name="family" defaultValue="Arad Charta" />
+                  </label>
+                </div>
+                <div className={styles.row}>
+                  <label className={styles.field}>
+                    <span>Interested in</span>
+                    <select name="interest" defaultValue="Developer">
+                      <option>Developer</option>
+                      <option>Producer</option>
+                      <option>Store</option>
+                      <option>Service</option>
+                    </select>
+                  </label>
+                  <label className={`${styles.field} ${styles.plain}`}>
+                    <input
+                      name="phone"
+                      placeholder="Phone Number"
+                      aria-label="Phone Number"
+                    />
+                  </label>
+                </div>
+                <label className={styles.field}>
+                  <span>Message</span>
+                  <textarea name="message" placeholder="Description" />
+                </label>
+                <div className={styles.formActions}>
+                  <button className="outline-btn" type="submit">
+                    Submit message
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            <aside className={styles.aside}>
+              <div className={styles.asideBlock}>
+                <h3>Email Us :</h3>
+                <a href={`mailto:${contactInfo.email}`}>{contactInfo.email}</a>
+              </div>
+              <div className={styles.asideBlock}>
+                <h3>Call Us :</h3>
+                <div className={styles.phones}>
+                  {contactInfo.phones.map((phone) => (
+                    <p key={phone}>{phone}</p>
+                  ))}
+                </div>
+              </div>
+              <div className={styles.asideBlock}>
+                <h3>Follow :</h3>
+                <div className={styles.socials}>
+                  <a href="https://instagram.com" aria-label="Instagram">
+                    <img src="/images/icons/instagram.png" alt="" />
+                  </a>
+                  <a href="https://t.me" aria-label="Telegram">
+                    <img src="/images/icons/telegram.png" alt="" />
+                  </a>
+                  <a href="https://facebook.com" aria-label="Facebook">
+                    <img src="/images/icons/facebook.png" alt="" />
+                  </a>
+                </div>
+              </div>
+              <div className={styles.asideBlock}>
+                <h3>Visit Us :</h3>
+                {contactInfo.addressLines.map((line) => (
+                  <p key={line}>{line}</p>
+                ))}
+              </div>
+            </aside>
+          </div>
+        </section>
+
+        <section className={styles.container}>
+          <div className={styles.mapWrap}>
+            <img src="/images/contact/map.png" alt="Office location map" />
+          </div>
+        </section>
+
+        <section className={styles.container}>
+          <div className={styles.faq}>
+            <div>
+              <p className={styles.faqKicker}>FAQ</p>
+              <h2 className={styles.faqTitle}>
+                Frequently
+                <br />
+                asked
+                <br />
+                questions.
+              </h2>
+            </div>
+            <ContactFaq />
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}