102 lines
3.8 KiB
TypeScript
102 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import { Send } from "lucide-react";
|
|
import { Container } from "@/components/Container";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { branches, navLinks, phones, site } from "@/lib/data";
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-ink text-white">
|
|
<Container className="grid gap-12 py-16 sm:grid-cols-2 lg:grid-cols-12">
|
|
<div className="lg:col-span-4">
|
|
<div className="inline-block rounded-xl bg-white px-3 py-2">
|
|
<Placeholder src={site.logo} alt={site.name} className="h-14 w-auto object-contain" />
|
|
</div>
|
|
<p className="mt-5 max-w-sm text-[14px] leading-8 text-white/65">{site.description}</p>
|
|
<a
|
|
href={site.telegram}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-5 inline-flex items-center gap-2 text-[13px] hover:text-brand"
|
|
>
|
|
<Send className="size-4" />
|
|
ما را دنبال کنید
|
|
</a>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2">
|
|
<h3 className="mb-4 text-[13px] font-bold text-white/50">صفحات</h3>
|
|
<ul className="space-y-2.5 text-[14px] text-white/75">
|
|
{navLinks.map((item) => (
|
|
<li key={item.href}>
|
|
<Link href={item.href} className="hover:text-white">
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="lg:col-span-3">
|
|
<h3 className="mb-4 text-[13px] font-bold text-white/50">مکان ما</h3>
|
|
<ul className="space-y-4 text-[14px] leading-7 text-white/75">
|
|
{branches.map((branch) => (
|
|
<li key={branch.id}>
|
|
<strong className="text-white">{branch.title}</strong>
|
|
<p className="mt-1">{branch.address}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="lg:col-span-3">
|
|
<h3 className="mb-4 text-[13px] font-bold text-white/50">تماس با ما</h3>
|
|
<ul className="space-y-2 font-latin text-[20px] tracking-wide">
|
|
{phones.slice(0, 4).map((phone) => (
|
|
<li key={phone.value}>
|
|
<a href={phone.href} className="hover:text-brand" dir="ltr">
|
|
{phone.value}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
|
|
<div className="border-t border-white/10 bg-black/40">
|
|
<Container className="py-3">
|
|
<div className="footer-bottom-bar">
|
|
<div className="footer-bottom-site">{site.name}</div>
|
|
<a
|
|
href="https://meshkee.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
dir="ltr"
|
|
className="meshkee-credit"
|
|
>
|
|
<span className="meshkee-credit__frame" aria-hidden>
|
|
<span className="meshkee-credit__line meshkee-credit__line--l" />
|
|
<span className="meshkee-credit__line meshkee-credit__line--t" />
|
|
<span className="meshkee-credit__line meshkee-credit__line--r" />
|
|
<span className="meshkee-credit__line meshkee-credit__line--b" />
|
|
</span>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src="/images/meshkee-logo-white.png"
|
|
alt="Meshkee"
|
|
className="meshkee-credit__logo"
|
|
width={42}
|
|
height={42}
|
|
/>
|
|
<span className="meshkee-credit__text">
|
|
<span className="meshkee-credit__label">Designed And Developed By</span>
|
|
<span className="meshkee-credit__name">Meshkee E-Commerce Team</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|