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>

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.gitignore

@@ -36,6 +36,9 @@ yarn-error.log*
 # vercel
 .vercel
 
+# claude
+.claude/
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}

package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
+    "lucide-react": "^0.576.0",
     "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3"
@@ -17,6 +19,10 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "^9.39.3",
+    "eslint-config-next": "^16.1.6",
+    "eslint-config-prettier": "^10.1.8",
+    "prettier": "^3.8.1",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/globals.css

@@ -1,26 +1,37 @@
 @import "tailwindcss";
+@import "./styles/theme.css";
+@import "./styles/components.css";
+@import "./styles/animations.css";
 
-:root {
+@custom-variant dark (&:where(.dark, .dark *));
-  --background: #ffffff;
-  --foreground: #171717;
-}
 
 @theme inline {
-  --color-background: var(--background);
+  --font-display: var(--font-oswald);
-  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
+/* ===== Base ===== */
-  :root {
+
-    --background: #0a0a0a;
+html {
-    --foreground: #ededed;
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
   }
 }
 
-body {
+/* ===== Focus ===== */
-  background: var(--background);
+
-  color: var(--foreground);
+:focus-visible {
-  font-family: Arial, Helvetica, sans-serif;
+  @apply outline-2 outline-offset-2 outline-neutral-900;
+  @apply dark:outline-white;
 }

src/app/layout.tsx

@@ -1,33 +1,57 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Oswald } from "next/font/google";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
+import { siteContent } from "@/data/content";
 import "./globals.css";
 
-const geistSans = Geist({
+const inter = Inter({
-  variable: "--font-geist-sans",
+  variable: "--font-inter",
-  subsets: ["latin"],
+  subsets: ["latin", "cyrillic"],
 });
 
-const geistMono = Geist_Mono({
+const oswald = Oswald({
-  variable: "--font-geist-mono",
+  variable: "--font-oswald",
-  subsets: ["latin"],
+  subsets: ["latin", "cyrillic"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: siteContent.meta.title,
-  description: "Generated by create next app",
+  description: siteContent.meta.description,
+  openGraph: {
+    title: "BLACK HEART DANCE HOUSE",
+    description: siteContent.meta.description,
+    locale: "ru_RU",
+    type: "website",
+  },
 };
 
+const themeScript = `
+  (function() {
+    var stored = localStorage.getItem('theme');
+    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (stored === 'dark' || (!stored && prefersDark)) {
+      document.documentElement.classList.add('dark');
+    }
+  })();
+`;
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="ru" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${oswald.variable} surface-base font-sans antialiased`}
       >
-        {children}
+        <Header />
+        <main className="pt-16">{children}</main>
+        <Footer />
       </body>
     </html>
   );

src/app/not-found.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@/components/ui/Button";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
+      <h1 className="font-display text-6xl font-bold">404</h1>
+      <p className="body-text mt-4 text-lg">Страница не найдена</p>
+      <div className="mt-8">
+        <Button href="/">На главную</Button>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,65 +1,17 @@
-import Image from "next/image";
+import { Hero } from "@/components/sections/Hero";
+import { Team } from "@/components/sections/Team";
+import { About } from "@/components/sections/About";
+import { Classes } from "@/components/sections/Classes";
+import { Contact } from "@/components/sections/Contact";
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <>
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <Hero />
-        <Image
+      <About />
-          className="dark:invert"
+      <Team />
-          src="/next.svg"
+      <Classes />
-          alt="Next.js logo"
+      <Contact />
-          width={100}
+    </>
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
   );
 }

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;
+}

src/components/layout/Footer.tsx

@@ -0,0 +1,18 @@
+import { BRAND } from "@/lib/constants";
+import { siteContent } from "@/data/content";
+import { SocialLinks } from "@/components/ui/SocialLinks";
+
+export function Footer() {
+  const { contact } = siteContent;
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="surface-muted theme-border border-t">
+      <div className="section-container flex flex-col items-center gap-4 py-8 sm:flex-row sm:justify-between">
+        <p className="muted-text text-sm">
+          &copy; {year} {BRAND.name}
+        </p>
+      </div>
+    </footer>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+import { BRAND, NAV_LINKS } from "@/lib/constants";
+import { ThemeToggle } from "@/components/ui/ThemeToggle";
+
+export function Header() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <header className="surface-glass theme-border fixed top-0 z-50 w-full border-b">
+      <div className="flex h-16 items-center justify-between px-6 sm:px-8">
+        <Link href="/" className="flex items-center gap-2">
+          <Image
+            src="/images/logo.png"
+            alt={BRAND.name}
+            width={32}
+            height={32}
+            className="dark:invert"
+          />
+          <span className="font-display text-lg font-bold tracking-tight">
+            {BRAND.shortName}
+          </span>
+        </Link>
+
+        <nav className="hidden items-center gap-8 md:flex">
+          {NAV_LINKS.map((link) => (
+            <a key={link.href} href={link.href} className="nav-link">
+              {link.label}
+            </a>
+          ))}
+          <ThemeToggle />
+        </nav>
+
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <button
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Меню"
+            className="body-text rounded-md p-2"
+          >
+            {menuOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        </div>
+      </div>
+
+      {menuOpen && (
+        <nav className="surface-base theme-border border-t px-6 py-4 sm:px-8 md:hidden">
+          {NAV_LINKS.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              onClick={() => setMenuOpen(false)}
+              className="nav-link block py-3"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </header>
+  );
+}

src/components/sections/About.tsx

@@ -0,0 +1,25 @@
+import { siteContent } from "@/data/content";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Reveal } from "@/components/ui/Reveal";
+
+export function About() {
+  const { about } = siteContent;
+
+  return (
+    <section id="about" className="surface-muted section-padding">
+      <div className="section-container">
+        <Reveal>
+          <SectionHeading>{about.title}</SectionHeading>
+        </Reveal>
+
+        <div className="mt-8 max-w-3xl space-y-4">
+          {about.paragraphs.map((text, i) => (
+            <Reveal key={i}>
+              <p className="body-text text-lg leading-relaxed">{text}</p>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/Classes.tsx

@@ -0,0 +1,37 @@
+import { Flame, Sparkles, Wind, Music } from "lucide-react";
+import { siteContent } from "@/data/content";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Reveal } from "@/components/ui/Reveal";
+
+const iconMap: Record<string, React.ReactNode> = {
+  flame: <Flame size={32} />,
+  sparkles: <Sparkles size={32} />,
+  wind: <Wind size={32} />,
+  music: <Music size={32} />,
+};
+
+export function Classes() {
+  const { classes } = siteContent;
+
+  return (
+    <section id="classes" className="surface-muted section-padding">
+      <div className="section-container">
+        <Reveal>
+          <SectionHeading>{classes.title}</SectionHeading>
+        </Reveal>
+
+        <div className="mt-12 grid gap-6 sm:grid-cols-2">
+          {classes.items.map((item) => (
+            <Reveal key={item.name}>
+              <div className="card">
+                <div className="heading-text">{iconMap[item.icon]}</div>
+                <h3 className="heading-text mt-4 text-xl font-semibold">{item.name}</h3>
+                <p className="body-text mt-2">{item.description}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/Contact.tsx

@@ -0,0 +1,71 @@
+import { MapPin, Phone, Mail, Clock, Instagram } from "lucide-react";
+import { siteContent } from "@/data/content";
+import { BRAND } from "@/lib/constants";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Reveal } from "@/components/ui/Reveal";
+
+export function Contact() {
+  const { contact } = siteContent;
+
+  return (
+    <section id="contact" className="surface-base section-padding">
+      <div className="section-container grid items-start gap-12 lg:grid-cols-2">
+        <Reveal>
+          <SectionHeading>{contact.title}</SectionHeading>
+
+          <div className="mt-12 space-y-6">
+            <div className="contact-item">
+              <MapPin size={20} className="contact-icon" />
+              <p className="body-text">{contact.address}</p>
+            </div>
+
+            <div className="contact-item">
+              <Phone size={20} className="contact-icon" />
+              <a href={`tel:${contact.phone}`} className="nav-link text-base">
+                {contact.phone}
+              </a>
+            </div>
+
+            <div className="contact-item">
+              <Mail size={20} className="contact-icon" />
+              <a href={`mailto:${contact.email}`} className="nav-link text-base">
+                {contact.email}
+              </a>
+            </div>
+
+            <div className="contact-item">
+              <Clock size={20} className="contact-icon" />
+              <p className="body-text">{contact.workingHours}</p>
+            </div>
+
+            <div className="theme-border contact-item border-t pt-6">
+              <Instagram size={20} className="contact-icon" />
+              <a
+                href={contact.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="nav-link text-base"
+              >
+                {BRAND.instagramHandle}
+              </a>
+            </div>
+          </div>
+        </Reveal>
+
+        <Reveal>
+          <div className="theme-border overflow-hidden rounded-2xl border">
+            <iframe
+              src={contact.mapEmbedUrl}
+              width="100%"
+              height="350"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              title="Карта"
+            />
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

src/components/sections/Hero.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import { siteContent } from "@/data/content";
+import { BRAND } from "@/lib/constants";
+import { Button } from "@/components/ui/Button";
+
+export function Hero() {
+  const { hero } = siteContent;
+
+  return (
+    <section className="surface-base section-container flex min-h-svh items-center justify-center">
+      <div className="text-center">
+        <Image
+          src="/images/logo.png"
+          alt={BRAND.name}
+          width={280}
+          height={280}
+          priority
+          className="hero-logo mx-auto mb-8 dark:invert"
+        />
+        <h1 className="hero-title font-display text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
+          {hero.headline}
+        </h1>
+        <p className="hero-subtitle body-text mx-auto mt-6 max-w-md text-lg sm:text-xl">
+          {hero.subheadline}
+        </p>
+        <div className="hero-cta mt-10">
+          <Button href={hero.ctaHref} size="lg">
+            {hero.ctaText}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/Team.tsx

@@ -0,0 +1,32 @@
+import { User } from "lucide-react";
+import { siteContent } from "@/data/content";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Reveal } from "@/components/ui/Reveal";
+
+export function Team() {
+  const { team } = siteContent;
+
+  return (
+    <section id="team" className="surface-base section-padding">
+      <div className="section-container">
+        <Reveal>
+          <SectionHeading>{team.title}</SectionHeading>
+        </Reveal>
+
+        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {team.members.map((member, i) => (
+            <Reveal key={i}>
+              <div className="card text-center">
+                <div className="mx-auto flex h-32 w-32 items-center justify-center overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
+                  <User size={48} className="muted-text" />
+                </div>
+                <h3 className="heading-text mt-4 text-lg font-semibold">{member.name}</h3>
+                <p className="muted-text mt-1 text-sm">{member.role}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ui/Button.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+
+interface ButtonProps {
+  href?: string;
+  variant?: "primary" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+const sizes = {
+  sm: "px-4 py-2 text-sm",
+  md: "px-6 py-3 text-base",
+  lg: "px-8 py-4 text-lg",
+};
+
+export function Button({
+  href,
+  variant = "primary",
+  size = "md",
+  children,
+  className = "",
+  onClick,
+}: ButtonProps) {
+  const classes = `btn-${variant} ${sizes[size]} ${className}`;
+
+  if (href) {
+    return (
+      <Link href={href} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className={classes}>
+      {children}
+    </button>
+  );
+}

src/components/ui/Reveal.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface RevealProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Reveal({ children, className = "" }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.1, rootMargin: "0px 0px -50px 0px" },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : "translateY(30px)",
+        transition: "opacity 0.7s ease-out, transform 0.7s ease-out",
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/SectionHeading.tsx

@@ -0,0 +1,15 @@
+interface SectionHeadingProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SectionHeading({ children, className = "" }: SectionHeadingProps) {
+  return (
+    <h2
+      className={`font-display text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl ${className}`}
+    >
+      {children}
+      <span className="mt-2 block h-1 w-16 rounded bg-neutral-900 dark:bg-white" />
+    </h2>
+  );
+}

src/components/ui/SocialLinks.tsx

@@ -0,0 +1,31 @@
+import { Instagram } from "lucide-react";
+
+interface SocialLinksProps {
+  instagram?: string;
+  instagramHandle?: string;
+  className?: string;
+  iconSize?: number;
+}
+
+export function SocialLinks({
+  instagram,
+  instagramHandle,
+  className = "",
+  iconSize = 24,
+}: SocialLinksProps) {
+  return (
+    <div className={`flex items-center gap-4 ${className}`}>
+      {instagram && (
+        <a
+          href={instagram}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon flex items-center gap-2"
+        >
+          <Instagram size={iconSize} />
+          {instagramHandle && <span className="text-sm font-medium">{instagramHandle}</span>}
+        </a>
+      )}
+    </div>
+  );
+}

src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const isDark = stored === "dark" || (!stored && prefersDark);
+    setDark(isDark);
+    document.documentElement.classList.toggle("dark", isDark);
+  }, []);
+
+  function toggle() {
+    const next = !dark;
+    setDark(next);
+    document.documentElement.classList.toggle("dark", next);
+    localStorage.setItem("theme", next ? "dark" : "light");
+  }
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label="Переключить тему"
+      className="social-icon rounded-full p-2"
+    >
+      {dark ? <Sun size={20} /> : <Moon size={20} />}
+    </button>
+  );
+}

src/data/content.ts

@@ -0,0 +1,77 @@
+import type { SiteContent } from "@/types";
+
+export const siteContent: SiteContent = {
+  meta: {
+    title: "BLACK HEART DANCE HOUSE | Школа танцев",
+    description:
+      "Школа танцев BLACK HEART DANCE HOUSE — pole dance, exotic, stretching и другие направления",
+  },
+  hero: {
+    headline: "BLACK HEART DANCE HOUSE",
+    subheadline: "Раскрой свою силу через танец",
+    ctaText: "Записаться",
+    ctaHref: "#contact",
+  },
+  team: {
+    title: "Наша команда",
+    members: [
+      {
+        name: "Имя Фамилия",
+        role: "Pole Dance / Exotic",
+        image: "/images/team-placeholder.jpg",
+      },
+      {
+        name: "Имя Фамилия",
+        role: "Stretching",
+        image: "/images/team-placeholder.jpg",
+      },
+      {
+        name: "Имя Фамилия",
+        role: "Strip Plastic",
+        image: "/images/team-placeholder.jpg",
+      },
+    ],
+  },
+  about: {
+    title: "О нас",
+    paragraphs: [
+      "Мы — студия танцев, где каждый найдёт своё направление. BLACK HEART DANCE HOUSE — это пространство для тех, кто хочет раскрыть свою женственность, силу и грацию.",
+      "Наши преподаватели — действующие спортсмены и победители соревнований. Мы создаём атмосферу поддержки и вдохновения для учеников любого уровня подготовки.",
+    ],
+  },
+  classes: {
+    title: "Направления",
+    items: [
+      {
+        name: "Pole Dance",
+        description: "Сила, грация и пластика на пилоне. Для любого уровня подготовки.",
+        icon: "flame",
+      },
+      {
+        name: "Exotic Pole",
+        description: "Чувственная хореография с элементами pole dance в каблуках.",
+        icon: "sparkles",
+      },
+      {
+        name: "Stretching",
+        description: "Развитие гибкости и пластичности тела. Шпагаты, мостики, складки.",
+        icon: "wind",
+      },
+      {
+        name: "Strip Plastic",
+        description: "Танцевальное направление, раскрывающее женственность и пластику тела.",
+        icon: "music",
+      },
+    ],
+  },
+  contact: {
+    title: "Контакты",
+    address: "г. Минск, ул. Примерная, 1",
+    phone: "+375 (XX) XXX-XX-XX",
+    email: "info@blackheartdance.by",
+    instagram: "https://instagram.com/blackheartdancehouse",
+    mapEmbedUrl:
+      "https://yandex.ru/map-widget/v1/?um=constructor%3Aexample&source=constructor",
+    workingHours: "Пн — Сб: 10:00 — 22:00",
+  },
+};

src/lib/constants.ts

@@ -0,0 +1,18 @@
+import type { NavLink } from "@/types";
+
+export const BRAND = {
+  name: "BLACK HEART DANCE HOUSE",
+  shortName: "Blackheart",
+  instagram: "https://instagram.com/blackheartdancehouse",
+  instagramHandle: "@blackheartdancehouse",
+} as const;
+
+export const NAV_LINKS: NavLink[] = [
+  { label: "О нас", href: "#about" },
+  { label: "Команда", href: "#team" },
+  { label: "Направления", href: "#classes" },
+  { label: "Контакты", href: "#contact" },
+];
+
+export const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000/api/v1";

src/types/content.ts

@@ -0,0 +1,47 @@
+export interface ClassItem {
+  name: string;
+  description: string;
+  icon: string;
+}
+
+export interface TeamMember {
+  name: string;
+  role: string;
+  image: string;
+}
+
+export interface ContactInfo {
+  title: string;
+  address: string;
+  phone: string;
+  email: string;
+  instagram: string;
+  mapEmbedUrl: string;
+  workingHours: string;
+}
+
+export interface SiteContent {
+  meta: {
+    title: string;
+    description: string;
+  };
+  hero: {
+    headline: string;
+    subheadline: string;
+    ctaText: string;
+    ctaHref: string;
+  };
+  team: {
+    title: string;
+    members: TeamMember[];
+  };
+  about: {
+    title: string;
+    paragraphs: string[];
+  };
+  classes: {
+    title: string;
+    items: ClassItem[];
+  };
+  contact: ContactInfo;
+}

src/types/index.ts

@@ -0,0 +1,2 @@
+export type { NavLink } from "./navigation";
+export type { ClassItem, TeamMember, ContactInfo, SiteContent } from "./content";

src/types/navigation.ts

@@ -0,0 +1,4 @@
+export interface NavLink {
+  label: string;
+  href: string;
+}