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,58 @@
+import Link from "next/link";
+import { services } from "@/data/home";
+
+export function Services() {
+  return (
+    <section
+      id="services"
+      className="relative border-t border-line/30 bg-[linear-gradient(180deg,#fafafa_0%,#f0f2f5_50%,#fafafa_100%)] py-14 lg:py-20"
+    >
+      <div className="relative mx-auto max-w-7xl px-5 lg:px-8">
+        <div className="reveal mb-10 min-w-0">
+          <h2 className="text-[clamp(1.15rem,3.2vw,2.5rem)] font-normal tracking-tight text-ink">
+            خدمات ما
+          </h2>
+          <p className="latin mt-3 text-xs uppercase tracking-[0.2em] text-muted">
+            Our Solutions
+          </p>
+        </div>
+
+        <ul className="grid gap-5 sm:grid-cols-2 lg:gap-6">
+          {services.map((service, index) => (
+            <li
+              key={service.title}
+              className={`reveal ${index % 2 === 1 ? "reveal-delay-1" : ""}`}
+            >
+              <Link
+                href={service.href}
+                className="group group-border-hover flex h-full flex-col rounded-2xl border border-line/70 bg-white/90 p-6 transition hover:shadow-[0_16px_40px_rgba(14,17,22,0.06)] md:p-8"
+              >
+                <div className="mb-5 flex items-center gap-3">
+                  <img
+                    src={service.icon}
+                    alt=""
+                    width={48}
+                    height={48}
+                    className="h-12 w-12 shrink-0 object-contain"
+                  />
+                  <div className="min-w-0">
+                    <h3 className="whitespace-nowrap text-[0.95rem] font-normal text-ink md:text-base">
+                      {service.title}
+                    </h3>
+                    <p className="latin mt-0.5 text-[10px] uppercase tracking-wider text-muted">
+                      {service.titleEn}
+                    </p>
+                  </div>
+                </div>
+
+                <p className="text-body mt-auto text-sm leading-8 text-ink-soft">
+                  {service.description}
+                </p>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}