From 3fc44821d07dcf4a48244e9efd7a6271fc1e85a3 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Fri, 13 Sep 2024 11:39:44 -0500 Subject: [PATCH] Improvements to interactivecarousel, dedicated about page --- src/components/interactive-news-carousel.jsx | 102 ++++++++++ src/components/navbar/user/UserAvatar.js | 90 +++------ src/pages/about.js | 73 +++++++ src/pages/index.js | 6 +- src/pages/subscribe.js | 193 +++++++++++++++++++ 5 files changed, 402 insertions(+), 62 deletions(-) create mode 100644 src/components/interactive-news-carousel.jsx create mode 100644 src/pages/about.js create mode 100644 src/pages/subscribe.js diff --git a/src/components/interactive-news-carousel.jsx b/src/components/interactive-news-carousel.jsx new file mode 100644 index 0000000..a010048 --- /dev/null +++ b/src/components/interactive-news-carousel.jsx @@ -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 ( +
+
+ {selectedPromotion.title} +
{/* Modified gradient */} +
+
{selectedPromotion.category}
{/* Changed color */} +

+ {selectedPromotion.title} +

+

{selectedPromotion.description}

+
+ } label="Learn More" className="py-2 font-semibold" size="small" outlined /> + } label="Subscribe" className="py-2 font-semibold" size="small" outlined /> +
+
+
+
{/* Reduced space-y */} + {promotions.map((promo) => ( +
setSelectedPromotion(promo)}> +
+ {/* Changed icon color */} +
{promo.category}
{/* Changed text style */} +
+

{promo.title}

{/* Changed text style */} +
+ ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/navbar/user/UserAvatar.js b/src/components/navbar/user/UserAvatar.js index e4af999..822978a 100644 --- a/src/components/navbar/user/UserAvatar.js +++ b/src/components/navbar/user/UserAvatar.js @@ -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 = ( <> -
menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}> - logo +
menu.current.toggle(event)} className={`flex flex-row items-center justify-between cursor-pointer hover:opacity-75`}> + router.push('/about')} + size={windowWidth < 768 ? 'small' : 'normal'} /> + logo +
@@ -104,55 +113,14 @@ const UserAvatar = () => { } else { userAvatar = (
- setVisible(true)} size={windowWidth < 768 ? 'small' : 'normal'} /> - { if (!visible) return; setVisible(false); }} className='w-[50vw] max-tab:w-[95vw]'> -
-

PlebDevs is a custom-built education platform designed to help aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.

- -
-

Key Features:

-
    -
  • Content Distribution: All educational content is published to Nostr and actively pulled from Nostr relays, ensuring decentralized and up-to-date information.
    • - -
  • - Content Types: -
      -
    • Resources: Markdown documents posted as NIP-23 long-form events on Nostr.
      • -
    • Workshops: Enhanced markdown files with rich media support, including embedded videos, also saved as NIP-23 events.
      • -
    • Courses: Nostr lists that combine multiple resources and workshops into a structured learning path.
      • -
    -
    • - -
  • - Monetization: -
      -
    • All content is zappable, allowing for micropayments.
      • -
    • Some content is 'paid', requiring either atomic payments or a subscription for access.
      • -
    • Subscription options include pay-as-you-go and recurring payments via Nostr Wallet Connect.
      • -
    -
    • - -
  • Community Engagement: A dedicated community section pulls in relevant PlebDevs channels. Users can read all PlebDevs content and interact with the community via Nostr.
    • - -
  • - Subscription Benefits: -
      -
    • Access to all content, including paid resources.
      • -
    • Exclusive 1:1 calendar for personalized support.
      • -
    • Access to exclusive channels.
      • -
    • Personal mentorship to ensure success in becoming a developer.
      • -
    -
    • - -
  • Technology Stack: The platform leverages Nostr for content distribution and community interaction, and Bitcoin Lightning Network for micropayments and subscriptions.
    • - -
  • User Experience: Seamless integration of learning resources, community engagement, and payment systems, with a focus on practical skills development in Bitcoin, Lightning, and Nostr technologies.
    • -
-
- -

PlebDevs aims to provide a comprehensive, decentralized learning experience for aspiring developers, with a strong emphasis on emerging technologies in the Bitcoin ecosystem.

-
- + router.push('/about')} + size={windowWidth < 768 ? 'small' : 'normal'} + /> { + return ( +
+

About PlebDevs

+ +
+

+ + PlebDevs is a custom-built education platform designed to help new and aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies. +

+

+ The pitch is simple: +

    +
  • Learn how to code 💻
    • +
  • Build Bitcoin / Lightning / Nostr apps âš¡
    • +
  • Become a developer 🚀
    • +
+

+
+ +
+

+ + Key Features +

+ + {/* Feature sections */} + + + +
  • Resources: Markdown documents posted as NIP-23 long-form events on Nostr.
    • +
  • Workshops: Enhanced markdown files with rich media support, including embedded videos, also saved as NIP-23 events.
    • +
  • Courses: Nostr lists that combine multiple resources and workshops into a structured learning path.
    • + + } + /> +
    + +
    +

    + + PlebDevs aims to provide a comprehensive, decentralized learning experience for aspiring developers, with a strong emphasis on emerging technologies in the Bitcoin ecosystem. +

    +
    +
    + ); +}; + +const FeatureSection = ({ icon, title, description }) => ( +
    +

    + + {title} +

    + {typeof description === 'string' ? ( +

    {description}

    + ) : ( + description + )} +
    +); + +export default AboutPage; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 1f19b08..12338ac 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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() {
    - + {/* */} + diff --git a/src/pages/subscribe.js b/src/pages/subscribe.js new file mode 100644 index 0000000..795c7b4 --- /dev/null +++ b/src/pages/subscribe.js @@ -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 = ( +
    + Plebdevs Subscription + menu.current.toggle(e)} + > + +
    + ); + + return ( +
    + { + windowWidth < 768 && ( +

    Subscription Management

    + ) + } + +

    + 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. +

    + +

    + 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. +

    + +
    +

    Login to start your subscription

    + router.push('/auth/signin')} className='text-[#f8f8ff] w-fit' size="small" rounded icon="pi pi-user" /> +
    +     + + + {isProcessing ? ( +
    + + Processing subscription... +
    + ) : ( +
    +

    Choose your subscription plan:

    +
    + +

    Monthly Subscription

    +

    Get access to all PlebDevs features / content one month at a time.

    + +     + +

    Recurring Monthly Subscription

    +

    Setup auto recurring monthly payments for uninterrupted access.

    + +     +
    +
    + )} +     + + +
      +
    • Access to exclusive content
      • +
    • Priority support
      • +
    • Early access to new features
      • +
    • Community forums
      • +
    +     + + +
    +
    +

    How does the subscription work?

    +

    Our subscription provides monthly access to all PlebDevs features. You can choose between a one-time payment or a recurring subscription.

    +
    +
    +

    Can I cancel my subscription?

    +

    Yes, you can cancel your subscription at any time. Your access will remain active until the end of the current billing period.

    +
    + {/* Add more FAQ items as needed */} +
    +     +
    + ); +}; + +export default Subscribe;