enhance headers styles & update colors palette

src/app/components/Header/Header.module.css

@@ -5,37 +5,97 @@
   right: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(116, 0, 184, 0.1);
-  padding: 15px 0;
+  padding: 0;
   transition: all 0.3s ease;
 }
 
 .headerContainer {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 32px;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 40px;
+  height: 80px;
+}
+
+/* Logo Section */
+.logoSection {
+  display: flex;
+  align-items: center;
+}
+
+.logoLink {
+  text-decoration: none;
   display: flex;
-  justify-content: space-between;
   align-items: center;
 }
 
 .logoContainer {
-  /* background: var(--primary) !important; */
   display: flex;
   align-items: center;
+  gap: 12px;
+}
+
+.logoIcon {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(116, 0, 184, 0.3);
+}
+
+.logoDot {
+  width: 6px;
+  height: 6px;
+  background: white;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.logoDot:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.logoDot:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }
 
 .logoText {
-  color: #6e48aa !important;
+  background: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   margin: 0 !important;
-  font-weight: 700 !important;
+  font-weight: 800 !important;
-  font-size: 1.5rem !important;
+  font-size: 1.6rem !important;
+  letter-spacing: -0.5px;
   transition: all 0.3s ease;
 }
 
-.logoHighlight {
+.logoText:hover {
-  margin-left: 8px;
+  transform: scale(1.02);
+}
+
+/* Navigation Section */
+.navSection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .navContainer {
@@ -46,31 +106,229 @@
 .menu {
   border-bottom: none !important;
   background: transparent !important;
-  font-weight: 500;
+  font-weight: 500 !important;
+  font-size: 0.95rem !important;
 }
 
-.menu li {
+.menu :global(.ant-menu-item) {
-  padding: 0 15px !important;
+  padding: 12px 20px !important;
+  margin: 0 4px !important;
+  border-radius: 12px !important;
+  transition: all 0.3s ease !important;
+  color: #666 !important;
+  font-weight: 500 !important;
+  position: relative;
+  overflow: hidden;
 }
 
-.ctaContainer {
+.menu :global(.ant-menu-item::before) {
-  margin-left: 30px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+/* .menu :global(.ant-menu-item:hover) {
+  color: #7400b8 !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 25px rgba(116, 0, 184, 0.15) !important;
+} */
+
+.menu :global(.ant-menu-item:hover::before) {
+  /* opacity: 0.1; */
+}
+
+.menu :global(.ant-menu-item-selected) {
+  color: #7400b8 !important;
+  /* background: rgba(116, 0, 184, 0.1) !important; */
+  font-weight: 600 !important;
+  /* box-shadow: 0 4px 15px rgba(116, 0, 184, 0.2) !important; */
+}
+
+.menu :global(.ant-menu-item::after) {
+  display: none !important;
+}
+
+/* Actions Section */
+.actionsSection {
+  display: flex;
+  align-items: center;
+}
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.actionButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px !important;
+  border: 1px solid rgba(116, 0, 184, 0.1) !important;
+  background: rgba(255, 255, 255, 0.8) !important;
+  color: #666 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+}
+
+.actionButton:hover {
+  background: rgba(116, 0, 184, 0.1) !important;
+  color: #7400b8 !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 20px rgba(116, 0, 184, 0.2) !important;
+  border-color: rgba(116, 0, 184, 0.2) !important;
 }
 
 .ctaButton {
-  /* background: var(--primary) !important; */
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%) !important;
   border: none !important;
-  font-weight: 500 !important;
+  font-weight: 600 !important;
-  padding: 0 25px !important;
+  padding: 0 24px !important;
   height: 40px !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 15px rgba(116, 0, 184, 0.3) !important;
+  transition: all 0.3s ease !important;
+  font-size: 0.9rem !important;
+  color: white !important;
+}
+
+.ctaButton:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 25px rgba(116, 0, 184, 0.4) !important;
+  /* background: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%) !important; */
+}
+
+.ctaButton:active {
+  transform: translateY(0) !important;
+}
+
+.userAvatar {
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 12px !important;
+  background: linear-gradient(135deg, #7400b8 0%, #6930c3 100%) !important;
+  border: 2px solid rgba(255, 255, 255, 0.8) !important;
+  box-shadow: 0 4px 12px rgba(116, 0, 184, 0.3) !important;
+  transition: all 0.3s ease !important;
+  cursor: pointer;
+}
+
+.userAvatar:hover {
+  transform: scale(1.05) !important;
+  box-shadow: 0 8px 20px rgba(116, 0, 184, 0.4) !important;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .headerContainer {
+    padding: 0 24px;
+    gap: 30px;
+  }
+  
+  .menu :global(.ant-menu-item) {
+    padding: 10px 16px !important;
+  }
+  
+  .actionButtons {
+    gap: 8px;
+  }
 }
 
 @media (max-width: 992px) {
-  .navContainer {
+  .headerContainer {
+    grid-template-columns: auto auto;
+    gap: 20px;
+  }
+  
+  .navSection {
     display: none;
   }
   
-  .headerContainer {
+  .actionsSection {
-    justify-content: center;
+    justify-self: end;
+  }
+  
+  .logoText {
+    font-size: 1.4rem !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    padding: 0;
+  }
+  
+  .headerContainer {
+    padding: 0 16px;
+    height: 70px;
+  }
+  
+  .logoText {
+    font-size: 1.3rem !important;
+  }
+  
+  .actionButtons {
+    gap: 6px;
+  }
+  
+  .actionButton {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .ctaButton {
+    padding: 0 20px !important;
+    height: 36px !important;
+    font-size: 0.85rem !important;
+  }
+  
+  .userAvatar {
+    width: 36px !important;
+    height: 36px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .headerContainer {
+    padding: 0 12px;
+  }
+  
+  .logoText {
+    font-size: 1.2rem !important;
+  }
+  
+  .logoIcon {
+    padding: 6px;
+  }
+  
+  .logoDot {
+    width: 5px;
+    height: 5px;
+  }
+  
+  .actionButton {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .ctaButton {
+    padding: 0 16px !important;
+    height: 32px !important;
+    font-size: 0.8rem !important;
+  }
+  
+  .userAvatar {
+    width: 32px !important;
+    height: 32px !important;
   }
 }

src/app/components/Header/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Menu, MenuProps, Typography } from "antd";
+import { BellOutlined, SearchOutlined, UserOutlined } from "@ant-design/icons";
+import { Avatar, Button, Menu, MenuProps, Typography } from "antd";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import styles from "./Header.module.css";
@@ -34,37 +35,74 @@ const Header = () => {
   return (
     <header className={styles.header}>
       <div className={styles.headerContainer}>
+        {/* Logo Section */}
         <motion.div 
-          initial={{ opacity: 0, y: -20 }}
+          initial={{ opacity: 0, x: -20 }}
-          animate={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.6 }}
-          className={styles.logoContainer}
+          className={styles.logoSection}
         >
-          <Link href="/">
+          <Link href="/" className={styles.logoLink}>
+            <div className={styles.logoContainer}>
+              <div className={styles.logoIcon}>
+                <div className={styles.logoDot}></div>
+                <div className={styles.logoDot}></div>
+                <div className={styles.logoDot}></div>
+              </div>
               <Title level={3} className={styles.logoText}>
-              Tech Master
+                TechMaster
               </Title>
+            </div>
           </Link>
         </motion.div>
 
-        <nav className={styles.navContainer}>
+        {/* Navigation Section */}
+        <nav className={styles.navSection}>
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className={styles.navContainer}
+          >
             <Menu 
               mode="horizontal" 
               items={items} 
               className={styles.menu}
+              selectedKeys={['home']}
             />
+          </motion.div>
+        </nav>
 
-          {/* <Space className={styles.ctaContainer}>
+        {/* Actions Section */}
+        <motion.div
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className={styles.actionsSection}
+        >
+          <div className={styles.actionButtons}>
+            <Button 
+              type="text" 
+              icon={<SearchOutlined />} 
+              className={styles.actionButton}
+            />
+            <Button 
+              type="text" 
+              icon={<BellOutlined />} 
+              className={styles.actionButton}
+            />
             <Button 
               type="primary" 
-              shape="round" 
-              size="large"
               className={styles.ctaButton}
             >
               Get Started
             </Button>
-          </Space> */}
+            <Avatar 
-        </nav>
+              icon={<UserOutlined />} 
+              className={styles.userAvatar}
+            />
+          </div>
+        </motion.div>
       </div>
     </header>
   );

src/app/globals.css

@@ -1,35 +1,21 @@
 :root {
-  --background: #ffffff;
+  /* Color Palette */
-  --foreground: #171717;
+  --french-violet: #7400b8;
-  --primary: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
+  --grape: #6930c3;
-  --secondary: linear-gradient(135deg, #00c1d4 0%, #ff5f6d 100%);
+  --slate-blue: #5e60ce;
-  --primary-glow: radial-gradient(
+  --sky-blue: #56cfe1;
-    circle,
+  --aquamarine: #80ffdb;
-    rgba(152, 71, 232, 0.2) 0%,
-    rgba(71, 1, 90, 0.1) 50%,
-    rgba(0, 0, 0, 0) 70%
-  );
-}
 
-@media (prefers-color-scheme: dark) {
+  /* Gradients */
-  :root {
+  --primary-gradient: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
-    --background: #0a0a0a;
+  --secondary-gradient: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%);
-    --foreground: #ededed;
+  --accent-gradient: linear-gradient(135deg, #56cfe1 0%, #80ffdb 100%);
-  }
+  --text-gradient: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
-}
 
-html,
+  /* Shadows */
-body {
+  --primary-shadow: 0 4px 12px rgba(116, 0, 184, 0.15);
-  max-width: 100vw;
+  --primary-shadow-hover: 0 8px 25px rgba(116, 0, 184, 0.25);
-  overflow-x: hidden;
+  --secondary-shadow: 0 2px 8px rgba(94, 96, 206, 0.1);
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
@@ -38,56 +24,343 @@ body {
   margin: 0;
 }
 
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
 a {
   color: inherit;
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
+/* Custom scrollbar */
-  html {
+::-webkit-scrollbar {
-    color-scheme: dark;
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-gradient);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-gradient);
+}
+
+/* Selection styles */
+::selection {
+  background: rgba(116, 0, 184, 0.2);
+  color: #7400b8;
+}
+
+/* Focus styles */
+*:focus {
+  outline: 2px solid #7400b8;
+  outline-offset: 2px;
+}
+
+/* Button hover effects */
+.btn-primary {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: var(--primary-shadow);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--primary-shadow-hover);
+}
+
+/* Text gradients */
+.text-gradient {
+  background: var(--text-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card styles */
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(116, 0, 184, 0.1);
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.6s ease-in-out;
+}
+
+.slide-up {
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }
 
-canvas {
+@keyframes slideUp {
-  display: block;
+  from {
-  vertical-align: bottom;
+    opacity: 0;
-} /* ---- particles.js container ---- */
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Utility classes */
+.gradient-bg {
+  background: var(--primary-gradient);
+}
+
+.gradient-text {
+  background: var(--text-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.shadow-primary {
+  box-shadow: var(--primary-shadow);
+}
+
+.shadow-primary-hover:hover {
+  box-shadow: var(--primary-shadow-hover);
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Color Palette */
+  --french-violet: #7400b8;
+  --grape: #6930c3;
+  --slate-blue: #5e60ce;
+  --sky-blue: #56cfe1;
+  --aquamarine: #80ffdb;
+
+  /* Gradients */
+  --primary-gradient: linear-gradient(135deg, #7400b8 0%, #6930c3 100%);
+  --secondary-gradient: linear-gradient(135deg, #6930c3 0%, #5e60ce 100%);
+  --accent-gradient: linear-gradient(135deg, #56cfe1 0%, #80ffdb 100%);
+  --text-gradient: linear-gradient(135deg, #7400b8 0%, #5e60ce 100%);
+
+  /* Shadows */
+  --primary-shadow: 0 4px 12px rgba(116, 0, 184, 0.15);
+  --primary-shadow-hover: 0 8px 25px rgba(116, 0, 184, 0.25);
+  --secondary-shadow: 0 2px 8px rgba(94, 96, 206, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-gradient);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-gradient);
+}
+
+/* Particles.js Styles */
 #particles-js {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  background-color: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
+  z-index: 1;
+  background: transparent;
 }
 
 .count-particles {
-  background: #000022;
   position: absolute;
-  top: 48px;
+  top: 0;
   left: 0;
-  width: 80px;
+  width: 100%;
-  color: #13e8e9;
+  height: 100%;
-  font-size: 0.8em;
-  text-align: left;
-  text-indent: 4px;
-  line-height: 14px;
-  padding-bottom: 2px;
-  font-family: Helvetica, Arial, sans-serif;
-  font-weight: bold;
-}
-.js-count-particles {
-  font-size: 1.1em;
-}
-#stats,
-.count-particles {
-  -webkit-user-select: none;
-  margin-top: 5px;
-  margin-left: 5px;
-}
-#stats {
-  border-radius: 3px 3px 0 0;
   overflow: hidden;
+  z-index: 0;
+  opacity: 0;
+  pointer-events: none;
 }
-.count-particles {
+
-  border-radius: 0 0 3px 3px;
+/* Selection styles */
+::selection {
+  background: rgba(116, 0, 184, 0.2);
+  color: #7400b8;
+}
+
+/* Focus styles */
+*:focus {
+  outline: 2px solid #7400b8;
+  outline-offset: 2px;
+}
+
+/* Button hover effects */
+.btn-primary {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: var(--primary-shadow);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--primary-shadow-hover);
+}
+
+/* Text gradients */
+.text-gradient {
+  background: var(--text-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card styles */
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(116, 0, 184, 0.1);
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.6s ease-in-out;
+}
+
+.slide-up {
+  animation: slideUp 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Utility classes */
+.gradient-bg {
+  background: var(--primary-gradient);
+}
+
+.gradient-text {
+  background: var(--text-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.shadow-primary {
+  box-shadow: var(--primary-shadow);
+}
+
+.shadow-primary-hover:hover {
+  box-shadow: var(--primary-shadow-hover);
 }