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

feat: dark luxury redesign with black heart branding

Browse Source 
Complete visual overhaul: dark-only mode, rose/crimson accent system,
glassmorphism header, animated hero with floating hearts and glow orbs,
photo-backed cards, infinite team carousel with drag support,
redesigned modals with hero images, black heart logo with rose glow silhouette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-09 23:30:10 +03:00
parent 1f6e314af6
commit 9cf09b6894
16 changed files with 762 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,50 +1,57 @@
/* ===== Navigation ===== */
.nav-link {
@apply text-sm font-medium text-neutral-600 transition-colors duration-200;
@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-rose-600;
@apply dark:text-rose-400;
}
.social-icon {
@apply text-neutral-500 transition-colors duration-200;
@apply hover:text-neutral-900;
@apply dark:text-neutral-400 dark:hover:text-white;
@apply text-neutral-400 transition-all duration-300;
@apply hover:text-rose-600;
@apply dark:text-neutral-500 dark:hover:text-rose-400;
}
/* ===== 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;
@apply rounded-2xl border p-6 transition-all duration-500 cursor-pointer;
@apply border-neutral-200 bg-white;
@apply hover:border-rose-200 hover:shadow-lg;
@apply dark:border-white/[0.06] dark:bg-white/[0.02];
@apply dark:hover:border-rose-500/20 dark:hover:bg-white/[0.04];
@apply dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.08)];
}
/* ===== 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;
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
@apply bg-rose-600 text-white;
@apply hover:bg-rose-500 hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
@apply dark:bg-rose-600 dark:text-white;
@apply dark:hover:bg-rose-500 dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
}
.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;
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
@apply border border-rose-600 text-rose-600;
@apply hover:bg-rose-600 hover:text-white;
@apply dark:border-rose-500 dark:text-rose-400;
@apply dark:hover:bg-rose-500 dark:hover:text-white;
}
.btn-ghost {
@apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
@apply inline-flex items-center justify-center font-medium rounded-full transition-all duration-300 cursor-pointer;
@apply text-neutral-600;
@apply hover:text-neutral-900;
@apply dark:text-neutral-400 dark:hover:text-white;
@apply hover:text-rose-600;
@apply dark:text-neutral-400 dark:hover:text-rose-400;
}
/* ===== Scrollbar ===== */
@@ -74,6 +81,6 @@
}
.contact-icon {
@apply shrink-0 text-neutral-900;
@apply dark:text-neutral-50;
@apply shrink-0 text-rose-600;
@apply dark:text-rose-400;
}