footer and first desktop version completed

2026-07-19 16:09:33 +03:30
parent 2c9b43c84a
commit 2adaac8ec4
12 changed files with 275 additions and 7 deletions
@@ -12,7 +12,7 @@ const Button: FC<Props> = ({ variant = "primary", className, children, ...rest }
  return (
    <button
      className={cn(
-        "inline-flex h-12 items-center justify-center rounded-full px-6 text-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex h-10 items-center justify-center rounded-full px-6 text-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
        variant === "primary" && "bg-primary text-white hover:bg-primary/90",
        variant === "outline" && "border border-primary bg-transparent text-primary hover:bg-primary/10",
        className,
@@ -18,7 +18,7 @@ const Input: FC<Props> = (props) => {
      <input
        type={variant === "search" ? "search" : "text"}
        className={cn(
-          "h-12 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary",
+          "h-10 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary",
          variant === "search" && "pr-13",
          className,
        )}
@@ -18,7 +18,7 @@ const Select: FC<Props> = ({ options, className, placeholder, children, ...rest
    <div className="relative w-full" dir="rtl">
      <select
        className={cn(
-          "h-12 w-full appearance-none rounded-2xl border border-secondary bg-white px-4 pl-13 text-right text-sm transition-colors focus:border-primary disabled:pointer-events-none disabled:opacity-50",
+          "h-10 w-full appearance-none rounded-2xl border border-secondary bg-white px-4 pl-13 text-right text-sm transition-colors focus:border-primary disabled:pointer-events-none disabled:opacity-50",
          className,
        )}
        {...rest}
@@ -10,7 +10,7 @@ import StepSection from "./components/StepSection";

 const Home = () => {
  return (
-    <div className="pb-[120px]">
+    <div>
      <BannerSection />
      <StepSection />
      <CategorySection />
@@ -2,6 +2,7 @@ import "@/assets/iranyekan/fonts.css";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Footer from "./shared/Footer";
 import Header from "./shared/Header";

 const geistSans = Geist({
@@ -25,10 +26,11 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
-      <body className="min-h-full flex flex-col">
+    <html lang="fa" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
+      <body className="flex min-h-full flex-col">
        <Header />
-        {children}
+        <main className="flex-1">{children}</main>
+        <Footer />
      </body>
    </html>
  );
@@ -0,0 +1,46 @@
+import Seprator from "@/app/components/Seprator";
+import { type FC } from "react";
+import FooterContact from "./components/FooterContact";
+import FooterLinkColumn from "./components/FooterLinkColumn";
+import FooterNewsletter from "./components/FooterNewsletter";
+import FooterSocial from "./components/FooterSocial";
+import FooterTrustBadges from "./components/FooterTrustBadges";
+import FooterTrustValues from "./components/FooterTrustValues";
+
+const guideLinks = ["سوالات متداول", "راهنمای ثبت سفارش", "راهنمای طراحی فایل", "روش‌های ارسال", "شیوه‌های پرداخت", "استعلام قیمت"];
+const serviceLinks = ["درباره ما", "تماس با ما", "قوانین و مقررات", "حریم خصوصی", "شرایط ثبت سفارش", "فرصت‌های همکاری"];
+const infoLinks = ["پیگیری سفارش", "باشگاه مشتریان", "بلاگ و مقالات", "پیشنهادهای ویژه", "همکاری با ما", "نقشه سایت"];
+const categoryLinks = ["چاپ جعبه و بسته‌بندی", "جعبه هاردباکس", "چاپ لیبل و برچسب", "چاپ استیکر", "چاپ ساک دستی", "چاپ کارت ویزیت", "چاپ تراکت و بروشور"];
+
+const Footer: FC = () => {
+  return (
+    <footer className="mt-auto border-t border-[#E9EEF2] bg-[#F7F9FB]">
+      <div className="px-[120px] pt-12 pb-6">
+        <div className="flex justify-between gap-8">
+          <FooterContact />
+          <FooterLinkColumn title="راهنمای خرید" links={guideLinks} />
+          <FooterLinkColumn title="خدمات مشتریان" links={serviceLinks} />
+          <FooterLinkColumn title="اطلاعات" links={infoLinks} />
+          <FooterLinkColumn title="دسته‌بندی محصولات" links={categoryLinks} />
+          <FooterTrustValues />
+        </div>
+
+        <Seprator className="my-8 h-px w-full" />
+
+        <div className="flex items-center justify-between gap-8">
+          <FooterSocial />
+          <Seprator className="h-16 w-px shrink-0" />
+          <FooterTrustBadges />
+          <Seprator className="h-16 w-px shrink-0" />
+          <FooterNewsletter />
+        </div>
+
+        <Seprator className="my-8 h-px w-full" />
+
+        <p className="text-center text-xs text-[#6C7680]">تمامی حقوق برای سایت نیکوپکجینگ بوده و با ذکر نام لینک به منبع مجاز می‌باشد.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
@@ -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;