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

feat: Instagram data sync, gold accent, SVG logo, FAQ & Pricing sections

Browse Source 
- Sync all content from Instagram: fix addresses, trainer names, add 5 new
  trainers, remove 2 inactive, update class descriptions
- Add FAQ section (11 Q&A items) and Pricing section (tabs: subscriptions,
  rental, rules)
- Redesign with editorial magazine feel: centered headings, generous spacing,
  section glow effects, glassmorphism cards
- Migrate entire accent palette from rose to warm gold (#c9a96e)
- Replace low-res PNG logo with vector SVG traced via potrace — crisp at any
  size, animated gradient (black↔gold), heartbeat pulse animation
- Make header brand name gold

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-10 00:45:50 +03:00
parent 9cf09b6894
commit a75922c730
25 changed files with 614 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/styles/animations.css
View File

@@ -53,6 +53,24 @@
}
}
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
15% {
transform: scale(1.08);
}
30% {
transform: scale(1);
}
45% {
transform: scale(1.05);
}
60% {
transform: scale(1);
}
}
@keyframes heart-float {
0% {
opacity: 0;
@@ -77,6 +95,10 @@
animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.hero-logo-heartbeat {
animation: heartbeat 2.5s ease-in-out 1.5s infinite;
}
.hero-title {
opacity: 0;
animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
@@ -95,9 +117,9 @@
/* ===== Hero Background ===== */
.hero-bg-gradient {
background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(225, 29, 72, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(225, 29, 72, 0.08), transparent),
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(225, 29, 72, 0.06), transparent);
background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(201, 169, 110, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(201, 169, 110, 0.06), transparent),
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 169, 110, 0.04), transparent);
}
.hero-glow-orb {
@@ -111,7 +133,7 @@
/* ===== Gradient Text ===== */
.gradient-text {
background: linear-gradient(135deg, #fff 0%, #e11d48 50%, #fff 100%);
background: linear-gradient(135deg, #fff 0%, #c9a96e 50%, #fff 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
@@ -121,7 +143,7 @@
/* Light mode gradient text */
.gradient-text-light {
background: linear-gradient(135deg, #171717 0%, #e11d48 50%, #171717 100%);
background: linear-gradient(135deg, #171717 0%, #c9a96e 50%, #171717 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
@@ -141,7 +163,7 @@
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(225, 29, 72, 0.3), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.15));
background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
@@ -151,7 +173,7 @@
.animated-border:hover::before {
opacity: 1;
background: linear-gradient(135deg, rgba(225, 29, 72, 0.6), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.4));
background: linear-gradient(135deg, rgba(201, 169, 110, 0.6), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.4));
}
/* ===== Glow Effect ===== */
@@ -161,7 +183,7 @@
}
.glow-hover:hover {
box-shadow: 0 0 30px rgba(225, 29, 72, 0.1), 0 0 60px rgba(225, 29, 72, 0.05);
box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
transform: translateY(-4px);
}
@@ -212,7 +234,7 @@
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.3), transparent);
background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
}
/* ===== Reduced Motion ===== */
@@ -243,7 +265,8 @@
animation: none !important;
}
.hero-glow-orb {
.hero-glow-orb,
.hero-logo-heartbeat {
animation: none !important;
}