wip

src/components/SQLCourseVariant/AuthorCredentials.tsx

@@ -2,7 +2,7 @@ import { AwardIcon } from 'lucide-react';
 
 export function AuthorCredentials() {
   return (
-    <div className="mt-auto flex gap-4 text-sm text-white">
+    <div className="flex gap-4 text-sm text-white lg:mt-auto">
       <div className="flex items-center gap-4">
         <img
           src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"

src/components/SQLCourseVariant/BuyButton.tsx

@@ -358,7 +358,9 @@ export function BuyButton(props: BuyButtonProps) {
           </span>
         ) : (
           <span className="relative flex items-center gap-2">
-            Start learning now - ${coursePricing?.regionalPrice}
+            <span className="hidden md:inline">Start learning now</span>
+            <span className="inline md:hidden">Start now</span>- $
+            {coursePricing?.regionalPrice}
             <ArrowRightIcon className="h-5 w-5 transition-transform duration-300 ease-out group-hover:translate-x-1" />
           </span>
         )}

src/components/SQLCourseVariant/PurchaseBanner.tsx

@@ -1,13 +1,11 @@
-import { ArrowRightIcon, CheckIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { cn } from '../../lib/classname';
+import { CheckIcon } from 'lucide-react';
 import { BuyButton } from './BuyButton';
 import { Rating } from '../Rating/Rating';
 
 export function PurchaseBanner() {
   return (
-    <div className="sticky top-4 z-50 mt-20 flex w-full items-center justify-between rounded-2xl bg-yellow-950 p-5 shadow-lg ring-1 ring-yellow-500/40">
-      <div className="flex flex-col gap-2">
+    <div className="sticky top-4 z-50 mt-20 flex w-full flex-col gap-4 rounded-2xl bg-yellow-950 p-5 shadow-lg ring-1 ring-yellow-500/40 lg:flex-row lg:items-center lg:justify-between">
+      <div className="order-3 flex w-full flex-col items-center gap-2 lg:order-0 lg:w-fit lg:items-start">
         <span className="inline-flex items-center gap-1.5 text-yellow-500">
           <CheckIcon className="size-5 stroke-[2.5]" />
           7-Day Money-Back Guarantee
@@ -18,7 +16,9 @@ export function PurchaseBanner() {
         </span>
       </div>
 
-      <BuyButton variant="floating" />
+      <div className="order-2 -translate-x-2 lg:order-0">
+        <BuyButton variant="floating" />
+      </div>
 
       <div className="flex flex-col items-center gap-2">
         <Rating rating={4.9} />

src/components/SQLCourseVariant/ReviewCarousel.tsx

@@ -149,7 +149,7 @@ export function ReviewCarousel() {
   }, []);
 
   return (
-    <div className="mt-24">
+    <div className="mx-auto mt-24 w-full max-w-5xl">
       <h3 className="text-center text-2xl font-medium text-zinc-200 md:text-3xl">
         What other learners said
       </h3>
@@ -184,7 +184,7 @@ export function ReviewCarousel() {
               className={cn(
                 'review-testimonial relative overflow-hidden rounded-2xl bg-linear-to-br from-yellow-500/10 via-yellow-500/5 to-transparent p-8 backdrop-blur-sm [&_strong]:font-normal [&_strong]:text-yellow-300/70',
                 index === 2 && batchSize === 3 && 'hidden xl:block',
-                index === 1 && batchSize === 3 && 'hidden md:block',
+                index === 1 && batchSize === 3 && 'hidden lg:block',
               )}
             >
               <div className="absolute -top-8 -right-8 h-32 w-32 rounded-full bg-yellow-500/5" />

src/components/SQLCourseVariant/SQLCourseVariantPage.tsx

@@ -242,12 +242,12 @@ export const sqlCourseChapters: ChapterData[] = [
 export function SQLCourseVariantPage() {
   return (
     <>
-      <div className="relative flex max-w-screen grow flex-col items-center overflow-hidden 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="mt-7 w-full max-w-5xl md:mt-20">
+      <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="mx-auto mt-7 w-full max-w-5xl md:mt-20">
           <div className="relative">
             <Spotlight className="top-[-200px] left-[-170px]" fill="#EAB308" />
 
-            <div className="flex flex-row items-center gap-5">
+            <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
               <a
                 href="https://roadmap.sh"
                 target="_blank"
@@ -256,7 +256,7 @@ export function SQLCourseVariantPage() {
                 <RoadmapLogoIcon className="size-18" />
               </a>
               <div className="flex flex-col items-start gap-2.5">
-                <h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl">
+                <h1 className="text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl">
                   Master SQL Queries
                 </h1>
                 <p className="text-left text-xl text-zinc-300 md:text-xl">
@@ -272,8 +272,8 @@ export function SQLCourseVariantPage() {
               7-day money-back guarantee.
             </p>
 
-            <div className="flex gap-14">
-              <div className="flex shrink-0 flex-col gap-3 text-lg">
+            <div className="flex flex-col-reverse gap-14 lg:flex-row">
+              <div className="hidden w-full shrink-0 flex-row-reverse items-start justify-between gap-3 text-lg md:flex lg:w-auto lg:flex-col">
                 <div className="flex flex-col gap-3">
                   <div className="flex flex-row items-center gap-2">
                     <ClipboardIcon className="size-6 text-yellow-600" />