Add platform demo

src/components/SQLCourse/BuyButton.tsx

@@ -133,8 +133,7 @@ export function BuyButton(props: BuyButtonProps) {
             </span>
           ) : (
             <span className="relative flex items-center gap-2">
-              Buy
-              now for{' '}
+              Buy now for{' '}
               {coursePricing?.isEligibleForDiscount ? (
                 <span className="flex items-center gap-2">
                   <span className="hidden text-base line-through opacity-75 md:inline">
@@ -151,6 +150,12 @@ export function BuyButton(props: BuyButtonProps) {
             </span>
           )}
         </button>
+
+        {!isLoadingPricing && !isAlreadyEnrolled && (
+          <span className="absolute top-full translate-y-2.5 text-sm text-yellow-400">
+            Lifetime access <span className="mx-1">&middot;</span> Free updates
+          </span>
+        )}
       </div>
     );
   }
@@ -192,6 +197,12 @@ export function BuyButton(props: BuyButtonProps) {
           </span>
         )}
       </button>
+
+      {!isLoadingPricing && !isAlreadyEnrolled && (
+        <span className="top-full text-sm text-yellow-400">
+          Lifetime access <span className="mx-1">&middot;</span> Free updates
+        </span>
+      )}
     </div>
   );
 }

src/components/SQLCourse/PlatformDemo.tsx

@@ -0,0 +1,40 @@
+import { SectionHeader } from './SectionHeader';
+import { useEffect, useState } from 'react';
+
+export function PlatformDemo() {
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  useEffect(() => {
+    function onScroll() {
+      if (isZoomed) {
+        setIsZoomed(false);
+      }
+    }
+
+    window.addEventListener('scroll', onScroll);
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [isZoomed]);
+
+  return (
+    <>
+      {isZoomed && (
+        <div
+          onClick={() => setIsZoomed(false)}
+          className="fixed inset-0 z-[999] flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
+        >
+          <img
+            src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
+            alt="Course Environment"
+            className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain"
+          />
+        </div>
+      )}
+      <img
+        src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
+        alt="Course Environment"
+        onClick={() => setIsZoomed(true)}
+        className="mt-20 w-full max-w-5xl rounded-xl cursor-zoom-in"
+      />
+    </>
+  );
+}

src/components/SQLCourse/SQLCoursePage.tsx

@@ -25,6 +25,7 @@ import { FAQSection } from './FAQSection';
 import { BuyButton } from './BuyButton';
 import { AccountButton } from './AccountButton';
 import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
+import { PlatformDemo } from './PlatformDemo';
 
 type ChapterData = {
   icon: React.ReactNode;
@@ -298,6 +299,8 @@ export function SQLCoursePage() {
         </div>
       </div>
 
+      <PlatformDemo />
+
       <SectionHeader
         title="Not your average SQL course"
         description="Built around a text-based interactive approach and packed with practical challenges, this course stands out with features that make it truly unique."
@@ -375,7 +378,7 @@ export function SQLCoursePage() {
         title="About the Author"
         className="mt-12 md:mt-24"
         description={
-          <div className="mt-2 md:mt-4 flex flex-col gap-4 md:gap-6 text-lg md:text-xl leading-[1.52]">
+          <div className="mt-2 flex flex-col gap-4 text-lg leading-[1.52] md:mt-4 md:gap-6 md:text-xl">
             <p>
               I am Kamran Ahmed, an engineering leader with over a decade of
               experience in the tech industry. Throughout my career I have built