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>
This commit is contained in:
25
src/components/sections/About.tsx
Normal file
25
src/components/sections/About.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
37
src/components/sections/Classes.tsx
Normal file
37
src/components/sections/Classes.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
71
src/components/sections/Contact.tsx
Normal file
71
src/components/sections/Contact.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
34
src/components/sections/Hero.tsx
Normal file
34
src/components/sections/Hero.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
32
src/components/sections/Team.tsx
Normal file
32
src/components/sections/Team.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user