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

- 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>
2026-03-10 00:45:50 +03:00
parent 9cf09b6894
commit a75922c730
25 changed files with 614 additions and 174 deletions
--- a/src/app/styles/animations.css
+++ b/src/app/styles/animations.css
@@ -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;
  }

--- a/src/app/styles/components.css
+++ b/src/app/styles/components.css
@@ -8,14 +8,14 @@
 }

 .nav-link-active {
-  @apply text-rose-600;
-  @apply dark:text-rose-400;
+  @apply text-[#a08050];
+  @apply dark:text-[#d4b87a];
 }

 .social-icon {
  @apply text-neutral-400 transition-all duration-300;
-  @apply hover:text-rose-600;
-  @apply dark:text-neutral-500 dark:hover:text-rose-400;
+  @apply hover:text-[#a08050];
+  @apply dark:text-neutral-500 dark:hover:text-[#d4b87a];
 }

 /* ===== Cards ===== */
@@ -23,35 +23,35 @@
 .card {
  @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)];
+  @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-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)];
+  @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-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;
+  @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-rose-600;
-  @apply dark:text-neutral-400 dark:hover:text-rose-400;
+  @apply hover:text-[#a08050];
+  @apply dark:text-neutral-400 dark:hover:text-[#d4b87a];
 }

 /* ===== Scrollbar ===== */
@@ -81,6 +81,6 @@
 }

 .contact-icon {
-  @apply shrink-0 text-rose-600;
-  @apply dark:text-rose-400;
+  @apply shrink-0 text-[#a08050];
+  @apply dark:text-[#d4b87a];
 }
--- a/src/app/styles/theme.css
+++ b/src/app/styles/theme.css
@@ -2,12 +2,12 @@

 .surface-base {
  @apply bg-neutral-50 text-neutral-900;
-  @apply dark:bg-[#050505] dark:text-neutral-50;
+  @apply dark:bg-[#050505] dark:text-neutral-100;
 }

 .surface-muted {
  @apply bg-neutral-100;
-  @apply dark:bg-[#0a0a0a];
+  @apply dark:bg-[#080808];
 }

 .surface-glass {
@@ -17,14 +17,14 @@

 .surface-card {
  @apply bg-white/80 backdrop-blur-sm;
-  @apply dark:bg-white/[0.03] dark:backdrop-blur-sm;
+  @apply dark:bg-[#111] dark:backdrop-blur-sm;
 }

 /* ===== Borders ===== */

 .theme-border {
  @apply border-neutral-200;
-  @apply dark:border-white/[0.06];
+  @apply dark:border-white/[0.08];
 }

 /* ===== Text ===== */
@@ -36,7 +36,7 @@

 .body-text {
  @apply text-neutral-600;
-  @apply dark:text-neutral-400;
+  @apply dark:text-neutral-300;
 }

 .muted-text {
@@ -45,16 +45,46 @@
 }

 .accent-text {
-  @apply text-rose-600;
-  @apply dark:text-rose-400;
+  @apply text-[#a08050];
+  @apply dark:text-[#d4b87a];
 }

 /* ===== Layout ===== */

 .section-padding {
-  @apply py-16 sm:py-24;
+  @apply py-20 sm:py-32;
 }

 .section-container {
  @apply mx-auto max-w-6xl px-6 sm:px-8;
 }
+
+/* ===== Section Glow Backgrounds ===== */
+
+.section-glow {
+  position: relative;
+}
+
+.section-glow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600px;
+  height: 400px;
+  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
+  pointer-events: none;
+}
+
+/* ===== Glass Card ===== */
+
+.glass-card {
+  @apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
+  @apply border-neutral-200/80 bg-white/90;
+  @apply dark:border-white/[0.06] dark:bg-white/[0.04];
+}
+
+.glass-card:hover {
+  @apply dark:border-[#c9a96e]/15 dark:bg-white/[0.06];
+}