s5l.ru-crm/app/pages/Home/index.styl

@css {
  .home-page {
    @apply min-h-screen bg-gray-50 dark:bg-gray-800 py-8;
  }

  .home-page__hero {
    @apply text-center py-16 px-4 bg-white dark:bg-gray-900 shadow-sm mb-8;
  }

  .home-page__title {
    @apply text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4;
  }

  .home-page__subtitle {
    @apply text-xl text-gray-600 dark:text-gray-300 mb-8;
  }

  .home-page__actions {
    @apply flex flex-col sm:flex-row gap-4 justify-center items-center;
  }

  .home-page__btn {
    @apply px-6 py-3 rounded-lg font-medium transition-colors duration-200;
  }

  .home-page__btn--primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white;
  }

  .home-page__btn--secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white;
  }

  .home-page__content {
    @apply container mx-auto px-4;
  }

  .home-page__section {
    @apply mb-8;
  }

  .home-page__section-title {
    @apply text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center;
  }

  .home-page__categories {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4;
  }

  .home-page__category {
    @apply bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 text-center text-gray-700 dark:text-gray-300 font-medium hover:shadow-lg transition-shadow duration-200;
  }

  .home-page__info {
    @apply text-center py-8 px-4 bg-primary-50 dark:bg-primary-900 mt-8;
  }

  .home-page__info-text {
    @apply text-primary-700 dark:text-primary-300 text-lg;
  }
}