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>
2026-08-26 00:08:00 +03:30
commit 98fde02322
66 changed files with 8280 additions and 0 deletions
@@ -0,0 +1,99 @@
+import Link from "next/link";
+import { ArrowLeft, Play } from "lucide-react";
+import { features } from "@/data/site";
+
+export function SectionHeading({
+  eyebrow,
+  englishTitle,
+  title,
+  description,
+  align = "center",
+}: {
+  eyebrow: string;
+  englishTitle?: string;
+  title: string;
+  description?: string;
+  align?: "center" | "start";
+}) {
+  return (
+    <div className={`section-heading ${align === "start" ? "align-start" : ""}`}>
+      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
+      {englishTitle && <span className="english-title">{englishTitle}</span>}
+      <h2>{title}</h2>
+      {description && <p>{description}</p>}
+    </div>
+  );
+}
+
+export function Features({ compact = false }: { compact?: boolean }) {
+  return (
+    <section id="features" className={`features-section ${compact ? "compact" : ""}`}>
+      <div className="container">
+        {!compact && (
+          <SectionHeading
+            eyebrow=""
+            englishTitle="WHY GLASSMOND"
+            title="چرا گلسموند را انتخاب کنیم؟"
+            description="کیفیت، ایمنی و طراحی هوشمند؛ سه اصل همیشگی ما در ساخت هر آینه"
+          />
+        )}
+        {compact && <h2 className="sr-only">ویژگی‌های آینه هوشمند گلسموند</h2>}
+        <div className="features-grid">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <article className="feature-card" key={feature.number}>
+                <span className="feature-number">{feature.number}</span>
+                <Icon className="feature-icon" />
+                <h3>{feature.title}</h3>
+                <p>{feature.description}</p>
+              </article>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function VideoBanner() {
+  return (
+    <section className="video-banner">
+      <div className="container video-content">
+        <button className="play-button" type="button" aria-label="پخش ویدیوی معرفی گلسموند">
+          <Play />
+        </button>
+        <div>
+          <p>آینه گلسموند، حاصل تلاشی سخت برای نتیجه‌ای ماندگار</p>
+          <h2>آینه هوشمند گلسموند را بهتر بشناسید</h2>
+        </div>
+        <Link href="/about" className="outline-button">
+          داستان ما
+          <ArrowLeft />
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+export function PageHero({
+  englishTitle,
+  title,
+}: {
+  englishTitle: string;
+  title: string;
+}) {
+  return (
+    <section className="page-hero">
+      <div className="container">
+        <span className="page-hero-label">{englishTitle}</span>
+        <h1>{title}</h1>
+        <div className="breadcrumbs">
+          <Link href="/">صفحه اصلی</Link>
+          <b>/</b>
+          <span>{title}</span>
+        </div>
+      </div>
+    </section>
+  );
+}