Some responsiveness fixes

src/components/banner/HeroBanner.js

@@ -28,15 +28,15 @@ const HeroBanner = () => {
                 quality={100}
             />
             <div className="absolute text-center text-white text-2xl">
-                <p className='text-4xl'>Learn how to code</p>
+                <p className='text-4xl max-tab:text-2xl max-mob:text-2xl'>Learn how to code</p>
-                <p className='text-4xl pt-4'>
+                <p className='text-4xl pt-4 max-tab:text-2xl max-mob:text-2xl'>
                     Build{' '}
-                    <span className={`text-4xl pt-4 transition-opacity duration-500 ${fade ? 'opacity-100' : 'opacity-0'}`}>
+                    <span className={`text-4xl max-tab:text-2xl max-mob:text-2xl pt-4 transition-opacity duration-500 ${fade ? 'opacity-100' : 'opacity-0'}`}>
                         {options[currentOption]}
                     </span>
                     {' '}apps
                 </p>
-                <p className='text-4xl pt-4'>Become a Bitcoin developer</p>
+                <p className='text-4xl pt-4 max-tab:text-2xl max-mob:text-2xl'>Become a Bitcoin developer</p>
             </div>
         </div>
     );

src/components/courses/CoursesCarousel.js

@@ -33,6 +33,39 @@ export default function CoursesCarousel() {
 
     const router = useRouter();
 
+    const [screenWidth, setScreenWidth] = useState(null);
+
+    useEffect(() => {
+        // Update the state to the current window width
+        setScreenWidth(window.innerWidth);
+    
+        const handleResize = () => {
+            // Update the state to the new window width when it changes
+            setScreenWidth(window.innerWidth);
+        };
+    
+        window.addEventListener('resize', handleResize);
+    
+        // Remove the event listener on cleanup
+        return () => window.removeEventListener('resize', handleResize);
+    }, []); // The empty array ensures this effect only runs once, similar to componentDidMount
+    
+
+    // Function to calculate image dimensions based on screenWidth
+    const calculateImageDimensions = () => {
+        if (screenWidth >= 1200) {
+            // Large screens
+            return { width: 344, height: 194 };
+        } else if (screenWidth >= 768 && screenWidth < 1200) {
+            // Medium screens
+            return { width: 300, height: 169 };
+        } else {
+            console.log('screenWidth:', screenWidth);
+            // Small screens
+            return { width: screenWidth - 30, height: (screenWidth - 30) * (9 / 16) };
+        }
+    };
+
     useEffect(() => {
         const processCourses = courses.map(course => {
             const { id, content, title, summary, image, published_at } = parseEvent(course);
@@ -43,18 +76,22 @@ export default function CoursesCarousel() {
     }, [courses]);
 
     const courseTemplate = (course) => {
+        const { width, height } = calculateImageDimensions();
+        console.log('width:', width);
+        console.log('height:', height);
+
         return (
             <div onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center w-full mx-auto px-4 cursor-pointer mt-8">
-                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
+                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg max-tab:w-[100vw] max-mob:w-[100vw] max-tab:h-auto max-mob:h-auto">
                     <Image
                         alt="resource thumbnail"
                         src={returnImageProxy(course.image)}
-                        width={344}
+                        quality={100}
-                        height={194}
+                        width={width}
-                        className="w-full h-full object-cover object-center"
+                        height={height}
                     />
                 </div>
-                <div className='flex flex-col justify-start max-w-[426px]'>
+                <div className='flex flex-col justify-start max-w-[426px] max-tab:w-[100vw] max-mob:w-[100vw]'>
                     <h4 className="mb-1 font-bold text-xl">{course.title}</h4>
                     <p className='truncate'>{course.summary}</p>
                     <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p>
@@ -66,7 +103,7 @@ export default function CoursesCarousel() {
     return (
         <>
             <h1 className="text-2xl ml-[6%] mt-4">courses</h1>
-            <Carousel value={processedCourses} numVisible={3} itemTemplate={courseTemplate} responsiveOptions={responsiveOptions} />
+            <Carousel value={processedCourses} numVisible={2} itemTemplate={courseTemplate} responsiveOptions={responsiveOptions} />
         </>
     );
 }

src/components/workshops/WorkshopsCarousel.js

@@ -7,6 +7,24 @@ import { useImageProxy } from '@/hooks/useImageProxy';
 import { parseEvent } from '@/utils/nostr';
 import { formatTimestampToHowLongAgo } from '@/utils/time';
 
+const responsiveOptions = [
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1
+    }
+];
+
 export default function WorkshopsCarousel() {
     const workshops = useSelector((state) => state.events.resources);
     const [processedWorkshops, setProcessedWorkshops] = useState([]);
@@ -25,7 +43,7 @@ export default function WorkshopsCarousel() {
     const workshopTemplate = (workshop) => {
         return (
             <div onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center w-full mx-auto px-4 cursor-pointer mt-8">
-                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
+                <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg max-tab:w-[264px] max-mob:w-[244px]">
                     <Image
                         alt="resource thumbnail"
                         src={returnImageProxy(workshop.image)}
@@ -34,7 +52,7 @@ export default function WorkshopsCarousel() {
                         className="w-full h-full object-cover object-center"
                     />
                 </div>
-                <div className='flex flex-col justify-start max-w-[426px]'>
+                <div className='flex flex-col justify-start max-w-[426px] max-tab:w-[264px] max-mob:w-[244px]'>
                     <h4 className="mb-1 font-bold text-xl">{workshop.title}</h4>
                     <p className='truncate'>{workshop.summary}</p>
                     <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
@@ -46,7 +64,7 @@ export default function WorkshopsCarousel() {
     return (
         <>
             <h1 className="text-2xl ml-[6%] mt-4">workshops</h1>
-            <Carousel value={processedWorkshops} numVisible={2} itemTemplate={workshopTemplate} />
+            <Carousel value={processedWorkshops} numVisible={2} itemTemplate={workshopTemplate} responsiveOptions={responsiveOptions} />
         </>
     );
 }

src/pages/index.js

@@ -22,7 +22,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <HeroBanner text="Welcome to Nostr!" />
+        <HeroBanner />
         <CoursesCarousel />
         <WorkshopsCarousel />
       </main>

src/pages/profile.js

@@ -58,8 +58,8 @@ const Profile = () => {
 
 
     return (
-        <>
+        <div className="max-tab:w-[100vw] max-mob:w-[100vw]">
-            <div className="w-[85vw] flex flex-col justify-center mx-auto">
+            <div className="w-[85vw] flex flex-col justify-center mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
                 <div className="relative flex w-full items-center justify-center">
                     {user.avatar && (
                         <Image
@@ -77,20 +77,20 @@ const Profile = () => {
 
 
                 <h1 className="text-center text-2xl my-2">{user.username}</h1>
-                <h2 className="text-center text-xl my-2">{user.pubkey}</h2>
+                <h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">{user.pubkey}</h2>
                 <div className="flex flex-col w-1/2 mx-auto my-4 justify-between items-center">
                     <h2>Subscription</h2>
-                    <p>You currently have no active subscription</p>
+                    <p className="text-center">You currently have no active subscription</p>
                     <Button label="Subscribe" className="p-button-raised p-button-success w-auto my-2 text-[#f8f8ff]" />
                 </div>
             </div>
-            <DataTable emptyMessage="No purchases" value={purchases} tableStyle={{ minWidth: '10rem' }}>
+            <DataTable emptyMessage="No purchases" value={purchases} tableStyle={{ minWidth: '100%'}}>
                 <Column field="cost" header="Cost"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
                 <Column field="date" header="Date"></Column>
             </DataTable>
-        </>
+        </div>
     )
 }