From c9d602f044c6cb71df8b377a0a429a42c9bd0571 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 22 Jul 2025 19:24:13 +0100 Subject: [PATCH] Refactor premium page --- src/components/Premium/CredibilityStats.tsx | 83 ++++++ src/components/Premium/FeatureCard.tsx | 70 +++++ src/components/Premium/PremiumPage.tsx | 296 +------------------- src/components/Premium/StarRating.tsx | 11 + src/components/Premium/StatsItem.tsx | 16 ++ src/components/Premium/Testimonial.tsx | 20 ++ src/components/Premium/constants.ts | 85 ++++++ src/components/Premium/index.ts | 7 + 8 files changed, 302 insertions(+), 286 deletions(-) create mode 100644 src/components/Premium/CredibilityStats.tsx create mode 100644 src/components/Premium/FeatureCard.tsx create mode 100644 src/components/Premium/StarRating.tsx create mode 100644 src/components/Premium/StatsItem.tsx create mode 100644 src/components/Premium/Testimonial.tsx create mode 100644 src/components/Premium/constants.ts create mode 100644 src/components/Premium/index.ts diff --git a/src/components/Premium/CredibilityStats.tsx b/src/components/Premium/CredibilityStats.tsx new file mode 100644 index 000000000..58eee3275 --- /dev/null +++ b/src/components/Premium/CredibilityStats.tsx @@ -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 ( +
+
+ +
+
{props.value}
+
+ {props.label} +
+
{props.subLabel}
+
+ ); +} + +export function CredibilityStats() { + return ( +
+
+
+

+ The Platform Developers Trust +

+

+ Join millions of developers in their learning journey +

+
+ +
+ + + + +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/Premium/FeatureCard.tsx b/src/components/Premium/FeatureCard.tsx new file mode 100644 index 000000000..0b3c4fbcf --- /dev/null +++ b/src/components/Premium/FeatureCard.tsx @@ -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 ( +
+
+
+
+ +
+
+
+
+

{title}

+

+ {description} +

+
+
+ ); + } + + return ( + + ); +} \ No newline at end of file diff --git a/src/components/Premium/PremiumPage.tsx b/src/components/Premium/PremiumPage.tsx index 6bdf40e96..154322be5 100644 --- a/src/components/Premium/PremiumPage.tsx +++ b/src/components/Premium/PremiumPage.tsx @@ -1,290 +1,25 @@ -import type { LucideIcon } from 'lucide-react'; import { Book, Bot, - CheckCircle2, + CheckCircle, Clock, - GitPullRequest, - Lock, PartyPopper, - Play, - Star, Users2, Wand2, Zap, } from 'lucide-react'; import { useState } from 'react'; -import { cn } from '../../lib/classname'; 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 ( -
-
-
-

- The Platform Developers Trust -

-

- Join millions of developers in their learning journey -

-
- -
- - - - -
-
-
- ); -} - -function FeatureCard(props: FeatureCardProps) { - const { - title, - description, - duration = '2:30', - videoId, - thumbnail, - onClick, - isComingSoon = false, - } = props; - - if (isComingSoon) { - return ( -
-
-
-
- -
-
-
-
-

{title}

-

- {description} -

-
-
- ); - } - - return ( - - ); -} - -function StarRating() { - return ( -
- {[...Array(5)].map((_, i) => ( - - ))} -
- ); -} - -function Testimonial({ - name, - role, - content, -}: { - name: string; - role: string; - content: string; -}) { - return ( -
- -

{content}

-
-
{name}
-
{role}
-
-
- ); -} - -interface StatsItemProps { - icon: LucideIcon; - text: string; -} - -function StatsItem(props: StatsItemProps) { - const Icon = props.icon; - return ( -
- - {props.text} -
- ); -} - -interface CredibilityItemProps { - icon: LucideIcon; - iconClassName: string; - value: string; - label: string; - subLabel: string; -} - -function CredibilityItem(props: CredibilityItemProps) { - const Icon = props.icon; - return ( -
-
- -
-
{props.value}
-
- {props.label} -
-
{props.subLabel}
-
- ); -} export function PremiumPage() { const [activeVideoId, setActiveVideoId] = useState(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 = features.find((feature) => feature.videoId === activeVideoId)?.startTime || '0'; @@ -382,7 +117,7 @@ export function PremiumPage() { {/* Pricing Section */}
-

+

Choose Your Plan

@@ -404,14 +139,9 @@ export function PremiumPage() { Start Monthly Plan
    - {[ - 'AI Learning Assistant', - 'Personalized Learning Paths', - 'Interactive Exercises', - 'Premium Resources', - ].map((feature) => ( + {paidFeaturesList.map((feature) => (
  • - @@ -444,15 +174,9 @@ export function PremiumPage() { Start Yearly Plan
      - {[ - 'Everything in Monthly', - 'Priority Support', - 'Early Access Features', - 'Team Collaboration Tools', - 'Advanced Analytics', - ].map((feature) => ( + {paidFeaturesList.map((feature) => (
    • - diff --git a/src/components/Premium/StarRating.tsx b/src/components/Premium/StarRating.tsx new file mode 100644 index 000000000..bbca70633 --- /dev/null +++ b/src/components/Premium/StarRating.tsx @@ -0,0 +1,11 @@ +import { Star } from 'lucide-react'; + +export function StarRating() { + return ( +
      + {[...Array(5)].map((_, i) => ( + + ))} +
      + ); +} \ No newline at end of file diff --git a/src/components/Premium/StatsItem.tsx b/src/components/Premium/StatsItem.tsx new file mode 100644 index 000000000..8f0e1166e --- /dev/null +++ b/src/components/Premium/StatsItem.tsx @@ -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 ( +
      + + {props.text} +
      + ); +} \ No newline at end of file diff --git a/src/components/Premium/Testimonial.tsx b/src/components/Premium/Testimonial.tsx new file mode 100644 index 000000000..9c7087829 --- /dev/null +++ b/src/components/Premium/Testimonial.tsx @@ -0,0 +1,20 @@ +import { StarRating } from './StarRating'; + +interface TestimonialProps { + name: string; + role: string; + content: string; +} + +export function Testimonial({ name, role, content }: TestimonialProps) { + return ( +
      + +

      {content}

      +
      +
      {name}
      +
      {role}
      +
      +
      + ); +} \ No newline at end of file diff --git a/src/components/Premium/constants.ts b/src/components/Premium/constants.ts new file mode 100644 index 000000000..4c7fb8c5d --- /dev/null +++ b/src/components/Premium/constants.ts @@ -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, + }, +]; \ No newline at end of file diff --git a/src/components/Premium/index.ts b/src/components/Premium/index.ts new file mode 100644 index 000000000..9d7d50838 --- /dev/null +++ b/src/components/Premium/index.ts @@ -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'; \ No newline at end of file