Build Havaran storefront with Meshkee-backed blogs and portfolios.

Clone product, solution, and company pages from the original site and wire articles/projects to the Meshkee Website API with pagination and media from the backend CDN.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/solutions/building-installations/page.tsx

@@ -0,0 +1,31 @@
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { PageHero, UpdatingNotice } from "@/components/PageShared";
+
+export const metadata = {
+  title: "تاسیسات ساختمانی | هواران",
+};
+
+export default function BuildingInstallationsPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="تاسیسات ساختمانی"
+          titleEn="Building Installations"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+            {
+              label: "تاسیسات ساختمانی",
+              href: "/solutions/building-installations",
+            },
+          ]}
+        />
+        <UpdatingNotice />
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/solutions/building-smoke-management/page.tsx

@@ -0,0 +1,170 @@
+import Image from "next/image";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { PageHero } from "@/components/PageShared";
+import { smokeBlocks, smokeIntro } from "@/data/smoke";
+
+export const metadata = {
+  title: "مدیریت دود ساختمان | هواران",
+  description: "سیستم های مدیریت دود ساختمان | رسام تجارت هواران",
+};
+
+export default function SmokeManagementPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="سیستم های مدیریت دود"
+          titleEn="Smoke Management Systems"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+            {
+              label: "مدیریت دود ساختمان",
+              href: "/solutions/building-smoke-management",
+            },
+          ]}
+        />
+
+        <section className="section">
+          <div className="container-page grid items-center gap-8 md:grid-cols-2">
+            <div className="relative flex min-h-[280px] items-center justify-center">
+              <Image
+                src={smokeIntro.image}
+                alt={smokeIntro.title}
+                width={560}
+                height={420}
+                className="h-auto w-full max-w-lg object-contain"
+                sizes="(max-width: 768px) 100vw, 50vw"
+                priority
+              />
+            </div>
+            <div>
+              <h2 className="mb-2 text-xl font-bold text-[#232323]">
+                {smokeIntro.title}
+              </h2>
+              {smokeIntro.titleEn ? (
+                <p className="mb-4 text-xs tracking-wide text-[#999]">
+                  {smokeIntro.titleEn}
+                </p>
+              ) : null}
+              <div className="space-y-3">
+                {smokeIntro.text.map((paragraph) => (
+                  <p
+                    key={paragraph.slice(0, 48)}
+                    className="text-sm leading-8 text-[#666] text-justify"
+                  >
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+              {smokeIntro.videoUrl ? (
+                <div className="mt-6 aspect-video overflow-hidden bg-black">
+                  <iframe
+                    src={smokeIntro.videoUrl}
+                    title="ویدیو سیستم مدیریت دود"
+                    className="h-full w-full"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                  />
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </section>
+
+        {smokeBlocks.map((block, index) => (
+          <section
+            key={block.id}
+            className={`section ${index % 2 === 0 ? "section-gray" : ""}`}
+          >
+            <div
+              className={`container-page grid items-start gap-8 ${
+                block.image ? "lg:grid-cols-2" : ""
+              }`}
+            >
+              <div className={index % 2 === 1 && block.image ? "lg:order-2" : ""}>
+                <h2 className="mb-2 text-lg font-bold leading-8 text-[#232323] sm:text-xl">
+                  {block.title}
+                </h2>
+                {block.titleEn ? (
+                  <p className="mb-4 text-xs tracking-wide text-[#999]">
+                    {block.titleEn}
+                  </p>
+                ) : (
+                  <div className="mb-4" />
+                )}
+                {block.intro.length > 0 ? (
+                  <div className="space-y-3">
+                    {block.intro.map((paragraph) => (
+                      <p
+                        key={paragraph.slice(0, 48)}
+                        className="text-sm leading-8 text-[#666] text-justify"
+                      >
+                        {paragraph}
+                      </p>
+                    ))}
+                  </div>
+                ) : null}
+                {block.lists ? (
+                  <ul className="mt-4 space-y-2">
+                    {block.lists.map((item) => (
+                      <li
+                        key={item}
+                        className="flex gap-2 text-sm leading-7 text-[#555]"
+                      >
+                        <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-green" />
+                        <span>{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+                {block.groups
+                  ? block.groups.map((group) => (
+                      <div key={group.title} className="mt-4">
+                        <h3 className="mb-2 text-sm font-bold text-[#333]">
+                          {group.title}
+                        </h3>
+                        <ul className="space-y-2">
+                          {group.items.map((item) => (
+                            <li
+                              key={item}
+                              className="flex gap-2 text-sm leading-7 text-[#555]"
+                            >
+                              <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-green" />
+                              <span>{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))
+                  : null}
+              </div>
+
+              {block.image ? (
+                <div
+                  className={`relative flex min-h-[280px] items-center justify-center ${
+                    index % 2 === 1 ? "lg:order-1" : ""
+                  } ${block.isPng ? "" : "overflow-hidden"}`}
+                >
+                  <Image
+                    src={block.image}
+                    alt={block.imageAlt ?? block.title}
+                    width={560}
+                    height={420}
+                    className={`h-auto w-full max-w-lg object-contain ${
+                      block.isPng ? "" : "object-cover"
+                    }`}
+                    sizes="(max-width: 1024px) 100vw, 50vw"
+                  />
+                </div>
+              ) : null}
+            </div>
+          </section>
+        ))}
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/solutions/hvac/page.tsx

@@ -0,0 +1,28 @@
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { PageHero, UpdatingNotice } from "@/components/PageShared";
+
+export const metadata = {
+  title: "تهویه مطبوع | هواران",
+};
+
+export default function HvacSolutionPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="تهویه مطبوع"
+          titleEn="Air Conditioning"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+            { label: "تهویه مطبوع", href: "/solutions/hvac" },
+          ]}
+        />
+        <UpdatingNotice />
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/solutions/page.tsx

@@ -0,0 +1,45 @@
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { CatalogCard, PageHero } from "@/components/PageShared";
+import { solutionsList } from "@/data/pages";
+
+export const metadata = {
+  title: "راهکارها | رسام تجارت هواران",
+  description:
+    "راهکارهای مدیریت دود ساختمان، تهویه فضاهای مختلف، تهویه مطبوع، تونل و مترو و تاسیسات ساختمانی",
+};
+
+export default function SolutionsPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="راهکارهای تخصصی هواران"
+          titleEn="HAVARAN Solutions"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+          ]}
+        />
+        <section className="section">
+          <div className="container-page">
+            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+              {solutionsList.map((item) => (
+                <CatalogCard
+                  key={item.slug}
+                  href={item.href}
+                  image={item.image}
+                  title={item.title}
+                  titleEn={item.titleEn}
+                  description={item.description}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/solutions/tunnels-and-subways/page.tsx

@@ -0,0 +1,129 @@
+import Image from "next/image";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { PageHero } from "@/components/PageShared";
+import { tunnelBlocks, tunnelIntro } from "@/data/tunnel";
+
+export const metadata = {
+  title: "تونل و مترو | هواران",
+  description: "راهکارهای تهویه تونل و مترو | رسام تجارت هواران",
+};
+
+export default function TunnelsPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="تونل و مترو"
+          titleEn="Tunnels and Subways"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+            { label: "تونل و مترو", href: "/solutions/tunnels-and-subways" },
+          ]}
+        />
+
+        <section className="section">
+          <div className="container-page grid items-center gap-8 md:grid-cols-2">
+            <div className="relative flex min-h-[280px] items-center justify-center overflow-hidden">
+              <Image
+                src={tunnelIntro.image}
+                alt={tunnelIntro.title}
+                width={560}
+                height={420}
+                className="h-auto w-full max-w-lg object-cover"
+                sizes="(max-width: 768px) 100vw, 50vw"
+                priority
+              />
+            </div>
+            <div>
+              <h2 className="mb-4 text-xl font-bold text-[#232323]">
+                {tunnelIntro.title}
+              </h2>
+              <div className="space-y-3">
+                {tunnelIntro.text.map((paragraph) => (
+                  <p
+                    key={paragraph.slice(0, 48)}
+                    className="text-sm leading-8 text-[#666] text-justify"
+                  >
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {tunnelBlocks.map((block, index) => (
+          <section
+            key={block.id}
+            className={`section ${index % 2 === 0 ? "section-gray" : ""}`}
+          >
+            <div
+              className={`container-page grid items-start gap-8 ${
+                block.image ? "lg:grid-cols-2" : ""
+              }`}
+            >
+              <div className={index % 2 === 1 && block.image ? "lg:order-2" : ""}>
+                <h2 className="mb-2 text-lg font-bold leading-8 text-[#232323] sm:text-xl">
+                  {block.title}
+                </h2>
+                {block.titleEn ? (
+                  <p className="mb-4 text-xs tracking-wide text-[#999]">
+                    {block.titleEn}
+                  </p>
+                ) : (
+                  <div className="mb-4" />
+                )}
+                <div className="space-y-3">
+                  {block.intro.map((paragraph) => (
+                    <p
+                      key={paragraph.slice(0, 48)}
+                      className="text-sm leading-8 text-[#666] text-justify"
+                    >
+                      {paragraph}
+                    </p>
+                  ))}
+                </div>
+                {block.lists ? (
+                  <ul className="mt-4 space-y-2">
+                    {block.lists.map((item) => (
+                      <li
+                        key={item}
+                        className="flex gap-2 text-sm leading-7 text-[#555]"
+                      >
+                        <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-accent-green" />
+                        <span>{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </div>
+
+              {block.image ? (
+                <div
+                  className={`relative flex min-h-[280px] items-center justify-center ${
+                    index % 2 === 1 ? "lg:order-1" : ""
+                  } ${block.isPng ? "" : "overflow-hidden"}`}
+                >
+                  <Image
+                    src={block.image}
+                    alt={block.imageAlt ?? block.title}
+                    width={560}
+                    height={420}
+                    className={`h-auto w-full max-w-lg object-contain ${
+                      block.isPng ? "" : "object-cover"
+                    }`}
+                    sizes="(max-width: 1024px) 100vw, 50vw"
+                  />
+                </div>
+              ) : null}
+            </div>
+          </section>
+        ))}
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/solutions/ventilation-spaces/page.tsx

@@ -0,0 +1,28 @@
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { PageHero, UpdatingNotice } from "@/components/PageShared";
+
+export const metadata = {
+  title: "تهویه فضاهای مختلف | هواران",
+};
+
+export default function VentilationSpacesPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <PageHero
+          title="تهویه فضاهای مختلف"
+          titleEn="Ventilation of Different Spaces"
+          breadcrumb={[
+            { label: "صفحه اصلی", href: "/" },
+            { label: "راهکارها", href: "/solutions" },
+            { label: "تهویه فضاهای مختلف", href: "/solutions/ventilation-spaces" },
+          ]}
+        />
+        <UpdatingNotice />
+      </main>
+      <Footer />
+    </>
+  );
+}