Create

2026-08-11 20:29:33 +04:30 · 2026-08-09 12:05:39 +03:30
commit 6207bb8431
76 changed files with 5127 additions and 0 deletions
@@ -0,0 +1,68 @@
+import Image from "next/image";
+
+import { Reveal } from "@/components/Reveal";
+import { serviceIcons } from "@/components/ServiceIcons";
+import { serviceDetails, services } from "@/data/site";
+
+/**
+ * All six disciplines at once, in the 3x2 grid the live site uses — hairline
+ * cards, Persian title, tracked Latin subtitle and a short rule beneath.
+ *
+ * A carousel would hide half of them behind a scroll, which is the one thing
+ * the source page deliberately does not do.
+ */
+export function ServiceGrid() {
+  return (
+    <ul className="mx-auto grid max-w-[1400px] gap-6 px-6 pb-24 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 lg:px-12 lg:pb-32">
+      {services.map((service, i) => {
+        const detail = serviceDetails[service.slug];
+        const Icon = serviceIcons[service.slug];
+
+        return (
+          <Reveal as="li" key={service.slug} delay={(i % 3) * 90}>
+            <article
+              id={service.slug}
+              className="group flex h-full scroll-mt-28 flex-col border border-line bg-paper transition-colors duration-500 hover:border-gold/50"
+            >
+              <div className="relative aspect-[4/3] overflow-hidden bg-ink">
+                <Image
+                  src={detail.image}
+                  alt=""
+                  fill
+                  quality={80}
+                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                  placeholder="blur"
+                  loading={i < 3 ? "eager" : "lazy"}
+                  className="object-cover transition-transform duration-[1100ms] ease-out-soft group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-ink/25 transition-colors duration-500 group-hover:bg-ink/10" />
+
+                <span className="latin absolute top-5 right-5 text-sm text-white/70">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+
+                <Icon className="absolute bottom-5 right-5 h-9 w-9 text-white" />
+              </div>
+
+              <div className="flex flex-1 flex-col p-7 lg:p-8">
+                <h3 className="text-xl font-light text-ink">{service.name}</h3>
+
+                <span className="latin mt-2.5 block text-[0.66rem] tracking-[0.26em] text-muted/70">
+                  {service.nameLatin}
+                </span>
+
+                {/* The short rule that sits under each label on the live site. */}
+                <span
+                  aria-hidden="true"
+                  className="mt-5 block h-px w-14 bg-gold/50 transition-all duration-500 ease-out-soft group-hover:w-20 group-hover:bg-gold"
+                />
+
+                <p className="mt-5 text-[0.95rem] leading-[2.1] text-muted">{detail.blurb}</p>
+              </div>
+            </article>
+          </Reveal>
+        );
+      })}
+    </ul>
+  );
+}