middle of header

app/components/Seprator.tsx

@@ -6,7 +6,7 @@ type Props = {
 };
 
 const Seprator: FC<Props> = ({ className }) => {
-  return <div className={cn("bg-secondary", className)}></div>;
+  return <div className={cn("bg-[#E9EEF2]", className)}></div>;
 };
 
 export default Seprator;

app/shared/Header.tsx

@@ -1,7 +1,8 @@
 import logo from "@/assets/images/logo.png";
-import { Profile, Truck } from "iconsax-reactjs";
+import { Call, Profile, ShoppingCart, Truck, TruckFast } from "iconsax-reactjs";
 import Image from "next/image";
 import Input from "../components/Input";
+import Seprator from "../components/Seprator";
 
 const Header = () => {
   return (
@@ -32,6 +33,26 @@ const Header = () => {
         <div className="flex-1">
           <Input variant="search" placeholder="جستجوی محصول" />
         </div>
+        <div className="flex gap-8 items-center">
+          <div className="flex gap-2 items-center">
+            <TruckFast variant="Bold" color="black" />
+            <div className="text-[#6C7680] text-sm">پیگیری سفارش</div>
+          </div>
+
+          <Seprator className="h-5 w-px" />
+
+          <div className="flex gap-2 items-center">
+            <Call variant="Bold" color="black" />
+            <div className="text-[#6C7680] text-sm">(30 خط) 02134782000</div>
+          </div>
+
+          <Seprator className="h-5 w-px" />
+
+          <div className="relative">
+            <ShoppingCart variant="Bold" color="black" />
+            <div className="absolute -top-1.5 -right-1.5 bg-primary text-white text-xs font-medium rounded-full size-4 flex items-center justify-center">0</div>
+          </div>
+        </div>
       </div>
     </div>
   );