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>
2026-03-04 17:32:45 +03:00
parent 0588f3fd95
commit f263765597
35 changed files with 5542 additions and 96 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,37 @@
@import "tailwindcss";
+@import "./styles/theme.css";
+@import "./styles/components.css";
+@import "./styles/animations.css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-display: var(--font-oswald);
+  --font-sans: var(--font-inter);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/* ===== Base ===== */
+
+html {
+  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 {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* ===== Focus ===== */
+
+:focus-visible {
+  @apply outline-2 outline-offset-2 outline-neutral-900;
+  @apply dark:outline-white;
 }
--- a/src/app/layout.tsx
+++ b/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({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin", "cyrillic"],
 });

-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const oswald = Oswald({
+  variable: "--font-oswald",
+  subsets: ["latin", "cyrillic"],
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: siteContent.meta.title,
+  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>
  );
--- a/src/app/not-found.tsx
+++ b/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>
+  );
+}
--- a/src/app/page.tsx
+++ b/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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          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>
+    <>
+      <Hero />
+      <About />
+      <Team />
+      <Classes />
+      <Contact />
+    </>
  );
 }
--- a/src/app/styles/animations.css
+++ b/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;
+  }
+}
--- a/src/app/styles/components.css
+++ b/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;
+}
--- a/src/app/styles/theme.css
+++ b/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;
+}
--- a/src/components/layout/Footer.tsx
+++ b/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>
+  );
+}
--- a/src/components/layout/Header.tsx
+++ b/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>
+  );
+}
--- a/src/components/sections/About.tsx
+++ b/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>
+  );
+}
--- a/src/components/sections/Classes.tsx
+++ b/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>
+  );
+}
--- a/src/components/sections/Contact.tsx
+++ b/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>
+  );
+}
--- a/src/components/sections/Hero.tsx
+++ b/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>
+  );
+}
--- a/src/components/sections/Team.tsx
+++ b/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>
+  );
+}
--- a/src/components/ui/Button.tsx
+++ b/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>
+  );
+}
--- a/src/components/ui/Reveal.tsx
+++ b/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>
+  );
+}
--- a/src/components/ui/SectionHeading.tsx
+++ b/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>
+  );
+}
--- a/src/components/ui/SocialLinks.tsx
+++ b/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>
+  );
+}
--- a/src/components/ui/ThemeToggle.tsx
+++ b/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>
+  );
+}
--- a/src/data/content.ts
+++ b/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",
+  },
+};
--- a/src/lib/constants.ts
+++ b/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";
--- a/src/types/content.ts
+++ b/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;
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,2 @@
+export type { NavLink } from "./navigation";
+export type { ClassItem, TeamMember, ContactInfo, SiteContent } from "./content";
--- a/src/types/navigation.ts
+++ b/src/types/navigation.ts
@@ -0,0 +1,4 @@
+export interface NavLink {
+  label: string;
+  href: string;
+}