top of header

2026-07-14 12:56:53 +03:30
parent 4b8031b9e5
commit 3be247ecff
6 changed files with 49 additions and 4 deletions
@@ -43,8 +43,9 @@ textarea.place-black::placeholder {
  color: black;
 }

-@theme {
-  --color-primary: black;
+@theme inline {
+  --color-primary: #ff730b;
+  --color-secondary: #f1f6fa;
  --color-description: #888888;
  --spacing-maxWidth: 1100px;
 }
@@ -1,5 +1,5 @@
 const Home = () => {
-  return <div>صفحه اصلی</div>;
+  return <div></div>;
 };

 export default Home;
@@ -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 Header from "./shared/Header";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -25,7 +26,10 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <Header />
+        {children}
+      </body>
    </html>
  );
 }
@@ -0,0 +1,29 @@
+import { Profile, Truck } from "iconsax-reactjs";
+
+const Header = () => {
+  return (
+    <div className="px-[120px] h-12 bg-secondary flex items-center justify-between">
+      <div className="flex gap-2 items-center">
+        <span className="text-primary flex items-center gap-2">
+          <Truck size={24} color="currentColor" />
+          <div className="text-[#3A4147] text-sm font-bold">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
+        </span>
+      </div>
+
+      <div className="flex text-sm font-bold gap-2 items-center">
+        <span className="text-primary">20%</span>
+        <span>تخفیف برای اولین سفارش خود دریافت کنید |</span>
+        <span>
+          کد تخفیف : <span className="text-primary">FIRSTORDER</span>
+        </span>
+      </div>
+
+      <div className="flex gap-2 items-center">
+        <Profile size={24} color="currentColor" />
+        <div>سلام حمید</div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
@@ -8,6 +8,7 @@
      "name": "mehraein",
      "version": "0.1.0",
      "dependencies": {
+        "iconsax-reactjs": "^0.0.8",
        "next": "16.2.10",
        "react": "19.2.4",
        "react-dom": "19.2.4"
@@ -4089,6 +4090,15 @@
        "hermes-estree": "0.25.1"
      }
    },
+    "node_modules/iconsax-reactjs": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/iconsax-reactjs/-/iconsax-reactjs-0.0.8.tgz",
+      "integrity": "sha512-cb+uTMxbkSFNbu8ZclX7BWQVfOWQt8+m/PsDjnsm/H+mcYrnfTYMjHxiof1FB43k7UAgt1ds+0oFeMVKdqyslw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "iconsax-reactjs": "^0.0.8",
    "next": "16.2.10",
    "react": "19.2.4",
    "react-dom": "19.2.4"