From fe22acac57e28882467ff75b84be8010c33de266 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 14 Jul 2026 16:44:30 +0330
Subject: [PATCH] banner section compeleted

---
 app/components/Button.tsx             | 27 +++++++++++++++++++++++++++
 app/home/components/BannerSection.tsx | 16 ++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 app/components/Button.tsx

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
new file mode 100644
index 0000000..c51a8c1
--- /dev/null
+++ b/app/components/Button.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/app/lib/cn";
+import { FC } from "react";
+
+export type ButtonVariant = "primary" | "outline";
+
+type Props = {
+  variant?: ButtonVariant;
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+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",
+        variant === "primary" && "bg-primary text-white hover:bg-primary/90",
+        variant === "outline" && "border border-primary bg-transparent text-primary hover:bg-primary/10",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/app/home/components/BannerSection.tsx b/app/home/components/BannerSection.tsx
index 2be0aac..2881333 100644
--- a/app/home/components/BannerSection.tsx
+++ b/app/home/components/BannerSection.tsx
@@ -1,4 +1,6 @@
+import Button from "@/app/components/Button";
 import banner from "@/assets/images/banner.png";
+import { ArrowCircleLeft } from "iconsax-reactjs";
 import Image from "next/image";
 import { FC } from "react";
 
@@ -18,6 +20,20 @@ const BannerSection: FC = () => {
             <div>خدمات مشتریان بی‌نظیر</div>
             <div>سیستم سفارش‌گیری ساده</div>
           </div>
+
+          <div className="mt-4 flex gap-6 items-center">
+            <Button>
+              <div className="flex gap-2.5">
+                <div>محصولات</div>
+                <ArrowCircleLeft size={24} color="white" />
+              </div>
+            </Button>
+            <Button variant="outline" className="min-w-16">
+              <div className="flex gap-2.5">
+                <div>درباره ی ما</div>
+              </div>
+            </Button>
+          </div>
         </div>
       </div>
     </div>