Arda Samadi
24449fe5e9
- MyLayout: make the desktop shell a flex column with the content area flex-1, so the footer sits flush and pins to the bottom on short pages - DesktopFooter: drop the mt-24 that exposed the wrapper bg as a gray band - also fixes the light-gray patches in dark mode (wrapper bg no longer shows)
101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import { Link } from "@remix-run/react";
|
||
import { Instagram, Send } from "lucide-react";
|
||
import logo from "~/assets/logo/SVG-07.svg";
|
||
|
||
type FooterLink = { label: string; to: string };
|
||
type FooterCol = { heading: string; links: FooterLink[] };
|
||
|
||
const COLUMNS: FooterCol[] = [
|
||
{
|
||
heading: "خرید",
|
||
links: [
|
||
{ label: "تازهها", to: "/explore" },
|
||
{ label: "تخفیفها", to: "/" },
|
||
{ label: "کالکشنها", to: "/collections" },
|
||
{ label: "برندها", to: "/sellers" },
|
||
],
|
||
},
|
||
{
|
||
heading: "ویترون",
|
||
links: [
|
||
{ label: "درباره ما", to: "/profile/about" },
|
||
{ label: "سوالات متداول", to: "/profile/faq" },
|
||
],
|
||
},
|
||
{
|
||
heading: "پشتیبانی",
|
||
links: [
|
||
{ label: "راهنمای خرید", to: "/profile/faq" },
|
||
{ label: "پیگیری سفارش", to: "/profile/orders" },
|
||
],
|
||
},
|
||
];
|
||
|
||
/**
|
||
* Desktop-only footer. Hidden below the `lg` breakpoint.
|
||
*/
|
||
const DesktopFooter = () => {
|
||
return (
|
||
<footer className="hidden lg:block border-t border-WHITE3 bg-WHITE2">
|
||
<div className="max-w-[1320px] mx-auto px-8 pt-14 pb-8 grid grid-cols-[1.6fr_1fr_1fr_1fr] gap-10">
|
||
<div>
|
||
<div className="flex items-center gap-2.5">
|
||
<img src={logo} alt="ویترون" className="w-6 h-8 object-contain" />
|
||
<b className="text-[22px] font-extrabold text-VITROWN_BLUE">ویترون</b>
|
||
</div>
|
||
<p className="text-GRAY text-[13.5px] max-w-[280px] my-3 leading-8">
|
||
ویترین آنلاین برندهای پوشاک ایران. از بهترین فروشگاهها کشف کن، دنبال
|
||
کن و خرید کن.
|
||
</p>
|
||
<Link
|
||
to="/store/create"
|
||
className="inline-flex items-center justify-center h-[38px] px-3.5 rounded-[10px] bg-BLACK text-white text-[13.5px] font-bold hover:bg-black transition-colors"
|
||
>
|
||
فروشگاه خود را بسازید
|
||
</Link>
|
||
</div>
|
||
|
||
{COLUMNS.map((col) => (
|
||
<div key={col.heading}>
|
||
<h4 className="text-[14px] font-bold mb-3.5">{col.heading}</h4>
|
||
<ul className="flex flex-col gap-2.5">
|
||
{col.links.map((l) => (
|
||
<li key={l.label + l.to}>
|
||
<Link
|
||
to={l.to}
|
||
className="text-BLACK2 text-[13.5px] hover:text-BLACK transition-colors"
|
||
>
|
||
{l.label}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="max-w-[1320px] mx-auto px-8 py-5 pb-10 flex justify-between items-center border-t border-WHITE3 text-GRAY text-[12.5px]">
|
||
<span>© ۱۴۰۴ ویترون — تمامی حقوق محفوظ است.</span>
|
||
<div className="flex gap-2.5">
|
||
<a
|
||
href="#"
|
||
aria-label="اینستاگرام"
|
||
className="w-[38px] h-[38px] rounded-full bg-WHITE border border-GRAY3 grid place-items-center text-BLACK2 hover:text-BLACK hover:border-BLACK transition-colors"
|
||
>
|
||
<Instagram size={18} />
|
||
</a>
|
||
<a
|
||
href="#"
|
||
aria-label="تلگرام"
|
||
className="w-[38px] h-[38px] rounded-full bg-WHITE border border-GRAY3 grid place-items-center text-BLACK2 hover:text-BLACK hover:border-BLACK transition-colors"
|
||
>
|
||
<Send size={18} />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
};
|
||
|
||
export default DesktopFooter;
|