138 lines
4.8 KiB
TypeScript
138 lines
4.8 KiB
TypeScript
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>
|
|
);
|
|
}
|