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

Premium page UI

Browse Source
This commit is contained in:
Kamran Ahmed
2025-07-22 18:40:23 +01:00
parent e17bc250ec
commit eb511f7edd
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Premium/PremiumPage.tsx
View File

@@ -6,6 +6,7 @@ import {
Clock, Clock,
GitPullRequest, GitPullRequest,
Lock, Lock,
PartyPopper,
Play, Play,
Star, Star,
Users2, Users2,
@@ -49,7 +50,9 @@ function FeatureCard(props: FeatureCardProps) {
</div> </div>
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1 text-sm font-medium text-slate-100">{title}</h3> <h3 className="mb-1 text-sm font-medium text-slate-100">{title}</h3>
<p className="text-xs leading-relaxed text-slate-500">{description}</p> <p className="text-xs leading-relaxed text-slate-500">
{description}
</p>
</div> </div>
</div> </div>
); );
@@ -297,7 +300,12 @@ export function PremiumPage() {
{/* Features Grid */} {/* Features Grid */}
<div className="mb-20"> <div className="mb-20">
<p className="mb-8 text-center text-sm text-slate-400"> <p className="mb-8 text-center text-sm text-slate-400">
Click any card below to watch a quick demo of our AI features <PartyPopper className="h-4 w-4 inline-block text-blue-400 mr-2 relative -top-0.5" />
Paid users{' '}
<span className="font-bold text-blue-400">
get unlimited access
</span>{' '}
to all the features below.
</p> </p>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{features.map((feature, index) => ( {features.map((feature, index) => (
@@ -309,7 +317,11 @@ export function PremiumPage() {
thumbnail={feature.thumbnail} thumbnail={feature.thumbnail}
duration={feature.duration} duration={feature.duration}
isComingSoon={feature.isComingSoon} isComingSoon={feature.isComingSoon}
onClick={feature.videoId ? () => setActiveVideoId(feature.videoId) : undefined} onClick={
feature.videoId
? () => setActiveVideoId(feature.videoId)
: undefined
}
/> />
))} ))}
</div> </div>