118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
import CommentCarousel from "@/components/CommentCarousel";
|
|
import { aboutCopy, clients, services } from "@/data/pages";
|
|
import styles from "./about.module.css";
|
|
|
|
export const metadata = {
|
|
title: "About Us | IranBay",
|
|
};
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div className={styles.page}>
|
|
<Header />
|
|
<main>
|
|
<section className={styles.container}>
|
|
<div className={styles.intro}>
|
|
<div className={styles.visual}>
|
|
<div className={styles.visualBack} />
|
|
<img
|
|
className={styles.visualCard}
|
|
src="/images/about/hero-card.png"
|
|
alt="IranBay"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p className={styles.kicker}>{aboutCopy.kicker}</p>
|
|
<h1 className={styles.title}>
|
|
{aboutCopy.title.map((line) => (
|
|
<span key={line}>{line}</span>
|
|
))}
|
|
</h1>
|
|
{aboutCopy.paragraphs.map((p) => (
|
|
<p className={styles.copy} key={p.slice(0, 32)}>
|
|
{p}
|
|
</p>
|
|
))}
|
|
<a className={`outline-btn ${styles.cta}`} href="/contact">
|
|
Contact us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.wide}>
|
|
<div className={styles.clients}>
|
|
<div className={styles.sectionHead}>
|
|
<h2 className={styles.sectionTitle}>All clinets</h2>
|
|
<p className={styles.sectionSub}>
|
|
some of our most crowded categories
|
|
</p>
|
|
</div>
|
|
<div className={styles.clientBar}>
|
|
{clients.map((client) => (
|
|
<img
|
|
key={client.name}
|
|
src={client.image}
|
|
alt={client.name}
|
|
className={styles.clientLogo}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.container}>
|
|
<div className={styles.story}>
|
|
<div>
|
|
<p className={styles.kicker}>{aboutCopy.kicker}</p>
|
|
<h2 className={styles.title}>
|
|
{aboutCopy.title.map((line) => (
|
|
<span key={`story-${line}`}>{line}</span>
|
|
))}
|
|
</h2>
|
|
</div>
|
|
<div>
|
|
<p className={styles.copy}>{aboutCopy.paragraphs[0]}</p>
|
|
<a className={`outline-btn ${styles.cta}`} href="/contact">
|
|
Contact us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.container}>
|
|
<CommentCarousel />
|
|
</section>
|
|
|
|
<section className={styles.wide}>
|
|
<div className={styles.services}>
|
|
<div className={styles.sectionHead}>
|
|
<h2 className={styles.sectionTitle}>Our services</h2>
|
|
<p className={styles.sectionSub}>
|
|
some of our most crowded categories
|
|
</p>
|
|
</div>
|
|
<div className={styles.serviceGrid}>
|
|
{services.map((item) => (
|
|
<article
|
|
className={`${styles.serviceCard} ${styles[item.tone]}`}
|
|
key={item.title}
|
|
>
|
|
<img src={item.image} alt="" />
|
|
<div className={styles.serviceCopy}>
|
|
<h3>{item.title}</h3>
|
|
<p>{item.subtitle}</p>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|