Create Glassmond storefront with Meshkee integration

Build the RTL Next.js experience with live catalog, journal, customer interactions, and SEO-ready canonical routes.

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

app/page.tsx

@@ -0,0 +1,156 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ArrowUpLeft, CheckCircle2 } from "lucide-react";
+import { ProductCarousel } from "@/components/product-carousel";
+import { Features, SectionHeading, VideoBanner } from "@/components/sections";
+import {
+  blogUrl,
+  formatPersianDate,
+  getBlogs,
+  getProducts,
+} from "@/lib/meshkee";
+
+export const metadata: Metadata = {
+  title: "آینه هوشمند ضد بخار",
+  description:
+    "گلسموند، تولیدکننده آینه هوشمند ضد بخار با نور حرفه‌ای، استاندارد IP64، یک سال گارانتی و ده سال خدمات پس از فروش.",
+  alternates: { canonical: "/" },
+  openGraph: {
+    title: "آینه هوشمند ضد بخار گلسموند",
+    description:
+      "آینه‌های هوشمند گلسموند؛ تلفیق طراحی مدرن، نور حرفه‌ای و فناوری ضد بخار.",
+    url: "/",
+    type: "website",
+    locale: "fa_IR",
+    images: ["/images/hero.jpg"],
+  },
+};
+
+export default async function HomePage() {
+  const [productData, blogData] = await Promise.all([
+    getProducts({ pageSize: 12 }).catch(() => ({ items: [], total: 0, page: 1, pageSize: 12 })),
+    getBlogs({ pageSize: 4 }).catch(() => ({ items: [], total: 0, page: 1, pageSize: 4 })),
+  ]);
+
+  return (
+    <>
+      <section className="home-hero">
+        <div className="container hero-content">
+          <span className="hero-kicker">اولین آینه ضد بخار در ایران</span>
+          <h1>
+            زیبایی را <strong>هوشمندانه</strong> ببینید
+          </h1>
+          <p>
+            آینه‌های هوشمند گلسموند؛ تلفیقی از طراحی مدرن، نور حرفه‌ای و فناوری
+            ضد بخار برای تجربه‌ای متفاوت.
+          </p>
+          <div className="hero-actions">
+            <Link href="/products" className="primary-button">
+              مشاهده محصولات
+              <ArrowLeft />
+            </Link>
+            <Link href="/about" className="text-button">
+              درباره گلسموند
+              <ArrowUpLeft />
+            </Link>
+          </div>
+        </div>
+        <div className="hero-index" aria-hidden="true">
+          <span>01</span>
+          <i />
+          <small>GLASSMOND</small>
+        </div>
+        <a href="#products" className="scroll-hint" aria-label="رفتن به محصولات">
+          <span>اسکرول کنید</span>
+          <i />
+        </a>
+      </section>
+
+      <section id="products" className="products-section">
+        <div className="container">
+          <SectionHeading
+            eyebrow=""
+            englishTitle="NEW PRODUCTS"
+            title="محصولات جدید ما"
+            description="اولین آینه ضد بخار در ایران"
+          />
+          {productData.items.length > 0 ? (
+            <ProductCarousel products={productData.items} />
+          ) : (
+            <p className="empty-state">در حال حاضر محصولی برای نمایش وجود ندارد.</p>
+          )}
+        </div>
+      </section>
+
+      <section className="resume-section">
+        <div className="container resume-grid">
+          <div>
+            <SectionHeading
+              eyebrow=""
+              englishTitle="OUR STORY"
+              title="یک دهه نوآوری در صنعت آینه هوشمند"
+              align="start"
+            />
+            <p className="resume-text">
+              صادرات به کشورهای خاورمیانه، همکاری با بزرگ‌ترین شرکت واگن‌سازی و
+              لوکوموتیوسازی خاورمیانه (پارس مپنا) و ایجاد نمایندگی‌های معتبر و
+              فعال در ایران و مناطق شمال کشور عراق، بخشی از مسیر گلسموند است.
+            </p>
+            <ul className="check-list">
+              <li><CheckCircle2 /> ثبت اختراع آینه هوشمند ضد بخار</li>
+              <li><CheckCircle2 /> تولید صنعتی با استاندارد IP64</li>
+              <li><CheckCircle2 /> یک سال گارانتی و ده سال خدمات</li>
+            </ul>
+          </div>
+          <div className="resume-image">
+            <Image src="/images/about/gallery-2.jpg" alt="آینه هوشمند گلسموند" fill sizes="50vw" />
+            <div className="experience-badge">
+              <strong>+۱۰</strong>
+              <span>سال تجربه و نوآوری</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Features />
+      <VideoBanner />
+
+      <section id="articles" className="articles-section">
+        <div className="container">
+          <SectionHeading
+            eyebrow=""
+            englishTitle="JOURNAL"
+            title="جدیدترین مقالات"
+            description="مطالب کاربردی درباره آینه، طراحی داخلی و دکوراسیون مدرن"
+          />
+          <div className="articles-grid">
+            {blogData.items.map((article) => (
+              <article className="article-card" key={article.id}>
+                <div className="article-image">
+                  <Link href={blogUrl(article)}>
+                    <Image
+                      src={article.titleImageUrl || "/images/articles/decorative-mirrors.jpg"}
+                      alt={article.title}
+                      fill
+                      sizes="(max-width: 800px) 100vw, 25vw"
+                    />
+                  </Link>
+                </div>
+                <div className="article-copy">
+                  <span>{formatPersianDate(article.publishedAt)}</span>
+                  <h3><Link href={blogUrl(article)}>{article.title}</Link></h3>
+                  <p>{article.abstract}</p>
+                  <Link href={blogUrl(article)} aria-label={`مطالعه ${article.title}`}>
+                    ادامه مطلب
+                    <ArrowLeft />
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}