diff --git a/src/components/SQLCourseVariant/BuyButton.tsx b/src/components/SQLCourseVariant/BuyButton.tsx index c43063a43..90ab7ea92 100644 --- a/src/components/SQLCourseVariant/BuyButton.tsx +++ b/src/components/SQLCourseVariant/BuyButton.tsx @@ -347,7 +347,7 @@ export function BuyButton(props: BuyButtonProps) { className={cn( 'group relative inline-flex min-w-[220px] items-center justify-center overflow-hidden rounded-full bg-[rgb(168,85,247)] px-8 py-3 font-medium text-white transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(168,85,247,0.4)] focus:outline-hidden', (isLoadingPricing || isCreatingCheckoutSession) && - 'striped-loader-yellow pointer-events-none bg-yellow-500', + 'striped-loader pointer-events-none bg-[rgb(168,85,247)]', )} > {isLoadingPricing ? ( diff --git a/src/components/SQLCourseVariant/FAQSection.tsx b/src/components/SQLCourseVariant/FAQSection.tsx new file mode 100644 index 000000000..a1e96b534 --- /dev/null +++ b/src/components/SQLCourseVariant/FAQSection.tsx @@ -0,0 +1,115 @@ +import { ChevronDownIcon } from 'lucide-react'; +import { useState } from 'react'; +import { SectionHeader } from './SectionHeader'; + +type FAQItem = { + question: string; + answer: string; +}; + +function FAQRow({ question, answer }: FAQItem) { + const [isExpanded, setIsExpanded] = useState(false); + + return ( +
+ + {isExpanded && ( +
+

{answer}

+
+ )} +
+ ); +} + +export function FAQSection() { + const faqs: FAQItem[] = [ + { + question: 'What is the format of the course?', + answer: + 'The course is written in textual format. There are several chapters; each chapter has a set of lessons, followed by a set of practice problems and quizzes. You can learn at your own pace and revisit the content anytime.', + }, + { + question: 'What prerequisites do I need for this course?', + answer: + 'No prior SQL knowledge is required. The course starts from the basics and gradually progresses to advanced topics.', + }, + { + question: 'Do I need to have a local database to follow the course?', + answer: + 'No, we have an integrated coding playground, populated with a sample databases depending on the lesson, that you can use to follow the course. You can also use your own database if you have one.', + }, + { + question: 'How long do I have access to the course?', + answer: + 'You get lifetime access to the course including all future updates. Once you purchase, you can learn at your own pace and revisit the content anytime.', + }, + { + question: 'What kind of support is available?', + answer: + 'You get access to an AI tutor within the course that can help you with queries 24/7. Additionally, you can use the community forums to discuss problems and get help from other learners.', + }, + { + question: 'Will I get a certificate upon completion?', + answer: + "Yes, upon completing the course and its challenges, you'll receive a certificate of completion that you can share with employers or add to your LinkedIn profile.", + }, + { + question: 'Can I use this for job interviews?', + answer: + 'Absolutely! The course covers common SQL interview topics and includes practical challenges similar to what you might face in technical interviews. The hands-on experience will prepare you well for real-world scenarios.', + }, + { + question: "What if I don't like the course?", + answer: + "You can request a refund within 30 days of purchase by emailing info@roadmap.sh. The refund amount will be prorated based on when you request it. For example, if you request a refund 15 days after purchase, you'll receive 50% back. I'd also love to hear your feedback to improve the course.", + }, + { + question: 'I already know SQL, can I still take this course?', + answer: + 'Yes! The course starts from the basics and gradually progresses to advanced topics. You can skip the chapters that you already know and focus on the ones that you need.', + }, + { + question: 'Do you offer any team licenses?', + answer: 'Yes, please contact me at kamran@roadmap.sh', + }, + { + question: 'How can I gift this course to someone?', + answer: + 'Please contact me at kamran@roadmap.sh and I will be happy to help you.', + }, + { + question: 'What if I have a question that is not answered here?', + answer: + 'Please contact me at kamran@roadmap.sh and I will be happy to help you.', + }, + ]; + + return ( + <> + + +
+ {faqs.map((faq, index) => ( + + ))} +
+ + ); +} diff --git a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx index 5827d1b82..257c7f0e4 100644 --- a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx +++ b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx @@ -24,6 +24,8 @@ import { CourseFeatures } from './CourseFeatures'; import { MeetYourInstructor } from './MeetYourInstructor'; import { SectionHeader } from './SectionHeader'; import { ChapterRow } from './ChapterRow'; +import { BuyButton } from './BuyButton'; +import { FAQSection } from './FAQSection'; type ChapterData = { icon: React.ReactNode; @@ -317,6 +319,30 @@ export function SQLCourseVariantPage() { ))} + + + +
+ +
+ + + +
+

+ + Terms of Use + + · + + Privacy Policy + +

+