feat: BLACK HEART DANCE HOUSE landing page

Landing page with Hero, About, Team, Classes, and Contact sections.
Light/dark mode, scroll reveal animations, Yandex Maps, responsive design.
Next.js 16 + Tailwind v4 + TypeScript.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/styles/animations.css

@@ -0,0 +1,76 @@
+/* ===== Keyframes ===== */
+
+@keyframes hero-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hero-fade-in-scale {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ===== Hero Entrance ===== */
+
+.hero-logo {
+  opacity: 0;
+  animation: hero-fade-in-scale 1s ease-out 0.1s forwards;
+}
+
+.hero-title {
+  opacity: 0;
+  animation: hero-fade-in-up 0.8s ease-out 0.4s forwards;
+}
+
+.hero-subtitle {
+  opacity: 0;
+  animation: hero-fade-in-up 0.8s ease-out 0.7s forwards;
+}
+
+.hero-cta {
+  opacity: 0;
+  animation: hero-fade-in-up 0.8s ease-out 1s forwards;
+}
+
+/* ===== Scroll Reveal ===== */
+
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ===== Reduced Motion ===== */
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-logo,
+  .hero-title,
+  .hero-subtitle,
+  .hero-cta {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+    transition: none !important;
+  }
+}

src/app/styles/components.css

@@ -0,0 +1,59 @@
+/* ===== Navigation ===== */
+
+.nav-link {
+  @apply text-sm font-medium text-neutral-600 transition-colors duration-200;
+  @apply hover:text-neutral-900;
+  @apply dark:text-neutral-400 dark:hover:text-white;
+}
+
+.social-icon {
+  @apply text-neutral-500 transition-colors duration-200;
+  @apply hover:text-neutral-900;
+  @apply dark:text-neutral-400 dark:hover:text-white;
+}
+
+/* ===== Cards ===== */
+
+.card {
+  @apply rounded-2xl border p-6 transition-all duration-200 cursor-pointer;
+  @apply border-neutral-200 bg-neutral-50;
+  @apply hover:border-neutral-400 hover:shadow-lg;
+  @apply dark:border-neutral-800 dark:bg-neutral-900;
+  @apply dark:hover:border-neutral-600;
+}
+
+/* ===== Buttons ===== */
+
+.btn-primary {
+  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
+  @apply bg-neutral-900 text-white;
+  @apply hover:bg-neutral-700;
+  @apply dark:bg-white dark:text-neutral-900;
+  @apply dark:hover:bg-neutral-200;
+}
+
+.btn-outline {
+  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
+  @apply border border-neutral-900 text-neutral-900;
+  @apply hover:bg-neutral-900 hover:text-white;
+  @apply dark:border-white dark:text-white;
+  @apply dark:hover:bg-white dark:hover:text-neutral-900;
+}
+
+.btn-ghost {
+  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
+  @apply text-neutral-600;
+  @apply hover:text-neutral-900;
+  @apply dark:text-neutral-400 dark:hover:text-white;
+}
+
+/* ===== Contact ===== */
+
+.contact-item {
+  @apply flex items-center gap-4;
+}
+
+.contact-icon {
+  @apply shrink-0 text-neutral-900;
+  @apply dark:text-neutral-50;
+}

src/app/styles/theme.css

@@ -0,0 +1,50 @@
+/* ===== Surfaces ===== */
+
+.surface-base {
+  @apply bg-white text-neutral-900;
+  @apply dark:bg-neutral-950 dark:text-neutral-50;
+}
+
+.surface-muted {
+  @apply bg-neutral-100;
+  @apply dark:bg-neutral-900;
+}
+
+.surface-glass {
+  @apply bg-white/80 backdrop-blur-md;
+  @apply dark:bg-neutral-950/80;
+}
+
+/* ===== Borders ===== */
+
+.theme-border {
+  @apply border-neutral-200;
+  @apply dark:border-neutral-800;
+}
+
+/* ===== Text ===== */
+
+.heading-text {
+  @apply text-neutral-900;
+  @apply dark:text-neutral-50;
+}
+
+.body-text {
+  @apply text-neutral-600;
+  @apply dark:text-neutral-400;
+}
+
+.muted-text {
+  @apply text-neutral-500;
+  @apply dark:text-neutral-400;
+}
+
+/* ===== Layout ===== */
+
+.section-padding {
+  @apply py-24 sm:py-32;
+}
+
+.section-container {
+  @apply mx-auto max-w-6xl px-6 sm:px-8;
+}