modified: main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue

modified: main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue new file: main_dc/yalarba/easySite/easySite/app/pages/about/index.vue modified: main_dc/yalarba/easySite/easySite/nuxt.config.ts add about page and navigation throught hambMenu
2025-10-30 04:48:11 +05:00
parent 00909766a6
commit f36d3c6596
4 changed files with 653 additions and 32 deletions
@@ -1,23 +1,14 @@
 <template>
  <div class="hamburger-menu">
    <!-- Кнопка гамбургера -->
-    <button 
-      @click="toggleMenu" 
-      class="hamburger-button"
-      :class="{ 'active': isOpen }"
-      aria-label="Меню"
-    >
+    <button @click="toggleMenu" class="hamburger-button" :class="{ 'active': isOpen }" aria-label="Меню">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>

    <!-- Затемнение фона -->
-    <div 
-      v-if="isOpen" 
-      class="menu-overlay" 
-      @click="closeMenu"
-    ></div>
+    <div v-if="isOpen" class="menu-overlay" @click="closeMenu"></div>

    <!-- Само меню -->
    <transition name="slide-left">
@@ -40,19 +31,15 @@
        <!-- Настройки тем -->
        <div class="menu-section">
          <h4 class="menu-section-title">Настройки</h4>
-          
+
          <!-- Переключатель темы -->
          <div class="menu-item toggle-item">
            <div class="toggle-label">
              <span class="toggle-icon">🌙</span>
              <span class="toggle-text">Темная тема</span>
            </div>
-            <button 
-              @click="toggleTheme" 
-              class="theme-toggle"
-              :class="{ 'active': theme === 'dark' }"
-              aria-label="Переключить тему"
-            >
+            <button @click="toggleTheme" class="theme-toggle" :class="{ 'active': theme === 'dark' }"
+              aria-label="Переключить тему">
              <span class="toggle-slider"></span>
            </button>
          </div>
@@ -63,12 +50,8 @@
              <span class="toggle-icon">🔤</span>
              <span class="toggle-text">Элегантный шрифт</span>
            </div>
-            <button 
-              @click="toggleFontSet" 
-              class="font-toggle"
-              :class="{ 'active': fontSet === 'elegant' }"
-              aria-label="Переключить шрифт"
-            >
+            <button @click="toggleFontSet" class="font-toggle" :class="{ 'active': fontSet === 'elegant' }"
+              aria-label="Переключить шрифт">
              <span class="toggle-slider"></span>
            </button>
          </div>
@@ -77,7 +60,7 @@
        <!-- Навигация -->
        <div class="menu-section">
          <h4 class="menu-section-title">Аккаунт</h4>
-          
+
          <NuxtLink to="/profile" class="menu-item" @click="closeMenu">
            <span class="menu-icon">👤</span>
            <span class="menu-text">Профиль</span>
@@ -97,7 +80,7 @@
        <!-- Дополнительные ссылки -->
        <div class="menu-section">
          <h4 class="menu-section-title">Навигация</h4>
-          
+
          <NuxtLink to="/" class="menu-item" @click="closeMenu">
            <span class="menu-icon">🏠</span>
            <span class="menu-text">Главная</span>
@@ -113,6 +96,12 @@
            <span class="menu-text">Добавить объект</span>
          </NuxtLink>

+          <!-- В секции "Навигация" добавьте: -->
+          <NuxtLink to="/about" class="menu-item" @click="closeMenu">
+            <span class="menu-icon">ℹ️</span>
+            <span class="menu-text">О компании</span>
+          </NuxtLink>
+
          <a href="#" class="menu-item" @click="closeMenu">
            <span class="menu-icon">❓</span>
            <span class="menu-text">Помощь</span>
@@ -475,7 +464,7 @@ onUnmounted(() => {
  .menu-content {
    width: 400px;
  }
-  
+
  .hamburger-button {
    width: 2.25rem;
    height: 1.75rem;
@@ -486,15 +475,15 @@ onUnmounted(() => {
  .menu-content {
    width: 300px;
  }
-  
+
  .menu-section {
    padding: 1rem;
  }
-  
+
  .menu-header {
    padding: 1rem;
  }
-  
+
  .menu-footer {
    padding: 1rem;
  }
@@ -3,7 +3,7 @@
    <div class="container">
      <div class="header-content">
        <!-- Логотип -->
-        <NuxtLink to="/" class="logo">
+        <NuxtLink to="/about" class="logo">
          <div class="logo-icon">
            <span class="logo-text">T</span>
          </div>
@@ -0,0 +1,622 @@
+<template>
+  <div class="page-wrapper">
+    <Header />
+    
+    <main class="about-page">
+      <!-- Hero секция -->
+      <section class="about-hero">
+        <div class="container">
+          <div class="hero-content">
+            <div class="hero-text">
+              <h1 class="hero-title">О нашей компании</h1>
+              <p class="hero-subtitle">
+                Мы создаем инновационные решения для вашего бизнеса, 
+                помогая достигать новых высот в цифровом мире
+              </p>
+            </div>
+            <div class="hero-image">
+              <div class="image-placeholder">
+                <span class="image-text">🏢 Изображение компании</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- О компании -->
+      <section class="about-section">
+        <div class="container">
+          <div class="section-header">
+            <h2 class="section-title">Наша история</h2>
+            <p class="section-subtitle">
+              Узнайте больше о том, как мы начали и куда движемся
+            </p>
+          </div>
+          
+          <div class="about-content">
+            <div class="about-text">
+              <div class="text-block">
+                <h3>Наше начало</h3>
+                <p>
+                  Компания EasySite была основана в 2020 году с целью сделать создание 
+                  веб-сайтов доступным для каждого. Мы верим, что каждый бизнес заслуживает 
+                  качественного цифрового присутствия.
+                </p>
+              </div>
+              
+              <div class="text-block">
+                <h3>Наша миссия</h3>
+                <p>
+                  Мы стремимся упростить процесс создания и управления веб-сайтами, 
+                  предоставляя интуитивно понятные инструменты и надежную платформу 
+                  для бизнесов любого размера.
+                </p>
+              </div>
+              
+              <div class="text-block">
+                <h3>Наше видение</h3>
+                <p>
+                  Стать ведущей платформой для создания цифрового присутствия, 
+                  где каждый пользователь может легко реализовать свои идеи 
+                  и развивать бизнес в интернете.
+                </p>
+              </div>
+            </div>
+            
+            <div class="about-stats">
+              <div class="stat-card">
+                <div class="stat-number">10K+</div>
+                <div class="stat-label">Довольных клиентов</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number">50K+</div>
+                <div class="stat-label">Созданных сайтов</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number">99.9%</div>
+                <div class="stat-label">Время работы</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number">24/7</div>
+                <div class="stat-label">Поддержка</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Команда -->
+      <section class="team-section">
+        <div class="container">
+          <div class="section-header">
+            <h2 class="section-title">Наша команда</h2>
+            <p class="section-subtitle">
+              Знакомьтесь с талантливыми людьми, которые делают наш продукт лучше
+            </p>
+          </div>
+          
+          <div class="team-grid">
+            <div class="team-member">
+              <div class="member-avatar">
+                <span class="avatar-icon">👨‍💼</span>
+              </div>
+              <h3 class="member-name">Алексей Петров</h3>
+              <p class="member-role">Генеральный директор</p>
+              <p class="member-bio">
+                Основатель компании с 10-летним опытом в веб-разработке 
+                и цифровом маркетинге.
+              </p>
+            </div>
+            
+            <div class="team-member">
+              <div class="member-avatar">
+                <span class="avatar-icon">👩‍💻</span>
+              </div>
+              <h3 class="member-name">Мария Иванова</h3>
+              <p class="member-role">Технический директор</p>
+              <p class="member-bio">
+                Эксперт в области облачных технологий и архитектуры 
+                высоконагруженных систем.
+              </p>
+            </div>
+            
+            <div class="team-member">
+              <div class="member-avatar">
+                <span class="avatar-icon">👨‍🎨</span>
+              </div>
+              <h3 class="member-name">Дмитрий Сидоров</h3>
+              <p class="member-role">Lead Designer</p>
+              <p class="member-bio">
+                Создает интуитивно понятные и красивые интерфейсы 
+                с фокусом на пользовательский опыт.
+              </p>
+            </div>
+            
+            <div class="team-member">
+              <div class="member-avatar">
+                <span class="avatar-icon">👩‍🚀</span>
+              </div>
+              <h3 class="member-name">Елена Козлова</h3>
+              <p class="member-role">Product Manager</p>
+              <p class="member-bio">
+                Отвечает за развитие продукта и взаимодействие 
+                с нашим сообществом пользователей.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Ценности -->
+      <section class="values-section">
+        <div class="container">
+          <div class="section-header">
+            <h2 class="section-title">Наши ценности</h2>
+            <p class="section-subtitle">
+              Принципы, которые направляют нашу работу каждый день
+            </p>
+          </div>
+          
+          <div class="values-grid">
+            <div class="value-card">
+              <div class="value-icon">🎯</div>
+              <h3>Инновации</h3>
+              <p>
+                Мы постоянно ищем новые способы улучшить наш продукт 
+                и предоставить лучший сервис нашим клиентам.
+              </p>
+            </div>
+            
+            <div class="value-card">
+              <div class="value-icon">🤝</div>
+              <h3>Партнерство</h3>
+              <p>
+                Мы строим долгосрочные отношения с клиентами, 
+                основанные на взаимном доверии и понимании.
+              </p>
+            </div>
+            
+            <div class="value-card">
+              <div class="value-icon">💡</div>
+              <h3>Простота</h3>
+              <p>
+                Мы верим, что сложные технологии должны быть 
+                доступны и понятны каждому пользователю.
+              </p>
+            </div>
+            
+            <div class="value-card">
+              <div class="value-icon">🚀</div>
+              <h3>Развитие</h3>
+              <p>
+                Мы постоянно растем и учимся, чтобы оставаться 
+                на передовой технологий и тенденций.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA секция -->
+      <section class="cta-section">
+        <div class="container">
+          <div class="cta-content">
+            <h2 class="cta-title">Готовы начать?</h2>
+            <p class="cta-subtitle">
+              Присоединяйтесь к тысячам довольных клиентов, которые уже используют 
+              наши решения для развития своего бизнеса
+            </p>
+            <div class="cta-buttons">
+              <NuxtLink to="/auth/register" class="btn btn-primary btn-large">
+                Начать бесплатно
+              </NuxtLink>
+              <NuxtLink to="/contact" class="btn btn-outline btn-large">
+                Связаться с нами
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from '~/components/layout/Header.vue'
+import Footer from '~/components/layout/Footer.vue'
+
+useSeoMeta({
+  title: 'О компании - EasySite',
+  description: 'Узнайте больше о нашей компании, нашей миссии и команде. EasySite - платформа для создания сайтов с 2020 года.',
+  ogTitle: 'О компании - EasySite',
+  ogDescription: 'Узнайте больше о нашей компании, нашей миссии и команде.',
+})
+</script>
+
+<style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.about-page {
+  flex: 1;
+}
+
+/* Hero секция */
+.about-hero {
+  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
+  color: var(--text-inverse);
+  padding: 4rem 0;
+}
+
+:global([data-theme="dark"]) .about-hero {
+  background: linear-gradient(135deg, #374151 0%, #111827 100%);
+}
+
+.hero-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.hero-text {
+  max-width: 600px;
+}
+
+.hero-title {
+  font-family: var(--font-heading);
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  line-height: 1.1;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  line-height: 1.6;
+}
+
+.hero-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-placeholder {
+  width: 100%;
+  height: 300px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+}
+
+.image-text {
+  font-size: 1.125rem;
+  opacity: 0.8;
+}
+
+/* Общие стили секций */
+.about-section,
+.team-section,
+.values-section {
+  padding: 5rem 0;
+}
+
+.about-section {
+  background: var(--bg-primary);
+}
+
+.team-section {
+  background: var(--bg-secondary);
+}
+
+.values-section {
+  background: var(--bg-primary);
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 4rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section-title {
+  font-family: var(--font-heading);
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* О компании */
+.about-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+
+.about-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.text-block h3 {
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.text-block p {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--text-secondary);
+}
+
+.about-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.stat-card {
+  background: var(--bg-secondary);
+  padding: 2rem;
+  border-radius: var(--radius-lg);
+  text-align: center;
+  border: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--primary-600);
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* Команда */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+}
+
+.team-member {
+  background: var(--bg-primary);
+  padding: 2rem;
+  border-radius: var(--radius-lg);
+  text-align: center;
+  border: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+}
+
+.team-member:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.member-avatar {
+  width: 80px;
+  height: 80px;
+  background: var(--primary-100);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.5rem;
+  font-size: 2rem;
+}
+
+.member-name {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.member-role {
+  font-size: 1rem;
+  color: var(--primary-600);
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.member-bio {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+/* Ценности */
+.values-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.value-card {
+  background: var(--bg-secondary);
+  padding: 2.5rem 2rem;
+  border-radius: var(--radius-lg);
+  text-align: center;
+  border: 1px solid var(--border-light);
+  transition: all 0.3s ease;
+}
+
+.value-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--primary-300);
+}
+
+.value-icon {
+  font-size: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.value-card h3 {
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.value-card p {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+/* CTA секция */
+.cta-section {
+  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
+  color: var(--text-inverse);
+  padding: 5rem 0;
+}
+
+:global([data-theme="dark"]) .cta-section {
+  background: linear-gradient(135deg, #374151 0%, #111827 100%);
+}
+
+.cta-content {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.cta-title {
+  font-family: var(--font-heading);
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.cta-subtitle {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  margin-bottom: 2.5rem;
+  line-height: 1.6;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-large {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+
+/* Адаптивность */
+@media (max-width: 1024px) {
+  .hero-content {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    text-align: center;
+  }
+  
+  .about-content {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+  
+  .about-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .about-hero {
+    padding: 3rem 0;
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .about-section,
+  .team-section,
+  .values-section,
+  .cta-section {
+    padding: 3rem 0;
+  }
+  
+  .about-stats {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn-large {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.125rem;
+  }
+  
+  .section-title {
+    font-size: 1.75rem;
+  }
+  
+  .team-grid,
+  .values-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .image-placeholder {
+    height: 200px;
+  }
+}
+</style>
@@ -3,6 +3,12 @@ export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },

+    // Отключаем аналитику шрифтов
+  future: {
+    compatibilityVersion: 4
+  },
+  
+
  modules: [
    '@nuxt/image',
    '@nuxt/ui',
@@ -48,7 +54,11 @@ export default defineNuxtConfig({
  },

  nitro: {
-    preset: 'node-server'
+    preset: 'node-server',
+    prerender: {
+      // Игнорируем внешние URL при пререндере
+      crawlLinks: false
+    }
  },

  // Дополнительно в Vite