wip

src/components/Premium/FeatureCard.tsx

@@ -1,4 +1,4 @@
-import { Lock, Play } from 'lucide-react';
+import { ArrowUpRightIcon, Lock, Play } from 'lucide-react';
 
 interface FeatureCardProps {
   title: string;
@@ -8,6 +8,7 @@ interface FeatureCardProps {
   thumbnail?: string;
   onClick?: () => void;
   isComingSoon?: boolean;
+  link?: string;
 }
 
 export function FeatureCard(props: FeatureCardProps) {
@@ -19,6 +20,7 @@ export function FeatureCard(props: FeatureCardProps) {
     thumbnail,
     onClick,
     isComingSoon = false,
+    link,
   } = props;
 
   if (isComingSoon) {
@@ -58,13 +60,29 @@ export function FeatureCard(props: FeatureCardProps) {
           <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="absolute top-1 right-1 flex items-center gap-2">
+        {link && (
+          <a
+            target="_blank"
+            href={link}
+            className="hidden rounded bg-white/20 px-1 py-1 text-xs text-white backdrop-blur-sm group-hover:block hover:bg-white/30"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <ArrowUpRightIcon className="h-4 w-4" />
+          </a>
+        )}
+
+        <span className="rounded bg-black/60 px-2 py-1 text-xs text-white backdrop-blur-sm">
+          {duration}
+        </span>
+      </div>
       <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>
   );
-} 
+}

src/components/Premium/PremiumPage.tsx

@@ -1,4 +1,5 @@
 import {
+  ArrowUpRightIcon,
   Book,
   Bot,
   CheckCircle,
@@ -33,8 +34,9 @@ export function PremiumPage() {
     useState<AllowedSubscriptionInterval | null>(null);
 
   // State for plan switching confirmation modal
-  const [switchPlanDetails, setSwitchPlanDetails] =
-    useState<(typeof USER_SUBSCRIPTION_PLAN_PRICES)[number] | null>(null);
+  const [switchPlanDetails, setSwitchPlanDetails] = useState<
+    (typeof USER_SUBSCRIPTION_PLAN_PRICES)[number] | null
+  >(null);
 
   const toast = useToast();
 
@@ -87,7 +89,9 @@ export function PremiumPage() {
   const isSubscriptionCanceled = ['canceled', 'incomplete_expired'].includes(
     billingDetails?.status || '',
   );
-  const currentPriceId = isSubscriptionCanceled ? null : billingDetails?.priceId;
+  const currentPriceId = isSubscriptionCanceled
+    ? null
+    : billingDetails?.priceId;
 
   const currentPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(
     (plan) => plan.priceId === currentPriceId,
@@ -161,24 +165,25 @@ export function PremiumPage() {
               Generate unlimited courses about any topic, get career guidance
               and instant answers from AI, test your skills and more
             </p>
-            <div className="flex justify-center">
+            <div className="flex items-center justify-center gap-4">
               <a
                 href="#pricing"
-                className="group mx-auto block rounded-2xl bg-gradient-to-b from-indigo-600 to-indigo-700 px-8 py-4 shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-indigo-500/25"
+                className="group block rounded-2xl bg-gradient-to-b from-indigo-600 to-indigo-700 px-8 py-4 shadow-lg transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-indigo-500/25"
               >
                 <span className="flex items-center justify-center gap-3 text-lg text-white sm:hidden">
                   Upgrade now
                 </span>
                 <span className="hidden items-center justify-center gap-3 text-lg sm:flex">
-                  <span className="font-medium text-indigo-100">
-                    Upgrade for just
-                  </span>
+                  <span className="font-medium text-indigo-100">Upgrade</span>
                   <span className="font-bold text-white">$10/month</span>
-                  <span className="text-white transition-transform duration-200 group-hover:translate-x-1">
-                    →
-                  </span>
                 </span>
               </a>
+              <button className="group block rounded-2xl bg-gradient-to-b from-slate-600 to-slate-700 px-8 py-4 opacity-70 shadow-lg transition-all hover:-translate-y-0.5 hover:opacity-100 hover:shadow-xl hover:shadow-slate-500/25">
+                <span className="flex items-center justify-center gap-3 text-lg text-white">
+                  Try for free
+                  <ArrowUpRightIcon className="h-5 w-5" />
+                </span>
+              </button>
             </div>
             <p className="mt-5 flex items-center justify-center gap-2 text-sm">
               <Clock className="h-3 w-3 text-white" />
@@ -215,6 +220,7 @@ export function PremiumPage() {
                 thumbnail={feature.thumbnail}
                 duration={feature.duration}
                 isComingSoon={feature.isComingSoon}
+                link={feature.link}
                 onClick={
                   feature.videoId
                     ? () => setActiveVideoId(feature.videoId)
@@ -248,9 +254,9 @@ export function PremiumPage() {
                 disabled={
                   isCreatingCheckoutSession || currentPlan?.interval === 'month'
                 }
-                className={`mb-8 w-full rounded-lg px-6 py-3 font-medium transition-colors disabled:opacity-50  ${
+                className={`mb-8 w-full rounded-lg px-6 py-3 font-medium transition-colors disabled:opacity-50 ${
                   currentPlan?.interval === 'month'
-                    ? 'bg-gray-800 text-white cursor-not-allowed'
+                    ? 'cursor-not-allowed bg-gray-800 text-white'
                     : 'bg-blue-600 text-white hover:bg-blue-700'
                 }`}
               >
@@ -301,9 +307,9 @@ export function PremiumPage() {
                 disabled={
                   isCreatingCheckoutSession || currentPlan?.interval === 'year'
                 }
-                className={`mb-8 w-full rounded-lg px-6 py-3 font-medium transition-colors disabled:opacity-50  ${
+                className={`mb-8 w-full rounded-lg px-6 py-3 font-medium transition-colors disabled:opacity-50 ${
                   currentPlan?.interval === 'year'
-                    ? 'bg-green-600 text-white cursor-not-allowed'
+                    ? 'cursor-not-allowed bg-green-600 text-white'
                     : 'bg-blue-600 text-white hover:bg-blue-700'
                 }`}
               >
@@ -334,7 +340,6 @@ export function PremiumPage() {
             </div>
           </div>
         </div>
-
       </div>
 
       {activeVideoId && (

src/components/Premium/constants.ts

@@ -10,14 +10,6 @@ export const paidFeaturesList = [
 ];
 
 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:
@@ -25,6 +17,7 @@ export const features = [
     videoId: 'uCcQNhdVUVQ',
     thumbnail: 'https://assets.roadmap.sh/guest/ai-courses-m07ra.png',
     duration: '3:07',
+    link: 'https://roadmap.sh/ai',
   },
   {
     title: 'In-depth Guides',
@@ -33,6 +26,16 @@ export const features = [
     videoId: '5kwYjCg2Lu4',
     thumbnail: 'https://assets.roadmap.sh/guest/ai-guides-s4bjj.png',
     duration: '1:33',
+    link: 'https://roadmap.sh/ai?format=guide',
+  },
+  {
+    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',
+    link: 'https://roadmap.sh/ai/roadmap-chat',
   },
   {
     title: 'AI as Learning Companion',
@@ -42,6 +45,7 @@ export const features = [
     thumbnail: 'https://assets.roadmap.sh/guest/roadmap-ai-tools-adhqq.png',
     duration: '2:45',
     startTime: '18',
+    link: 'https://roadmap.sh/ai/roadmap-chat',
   },
   {
     title: 'Your Personal Coach',
@@ -51,6 +55,7 @@ export const features = [
     thumbnail: 'https://assets.roadmap.sh/guest/career-guidance-t2mpu.png',
     duration: '3:45',
     startTime: '4',
+    link: 'https://roadmap.sh/ai/chat',
   },
   {
     title: 'Learn Roadmap Topics',
@@ -59,7 +64,8 @@ export const features = [
     videoId: '0jZ1Lse1Y3E',
     thumbnail: 'https://assets.roadmap.sh/guest/smarter-roadmaps-f46ku.png',
     duration: '3:11',
-    startTime: '5'
+    startTime: '5',
+    link: 'https://roadmap.sh/roadmaps',
   },
   {
     title: 'Test Yourself',
@@ -76,6 +82,7 @@ export const features = [
     thumbnail:
       'https://assets.roadmap.sh/guest/ai-based-roadmap-editor-ochm8.png',
     duration: '1:30',
+    link: 'https://roadmap.sh/ai/quiz',
   },
   {
     title: 'Early Access to New Features',
@@ -83,4 +90,4 @@ export const features = [
       'We have more amazing features coming soon! Be the first to try them out!',
     isComingSoon: true,
   },
-]; 
+];