From 7d8f67dc76c5e741388a625a95597a4d32f6553b Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Thu, 10 Oct 2024 17:54:34 -0500
Subject: [PATCH] Styling fixes for new hero banner, add promotional carousel
 to about page

---
 src/components/banner/HeroBanner.js           | 35 ++++++++-----------
 .../InteractivePromotionalCarousel.js         |  9 +++--
 src/components/sidebar/Sidebar.js             |  2 +-
 src/pages/about.js                            | 33 +++--------------
 4 files changed, 25 insertions(+), 54 deletions(-)

diff --git a/src/components/banner/HeroBanner.js b/src/components/banner/HeroBanner.js
index 1be4607..542d44b 100644
--- a/src/components/banner/HeroBanner.js
+++ b/src/components/banner/HeroBanner.js
@@ -14,7 +14,8 @@ const HeroBanner = () => {
     const isTabView = windowWidth <= 1360;
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
-    const videoRef = useRef(null);
+
+    const isMobile = windowWidth <= 800;
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -40,28 +41,16 @@ const HeroBanner = () => {
         }
     };
 
-    // useEffect(() => {
-    //     videoRef.current.play();
-    //   }, []);
-
     return (
-        <div className="h-[450px] relative flex justify-center items-center overflow-hidden">
+        <div className={`${isMobile ? 'h-[350px]' : 'h-[450px]'} mx-0 relative flex justify-center items-center overflow-hidden`}>
             <Image
                 src={returnImageProxy("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=")}
                 alt="Banner"
                 quality={100}
                 fill
                 style={{ objectFit: 'cover' }}
-                className='opacity-100'
+                className='opacity-100 rounded-lg'
             />
-            {/* <video
-                src={"https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/plebdevs-montage.mp4"}
-                className={`object-cover w-full h-[450px] rounded-lg rounded-tr-none rounded-br-none`}
-                ref={videoRef}
-                loop
-                muted
-                playsInline
-            /> */}
             <div className="absolute inset-0 bg-gradient-to-br from-black via-black/40 to-transparent rounded-lg" />
             <div className={`absolute inset-0 flex flex-col justify-center ${isTabView ? 'items-center text-center' : 'items-start pl-12'}`}>
                 <h1 className={`text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 ${isTabView ? 'px-4' : ''}`}>
@@ -71,16 +60,22 @@ const HeroBanner = () => {
                     </span>
                     <span className="block">Become a dev</span>
                 </h1>
-                <h2 className="text-2xl text-[#f8f8ff] mb-8 font-semibold">
-                    A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
-                </h2>
+                {isMobile ? (
+                    <h3 className="text-[#f8f8ff] mb-8 font-semibold">
+                        A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
+                    </h3>
+                ) : (
+                    <h2 className="text-[#f8f8ff] mb-8 font-semibold">
+                        A one of a kind developer education and community platform built on Nostr and fully Lightning integrated.
+                    </h2>
+                )}
                 <div className="space-x-4">
                     <GenericButton
                         label="Learn"
                         icon="pi pi-book"
                         rounded
                         severity="info"
-                        size="large"
+                        size={isMobile ? null : "large"}
                         outlined
                         onClick={() => router.push('/content?tag=all')}
                     />
@@ -88,7 +83,7 @@ const HeroBanner = () => {
                         label="Connect"
                         icon="pi pi-users"
                         rounded
-                        size="large"
+                        size={isMobile ? null : "large"}
                         severity="success"
                         outlined
                         onClick={() => router.push('/feed?channel=global')}
diff --git a/src/components/content/carousels/InteractivePromotionalCarousel.js b/src/components/content/carousels/InteractivePromotionalCarousel.js
index 8e121da..ede483a 100644
--- a/src/components/content/carousels/InteractivePromotionalCarousel.js
+++ b/src/components/content/carousels/InteractivePromotionalCarousel.js
@@ -51,7 +51,6 @@ const InteractivePromotionalCarousel = () => {
   const { showToast } = useToast();
   const windowWidth = useWindowWidth();
   const isTabView = windowWidth <= 1360;
-  const isMobile = windowWidth <= 768;
   const router = useRouter();
   const videoRef = useRef(null);
 
@@ -78,13 +77,13 @@ const InteractivePromotionalCarousel = () => {
   }, [selectedPromotion]);
 
   return (
-    <div className={`flex ${isTabView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isTabView ? 'h-auto' : 'h-[620px]'} ${isTabView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
+    <div className={`flex ${isTabView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-0 rounded-lg ${isTabView ? 'h-auto' : 'h-[620px]'} ${isTabView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
       <div className={isTabView ? 'w-full' : 'lg:w-2/3 relative'}>
         {selectedPromotion.video ? (
           <video
             ref={videoRef}
             src={selectedPromotion.video}
-            className={`object-cover w-full ${isTabView ? 'h-[300px]' : 'h-full'} rounded-lg rounded-tr-none rounded-br-none`}
+            className={`object-cover w-full ${isTabView ? 'h-[300px] rounded-lg' : 'h-full rounded-tr-none rounded-br-none'} rounded-lg opacity-100`}
             loop
             muted
             playsInline
@@ -95,7 +94,7 @@ const InteractivePromotionalCarousel = () => {
             alt={selectedPromotion.title}
             width={800}
             height={600}
-            className={`object-cover w-full ${isTabView ? 'h-[300px]' : 'h-full'} rounded-lg opacity-75 rounded-tr-none rounded-br-none`}
+            className={`object-cover w-full ${isTabView ? 'h-[300px] rounded-lg' : 'h-full rounded-tr-none rounded-br-none'} rounded-lg opacity-75`}
           />
         )}
         {isTabView ? (
@@ -155,7 +154,7 @@ const InteractivePromotionalCarousel = () => {
                       case "PLEBDEVS":
                         return (
                           <div className="flex flex-row gap-4 mt-4">
-                            <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="About" className="py-2 font-semibold" size="small" outlined />
+                            {/* <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="About" className="py-2 font-semibold" size="small" outlined /> */}
                             <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
                             <GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="All content" className="py-2 font-semibold" size="small" outlined />
                             <GenericButton onClick={() => copyToClipboard()} icon={<i className="pi pi-bolt pr-2" />} label="Donate" className={`py-2 font-semibold text-yellow-300 ${yellowFocusOutlineStyle}`} size="small" outlined />
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index 0687d25..fd59f77 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -150,7 +150,7 @@ const Sidebar = ({ course = false }) => {
                                 <i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
                             </div>
                         )}
-                        <div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') || isActive('/subscribe') ? 'bg-gray-700' : ''}`}>
+                        <div onClick={() => session ? router.push('/profile?tab=subscribe') : router.push('/subscribe')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/profile?tab=subscribe') || isActive('/subscribe') ? 'bg-gray-700' : ''}`}>
                             <i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
                         </div>
                         <Accordion activeIndex={0} className={styles['p-accordion']}>
diff --git a/src/pages/about.js b/src/pages/about.js
index f9a3abd..ed7bae9 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -6,11 +6,14 @@ import { Message } from 'primereact/message';
 import { useToast } from "@/hooks/useToast";
 import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from '@/components/buttons/GenericButton';
+import InteractivePromotionalCarousel from '@/components/content/carousels/InteractivePromotionalCarousel';
 
 const AboutPage = () => {
     const { showToast } = useToast();
     const windowWidth = useWindowWidth();
 
+    const isTabView = windowWidth <= 1360;
+
     const copyToClipboard = async (text) => {
         try {
             await navigator.clipboard.writeText(text);
@@ -28,34 +31,8 @@ const AboutPage = () => {
     };
 
     return (
-        <div className="p-4 max-w-4xl mx-auto">
-            {windowWidth < 768 && (
-                <h1 className="text-3xl font-bold mb-6">About PlebDevs</h1>
-            )}
-
-            <Card title="About PlebDevs" className="mb-4">
-                <div className='flex flex-row gap-4 max-mob:flex-col max-tab:flex-col'>
-                    <Message pt={{
-                        icon: {
-                            className: 'hidden'
-                        }
-                    }} severity="info" text="PlebDevs is a fully Lightning and Nostr integrated education, content, and community platform designed to help new and aspiring developers, with a focus on Bitcoin / Lightning / Nostr technologies." />
-                    <Message pt={{
-                        icon: {
-                            className: 'hidden'
-                        }
-                    }} severity="success" text="PlebDevs offers a personal yet distributed learning experience, combining videos, courses, documents, and community channels through Nostr, monetizing with Lightning, and integrating them into a single platform" />
-                </div>
-                <div className="mt-4">
-                    <h3 className='font-bold mb-2'>The pitch is simple:</h3>
-                    <ul className='list-disc list-inside ml-6 space-y-2'>
-                        <li className='text-lg'>Learn how to code 💻</li>
-                        <li className='text-lg'>Build Bitcoin / Lightning / Nostr apps ⚡</li>
-                        <li className='text-lg'>Become a developer 🚀</li>
-                    </ul>
-                </div>
-            </Card>
-
+        <div className={`${isTabView ? 'w-full' : 'w-[83vw]'} p-4 mx-auto`}>
+            <InteractivePromotionalCarousel />
             <Card title="Key Features" className="mb-4">
                 <div className="flex flex-col gap-4">
                     <div className="flex flex-col items-start justify-center">