Welcome modal for learn how to code cta, also creates anon account

src/components/banner/HeroBanner.js

@@ -133,11 +133,14 @@ const HeroBanner = () => {
                         className="border-2"
                         size={isMobile ? null : "large"}
                         outlined
-                        onClick={() => router.push('/course/naddr1qvzqqqr4xspzpueu32tp0jc47uzlcuxdgcw06m40ytu7ynpna2adnqty3e0vda6pqy88wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcpr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uq36amnwvaz7tmjv4kxz7fwd46hg6tw09mkzmrvv46zucm0d5hsz9mhwden5te0wfjkccte9ec8y6tdv9kzumn9wshszynhwden5te0dehhxarjxgcjucm0d5hszynhwden5te0dehhxarjw4jjucm0d5hsz9nhwden5te0wp6hyurvv4ex2mrp0yhxxmmd9uq3wamnwvaz7tmjv4kxz7fwv3jhvueww3hk7mrn9uqzge34xvuxvdtrx5knzcfhxgkngwpsxsknsetzxyknxe3sx43k2cfkxsurwdq68epwa?active=0')}
+                        onClick={() => signIn('anonymous', { 
+                            callbackUrl: '/course/naddr1qvzqqqr4xspzpueu32tp0jc47uzlcuxdgcw06m40ytu7ynpna2adnqty3e0vda6pqy88wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcpr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uq36amnwvaz7tmjv4kxz7fwd46hg6tw09mkzmrvv46zucm0d5hsz9mhwden5te0wfjkccte9ec8y6tdv9kzumn9wshszynhwden5te0dehhxarjxgcjucm0d5hszynhwden5te0dehhxarjw4jjucm0d5hsz9nhwden5te0wp6hyurvv4ex2mrp0yhxxmmd9uq3wamnwvaz7tmjv4kxz7fwv3jhvueww3hk7mrn9uqzge34xvuxvdtrx5knzcfhxgkngwpsxsknsetzxyknxe3sx43k2cfkxsurwdq68epwa?active=starter',
+                            redirect: true,
+                        })}
                     />
                     <GenericButton
                         label="Level Up"
-                        icon={<i className="pi pi-users pr-2 text-2xl" />}
+                        icon={<i className="pi pi-video pr-2 text-2xl" />}
                         rounded
                         size={isMobile ? null : "large"}
                         severity="success"

src/components/content/courses/CourseDetails.js

@@ -17,6 +17,7 @@ import { useNDKContext } from "@/context/NDKContext";
 import { findKind0Fields } from '@/utils/nostr';
 import appConfig from "@/config/appConfig";
 import useTrackCourse from '@/hooks/tracking/useTrackCourse';
+import WelcomeModal from '@/components/onboarding/WelcomeModal';
 import { ProgressSpinner } from 'primereact/progressspinner';
 
 export default function CourseDetails({ processedEvent, paidCourse, lessons, decryptionPerformed, handlePaymentSuccess, handlePaymentError }) {
@@ -148,6 +149,7 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
 
     return (
         <div className="w-full">
+                  <WelcomeModal />
             <div className="relative w-full h-[400px] mb-8">
                 <Image
                     alt="course image"

src/components/onboarding/WelcomeModal.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { useRouter } from 'next/router';
+
+const WelcomeModal = () => {
+    const [visible, setVisible] = useState(false);
+    const router = useRouter();
+
+    useEffect(() => {
+        if (router.query.active === 'starter') {
+            setVisible(true);
+        }
+    }, [router.query]);
+
+    const onHide = () => {
+        setVisible(false);
+        // Update just the 'active' query parameter to '0' while preserving the path
+        router.replace({
+            pathname: router.pathname,
+            query: { ...router.query, active: '0' }
+        }, undefined, { shallow: true });
+    };
+
+    return (
+        <Dialog 
+            header="Welcome to PlebDevs!" 
+            visible={visible} 
+            style={{ width: '90vw', maxWidth: '600px' }} 
+            onHide={onHide}
+        >
+                <div className="text-center mb-4">
+                    <h2 className="text-2xl font-bold text-primary">Start Your Dev Journey</h2>
+                    <p className="text-gray-400">Welcome to the FREE Starter Course!</p>
+                </div>
+
+                <div className="flex flex-col gap-4 mb-4">
+                    <div className="flex items-start">
+                        <i className="pi pi-user text-2xl text-primary mr-2 text-blue-400"></i>
+                        <div>
+                            <h3 className="text-lg font-semibold">Your Account</h3>
+                            <p>An anonymous account has been created for you and you can access it in the top right corner.</p>
+                            <p className="mt-2">On your profile page you will find:</p>
+                            <ul className="list-disc list-inside ml-2 mt-2">
+                                <li>Full dev journey roadmap</li>
+                                <li>Progress tracker</li>
+                                <li>Achievement badges</li>
+                                <li>And more!</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="flex items-start">
+                        <i className="pi pi-book text-2xl text-primary mr-2 text-green-400"></i>
+                        <div>
+                            <h3 className="text-lg font-semibold">Starter Course</h3>
+                            <p>This course will cover:</p>
+                            <ul className="list-disc list-inside ml-2 mt-2">
+                                <li>PlebDevs approach to learning how to code</li>
+                                <li>Development tools setup</li>
+                                <li>Foundation for the full Dev Journey</li>
+                                <li>Learn basic HTML, CSS, and JavaScript</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="text-center mt-4">
+                        <p className="font-bold text-lg">Let&apos;s start your coding journey! 🚀</p>
+                    </div>
+                </div>
+        </Dialog>
+    );
+};
+
+export default WelcomeModal;

src/components/profile/progress/UserProgress.js

@@ -194,10 +194,10 @@ const UserProgress = () => {
             <div className="flex flex-row justify-between items-center">
                 <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
                 <i className="pi pi-question-circle text-2xl cursor-pointer text-gray-200"
-                    data-pr-tooltip="Track your progress through all courses, showcase your GitHub contributions, submit projects, and earn badges!" />
+                    data-pr-tooltip="Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!" />
                 <Tooltip target=".pi-question-circle" position="left" />
             </div>
-            <p className="text-gray-400 mb-4">Track your progress through all courses, showcase your GitHub contributions, submit projects, and earn badges!</p>
+            <p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p>
 
             <div className="flex justify-between items-center mb-2">
                 <span className="text-gray-300">Progress</span>