Small styling fixes on interactive carousel and tempaltes, added correct buttons fixed up subscribe page a bit

src/components/content/carousels/newTemplates/CourseTemplate.js

@@ -49,8 +49,8 @@ export function CourseTemplate({ course }) {
                     <ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
                 <CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
-                    <div className="flex items-start gap-4">
+                    <div className="flex items-center justify-center gap-4">
-                        <BookOpen className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
+                        <i className="pi pi-book text-2xl text-[#f8f8ff]"></i>
                         <div>
                             <CardTitle className="text-2xl sm:text-3xl mb-2">{course.name || course.title}</CardTitle>
                         </div>

src/components/content/carousels/newTemplates/DocumentTemplate.js

@@ -41,8 +41,8 @@ export function DocumentTemplate({ document }) {
                     <ZapDisplay zapAmount={zapAmount} event={document} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
                 <CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
-                    <div className="flex items-start gap-4">
+                    <div className="flex items-center justify-center gap-4">
-                        <FileText className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
+                        <i className="pi pi-file text-2xl text-[#f8f8ff]"></i>
                         <div>
                             <CardTitle className="text-2xl sm:text-3xl mb-2">{document.title}</CardTitle>
                         </div>

src/components/content/carousels/newTemplates/VideoTemplate.js

@@ -41,8 +41,8 @@ export function VideoTemplate({ video }) {
                     <ZapDisplay zapAmount={zapAmount} event={video} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
                 <CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
-                    <div className="flex items-start gap-4">
+                    <div className="flex items-center justify-center gap-4">
-                        <PlayCircle className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
+                        <i className="pi pi-video text-2xl text-[#f8f8ff]"></i>
                         <div>
                             <CardTitle className="text-2xl sm:text-3xl mb-2">{video.title}</CardTitle>
                         </div>

src/components/interactive-news-carousel.jsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { useState } from "react"
 import { useImageProxy } from "@/hooks/useImageProxy"
 import GenericButton from "@/components/buttons/GenericButton"
-
+import { useRouter } from "next/router"
 const promotions = [
   {
     id: 1,
@@ -57,6 +57,7 @@ const promotions = [
 export function InteractivePromotionalCarousel() {
   const [selectedPromotion, setSelectedPromotion] = useState(promotions[0])
   const { returnImageProxy } = useImageProxy();
+  const router = useRouter();
 
   return (
     <div className="flex flex-col lg:flex-row bg-gray-900 text-white m-4 mx-14 rounded-lg h-[620px]">
@@ -76,8 +77,42 @@ export function InteractivePromotionalCarousel() {
           </h2>
           <p className="text-lg text-white drop-shadow-md">{selectedPromotion.description}</p>
           <div className="flex flex-row gap-2 mt-4">
-            <GenericButton severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined />
+            {
-            <GenericButton severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
+              (() => {
+                switch (selectedPromotion.category) {
+                  case "PLEBDEVS":
+                    return (
+                      <>
+                        <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined />
+                        <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
+                        <GenericButton onClick={() => router.push('/content?tag=all')} severity="help" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined />
+                      </>
+                    );
+                  case "COURSES":
+                    return (
+                      <GenericButton onClick={() => router.push('/content?tag=courses')} icon={<i className="pi pi-book pr-2 pb-1" />} label="View All Courses" className="py-2 font-semibold" size="small" outlined />
+                    );
+                  case "WORKSHOPS":
+                    return (
+                      <GenericButton onClick={() => router.push('/content?tag=workshops')} icon={<i className="pi pi-video pr-2" />} label="View All Workshops" className="py-2 font-semibold" size="small" outlined />
+                    );
+                  case "RESOURCES":
+                    return (
+                      <GenericButton onClick={() => router.push('/content?tag=resources')} icon={<i className="pi pi-file pr-2 pb-1" />} label="View All Resources" className="py-2 font-semibold" size="small" outlined />
+                    );
+                  case "COMMUNITY":
+                    return (
+                      <GenericButton onClick={() => router.push('/feed?channel=global')} icon={<i className="pi pi-users pr-2 pb-1" />} label="Open Community Feed" className="py-2 font-semibold" size="small" outlined />
+                    );
+                  case "LIGHTNING / NOSTR":
+                    return (
+                      <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
+                    );
+                  default:
+                    return null;
+                }
+              })()
+            }
           </div>
         </div>
       </div>

src/pages/subscribe.js

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import { useToast } from '@/hooks/useToast';
 import axios from 'axios';
 import { Card } from 'primereact/card';
+import { Message } from 'primereact/message';
 import useWindowWidth from '@/hooks/useWindowWidth';
 import { Menu } from "primereact/menu";
 import GenericButton from '@/components/buttons/GenericButton';
@@ -21,6 +22,19 @@ const Subscribe = () => {
     const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
     const menu = useRef(null);
 
+    useEffect(() => {
+        if (session && session?.user) {
+            setSubscribed(session?.user.role.subscribed);
+            const subscribedAt = new Date(session?.user.role.lastPaymentAt);
+            const subscribedUntil = new Date(subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000);
+            setSubscribedUntil(subscribedUntil);
+            if (session?.user.role.subscriptionExpiredAt) {
+                const expiredAt = new Date(session?.user.role.subscriptionExpiredAt)
+                setSubscriptionExpiredAt(expiredAt);
+            }
+        }
+    }, [session, session?.user]);
+
     const handleSubscriptionSuccess = async (paymentResponse) => {
         setIsProcessing(true);
         try {
@@ -92,7 +106,7 @@ const Subscribe = () => {
         },
     ];
 
-    const subscriptionCardTitle = (
+    const subscriptionCardTitleAndButton = (
         <div className="w-full flex flex-row justify-between items-center">
             <span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
             <i
@@ -103,6 +117,12 @@ const Subscribe = () => {
         </div>
     );
 
+    const subscriptionCardTitle = (
+        <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
+        </div>
+    );
+
     return (
         <div className="p-4">
             {
@@ -110,6 +130,27 @@ const Subscribe = () => {
                     <h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
                 )
             }
+            {session && session?.user ? (
+                <Card title={subscriptionCardTitleAndButton} className="mb-6">
+                    {subscribed && (
+                        <div className="flex flex-col">
+                            <Message className="w-fit" severity="success" text="Subscribed!" />
+                            <p className="mt-4">Thank you for your support 🎉</p>
+                            <p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
+                        </div>
+                    )}
+                    {(!subscribed && !subscriptionExpiredAt) && (
+                        <div className="flex flex-col">
+                            <Message className="w-fit" severity="info" text="You currently have no active subscription" />
+                        </div>
+                    )}
+                    {subscriptionExpiredAt && (
+                        <div className="flex flex-col">
+                            <Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
+                        </div>
+                    )}
+                </Card>
+            ) : (
                 <Card title={subscriptionCardTitle} className="mb-6">
                     <p className='mb-4 text-xl'>
                         The plebdevs subscription is a monthly subscription that unlocks all of the paid content, grants you access to the plebdevs 1:1 calendar for tutoring, support, and mentorship, and gives you an exclusive invite to the pleblab bitcoin hackerspace community.
@@ -124,6 +165,7 @@ const Subscribe = () => {
                         <GenericButton label="Login" onClick={() => router.push('/auth/signin')} className='text-[#f8f8ff] w-fit' size="small" rounded icon="pi pi-user" />
                     </div>
                 </Card>
+            )}
 
             <Card title="Subscribe to PlebDevs" className="mb-6">
                 {isProcessing ? (