mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Improvements to interactivecarousel, dedicated about page
This commit is contained in:
austinkelsay
parent
cf1f1d73c3
commit
3fc44821d0
102
src/components/interactive-news-carousel.jsx
Normal file
102
src/components/interactive-news-carousel.jsx
Normal file
@ -0,0 +1,102 @@
|
||||
import Image from "next/image"
|
||||
import { useState } from "react"
|
||||
import { useImageProxy } from "@/hooks/useImageProxy"
|
||||
import GenericButton from "@/components/buttons/GenericButton"
|
||||
|
||||
const promotions = [
|
||||
{
|
||||
id: 1,
|
||||
category: "PLEBDEVS",
|
||||
title: "Learn how to code, build Bitcoin, Lightning, and Nostr apps, become a developer.",
|
||||
description: "PlebDevs is your gateway to mastering Bitcoin, Lightning, and Nostr technologies. Join our community of aspiring developers and start your journey today!",
|
||||
icon: "pi pi-code",
|
||||
image: "https://media.istockphoto.com/id/537331500/photo/programming-code-abstract-technology-background-of-software-deve.jpg?s=612x612&w=0&k=20&c=jlYes8ZfnCmD0lLn-vKvzQoKXrWaEcVypHnB5MuO-g8=",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: "COURSES",
|
||||
title: "Structured Learning Paths for Bitcoin Developers",
|
||||
description: "Dive into our comprehensive courses covering Bitcoin protocol, Lightning Network, and Nostr. From basics to advanced topics, we've got you covered.",
|
||||
icon: "pi pi-book",
|
||||
image: "https://media.istockphoto.com/id/1224500457/photo/programming-code-abstract-technology-background-of-software-developer-and-computer-script.jpg?s=612x612&w=0&k=20&c=nHMypkMTU1HUUW85Zt0Ff7MDbq17n0eVeXaoM9Knt4Q=",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category: "WORKSHOPS",
|
||||
title: "Hands-on Video Workshops",
|
||||
description: "Watch and learn with our interactive video workshops. Get practical experience building real Bitcoin and Lightning applications.",
|
||||
icon: "pi pi-video",
|
||||
image: "https://newsroom.siliconslopes.com/content/images/2018/10/code.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
category: "RESOURCES",
|
||||
title: "In-depth Resources and Documentation",
|
||||
description: "Access our extensive library of resources, including guides, documentation, and best practices for Bitcoin development.",
|
||||
icon: "pi pi-file",
|
||||
image: "https://img.freepik.com/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
category: "COMMUNITY",
|
||||
title: "Join Our Community",
|
||||
description: "Connect with other developers, share your projects, and get support from our community of Bitcoin enthusiasts.",
|
||||
icon: "pi pi-users",
|
||||
image: "https://pikwizard.com/pw/medium/50238b1cad4ff412fdafc1325efa1c9f.jpg",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
category: "LIGHTNING / NOSTR",
|
||||
title: "Lightning and Nostr integrated",
|
||||
description: "This platform is the first of its kind to integrate Lightning Network and Nostr protocols, allowing users to send and receive payments and interact with the Nostr network.",
|
||||
icon: "pi pi-bolt",
|
||||
image: "https://www.financemagnates.com/wp-content/uploads/2016/05/Bicoin-lightning.jpg",
|
||||
},
|
||||
]
|
||||
|
||||
export function InteractivePromotionalCarousel() {
|
||||
const [selectedPromotion, setSelectedPromotion] = useState(promotions[0])
|
||||
const { returnImageProxy } = useImageProxy();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row bg-gray-900 text-white m-4 mx-14 rounded-lg h-[620px]">
|
||||
<div className="lg:w-2/3 relative">
|
||||
<Image
|
||||
src={returnImageProxy(selectedPromotion.image)}
|
||||
alt={selectedPromotion.title}
|
||||
width={800}
|
||||
height={600}
|
||||
className="object-cover w-full h-full rounded-lg opacity-75" // Added opacity
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent rounded-lg" /> {/* Modified gradient */}
|
||||
<div className="absolute bottom-0 left-0 p-6 space-y-2">
|
||||
<div className="uppercase text-sm font-bold text-[#f8f8ff]">{selectedPromotion.category}</div> {/* Changed color */}
|
||||
<h2 className="text-4xl font-bold leading-tight text-white drop-shadow-lg">
|
||||
{selectedPromotion.title}
|
||||
</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 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 p-6 space-y-4"> {/* Reduced space-y */}
|
||||
{promotions.map((promo) => (
|
||||
<div
|
||||
key={promo.id}
|
||||
className={`space-y-2 cursor-pointer transition-colors duration-200 ${
|
||||
selectedPromotion.id === promo.id ? "bg-gray-800" : "hover:bg-gray-700"
|
||||
} p-3 rounded-lg shadow-lg`} // Added shadow and changed hover color
|
||||
onClick={() => setSelectedPromotion(promo)}>
|
||||
<div className="flex items-center gap-2">
|
||||
<i className={`${promo.icon} text-2xl text-[#f8f8ff]`}></i> {/* Changed icon color */}
|
||||
<div className="text-sm font-bold text-[#f8f8ff]">{promo.category}</div> {/* Changed text style */}
|
||||
</div>
|
||||
<h4 className="text-white font-semibold">{promo.title}</h4> {/* Changed text style */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -7,7 +7,6 @@ import GenericButton from '@/components/buttons/GenericButton';
|
||||
import { Menu } from 'primereact/menu';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import { useIsAdmin } from '@/hooks/useIsAdmin';
|
||||
import 'primereact/resources/primereact.min.css';
|
||||
@ -85,18 +84,28 @@ const UserAvatar = () => {
|
||||
];
|
||||
userAvatar = (
|
||||
<>
|
||||
<div onClick={(event) => menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}>
|
||||
<Image
|
||||
alt="logo"
|
||||
src={returnImageProxy(user.avatar, user.pubkey)}
|
||||
width={50}
|
||||
height={50}
|
||||
className={styles.logo}
|
||||
style={{
|
||||
boxShadow: isProfile ? '0 0 10px 3px rgba(255, 255, 255, 0.7)' : 'none',
|
||||
transition: 'box-shadow 0.3s ease-in-out',
|
||||
}}
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<div onClick={(event) => menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}>
|
||||
<GenericButton
|
||||
severity='help'
|
||||
rounded
|
||||
label="About"
|
||||
className='text-[#f8f8ff] mr-4'
|
||||
onClick={() => router.push('/about')}
|
||||
size={windowWidth < 768 ? 'small' : 'normal'}
|
||||
/>
|
||||
<Image
|
||||
alt="logo"
|
||||
src={returnImageProxy(user.avatar, user.pubkey)}
|
||||
width={50}
|
||||
height={50}
|
||||
className={styles.logo}
|
||||
style={{
|
||||
boxShadow: isProfile ? '0 0 10px 3px rgba(255, 255, 255, 0.7)' : 'none',
|
||||
transition: 'box-shadow 0.3s ease-in-out',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Menu model={items} popup ref={menu} className='w-[250px] break-words' />
|
||||
</>
|
||||
@ -104,55 +113,14 @@ const UserAvatar = () => {
|
||||
} else {
|
||||
userAvatar = (
|
||||
<div className='flex flex-row items-center justify-between'>
|
||||
<GenericButton severity='help' rounded label="About" className='text-[#f8f8ff] mr-4' onClick={() => setVisible(true)} size={windowWidth < 768 ? 'small' : 'normal'} />
|
||||
<Dialog header="About" visible={visible} onHide={() => { if (!visible) return; setVisible(false); }} className='w-[50vw] max-tab:w-[95vw]'>
|
||||
<div className="space-y-6">
|
||||
<p className="text-lg"><i className="pi pi-info-circle mr-2"></i>PlebDevs is a custom-built education platform designed to help aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold"><i className="pi pi-star mr-2"></i>Key Features:</h3>
|
||||
<ul className="space-y-4">
|
||||
<li><i className="pi pi-cloud mr-2"></i><span className="font-semibold">Content Distribution:</span> All educational content is published to Nostr and actively pulled from Nostr relays, ensuring decentralized and up-to-date information.</li>
|
||||
|
||||
<li>
|
||||
<i className="pi pi-file-edit mr-2"></i><span className="font-semibold">Content Types:</span>
|
||||
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
|
||||
<li><span className="italic">Resources:</span> Markdown documents posted as NIP-23 long-form events on Nostr.</li>
|
||||
<li><span className="italic">Workshops:</span> Enhanced markdown files with rich media support, including embedded videos, also saved as NIP-23 events.</li>
|
||||
<li><span className="italic">Courses:</span> Nostr lists that combine multiple resources and workshops into a structured learning path.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<i className="pi pi-dollar mr-2"></i><span className="font-semibold">Monetization:</span>
|
||||
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
|
||||
<li>All content is zappable, allowing for micropayments.</li>
|
||||
<li>Some content is 'paid', requiring either atomic payments or a subscription for access.</li>
|
||||
<li>Subscription options include pay-as-you-go and recurring payments via Nostr Wallet Connect.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><i className="pi pi-users mr-2"></i><span className="font-semibold">Community Engagement:</span> A dedicated community section pulls in relevant PlebDevs channels. Users can read all PlebDevs content and interact with the community via Nostr.</li>
|
||||
|
||||
<li>
|
||||
<i className="pi pi-check-circle mr-2"></i><span className="font-semibold">Subscription Benefits:</span>
|
||||
<ul className="list-disc list-inside ml-6 mt-2 space-y-1">
|
||||
<li>Access to all content, including paid resources.</li>
|
||||
<li>Exclusive 1:1 calendar for personalized support.</li>
|
||||
<li>Access to exclusive channels.</li>
|
||||
<li>Personal mentorship to ensure success in becoming a developer.</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><i className="pi pi-cog mr-2"></i><span className="font-semibold">Technology Stack:</span> The platform leverages Nostr for content distribution and community interaction, and Bitcoin Lightning Network for micropayments and subscriptions.</li>
|
||||
|
||||
<li><i className="pi pi-user mr-2"></i><span className="font-semibold">User Experience:</span> Seamless integration of learning resources, community engagement, and payment systems, with a focus on practical skills development in Bitcoin, Lightning, and Nostr technologies.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="italic text-lg"><i className="pi pi-flag mr-2"></i>PlebDevs aims to provide a comprehensive, decentralized learning experience for aspiring developers, with a strong emphasis on emerging technologies in the Bitcoin ecosystem.</p>
|
||||
</div>
|
||||
</Dialog>
|
||||
<GenericButton
|
||||
severity='help'
|
||||
rounded
|
||||
label="About"
|
||||
className='text-[#f8f8ff] mr-4'
|
||||
onClick={() => router.push('/about')}
|
||||
size={windowWidth < 768 ? 'small' : 'normal'}
|
||||
/>
|
||||
<GenericButton
|
||||
label="Login"
|
||||
icon="pi pi-user"
|
||||
|
||||
73
src/pages/about.js
Normal file
73
src/pages/about.js
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
|
||||
const AboutPage = () => {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4">
|
||||
<h1 className="text-3xl font-bold mb-6">About PlebDevs</h1>
|
||||
|
||||
<div className="bg-gray-700 rounded-lg p-6 mb-8">
|
||||
<p className="text-lg flex items-center">
|
||||
<i className="pi pi-info-circle text-blue-500 mr-3 text-2xl"></i>
|
||||
PlebDevs is a custom-built education platform designed to help new and aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.
|
||||
</p>
|
||||
<p className='text-lg font-semibold px-9 mt-4'>
|
||||
<span className='font-normal'>The pitch is simple:</span>
|
||||
<ul className='list-disc list-inside ml-6 space-y-2'>
|
||||
<li>Learn how to code 💻</li>
|
||||
<li>Build Bitcoin / Lightning / Nostr apps ⚡</li>
|
||||
<li>Become a developer 🚀</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-2xl font-bold flex items-center">
|
||||
<i className="pi pi-star text-yellow-500 mr-3 text-2xl"></i>
|
||||
Key Features
|
||||
</h2>
|
||||
|
||||
{/* Feature sections */}
|
||||
<FeatureSection
|
||||
icon="pi-cloud"
|
||||
title="Content Distribution"
|
||||
description="All educational content is published to Nostr and actively pulled from Nostr relays, ensuring decentralized and up-to-date information."
|
||||
/>
|
||||
|
||||
<FeatureSection
|
||||
icon="pi-file-edit"
|
||||
title="Content Types"
|
||||
description={
|
||||
<ul className="list-disc list-inside ml-6 space-y-2">
|
||||
<li><span className="font-bold">Resources:</span> Markdown documents posted as NIP-23 long-form events on Nostr.</li>
|
||||
<li><span className="font-bold">Workshops:</span> Enhanced markdown files with rich media support, including embedded videos, also saved as NIP-23 events.</li>
|
||||
<li><span className="font-bold">Courses:</span> Nostr lists that combine multiple resources and workshops into a structured learning path.</li>
|
||||
</ul>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 bg-gray-700 rounded-lg p-6">
|
||||
<p className="italic text-lg flex items-center">
|
||||
<i className="pi pi-flag text-blue-500 mr-3 text-2xl"></i>
|
||||
PlebDevs aims to provide a comprehensive, decentralized learning experience for aspiring developers, with a strong emphasis on emerging technologies in the Bitcoin ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureSection = ({ icon, title, description }) => (
|
||||
<div className="bg-gray-700 shadow-md rounded-lg p-6">
|
||||
<h3 className="text-xl font-bold mb-4 flex items-center">
|
||||
<i className={`pi ${icon} text-blue-500 mr-3 text-2xl`}></i>
|
||||
{title}
|
||||
</h3>
|
||||
{typeof description === 'string' ? (
|
||||
<p>{description}</p>
|
||||
) : (
|
||||
description
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default AboutPage;
|
||||
@ -4,7 +4,10 @@ import CoursesCarousel from '@/components/content/carousels/CoursesCarousel';
|
||||
import WorkshopsCarousel from '@/components/content/carousels/WorkshopsCarousel';
|
||||
import HeroBanner from '@/components/banner/HeroBanner';
|
||||
import ResourcesCarousel from '@/components/content/carousels/ResourcesCarousel';
|
||||
import { InteractivePromotionalCarousel } from '@/components/interactive-news-carousel';
|
||||
|
||||
// todo append link to plebdevs item in each published course or resource description
|
||||
// todo perhaps need to update slug on details on course pages to be d tag instead of db id
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
@ -15,7 +18,8 @@ export default function Home() {
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main>
|
||||
<HeroBanner />
|
||||
{/* <HeroBanner /> */}
|
||||
<InteractivePromotionalCarousel />
|
||||
<CoursesCarousel />
|
||||
<WorkshopsCarousel />
|
||||
<ResourcesCarousel />
|
||||
|
||||
193
src/pages/subscribe.js
Normal file
193
src/pages/subscribe.js
Normal file
@ -0,0 +1,193 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import axios from 'axios';
|
||||
import { Card } from 'primereact/card';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import { Menu } from "primereact/menu";
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
|
||||
|
||||
const Subscribe = () => {
|
||||
const { data: session, update } = useSession();
|
||||
const { showToast } = useToast();
|
||||
const router = useRouter();
|
||||
const windowWidth = useWindowWidth();
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [subscribed, setSubscribed] = useState(false);
|
||||
const [subscribedUntil, setSubscribedUntil] = useState(null);
|
||||
const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
|
||||
const menu = useRef(null);
|
||||
|
||||
const handleSubscriptionSuccess = async (paymentResponse) => {
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
const response = await axios.post('/api/subscription/create', {
|
||||
paymentResponse,
|
||||
});
|
||||
if (response.data.success) {
|
||||
showToast('success', 'Subscription successful!');
|
||||
await update();
|
||||
router.push('/dashboard');
|
||||
} else {
|
||||
showToast('error', 'Subscription failed. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Subscription error:', error);
|
||||
showToast('error', 'An error occurred. Please try again.');
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubscriptionError = (error) => {
|
||||
console.error('Subscription error:', error);
|
||||
showToast('error', 'An error occurred during subscription. Please try again.');
|
||||
};
|
||||
|
||||
const handleRecurringSubscriptionSuccess = async (paymentResponse) => {
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
const response = await axios.post('/api/subscription/recurring', {
|
||||
paymentResponse,
|
||||
});
|
||||
if (response.data.success) {
|
||||
showToast('success', 'Recurring subscription set up successfully!');
|
||||
await update();
|
||||
router.push('/dashboard');
|
||||
} else {
|
||||
showToast('error', 'Failed to set up recurring subscription. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Recurring subscription error:', error);
|
||||
showToast('error', 'An error occurred. Please try again.');
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: "Renew Subscription",
|
||||
icon: "pi pi-bolt",
|
||||
command: () => {
|
||||
// Add your renew functionality here
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Schedule 1:1",
|
||||
icon: "pi pi-calendar",
|
||||
command: () => {
|
||||
// Add your schedule functionality here
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Cancel Subscription",
|
||||
icon: "pi pi-trash",
|
||||
command: () => {
|
||||
// Add your cancel functionality here
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<i
|
||||
className="pi pi-ellipsis-h text-2xlcursor-pointer hover:opacity-75"
|
||||
onClick={(e) => menu.current.toggle(e)}
|
||||
></i>
|
||||
<Menu model={menuItems} popup ref={menu} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
{
|
||||
windowWidth < 768 && (
|
||||
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
|
||||
)
|
||||
}
|
||||
<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.
|
||||
</p>
|
||||
|
||||
<p className='text-xl'>
|
||||
The plebdevs subscription is Lightning only and you can subscribe a month at a time with the pay as you go option or easily setup an auto recurring monthly subscription using Nostr Wallet Connect.
|
||||
</p>
|
||||
|
||||
<div className='flex flex-col w-fit mt-4 bg-gray-900 p-4 rounded-lg'>
|
||||
<p className='text-xl pb-8'>Login to start your subscription</p>
|
||||
<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 ? (
|
||||
<div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
|
||||
<ProgressSpinner />
|
||||
<span className="ml-2">Processing subscription...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-2xl font-semibold mb-4">Choose your subscription plan:</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Card className='bg-gray-900 w-fit'>
|
||||
<h3 className="text-xl font-semibold mb-2">Monthly Subscription</h3>
|
||||
<p className="mb-4">Get access to all PlebDevs features / content one month at a time.</p>
|
||||
<SubscriptionPaymentButtons
|
||||
onSuccess={handleSubscriptionSuccess}
|
||||
onError={handleSubscriptionError}
|
||||
amount={10}
|
||||
currency="USD"
|
||||
buttonText="Subscribe for $10/month"
|
||||
oneTime={true}
|
||||
/>
|
||||
</Card>
|
||||
<Card className='bg-gray-900 w-fit'>
|
||||
<h3 className="text-xl font-semibold mb-2">Recurring Monthly Subscription</h3>
|
||||
<p className="mb-4">Setup auto recurring monthly payments for uninterrupted access.</p>
|
||||
<SubscriptionPaymentButtons
|
||||
onSuccess={handleRecurringSubscriptionSuccess}
|
||||
onError={handleSubscriptionError}
|
||||
amount={10}
|
||||
currency="USD"
|
||||
buttonText="Set up recurring $10/month"
|
||||
recurring={true}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card title="Subscription Benefits" className="mb-6">
|
||||
<ul className="list-disc pl-6">
|
||||
<li>Access to exclusive content</li>
|
||||
<li>Priority support</li>
|
||||
<li>Early access to new features</li>
|
||||
<li>Community forums</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card title="Frequently Asked Questions" className="mb-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">How does the subscription work?</h3>
|
||||
<p>Our subscription provides monthly access to all PlebDevs features. You can choose between a one-time payment or a recurring subscription.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Can I cancel my subscription?</h3>
|
||||
<p>Yes, you can cancel your subscription at any time. Your access will remain active until the end of the current billing period.</p>
|
||||
</div>
|
||||
{/* Add more FAQ items as needed */}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Subscribe;
|
||||
Loading…
x
Reference in New Issue
Block a user