mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-29 20:21:50 +02:00
Add sql coupon code
This commit is contained in:
Kamran Ahmed
@@ -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">·</span>{' '}
|
||||
<button
|
||||
onClick={() => setIsVideoModalOpen(true)}
|
||||
|
||||
63
src/components/SQLCourse/CourseDiscountBanner.tsx
Normal file
63
src/components/SQLCourse/CourseDiscountBanner.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
<a
|
||||
href="https://roadmap.sh"
|
||||
target="_blank"
|
||||
className="opacity-20 transition-opacity hover:opacity-100"
|
||||
>
|
||||
<RoadmapLogoIcon />
|
||||
</a>
|
||||
<AccountButton />
|
||||
</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
|
||||
<>
|
||||
<CourseDiscountBanner />
|
||||
<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="flex w-full items-center justify-between">
|
||||
<a
|
||||
href="https://roadmap.sh"
|
||||
target="_blank"
|
||||
className="opacity-20 transition-opacity hover:opacity-100"
|
||||
>
|
||||
<RoadmapLogoIcon />
|
||||
</a>
|
||||
<span className="mx-4 hidden md:block">·</span>
|
||||
<a href="/privacy" target="_blank" className="text-zinc-500">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</p>
|
||||
<AccountButton />
|
||||
</div>
|
||||
<div className="relative mt-7 max-w-4xl text-left md:mt-20 md:text-center">
|
||||
<Spotlight className="top-[-200px] left-[-170px]" 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 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">·</span>
|
||||
<a href="/privacy" target="_blank" className="text-zinc-500">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user