info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-31 21:11:44 +02:00
Code Issues Releases Wiki Activity

Responsive banner

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-30 23:37:22 +01:00
parent 3cd897590a
commit 7dc01ea8c6
1 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/SQLCourseVariant/PurchaseBanner.tsx
View File

@@ -1,4 +1,4 @@
import { CheckIcon } from 'lucide-react';
import { CheckIcon, Star } from 'lucide-react';
import { BuyButton } from './BuyButton';
import { Rating } from '../Rating/Rating';
@@ -6,14 +6,15 @@ export function PurchaseBanner() {
return (
<div className="sticky top-4 z-50 mt-16.5 flex w-full flex-col gap-4 rounded-2xl bg-yellow-950 p-5 shadow-lg ring-1 ring-yellow-500/40 lg:flex-row lg:items-center lg:justify-between">
<div className="order-3 flex w-full flex-col items-center gap-2 lg:order-0 lg:w-fit lg:items-start">
<span className="inline-flex items-center gap-1.5 text-yellow-500">
<CheckIcon className="size-5 stroke-[2.5]" />
7-Day Money-Back Guarantee
</span>
<span className="inline-flex items-center gap-1.5 text-yellow-500">
<CheckIcon className="size-5 stroke-[2.5]" />
Lifetime access & updates
</span>
{[
'7-Day Money-Back Guarantee',
'Lifetime access & updates'
].map((text, index) => (
<span key={index} className="inline-flex items-center gap-1.5 text-yellow-500">
<CheckIcon className="size-5 stroke-[2.5]" />
{text}
</span>
))}
</div>
<div className="order-2 lg:order-0">
@@ -21,8 +22,9 @@ export function PurchaseBanner() {
</div>
<div className="flex flex-col items-center gap-2">
<Rating rating={4.9} />
<span className="text-base font-semibold text-yellow-500">
<Rating rating={4.9} className="hidden lg:flex" />
<span className="text-base font-semibold text-yellow-500 flex items-center gap-1">
<Star className="size-4 block lg:hidden fill-current" />
4.9 avg. Review
</span>
</div>