Пре альфа макета сайта v2

src/App.vue

@@ -3,18 +3,23 @@
     <SiteHeader />
     <main class="container">
       <TariffCards />
+      <MarqueeBar />
       <PriceTable />
       <ServicesGrid />
-      <Footer />
+      <AdvantagesSection />
+      
     </main>
+    <Footer />
   </div>
 </template>
 
 <script setup>
 import SiteHeader from './components/SiteHeader.vue'
 import TariffCards from './components/TariffCards.vue'
+import MarqueeBar from './components/MarqueeBar.vue'
 import PriceTable from './components/PriceTable.vue'
 import ServicesGrid from './components/ServicesGrid.vue'
+import AdvantagesSection from './components/AdvantagesSection.vue'
 import Footer from './components/Footer.vue'
 </script>
 

src/components/AdvantagesSection.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="advantages">
+    <h2 class="section-title">
+      Преимущества аутсорсинга бухгалтерии «Моё дело»
+    </h2>
+
+    <div class="grid">
+      <div class="card" v-for="item in items" :key="item.title">
+        <div class="icon">
+          <component :is="item.icon" />
+        </div>
+
+        <h3 class="card-title">{{ item.title }}</h3>
+
+        <div class="divider"></div>
+
+        <p class="text">{{ item.text }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const CoinIcon = {
+  template: `
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="white">
+      <circle cx="12" cy="12" r="8"/>
+    </svg>`
+}
+
+const FlashIcon = {
+  template: `
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="white">
+      <polygon points="13 2 3 14 11 14 9 22 21 8 13 8"/>
+    </svg>`
+}
+
+const UsersIcon = {
+  template: `
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="white">
+      <circle cx="8" cy="10" r="3"/>
+      <circle cx="16" cy="10" r="3"/>
+      <rect x="5" y="14" width="14" height="4"/>
+    </svg>`
+}
+
+const ChatIcon = {
+  template: `
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="white">
+      <rect x="3" y="4" width="18" height="12" rx="2"/>
+      <polygon points="8,16 10,20 14,16"/>
+    </svg>`
+}
+
+const items = [
+  {
+    title: "Предоставляем финансовые гарантии",
+    text: "Наша ответственность застрахована на 100 млн ₽. Если по нашей вине возникнут убытки, мы их компенсируем. Ваша безопасность — наш приоритет.",
+    icon: CoinIcon
+  },
+  {
+    title: "Прозрачное ценообразование",
+    text: "Вы платите только за те услуги, которые вам действительно нужны. Мы не навязываем лишнее и можем оказать услуги единоразово.",
+    icon: FlashIcon
+  },
+  {
+    title: "Подбираем экспертов под ваш бизнес",
+    text: "Учитываем специфику вашей сферы и подбираем бухгалтеров с нужной квалификацией. Повышаем навыки сотрудников регулярно.",
+    icon: UsersIcon
+  },
+  {
+    title: "Мы рядом",
+    text: "Берём на себя всю рутину и сложные задачи. Всегда на связи в чате или по телефону — решаем вопросы оперативно.",
+    icon: ChatIcon
+  }
+]
+</script>
+
+<style scoped>
+.advantages {
+  margin-top: 100px;
+}
+
+.section-title {
+  font-size: 40px;
+  margin-bottom: 50px;
+  font-weight: 700;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
+}
+
+.card {
+  background: #f3f3f3;
+  padding: 50px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  background: #ff4d2f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  margin-bottom: 30px;
+}
+
+.card-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.divider {
+  height: 1px;
+  background: #ddd;
+  margin-bottom: 20px;
+}
+
+.text {
+  font-size: 16px;
+  line-height: 1.6;
+}
+</style>

src/components/MarqueeBar.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="marquee">
+    <div class="track">
+      <div class="content">
+        <template v-for="(word, index) in words" :key="index">
+          <span class="word">{{ word }}</span>
+          <span class="divider"></span>
+        </template>
+      </div>
+
+      <!-- дублируем для бесконечной анимации -->
+      <div class="content">
+        <template v-for="(word, index) in words" :key="'dup-' + index">
+          <span class="word">{{ word }}</span>
+          <span class="divider"></span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const words = [
+  "Бухгалтерия",
+  "Налоги",
+  "Отчётность",
+  "Аутсорсинг",
+  "Оптимизация",
+  "Консультации",
+  "Финансы",
+  "Контроль",
+  "Поддержка",
+  "Экспертиза"
+]
+</script>
+
+<style scoped>
+.marquee {
+  width: 100%;
+  background: #000;
+  overflow: hidden;
+  padding: 18px 0;
+}
+
+.track {
+  display: flex;
+  width: max-content;
+  animation: scroll 25s linear infinite;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.word {
+  color: #fff;
+  font-size: 18px;
+  margin: 0 20px;
+  white-space: nowrap;
+}
+
+.divider {
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  display: inline-block;
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+</style>