diff --git a/.astro/settings.json b/.astro/settings.json
index 024a36f09..ac716c5b2 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -3,6 +3,6 @@
"enabled": false
},
"_variables": {
- "lastUpdateCheck": 1751901824723
+ "lastUpdateCheck": 1753099755914
}
}
\ No newline at end of file
diff --git a/src/components/Premium/PremiumPage.tsx b/src/components/Premium/PremiumPage.tsx
index b89ad521d..ca95b1e37 100644
--- a/src/components/Premium/PremiumPage.tsx
+++ b/src/components/Premium/PremiumPage.tsx
@@ -1,49 +1,64 @@
import {
- Brain,
- Bot,
- Book,
- Star,
- Rocket,
- CheckCircle2,
- Zap,
- Clock,
- Crown,
- Users2,
- Wand2,
- Play,
- GitPullRequest,
+ Brain,
+ Bot,
+ Book,
+ Star,
+ CheckCircle2,
+ Zap,
+ Clock,
+ Users2,
+ Wand2,
+ Play,
+ GitPullRequest,
+ Rocket,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { cn } from '../../lib/classname';
+import { useState } from 'react';
+import { VideoModal } from '../VideoModal';
interface FeatureCardProps {
title: string;
description: string;
Icon: LucideIcon;
duration?: string;
+ videoId: string;
+ thumbnail: string;
+ onClick: () => void;
}
-function FeatureCard({
- title,
- description,
- Icon,
- duration = '2:30',
-}: FeatureCardProps) {
+function FeatureCard(props: FeatureCardProps) {
+ const {
+ title,
+ description,
+ Icon,
+ duration = '2:30',
+ videoId,
+ thumbnail,
+ onClick,
+ } = props;
+
return (
-
-
-
{title}
-
{description}
-
+
);
}
@@ -121,6 +136,79 @@ function CredibilityItem(props: CredibilityItemProps) {
}
export function PremiumPage() {
+ const [activeVideoId, setActiveVideoId] = useState(null);
+
+ const features = [
+ {
+ icon: CheckCircle2,
+ title: 'Chat with Roadmaps',
+ description:
+ "Chat popup on every roadmap page let's you ask questions and get answers instantly",
+ videoId: 'fq0UgNcj3Ek',
+ thumbnail: 'https://assets.roadmap.sh/guest/chat-with-roadmaps-ew2l9.png',
+ duration: '2:17',
+ },
+ {
+ icon: Bot,
+ title: 'Unlimited AI Courses',
+ description:
+ 'No more paying for expensive courses, use the course creator to create unlimited courses',
+ videoId: 'uCcQNhdVUVQ',
+ thumbnail: 'https://assets.roadmap.sh/guest/ai-courses-m07ra.png',
+ duration: '3:07',
+ },
+ {
+ icon: Brain,
+ title: 'In-depth Guides',
+ description:
+ 'Create in-depth learning guides tailored to your needs using AI',
+ videoId: '5kwYjCg2Lu4',
+ thumbnail: 'https://assets.roadmap.sh/guest/ai-guides-s4bjj.png',
+ duration: '1:33',
+ },
+ {
+ icon: Rocket,
+ title: 'AI as Learning Companion',
+ description: 'Learn even faster and perform actions on roadmaps using AI',
+ videoId: 'Jso_HRviEOE',
+ thumbnail: 'https://assets.roadmap.sh/guest/roadmap-ai-tools-adhqq.png',
+ duration: '2:45',
+ startTime: '18',
+ },
+ {
+ icon: Wand2,
+ title: 'Your Personal Coach',
+ description:
+ 'Get personalized career advice, roadmap suggestions and more to accelerate your growth',
+ videoId: '77VwAeFmoIw',
+ thumbnail: 'https://assets.roadmap.sh/guest/career-guidance-t2mpu.png',
+ duration: '3:45',
+ startTime: '4',
+ },
+ {
+ icon: Book,
+ title: 'Learn Roadmap Topics',
+ description:
+ 'AI Tutor inside roadmap nodes can help you learn things without leaving the roadmap',
+ videoId: '0jZ1Lse1Y3E',
+ thumbnail: 'https://assets.roadmap.sh/guest/smarter-roadmaps-f46ku.png',
+ duration: '3:11',
+ },
+ {
+ icon: Book,
+ title: 'Test Yourself',
+ description:
+ 'Use AI to test your knowledge and prepare yourself for interviews',
+ videoId: 'ScruGC8uzjo',
+ thumbnail: 'https://assets.roadmap.sh/guest/test-yourself-uwzqo.png',
+ duration: '2:15',
+ },
+ ];
+
+ const activeVideoStartTime =
+ features.find((feature) => feature.videoId === activeVideoId)?.startTime ||
+ '0';
+
const handleUpgrade = () => {
alert('Upgrade functionality coming soon!');
};
@@ -170,96 +258,26 @@ export function PremiumPage() {
{/* Stats Section */}
-
-
+
+
- {/* Testimonials */}
-
-
- What others are saying
-
-
-
-
-
-
-
-
-
-
-
-
-
{/* Features Grid */}
-
- Everything You Need to Succeed
-
-
-
-
-
-
-
+ {features.map((feature) => (
+ setActiveVideoId(feature.videoId)}
+ />
+ ))}
@@ -415,6 +433,14 @@ export function PremiumPage() {
+
+ {activeVideoId && (
+ setActiveVideoId(null)}
+ />
+ )}
);
}
diff --git a/src/components/VideoModal.tsx b/src/components/VideoModal.tsx
index cfb99e427..d92c0352f 100644
--- a/src/components/VideoModal.tsx
+++ b/src/components/VideoModal.tsx
@@ -3,10 +3,11 @@ import { Modal } from './Modal';
type VideoModalProps = {
videoId: string;
onClose: () => void;
+ startTime?: string;
};
export function VideoModal(props: VideoModalProps) {
- const { videoId, onClose } = props;
+ const { videoId, onClose, startTime = '0' } = props;
return (