From aabaaec6996a7fe5881bb511a7a72252d0f74499 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 1 Jul 2025 16:57:15 +0100
Subject: [PATCH] Banner should be visible on top

---
 src/components/SQLCourseVariant/PurchaseBanner.tsx  | 13 ++++++++-----
 src/components/SQLCourseVariant/ReviewCarousel.tsx  |  2 +-
 .../SQLCourseVariant/SQLCourseVariantPage.tsx       |  4 ++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/SQLCourseVariant/PurchaseBanner.tsx b/src/components/SQLCourseVariant/PurchaseBanner.tsx
index ab1a9bcbd..c8a2f7b11 100644
--- a/src/components/SQLCourseVariant/PurchaseBanner.tsx
+++ b/src/components/SQLCourseVariant/PurchaseBanner.tsx
@@ -7,17 +7,20 @@ import { useEffect, useRef, useState } from 'react';
 export function PurchaseBanner() {
   const bannerRef = useRef<HTMLDivElement>(null);
 
-  const [isOutOfView, setIsOutOfView] = useState(false);
+  const [isFullyInView, setIsFullyInView] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
       if (!bannerRef.current) return;
       
       const bannerRect = bannerRef.current.getBoundingClientRect();
+      const bannerTop = bannerRect.top;
       const bannerBottom = bannerRect.bottom;
+      const scrollTop = window.scrollY;
       
-      // Banner is out of view when its bottom is above the viewport
-      setIsOutOfView(bannerBottom < 0);
+      // Banner is fully in view when both top and bottom are within viewport
+      const fullyVisible = bannerTop >= 0 && bannerBottom <= window.innerHeight;
+      setIsFullyInView(fullyVisible || scrollTop > bannerRect.top);
     };
 
     window.addEventListener('scroll', handleScroll);
@@ -36,7 +39,7 @@ export function PurchaseBanner() {
       <div
         ref={props.ref}
         className={cn(
-          'top-4 z-50 mt-16.5 flex w-full flex-col gap-4 rounded-2xl bg-yellow-950 p-5 shadow-lg ring-1 ring-yellow-500/40 lg:sticky lg:flex-row lg:items-center lg:justify-between',
+          'top-4 z-50 mt-14 flex w-full flex-col gap-4 rounded-2xl bg-yellow-950 p-5 shadow-lg ring-1 ring-yellow-500/40 lg:sticky lg:flex-row lg:items-center lg:justify-between',
           props.className,
         )}
       >
@@ -77,7 +80,7 @@ export function PurchaseBanner() {
       <Banner
         className={cn(
           'fixed top-[unset] right-0 bottom-0 left-0 rounded-none lg:hidden',
-          isOutOfView ? 'flex' : 'hidden',
+          isFullyInView ? 'flex' : 'hidden',
         )}
       />
     </>
diff --git a/src/components/SQLCourseVariant/ReviewCarousel.tsx b/src/components/SQLCourseVariant/ReviewCarousel.tsx
index 6412ad1de..03c368867 100644
--- a/src/components/SQLCourseVariant/ReviewCarousel.tsx
+++ b/src/components/SQLCourseVariant/ReviewCarousel.tsx
@@ -179,7 +179,7 @@ export function ReviewCarousel() {
   }, []);
 
   return (
-    <div className="mx-auto mt-24 w-full max-w-5xl">
+    <div className="mx-auto mt-16 w-full max-w-5xl">
       <h3 className="text-center text-2xl font-medium text-zinc-200 md:text-3xl">
         What other learners said
       </h3>
diff --git a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
index bf6aeb12b..efb05dafa 100644
--- a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
+++ b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
@@ -20,7 +20,7 @@ import { sqlCourseChapters } from '../SQLCourse/SQLCoursePage';
 
 export function SQLCourseVariantPage() {
   return (
-    <div className="relative flex grow flex-col items-center bg-linear-to-b from-zinc-900 to-zinc-950 px-4 pt-3 pb-52 text-zinc-400 md:px-10 md:pt-8">
+    <div className="relative flex grow flex-col items-center bg-linear-to-b from-zinc-900 to-zinc-950 px-4 pb-52 text-zinc-400 md:px-10">
       <div className="mx-auto mt-7 w-full max-w-5xl md:mt-20">
         <div className="relative">
           <Spotlight className="top-[-200px] left-[-170px]" fill="#EAB308" />
@@ -43,7 +43,7 @@ export function SQLCourseVariantPage() {
             </div>
           </div>
 
-          <p className="my-5 text-xl leading-relaxed text-zinc-300 md:my-14 lg:text-xl">
+          <p className="my-5 text-xl leading-relaxed text-zinc-300 md:my-10 lg:text-xl">
             Get certified for SQL queries and ready to deploy your newly-gained
             skill in 30 days. Perfect for developers, data analysts, and anyone
             working with data. Level up risk-free with a 7-day money-back