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,162 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import ProducerCard from "@/components/ProducerCard";
+import { aboutBullets, featuredProducers } from "@/data/home";
+import {
+  activeFilterTags,
+  breadcrumbs,
+  businessFilters,
+} from "@/data/pages";
+import styles from "./businesses.module.css";
+
+export const metadata = {
+  title: "Businesses | IranBay",
+};
+
+export default function BusinessesPage() {
+  const cards = [
+    ...featuredProducers,
+    ...featuredProducers,
+    ...featuredProducers,
+    ...featuredProducers,
+  ].slice(0, 16);
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <main className={styles.shell}>
+        <section className={styles.bannerWrap}>
+          <div className={styles.banner}>
+            <h1 className={styles.bannerTitle}>Let’s explore</h1>
+            <nav className={styles.crumbs} aria-label="Breadcrumb">
+              {breadcrumbs.map((crumb, index) => (
+                <span key={crumb}>
+                  {index > 0 ? (
+                    <img
+                      className={styles.crumbChevron}
+                      src="/images/icons/chevron.svg"
+                      alt=""
+                    />
+                  ) : null}
+                  <span
+                    className={
+                      index === breadcrumbs.length - 1 ? styles.crumbActive : undefined
+                    }
+                  >
+                    {crumb}
+                  </span>
+                </span>
+              ))}
+            </nav>
+          </div>
+        </section>
+
+        <section className={styles.container}>
+          <div className={styles.filtersBar}>
+            <div className={styles.filtersLabel}>
+              <img src="/images/icons/search.svg" alt="" width={22} height={22} />
+              <div>
+                <strong>Filters</strong>
+                <span>A better focus</span>
+              </div>
+            </div>
+            <div className={styles.filters}>
+              {businessFilters.map((filter) => (
+                <input
+                  key={filter.label}
+                  aria-label={filter.label}
+                  defaultValue={filter.value}
+                />
+              ))}
+              <button className={`filter-chip ${styles.filterBtn}`} type="button">
+                Filter
+                <img src="/images/icons/chevron.svg" alt="" />
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.tags}>
+            {activeFilterTags.map((tag) => (
+              <span className={`filter-chip ${styles.tag}`} key={tag}>
+                {tag}
+                <button type="button" aria-label={`Remove ${tag}`}>
+                  ×
+                </button>
+              </span>
+            ))}
+          </div>
+
+          <div className={styles.grid}>
+            {cards.map((producer, index) => (
+              <ProducerCard
+                key={`${producer.name}-${index}`}
+                producer={producer}
+              />
+            ))}
+          </div>
+
+          <nav className={styles.pager} aria-label="Pagination">
+            <a href="/businesses">First</a>
+            <a href="/businesses">1</a>
+            <span className={styles.pagerActive}>2</span>
+            <a href="/businesses">3</a>
+            <span>…</span>
+            <a href="/businesses">15</a>
+            <a href="/businesses">Last</a>
+          </nav>
+        </section>
+
+        <section className={styles.featureSection}>
+          <div className={styles.feature}>
+            <div>
+              <h2 className={styles.featureTitle}>Processed foods,</h2>
+              <p className={styles.featureLead}>
+                We are a gate to Iran&apos;s market place
+              </p>
+              <p className={styles.featureBody}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </p>
+              <ul className={styles.featureList}>
+                {aboutBullets.map((item, index) => (
+                  <li key={`${item}-${index}`}>
+                    <img src="/images/icons/bullet.svg" alt="" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+              <a className={`outline-btn ${styles.featureCta}`} href="/about">
+                know more about us
+              </a>
+            </div>
+            <div className={styles.featureVisual}>
+              <img src="/images/hero/ice-cream.png" alt="Processed foods" />
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.exportSection}>
+          <div className={`tile-hover ${styles.exportCta}`}>
+            <img
+              className={styles.plane}
+              src="/images/banners/plane.png"
+              alt=""
+            />
+            <h2 className={styles.exportTitle}>
+              let’s
+              <br />
+              export
+            </h2>
+            <a className={`outline-btn ${styles.beginBtn}`} href="/contact">
+              begin
+              <img src="/images/icons/chevron.svg" alt="" width={9} height={16} />
+            </a>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+}