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,112 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import aboutImage from "@/assets/images/about/about.jpg";
+import { Reveal } from "@/components/Reveal";
+import { about, site, stats } from "@/data/site";
+
+export function About() {
+  return (
+    <section id="about" className="relative overflow-hidden bg-paper py-16 lg:py-28">
+      {/* Oversized watermark, mirrored to sit at the outer edge in RTL. */}
+      <span
+        aria-hidden="true"
+        className="latin pointer-events-none absolute -top-4 -left-8 hidden text-[11rem] leading-none font-bold text-ink/[0.035] select-none lg:block"
+      >
+        RAOOFI
+      </span>
+
+      <div className="mx-auto max-w-[1400px] px-5 lg:px-10">
+        <div className="grid items-center gap-14 lg:grid-cols-2 lg:gap-20">
+          <Reveal className="order-2 lg:order-1">
+            <div className="group relative">
+              <div className="relative aspect-[4/3] overflow-hidden">
+                <Image
+                  src={aboutImage}
+                  alt="نمای پروژه‌های گروه ساختمانی رئوفی"
+                  fill
+                  quality={88}
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                  placeholder="blur"
+                  className="object-cover transition-transform duration-[1200ms] ease-out-soft group-hover:scale-105"
+                />
+              </div>
+
+              {/* Gold frame offset behind the photo. */}
+              <div
+                aria-hidden="true"
+                className="pointer-events-none absolute -bottom-5 -left-5 -z-10 hidden h-full w-full border border-gold/45 lg:block"
+              />
+
+              <div className="absolute -bottom-px right-0 bg-paper py-5 pe-0 ps-6">
+                <span className="latin text-xs tracking-[0.36em] text-gold">
+                  {site.taglineLatin}
+                </span>
+              </div>
+            </div>
+          </Reveal>
+
+          <div className="order-1 lg:order-2">
+            <Reveal>
+              <p className="kicker mb-7">{about.kicker}</p>
+            </Reveal>
+
+            <Reveal delay={90}>
+              <h2 className="text-[1.625rem] leading-[1.3] font-extrabold whitespace-nowrap text-ink lg:text-[2.625rem]">
+                {about.titleTop} <span className="text-gold">{about.titleBottom}</span>
+              </h2>
+            </Reveal>
+
+            <Reveal delay={170}>
+              <p className="mt-8 border-e-2 border-gold pe-5 text-xl leading-relaxed font-light text-ink-2 lg:text-2xl">
+                {about.lead}
+              </p>
+            </Reveal>
+
+            <Reveal delay={240}>
+              <p className="mt-7 text-[1.02rem] leading-[2.15] text-muted">{about.body}</p>
+            </Reveal>
+
+            <Reveal delay={310}>
+              <p className="mt-7 text-lg leading-relaxed text-ink-2">{about.closing}</p>
+            </Reveal>
+
+            <Reveal delay={380}>
+              <Link
+                href="/aboutus"
+                className="group mt-10 inline-flex items-center gap-3 border-b border-gold pb-2 text-ink transition-colors duration-300 hover:text-gold"
+              >
+                {about.cta}
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                  className="h-4 w-4 text-gold transition-transform duration-300 group-hover:-translate-x-1"
+                >
+                  <path d="M19 12H5m0 0 6-6m-6 6 6 6" stroke="currentColor" strokeWidth="1.6" />
+                </svg>
+              </Link>
+            </Reveal>
+          </div>
+        </div>
+
+        {/* Key numbers */}
+        <div className="mt-24 grid grid-cols-2 gap-px border border-line bg-line lg:mt-32 lg:grid-cols-4">
+          {stats.map((stat, i) => (
+            <Reveal key={stat.label} delay={i * 90} className="bg-paper">
+              <div className="px-6 py-10 text-center lg:px-8 lg:py-12">
+                <span className="latin block text-[0.62rem] tracking-[0.34em] text-gold">
+                  {stat.latin}
+                </span>
+                <span className="mt-4 block text-4xl font-extrabold text-ink lg:text-5xl">
+                  {stat.value}
+                </span>
+                <span className="mt-3 block text-sm text-muted">{stat.label}</span>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}