update styles

src/app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "@/static/globals.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/components/hero/hero.tsx

@@ -5,8 +5,13 @@ const Hero = () => {
     <section className={styles.hero}>
       <div className="cont-header">
         <div className={styles.left}>
-          <h1>left</h1>
+          <div className={styles.info}>
+            <p className={styles.title}>веб-разработчик</p>
+            <h1 className={styles.username}>egorov nikita</h1>
+            <p className={styles.description}>Создаю современные веб-интерфейсы с фокусом на дизайн, производительность и удобство пользователя. Люблю превращать идеи в полноценные цифровые продукты.</p>
           </div>
+        </div>
+
         <div className={styles.right}>
           <h1>right</h1>
         </div>

src/static/globals.css

@@ -1,3 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 @font-face {
   font-family: "Montserrat";
   src: url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
@@ -15,14 +21,37 @@
 }
 
 :root {
+  /* Font */
   --font-main: "Montserrat", sans-serif;
+
+  /* Colors */
+  --color-bg: #000;
+  --color-text: #fff;
+  --color-text-secondary: #999;
+  --color-text-muted: #666;
+  --color-border: #222;
+
+  /* Font sizes */
+  --fz-normal: 16px;
+  --fz-small: clamp(12px, 0.8vw, 14px);
+  --fz-description: clamp(16px, 1.25vw, 22px);
+  --fz-big: clamp(48px, 6vw, 96px);
+
+  /* Layout */
+  --container-padding: clamp(20px, 3vw, 40px);
+  --content-max-width: 720px;
+
+  /* Other */
+  --transition: 0.3s ease;
 }
 
 html,
 body {
   font-family: var(--font-main);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: var(--fz-normal);
 }
-
 h1, a {
   color: #fff;
 }
@@ -30,7 +59,8 @@ h1, a {
 .cont-header {
     width: 100%;
     margin: 0 auto;
-  padding: 0 var(--container-padding, 40px);
+    padding: 0 var(--container-padding);
+
     display: flex;
     justify-content: space-between;
     align-items: center;

src/static/header/header.module.css

@@ -1,256 +1,56 @@
-.header {
+.hero {
-  top: 0;
+    min-height: calc(100vh - 90px);
-  left: 0;
-  width: 100%;
-  height: 90px;
-  display: flex;
-  align-items: center;
-  z-index: 9999;
-  background: var(--background);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-bottom: 1px solid var(--border);
 }
 
-/* LEFT */
+.hero :global(.cont-header) {
-
+    min-height: calc(100vh - 90px);
-.left a {
+    padding: 0;
-  text-decoration: none;
+    align-items: stretch;
 }
 
-.left h1 {
+.left,
-  color: var(--text-primary);
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0;
-}
-
-/* RIGHT */
-
 .right {
+    width: 49%;
+    padding: var(--container-padding);
+}
+
+.left {
     display: flex;
     align-items: center;
-  gap: 20px;
 }
 
-/* Десктопное меню */
+.info {
-
-.desktop-nav ul {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: clamp(20px, 2.5vw, 40px);
-  margin: 0;
-  padding: 0;
-}
-
-.desktop-nav li {
-  list-style: none;
-}
-
-.desktop-nav li a {
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 18px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-  color: var(--text-primary);
-}
-
-.desktop-nav li a:hover {
-  transform: translateY(-2px);
-}
-
-/* Переключатель языка */
-
-.language-toggle {
-  color: var(--text-primary);
-  text-decoration: none;
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.language-toggle:hover {
-  transform: translateY(-2px);
-}
-
-/* Theme Toggle */
-
-.theme-toggle {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.theme-toggle:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.theme-icon {
-  font-size: 20px;
-  transition: transform 0.4s ease;
-}
-
-.theme-toggle:hover .theme-icon {
-  transform: rotate(30deg);
-}
-
-/* Гамбургер */
-
-.hamburger {
-  display: none;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 28px;
-  height: 22px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
-.hamburger span {
-  height: 2.5px;
     width: 100%;
-  background: var(--text-primary);
-  transition: all 0.35s ease;
-  border-radius: 2px;
 }
 
-.hamburger.active span:nth-child(1) {
+.info .title {
-  transform: rotate(45deg) translate(5px, 5px);
+    margin-bottom: 16px;
-}
 
-.hamburger.active span:nth-child(2) {
-  opacity: 0;
-}
-
-.hamburger.active span:nth-child(3) {
-  transform: rotate(-45deg) translate(6px, -6px);
-}
-
-/* Мобильное меню */
-
-.mobile-menu {
-  position: fixed;
-  top: 90px;
-  right: -100%;
-  width: 280px;
-  height: calc(100vh - 90px);
-  background: var(--background);
-  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25);
-  transition: right 0.45s cubic-bezier(0.32, 0.72, 0, 1);
-  z-index: 9998;
-  padding: 50px 30px;
-}
-
-.mobile-menu.active {
-  right: 0;
-}
-
-.mobile-menu ul {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
-  align-items: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-.mobile-menu li {
-  list-style: none;
-  line-height: 3;
-}
-
-.mobile-menu li a {
-  color: var(--text-primary);
-  text-decoration: none;
-  font-size: 1.45rem;
-  font-weight: 500;
-}
-
-/* ==================== RESPONSIVE ==================== */
-
-@media (max-width: 1024px) {
-  .left h1 {
-    font-size: 22px;
-  }
-
-  .desktop-nav ul {
-    gap: 14px;
-  }
-
-  .desktop-nav li a {
-    padding: 6px 10px;
-    font-size: 14px;
-  }
-}
-
-@media (max-width: 768px) {
-  .hamburger {
-    display: flex;
-  }
-
-  .desktop-nav {
-    display: none;
-  }
-
-  .cont-header {
-    padding: 0 20px;
-  }
-
-  .right {
-    gap: 12px;
-  }
-
-  .left h1 {
-    font-size: 20px;
-  }
-
-  .mobile-menu {
-    width: 100%;
-    right: -100%;
-    padding: 40px 24px;
-  }
-
-  .mobile-menu li a {
-    font-size: 1.25rem;
-  }
-
-  .mobile-menu ul {
-    gap: 20px;
-  }
-}
-
-@media (max-width: 480px) {
-  .header {
-    height: 70px;
-  }
-
-  .mobile-menu {
-    top: 70px;
-    height: calc(100vh - 70px);
-    padding: 30px 20px;
-  }
-
-  .theme-toggle {
-    width: 36px;
-    height: 36px;
-  }
-
-  .theme-icon {
     font-size: 16px;
-  }
+    font-weight: 400;
+    color: #888;
+
+    letter-spacing: 4px;
+    text-transform: uppercase;
+}
+
+.info .username {
+    font-size: var(--fz-big);
+    line-height: 2;
+    color: #1a1a1a;
+
+    text-transform: uppercase;
+}
+
+.info .description {
+    max-width: 720px;
+
+    margin-top: 24px;
+
+    font-size: clamp(16px, 1.25vw, 22px);
+    font-weight: 400;
+    line-height: 1.55;
+    letter-spacing: -0.01em;
+
+    color: #999;
 }

src/static/hero/hero.module.css

@@ -1,11 +1,57 @@
 .hero {
-    background-color: aquamarine;
+    min-height: calc(100vh - 90px);
-    height: calc(100vh - 90px);
+}
+
+.hero :global(.cont-header) {
+    min-height: calc(100vh - 90px);
+    padding: 0;
+    align-items: stretch;
 }
 
 .left,
 .right {
+    padding: var(--container-padding);
     width: 49%;
-    height: 90vh;
+}
-    background-color: red;
+
+.left {
+    display: flex;
+    align-items: center;
+
+}
+
+.info {
+    width: 100%;
+}
+
+.info .title {
+    margin-bottom: 16px;
+
+    font-size: var(--fz-small);
+    font-weight: 400;
+    color: var(--color-text-muted);
+
+    letter-spacing: 4px;
+    text-transform: uppercase;
+}
+
+.info .username {
+    font-size: var(--fz-big);
+    line-height: 2;
+    color: #1a1a1a;
+
+    text-transform: uppercase;
+}
+
+.info .description {
+    max-width: var(--content-max-width);
+
+    margin-top: 24px;
+
+    font-size: var(--fz-description);
+    font-weight: 400;
+    line-height: 1.55;
+    letter-spacing: -0.01em;
+
+    color: var(--color-text-secondary);
 }

src/widgets/header/ui/Header.tsx

@@ -25,25 +25,6 @@ const Header = () => {
             </ul>
           </nav>
 
-          {/* Переключатель языка */}
-          <a
-            href="/en/"
-            className={styles["language-toggle"]}
-            aria-label="Переключить язык"
-          >
-            EN
-          </a>
-
-          {/* Переключатель темы */}
-          <button
-            className={styles["theme-toggle"]}
-            id="theme-toggle"
-            type="button"
-            aria-label="Переключить тему"
-          >
-            <span className={styles["theme-icon"]}>☾</span>
-          </button>
-
           {/* Гамбургер */}
           <button
             className={styles.hamburger}