Build Meshkee marketing site with service pages and shared layout.

Add home and service routes (website, app, CMS, SEO, graphic), brand assets, and components aligned with the live meshkee.com design. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-28 10:49:55 +03:30
parent 045d507cbe
commit 47bee1ce66
70 changed files with 2847 additions and 85 deletions
@@ -0,0 +1,68 @@
+import { site } from "@/data/home";
+import { images } from "@/data/assets";
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden bg-white">
+      <div className="mx-auto grid max-w-7xl items-center gap-8 px-5 pb-12 pt-32 lg:grid-cols-2 lg:gap-10 lg:px-8 lg:pb-16 lg:pt-36">
+        <div className="order-2 max-w-xl lg:order-1">
+          <p
+            className="mb-5 text-sm text-muted"
+            style={{ animation: "rise-in 0.9s ease both" }}
+          >
+            راهکارهای مدرن برای تجارت شما
+          </p>
+
+          <h1
+            className="mb-4 text-[clamp(1.15rem,3.2vw,2rem)] font-normal tracking-tight text-ink"
+            style={{ animation: "rise-in 1s ease both 0.08s" }}
+          >
+            {site.fullTitle}
+          </h1>
+
+          <p
+            className="latin mb-10 text-sm uppercase text-muted md:text-base"
+            style={{ animation: "rise-in 1s ease both 0.16s" }}
+          >
+            {site.taglineEn}
+          </p>
+
+          <div
+            className="flex flex-wrap items-center gap-4"
+            style={{ animation: "rise-in 1s ease both 0.3s" }}
+          >
+            <a
+              href="#services"
+              className="btn-primary inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-sm"
+            >
+              بریم سراغ راه‌کارها
+              <span aria-hidden className="text-base leading-none">
+                ↓
+              </span>
+            </a>
+            <a
+              href={site.phoneHref}
+              className="link-hover inline-flex items-center gap-2 text-sm text-ink-soft"
+            >
+              باهام تماس بگیرید
+            </a>
+          </div>
+        </div>
+
+        <div
+          className="order-1 relative lg:order-2"
+          style={{ animation: "fade-in 1.2s ease both 0.2s" }}
+        >
+          <div className="pointer-events-none absolute inset-8 rounded-full bg-[radial-gradient(circle,var(--glow),transparent_70%)] blur-2xl" />
+          <div className="animate-float relative mx-auto aspect-square w-full max-w-[560px]">
+            <img
+              src={images.hero}
+              alt="تیم تجارت الکترونیک مشکی"
+              className="h-full w-full object-contain object-center drop-shadow-[0_30px_60px_rgba(14,17,22,0.14)]"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}