Initial commit: Negin Dental Clinic website

Next.js (App Router) clone of negindentalclinic.ir, wired to the
Meshkee Website API (blog, contact form, favicon), with on-page SEO
and a scroll-reveal animation sequence on the homepage.

See context.md for full project context.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/about-us/about.module.css

@@ -0,0 +1,74 @@
+.intro,
+.care {
+  display: grid;
+  gap: 40px;
+  align-items: center;
+}
+
+@media (min-width: 860px) {
+  .intro,
+  .care {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.intro h2,
+.care h2 {
+  font-size: 28px;
+  margin: 6px 0 16px;
+}
+
+.intro > div:not(.introArt),
+.care > div:not(.careArt) {
+  display: flex;
+  flex-direction: column;
+}
+
+/* push the section CTA to the left edge of the text column */
+.intro :global(.btn),
+.care :global(.btn) {
+  align-self: flex-end;
+}
+
+.introArt img,
+.careArt img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.adv {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  border-inline-start: 4px solid var(--cyan);
+}
+
+.adv h3 {
+  font-size: 19px;
+  margin: 0 0 10px;
+}
+
+.adv p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.insurances {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  justify-content: center;
+}
+
+.insurances li {
+  background: var(--bg-tint);
+  color: var(--brand);
+  font-weight: 700;
+  padding: 12px 26px;
+  border-radius: 999px;
+  font-size: 15px;
+}

app/about-us/page.js

@@ -0,0 +1,151 @@
+import Image from "next/image";
+import Link from "next/link";
+import PageHero from "@/components/PageHero";
+import styles from "./about.module.css";
+
+export const metadata = {
+  title: "درباره ما",
+  description:
+    "درباره کلینیک دندانپزشکی نگین در قم؛ کادر مجرب، مواد باکیفیت، دسترسی آسان و قرارداد با بیمه‌های معتبر و بانک‌ها.",
+};
+
+const INSURANCES = [
+  "دانا",
+  "نوین",
+  "ایران",
+  "بانک ملت",
+  "معلم",
+  "کوثر",
+  "بانک تجارت",
+  "دی",
+  "سامان",
+];
+
+const ADVANTAGES = [
+  {
+    title: "دسترسی آسان",
+    text: "قرار گرفتن کلینیک در یکی از اصلی‌ترین خیابان‌های قم و دسترسی آسان از تمامی نقاط شهر.",
+  },
+  {
+    title: "مواد با کیفیت",
+    text: "استفاده از مواد و تجهیزات دندانپزشکی با کیفیت و مطابق با استانداردهای روز دنیا.",
+  },
+  {
+    title: "کادر مجرب",
+    text: "کادر مجرب دندانپزشکی و متخصصان عضو هیئت علمی دانشکده دندانپزشکی.",
+  },
+  {
+    title: "ویژه بانوان و کودکان",
+    text: "محیطی آرام و مناسب برای بانوان و کودکان جهت ارائه خدمات تخصصی و عمومی.",
+  },
+];
+
+export default function AboutPage() {
+  return (
+    <>
+      <PageHero
+        en="About Us"
+        fa="درباره ما"
+        lead="درباره کلینیک نگین بیشتر بدانید…"
+      />
+
+      <section className="section">
+        <div className={`container ${styles.intro}`}>
+          <div className={styles.introArt}>
+            <Image
+              src="/assets/img/info3-2.jpg"
+              alt="کلینیک دندانپزشکی نگین"
+              width={720}
+              height={540}
+            />
+          </div>
+          <div>
+            <span className="sec-head__en">More About Our Clinic</span>
+            <h2>درباره کلینیک بیشتر بدانید</h2>
+            <p>
+              دسترسی آسان از تمامی نقاط قم به کلینیک و قرار گرفتن آن در یکی از
+              اصلی‌ترین خیابان‌های شهر، از مزیت‌های بارز این کلینیک است. استفاده
+              از مواد با کیفیت و کادر مجرب دندانپزشکی از دیگر مزیت‌های کلینیک
+              دندانپزشکی نگین است.
+            </p>
+            <p>
+              کلینیک نگین با بهره‌گیری از متخصصین مجرب و محیطی آرام و مناسب برای
+              بانوان و کودکان، آماده پاسخگویی و ارائه خدمت به مراجعین محترم می‌باشد.
+            </p>
+            <Link href="/contact-us" className="btn btn--cyan">
+              با ما در تماس باشید
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <section className="section section--tint">
+        <div className="container">
+          <div className="sec-head">
+            <span className="sec-head__en">Why Negin</span>
+            <h2 className="sec-head__fa">مزیت‌های کلینیک نگین</h2>
+          </div>
+          <div className="grid grid--2">
+            {ADVANTAGES.map((a) => (
+              <article key={a.title} className={styles.adv}>
+                <h3>{a.title}</h3>
+                <p>{a.text}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="section">
+        <div className="container">
+          <div className="sec-head">
+            <span className="sec-head__en">Insurance &amp; Banks</span>
+            <h2 className="sec-head__fa">طرف قرارداد با بیمه‌های معتبر و بانک‌ها</h2>
+            <p className="sec-head__lead">از جمله بیمه‌ها و بانک‌های طرف قرارداد کلینیک نگین:</p>
+          </div>
+          <ul className={styles.insurances}>
+            {INSURANCES.map((i) => (
+              <li key={i}>{i}</li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="section section--grey">
+        <div className={`container ${styles.care}`}>
+          <div>
+            <span className="sec-head__en">Dental Care</span>
+            <h2>مراقبت از دندان</h2>
+            <p>
+              یکی از مهم‌ترین اعضای بدن انسان دندان‌ها هستند. بسیاری از افراد با
+              کوتاهی کردن، سلامت دندان‌هایشان را به خطر می‌اندازند یا پس از خراب
+              شدن یک دندان خیلی دیر به دندانپزشک مراجعه می‌کنند که باعث مشکلات و
+              بیماری‌های دیگر دندان و لثه می‌شود.
+            </p>
+            <p>
+              به مرور زمان ترک‌ (شکاف)‌های ریزی روی مینای دندان ایجاد می‌شود؛ این
+              شکاف‌ها فشار ایجادشده هنگام جویدن را خنثی کرده و از شکسته شدن دندان
+              جلوگیری می‌کنند.
+            </p>
+            <p>
+              خمیردندان‌های معمولی موجود در بازار معمولاً به حد کافی فلوراید دارند
+              که استفاده از آن‌ها در وعده‌های مسواک زدن، به سفیدی دندان و محافظت از
+              مینای دندان کمک قابل‌توجهی می‌کند. با این حال، دندان‌ها همیشه نمی‌توانند
+              در برابر باکتری‌های موجود در دهان پایداری کنند؛ این باکتری‌ها اسیدهایی
+              ترشح می‌کنند که کلسیم و فسفات مینای دندان را از بین برده و باعث پوسیدگی
+              دندان‌ها می‌شوند.
+            </p>
+          </div>
+          <div className={styles.careArt}>
+            <Image
+              src="/assets/img/info3-3.jpg"
+              alt="مراقبت از دندان"
+              width={720}
+              height={540}
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}