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>
133 lines
4.7 KiB
JavaScript
133 lines
4.7 KiB
JavaScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import styles from "./Footer.module.css";
|
||
|
||
const PHONES = ["۰۲۵ - ۳۲۹۴۵۰۸۸", "۰۲۵ - ۳۲۹۴۵۳۵۰", "۰۲۵ - ۳۲۹۴۵۰۷۷"];
|
||
|
||
const faDigitsToLatin = (s) =>
|
||
s.replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d)).replace(/\D/g, "");
|
||
|
||
const INSURANCES = [
|
||
"بیمه بانک تجارت",
|
||
"بیمه بانک ملت",
|
||
"بیمه سامان",
|
||
"بیمه معلم",
|
||
"بیمه نوین",
|
||
"بیمه ایران",
|
||
"بیمه کوثر",
|
||
"بیمه دی",
|
||
"بیمه دانا",
|
||
];
|
||
|
||
const SOCIAL = [
|
||
{ label: "اینستاگرام", href: "https://www.instagram.com/neginclinicc", icon: "instagram" },
|
||
{ label: "آپارات", href: "https://www.aparat.com/v/3zqwp", icon: "aparat" },
|
||
{ label: "تلگرام", href: "https://telegram.me/negin_clinic", icon: "telegram" },
|
||
];
|
||
|
||
function Icon({ name }) {
|
||
if (name === "instagram") {
|
||
return (
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||
<circle cx="12" cy="12" r="4" />
|
||
<circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
|
||
</svg>
|
||
);
|
||
}
|
||
if (name === "telegram") {
|
||
return (
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||
<path d="M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9-8.1c.4-.3-.1-.5-.6-.2L6.7 13 1.9 11.5c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z" />
|
||
</svg>
|
||
);
|
||
}
|
||
return (
|
||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.8 13.6V8.4L16 12l-5.8 3.6z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export default function Footer() {
|
||
return (
|
||
<footer className={styles.footer}>
|
||
<div className={`container ${styles.grid}`}>
|
||
<div className={styles.col}>
|
||
<Image
|
||
src="/assets/files/sJcexIa9R4.png"
|
||
alt="کلینیک دندانپزشکی نگین"
|
||
width={200}
|
||
height={60}
|
||
className={styles.logo}
|
||
/>
|
||
<p className={styles.tag}>
|
||
کلینیک دندانپزشکی نگین، ارائهدهنده کلیه خدمات دندانپزشکی از جمله:
|
||
ارتودنسی نامرئی، ایمپلنت و زیبایی.
|
||
</p>
|
||
<div className={styles.social}>
|
||
{SOCIAL.map((s) => (
|
||
<a
|
||
key={s.icon}
|
||
href={s.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label={s.label}
|
||
title={s.label}
|
||
>
|
||
<Icon name={s.icon} />
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={styles.col}>
|
||
<h6 className={styles.head}>تلفن</h6>
|
||
<ul className={styles.list}>
|
||
{PHONES.map((p) => (
|
||
<li key={p}>
|
||
<a dir="ltr" href={`tel:+98${faDigitsToLatin(p).replace(/^0/, "")}`}>
|
||
{p}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<h6 className={styles.head}>آدرس</h6>
|
||
<p className={styles.addr}>قم، بلوار امین، کوچه ۲۱، شماره ۵ (روبروی صدا و سیما)</p>
|
||
</div>
|
||
|
||
<div className={styles.col}>
|
||
<h6 className={styles.head}>بیمههای طرف قرارداد</h6>
|
||
<ul className={`${styles.list} ${styles.insList}`}>
|
||
{INSURANCES.map((i) => (
|
||
<li key={i}>{i}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className={styles.col}>
|
||
<h6 className={styles.head}>دسترسی سریع</h6>
|
||
<ul className={styles.list}>
|
||
<li><Link href="/services">خدمات کلینیک</Link></li>
|
||
<li><Link href="/about-us">درباره ما</Link></li>
|
||
<li><Link href="/contact-us">تماس با ما</Link></li>
|
||
<li><Link href="/blog">مقالات</Link></li>
|
||
<li><Link href="/virtual-tour">تور مجازی</Link></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* bottom row — mirrors the Meshkee footer structure */}
|
||
<div className={styles.copyRow}>
|
||
<div className={`container ${styles.copyInner}`}>
|
||
<span dir="ltr">© {new Date().getFullYear()} Meshkee — مشکی</span>
|
||
<a href="https://www.meshkee.com" target="_blank" rel="noopener noreferrer">
|
||
طراحی و توسعه توسط تیم تجارت الکترونیک مشکی
|
||
<span className={styles.copyEn}>Designed & Developed By Meshkee E-Commerce Team</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|