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

feat: clickable price cards open booking modal + smooth showcase transitions

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-10 23:33:37 +03:00
parent e5fae578ab
commit 7ff850f21a
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/sections/Pricing.tsx
View File

@@ -5,12 +5,14 @@ import { CreditCard, Building2, ScrollText, Crown, Sparkles } from "lucide-react
import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { BookingModal } from "@/components/ui/BookingModal";
type Tab = "prices" | "rental" | "rules";
export function Pricing() {
const { pricing } = siteContent;
const [activeTab, setActiveTab] = useState<Tab>("prices");
const [bookingOpen, setBookingOpen] = useState(false);
const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
{ id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> },
@@ -65,9 +67,10 @@ export function Pricing() {
return (
<div
key={i}
className={`group relative rounded-2xl border p-5 transition-all duration-300 ${
onClick={() => setBookingOpen(true)}
className={`group relative cursor-pointer rounded-2xl border p-5 transition-all duration-300 ${
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"
? "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-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
}`}
>
@@ -106,7 +109,7 @@ export function Pricing() {
{/* Unlimited — featured card */}
{unlimitedItem && (
<div className="mt-6 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">
<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">
<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">
@@ -138,7 +141,8 @@ export function Pricing() {
{pricing.rentalItems.map((item, i) => (
<div
key={i}
className="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]"
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]"
>
<div>
<p className="font-medium text-neutral-900 dark:text-white">
@@ -180,6 +184,8 @@ export function Pricing() {
</Reveal>
)}
</div>
<BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
</section>
);
}