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,117 @@
+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>
+  );
+}