footer and first desktop version completed
This commit is contained in:
hamid zarghami
@@ -0,0 +1,53 @@
|
||||
import { Call, Location, MessageQuestion, Sms } from "iconsax-reactjs";
|
||||
import { type FC, type ReactNode } from "react";
|
||||
|
||||
type ContactItemProps = {
|
||||
icon: ReactNode;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const ContactItem: FC<ContactItemProps> = ({ icon, children }) => {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-primary text-primary">{icon}</div>
|
||||
<div className="text-sm leading-6 text-[#3A4147]">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FooterContact: FC = () => {
|
||||
return (
|
||||
<div className="flex max-w-[280px] flex-col gap-5">
|
||||
<ContactItem icon={<Location size={18} color="currentColor" variant="Linear" />}>
|
||||
جاده خاوران، شریف آباد، شهرک صنعتی شنزار، بعد از میدان چهارم، خیابان بوستان پنجم، خیابان گلبهار، پلاک ۱۲۲
|
||||
</ContactItem>
|
||||
|
||||
<ContactItem icon={<Call size={18} color="currentColor" variant="Linear" />}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span>۰۲۱-۳۶۹۱۱۵۹۹ | ۰۲۱-۳۶۹۱۰۷۹۹</span>
|
||||
<span>۰۲۱۳۴۷۸۲۰۰۰ (۳۰ خط)</span>
|
||||
</div>
|
||||
</ContactItem>
|
||||
|
||||
<ContactItem icon={<Sms size={18} color="currentColor" variant="Linear" />}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="font-bold text-[#0A1B2C]">پاسخگوی سوالات شما</span>
|
||||
<a href="mailto:info@example.com" className="hover:text-primary" dir="ltr">
|
||||
info@example.com
|
||||
</a>
|
||||
</div>
|
||||
</ContactItem>
|
||||
|
||||
<ContactItem icon={<MessageQuestion size={18} color="currentColor" variant="Linear" />}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span>نیاز به راهنمایی دارید؟</span>
|
||||
<a href="#" className="font-bold text-[#0A1B2C] hover:text-primary">
|
||||
از طریق سوالات متداول پاسخ خود را پیدا کنید.
|
||||
</a>
|
||||
</div>
|
||||
</ContactItem>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterContact;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { type FC } from "react";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
links: string[];
|
||||
};
|
||||
|
||||
const FooterLinkColumn: FC<Props> = ({ title, links }) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h3 className="text-sm font-bold text-[#0A1B2C]">{title}</h3>
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{links.map((link) => (
|
||||
<li key={link}>
|
||||
<a href="#" className="text-sm text-[#3A4147] transition-colors hover:text-primary">
|
||||
{link}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterLinkColumn;
|
||||
@@ -0,0 +1,22 @@
|
||||
import { ArrowLeft } from "iconsax-reactjs";
|
||||
import { type FC } from "react";
|
||||
|
||||
const FooterNewsletter: FC = () => {
|
||||
return (
|
||||
<div className="flex max-w-[360px] flex-col gap-4">
|
||||
<p className="text-sm leading-6 font-bold text-[#0A1B2C]">برای دریافت آخرین پیشنهادها، اخبار و مطالب الهامبخش، در خبرنامه ما عضو شوید.</p>
|
||||
<form className="relative" action="#">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="ایمیل شما"
|
||||
className="h-12 w-full rounded-full border border-[#E9EEF2] bg-[#F1F6FA] ps-5 pe-14 text-sm text-[#3A4147] placeholder:text-[#9AA6B2]"
|
||||
/>
|
||||
<button type="submit" aria-label="عضویت در خبرنامه" className="absolute top-1/2 left-1.5 flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-[#0A1B2C] text-white transition-colors hover:bg-[#0A1B2C]/90">
|
||||
<ArrowLeft size={18} color="currentColor" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterNewsletter;
|
||||
@@ -0,0 +1,78 @@
|
||||
import { type FC, type ReactNode } from "react";
|
||||
|
||||
type SocialLink = {
|
||||
label: string;
|
||||
href: string;
|
||||
bg: string;
|
||||
icon: ReactNode;
|
||||
};
|
||||
|
||||
const socialLinks: SocialLink[] = [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
bg: "bg-[#1877F2]",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
|
||||
<path d="M14 8.5h2.5V5.2C16.1 5.1 15 5 13.8 5 11.4 5 9.8 6.5 9.8 9.2V12H7v3.5h2.8V23h3.5v-7.5H16l.5-3.5h-3.2V9.4c0-1 .3-1.9 1.7-1.9z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
bg: "bg-linear-to-br from-[#F58529] via-[#DD2A7B] to-[#8134AF]",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
|
||||
<path d="M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 1 0 12 7.2zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zm6.3-8.1a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0zM12 3.5c-2.3 0-2.6 0-3.5.1-2.3.1-3.4 1.2-3.5 3.5-.1.9-.1 1.2-.1 3.5s0 2.6.1 3.5c.1 2.3 1.2 3.4 3.5 3.5.9.1 1.2.1 3.5.1s2.6 0 3.5-.1c2.3-.1 3.4-1.2 3.5-3.5.1-.9.1-1.2.1-3.5s0-2.6-.1-3.5c-.1-2.3-1.2-3.4-3.5-3.5-.9-.1-1.2-.1-3.5-.1zm0 1.5c2.3 0 2.5 0 3.4.1 1.8.1 2.6.9 2.7 2.7.1.9.1 1.1.1 3.4s0 2.5-.1 3.4c-.1 1.8-.9 2.6-2.7 2.7-.9.1-1.1.1-3.4.1s-2.5 0-3.4-.1c-1.8-.1-2.6-.9-2.7-2.7-.1-.9-.1-1.1-.1-3.4s0-2.5.1-3.4c.1-1.8.9-2.6 2.7-2.7.9-.1 1.1-.1 3.4-.1z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
bg: "bg-[#0A66C2]",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
|
||||
<path d="M6.5 9.5H3.8V20h2.7V9.5zM5.1 4a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2zM20.2 20h-2.7v-5.5c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V20H11V9.5h2.6v1.4h.1c.4-.7 1.3-1.5 2.7-1.5 2.9 0 3.4 1.9 3.4 4.4V20z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Telegram",
|
||||
href: "#",
|
||||
bg: "bg-[#2AABEE]",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
|
||||
<path d="M9.8 15.3 9.5 19c.4 0 .6-.2.8-.4l2-1.9 4.1 3c.8.4 1.3.2 1.5-.7l2.7-12.7c.2-1.1-.4-1.5-1.2-1.2L4.2 10.3c-1 .3-1 .9-.2 1.2l4.4 1.4 10.2-6.4c.5-.3.9-.1.5.2L9.8 15.3z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "WhatsApp",
|
||||
href: "#",
|
||||
bg: "bg-[#25D366]",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" className="size-4 fill-white" aria-hidden>
|
||||
<path d="M12 3.5A8.4 8.4 0 0 0 5.2 16.3L4 20l3.8-1.2A8.4 8.4 0 1 0 12 3.5zm4.9 12c-.2.6-1.2 1.1-1.7 1.1-.4 0-.9.2-3-.8-2.5-1.2-4.1-4-4.2-4.2-.1-.2-1-1.4-1-2.6s.6-1.9.9-2.1c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .5.4l.8 1.9c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6.2.3.7 1.2 1.6 1.9 1.1.9 2 1.2 2.3 1.3.3.1.5.1.7-.1l.6-.7c.2-.2.4-.2.6-.1l1.8.8c.2.1.4.2.4.4 0 .2 0 1.2-.5 1.8z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const FooterSocial: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<h3 className="text-sm font-bold text-[#0A1B2C]">ما را در شبکههای اجتماعی دنبال کنید</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
{socialLinks.map((item) => (
|
||||
<a key={item.label} href={item.href} aria-label={item.label} className={`flex size-9 items-center justify-center rounded-full ${item.bg}`}>
|
||||
{item.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterSocial;
|
||||
@@ -0,0 +1,20 @@
|
||||
import { type FC } from "react";
|
||||
|
||||
const badges = ["اینماد", "ساماندهی", "اتحادیه"];
|
||||
|
||||
const FooterTrustBadges: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<h3 className="text-sm font-bold text-[#0A1B2C]">نماد های اعتماد</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
{badges.map((badge) => (
|
||||
<div key={badge} className="flex size-16 items-center justify-center rounded-full border border-[#E9EEF2] bg-white text-center text-[10px] font-bold text-[#6C7680]">
|
||||
{badge}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterTrustBadges;
|
||||
@@ -0,0 +1,22 @@
|
||||
import { TickCircle } from "iconsax-reactjs";
|
||||
import { type FC } from "react";
|
||||
|
||||
const values = ["تضمین کیفیت چاپ", "طراحی اختصاصی", "تحویل سریع", "پشتیبانی قبل و بعد از خرید", "ارسال به سراسر ایران"];
|
||||
|
||||
const FooterTrustValues: FC = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<h3 className="text-sm font-bold text-[#0A1B2C]">اعتماد شما، سرمایه ما</h3>
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{values.map((value) => (
|
||||
<li key={value} className="flex items-center gap-2 text-sm text-[#3A4147]">
|
||||
<TickCircle size={18} color="currentColor" variant="Bold" className="shrink-0 text-primary" />
|
||||
{value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterTrustValues;
|
||||
Reference in New Issue
Block a user