banner section compeleted

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;

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>