diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: centralize gold tokens, extract sub-components, clean up unused code

Browse Source 
- Replace hardcoded hex colors with gold/gold-light/gold-dark Tailwind tokens
- Extract Schedule into DayCard, ScheduleFilters, MobileSchedule sub-components
- Extract Team into TeamCarousel, TeamMemberInfo sub-components
- Add UI_CONFIG for centralized magic numbers (timings, thresholds)
- Add reusable IconBadge component, simplify Contact section
- Convert Pricing clickable divs to semantic buttons for a11y
- Remove unused SocialLinks, btn-outline, btn-ghost, nav-link CSS classes
- Fix React setState-during-render error in TeamCarousel (deferred update pattern)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-11 14:57:39 +03:00
parent 08e4af1d55
commit d5afaf92ba
31 changed files with 784 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/globals.css
View File

@@ -46,7 +46,7 @@ body {
/* ===== Focus ===== */
:focus-visible {
@apply outline-2 outline-offset-2 outline-[#c9a96e];
@apply outline-2 outline-offset-2 outline-gold;
}
/* ===== Scrollbar hide utility ===== */

8
src/app/layout.tsx
View File

@@ -19,7 +19,7 @@ export const metadata: Metadata = {
title: siteContent.meta.title,
description: siteContent.meta.description,
openGraph: {
title: "BLACK HEART DANCE HOUSE",
title: siteContent.meta.title,
description: siteContent.meta.description,
locale: "ru_RU",
type: "website",
@@ -28,13 +28,13 @@ export const metadata: Metadata = {
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="ru" className="dark">
<body
className={`${inter.variable} ${oswald.variable} bg-[#050505] text-neutral-50 font-sans antialiased`}
className={`${inter.variable} ${oswald.variable} surface-base font-sans antialiased`}
>
<Header />
<main>{children}</main>

65
src/app/styles/components.css
View File

@@ -1,57 +1,11 @@
/* ===== Navigation ===== */
.nav-link {
@apply text-sm font-medium transition-all duration-300;
@apply text-neutral-500;
@apply hover:text-neutral-900;
@apply dark:text-neutral-400 dark:hover:text-white;
}
.nav-link-active {
@apply text-[#a08050];
@apply dark:text-[#d4b87a];
}
.social-icon {
@apply text-neutral-400 transition-all duration-300;
@apply hover:text-[#a08050];
@apply dark:text-neutral-500 dark:hover:text-[#d4b87a];
}
/* ===== Cards ===== */
.card {
@apply rounded-2xl border p-6 transition-all duration-500 cursor-pointer;
@apply border-neutral-200 bg-white;
@apply hover:border-[#c9a96e]/30 hover:shadow-lg;
@apply dark:border-white/[0.08] dark:bg-[#111];
@apply dark:hover:border-[#c9a96e]/25 dark:hover:bg-[#151515];
@apply dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.06)];
}
/* ===== Buttons ===== */
.btn-primary {
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
@apply bg-[#c9a96e] text-black;
@apply hover:bg-[#d4b87a] hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
@apply dark:bg-[#c9a96e] dark:text-black;
@apply dark:hover:bg-[#d4b87a] dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
}
.btn-outline {
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
@apply border border-[#c9a96e] text-[#a08050];
@apply hover:bg-[#c9a96e] hover:text-black;
@apply dark:border-[#c9a96e] dark:text-[#d4b87a];
@apply dark:hover:bg-[#c9a96e] dark:hover:text-black;
}
.btn-ghost {
@apply inline-flex items-center justify-center font-medium rounded-full transition-all duration-300 cursor-pointer;
@apply text-neutral-600;
@apply hover:text-[#a08050];
@apply dark:text-neutral-400 dark:hover:text-[#d4b87a];
@apply bg-gold text-black;
@apply hover:bg-gold-light hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
@apply dark:bg-gold dark:text-black;
@apply dark:hover:bg-gold-light dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
}
/* ===== Scrollbar ===== */
@@ -73,14 +27,3 @@
scrollbar-color: rgb(64 64 64) transparent;
}
}
/* ===== Contact ===== */
.contact-item {
@apply flex items-center gap-4;
}
.contact-icon {
@apply shrink-0 text-[#a08050];
@apply dark:text-[#d4b87a];
}

6
src/app/styles/theme.css
View File

@@ -45,8 +45,8 @@
}
.accent-text {
@apply text-[#a08050];
@apply dark:text-[#d4b87a];
@apply text-gold-dark;
@apply dark:text-gold-light;
}
/* ===== Layout ===== */
@@ -86,7 +86,7 @@
}
.glass-card:hover {
@apply dark:border-[#c9a96e]/15 dark:bg-white/[0.06];
@apply dark:border-gold/15 dark:bg-white/[0.06];
}
/* ===== Photo Filter ===== */