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,92 @@
+import { notFound } from "next/navigation";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import DetailBanner from "@/components/DetailBanner";
+import ArticleBody from "@/components/ArticleBody";
+import ShareLikeActions from "@/components/ShareLikeActions";
+import PortfolioGallery from "@/components/PortfolioGallery";
+import {
+  getAllBusinessSlugs,
+  getBusinessBySlug,
+  getBusinessPortfolio,
+} from "@/data/business";
+import styles from "./portfolio.module.css";
+
+export function generateStaticParams() {
+  return getAllBusinessSlugs().flatMap((slug) => {
+    const business = getBusinessBySlug(slug);
+    return (business?.portfolios ?? []).map((item) => ({
+      slug,
+      portfolioSlug: item.slug,
+    }));
+  });
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string; portfolioSlug: string }>;
+}) {
+  const { slug, portfolioSlug } = await params;
+  const data = getBusinessPortfolio(slug, portfolioSlug);
+  if (!data) return { title: "Portfolios details | IranBay" };
+  return {
+    title: `${data.portfolio.title} | Portfolios details | IranBay`,
+    description: data.portfolio.description,
+  };
+}
+
+export default async function PortfolioDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string; portfolioSlug: string }>;
+}) {
+  const { slug, portfolioSlug } = await params;
+  const data = getBusinessPortfolio(slug, portfolioSlug);
+  if (!data) notFound();
+
+  const { business, portfolio } = data;
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <main className={styles.shell}>
+        <DetailBanner
+          title="Portfolios details"
+          breadcrumbs={business.breadcrumbs}
+        />
+
+        <div className={styles.layout}>
+          <PortfolioGallery images={portfolio.images} />
+
+          <div className={styles.copy}>
+            <div className={styles.meta}>
+              <span>
+                <img src="/images/icons/calendar.svg" alt="" />
+                {portfolio.date}
+              </span>
+              <span>
+                <img src="/images/icons/user.svg" alt="" />
+                {portfolio.author}
+              </span>
+              <span>
+                <img src="/images/icons/category.svg" alt="" />
+                {portfolio.category}
+              </span>
+            </div>
+            <h2 className={styles.title}>{portfolio.title}.</h2>
+            <p className={styles.intro}>{portfolio.description}</p>
+            <hr className={styles.rule} />
+            <div className={styles.bodyWrap}>
+              <ArticleBody blocks={portfolio.body} />
+            </div>
+            <div className={styles.actions}>
+              <ShareLikeActions />
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,82 @@
+.page {
+  background: var(--color-white);
+}
+
+.shell {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 var(--page-pad) 80px;
+}
+
+.layout {
+  margin-top: 36px;
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 42px;
+  align-items: start;
+}
+
+.copy {
+  min-width: 0;
+  padding-top: 4px;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px 28px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  font-weight: 300;
+  color: var(--color-soft);
+}
+
+.meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.meta img {
+  width: 14px;
+  height: 14px;
+  opacity: 0.7;
+  object-fit: contain;
+}
+
+.title {
+  font-size: clamp(28px, 3vw, 40px);
+  font-weight: 300;
+  line-height: 1.2;
+  margin-bottom: 10px;
+}
+
+.intro {
+  font-size: 17px;
+  font-weight: 300;
+  line-height: 18px;
+  color: #9d9d9d;
+  margin-bottom: 18px;
+}
+
+.rule {
+  border: 0;
+  border-top: 1px solid #ececec;
+  margin: 0 0 20px;
+}
+
+.bodyWrap {
+  min-height: 280px;
+}
+
+.actions {
+  margin-top: 28px;
+  padding-top: 24px;
+  border-top: 1px solid #ececec;
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}