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

- 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>
2026-03-11 14:57:39 +03:00
parent 08e4af1d55
commit d5afaf92ba
31 changed files with 784 additions and 691 deletions
@@ -0,0 +1,55 @@
+import { Instagram } from "lucide-react";
+import type { TeamMember } from "@/types/content";
+
+interface TeamMemberInfoProps {
+  members: TeamMember[];
+  activeIndex: number;
+  onSelect: (index: number) => void;
+}
+
+export function TeamMemberInfo({ members, activeIndex, onSelect }: TeamMemberInfoProps) {
+  const member = members[activeIndex];
+
+  return (
+    <div
+      key={activeIndex}
+      className="mx-auto mt-8 max-w-lg text-center"
+      style={{
+        animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
+      }}
+    >
+      {member.instagram && (
+        <a
+          href={member.instagram}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
+        >
+          <Instagram size={14} />
+          {member.instagram.split("/").filter(Boolean).pop()}
+        </a>
+      )}
+
+      {member.description && (
+        <p className="mt-3 text-sm leading-relaxed text-white/55">
+          {member.description}
+        </p>
+      )}
+
+      {/* Progress dots */}
+      <div className="mt-6 flex items-center justify-center gap-1.5">
+        {members.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => onSelect(i)}
+            className={`h-1.5 rounded-full transition-all duration-500 cursor-pointer ${
+              i === activeIndex
+                ? "w-6 bg-gold"
+                : "w-1.5 bg-white/15 hover:bg-white/30"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}