Skip to content

Commit 527b4a4

Browse files
hasithasandunlakshanhasithasandunlakshan
committed
feat: improve ticket card theme styling
1 parent 7e5c113 commit 527b4a4

1 file changed

Lines changed: 37 additions & 25 deletions

File tree

‎components/Cards/TicketsCard/TicketCard.tsx‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,36 +22,36 @@ const TicketCard = ({
2222
today,
2323
}: TicketCardProps): JSX.Element => {
2424
return (
25-
<div className="relative max-w-2xl mx-auto p-6 sm:overflow-x-clip">
26-
<div className="absolute left-0 right-0 top-1/2 -translate-y-1/2 flex justify-between z-20 px-4">
25+
<div className="relative mx-auto max-w-2xl p-6 sm:overflow-x-clip sm:px-2">
26+
<div className="absolute left-0 right-0 top-1/2 z-20 flex -translate-y-1/2 justify-between px-2 sm:px-0">
2727
<Button
2828
type="button"
2929
onClick={prevTicket}
30-
className="bg-white p-2 shadow-lg hover:bg-gray-100 transition-colors"
30+
className="h-11 w-11 border border-white/20 bg-[#382855] p-0 shadow-lg shadow-black/20 transition-colors hover:bg-[#49346d] !justify-center"
3131
aria-label="Previous ticket"
3232
outline={true}
33-
icon={<Arrows direction="left" className="w-6 h-6" fill="#4B5563" />}
33+
icon={<Arrows direction="left" className="h-6 w-6" fill="#ffffff" />}
3434
iconPosition="left"
3535
/>
3636

3737
<Button
3838
type="button"
3939
onClick={nextTicket}
40-
className="bg-white p-2 shadow-lg hover:bg-gray-100 transition-colors"
40+
className="h-11 w-11 border border-white/20 bg-[#382855] p-0 shadow-lg shadow-black/20 transition-colors hover:bg-[#49346d] !justify-center"
4141
aria-label="Next ticket"
4242
outline={true}
43-
icon={<Arrows direction="right" className="w-6 h-6" fill="#4B5563" />}
43+
icon={<Arrows direction="right" className="h-6 w-6" fill="#ffffff" />}
4444
iconPosition="left"
4545
/>
4646
</div>
4747

48-
<div className="relative h-96">
48+
<div className="relative h-[410px] sm:h-[480px]">
4949
{availableTickets.map((ticket, index) => {
5050
const isCurrentCard: boolean = index === currentIndex;
5151
const isPrevCard: boolean =
5252
index ===
5353
(currentIndex - 1 + availableTickets.length) %
54-
availableTickets.length;
54+
availableTickets.length;
5555
const isNextCard: boolean =
5656
index === (currentIndex + 1) % availableTickets.length;
5757
const isEnded: boolean = today > new Date(ticket.eventDate);
@@ -84,35 +84,46 @@ const TicketCard = ({
8484
zIndex,
8585
}}
8686
>
87-
<div className="bg-white shadow-lg rounded-lg overflow-hidden border border-gray-200">
88-
<div className="p-6">
89-
<div className="flex justify-between items-start">
87+
<div className="overflow-hidden rounded-lg border border-white/15 bg-[#25163d] shadow-2xl shadow-black/25">
88+
<div className="relative p-7 sm:p-6">
89+
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-[#2dccfd] to-[#ad20e2]" />
90+
<div className="flex items-start justify-between gap-4 sm:flex-col">
9091
<div>
91-
<h3 className="text-xl font-semibold text-gray-900">
92+
<p className="text-sm font-medium uppercase text-cyan-200">
93+
Conference pass
94+
</p>
95+
<h3 className="mt-2 text-2xl font-semibold text-white">
9296
{ticket.type}
9397
</h3>
94-
<p className="text-gray-500 mt-1">{ticket.description}</p>
98+
<p className="mt-2 leading-6 text-gray-200">
99+
{ticket.description}
100+
</p>
95101
</div>
96102
<div
97-
className={`px-2 py-1 rounded-full text-sm font-medium ${isEnded ? 'bg-red-100 text-red-600' : 'text-gradient'
98-
}`}
103+
className={`shrink-0 rounded-md border px-3 py-1 text-sm font-medium ${
104+
isEnded
105+
? 'border-red-300/50 bg-red-500/20 text-red-100'
106+
: 'border-cyan-300/50 bg-cyan-300/10 text-cyan-100'
107+
}`}
99108
>
100109
{isEnded ? 'Closed' : ticket.status}
101110
</div>
102111
</div>
103112

104-
<div className="mt-4">
105-
<span className="text-3xl font-bold text-gray-900">
113+
<div className="mt-6 flex items-end">
114+
<span className="text-4xl font-bold text-white">
106115
${ticket.price}
107116
</span>
108-
<span className="text-gray-500 ml-2">/person</span>
117+
<span className="ml-2 pb-1 text-gray-300">/person</span>
109118
</div>
110119

111-
<ul className="mt-6 space-y-2">
120+
<ul className="mt-6 grid gap-3">
112121
{ticket.benefits.map((benefit, i) => (
113-
<li key={i} className="flex items-center text-gray-600">
114-
<TicketIcon className="h-4 w-4 mr-2 text-blue-500" />
115-
{benefit}
122+
<li key={i} className="flex items-center text-white">
123+
<span className="mr-3 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-[#35264f]">
124+
<TicketIcon className="h-4 w-4 text-cyan-200" />
125+
</span>
126+
<span>{benefit}</span>
116127
</li>
117128
))}
118129
</ul>
@@ -130,7 +141,7 @@ const TicketCard = ({
130141
type="button"
131142
disabled={true}
132143
outline={true}
133-
className="mt-8 w-full bg-gray-300"
144+
className="mt-8 w-full border border-white/20 bg-[#34234f] text-gray-200"
134145
>
135146
{isEnded ? 'Event Closed' : 'Get a Ticket'}
136147
</Button>
@@ -147,8 +158,9 @@ const TicketCard = ({
147158
return (
148159
<button
149160
key={index}
150-
className={`h-2 rounded-full transition-all duration-300 ${index === currentIndex ? 'w-6 bg-blue-400' : 'w-2 bg-gray-300'
151-
}`}
161+
className={`h-2 rounded-full transition-all duration-300 ${
162+
index === currentIndex ? 'w-6 bg-cyan-200' : 'w-2 bg-white/40'
163+
}`}
152164
onClick={() => setCurrentIndex(index)}
153165
aria-label={`Go to ticket ${index + 1}`}
154166
/>

0 commit comments

Comments
 (0)