hesennov · hesennov · Jun 15, 2023 · Jun 16, 2023 · Jun 16, 2023 · Jun 16, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,15 +1,17 @@
 module.exports = {
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true, amd: true, node: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/jsx-uses-react",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
   },
-}
+};
diff --git a/index.html b/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,9 +6,11 @@ import AboutUs from "./pages/AboutUs";
 import Portofilo from "./pages/Portofilo";
 import TestimonIals from "./pages/TestimonIals";
 import Blog from "./pages/Blog";
+
 const App = () => {
   return (
     <>
+      <Navigation />
       <Layout title={"Home"}>
         <section>
           <Header />

diff --git a/src/assets/logo-grey.png b/src/assets/logo-grey.png
diff --git a/src/assets/logo-white.png b/src/assets/logo-white.png
diff --git a/src/constant/colors.jsx b/src/constant/colors.jsx
diff --git a/src/constant/navigation.jsx b/src/constant/navigation.jsx
diff --git a/src/constants/colors.jsx b/src/constants/colors.jsx
@@ -0,0 +1,4 @@
+export const primaryColor = "#A97CA4";
+export const backgroundColor = "#FFFFFF";
+export const headerColor = "#4E4E50";
+export const textColor = "#1E1C31";
diff --git a/src/constants/navigation.jsx b/src/constants/navigation.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { textColor } from "./colors";
+import logo from "../assets/logo-grey.png";
+
+const Navigation = () => {
+  return (
+    <nav
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "1rem",
+      }}
+    >
+      <div>
+        <img src={logo} alt="Logo" style={{ height: "95px" }} />
+      </div>
+      <ul style={{ display: "flex", listStyle: "none" }}>
+        <li style={{ marginLeft: "4rem" }}>
+          <Link to="/" style={{ color: textColor }}>
+            Home
+          </Link>
+        </li>
+        <li style={{ marginLeft: "4rem" }}>
+          <Link to="/about" style={{ color: textColor }}>
+            About Us
+          </Link>
+        </li>
+        <li style={{ marginLeft: "4rem" }}>
+          <Link to="/portfolio" style={{ color: textColor }}>
+            Portfolio
+          </Link>
+        </li>
+        <li style={{ marginLeft: "4rem" }}>
+          <Link to="/news" style={{ color: textColor }}>
+            News
+          </Link>
+        </li>
+        <li style={{ marginLeft: "4rem" }}>
+          <Link to="/contact" style={{ color: textColor }}>
+            Contact
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navigation;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap");
+
+:root {
+  --app-font: "Poppins", sans-serif;
+  --app-font-weight: 400;
+}
diff --git a/src/pages/Portfolio.jsx b/src/pages/Portfolio.jsx
@@ -0,0 +1,4 @@
+const Portofilo = () => {
+  return <div>Portofilo</div>;
+};
+export default Portofilo;
diff --git a/yarn.lock b/yarn.lock