Новые правки на сайте

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.nvmrc

@@ -0,0 +1 @@
+20

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

AGENTS.md

@@ -0,0 +1,188 @@
+# Правила взаимодействия с Агентом
+
+## Основные принципы
+
+1. **Изменения в коде возможны только с явного разрешения пользователя**
+    - Перед внесением любых изменений в файлы ассистент должен получить подтверждение от пользователя
+    - Все изменения должны быть предварительно объяснены пользователю
+    - Перед решением конкретной задачи всегда составлять план
+    - После внесения изменений в код - проводить проверку - только после этого приступать к дальнейшему решению задачи
+    - **НЕ производить сборку проекта (`bun run build`) без явного разрешения пользователя**
+
+2. **Прозрачность действий**
+    - Ассистент должен объяснить, какие изменения планируется внести
+    - Необходимо указать, в какие файлы будут внесены изменения
+    - Следует объяснить последствия предполагаемых изменений
+    - Внимательно читай промпт и не выходи за рамки описанных в нем измнений 
+
+3. **Безопасность кода**
+    - Все изменения должны проходить проверку на безопасность
+    - Не должны вноситься изменения, которые могут повредить функциональность приложения
+    - Рекомендуется создание резервных копий при значительных изменениях
+
+4. **Согласование архитектурных решений**
+    - При внесении изменений, затрагивающих архитектуру приложения, необходима дискуссия с пользователем
+    - Предложения по улучшению архитектуры должны обсуждаться до реализации
+
+5. **Работа с разными типами проектов**
+    - Уважать существующую архитектуру и стиль кода проекта
+    - Следовать установленным в проекте принципам и паттернам
+
+6. **Использование Bun**
+    - Все команды должны выполняться с использованием Bun (bun install, bun dev, bun build и т.д.)
+    - При создании скриптов в package.json, они должны быть совместимы с Bun
+
+7. **Язык общения**
+    - Всё общение с пользователем происходит на русском языке
+
+8  **Проверка типов данных**
+    - Проверять проект на ошибки типизации через команду `bun run tsc --noEmit -p frontend/tsconfig.json`
+    - НЕ производить сборку проекта (`bun run build`) без явного разрешения пользователя
+    - В проекте не должно быть типов any
+    - Все интерфейсы компонентов прописывать в файле globalInterfaces.ts
+    - При работе с PocketBase использовать актуальные сигнатуры методов из файла `D:\Verstka\production\astro_minivan\frontend\node_modules\pocketbase\dist\pocketbase.es.d.ts`
+
+9  **Плагин  @astrojs/sitemap**
+    - Обязательно к установке в проект пакета @astrojs/sitemap
+    - Обязательно к созданию в проекте файл .nvmrc
+
+
+## Технические правила (Astro)
+
+1. **Structure проекта**
+   - Использовать рекомендуемую структуру Astro: src/components/, src/layouts/, src/pages/, src/styles/
+   - Файлы конфигурации: astro.config.mjs
+
+2. **Разработка компонентов**
+   - Создавать .astro файлы для компонентов
+   - Использовать framework-specific компоненты (React, Vue, Svelte) при необходимости
+   - Использовать props для передачи данных
+   - Использовать встроенные компоненты Astro (<Markdown /> и т.д.)
+
+3. **Роутинг и страницы**
+   - Использовать file-based routing в src/pages/
+   - Реализовывать динамические маршруты через [...slug].astro синтаксис
+   - Использовать getStaticPaths() для генерации статических страниц
+   - Создать страницу 404.astro для обработки ошибок
+
+4. **Контент**
+   - Использовать Markdown (.md) или MDX (.mdx) для контентных страниц
+   - Использовать frontmatter в Markdown файлах
+   - Использовать content collections для организации контента
+
+5. **Стилизация**
+   - Использовать scoped styling с <style> тегами в .astro файлах
+   - Использовать Tailwind CSS с интеграцией @astrojs/tailwind
+   - Использовать Tailwind утилитарные классы
+   - Использовать responsive дизайн (sm:, md:, lg: и т.д.)
+   - НИКОГДА не использовать директиву @apply
+
+6. **Оптимизация производительности**
+   - Минимизировать client-side JavaScript
+   - Использовать client:* директивы для partial hydration:
+     - client:load для immediately needed interactivity
+     - client:idle для non-critical interactivity
+     - client:visible для components that should hydrate when visible
+   - Использовать lazy loading для изображений
+   - Использовать Astro Image component
+
+7. **Data Fetching**
+   - Использовать Astro.props для передачи данных
+   - Использовать getStaticPaths() для fetching данных на этапе сборки
+   - Использовать Astro.glob() для работы с локальными файлами
+
+8. **SEO и Meta теги**
+   - Использовать <head> тег для добавления meta информации
+   - Реализовать canonical URLs
+   - Использовать <SEO> компонент для reusable SEO
+
+9. **Accessibility**
+   - Использовать семантический HTML
+   - Использовать ARIA атрибуты где необходимо
+   - Обеспечить keyboard navigation поддержку
+
+10. **Тестирование**
+    - Реализовать unit тесты для utility функций
+    - Использовать end-to-end тестирование (Cypress)
+    - Реализовать visual regression тестирование если применимо
+
+11. **Метрики производительности**
+    - Приоритизировать Core Web Vitals (LCP, FID, CLS)
+    - Использовать Lighthouse и WebPageTest для аудита производительности
+    - Реализовать performance budgets
+
+## SEO рекомендации
+
+### Оптимальное количество страниц
+- **50-100 страниц** — хороший объём для тематики "автоюрист"
+- Минимум 30-50 страниц с уникальным контентом
+
+### Структура страниц
+- Услуги (12 шт) — уже есть
+- Кейсы — минимум 20-30 реальных примеров
+- Блог — минимум 30-50 статей
+- FAQ — 20-30 вопросов
+- Городские страницы ("юрист в Сургуте", "возврат прав Сургут" и пр.)
+
+### Требования к контенту
+- Каждая страница с уникальным текстом (не шаблон)
+- Длинные статьи в блог (3000-5000 слов)
+- Реальные кейсы с описанием проблемы и решения
+
+### Внутренние ссылки
+- Связывать страницы между собой (услуги → кейсы → блог)
+- Использовать sitemap для всех публичных страниц
+
+
+## Ccылки на документацию
+- URL документации Astro: https://docs.astro.build/en/getting-started/
+- URL документации PocketBase: https://pocketbase.io/docs/
+- URL документации SolidJS: https://docs.solidjs.com/solid-start/getting-started
+- URL документации astro-icons: https://www.astroicon.dev/getting-started/
+
+
+## Переменные окружения для Production (Coolify)
+
+### PocketBase
+```
+PB_POCKETBASE_URL=https://avt-back.ru
+PB_ADMIN_EMAIL=redibedi2019@gmail.com
+PB_ADMIN_PASSWORD=Stalin4444
+```
+PB_POCKETBASE_URL=https://avt-back.ru
+PB_ADMIN_EMAIL=redibedi2019@gmail.com
+PB_ADMIN_PASSWORD=Stalin4444
+```
+
+### SMTP (Resend)
+```
+SMTP_HOST=smtp.resend.com
+SMTP_PORT=465
+SMTP_AUTH_USER=resend
+SMTP_AUTH_PASS=re_bAXEq3JU_3ezUi6XvBci7Biz48eAavW4M
+FROM_EMAIL=onboarding@resend.onlinemail.me
+FROM_NAME=Автоюрист Сургут
+```
+
+### Site
+```
+SITE_URL=https://avtourist-surgut.ru
+```
+
+### Флаг production
+```
+PROD=true
+```
+
+### Как добавить в Coolify
+
+1. Откройте Coolify → ваш проект
+2. Перейдите App Settings → Environment Variables
+3. Добавьте каждую переменную
+4. Перезапустите контейнер
+
+
+### SKILLS FOR AI
+1. C:\Users\Serg\.config\opencode\skills - общие скилы для всех проектов
+2. project/.opencode/skills/avtourist - скилы для конкретного проекта
+3. answer-unit-optimization - скилы для AI SEO

astro.config.mjs

@@ -0,0 +1,12 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import node from '@astrojs/node';
+
+export default defineConfig({
+  output: 'server',
+  adapter: node({
+    mode: 'standalone',
+  }),
+  integrations: [tailwind()],
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "astro_service",
+  "version": "0.0.1",
+  "dependencies": {
+    "astro": "^6.3.1",
+    "tailwindcss": "3"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@astrojs/tailwind": "^6.0.2",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.14"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/assets/astro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

src/assets/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

src/components/AboutUs.astro

@@ -0,0 +1,53 @@
+---
+---
+
+<section id="О нас" class="py-24 bg-[#1a1a1a] text-white overflow-hidden relative">
+  <div class="absolute top-0 right-0 w-1/3 h-full opacity-10 pointer-events-none">
+    <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#E51937_0%,transparent_70%)]" />
+  </div>
+
+  <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
+    <div class="relative">
+      <div class="relative rounded-[2.5rem] overflow-hidden">
+        <img 
+          src="/images/services_room.avif" 
+          alt="Мастерская" 
+          class="w-full h-[500px] object-cover"
+        />
+        <div class="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] via-transparent to-transparent" />
+      </div>
+      <div class="absolute -bottom-8 -right-8 glass-panel bg-[#E51937] p-8 rounded-3xl text-white">
+        <div class="text-4xl font-bold mb-1">15+</div>
+        <div class="text-xs uppercase tracking-widest font-bold opacity-80">Лет опыта</div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-4xl md:text-5xl font-bold mb-8 italic">Мастерство, проверенное временем</h2>
+      <p class="text-gray-300 mb-6 font-light leading-relaxed">
+        Наш сервисный центр специализируется на автомобилях Toyota и Lexus уже более 15 лет. Мы знаем каждую особенность этих марок, что позволяет нам проводить диагностику и ремонт с заводской точностью.
+      </p>
+      <p class="text-gray-300 mb-8 font-light leading-relaxed">
+        Мы используем только сертифицированное оборудование и оригинальное программное обеспечение для диагностики. Каждый клиент получает прозрачный отчет о состоянии автомобиля и честную оценку стоимости работ.
+      </p>
+      <ul class="space-y-4">
+        {[
+          "Сертифицированные технические специалисты",
+          "Собственный склад запчастей",
+          "Прозрачное ценообразование",
+          "Индивидуальный подход к каждому владельцу"
+        ].map((item, i) => (
+          <li class="flex items-center gap-3 text-sm font-medium">
+            <div class="w-5 h-5 rounded-full bg-[#E51937] flex items-center justify-center shrink-0">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                <polyline points="22 4 12 14.01 9 11.01"/>
+              </svg>
+            </div>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</section>

src/components/ContactForm.astro

@@ -0,0 +1,79 @@
+---
+---
+
+<section id="Контакты" class="py-24 bg-white relative overflow-hidden">
+  <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
+    <div>
+      <h2 class="text-4xl md:text-5xl font-bold mb-8">Ждем вас в нашем сервисе</h2>
+      <div class="space-y-8">
+        <div class="flex gap-4">
+          <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
+              <circle cx="12" cy="10" r="3"/>
+            </svg>
+          </div>
+          <div>
+            <h4 class="font-bold text-lg mb-1">Адрес</h4>
+            <p class="text-gray-600">г. Сургут, ул. Профсоюзов, 45 (Пример)</p>
+          </div>
+        </div>
+        <div class="flex gap-4">
+          <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+            </svg>
+          </div>
+          <div>
+            <h4 class="font-bold text-lg mb-1">Телефон</h4>
+            <p class="text-gray-600">+7 (3462) 00-00-00</p>
+            <p class="text-gray-600">+7 (900) 000-00-00</p>
+          </div>
+        </div>
+        <div class="flex gap-4">
+          <div class="w-12 h-12 bg-red-50 text-[#E51937] rounded-full flex items-center justify-center shrink-0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <polyline points="12 6 12 12 16 14"/>
+            </svg>
+          </div>
+          <div>
+            <h4 class="font-bold text-lg mb-1">Режим работы</h4>
+            <p class="text-gray-600">Ежедневно: 09:00 – 20:00</p>
+            <p class="text-gray-400 text-sm">Без перерывов и выходных</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="glass-panel rounded-[2rem] p-8 md:p-12 relative">
+      <div class="absolute -top-4 -right-4 w-24 h-24 bg-[#E51937]/10 rounded-full blur-2xl" />
+      <h3 class="text-2xl font-bold mb-6">Остались вопросы?</h3>
+      <p class="text-gray-500 mb-8 font-light">Оставьте ваши контакты, и мы перезвоним вам в течение 15 минут для консультации.</p>
+      
+      <form class="space-y-4" onsubmit="event.preventDefault()">
+        <input 
+          type="text" 
+          placeholder="Ваше имя" 
+          class="w-full bg-gray-50 border-none rounded-xl px-5 py-4 focus:ring-2 focus:ring-[#E51937] transition-all"
+        />
+        <input 
+          type="tel" 
+          placeholder="Номер телефона" 
+          class="w-full bg-gray-50 border-none rounded-xl px-5 py-4 focus:ring-2 focus:ring-[#E51937] transition-all"
+        />
+        <button class="w-full bg-[#E51937] text-white py-4 rounded-xl font-bold text-lg hover:bg-red-700 transition-all shadow-lg shadow-red-600/20">
+          Заказать консультацию
+        </button>
+      </form>
+      
+      <div class="mt-8 pt-8 border-t border-gray-100 flex items-center gap-2 text-xs text-green-600 font-bold uppercase tracking-widest">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+          <polyline points="22 4 12 14.01 9 11.01"/>
+        </svg>
+        Мы онлайн и готовы помочь
+      </div>
+    </div>
+  </div>
+</section>

src/components/Features.astro

@@ -0,0 +1,33 @@
+---
+const features = [
+  {
+    title: "Опытные мастера",
+    description: "Все наши специалисты прошли сертификацию и имеют огромный опыт работы именно с марками Toyota и Lexus.",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`
+  },
+  {
+    title: "Быстрый ремонт",
+    description: "У нас в наличии большинство расходных материалов и запчастей, что позволяет выполнять работы в кратчайшие сроки.",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`
+  },
+  {
+    title: "Гарантия качества",
+    description: "Предоставляем официальную гарантию на все выполненные работы и установленные запасные части.",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>`
+  }
+];
+---
+
+<section id="Преимущества" class="py-24 bg-white">
+  <div class="max-w-7xl mx-auto px-6">
+    <div class="grid md:grid-cols-3 gap-12">
+      {features.map((f, i) => (
+        <div class="flex flex-col items-center text-center p-8 rounded-3xl hover:bg-gray-50 transition-colors">
+          <div class="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center mb-6 text-[#E51937]" set:html={f.icon} />
+          <h3 class="text-xl font-bold mb-4">{f.title}</h3>
+          <p class="text-gray-600 leading-relaxed font-light">{f.description}</p>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>

src/components/Footer.astro

@@ -0,0 +1,48 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="bg-[#1a1a1a] text-white py-16">
+  <div class="max-w-7xl mx-auto px-6">
+    <div class="grid md:grid-cols-4 gap-12 mb-12">
+      <div class="col-span-2">
+        <div class="flex items-center gap-2 mb-6">
+          <div class="w-8 h-8 bg-[#E51937] rounded flex items-center justify-center text-white font-bold">
+            TL
+          </div>
+          <span class="font-bold text-xl tracking-tight text-white uppercase italic">TOYOTA LEXUS СЕРВИС</span>
+        </div>
+        <p class="text-gray-400 max-w-sm font-light leading-relaxed">
+          Профессиональный автосервис в Сургуте. Мы специализируемся на японских автомобилях премиум-класса, обеспечивая бескомпромиссное качество обслуживания.
+        </p>
+      </div>
+      <div>
+        <h5 class="font-bold mb-6 text-sm uppercase tracking-widest">Ссылки</h5>
+        <ul class="space-y-3 text-gray-400 text-sm">
+          <li><a href="#" class="hover:text-white transition-colors">Главная</a></li>
+          <li><a href="#Услуги" class="hover:text-white transition-colors">Услуги</a></li>
+          <li><a href="#О нас" class="hover:text-white transition-colors">О сервисе</a></li>
+          <li><a href="#Контакты" class="hover:text-white transition-colors">Записаться</a></li>
+        </ul>
+      </div>
+      <div>
+        <h5 class="font-bold mb-6 text-sm uppercase tracking-widest">Соцсети</h5>
+        <div class="flex gap-4">
+          <div class="w-10 h-10 border border-white/10 rounded-full flex items-center justify-center hover:bg-white hover:text-[#1a1a1a] transition-all cursor-pointer">
+            <span class="text-xs font-bold">VK</span>
+          </div>
+          <div class="w-10 h-10 border border-white/10 rounded-full flex items-center justify-center hover:bg-white hover:text-[#1a1a1a] transition-all cursor-pointer">
+            <span class="text-xs font-bold">TG</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between gap-6 text-gray-500 text-xs">
+      <span>&copy; {currentYear} TOYOTA & LEXUS СЕРВИС СУРГУТ. Все права защищены.</span>
+      <div class="flex gap-6">
+        <a href="#" class="hover:text-white transition-colors">Политика конфиденциальности</a>
+        <a href="#" class="hover:text-white transition-colors">Оферта</a>
+      </div>
+    </div>
+  </div>
+</footer>

src/components/Hero.astro

@@ -0,0 +1,42 @@
+---
+---
+
+<section class="relative h-screen flex items-center overflow-hidden bg-[#1a1a1a]">
+  <div class="absolute inset-0 z-0">
+    <img 
+      src="/images/porch_car.avif" 
+      alt="Автомобиль" 
+      class="w-full h-full object-cover opacity-40"
+    />
+    <div class="absolute inset-0 bg-gradient-to-r from-[#1a1a1a] via-[#1a1a1a]/60 to-transparent" />
+  </div>
+
+  <div class="relative z-10 max-w-7xl mx-auto px-6 w-full">
+    <div class="max-w-2xl animate-fade-in-up">
+      <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/10 backdrop-blur-md rounded-full text-[#E51937] text-xs font-bold uppercase tracking-widest mb-6">
+        <span class="w-2 h-2 rounded-full bg-[#E51937] animate-pulse-dot" />
+        Специализированный центр в Сургуте
+      </div>
+      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-[1.1]">
+        Обслуживание & Ремонт<br/>
+        <span class="text-[#E51937]">Toyota & Lexus</span>
+      </h1>
+      <p class="text-lg md:text-xl text-gray-300 mb-10 font-light">
+        Опытные специалисты, современное оборудование и только качественные запчасти. Ваш автомобиль в надежных руках профессионалов.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4">
+        <button class="bg-[#E51937] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-red-700 transition-all transform hover:scale-105 shadow-xl shadow-red-600/20">
+          Записаться на сервис
+        </button>
+        <a href="#Услуги" class="bg-white/10 backdrop-blur-md text-white border border-white/20 px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/20 transition-all text-center">
+          Посмотреть услуги
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/50 text-xs uppercase tracking-widest">
+    <span>Листайте ниже</span>
+    <div class="w-1 h-8 bg-gradient-to-b from-[#E51937] to-transparent rounded-full animate-scroll" />
+  </div>
+</section>

src/components/Navbar.astro

@@ -0,0 +1,126 @@
+---
+const navItems = ['Услуги', 'О нас', 'Преимущества', 'Контакты'];
+---
+
+<nav id="navbar" class="fixed top-0 w-full z-50 transition-all duration-300 bg-transparent py-5">
+  <div class="max-w-7xl mx-auto px-6 flex justify-between items-center">
+    <div class="flex items-center gap-2">
+      <div class="w-10 h-10 bg-[#E51937] rounded-lg flex items-center justify-center text-white font-bold text-xl">
+        TL
+      </div>
+      <div class="flex flex-col leading-none">
+        <span id="logo-text" class="font-bold text-lg tracking-tight text-white">TOYOTA LEXUS</span>
+        <span id="logo-sub" class="text-xs uppercase tracking-[0.2em] font-medium text-gray-300">Сервис Сургут</span>
+      </div>
+    </div>
+
+    <div id="desktop-nav" class="hidden md:flex items-center gap-8">
+      {navItems.map((item) => (
+        <a href={`#${item}`} class="nav-link text-sm font-medium hover:text-[#E51937] transition-colors text-white">
+          {item}
+        </a>
+      ))}
+      <a href="tel:+73462000000" class="flex items-center gap-2 bg-[#E51937] text-white px-5 py-2.5 rounded-full text-sm font-semibold hover:bg-red-700 transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+        </svg>
+        +7 (3462) 00-00-00
+      </a>
+    </div>
+
+    <button id="menu-btn" class="md:hidden text-white">
+      <svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="4" x2="20" y1="12" y2="12"/>
+        <line x1="4" x2="20" y1="6" y2="6"/>
+        <line x1="4" x2="20" y1="18" y2="18"/>
+      </svg>
+    </button>
+  </div>
+</nav>
+
+<div id="mobile-menu" class="fixed inset-0 bg-[#1a1a1a] z-[100] p-8 flex flex-col translate-x-full transition-transform duration-300">
+  <div class="flex justify-between items-center mb-12">
+    <span class="text-white font-bold text-xl">МЕНЮ</span>
+    <button id="close-menu" class="text-white">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+      </svg>
+    </button>
+  </div>
+  <div class="flex flex-col gap-6">
+    {navItems.map((item) => (
+      <a href={`#${item}`} class="mobile-nav-link text-white text-3xl font-light hover:text-[#E51937] transition-colors">
+        {item}
+      </a>
+    ))}
+  </div>
+  <div class="mt-auto">
+    <a href="tel:+73462000000" class="flex items-center justify-center gap-2 bg-[#E51937] text-white py-4 rounded-xl text-lg font-semibold">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+      </svg>
+      +7 (3462) 00-00-00
+    </a>
+  </div>
+</div>
+
+<script>
+  const navbar = document.getElementById('navbar')!;
+  const logoText = document.getElementById('logo-text')!;
+  const logoSub = document.getElementById('logo-sub')!;
+  const desktopNav = document.getElementById('desktop-nav')!;
+  const navLinks = desktopNav.querySelectorAll('.nav-link');
+  const menuBtn = document.getElementById('menu-btn')!;
+  const mobileMenu = document.getElementById('mobile-menu')!;
+  const closeMenu = document.getElementById('close-menu')!;
+  const mobileNavLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
+
+  let isScrolled = false;
+
+  window.addEventListener('scroll', () => {
+    const scrolled = window.scrollY > 20;
+    if (scrolled !== isScrolled) {
+      isScrolled = scrolled;
+      if (isScrolled) {
+        navbar.classList.remove('bg-transparent', 'py-5');
+        navbar.classList.add('bg-white/90', 'backdrop-blur-md', 'shadow-sm', 'py-3');
+        logoText.classList.remove('text-white');
+        logoText.classList.add('text-[#1a1a1a]');
+        logoSub.classList.remove('text-gray-300');
+        logoSub.classList.add('text-gray-500');
+        navLinks.forEach(link => {
+          link.classList.remove('text-white');
+          link.classList.add('text-[#1a1a1a]');
+        });
+        menuBtn.classList.remove('text-white');
+        menuBtn.classList.add('text-[#1a1a1a]');
+      } else {
+        navbar.classList.add('bg-transparent', 'py-5');
+        navbar.classList.remove('bg-white/90', 'backdrop-blur-md', 'shadow-sm', 'py-3');
+        logoText.classList.add('text-white');
+        logoText.classList.remove('text-[#1a1a1a]');
+        logoSub.classList.add('text-gray-300');
+        logoSub.classList.remove('text-gray-500');
+        navLinks.forEach(link => {
+          link.classList.add('text-white');
+          link.classList.remove('text-[#1a1a1a]');
+        });
+        menuBtn.classList.add('text-white');
+        menuBtn.classList.remove('text-[#1a1a1a]');
+      }
+    }
+  });
+
+  menuBtn.addEventListener('click', () => {
+    mobileMenu.classList.remove('translate-x-full');
+    document.body.style.overflow = 'hidden';
+  });
+
+  closeMenu.addEventListener('click', closeMobileMenu);
+  mobileNavLinks.forEach(link => link.addEventListener('click', closeMobileMenu));
+
+  function closeMobileMenu() {
+    mobileMenu.classList.add('translate-x-full');
+    document.body.style.overflow = '';
+  }
+</script>

src/components/Services.astro

@@ -0,0 +1,59 @@
+---
+const services = [
+  {
+    title: "Техническое обслуживание",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 22h18"/><path d="M12 17v-4"/><path d="M8 17V9"/><path d="M16 17V5"/><path d="M3 2h18"/><path d="M8 7l4-5 4 5"/></svg>`,
+    desc: "Замена масла, фильтров, проверка жидкостей"
+  },
+  {
+    title: "Диагностика систем",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
+    desc: "Компьютерная диагностика, поиск неисправностей"
+  },
+  {
+    title: "Ремонт двигателя",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`,
+    desc: "Капитальный ремонт, обслуживание ГРМ"
+  },
+  {
+    title: "Ходовая часть",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>`,
+    desc: "Ремонт подвески, тормозной системы, развал-схождение"
+  },
+  {
+    title: "Электрооборудование",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>`,
+    desc: "Ремонт проводки, установка доп. оборудования"
+  },
+  {
+    title: "Кузовной ремонт",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></svg>`,
+    desc: "Покраска, выравнивание, полировка"
+  }
+];
+---
+
+<section id="Услуги" class="py-24 bg-gray-50">
+  <div class="max-w-7xl mx-auto px-6 text-center">
+    <div class="mb-16">
+      <h2 class="text-4xl md:text-5xl font-bold mb-4">Наши Услуги</h2>
+      <p class="text-gray-500 max-w-xl mx-auto">Полный спектр работ для поддержания вашего автомобиля в идеальном состоянии</p>
+    </div>
+
+    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {services.map((service, i) => (
+        <div class="bg-white p-8 rounded-3xl border border-gray-100 flex flex-col items-start text-left group transition-all hover:shadow-xl hover:-translate-y-1">
+          <div class="w-12 h-12 bg-[#1a1a1a] text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-[#E51937] transition-colors" set:html={service.icon} />
+          <h4 class="text-xl font-bold mb-2">{service.title}</h4>
+          <p class="text-gray-500 text-sm mb-6 flex-grow">{service.desc}</p>
+          <button class="flex items-center gap-1 text-[#E51937] text-sm font-bold uppercase tracking-wider">
+            Подробнее
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m9 18 6-6-6-6"/>
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>

src/layouts/Layout.astro

@@ -0,0 +1,20 @@
+---
+---
+
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Toyota & Lexus Service Сургут</title>
+    <meta name="description" content="Профессиональное обслуживание и ремонт автомобилей Toyota и Lexus в Сургуте" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  </head>
+  <body class="font-sans antialiased">
+    <slot />
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,20 @@
+---
+import Layout from '@layouts/Layout.astro';
+import Navbar from '@components/Navbar.astro';
+import Hero from '@components/Hero.astro';
+import Features from '@components/Features.astro';
+import Services from '@components/Services.astro';
+import AboutUs from '@components/AboutUs.astro';
+import ContactForm from '@components/ContactForm.astro';
+import Footer from '@components/Footer.astro';
+---
+
+<Layout>
+  <Navbar />
+  <Hero />
+  <Features />
+  <Services />
+  <AboutUs />
+  <ContactForm />
+  <Footer />
+</Layout>

src/styles/global.css

@@ -0,0 +1,68 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import "tailwindcss";
+
+:root {
+  --toyota-red: #E51937;
+  --toyota-red-dark: #b91c1a;
+  --lexus-dark: #1a1a1a;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: white;
+  color: #111827;
+  line-height: 1.5;
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scrollBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(8px); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.8s ease-out forwards;
+}
+
+.animate-scroll {
+  animation: scrollBounce 2s ease-in-out infinite;
+}
+
+.animate-pulse-dot {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+section[id] {
+  scroll-margin-top: 80px;
+}

tailwind.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {
+      colors: {
+        'toyota-red': '#E51937',
+        'toyota-red-dark': '#b91c1a',
+        'lexus-dark': '#1a1a1a',
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@layouts/*": ["src/layouts/*"],
+      "@styles/*": ["src/styles/*"],
+      "@lib/*": ["src/lib/*"]
+    }
+  }
+}