Feat/maicivil (#26)

* chore: ignore

* feat: mock navbar

* docs: update package.json

* feat: change navbar titile

* feat: init footer

* chore: update package-lock

* feat: called nav bar component

* feat: clean navbar and restructure

* feat: adjust css to navbar and footer

* fix: css in footer to have horizon linear fade

* remove package-lock

* remove: conflict file ( src/app/footer.tsx )

* remove conflict file ( nav-tabs.tsx )

package.json

@@ -2,6 +2,9 @@
   "name": "ce-next-gen-frontend-2024",
   "version": "0.1.0",
   "private": true,
+  "lint-staged": {
+    "*.js": "eslint --fix"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

src/modules/home/_sections/footer.tsx

@@ -2,7 +2,7 @@ import { Icon } from '@iconify/react';
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-200 p-8 text-center">
+    <footer className="bg-linear-black-orange-hori p-8 text-center">
       <h2 className="mb-4 text-lg font-bold">ติดตามข่าวสาร</h2>
       <div className="flex justify-center space-x-8">
         <Icon icon="fa:instagram" className="text-3xl" />

src/shared/components/navbar/navbar.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export function NavBar() {
   return (
-    <nav className="flex items-center justify-between bg-gray-200 p-4">
+    <nav className="bg-black-200 flex items-center justify-between bg-linear-orange-gray p-4">
       <h1>CE Smart Career 2024</h1>
       <ul className="flex space-x-6 font-bold">
         {NAV_LINKS.map((navLink, index) => (

src/shared/style/globals.css

@@ -78,6 +78,11 @@ body {
       rgba(255, 255, 255, 0.2) 10.29%,
       rgba(246, 135, 30, 0.2) 100.35%
     );
+    --linear-black-orange-hori: linear-gradient(
+      180deg,
+      rgba(14, 7, 21, 0.2) 10.29%,
+      rgba(246, 135, 30, 0.2) 100.35%
+    );
 
     --orange-75: #fbcea3;
     --orange-100: #fab97d;

tailwind.config.ts

@@ -81,6 +81,7 @@ const config: Config = {
 			'linear-soft-gray': 'var(--linear-soft-gray)',
 			'linear-orange-gray': 'var(--linear-orange-gray)',
 			'linear-gray-orange': 'var(--linear-gray-orange)',
+			'linear-black-orange-hori': 'var(--linear-black-orange-hori)',
 		  },
 		  keyframes: {
 			'accordion-down': {