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>
This commit is contained in:
@@ -41,7 +41,7 @@ export function Pricing() {
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-medium transition-all duration-300 cursor-pointer ${
|
||||
activeTab === tab.id
|
||||
? "bg-[#c9a96e] text-black shadow-lg shadow-[#c9a96e]/25"
|
||||
? "bg-gold text-black shadow-lg shadow-gold/25"
|
||||
: "bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-white/[0.06] dark:text-neutral-300 dark:hover:bg-white/[0.1]"
|
||||
}`}
|
||||
>
|
||||
@@ -65,19 +65,19 @@ export function Pricing() {
|
||||
{regularItems.map((item, i) => {
|
||||
const isPopular = i === 0;
|
||||
return (
|
||||
<div
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setBookingOpen(true)}
|
||||
className={`group relative cursor-pointer rounded-2xl border p-5 transition-all duration-300 ${
|
||||
className={`group relative cursor-pointer rounded-2xl border p-5 transition-all duration-300 text-left ${
|
||||
isPopular
|
||||
? "border-[#c9a96e]/40 bg-gradient-to-br from-[#c9a96e]/10 via-transparent to-[#c9a96e]/5 dark:from-[#c9a96e]/[0.07] dark:to-[#c9a96e]/[0.02] shadow-lg shadow-[#c9a96e]/10 hover:shadow-xl hover:shadow-[#c9a96e]/20"
|
||||
? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10 hover:shadow-xl hover:shadow-gold/20"
|
||||
: "border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
|
||||
}`}
|
||||
>
|
||||
{/* Popular badge */}
|
||||
{isPopular && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-[#c9a96e] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-[#c9a96e]/30">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-gold px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-gold/30">
|
||||
<Sparkles size={10} />
|
||||
Популярный
|
||||
</span>
|
||||
@@ -86,7 +86,7 @@ export function Pricing() {
|
||||
|
||||
<div className={isPopular ? "mt-1" : ""}>
|
||||
{/* Name */}
|
||||
<p className={`text-sm font-medium ${isPopular ? "text-[#a08050] dark:text-[#d4b87a]" : "text-neutral-700 dark:text-neutral-300"}`}>
|
||||
<p className={`text-sm font-medium ${isPopular ? "text-gold-dark dark:text-gold-light" : "text-neutral-700 dark:text-neutral-300"}`}>
|
||||
{item.name}
|
||||
</p>
|
||||
|
||||
@@ -98,22 +98,22 @@ export function Pricing() {
|
||||
)}
|
||||
|
||||
{/* Price */}
|
||||
<p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-[#c9a96e]" : "text-neutral-900 dark:text-white"}`}>
|
||||
<p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
|
||||
{item.price}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Unlimited — featured card */}
|
||||
{unlimitedItem && (
|
||||
<div onClick={() => setBookingOpen(true)} className="mt-6 cursor-pointer team-card-glitter rounded-2xl border border-[#c9a96e]/30 bg-gradient-to-r from-[#c9a96e]/10 via-[#c9a96e]/5 to-[#c9a96e]/10 dark:from-[#c9a96e]/[0.06] dark:via-transparent dark:to-[#c9a96e]/[0.06] p-6 sm:p-8 transition-shadow duration-300 hover:shadow-xl hover:shadow-[#c9a96e]/20">
|
||||
<button onClick={() => setBookingOpen(true)} className="mt-6 w-full cursor-pointer text-left team-card-glitter rounded-2xl border border-gold/30 bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 dark:from-gold/[0.06] dark:via-transparent dark:to-gold/[0.06] p-6 sm:p-8 transition-shadow duration-300 hover:shadow-xl hover:shadow-gold/20">
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
|
||||
<div className="text-center sm:text-left">
|
||||
<div className="flex items-center justify-center gap-2 sm:justify-start">
|
||||
<Crown size={18} className="text-[#c9a96e]" />
|
||||
<Crown size={18} className="text-gold" />
|
||||
<p className="text-lg font-bold text-neutral-900 dark:text-white">
|
||||
{unlimitedItem.name}
|
||||
</p>
|
||||
@@ -124,11 +124,11 @@ export function Pricing() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="shrink-0 font-display text-3xl font-bold text-[#c9a96e]">
|
||||
<p className="shrink-0 font-display text-3xl font-bold text-gold">
|
||||
{unlimitedItem.price}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -139,10 +139,10 @@ export function Pricing() {
|
||||
<Reveal>
|
||||
<div className="mx-auto mt-10 max-w-2xl space-y-3">
|
||||
{pricing.rentalItems.map((item, i) => (
|
||||
<div
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setBookingOpen(true)}
|
||||
className="cursor-pointer flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 transition-colors hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
|
||||
className="w-full cursor-pointer text-left flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 transition-colors hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-neutral-900 dark:text-white">
|
||||
@@ -154,10 +154,10 @@ export function Pricing() {
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 font-display text-xl font-bold text-[#a08050] dark:text-[#d4b87a]">
|
||||
<span className="shrink-0 font-display text-xl font-bold text-gold-dark dark:text-gold-light">
|
||||
{item.price}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
@@ -172,7 +172,7 @@ export function Pricing() {
|
||||
key={i}
|
||||
className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
|
||||
>
|
||||
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#c9a96e]/10 text-xs font-bold text-[#a08050] dark:bg-[#c9a96e]/10 dark:text-[#d4b87a]">
|
||||
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
|
||||
{i + 1}
|
||||
</span>
|
||||
<p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
|
||||
|
||||
Reference in New Issue
Block a user