From e32ddaa2dbc155510058d3823ce12fb8799dca8c Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Mon, 28 Jul 2025 11:32:05 +0300 Subject: [PATCH] enhance headers styles & update colors palette --- src/app/components/Header/Header.module.css | 306 +++++++++++++-- src/app/components/Header/Header.tsx | 80 ++-- src/app/globals.css | 397 +++++++++++++++++--- 3 files changed, 676 insertions(+), 107 deletions(-) diff --git a/src/app/components/Header/Header.module.css b/src/app/components/Header/Header.module.css index 1540633..c04e4e7 100644 --- a/src/app/components/Header/Header.module.css +++ b/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); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); - padding: 15px 0; + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(116, 0, 184, 0.1); + 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-size: 1.5rem !important; + font-weight: 800 !important; + font-size: 1.6rem !important; + letter-spacing: -0.5px; transition: all 0.3s ease; } -.logoHighlight { - margin-left: 8px; +.logoText:hover { + 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 { - padding: 0 15px !important; +.menu :global(.ant-menu-item) { + 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 { - margin-left: 30px; +.menu :global(.ant-menu-item::before) { + 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; - padding: 0 25px !important; + font-weight: 600 !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 { - justify-content: center; + + .actionsSection { + 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; } } diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx index e9bbe75..bcc4994 100644 --- a/src/app/components/Header/Header.tsx +++ b/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 (
+ {/* Logo Section */} - - - Tech Master - + +
+
+
+
+
+
+ + TechMaster + +
- + } + className={styles.userAvatar} + /> +
+
); diff --git a/src/app/globals.css b/src/app/globals.css index 4f74b0a..eb267b6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,35 +1,21 @@ :root { - --background: #ffffff; - --foreground: #171717; - --primary: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); - --secondary: linear-gradient(135deg, #00c1d4 0%, #ff5f6d 100%); - --primary-glow: radial-gradient( - circle, - rgba(152, 71, 232, 0.2) 0%, - rgba(71, 1, 90, 0.1) 50%, - rgba(0, 0, 0, 0) 70% - ); -} + /* Color Palette */ + --french-violet: #7400b8; + --grape: #6930c3; + --slate-blue: #5e60ce; + --sky-blue: #56cfe1; + --aquamarine: #80ffdb; -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} + /* 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%); -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + /* 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); } * { @@ -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) { - html { - color-scheme: dark; +/* 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); +} + +/* 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 { - display: block; - vertical-align: bottom; -} /* ---- particles.js container ---- */ +@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); +} + +@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; - color: #13e8e9; - 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; + width: 100%; + height: 100%; 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); }