Add sql coupon code

src/components/SQLCourse/BuyButton.tsx

@@ -1,5 +1,11 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { ArrowRightIcon, MousePointerClick, Play } from 'lucide-react';
+import {
+  ArrowRightIcon,
+  CheckIcon,
+  CopyIcon,
+  MousePointerClick,
+  Play,
+} from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { cn } from '../../lib/classname';
 import {
@@ -18,6 +24,8 @@ import { useToast } from '../../hooks/use-toast';
 import { httpPost } from '../../lib/query-http';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { VideoModal } from '../VideoModal';
+import { sqlCouponCode } from './CourseDiscountBanner';
+import { useCopyText } from '../../hooks/use-copy-text';
 
 export const SQL_COURSE_SLUG = 'sql';
 
@@ -43,6 +51,8 @@ export function BuyButton(props: BuyButtonProps) {
   const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
   const toast = useToast();
 
+  const { copyText, isCopied } = useCopyText();
+
   const { data: coursePricing, isLoading: isLoadingPrice } = useQuery(
     coursePriceOptions({ courseSlug: SQL_COURSE_SLUG }),
     queryClient,
@@ -163,7 +173,7 @@ export function BuyButton(props: BuyButtonProps) {
 
     const encodedCourseSlug = encodeURIComponent(`/courses/${SQL_COURSE_SLUG}`);
     const successUrl = `/thank-you?next=${encodedCourseSlug}`;
-    
+
     createCheckoutSession({
       courseId: SQL_COURSE_SLUG,
       success: successUrl,
@@ -208,6 +218,31 @@ export function BuyButton(props: BuyButtonProps) {
     <CourseLoginPopup onClose={() => setIsLoginPopupOpen(false)} />
   );
 
+  const mainCouponAlert = (
+    <div data-coupon-alert className="absolute top-1/2 -left-59 z-50 hidden -translate-y-1/2 md:block">
+      <div className="relative flex items-center rounded-xl bg-yellow-50 px-3 py-1.5 shadow-lg">
+        <div className="absolute top-1/2 -right-0.5 h-1.5 w-1.5 -translate-y-1/2 rotate-45 bg-yellow-50"></div>
+        <span className="text-xs font-bold text-black">
+          🎁 30% OFF with code{' '}
+          <button
+            onClick={() => {
+              copyText(sqlCouponCode);
+            }}
+            className="inline-block rounded bg-black px-1.5 py-0.5 font-mono text-white hover:opacity-75"
+          >
+            {sqlCouponCode}
+            {isCopied && (
+              <CheckIcon className="relative -top-[2px] ml-1.5 inline-block size-3" />
+            )}
+            {!isCopied && (
+              <CopyIcon className="relative -top-px ml-1.5 inline-block size-3 text-gray-500" />
+            )}
+          </button>
+        </span>
+      </div>
+    </div>
+  );
+
   if (variant === 'main') {
     return (
       <div className="relative flex w-full flex-col items-center gap-2 md:w-auto">
@@ -218,7 +253,9 @@ export function BuyButton(props: BuyButtonProps) {
             onClose={() => setIsVideoModalOpen(false)}
           />
         )}
-        <div className="flex flex-col gap-2 md:flex-row md:gap-0">
+        <div className="relative flex flex-col gap-2 md:flex-row md:gap-0">
+          {!isLoadingPricing && !isAlreadyEnrolled && mainCouponAlert}
+
           <button
             onClick={onBuyClick}
             disabled={isLoadingPricing}
@@ -272,7 +309,7 @@ export function BuyButton(props: BuyButtonProps) {
         </div>
 
         {!isLoadingPricing && (
-          <span className="absolute top-full z-50 flex w-[300px] translate-y-4 flex-row items-center justify-center text-sm text-yellow-400">
+          <span className="absolute top-full z-50 flex w-max translate-y-4 flex-row items-center justify-center text-sm text-yellow-400">
             Lifetime access <span className="mx-2">&middot;</span>{' '}
             <button
               onClick={() => setIsVideoModalOpen(true)}

src/components/SQLCourse/CourseDiscountBanner.tsx

@@ -0,0 +1,63 @@
+import { CheckIcon, CopyIcon, XIcon } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { cn } from '../../lib/classname';
+
+export const sqlCouponCode = 'SQL30';
+
+export function CourseDiscountBanner() {
+  const { copyText, isCopied } = useCopyText();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 5000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      data-coupon-alert
+      className={cn(
+        'sticky top-0 z-[999] flex w-full items-center justify-center overflow-hidden bg-yellow-500 text-center text-sm font-medium transition-[height] duration-300',
+        isVisible ? 'h-[34px] sm:h-[35px]' : 'h-0',
+      )}
+    >
+      <span className="mr-1 hidden font-bold sm:block">
+        🎁 Limited time offer :
+      </span>
+      Get 30% off using{' '}
+      <button
+        onClick={() => {
+          copyText(sqlCouponCode);
+        }}
+        className={cn(
+          'animate-wiggle ml-1 inline-block cursor-pointer rounded-md border border-dashed border-black bg-gray-900 px-1.5 py-[3px] text-xs text-white [animation-delay:0.25s]',
+          isCopied && 'bg-gray-900 text-white',
+        )}
+      >
+        <span className="mr-1">Coupon code :</span>
+        {sqlCouponCode}
+        {isCopied && (
+          <CheckIcon
+            className="relative -top-[2px] ml-1.5 inline-block size-3"
+            strokeWidth={2.5}
+          />
+        )}
+        {!isCopied && (
+          <CopyIcon
+            className="relative -top-[2px] ml-1.5 inline-block size-3"
+            strokeWidth={2.5}
+          />
+        )}
+      </button>
+      <button
+        onClick={() => {
+          setIsVisible(false);
+        }}
+        className="absolute top-1/2 right-4 hidden -translate-y-1/2 rounded-md px-1.5 py-1.5 hover:bg-yellow-600 hover:text-black sm:block"
+      >
+        <XIcon className="size-4" />
+      </button>
+    </div>
+  );
+}

src/components/SQLCourse/SQLCoursePage.tsx

@@ -28,6 +28,7 @@ import { PlatformDemo } from './PlatformDemo';
 import { ReviewsSection } from './ReviewsSection';
 import { SectionHeader } from './SectionHeader';
 import { Spotlight } from './Spotlight';
+import { CourseDiscountBanner } from './CourseDiscountBanner';
 
 type ChapterData = {
   icon: React.ReactNode;
@@ -245,192 +246,197 @@ export function SQLCoursePage() {
   ];
 
   return (
-    <div className="relative flex grow flex-col items-center bg-linear-to-b from-zinc-900 to-zinc-950 px-4 pb-52 pt-3 text-zinc-400 md:px-10 md:pt-8">
+    <>
-      <div className="flex w-full items-center justify-between">
+      <CourseDiscountBanner />
-        <a
+      <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">
-          href="https://roadmap.sh"
+        <div className="flex w-full items-center justify-between">
-          target="_blank"
+          <a
-          className="opacity-20 transition-opacity hover:opacity-100"
+            href="https://roadmap.sh"
-        >
+            target="_blank"
-          <RoadmapLogoIcon />
+            className="opacity-20 transition-opacity hover:opacity-100"
-        </a>
+          >
-        <AccountButton />
+            <RoadmapLogoIcon />
-      </div>
-      <div className="relative mt-7 max-w-4xl text-left md:mt-20 md:text-center">
-        <Spotlight className="left-[-170px] top-[-200px]" fill="#EAB308" />
-
-        <div className="inline-block rounded-full bg-yellow-500/10 px-4 py-1.5 text-base text-yellow-500 md:px-6 md:py-2 md:text-lg">
-          <span className="hidden sm:block">
-            Complete Course to Master Practical SQL
-          </span>
-          <span className="block sm:hidden">Complete SQL Course</span>
-        </div>
-
-        <h1 className="mt-5 text-4xl font-bold tracking-tight text-white md:mt-8 md:text-7xl">
-          Master SQL <span className="hidden min-[384px]:inline">Queries</span>
-          <div className="mt-2.5 bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent md:text-6xl lg:text-7xl">
-            From Basic to Advanced
-          </div>
-        </h1>
-
-        <AuthorCredentials />
-        <p className="mx-auto my-5 max-w-2xl text-xl text-zinc-300 md:my-12 lg:text-2xl">
-          A structured course to master database querying - perfect for
-          developers, data analysts, and anyone working with data.
-        </p>
-
-        <div className="hidden flex-row items-center justify-center gap-5 md:flex">
-          <div className="flex flex-row items-center gap-2">
-            <ClipboardIcon className="size-6 text-yellow-600" />
-            <span>55+ Lessons</span>
-          </div>
-          <div className="flex flex-row items-center gap-2">
-            <FileQuestionIcon className="size-6 text-yellow-600" />
-            <span>100+ Challenges</span>
-          </div>
-          <div className="flex flex-row items-center gap-2">
-            <CodeIcon className="size-6 text-yellow-600" />
-            <span>Integrated IDE</span>
-          </div>
-          <div className="flex flex-row items-center gap-2">
-            <BrainIcon className="size-6 text-yellow-600" />
-            <span>AI Tutor</span>
-          </div>
-        </div>
-
-        <div className="mt-7 flex justify-start md:mt-12 md:justify-center">
-          <BuyButton variant="main" />
-        </div>
-      </div>
-
-      <ReviewsSection />
-
-      <PlatformDemo />
-
-      <AuthorQuoteMessage />
-
-      <SectionHeader
-        title="Not your average SQL course"
-        description="Built around a text-based interactive approach and packed with practical challenges, this comprehensive SQL bootcamp stands out with features that make it truly unique."
-        className="mt-16 md:mt-20"
-      />
-
-      <div className="mx-auto mt-6 w-full max-w-5xl md:mt-10">
-        <div className="grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-4 lg:grid-cols-3">
-          <CourseFeature
-            title="Textual Course"
-            icon={Eye}
-            imgUrl="https://assets.roadmap.sh/guest/textual-course.png"
-            description="Unlike video-based courses where you have to learn at the pace of the instructor, this course is text-based, allowing you to learn at your own pace."
-          />
-          <CourseFeature
-            title="Coding Environment"
-            icon={CodeIcon}
-            imgUrl="https://assets.roadmap.sh/guest/coding-environment.png"
-            description="With the integrated IDE, you can practice your SQL queries in real-time, getting instant feedback on your results."
-          />
-          <CourseFeature
-            title="Practical Challenges"
-            icon={FileQuestionIcon}
-            imgUrl="https://assets.roadmap.sh/guest/coding-challenges.png"
-            description="The course is packed with practical challenges and quizzes, allowing you to test your knowledge and skills."
-          />
-          <CourseFeature
-            title="AI Instructor"
-            icon={BrainIcon}
-            description="Powerful AI tutor to help you with your queries, provide additional explanations and help if you get stuck."
-            imgUrl="https://assets.roadmap.sh/guest/ai-integration.png"
-          />
-          <CourseFeature
-            title="Take Notes"
-            icon={ClipboardIcon}
-            description="The course allows you to take notes, where you can write down your thoughts and ideas. You can visit them later to review your progress."
-            imgUrl="https://assets.roadmap.sh/guest/course-notes.png"
-          />
-          <CourseFeature
-            title="Completion Certificate"
-            icon={FileCheckIcon}
-            imgUrl="https://assets.roadmap.sh/guest/course-certificate.jpg"
-            description="The course provides a completion certificate, which you can share with your potential employers."
-          />
-        </div>
-      </div>
-
-      <div className="mt-7 w-full max-w-3xl text-left md:mt-9">
-        <p className="text-lg leading-normal md:text-xl">
-          Oh, and you get the{' '}
-          <span className="bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
-            lifetime access
-          </span>{' '}
-          to the course including all the future updates. Also, there is a
-          certificate of completion which you can share with your potential
-          employers.
-        </p>
-      </div>
-
-      <SectionHeader
-        title="Course Overview"
-        description="This SQL programming class is designed to help you go from beginner to expert through hands-on practice with real-world scenarios, mastering everything from basic to complex queries."
-        className="mt-8 md:mt-24"
-      />
-
-      <div className="mt-8 w-full max-w-3xl space-y-4 md:mt-12">
-        {chapters.map((chapter, index) => (
-          <ChapterRow key={index} counter={index + 1} {...chapter} />
-        ))}
-      </div>
-
-      <SectionHeader
-        title="About the Author"
-        className="mt-12 md:mt-24"
-        description={
-          <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
-              and scaled software systems, architected complex data systems, and
-              worked with large amounts of data to create efficient solutions.
-            </p>
-            <p>
-              I am also the creator of{' '}
-              <a
-                href="https://roadmap.sh"
-                target="_blank"
-                className="text-yellow-400"
-              >
-                roadmap.sh
-              </a>
-              , a platform trusted by millions of developers to guide their
-              learning journeys. I love to simplify complex topics and make
-              learning practical and accessible.
-            </p>
-            <p>
-              In this course, I will share everything I have learned about SQL
-              from the basics to advanced concepts in a way that is easy to
-              understand and apply. Whether you are just starting or looking to
-              sharpen your skills, you are in the right place.
-            </p>
-          </div>
-        }
-      />
-
-      <CourseAuthor />
-
-      <FAQSection />
-
-      <FloatingPurchase />
-
-      <div className="mt-12 w-full max-w-3xl text-left md:mt-9">
-        <p className="flex flex-col gap-2 items-center justify-center text-sm md:flex-row md:gap-0">
-          <a href="/terms" target="_blank" className="text-zinc-500">
-            Terms of Use
           </a>
-          <span className="mx-4 hidden md:block">&middot;</span>
+          <AccountButton />
-          <a href="/privacy" target="_blank" className="text-zinc-500">
+        </div>
-            Privacy Policy
+        <div className="relative mt-7 max-w-4xl text-left md:mt-20 md:text-center">
-          </a>
+          <Spotlight className="top-[-200px] left-[-170px]" fill="#EAB308" />
-        </p>
+
+          <div className="inline-block rounded-full bg-yellow-500/10 px-4 py-1.5 text-base text-yellow-500 md:px-6 md:py-2 md:text-lg">
+            <span className="hidden sm:block">
+              Complete Course to Master Practical SQL
+            </span>
+            <span className="block sm:hidden">Complete SQL Course</span>
+          </div>
+
+          <h1 className="mt-5 text-4xl font-bold tracking-tight text-white md:mt-8 md:text-7xl">
+            Master SQL{' '}
+            <span className="hidden min-[384px]:inline">Queries</span>
+            <div className="mt-2.5 bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent md:text-6xl lg:text-7xl">
+              From Basic to Advanced
+            </div>
+          </h1>
+
+          <AuthorCredentials />
+          <p className="mx-auto my-5 max-w-2xl text-xl text-zinc-300 md:my-12 lg:text-2xl">
+            A structured course to master database querying - perfect for
+            developers, data analysts, and anyone working with data.
+          </p>
+
+          <div className="hidden flex-row items-center justify-center gap-5 md:flex">
+            <div className="flex flex-row items-center gap-2">
+              <ClipboardIcon className="size-6 text-yellow-600" />
+              <span>55+ Lessons</span>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <FileQuestionIcon className="size-6 text-yellow-600" />
+              <span>100+ Challenges</span>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <CodeIcon className="size-6 text-yellow-600" />
+              <span>Integrated IDE</span>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <BrainIcon className="size-6 text-yellow-600" />
+              <span>AI Tutor</span>
+            </div>
+          </div>
+
+          <div className="mt-7 flex justify-start md:mt-12 md:justify-center">
+            <BuyButton variant="main" />
+          </div>
+        </div>
+
+        <ReviewsSection />
+
+        <PlatformDemo />
+
+        <AuthorQuoteMessage />
+
+        <SectionHeader
+          title="Not your average SQL course"
+          description="Built around a text-based interactive approach and packed with practical challenges, this comprehensive SQL bootcamp stands out with features that make it truly unique."
+          className="mt-16 md:mt-20"
+        />
+
+        <div className="mx-auto mt-6 w-full max-w-5xl md:mt-10">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-4 lg:grid-cols-3">
+            <CourseFeature
+              title="Textual Course"
+              icon={Eye}
+              imgUrl="https://assets.roadmap.sh/guest/textual-course.png"
+              description="Unlike video-based courses where you have to learn at the pace of the instructor, this course is text-based, allowing you to learn at your own pace."
+            />
+            <CourseFeature
+              title="Coding Environment"
+              icon={CodeIcon}
+              imgUrl="https://assets.roadmap.sh/guest/coding-environment.png"
+              description="With the integrated IDE, you can practice your SQL queries in real-time, getting instant feedback on your results."
+            />
+            <CourseFeature
+              title="Practical Challenges"
+              icon={FileQuestionIcon}
+              imgUrl="https://assets.roadmap.sh/guest/coding-challenges.png"
+              description="The course is packed with practical challenges and quizzes, allowing you to test your knowledge and skills."
+            />
+            <CourseFeature
+              title="AI Instructor"
+              icon={BrainIcon}
+              description="Powerful AI tutor to help you with your queries, provide additional explanations and help if you get stuck."
+              imgUrl="https://assets.roadmap.sh/guest/ai-integration.png"
+            />
+            <CourseFeature
+              title="Take Notes"
+              icon={ClipboardIcon}
+              description="The course allows you to take notes, where you can write down your thoughts and ideas. You can visit them later to review your progress."
+              imgUrl="https://assets.roadmap.sh/guest/course-notes.png"
+            />
+            <CourseFeature
+              title="Completion Certificate"
+              icon={FileCheckIcon}
+              imgUrl="https://assets.roadmap.sh/guest/course-certificate.jpg"
+              description="The course provides a completion certificate, which you can share with your potential employers."
+            />
+          </div>
+        </div>
+
+        <div className="mt-7 w-full max-w-3xl text-left md:mt-9">
+          <p className="text-lg leading-normal md:text-xl">
+            Oh, and you get the{' '}
+            <span className="bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
+              lifetime access
+            </span>{' '}
+            to the course including all the future updates. Also, there is a
+            certificate of completion which you can share with your potential
+            employers.
+          </p>
+        </div>
+
+        <SectionHeader
+          title="Course Overview"
+          description="This SQL programming class is designed to help you go from beginner to expert through hands-on practice with real-world scenarios, mastering everything from basic to complex queries."
+          className="mt-8 md:mt-24"
+        />
+
+        <div className="mt-8 w-full max-w-3xl space-y-4 md:mt-12">
+          {chapters.map((chapter, index) => (
+            <ChapterRow key={index} counter={index + 1} {...chapter} />
+          ))}
+        </div>
+
+        <SectionHeader
+          title="About the Author"
+          className="mt-12 md:mt-24"
+          description={
+            <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 and scaled software systems, architected complex data
+                systems, and worked with large amounts of data to create
+                efficient solutions.
+              </p>
+              <p>
+                I am also the creator of{' '}
+                <a
+                  href="https://roadmap.sh"
+                  target="_blank"
+                  className="text-yellow-400"
+                >
+                  roadmap.sh
+                </a>
+                , a platform trusted by millions of developers to guide their
+                learning journeys. I love to simplify complex topics and make
+                learning practical and accessible.
+              </p>
+              <p>
+                In this course, I will share everything I have learned about SQL
+                from the basics to advanced concepts in a way that is easy to
+                understand and apply. Whether you are just starting or looking
+                to sharpen your skills, you are in the right place.
+              </p>
+            </div>
+          }
+        />
+
+        <CourseAuthor />
+
+        <FAQSection />
+
+        <FloatingPurchase />
+
+        <div className="mt-12 w-full max-w-3xl text-left md:mt-9">
+          <p className="flex flex-col items-center justify-center gap-2 text-sm md:flex-row md:gap-0">
+            <a href="/terms" target="_blank" className="text-zinc-500">
+              Terms of Use
+            </a>
+            <span className="mx-4 hidden md:block">&middot;</span>
+            <a href="/privacy" target="_blank" className="text-zinc-500">
+              Privacy Policy
+            </a>
+          </p>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

tailwind.config.cjs

@@ -38,13 +38,13 @@ module.exports = {
           },
         },
         spotlight: {
-          "0%": {
+          '0%': {
             opacity: 0,
-            transform: "translate(-72%, -62%) scale(0.5)",
+            transform: 'translate(-72%, -62%) scale(0.5)',
           },
-          "100%": {
+          '100%': {
             opacity: 1,
-            transform: "translate(-50%,-40%) scale(1)",
+            transform: 'translate(-50%,-40%) scale(1)',
           },
         },
         wiggle: {
@@ -60,7 +60,7 @@ module.exports = {
         'fade-slide-up':
           'fade-slide-up 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
         'fade-in': 'fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
-        spotlight: "spotlight 2s ease 0.25s 1 forwards",
+        spotlight: 'spotlight 2s ease 0.25s 1 forwards',
         wiggle: 'wiggle 0.5s ease-in-out forwards',
       },
     },