Made it prettier

public/images/nwc-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="120" fill="none"><g clip-path="url(#a)"><path fill="#472459" d="M127.2 65.67c-5.13 5.11-12.23 3.88-17.35-1.25l-41.4-41.6 19.4-19.47a11.35 11.35 0 0 1 18.4 3.37l21.58 56.22a2.5 2.5 0 0 1-.57 2.67l-13.63 13.57 13.58-13.51Z"/><path fill="url(#b)" d="m109.85 64.42-54.16-54.4a13.13 13.13 0 0 0-18.57-.05L3.87 43.07a13.13 13.13 0 0 0-.05 18.57l54.16 54.4a13.13 13.13 0 0 0 18.57.04l10.7-10.64 3.12-3.12-10-10.03a19.04 19.04 0 0 1-23.83-2.56l-6.8-6.85a2.46 2.46 0 0 1 0-3.5l3.35-3.32-8.4-8.46a3.67 3.67 0 0 1-.34-4.9 3.57 3.57 0 0 1 5.29-.23l8.51 8.56 6.68-6.63-8.41-8.46a3.67 3.67 0 0 1-.33-4.9 3.58 3.58 0 0 1 5.3-.24l8.5 8.57 3.36-3.34a2.47 2.47 0 0 1 3.5.01l6.8 6.84a19.03 19.03 0 0 1 2.41 23.86l10 10.03 5.69-5.67 8.16-8.12 17.4-17.31c-5.15 5.11-12.25 3.88-17.36-1.25Z"/></g><defs><linearGradient id="b" x1="63.6" x2="63.6" y1="6.15" y2="119.91" gradientUnits="userSpaceOnUse"><stop stop-color="#FFCA4A"/><stop offset="1" stop-color="#F7931A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h128v119.91H0z"/></clipPath></defs></svg>

src/components/bitcoinConnect/SubscriptionPaymentButton.js

@@ -7,9 +7,12 @@ import { useToast } from '@/hooks/useToast';
 import { useSession } from 'next-auth/react';
 import { webln, nwc } from '@getalby/sdk';
 import { useRouter } from 'next/router';
+import { Divider } from 'primereact/divider';
 import dynamic from 'next/dynamic';
 import AlbyButton from '@/components/buttons/AlbyButton';
 import axios from 'axios';
+import Image from 'next/image';
+
 const PaymentModal = dynamic(
     () => import('@getalby/bitcoin-connect-react').then((mod) => mod.Payment),
     { ssr: false }
@@ -192,17 +195,29 @@ const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptio
                             setInvoice(invoice);
                         }}
                         severity='primary'
-                        className="mt-4 text-[#f8f8ff]"
+                        className="w-fit mt-4 text-[#f8f8ff]"
                     />
                     <Button
                         label="Setup Recurring Subscription"
-                        className="mt-4 text-[#f8f8ff]"
+                        icon={
+                            <Image
+                                src="/images/nwc-logo.svg"
+                                alt="NWC Logo"
+                                width={16}
+                                height={16}
+                                className="mr-2"
+                            />
+                        }
+                        severity='help'
+                        className="w-fit mt-4 text-[#f8f8ff] bg-purple-600"
                         onClick={() => setShowRecurringOptions(!showRecurringOptions)}
                     />
                 </div>
             )}
             {showRecurringOptions && (
-                <div className="w-fit mx-auto flex flex-col items-center mt-4">
+                <>
+                    <Divider />
+                    <div className="w-fit mx-auto flex flex-col items-center mt-24">
                     <AlbyButton handleSubmit={handleRecurringSubscription} />
                     <span className='my-4 text-lg font-bold'>or</span>
                     <p className='text-lg font-bold'>Manually enter NWC URL</p>
@@ -217,9 +232,10 @@ const SubscriptionPaymentButtons = ({ onSuccess, onError, onRecurringSubscriptio
                     <Button
                         label="Submit"
                         onClick={handleManualNwcSubmit}
-                        className="mt-4 text-[#f8f8ff]"
+                        className="mt-4 w-fit text-[#f8f8ff]"
                     />
-                </div>
+                    </div>
+                </>
             )}
             {invoice && invoice.paymentRequest && (
                 <div className="w-full mx-auto mt-8">

src/components/buttons/AlbyButton.js

@@ -18,7 +18,7 @@ const AlbySVG = () => (
 
 const AlbyButton = ({ handleSubmit }) => {
   return (
-    <Button className="p-button-success hover:opacity-75" style={{ backgroundColor: '#FFDE6E', borderColor: '#FFDE6E', padding: '10px 20px' }} onClick={handleSubmit}>
+    <Button className="w-fit p-button-success hover:opacity-75" style={{ backgroundColor: '#FFDE6E', borderColor: '#FFDE6E', padding: '10px 20px' }} onClick={handleSubmit}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
         <AlbySVG style={{ width: '21px', height: '22px' }} />
         <span style={{ color: 'black' }}>Generate with Alby</span>

src/components/profile/SubscribeModal.js

@@ -6,6 +6,8 @@ import axios from 'axios';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { useToast } from '@/hooks/useToast';
+import { Card } from 'primereact/card';
+import { Badge } from 'primereact/badge';
 
 // todo encrypt nwc before saving in db
 const SubscribeModal = ({ visible, onHide }) => {
@@ -58,10 +60,10 @@ const SubscribeModal = ({ visible, onHide }) => {
 
     return (
         <Dialog
-            header="Subscribe"
+            header="Subscribe to PlebDevs"
             visible={visible}
-            style={{ width: '50vw' }}
             onHide={onHide}
+            className="p-fluid pb-0 w-fit"
         >
             {isProcessing ? (
                 <div className="w-full flex flex-col mx-auto justify-center items-center mt-4">
@@ -69,28 +71,40 @@ const SubscribeModal = ({ visible, onHide }) => {
                     <span className="ml-2">Processing subscription...</span>
                 </div>
             ) : (
-                <>
-                    <p className="m-0 font-bold">
-                        Subscribe to PlebDevs and get access to:
-                    </p>
-                    <ul>
-                        <li>- All of our content free and paid</li>
-                        <li>- PlebLab Bitcoin Hackerspace Slack</li>
-                        <li>- An exclusive calendar to book 1:1&apos;s with our team</li>
-                    </ul>
-                    <p className="m-0 font-bold">
-                        ALSO
-                    </p>
-                    <ul>
-                        <li>- I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV</li>
-                    </ul>
+                <Card className="shadow-lg">
+                    <div className="text-center mb-4">
+                        <h2 className="text-2xl font-bold text-primary">Unlock Premium Benefits</h2>
+                        <p className="text-gray-400">Subscribe now and elevate your development journey!</p>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                        <div className="flex items-center">
+                            <i className="pi pi-book text-2xl text-primary mr-2"></i>
+                            <span>Access ALL current and future content</span>
+                        </div>
+                        <div className="flex items-center">
+                            <i className="pi pi-users text-2xl text-primary mr-2"></i>
+                            <span>Join PlebLab Bitcoin Hackerspace Slack</span>
+                        </div>
+                        <div className="flex items-center">
+                            <i className="pi pi-calendar text-2xl text-primary mr-2"></i>
+                            <span>Exclusive 1:1 booking calendar</span>
+                        </div>
+                        <div className="flex items-center">
+                            <i className="pi pi-star text-2xl text-primary mr-2"></i>
+                            <span>Personal mentorship & guidance</span>
+                        </div>
+                    </div>
+                    <div className="text-center mb-4 flex flex-row justify-center">
+                        <Badge value="BONUS" severity="success" className="mr-2"></Badge>
+                        <span className="text-center font-bold">I WILL MAKE SURE YOU WIN HARD AND LEVEL UP AS A DEV!</span>
+                    </div>
                     <SubscriptionPaymentButtons
                         onSuccess={handleSubscriptionSuccess}
                         onRecurringSubscriptionSuccess={handleRecurringSubscriptionSuccess}
                         onError={handleSubscriptionError}
                         setIsProcessing={setIsProcessing}
                     />
-                </>
+                </Card>
             )}
         </Dialog>
     );

src/pages/_app.js

@@ -5,7 +5,8 @@ import { ToastProvider } from '@/hooks/useToast';
 import { SessionProvider } from "next-auth/react"
 import Layout from '@/components/Layout';
 import '@/styles/globals.css'
-import 'primereact/resources/themes/lara-dark-indigo/theme.css';
+// import 'primereact/resources/themes/lara-dark-indigo/theme.css';
+import 'primereact/resources/themes/lara-dark-blue/theme.css'
 import "@uiw/react-md-editor/markdown-editor.css";
 import "@uiw/react-markdown-preview/markdown.css";
 import Sidebar from '@/components/sidebar/Sidebar';

src/pages/profile.js

@@ -100,7 +100,7 @@ const Profile = () => {
                             <>
                                 <Message severity="success" text="Subscribed!" />
                                 <p className="mt-8">Thank you for your support 🎉</p>
-                                <p className="text-sm text-gray-400">Pay-as-you-go subscription active until {subscribedUntil.toLocaleDateString()}</p>
+                                <p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
                             </>
                         ) : (
                             <>