mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-22 17:02:58 +02:00
Refactor premium page
This commit is contained in:
Kamran Ahmed
83
src/components/Premium/CredibilityStats.tsx
Normal file
83
src/components/Premium/CredibilityStats.tsx
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import type { LucideIcon } from 'lucide-react';
|
||||||
|
import {
|
||||||
|
Bot,
|
||||||
|
GitPullRequest,
|
||||||
|
Star,
|
||||||
|
Users2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { cn } from '../../lib/classname';
|
||||||
|
|
||||||
|
interface CredibilityItemProps {
|
||||||
|
icon: LucideIcon;
|
||||||
|
iconClassName: string;
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
subLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CredibilityItem(props: CredibilityItemProps) {
|
||||||
|
const Icon = props.icon;
|
||||||
|
return (
|
||||||
|
<div className="group flex flex-col items-center text-center">
|
||||||
|
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-slate-900/50">
|
||||||
|
<Icon
|
||||||
|
className={cn(`h-6 w-6`, props.iconClassName)}
|
||||||
|
strokeWidth={1.5}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-white">{props.value}</div>
|
||||||
|
<div className="mt-3 text-sm font-medium text-slate-400">
|
||||||
|
{props.label}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1.5 text-xs text-slate-500">{props.subLabel}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CredibilityStats() {
|
||||||
|
return (
|
||||||
|
<div className="mb-10 hidden md:block">
|
||||||
|
<div className="rounded-xl border border-slate-700 bg-slate-800/50 p-8 md:p-12">
|
||||||
|
<div className="mb-8 md:mb-12">
|
||||||
|
<h2 className="text-3xl font-bold text-white md:text-4xl">
|
||||||
|
The Platform Developers Trust
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-lg text-slate-400">
|
||||||
|
Join millions of developers in their learning journey
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-8 md:grid-cols-4">
|
||||||
|
<CredibilityItem
|
||||||
|
icon={Star}
|
||||||
|
iconClassName="text-yellow-400 fill-current"
|
||||||
|
value="#6"
|
||||||
|
label="Most Starred Project"
|
||||||
|
subLabel="Among 200M+ Repositories"
|
||||||
|
/>
|
||||||
|
<CredibilityItem
|
||||||
|
icon={Users2}
|
||||||
|
iconClassName="text-blue-400"
|
||||||
|
value="2.1M+"
|
||||||
|
label="Active Developers"
|
||||||
|
subLabel="Learning & Growing Daily"
|
||||||
|
/>
|
||||||
|
<CredibilityItem
|
||||||
|
icon={Bot}
|
||||||
|
iconClassName="text-indigo-400"
|
||||||
|
value="37K+"
|
||||||
|
label="Discord Members"
|
||||||
|
subLabel="Active Community Support"
|
||||||
|
/>
|
||||||
|
<CredibilityItem
|
||||||
|
icon={GitPullRequest}
|
||||||
|
iconClassName="text-purple-400"
|
||||||
|
value="1000+"
|
||||||
|
label="Contributors"
|
||||||
|
subLabel="Community Driven Project"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
src/components/Premium/FeatureCard.tsx
Normal file
70
src/components/Premium/FeatureCard.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import { Lock, Play } from 'lucide-react';
|
||||||
|
|
||||||
|
interface FeatureCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
duration?: string;
|
||||||
|
videoId?: string;
|
||||||
|
thumbnail?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
isComingSoon?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FeatureCard(props: FeatureCardProps) {
|
||||||
|
const {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
duration = '2:30',
|
||||||
|
videoId,
|
||||||
|
thumbnail,
|
||||||
|
onClick,
|
||||||
|
isComingSoon = false,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
if (isComingSoon) {
|
||||||
|
return (
|
||||||
|
<div className="group relative overflow-hidden rounded-lg border border-dashed border-slate-600/50 bg-slate-800/30 p-4 text-left opacity-90">
|
||||||
|
<div className="relative block aspect-video w-full overflow-hidden rounded-lg bg-gradient-to-br from-indigo-900/20 to-purple-900/20">
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/20 backdrop-blur-sm">
|
||||||
|
<Lock className="h-6 w-6 text-indigo-400/70" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="mb-1 text-sm font-medium text-slate-100">{title}</h3>
|
||||||
|
<p className="text-xs leading-relaxed text-slate-500">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className="group relative overflow-hidden rounded-lg border border-slate-700 bg-[#151F33] p-4 text-left hover:border-blue-400"
|
||||||
|
>
|
||||||
|
<span className="group relative block aspect-video w-full cursor-pointer overflow-hidden rounded-lg bg-slate-900/50">
|
||||||
|
<img
|
||||||
|
src={thumbnail}
|
||||||
|
alt={title}
|
||||||
|
className="absolute inset-0 h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100">
|
||||||
|
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 backdrop-blur-sm">
|
||||||
|
<Play className="h-6 w-6 fill-current text-white" strokeWidth={2} />
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="absolute top-1 right-1 rounded bg-black/60 px-2 py-1 text-xs text-white backdrop-blur-sm">
|
||||||
|
{duration}
|
||||||
|
</span>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className="mb-1 text-sm font-medium text-white">{title}</h3>
|
||||||
|
<p className="text-xs leading-relaxed text-slate-400">{description}</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,290 +1,25 @@
|
|||||||
import type { LucideIcon } from 'lucide-react';
|
|
||||||
import {
|
import {
|
||||||
Book,
|
Book,
|
||||||
Bot,
|
Bot,
|
||||||
CheckCircle2,
|
CheckCircle,
|
||||||
Clock,
|
Clock,
|
||||||
GitPullRequest,
|
|
||||||
Lock,
|
|
||||||
PartyPopper,
|
PartyPopper,
|
||||||
Play,
|
|
||||||
Star,
|
|
||||||
Users2,
|
Users2,
|
||||||
Wand2,
|
Wand2,
|
||||||
Zap,
|
Zap,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { cn } from '../../lib/classname';
|
|
||||||
import { VideoModal } from '../VideoModal';
|
import { VideoModal } from '../VideoModal';
|
||||||
|
import { CredibilityStats } from './CredibilityStats';
|
||||||
|
import { FeatureCard } from './FeatureCard';
|
||||||
|
import { StatsItem } from './StatsItem';
|
||||||
|
import { features, paidFeaturesList } from './constants';
|
||||||
|
|
||||||
interface FeatureCardProps {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
duration?: string;
|
|
||||||
videoId?: string;
|
|
||||||
thumbnail?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
isComingSoon?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CredibilityStats() {
|
|
||||||
return (
|
|
||||||
<div className="mb-10 hidden md:block">
|
|
||||||
<div className="rounded-xl border border-slate-700 bg-slate-800/50 p-8 md:p-12">
|
|
||||||
<div className="mb-8 md:mb-12">
|
|
||||||
<h2 className="text-3xl font-bold text-white md:text-4xl">
|
|
||||||
The Platform Developers Trust
|
|
||||||
</h2>
|
|
||||||
<p className="mt-2 text-lg text-slate-400">
|
|
||||||
Join millions of developers in their learning journey
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-8 md:grid-cols-4">
|
|
||||||
<CredibilityItem
|
|
||||||
icon={Star}
|
|
||||||
iconClassName="text-yellow-400 fill-current"
|
|
||||||
value="#6"
|
|
||||||
label="Most Starred Project"
|
|
||||||
subLabel="Among 200M+ Repositories"
|
|
||||||
/>
|
|
||||||
<CredibilityItem
|
|
||||||
icon={Users2}
|
|
||||||
iconClassName="text-blue-400"
|
|
||||||
value="2.1M+"
|
|
||||||
label="Active Developers"
|
|
||||||
subLabel="Learning & Growing Daily"
|
|
||||||
/>
|
|
||||||
<CredibilityItem
|
|
||||||
icon={Bot}
|
|
||||||
iconClassName="text-indigo-400"
|
|
||||||
value="37K+"
|
|
||||||
label="Discord Members"
|
|
||||||
subLabel="Active Community Support"
|
|
||||||
/>
|
|
||||||
<CredibilityItem
|
|
||||||
icon={GitPullRequest}
|
|
||||||
iconClassName="text-purple-400"
|
|
||||||
value="1000+"
|
|
||||||
label="Contributors"
|
|
||||||
subLabel="Community Driven Project"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeatureCard(props: FeatureCardProps) {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
duration = '2:30',
|
|
||||||
videoId,
|
|
||||||
thumbnail,
|
|
||||||
onClick,
|
|
||||||
isComingSoon = false,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
if (isComingSoon) {
|
|
||||||
return (
|
|
||||||
<div className="group relative overflow-hidden rounded-lg border border-dashed border-slate-600/50 bg-slate-800/30 p-4 text-left opacity-90">
|
|
||||||
<div className="relative block aspect-video w-full overflow-hidden rounded-lg bg-gradient-to-br from-indigo-900/20 to-purple-900/20">
|
|
||||||
<div className="absolute inset-0 flex items-center justify-center">
|
|
||||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-500/20 backdrop-blur-sm">
|
|
||||||
<Lock className="h-6 w-6 text-indigo-400/70" strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-4">
|
|
||||||
<h3 className="mb-1 text-sm font-medium text-slate-100">{title}</h3>
|
|
||||||
<p className="text-xs leading-relaxed text-slate-500">
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
onClick={onClick}
|
|
||||||
className="group relative overflow-hidden rounded-lg border border-slate-700 bg-[#151F33] p-4 text-left hover:border-blue-400"
|
|
||||||
>
|
|
||||||
<span className="group relative block aspect-video w-full cursor-pointer overflow-hidden rounded-lg bg-slate-900/50">
|
|
||||||
<img
|
|
||||||
src={thumbnail}
|
|
||||||
alt={title}
|
|
||||||
className="absolute inset-0 h-full w-full object-cover"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100">
|
|
||||||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 backdrop-blur-sm">
|
|
||||||
<Play className="h-6 w-6 fill-current text-white" strokeWidth={2} />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="absolute top-1 right-1 rounded bg-black/60 px-2 py-1 text-xs text-white backdrop-blur-sm">
|
|
||||||
{duration}
|
|
||||||
</span>
|
|
||||||
<div className="mt-4">
|
|
||||||
<h3 className="mb-1 text-sm font-medium text-white">{title}</h3>
|
|
||||||
<p className="text-xs leading-relaxed text-slate-400">{description}</p>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function StarRating() {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center">
|
|
||||||
{[...Array(5)].map((_, i) => (
|
|
||||||
<Star key={i} className="h-4 w-4 fill-current text-yellow-400" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Testimonial({
|
|
||||||
name,
|
|
||||||
role,
|
|
||||||
content,
|
|
||||||
}: {
|
|
||||||
name: string;
|
|
||||||
role: string;
|
|
||||||
content: string;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col rounded-lg border border-slate-700 bg-slate-800/50 p-6">
|
|
||||||
<StarRating />
|
|
||||||
<p className="mt-4 mb-auto leading-relaxed text-slate-400">{content}</p>
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="font-medium text-white">{name}</div>
|
|
||||||
<div className="text-sm text-slate-500">{role}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface StatsItemProps {
|
|
||||||
icon: LucideIcon;
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function StatsItem(props: StatsItemProps) {
|
|
||||||
const Icon = props.icon;
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Icon className="h-6 w-6 text-purple-500" strokeWidth={1.5} />
|
|
||||||
<span className="text-gray-300">{props.text}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CredibilityItemProps {
|
|
||||||
icon: LucideIcon;
|
|
||||||
iconClassName: string;
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
subLabel: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CredibilityItem(props: CredibilityItemProps) {
|
|
||||||
const Icon = props.icon;
|
|
||||||
return (
|
|
||||||
<div className="group flex flex-col items-center text-center">
|
|
||||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-slate-900/50">
|
|
||||||
<Icon
|
|
||||||
className={cn(`h-6 w-6`, props.iconClassName)}
|
|
||||||
strokeWidth={1.5}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="text-3xl font-bold text-white">{props.value}</div>
|
|
||||||
<div className="mt-3 text-sm font-medium text-slate-400">
|
|
||||||
{props.label}
|
|
||||||
</div>
|
|
||||||
<div className="mt-1.5 text-xs text-slate-500">{props.subLabel}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PremiumPage() {
|
export function PremiumPage() {
|
||||||
const [activeVideoId, setActiveVideoId] = useState<string | null>(null);
|
const [activeVideoId, setActiveVideoId] = useState<string | null>(null);
|
||||||
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
title: 'Chat with Roadmaps',
|
|
||||||
description:
|
|
||||||
'Ask questions and get instant answers on any roadmap through AI',
|
|
||||||
videoId: 'fq0UgNcj3Ek',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/chat-with-roadmaps-ew2l9.png',
|
|
||||||
duration: '2:17',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Unlimited AI Courses',
|
|
||||||
description:
|
|
||||||
'No more paying for expensive courses, create unlimited courses with AI',
|
|
||||||
videoId: 'uCcQNhdVUVQ',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/ai-courses-m07ra.png',
|
|
||||||
duration: '3:07',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'In-depth Guides',
|
|
||||||
description:
|
|
||||||
'Create unlimited personalized in-depth learning guides with AI',
|
|
||||||
videoId: '5kwYjCg2Lu4',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/ai-guides-s4bjj.png',
|
|
||||||
duration: '1:33',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'AI as Learning Companion',
|
|
||||||
description:
|
|
||||||
'Use AI-powered learning companion to accelerate your roadmap progress',
|
|
||||||
videoId: 'Jso_HRviEOE',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/roadmap-ai-tools-adhqq.png',
|
|
||||||
duration: '2:45',
|
|
||||||
startTime: '18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Your Personal Coach',
|
|
||||||
description:
|
|
||||||
'Get career guidance, roadmap and personalized growth suggestions',
|
|
||||||
videoId: '77VwAeFmoIw',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/career-guidance-t2mpu.png',
|
|
||||||
duration: '3:45',
|
|
||||||
startTime: '4',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Learn Roadmap Topics',
|
|
||||||
description:
|
|
||||||
'Learn roadmap topics directly from within the nodes without leaving the roadmap',
|
|
||||||
videoId: '0jZ1Lse1Y3E',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/smarter-roadmaps-f46ku.png',
|
|
||||||
duration: '3:11',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Test Yourself',
|
|
||||||
description: 'Test your knowledge and prepare for interviews with AI',
|
|
||||||
videoId: 'ScruGC8uzjo',
|
|
||||||
thumbnail: 'https://assets.roadmap.sh/guest/test-yourself-uwzqo.png',
|
|
||||||
duration: '2:15',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Powerful Roadmap Editor',
|
|
||||||
description:
|
|
||||||
'Create and edit roadmaps with ease using our powerful roadmap editor',
|
|
||||||
videoId: 'L2HZIHIgwOI',
|
|
||||||
thumbnail:
|
|
||||||
'https://assets.roadmap.sh/guest/ai-based-roadmap-editor-ochm8.png',
|
|
||||||
duration: '1:30',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Early Access to New Features',
|
|
||||||
description:
|
|
||||||
'We have more amazing features coming soon! Be the first to try them out!',
|
|
||||||
isComingSoon: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const activeVideoStartTime =
|
const activeVideoStartTime =
|
||||||
features.find((feature) => feature.videoId === activeVideoId)?.startTime ||
|
features.find((feature) => feature.videoId === activeVideoId)?.startTime ||
|
||||||
'0';
|
'0';
|
||||||
@@ -382,7 +117,7 @@ export function PremiumPage() {
|
|||||||
|
|
||||||
{/* Pricing Section */}
|
{/* Pricing Section */}
|
||||||
<div className="mb-20 pt-10" id="pricing">
|
<div className="mb-20 pt-10" id="pricing">
|
||||||
<h2 className="mb-6 lg:mb-12 text-center text-3xl font-bold text-white">
|
<h2 className="mb-6 text-center text-3xl font-bold text-white lg:mb-12">
|
||||||
Choose Your Plan
|
Choose Your Plan
|
||||||
</h2>
|
</h2>
|
||||||
<div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-2">
|
<div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-2">
|
||||||
@@ -404,14 +139,9 @@ export function PremiumPage() {
|
|||||||
Start Monthly Plan
|
Start Monthly Plan
|
||||||
</button>
|
</button>
|
||||||
<ul className="space-y-4 text-slate-300">
|
<ul className="space-y-4 text-slate-300">
|
||||||
{[
|
{paidFeaturesList.map((feature) => (
|
||||||
'AI Learning Assistant',
|
|
||||||
'Personalized Learning Paths',
|
|
||||||
'Interactive Exercises',
|
|
||||||
'Premium Resources',
|
|
||||||
].map((feature) => (
|
|
||||||
<li key={feature} className="flex items-start">
|
<li key={feature} className="flex items-start">
|
||||||
<CheckCircle2
|
<CheckCircle
|
||||||
className="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-blue-400"
|
className="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-blue-400"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
/>
|
/>
|
||||||
@@ -444,15 +174,9 @@ export function PremiumPage() {
|
|||||||
Start Yearly Plan
|
Start Yearly Plan
|
||||||
</button>
|
</button>
|
||||||
<ul className="space-y-4 text-slate-300">
|
<ul className="space-y-4 text-slate-300">
|
||||||
{[
|
{paidFeaturesList.map((feature) => (
|
||||||
'Everything in Monthly',
|
|
||||||
'Priority Support',
|
|
||||||
'Early Access Features',
|
|
||||||
'Team Collaboration Tools',
|
|
||||||
'Advanced Analytics',
|
|
||||||
].map((feature) => (
|
|
||||||
<li key={feature} className="flex items-start">
|
<li key={feature} className="flex items-start">
|
||||||
<CheckCircle2
|
<CheckCircle
|
||||||
className="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-blue-400"
|
className="mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-blue-400"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
/>
|
/>
|
||||||
|
|||||||
11
src/components/Premium/StarRating.tsx
Normal file
11
src/components/Premium/StarRating.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { Star } from 'lucide-react';
|
||||||
|
|
||||||
|
export function StarRating() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star key={i} className="h-4 w-4 fill-current text-yellow-400" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/components/Premium/StatsItem.tsx
Normal file
16
src/components/Premium/StatsItem.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import type { LucideIcon } from 'lucide-react';
|
||||||
|
|
||||||
|
interface StatsItemProps {
|
||||||
|
icon: LucideIcon;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatsItem(props: StatsItemProps) {
|
||||||
|
const Icon = props.icon;
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Icon className="h-6 w-6 text-purple-500" strokeWidth={1.5} />
|
||||||
|
<span className="text-gray-300">{props.text}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
src/components/Premium/Testimonial.tsx
Normal file
20
src/components/Premium/Testimonial.tsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { StarRating } from './StarRating';
|
||||||
|
|
||||||
|
interface TestimonialProps {
|
||||||
|
name: string;
|
||||||
|
role: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Testimonial({ name, role, content }: TestimonialProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col rounded-lg border border-slate-700 bg-slate-800/50 p-6">
|
||||||
|
<StarRating />
|
||||||
|
<p className="mt-4 mb-auto leading-relaxed text-slate-400">{content}</p>
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="font-medium text-white">{name}</div>
|
||||||
|
<div className="text-sm text-slate-500">{role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
85
src/components/Premium/constants.ts
Normal file
85
src/components/Premium/constants.ts
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
export const paidFeaturesList = [
|
||||||
|
'Unlimited Courses and Guides',
|
||||||
|
'Unlimited AI Roadmaps',
|
||||||
|
'Chat History Access',
|
||||||
|
'AI tutor on Roadmaps',
|
||||||
|
'Custom Roadmaps (up to 100)',
|
||||||
|
'AI-Powered Roadmap Editor',
|
||||||
|
'Peronsal AI Coach',
|
||||||
|
'and more...',
|
||||||
|
];
|
||||||
|
|
||||||
|
export const features = [
|
||||||
|
{
|
||||||
|
title: 'Chat with Roadmaps',
|
||||||
|
description:
|
||||||
|
'Ask questions and get instant answers on any roadmap through AI',
|
||||||
|
videoId: 'fq0UgNcj3Ek',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/chat-with-roadmaps-ew2l9.png',
|
||||||
|
duration: '2:17',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Unlimited AI Courses',
|
||||||
|
description:
|
||||||
|
'No more paying for expensive courses, create unlimited courses with AI',
|
||||||
|
videoId: 'uCcQNhdVUVQ',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/ai-courses-m07ra.png',
|
||||||
|
duration: '3:07',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'In-depth Guides',
|
||||||
|
description:
|
||||||
|
'Create unlimited personalized in-depth learning guides with AI',
|
||||||
|
videoId: '5kwYjCg2Lu4',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/ai-guides-s4bjj.png',
|
||||||
|
duration: '1:33',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'AI as Learning Companion',
|
||||||
|
description:
|
||||||
|
'Use AI-powered learning companion to accelerate your roadmap progress',
|
||||||
|
videoId: 'Jso_HRviEOE',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/roadmap-ai-tools-adhqq.png',
|
||||||
|
duration: '2:45',
|
||||||
|
startTime: '18',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Your Personal Coach',
|
||||||
|
description:
|
||||||
|
'Get career guidance, roadmap and personalized growth suggestions',
|
||||||
|
videoId: '77VwAeFmoIw',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/career-guidance-t2mpu.png',
|
||||||
|
duration: '3:45',
|
||||||
|
startTime: '4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Learn Roadmap Topics',
|
||||||
|
description:
|
||||||
|
'Learn roadmap topics directly from within the nodes without leaving the roadmap',
|
||||||
|
videoId: '0jZ1Lse1Y3E',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/smarter-roadmaps-f46ku.png',
|
||||||
|
duration: '3:11',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Test Yourself',
|
||||||
|
description: 'Test your knowledge and prepare for interviews with AI',
|
||||||
|
videoId: 'ScruGC8uzjo',
|
||||||
|
thumbnail: 'https://assets.roadmap.sh/guest/test-yourself-uwzqo.png',
|
||||||
|
duration: '2:15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Powerful Roadmap Editor',
|
||||||
|
description:
|
||||||
|
'Create and edit roadmaps with ease using our powerful roadmap editor',
|
||||||
|
videoId: 'L2HZIHIgwOI',
|
||||||
|
thumbnail:
|
||||||
|
'https://assets.roadmap.sh/guest/ai-based-roadmap-editor-ochm8.png',
|
||||||
|
duration: '1:30',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Early Access to New Features',
|
||||||
|
description:
|
||||||
|
'We have more amazing features coming soon! Be the first to try them out!',
|
||||||
|
isComingSoon: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
7
src/components/Premium/index.ts
Normal file
7
src/components/Premium/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export { PremiumPage } from './PremiumPage';
|
||||||
|
export { CredibilityStats } from './CredibilityStats';
|
||||||
|
export { FeatureCard } from './FeatureCard';
|
||||||
|
export { StatsItem } from './StatsItem';
|
||||||
|
export { StarRating } from './StarRating';
|
||||||
|
export { Testimonial } from './Testimonial';
|
||||||
|
export { features, paidFeaturesList } from './constants';
|
||||||
Reference in New Issue
Block a user