saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 19:01:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
austinkelsay 2025-01-03 09:45:51 -06:00
parent 430975f64d
commit 9e4390de1f
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
4 changed files with 83 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/banner/HeroBanner.js
View File

@ -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"

2
src/components/content/courses/CourseDetails.js
View File

@ -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"

74
src/components/onboarding/WelcomeModal.js Normal file
View File

@ -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;

4
src/components/profile/progress/UserProgress.js
View File

@ -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>