init

frontend/app/components/HeroSection.vue

@@ -0,0 +1,56 @@
+<template>
+  <section id="hero" class="hero-gradient min-h-screen flex items-center justify-center px-4 py-24">
+    <div class="max-w-4xl mx-auto text-center section-hidden" ref="sectionRef">
+      <div class="mb-6">
+        <UBadge color="primary" variant="soft" size="lg" class="mb-4">
+          Доступен для новых проектов
+        </UBadge>
+      </div>
+      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
+        Алексей<br>
+        <span class="text-indigo-400">Разработчик</span>
+      </h1>
+      <p class="text-xl md:text-2xl text-gray-400 mb-4 font-medium">
+        Fullstack Developer · NestJS · Nuxt 3 · TypeScript
+      </p>
+      <p class="text-lg text-gray-500 max-w-2xl mx-auto mb-10">
+        Создаю современные веб-приложения с чистым кодом и отличным UX.
+        От MVP до production-ready решений.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <UButton
+          size="xl"
+          color="primary"
+          icon="i-heroicons-paper-airplane"
+          @click="scrollTo('#contact')"
+        >
+          Связаться
+        </UButton>
+        <UButton
+          size="xl"
+          variant="ghost"
+          color="neutral"
+          icon="i-heroicons-code-bracket"
+          @click="scrollTo('#projects')"
+        >
+          Проекты
+        </UButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const sectionRef = ref<HTMLElement | null>(null);
+
+function scrollTo(selector: string) {
+  document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth' });
+}
+
+onMounted(() => {
+  if (sectionRef.value) {
+    sectionRef.value.classList.remove('section-hidden');
+    sectionRef.value.classList.add('section-visible');
+  }
+});
+</script>