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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
13
src/app/not-found.tsx
Normal file
13
src/app/not-found.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
76
src/app/styles/animations.css
Normal file
76
src/app/styles/animations.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
59
src/app/styles/components.css
Normal file
59
src/app/styles/components.css
Normal file
@@ -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;
|
||||
}
|
||||
50
src/app/styles/theme.css
Normal file
50
src/app/styles/theme.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user