add tainwin 2 css

README.md

@@ -488,6 +488,13 @@ https://cdn1.ozone.ru/s3/multimedia-1-p/7663352533.jpg";;;ЭкоКрас;4673764
 - Централизованная дизайн-система в `theme.config.coffee`
 - ВАЖНО всегда приводи полные листинги файлов
 - ВАЖНО делай верстку всех страниц адаптивной, корректно отображающейся на основных видах устройств
+- Соблюдайте синтаксис файлов: Код на Pug должен находиться только в .pug файлах, код на CoffeeScript - только в .coffee файлах.
+- Используйте правильные форматы для иконок: Для Vue-компонентов в CoffeeScript определяйте иконки как объекты с свойством template, содержащим валидный HTML.
+- Унифицируйте отступы: Настройте редактор кода на использование пробелов вместо табов для избежания проблем с индентированием.
+- ВАЖНО в место console.log используй debug.log
+- ВАЖНО использовать @import '../../index.styl' не нужно, приложение одностраничное.
+
+
 
 ### 2. **Работа с данными**
 - Селективная синхронизация: общие данные → локальная БД, пользовательские данные → удаленная БД
@@ -511,7 +518,6 @@ https://cdn1.ozone.ru/s3/multimedia-1-p/7663352533.jpg";;;ЭкоКрас;4673764
 -  app/index.coffee
 -  app/index.pug
 -  app/index.styl
--  app/theme.config.coffee
 -  app/utils/pouch.db
 -  app/desing/admin.coffee
 -  app/desing/site.coffee
@@ -530,7 +536,9 @@ https://cdn1.ozone.ru/s3/multimedia-1-p/7663352533.jpg";;;ЭкоКрас;4673764
   Анализировать реализованный код, по git репозитарию https://gogs.osvoj.ru/oleg/s5l.ru-crm.git
   Проверяй промт и изменения в нём по адресу https://gogs.osvoj.ru/oleg/s5l.ru-crm/raw/master/README.md
  
-  Доработай дизайн панели администратора, в адаптивном стиле, исправь все ошибки верстки, также убери грабиент с названия компании, добавь туда изображение логотипа с сайта impasto-color.ru 
+  Убери из -  app/pages/Admin дубль header, в app/pages/Admin/Settings добавь добавление фото лого и других необходимых изображений.
+  А также названия компании и другой выводимой информации, переделай app/index.* исходя из этих изменений. 
+  путь в изображениям согласно основному промту
 
 -  app/pages/Admin/index.coffee
 -  app/pages/Admin/index.pug

app/index.pug

@@ -2,7 +2,9 @@ div(id="app")
   header(class="header")
     nav(class="header__nav")
       div(class="header__nav-block")
-        div(class="header__nav-name") {{ companyName }}
+        div(class="header__brand")
+          img(src="/images/logo.png" alt="Браер-Колор" class="header__logo")
+          span(class="header__company-name") Браер-Колор
         div(class="header__nav-menu")
           div(class="header__menu-item")
             router-link(to="/catalog" class="header__menu-link") Каталог
@@ -25,7 +27,9 @@ div(id="app")
     div(class="footer__content")
       div(class="footer__sections")
         div(class="footer__section")
-          h3(class="footer__section-title") {{ companyName }}
+          div(class="footer__brand")
+            img(src="/images/logo.png" alt="Браер-Колор" class="footer__logo")
+            h3(class="footer__section-title") Браер-Колор
           p(class="footer__section-text") Интернет-магазин лакокрасочной продукции
         div(class="footer__section")
           h3(class="footer__section-title") Контакты

app/index.styl

@@ -1,4 +1,7 @@
+// =============================================
 // Переменные цветов
+// =============================================
+
 $primary-50 = #fef2f2
 $primary-100 = #fee2e2
 $primary-200 = #fecaca
@@ -35,73 +38,10 @@ $gray-900 = #111827
 $white = #ffffff
 $black = #000000
 
-// Типографика
-$font-family-sans = 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
-$font-family-serif = 'Georgia', 'Times New Roman', serif
-$font-family-mono = 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace
-
-$font-size-xs = 0.75rem    // 12px
-$font-size-sm = 0.875rem   // 14px
-$font-size-base = 1rem     // 16px
-$font-size-lg = 1.125rem   // 18px
-$font-size-xl = 1.25rem    // 20px
-$font-size-2xl = 1.5rem    // 24px
-$font-size-3xl = 1.875rem  // 30px
-$font-size-4xl = 2.25rem   // 36px
-$font-size-5xl = 3rem      // 48px
-
-$font-weight-light = 300
-$font-weight-normal = 400
-$font-weight-medium = 500
-$font-weight-semibold = 600
-$font-weight-bold = 700
-$font-weight-extrabold = 800
-
-$line-height-tight = 1.25
-$line-height-normal = 1.5
-$line-height-relaxed = 1.75
-
-$letter-spacing-tight = -0.025em
-$letter-spacing-normal = 0
-$letter-spacing-wide = 0.025em
-
-// Макеты и отступы
-$spacing-1 = 0.25rem   // 4px
-$spacing-2 = 0.5rem    // 8px
-$spacing-3 = 0.75rem   // 12px
-$spacing-4 = 1rem      // 16px
-$spacing-5 = 1.25rem   // 20px
-$spacing-6 = 1.5rem    // 24px
-$spacing-8 = 2rem      // 32px
-$spacing-10 = 2.5rem   // 40px
-$spacing-12 = 3rem     // 48px
-$spacing-16 = 4rem     // 64px
-$spacing-20 = 5rem     // 80px
-
-// Брейкпоинты
-$breakpoint-sm = 640px
-$breakpoint-md = 768px
-$breakpoint-lg = 1024px
-$breakpoint-xl = 1280px
-$breakpoint-2xl = 1536px
-
-// Тени
-$shadow-sm = 0 1px 2px 0 rgba(0, 0, 0, 0.05)
-$shadow-base = 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
-$shadow-md = 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
-$shadow-lg = 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
-$shadow-xl = 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
-
-// Скругления
-$radius-sm = 0.125rem
-$radius-base = 0.25rem
-$radius-md = 0.375rem
-$radius-lg = 0.5rem
-$radius-xl = 0.75rem
-$radius-2xl = 1rem
-$radius-full = 9999px
-
+// =============================================
 // Миксины
+// =============================================
+
 flex-center()
   display: flex
   align-items: center
@@ -112,217 +52,94 @@ flex-between()
   align-items: center
   justify-content: space-between
 
-flex-col()
-  display: flex
-  flex-direction: column
-
-container()
-  max-width: 1200px
-  margin: 0 auto
-  padding: 0 $spacing-4
-
 transition-all($duration = 0.3s)
   transition: all $duration ease-in-out
 
-text-ellipsis()
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-
-// Базовые сбросы
-*
-  margin: 0
-  padding: 0
-  box-sizing: border-box
-
-html
-  font-size: 16px
-  line-height: $line-height-normal
-  -webkit-text-size-adjust: 100%
-  scroll-behavior: smooth
-
-body
-  font-family: $font-family-sans
-  font-size: $font-size-base
-  font-weight: $font-weight-normal
-  line-height: $line-height-normal
-  color: $gray-900
-  background-color: $white
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
-
-  .dark &
-    color: $white
-    background-color: $gray-900
-
-// Типографические классы
-.text-xs
-  font-size: $font-size-xs
-  line-height: $line-height-tight
-
-.text-sm
-  font-size: $font-size-sm
-  line-height: $line-height-tight
-
-.text-base
-  font-size: $font-size-base
-  line-height: $line-height-normal
-
-.text-lg
-  font-size: $font-size-lg
-  line-height: $line-height-normal
-
-.text-xl
-  font-size: $font-size-xl
-  line-height: $line-height-normal
-
-.text-2xl
-  font-size: $font-size-2xl
-  line-height: $line-height-tight
-
-.text-3xl
-  font-size: $font-size-3xl
-  line-height: $line-height-tight
-
-.text-4xl
-  font-size: $font-size-4xl
-  line-height: $line-height-tight
-
-.text-5xl
-  font-size: $font-size-5xl
-  line-height: 1
-
-.font-light
-  font-weight: $font-weight-light
-
-.font-normal
-  font-weight: $font-weight-normal
-
-.font-medium
-  font-weight: $font-weight-medium
-
-.font-semibold
-  font-weight: $font-weight-semibold
-
-.font-bold
-  font-weight: $font-weight-bold
-
-.font-extrabold
-  font-weight: $font-weight-extrabold
-
-.leading-tight
-  line-height: $line-height-tight
-
-.leading-normal
-  line-height: $line-height-normal
-
-.leading-relaxed
-  line-height: $line-height-relaxed
-
-.tracking-tight
-  letter-spacing: $letter-spacing-tight
-
-.tracking-normal
-  letter-spacing: $letter-spacing-normal
-
-.tracking-wide
-  letter-spacing: $letter-spacing-wide
-
-.text-center
-  text-align: center
-
-.text-left
-  text-align: left
-
-.text-right
-  text-align: right
-
+// =============================================
 // Базовые стили приложения
+// =============================================
+
 #app
   min-height: 100vh
   background-color: $white
-  display: flex
-  flex-direction: column
-
-  .dark &
+  &.dark
     background-color: $gray-900
+  transition: background-color 0.3s ease-in-out
+
+// =============================================
+// Стили header
+// =============================================
 
-// Header
 .header
   background-color: $white
-  box-shadow: $shadow-sm
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
   position: sticky
   top: 0
-  z-index: 100
-  border-bottom: 1px solid $gray-200
+  z-index: 50
 
   .dark &
     background-color: $gray-800
-    border-bottom-color: $gray-700
 
 .header__nav
-  container()
-  padding-top: $spacing-3
-  padding-bottom: $spacing-3
+  max-width: 1200px
+  margin: 0 auto
+  padding: 0.75rem 1rem
 
 .header__nav-block
   flex-between()
-  gap: $spacing-4
 
-.header__nav-name
-  font-size: $font-size-2xl
-  font-weight: $font-weight-bold
-  background: linear-gradient(135deg, $primary-500, $accent-500)
-  -webkit-background-clip: text
-  -webkit-text-fill-color: transparent
-  background-clip: text
-  letter-spacing: $letter-spacing-tight
+.header__brand
+  display: flex
+  align-items: center
+  gap: 0.75rem
+
+.header__logo
+  width: 2rem
+  height: 2rem
+  object-fit: contain
+
+.header__company-name
+  font-size: 1.25rem
+  font-weight: bold
+  color: $gray-900
+
+  .dark &
+    color: $white
 
 .header__nav-menu
   display: flex
   align-items: center
-  gap: $spacing-4
+  gap: 1rem
 
 .header__menu-item
   display: flex
   align-items: center
 
 .header__menu-link
-  font-size: $font-size-sm
-  font-weight: $font-weight-medium
   color: $gray-600
+  transition: color 0.2s ease-in-out
   text-decoration: none
-  padding: $spacing-2 $spacing-3
-  border-radius: $radius-md
-  transition: all 0.2s ease-in-out
-  position: relative
 
   &:hover
-    color: $primary-600
-    background-color: $primary-50
+    color: $primary-500
 
   .dark &
     color: $gray-300
 
     &:hover
-      color: $primary-400
-      background-color: $primary-900
+      color: $primary-500
 
 .header__theme-toggle
-  padding: $spacing-2
-  border-radius: $radius-md
+  padding: 0.5rem
+  border-radius: 0.5rem
   background-color: $gray-100
   color: $gray-600
   transition: all 0.2s ease-in-out
   border: none
   cursor: pointer
-  flex-center()
-  width: 2.5rem
-  height: 2.5rem
 
   &:hover
     background-color: $gray-200
-    transform: scale(1.05)
 
   .dark &
     background-color: $gray-700
@@ -331,231 +148,157 @@ body
     &:hover
       background-color: $gray-600
 
-// Main content
+// =============================================
+// Стили main content
+// =============================================
+
 .main
   flex: 1
-  display: flex
-  flex-direction: column
 
-// Page transitions
-.page-slide
-  &-enter-active,
-  &-leave-active
-    transition: all 0.3s ease-in-out
+// =============================================
+// Анимации переходов между страницами
+// =============================================
+
+.page-slide-enter-active,
+.page-slide-leave-active
+  transition: all 0.3s ease-in-out
+
+.page-slide-enter-from
+  opacity: 0
+  transform: translateX(1rem)
 
-  &-enter-from
-    opacity: 0
-    transform: translateX($spacing-4)
+.page-slide-leave-to
+  opacity: 0
+  transform: translateX(-1rem)
 
-  &-leave-to
-    opacity: 0
-    transform: translateX(-$spacing-4)
+// =============================================
+// Стили footer
+// =============================================
 
-// Footer
 .footer
-  background: linear-gradient(135deg, $gray-800, $gray-900)
+  background-color: $gray-800
   color: $white
-  padding: $spacing-12 0 $spacing-8
-  margin-top: auto
+  padding: 2rem 0
 
   .dark &
-    background: linear-gradient(135deg, $gray-900, $black)
+    background-color: $gray-900
 
 .footer__content
-  container()
+  max-width: 1200px
+  margin: 0 auto
+  padding: 0 1rem
 
 .footer__sections
   display: grid
   grid-template-columns: 1fr
-  gap: $spacing-8
-  margin-bottom: $spacing-8
+  gap: 2rem
 
-  @media (min-width: $breakpoint-md)
+  @media (min-width: 768px)
     grid-template-columns: repeat(3, 1fr)
 
 .footer__section
-  flex-col()
-  gap: $spacing-4
+  display: flex
+  flex-direction: column
+
+.footer__brand
+  display: flex
+  align-items: center
+  gap: 0.5rem
+  margin-bottom: 0.5rem
+
+.footer__logo
+  width: 1.5rem
+  height: 1.5rem
+  object-fit: contain
 
 .footer__section-title
-  font-size: $font-size-lg
-  font-weight: $font-weight-semibold
-  color: $white
-  margin-bottom: $spacing-2
+  font-size: 1.125rem
+  font-weight: bold
+  margin-bottom: 1rem
 
 .footer__section-text
-  font-size: $font-size-sm
   color: $gray-400
-  line-height: $line-height-relaxed
+  margin-bottom: 0.5rem
 
 .footer__links
-  flex-col()
-  gap: $spacing-2
+  display: flex
+  flex-direction: column
+  gap: 0.5rem
 
 .footer__link
-  font-size: $font-size-sm
   color: $gray-400
   text-decoration: none
   transition: color 0.2s ease-in-out
-  padding: $spacing-1 0
 
   &:hover
     color: $white
-    transform: translateX($spacing-1)
-
-.footer__bottom
-  border-top: 1px solid $gray-700
-  padding-top: $spacing-6
-  text-align: center
-
-  .footer__copyright
-    font-size: $font-size-sm
-    color: $gray-500
 
+// =============================================
 // Утилитарные классы
-.btn
-  display: inline-flex
-  align-items: center
-  justify-content: center
-  padding: $spacing-2 $spacing-4
-  border-radius: $radius-lg
-  font-size: $font-size-sm
-  font-weight: $font-weight-medium
-  text-decoration: none
-  border: none
-  cursor: pointer
-  transition: all 0.2s ease-in-out
-  gap: $spacing-2
-  position: relative
-  overflow: hidden
-
-  &:focus
-    outline: none
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2)
-
-  &::before
-    content: ''
-    position: absolute
-    top: 0
-    left: -100%
-    width: 100%
-    height: 100%
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)
-    transition: left 0.5s
-
-  &:hover::before
-    left: 100%
+// =============================================
 
 .btn-primary
-  background: linear-gradient(135deg, $primary-500, $primary-600)
+  background-color: $primary-500
   color: $white
-  box-shadow: $shadow-md
+  padding: 0.5rem 1rem
+  border-radius: 0.5rem
+  font-weight: 500
+  transition: background-color 0.2s ease-in-out
+  border: none
+  cursor: pointer
+  text-decoration: none
+  display: inline-block
+  text-align: center
 
   &:hover
-    transform: translateY(-1px)
-    box-shadow: $shadow-lg
+    background-color: $primary-600
 
 .btn-secondary
-  background-color: $gray-100
+  background-color: $gray-200
   color: $gray-700
-  border: 1px solid $gray-300
+  padding: 0.5rem 1rem
+  border-radius: 0.5rem
+  font-weight: 500
+  transition: background-color 0.2s ease-in-out
+  border: none
+  cursor: pointer
+  text-decoration: none
+  display: inline-block
+  text-align: center
 
   &:hover
-    background-color: $gray-200
-    transform: translateY(-1px)
+    background-color: $gray-300
 
   .dark &
     background-color: $gray-700
     color: $gray-300
-    border-color: $gray-600
 
     &:hover
       background-color: $gray-600
 
-.btn-outline
-  background-color: transparent
-  color: $primary-600
-  border: 2px solid $primary-500
-
-  &:hover
-    background-color: $primary-500
-    color: $white
-    transform: translateY(-1px)
-
 .card
   background-color: $white
-  border-radius: $radius-xl
-  box-shadow: $shadow-base
-  border: 1px solid $gray-200
-  overflow: hidden
-  transition: all 0.3s ease-in-out
+  border-radius: 0.5rem
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
+  padding: 1.5rem
 
   .dark &
     background-color: $gray-800
-    border-color: $gray-700
-
-  &:hover
-    transform: translateY(-2px)
-    box-shadow: $shadow-lg
-
-.card__header
-  padding: $spacing-6
-  border-bottom: 1px solid $gray-200
-
-  .dark &
-    border-bottom-color: $gray-700
-
-.card__title
-  font-size: $font-size-xl
-  font-weight: $font-weight-semibold
-  color: $gray-900
-  margin-bottom: $spacing-2
-
-  .dark &
-    color: $white
-
-.card__content
-  padding: $spacing-6
-
-.card__footer
-  padding: $spacing-6
-  border-top: 1px solid $gray-200
-  background-color: $gray-50
-
-  .dark &
-    border-top-color: $gray-700
-    background-color: $gray-700
-
-.form-group
-  flex-col()
-  gap: $spacing-2
-  margin-bottom: $spacing-4
-
-.form-label
-  font-size: $font-size-sm
-  font-weight: $font-weight-medium
-  color: $gray-700
-  display: block
-
-  .dark &
-    color: $gray-300
 
 .form-input
   width: 100%
-  padding: $spacing-3
-  border: 2px solid $gray-300
-  border-radius: $radius-lg
+  padding: 0.5rem 0.75rem
+  border: 1px solid $gray-300
+  border-radius: 0.5rem
   background-color: $white
   color: $gray-900
-  font-size: $font-size-base
-  font-family: $font-family-sans
+  outline: none
   transition: all 0.2s ease-in-out
 
   &:focus
     outline: none
     border-color: $primary-500
-    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1)
-    transform: translateY(-1px)
+    box-shadow: 0 0 0 2px rgba($primary-500, 0.2)
 
   .dark &
     background-color: $gray-700
@@ -565,116 +308,53 @@ body
     &:focus
       border-color: $primary-500
 
-.form-textarea
-  @extend .form-input
-  resize: vertical
-  min-height: 6rem
-  line-height: $line-height-relaxed
-
-.form-select
-  @extend .form-input
-
-// Сетка
-.grid
-  display: grid
-  gap: $spacing-6
-
-.grid-cols-1
-  grid-template-columns: 1fr
-
-.grid-cols-2
-  grid-template-columns: repeat(2, 1fr)
-
-.grid-cols-3
-  grid-template-columns: repeat(3, 1fr)
-
-.grid-cols-4
-  grid-template-columns: repeat(4, 1fr)
+.form-label
+  display: block
+  font-size: 0.875rem
+  font-weight: 500
+  color: $gray-700
+  margin-bottom: 0.5rem
 
-@media (min-width: $breakpoint-sm)
-  .sm\:grid-cols-2
-    grid-template-columns: repeat(2, 1fr)
+  .dark &
+    color: $gray-300
 
-@media (min-width: $breakpoint-md)
-  .md\:grid-cols-2
-    grid-template-columns: repeat(2, 1fr)
-  .md\:grid-cols-3
-    grid-template-columns: repeat(3, 1fr)
+// =============================================
+// Адаптивные стили
+// =============================================
 
-@media (min-width: $breakpoint-lg)
-  .lg\:grid-cols-3
-    grid-template-columns: repeat(3, 1fr)
-  .lg\:grid-cols-4
-    grid-template-columns: repeat(4, 1fr)
-
-// Отступы
-.p-0 { padding: 0 }
-.p-1 { padding: $spacing-1 }
-.p-2 { padding: $spacing-2 }
-.p-3 { padding: $spacing-3 }
-.p-4 { padding: $spacing-4 }
-.p-6 { padding: $spacing-6 }
-.p-8 { padding: $spacing-8 }
-
-.py-2 { padding-top: $spacing-2; padding-bottom: $spacing-2 }
-.py-3 { padding-top: $spacing-3; padding-bottom: $spacing-3 }
-.py-4 { padding-top: $spacing-4; padding-bottom: $spacing-4 }
-.py-6 { padding-top: $spacing-6; padding-bottom: $spacing-6 }
-.py-8 { padding-top: $spacing-8; padding-bottom: $spacing-8 }
-
-.px-3 { padding-left: $spacing-3; padding-right: $spacing-3 }
-.px-4 { padding-left: $spacing-4; padding-right: $spacing-4 }
-.px-6 { padding-left: $spacing-6; padding-right: $spacing-6 }
-
-// Маржины
-.m-0 { margin: 0 }
-.m-4 { margin: $spacing-4 }
-.m-6 { margin: $spacing-6 }
-
-.mt-2 { margin-top: $spacing-2 }
-.mt-4 { margin-top: $spacing-4 }
-.mt-6 { margin-top: $spacing-6 }
-.mt-8 { margin-top: $spacing-8 }
-
-.mb-2 { margin-bottom: $spacing-2 }
-.mb-4 { margin-bottom: $spacing-4 }
-.mb-6 { margin-bottom: $spacing-6 }
-.mb-8 { margin-bottom: $spacing-8 }
-
-// Темная тема
-@media (prefers-color-scheme: dark)
-  :root
-    color-scheme: dark
-
-// Адаптивность
-@media (max-width: $breakpoint-md)
+@media (max-width: 768px)
   .header__nav-block
     flex-direction: column
-    gap: $spacing-3
+    gap: 1rem
+
+  .header__brand
+    justify-content: center
 
   .header__nav-menu
-    width: 100%
     justify-content: center
     flex-wrap: wrap
 
   .footer__sections
     grid-template-columns: 1fr
-    gap: $spacing-6
+    gap: 1.5rem
+
+@media (max-width: 480px)
+  .header__nav
+    padding: 0.5rem
 
-@media (max-width: $breakpoint-sm)
-  .header__nav-name
-    font-size: $font-size-xl
-    text-align: center
+  .header__company-name
+    font-size: 1.1rem
 
   .header__menu-link
-    padding: $spacing-1 $spacing-2
-    font-size: $font-size-xs
+    font-size: 0.875rem
 
-  .btn
-    padding: $spacing-2 $spacing-3
-    font-size: $font-size-xs
+  .footer__content
+    padding: 0 0.5rem
 
-  .card__header,
-  .card__content,
-  .card__footer
-    padding: $spacing-4
+// =============================================
+// Темная тема (автоматическая)
+// =============================================
+
+@media (prefers-color-scheme: dark)
+  :root
+    color-scheme: dark

app/pages/Admin/index.coffee

@@ -1,8 +1,8 @@
-document.head.insertAdjacentHTML('beforeend','<style type="text/css">'+stylFns['app/pages/Admin/index.styl']+'</style>')
+document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss">'+stylFns['app/pages/Admin/index.styl']+'</style>')
 
 PouchDB = require 'app/utils/pouch'
 
-# Иконки для меню (упрощенные компоненты)
+# Иконки для меню (упрощенные компоненты Vue)
 MenuIcons =
   SliderIcon:
     template: '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>'
@@ -31,7 +31,6 @@ module.exports =
   data: ->
     return {
       currentDomain: window.location.hostname
-      mobileMenuOpen: false
       menuItems: [
         {
           id: 'slider'
@@ -75,18 +74,11 @@ module.exports =
   computed:
     currentRoute: ->
       @$route.path.split('/').pop() || 'settings'
-    
-    showMobileMenuButton: ->
-      window.innerWidth < 1024
   
   methods:
     navigateTo: (path) ->
-      @mobileMenuOpen = false
       @$router.push(path)
     
-    toggleMobileMenu: ->
-      @mobileMenuOpen = !@mobileMenuOpen
-    
     getMenuItemClass: (item) ->
       baseClass = 'admin__nav-item'
       isActive = @currentRoute == item.id
@@ -96,12 +88,6 @@ module.exports =
       else
         return "#{baseClass} admin__nav-item--inactive"
     
-    getSidebarClass: ->
-      if @mobileMenuOpen
-        return 'admin__sidebar--visible'
-      else
-        return 'admin__sidebar--hidden'
-    
     loadDomainSettings: ->
       PouchDB.getDocument("domain_settings:#{@currentDomain}")
         .then (settings) =>
@@ -109,14 +95,6 @@ module.exports =
         .catch (error) =>
           debug.log 'Настройки домена не найдены, используются значения по умолчанию'
           @domainSettings = null
-    
-    handleResize: ->
-      if window.innerWidth >= 1024
-        @mobileMenuOpen = false
   
   mounted: ->
     @loadDomainSettings()
-    window.addEventListener 'resize', @handleResize
-  
-  beforeUnmount: ->
-    window.removeEventListener 'resize', @handleResize

app/pages/Admin/index.pug

@@ -1,40 +1,15 @@
 div(class="admin")
-  header(class="admin__header")
+  div(class="admin__header")
     div(class="admin__header-content")
-      div(class="admin__header-top")
-        h1(class="admin__header-title") Панель администратора
-        button(
-          @click="toggleMobileMenu"
-          class="admin__mobile-menu-btn"
-          v-if="showMobileMenuButton"
-        )
-          svg(v-if="!mobileMenuOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6")
-            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16")
-          svg(v-else fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6")
-            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12")
-      div(class="admin__domain-info") Текущий домен: {{ currentDomain }}
+      div(class="admin__brand")
+        img(src="/images/logo.png" alt="Браер-Колор" class="admin__logo")
+        span(class="admin__company-name") Браер-Колор
+      div(class="admin__domain-info") {{ currentDomain }}
+      div(class="admin__user-menu")
+        button(@click="toggleTheme" class="admin__theme-toggle") {{ theme === 'light' ? '🌙' : '☀️' }}
   
-  //- Mobile menu (positioned above header)
-  div(
-    v-if="mobileMenuOpen"
-    @click="toggleMobileMenu"
-    class="admin__sidebar-overlay"
-  )
-  
-  div(
-    :class="getSidebarClass()"
-    class="admin__sidebar"
-  )
-    div(class="admin__sidebar-header")
-      h3(class="admin__sidebar-title") Меню
-      button(
-        @click="toggleMobileMenu"
-        class="admin__sidebar-close"
-      )
-        svg(fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6")
-          path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12")
-    
-    nav(class="admin__nav")
+  nav(class="admin__nav")
+    div(class="admin__nav-content")
       a(
         v-for="item in menuItems"
         :key="item.id"
@@ -42,11 +17,9 @@ div(class="admin")
         @click.prevent="navigateTo(item.path)"
         :class="getMenuItemClass(item)"
       )
-        div(class="admin__nav-item-content")
-          component(:is="item.icon" class="admin__nav-icon")
-          span(class="admin__nav-text") {{ item.name }}
+        component(:is="item.icon" class="admin__nav-icon")
+        span(class="admin__nav-text") {{ item.name }}
   
-  div(class="admin__body")
-    //- Main content
-    main(class="admin__main")
+  main(class="admin__main")
+    div(class="admin__content")
       router-view

app/pages/Admin/index.styl

@@ -1,37 +1,46 @@
-// Admin panel styles
 .admin
   display: flex
+  flex-direction: column
   min-height: 100vh
   background-color: $gray-50
 
   .dark &
     background-color: $gray-900
 
-.admin__sidebar
-  width: 16rem
+.admin__header
   background-color: $white
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
-  height: 100vh
-  position: fixed
-  left: 0
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+  position: sticky
   top: 0
-  z-index: 40
+  z-index: 50
+  border-bottom: 1px solid $gray-200
 
   .dark &
     background-color: $gray-800
+    border-bottom-color: $gray-700
 
-.admin__sidebar-header
-  padding: 1.5rem
-  border-bottom: 1px solid $gray-200
+.admin__header-content
+  display: flex
+  align-items: center
+  justify-content: space-between
+  padding: 1rem 1.5rem
+  max-width: 1200px
+  margin: 0 auto
 
-  .dark &
-    border-bottom-color: $gray-700
+.admin__brand
+  display: flex
+  align-items: center
+  gap: 0.75rem
 
-.admin__sidebar-title
+.admin__logo
+  width: 2rem
+  height: 2rem
+  object-fit: contain
+
+.admin__company-name
   font-size: 1.25rem
   font-weight: bold
-  color: $gray-800
-  margin-bottom: 0.5rem
+  color: $gray-900
 
   .dark &
     color: $white
@@ -41,58 +50,101 @@
   color: $gray-600
   background-color: $gray-100
   padding: 0.25rem 0.75rem
-  border-radius: 9999px
-  display: inline-block
+  border-radius: 0.375rem
 
   .dark &
     color: $gray-400
     background-color: $gray-700
 
-.admin__nav
-  padding: 1rem
+.admin__user-menu
   display: flex
-  flex-direction: column
+  align-items: center
   gap: 0.5rem
 
+.admin__theme-toggle
+  padding: 0.5rem
+  border-radius: 0.375rem
+  background-color: $gray-100
+  color: $gray-600
+  transition: all 0.2s ease-in-out
+  border: none
+  cursor: pointer
+
+  &:hover
+    background-color: $gray-200
+
+  .dark &
+    background-color: $gray-700
+    color: $gray-300
+
+    &:hover
+      background-color: $gray-600
+
+.admin__nav
+  background-color: $white
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+  border-bottom: 1px solid $gray-200
+  position: sticky
+  top: 64px
+  z-index: 40
+
+  .dark &
+    background-color: $gray-800
+    border-bottom-color: $gray-700
+
+.admin__nav-content
+  display: flex
+  gap: 0
+  overflow-x: auto
+  padding: 0 1.5rem
+  max-width: 1200px
+  margin: 0 auto
+
+  &::-webkit-scrollbar
+    display: none
+
+  -ms-overflow-style: none
+  scrollbar-width: none
+
 .admin__nav-item
   display: flex
   align-items: center
-  gap: 0.75rem
+  gap: 0.5rem
   padding: 0.75rem 1rem
-  border-radius: 0.5rem
-  transition: all 0.2s ease-in-out
+  color: $gray-600
   text-decoration: none
-  color: inherit
+  transition: all 0.2s ease-in-out
   border: none
   background: none
   cursor: pointer
-  width: 100%
-  text-align: left
+  white-space: nowrap
+  border-bottom: 2px solid transparent
 
   &:hover
-    background-color: $gray-100
     color: $gray-900
+    background-color: $gray-50
 
-  .dark &
-    &:hover
-      background-color: $gray-700
+    .dark &
       color: $white
+      background-color: $gray-700
 
 .admin__nav-item--active
-  background-color: $primary-100
-  color: $primary-700
+  color: $primary-600
+  border-bottom-color: $primary-600
+  background-color: $primary-50
 
   .dark &
+    color: $primary-400
+    border-bottom-color: $primary-400
     background-color: $primary-900
-    color: $primary-300
 
   &:hover
-    background-color: $primary-200
-    color: $primary-800
+    color: $primary-700
+    background-color: $primary-100
 
     .dark &
+      color: $primary-300
       background-color: $primary-800
-      color: $primary-200
 
 .admin__nav-item--inactive
   color: $gray-600
@@ -100,292 +152,67 @@
   .dark &
     color: $gray-400
 
-.admin__nav-item-content
-  display: flex
-  align-items: center
-  gap: 0.75rem
-
 .admin__nav-icon
   width: 1.25rem
   height: 1.25rem
+  flex-shrink: 0
 
 .admin__nav-text
   font-weight: 500
+  font-size: 0.875rem
 
-.admin__content
+.admin__main
   flex: 1
-  margin-left: 16rem
   padding: 1.5rem
 
-// Admin content area styles
-.admin-content
-  &__header
-    margin-bottom: 2rem
-
-  &__title
-    font-size: 1.875rem
-    font-weight: bold
-    color: $gray-900
-    margin-bottom: 0.5rem
-
-    .dark &
-      color: $white
-
-  &__subtitle
-    color: $gray-600
-    font-size: 1.125rem
-
-    .dark &
-      color: $gray-400
-
-  &__card
-    background-color: $white
-    border-radius: 0.5rem
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
-    padding: 1.5rem
-
-    .dark &
-      background-color: $gray-800
-
-  &__section
-    margin-bottom: 2rem
-
-    &:last-child
-      margin-bottom: 0
-
-  &__section-title
-    font-size: 1.25rem
-    font-weight: 600
-    color: $gray-900
-    margin-bottom: 1rem
-
-    .dark &
-      color: $white
-
-  &__section-description
-    color: $gray-600
-    margin-bottom: 1.5rem
-
-    .dark &
-      color: $gray-400
-
-// Admin form styles
-.admin-form
-  &__group
-    margin-bottom: 1.5rem
-
-  &__label
-    display: block
-    font-size: 0.875rem
-    font-weight: 500
-    color: $gray-700
-    margin-bottom: 0.5rem
-
-    .dark &
-      color: $gray-300
-
-  &__input
-    width: 100%
-    padding: 0.5rem 0.75rem
-    border: 1px solid $gray-300
-    border-radius: 0.5rem
-    background-color: $white
-    color: $gray-900
-    font-size: 0.875rem
-    transition: all 0.2s ease-in-out
-
-    &:focus
-      outline: none
-      border-color: $primary-500
-      // Исправлено: используем функцию rgba с компонентами цвета
-      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)
-
-    .dark &
-      background-color: $gray-700
-      color: $white
-      border-color: $gray-600
-
-      &:focus
-        border-color: $primary-500
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)
-
-  &__textarea
-    @extend .admin-form__input
-    resize: vertical
-    min-height: 5rem
-
-  &__select
-    @extend .admin-form__input
-
-  &__checkbox
-    border-radius: 0.25rem
-    border: 1px solid $gray-300
-    background-color: $white
-    color: $primary-600
-
-    &:focus
-      border-color: $primary-500
-      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)
-
-    .dark &
-      background-color: $gray-700
-      border-color: $gray-600
-
-// Admin button styles
-.admin-btn
-  padding: 0.5rem 1rem
-  border-radius: 0.5rem
-  font-weight: 500
-  font-size: 0.875rem
-  transition: all 0.2s ease-in-out
-  border: none
-  cursor: pointer
-  text-decoration: none
-  display: inline-flex
-  align-items: center
-  gap: 0.5rem
-
-  &:focus
-    outline: none
-    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)
-
-  &--primary
-    background-color: $primary-600
-    color: $white
-
-    &:hover
-      background-color: $primary-700
-
-  &--secondary
-    background-color: $gray-200
-    color: $gray-700
-
-    &:hover
-      background-color: $gray-300
-
-    .dark &
-      background-color: $gray-700
-      color: $gray-300
-
-      &:hover
-        background-color: $gray-600
-
-  &--danger
-    background-color: #dc2626
-    color: $white
-
-    &:hover
-      background-color: #b91c1c
-
-  &--success
-    background-color: #16a34a
-    color: $white
-
-    &:hover
-      background-color: #15803d
-
-// Admin table styles
-.admin-table
-  width: 100%
-  border-collapse: collapse
-  background-color: $white
-
-  .dark &
-    background-color: $gray-800
-
-  &__header
-    background-color: $gray-50
-
-    .dark &
-      background-color: $gray-700
-
-  &__th
-    padding: 0.75rem 1rem
-    text-align: left
-    font-size: 0.75rem
-    font-weight: 500
-    color: $gray-500
-    text-transform: uppercase
-    letter-spacing: 0.05em
-    border-bottom: 1px solid $gray-200
-
-    .dark &
-      color: $gray-300
-      border-bottom-color: $gray-600
-
-  &__tr
-    &:hover
-      background-color: $gray-50
-
-      .dark &
-        background-color: $gray-700
+.admin__content
+  max-width: 1200px
+  margin: 0 auto
 
-  &__td
+// Mobile styles
+@media (max-width: 768px)
+  .admin__header-content
     padding: 0.75rem 1rem
-    border-bottom: 1px solid $gray-200
-    font-size: 0.875rem
+    flex-wrap: wrap
+    gap: 0.5rem
 
-    .dark &
-      border-bottom-color: $gray-600
+  .admin__brand
+    order: 1
 
-// Admin modal styles
-.admin-modal
-  position: fixed
-  inset: 0
-  background-color: rgba(0, 0, 0, 0.5)
-  display: flex
-  align-items: center
-  justify-content: center
-  z-index: 50
-
-  &__content
-    background-color: $white
-    border-radius: 0.5rem
-    padding: 1.5rem
-    max-width: 32rem
+  .admin__domain-info
+    order: 3
     width: 100%
-    margin: 0 1rem
-    max-height: 90vh
-    overflow-y: auto
+    text-align: center
+    margin-top: 0.5rem
 
-    .dark &
-      background-color: $gray-800
+  .admin__user-menu
+    order: 2
 
-  &__title
-    font-size: 1.125rem
-    font-weight: 500
-    color: $gray-900
-    margin-bottom: 1rem
+  .admin__nav-content
+    padding: 0 1rem
+    gap: 0
 
-    .dark &
-      color: $white
-
-  &__actions
-    display: flex
-    gap: 0.75rem
-    justify-content: flex-end
-    margin-top: 1.5rem
+  .admin__nav-item
+    padding: 0.75rem 0.5rem
+    font-size: 0.875rem
 
-// Responsive adjustments for admin panel
-@media (max-width: 1024px)
-  .admin__sidebar
-    width: 14rem
+  .admin__nav-text
+    font-size: 0.8rem
 
-  .admin__content
-    margin-left: 14rem
+  .admin__main
+    padding: 1rem
 
-@media (max-width: 768px)
-  .admin
-    flex-direction: column
+// Small mobile devices
+@media (max-width: 480px)
+  .admin__company-name
+    font-size: 1.1rem
 
-  .admin__sidebar
-    position: static
-    width: 100%
-    height: auto
+  .admin__nav-item
+    padding: 0.5rem 0.25rem
 
-  .admin__content
-    margin-left: 0
-    padding: 1rem
+  .admin__nav-icon
+    width: 1rem
+    height: 1rem
 
-  .admin-modal__content
-    margin: 0 0.5rem
+  .admin__nav-text
+    font-size: 0.75rem

app/pages/Home/index.coffee

@@ -1,17 +1,52 @@
-document.head.insertAdjacentHTML('beforeend','<style type="text/css">'+stylFns['app/pages/Home/index.styl']+'</style>')
+document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss">'+stylFns['app/pages/Home/index.styl']+'</style>')
 
 module.exports =
   name: 'HomePage'
+  
   render: (new Function '_ctx', '_cache', renderFns['app/pages/Home/index.pug'])()
   
   data: ->
     return {
-      loading: false
+      features: [
+        {
+          icon: '🎨'
+          title: 'Широкий ассортимент'
+          description: 'Более 1000 видов лакокрасочных материалов от проверенных производителей'
+        }
+        {
+          icon: '🚚'
+          title: 'Быстрая доставка'
+          description: 'Доставка по всему городу в течение 24 часов после заказа'
+        }
+        {
+          icon: '💯'
+          title: 'Гарантия качества'
+          description: 'Все товары сертифицированы и прошли контроль качества'
+        }
+      ]
+      categories: [
+        {
+          name: 'Краски для интерьера'
+          count: '245 товаров'
+          image: '/images/interior-paints.jpg'
+        }
+        {
+          name: 'Фасадные краски'
+          count: '189 товаров'
+          image: '/images/exterior-paints.jpg'
+        }
+        {
+          name: 'Грунтовки'
+          count: '156 товаров'
+          image: '/images/primers.jpg'
+        }
+        {
+          name: 'Лаки и пропитки'
+          count: '98 товаров'
+          image: '/images/varnishes.jpg'
+        }
+      ]
     }
   
   mounted: ->
-    debug.log 'Главная страница загружена'
-  
-  methods:
-    navigateToCatalog: ->
-      @$router.push('/catalog')
+    debug.log 'Home page mounted'

app/pages/Home/index.pug

@@ -1,19 +1,52 @@
 div(class="home-page")
-  div(class="home-page__hero")
-    h1(class="home-page__title") Добро пожаловать в Браер-Колор
-    p(class="home-page__subtitle") Интернет-магазин лакокрасочной продукции
-    div(class="home-page__actions")
-      router-link(to="/catalog" class="home-page__btn home-page__btn--primary") В каталог
-      router-link(to="/about" class="home-page__btn home-page__btn--secondary") О компании
-  
-  div(class="home-page__content")
-    div(class="home-page__section")
-      h2(class="home-page__section-title") Популярные категории
-      div(class="home-page__categories")
-        div(class="home-page__category") Краски
-        div(class="home-page__category") Грунтовки
-        div(class="home-page__category") Лаки
-        div(class="home-page__category") Эмали
-  
-  div(class="home-page__info")
-    p(class="home-page__info-text") Мы работаем над наполнением сайта. Скоро здесь появится больше информации!
+  div(class="home-hero")
+    h1(class="home-hero__title") Добро пожаловать в Браер-Колор
+    p(class="home-hero__subtitle") Интернет-магазин лакокрасочной продукции
+    div(class="home-hero__actions")
+      router-link(to="/catalog" class="btn-primary") В каталог
+      router-link(to="/about" class="btn-secondary") О компании
+
+  div(class="home-features")
+    h2(class="home-features__title") Почему выбирают нас
+    div(class="home-features__grid")
+      div(class="home-feature")
+        div(class="home-feature__icon") 🎨
+        h3(class="home-feature__title") Широкий ассортимент
+        p(class="home-feature__description") Более 1000 видов лакокрасочных материалов от проверенных производителей
+      div(class="home-feature")
+        div(class="home-feature__icon") 🚚
+        h3(class="home-feature__title") Быстрая доставка
+        p(class="home-feature__description") Доставка по всему городу в течение 24 часов после заказа
+      div(class="home-feature")
+        div(class="home-feature__icon") 💯
+        h3(class="home-feature__title") Гарантия качества
+        p(class="home-feature__description") Все товары сертифицированы и прошли контроль качества
+
+  div(class="home-categories")
+    h2(class="home-categories__title") Популярные категории
+    div(class="home-categories__grid")
+      div(class="home-category")
+        img(src="/images/interior-paints.jpg" alt="Краски для интерьера" class="home-category__image")
+        div(class="home-category__content")
+          h3(class="home-category__name") Краски для интерьера
+          p(class="home-category__count") 245 товаров
+      div(class="home-category")
+        img(src="/images/exterior-paints.jpg" alt="Фасадные краски" class="home-category__image")
+        div(class="home-category__content")
+          h3(class="home-category__name") Фасадные краски
+          p(class="home-category__count") 189 товаров
+      div(class="home-category")
+        img(src="/images/primers.jpg" alt="Грунтовки" class="home-category__image")
+        div(class="home-category__content")
+          h3(class="home-category__name") Грунтовки
+          p(class="home-category__count") 156 товаров
+      div(class="home-category")
+        img(src="/images/varnishes.jpg" alt="Лаки и пропитки" class="home-category__image")
+        div(class="home-category__content")
+          h3(class="home-category__name") Лаки и пропитки
+          p(class="home-category__count") 98 товаров
+
+  div(class="home-cta")
+    h2(class="home-cta__title") Готовы начать проект?
+    p(class="home-cta__description") Получите бесплатную консультацию нашего специалиста по подбору материалов
+    router-link(to="/contacts" class="home-cta__button") Связаться с нами

app/pages/Home/index.styl

@@ -1,62 +1,32 @@
-// Home page specific styles
 .home-page
-  container()
-  padding-top: $spacing-8
-  padding-bottom: $spacing-12
-  flex-col()
-  gap: $spacing-12
+  padding: 2rem 1rem
+  max-width: 1200px
+  margin: 0 auto
 
-// Hero section
 .home-hero
   text-align: center
-  padding: $spacing-16 0
-  background: linear-gradient(135deg, $white 0%, $gray-50 100%)
-  border-radius: $radius-2xl
-  margin: -$spacing-8 0
-  position: relative
-  overflow: hidden
+  padding: 4rem 0
+  border-bottom: 1px solid $gray-200
+  margin-bottom: 4rem
 
   .dark &
-    background: linear-gradient(135deg, $gray-800 0%, $gray-900 100%)
-
-  &::before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
-    opacity: 0.3
-
-.home-hero__content
-  position: relative
-  z-index: 2
-  max-width: 48rem
-  margin: 0 auto
-  padding: 0 $spacing-6
+    border-bottom-color: $gray-700
 
 .home-hero__title
-  font-size: $font-size-5xl
-  font-weight: $font-weight-extrabold
-  line-height: 1.1
+  font-size: 3rem
+  font-weight: bold
   color: $gray-900
-  margin-bottom: $spacing-6
-  letter-spacing: $letter-spacing-tight
+  margin-bottom: 1rem
+  line-height: 1.2
 
   .dark &
     color: $white
 
-  @media (max-width: $breakpoint-sm)
-    font-size: $font-size-4xl
-
 .home-hero__subtitle
-  font-size: $font-size-xl
-  font-weight: $font-weight-normal
-  line-height: $line-height-relaxed
+  font-size: 1.25rem
   color: $gray-600
-  margin-bottom: $spacing-8
-  max-width: 36rem
+  margin-bottom: 2rem
+  max-width: 600px
   margin-left: auto
   margin-right: auto
 
@@ -65,339 +35,210 @@
 
 .home-hero__actions
   display: flex
-  gap: $spacing-4
+  gap: 1rem
   justify-content: center
   flex-wrap: wrap
 
-// Features section
 .home-features
-  padding: $spacing-12 0
+  padding: 4rem 0
+  border-bottom: 1px solid $gray-200
+  margin-bottom: 4rem
 
-.home-features__header
-  text-align: center
-  margin-bottom: $spacing-12
+  .dark &
+    border-bottom-color: $gray-700
 
 .home-features__title
-  font-size: $font-size-4xl
-  font-weight: $font-weight-extrabold
+  font-size: 2.25rem
+  font-weight: bold
+  text-align: center
   color: $gray-900
-  margin-bottom: $spacing-4
-  letter-spacing: $letter-spacing-tight
+  margin-bottom: 3rem
 
   .dark &
     color: $white
 
-.home-features__description
-  font-size: $font-size-lg
-  color: $gray-600
-  max-width: 36rem
-  margin: 0 auto
-  line-height: $line-height-relaxed
-
-  .dark &
-    color: $gray-400
-
 .home-features__grid
   display: grid
   grid-template-columns: 1fr
-  gap: $spacing-8
+  gap: 2rem
 
-  @media (min-width: $breakpoint-md)
+  @media (min-width: 768px)
     grid-template-columns: repeat(2, 1fr)
 
-  @media (min-width: $breakpoint-lg)
+  @media (min-width: 1024px)
     grid-template-columns: repeat(3, 1fr)
 
 .home-feature
-  background: $white
-  padding: $spacing-8
-  border-radius: $radius-xl
-  box-shadow: $shadow-base
-  border: 1px solid $gray-200
+  background-color: $white
+  padding: 2rem
+  border-radius: 0.5rem
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
   text-align: center
-  transition: all 0.3s ease-in-out
-  position: relative
-  overflow: hidden
-
-  .dark &
-    background: $gray-800
-    border-color: $gray-700
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out
 
   &:hover
-    transform: translateY(-4px)
-    box-shadow: $shadow-xl
+    transform: translateY(-2px)
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
 
-    .home-feature__icon
-      transform: scale(1.1)
+  .dark &
+    background-color: $gray-800
 
 .home-feature__icon
   width: 4rem
   height: 4rem
-  margin: 0 auto $spacing-4
-  background: linear-gradient(135deg, $primary-500, $accent-500)
-  border-radius: $radius-lg
-  flex-center()
-  transition: transform 0.3s ease-in-out
+  margin: 0 auto 1rem
+  background-color: $primary-100
+  border-radius: 50%
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 1.5rem
 
-  svg
-    width: 2rem
-    height: 2rem
-    color: $white
+  .dark &
+    background-color: $primary-900
 
 .home-feature__title
-  font-size: $font-size-xl
-  font-weight: $font-weight-semibold
+  font-size: 1.25rem
+  font-weight: 600
   color: $gray-900
-  margin-bottom: $spacing-3
-  line-height: $line-height-tight
+  margin-bottom: 1rem
 
   .dark &
     color: $white
 
 .home-feature__description
-  font-size: $font-size-base
   color: $gray-600
-  line-height: $line-height-relaxed
+  line-height: 1.6
 
   .dark &
     color: $gray-400
 
-// Categories section
 .home-categories
-  padding: $spacing-12 0
+  padding: 4rem 0
+  border-bottom: 1px solid $gray-200
+  margin-bottom: 4rem
 
-.home-categories__header
-  text-align: center
-  margin-bottom: $spacing-8
+  .dark &
+    border-bottom-color: $gray-700
 
 .home-categories__title
-  font-size: $font-size-4xl
-  font-weight: $font-weight-extrabold
+  font-size: 2.25rem
+  font-weight: bold
+  text-align: center
   color: $gray-900
-  margin-bottom: $spacing-4
-  letter-spacing: $letter-spacing-tight
+  margin-bottom: 3rem
 
   .dark &
     color: $white
 
-.home-categories__description
-  font-size: $font-size-lg
-  color: $gray-600
-  max-width: 36rem
-  margin: 0 auto
-
-  .dark &
-    color: $gray-400
-
 .home-categories__grid
   display: grid
   grid-template-columns: 1fr
-  gap: $spacing-6
+  gap: 1.5rem
 
-  @media (min-width: $breakpoint-sm)
+  @media (min-width: 640px)
     grid-template-columns: repeat(2, 1fr)
 
-  @media (min-width: $breakpoint-lg)
+  @media (min-width: 1024px)
     grid-template-columns: repeat(4, 1fr)
 
 .home-category
-  background: $white
-  border-radius: $radius-xl
+  background-color: $white
+  border-radius: 0.5rem
   overflow: hidden
-  box-shadow: $shadow-base
-  border: 1px solid $gray-200
-  transition: all 0.3s ease-in-out
-  position: relative
-
-  .dark &
-    background: $gray-800
-    border-color: $gray-700
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out
 
   &:hover
-    transform: translateY(-3px)
-    box-shadow: $shadow-lg
-
-    .home-category__image
-      transform: scale(1.05)
+    transform: translateY(-2px)
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
 
-.home-category__image-container
-  width: 100%
-  height: 12rem
-  overflow: hidden
-  position: relative
+  .dark &
+    background-color: $gray-800
 
 .home-category__image
   width: 100%
-  height: 100%
+  height: 200px
   object-fit: cover
-  transition: transform 0.3s ease-in-out
 
 .home-category__content
-  padding: $spacing-6
+  padding: 1.5rem
 
 .home-category__name
-  font-size: $font-size-lg
-  font-weight: $font-weight-semibold
+  font-size: 1.125rem
+  font-weight: 600
   color: $gray-900
-  margin-bottom: $spacing-2
-  line-height: $line-height-tight
+  margin-bottom: 0.5rem
 
   .dark &
     color: $white
 
 .home-category__count
-  font-size: $font-size-sm
   color: $gray-500
-  font-weight: $font-weight-medium
+  font-size: 0.875rem
 
   .dark &
     color: $gray-400
 
-// CTA section
 .home-cta
-  background: linear-gradient(135deg, $primary-600, $accent-600)
+  background: linear-gradient(135deg, $primary-500, $accent-500)
   color: $white
-  padding: $spacing-16 $spacing-6
+  padding: 4rem 1rem
   text-align: center
-  border-radius: $radius-2xl
-  position: relative
-  overflow: hidden
-
-  &::before
-    content: ''
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M0 0h20L0 20z'/%3E%3C/g%3E%3C/svg%3E")
-
-.home-cta__content
-  position: relative
-  z-index: 2
-  max-width: 48rem
-  margin: 0 auto
+  border-radius: 1rem
+  margin: 4rem 0
 
 .home-cta__title
-  font-size: $font-size-4xl
-  font-weight: $font-weight-extrabold
-  line-height: 1.1
-  margin-bottom: $spacing-4
-  letter-spacing: $letter-spacing-tight
-
-  @media (max-width: $breakpoint-sm)
-    font-size: $font-size-3xl
+  font-size: 2.25rem
+  font-weight: bold
+  margin-bottom: 1rem
 
 .home-cta__description
-  font-size: $font-size-xl
-  line-height: $line-height-relaxed
-  margin-bottom: $spacing-8
+  font-size: 1.125rem
+  margin-bottom: 2rem
   opacity: 0.9
-  max-width: 36rem
+  max-width: 600px
   margin-left: auto
   margin-right: auto
 
 .home-cta__button
   background-color: $white
   color: $primary-600
-  padding: $spacing-4 $spacing-8
-  border-radius: $radius-lg
-  font-size: $font-size-lg
-  font-weight: $font-weight-semibold
+  padding: 0.75rem 2rem
+  border-radius: 0.5rem
+  font-weight: 600
   text-decoration: none
   display: inline-block
-  transition: all 0.3s ease-in-out
-  box-shadow: $shadow-lg
+  transition: all 0.2s ease-in-out
 
   &:hover
     background-color: $gray-100
-    transform: translateY(-2px)
-    box-shadow: $shadow-xl
+    transform: translateY(-1px)
 
-// Stats section
-.home-stats
-  padding: $spacing-12 0
-
-.home-stats__grid
-  display: grid
-  grid-template-columns: repeat(2, 1fr)
-  gap: $spacing-8
-
-  @media (min-width: $breakpoint-md)
-    grid-template-columns: repeat(4, 1fr)
-
-.home-stat
-  text-align: center
-  padding: $spacing-6
-
-.home-stat__number
-  font-size: $font-size-4xl
-  font-weight: $font-weight-extrabold
-  color: $primary-600
-  line-height: 1
-  margin-bottom: $spacing-2
-
-  .dark &
-    color: $primary-400
-
-.home-stat__label
-  font-size: $font-size-sm
-  font-weight: $font-weight-medium
-  color: $gray-600
-  text-transform: uppercase
-  letter-spacing: $letter-spacing-wide
-
-  .dark &
-    color: $gray-400
-
-// Responsive adjustments
-@media (max-width: $breakpoint-md)
+@media (max-width: 768px)
   .home-hero
-    padding: $spacing-12 0
-    margin: -$spacing-6 0
+    padding: 2rem 0
 
   .home-hero__title
-    font-size: $font-size-4xl
+    font-size: 2rem
 
   .home-hero__subtitle
-    font-size: $font-size-lg
+    font-size: 1.125rem
 
   .home-features,
-  .home-categories,
-  .home-stats
-    padding: $spacing-8 0
+  .home-categories
+    padding: 2rem 0
 
   .home-features__title,
   .home-categories__title
-    font-size: $font-size-3xl
+    font-size: 1.875rem
 
   .home-cta
-    padding: $spacing-12 $spacing-4
+    padding: 2rem 1rem
+    margin: 2rem 0
 
   .home-cta__title
-    font-size: $font-size-3xl
+    font-size: 1.875rem
 
   .home-cta__description
-    font-size: $font-size-lg
-
-@media (max-width: $breakpoint-sm)
-  .home-hero__title
-    font-size: $font-size-3xl
-
-  .home-hero__actions
-    flex-direction: column
-    align-items: center
-
-    .btn
-      width: 100%
-      max-width: 20rem
-
-  .home-features__grid
-    grid-template-columns: 1fr
-
-  .home-categories__grid
-    grid-template-columns: 1fr
-
-  .home-stats__grid
-    grid-template-columns: 1fr
-    gap: $spacing-6
+    font-size: 1rem