diff --git a/src/components/SQLCourse/BuyButton.tsx b/src/components/SQLCourse/BuyButton.tsx index 9f6bc3b43..7434ecce6 100644 --- a/src/components/SQLCourse/BuyButton.tsx +++ b/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) { setIsLoginPopupOpen(false)} /> ); + const mainCouponAlert = ( +
+
+
+ + 🎁 30% OFF with code{' '} + + +
+
+ ); + if (variant === 'main') { return (
@@ -218,7 +253,9 @@ export function BuyButton(props: BuyButtonProps) { onClose={() => setIsVideoModalOpen(false)} /> )} -
+
+ {!isLoadingPricing && !isAlreadyEnrolled && mainCouponAlert} + + +
+ ); +} diff --git a/src/components/SQLCourse/SQLCoursePage.tsx b/src/components/SQLCourse/SQLCoursePage.tsx index 3aabd5aa9..e1257c7b1 100644 --- a/src/components/SQLCourse/SQLCoursePage.tsx +++ b/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 ( -
-
- - - - -
-
- - -
- - Complete Course to Master Practical SQL - - Complete SQL Course -
- -

- Master SQL Queries -
- From Basic to Advanced -
-

- - -

- A structured course to master database querying - perfect for - developers, data analysts, and anyone working with data. -

- -
-
- - 55+ Lessons -
-
- - 100+ Challenges -
-
- - Integrated IDE -
-
- - AI Tutor -
-
- -
- -
-
- - - - - - - - - -
-
- - - - - - -
-
- -
-

- Oh, and you get the{' '} - - lifetime access - {' '} - to the course including all the future updates. Also, there is a - certificate of completion which you can share with your potential - employers. -

-
- - - -
- {chapters.map((chapter, index) => ( - - ))} -
- - -

- 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. -

-

- I am also the creator of{' '} - - roadmap.sh - - , a platform trusted by millions of developers to guide their - learning journeys. I love to simplify complex topics and make - learning practical and accessible. -

-

- 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. -

-
- } - /> - - - - - - - -
-

- - Terms of Use + <> + +

+ +
+ + +
+ + Complete Course to Master Practical SQL + + Complete SQL Course +
+ +

+ Master SQL{' '} + Queries +
+ From Basic to Advanced +
+

+ + +

+ A structured course to master database querying - perfect for + developers, data analysts, and anyone working with data. +

+ +
+
+ + 55+ Lessons +
+
+ + 100+ Challenges +
+
+ + Integrated IDE +
+
+ + AI Tutor +
+
+ +
+ +
+
+ + + + + + + + + +
+
+ + + + + + +
+
+ +
+

+ Oh, and you get the{' '} + + lifetime access + {' '} + to the course including all the future updates. Also, there is a + certificate of completion which you can share with your potential + employers. +

+
+ + + +
+ {chapters.map((chapter, index) => ( + + ))} +
+ + +

+ 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. +

+

+ I am also the creator of{' '} + + roadmap.sh + + , a platform trusted by millions of developers to guide their + learning journeys. I love to simplify complex topics and make + learning practical and accessible. +

+

+ 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. +

+
+ } + /> + + + + + + + +
-
+ ); } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 1b2966596..c84d3cbee 100644 --- a/tailwind.config.cjs +++ b/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', }, },