diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro index 50d4e4fa6..9f7298902 100644 --- a/src/components/Navigation/Navigation.astro +++ b/src/components/Navigation/Navigation.astro @@ -5,6 +5,7 @@ import { NavigationDropdown } from '../NavigationDropdown'; import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu'; import { AccountDropdown } from './AccountDropdown'; import { CourseAnnouncement } from '../SQLCourse/CourseAnnouncement'; +import { Fragment } from 'react'; ---
diff --git a/src/components/Premium/PremiumPage.tsx b/src/components/Premium/PremiumPage.tsx new file mode 100644 index 000000000..25bf30010 --- /dev/null +++ b/src/components/Premium/PremiumPage.tsx @@ -0,0 +1,281 @@ +import { + Brain, + Bot, + Book, + Star, + Users, + Rocket, + CheckCircle2, + Zap, + Clock, + Crown, + Users2, + Wand2, +} from 'lucide-react'; +import type { LucideIcon } from 'lucide-react'; + +interface FeatureCardProps { + title: string; + description: string; + Icon: LucideIcon; +} + +function FeatureCard({ title, description, Icon }: FeatureCardProps) { + return ( +
+ +

{title}

+

{description}

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

{content}

+
+
{name}
+
{role}
+
+
+ ); +} + +export function PremiumPage() { + const handleUpgrade = () => { + alert('Upgrade functionality coming soon!'); + }; + + return ( +
+
+ {/* Hero Section */} +
+
+
+ + + Unlock All Premium Features + +
+

+ Learn Faster with AI Tutor +

+

+ Get personalized roadmaps, instant answers, and expert guidance to + accelerate your learning journey. +

+ +
+
+ + {/* Stats Section */} +
+
+ + +100K Learners +
+
+ + +135K Roadmaps +
+
+ + +90K Courses +
+
+ + +1M AI Chats +
+
+ + {/* Testimonials */} +
+

+ What others are saying +

+
+ + + +
+
+ + {/* Features Grid */} +
+

+ Everything You Need to Succeed +

+
+ + + + + + +
+
+ + {/* Pricing Section */} +
+

+ Choose Your Plan +

+
+
+

Monthly

+
+
+ $10 + /month +
+

+ Perfect for continuous learning +

+
+ +
    + {[ + 'AI Learning Assistant', + 'Personalized Learning Paths', + 'Interactive Exercises', + 'Premium Resources', + ].map((feature) => ( +
  • + + {feature} +
    • + ))} +
+
+ +
+
+ + Most Popular + +
+

Yearly

+
+
+ $100 + /year +
+

+ Save $20 (2 months free) +

+
+ +
    + {[ + 'Everything in Monthly', + 'Priority Support', + 'Early Access Features', + 'Team Collaboration Tools', + 'Advanced Analytics', + ].map((feature) => ( +
  • + + {feature} +
    • + ))} +
+
+
+
+ + {/* Final CTA */} +
+

+ Ready to Take Your Skills to the Next Level? +

+

+ Join the community of developers who are accelerating their careers + with our premium features. +

+
+ + 50,000+ developers already enrolled +
+
+
+
+ ); +} diff --git a/src/pages/premium.astro b/src/pages/premium.astro new file mode 100644 index 000000000..1440e747e --- /dev/null +++ b/src/pages/premium.astro @@ -0,0 +1,11 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +import { PremiumPage } from '../components/Premium/PremiumPage'; +--- + + + + +
+
+