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