Add course author messageg

src/components/SQLCourse/AuthorQuoteMessage.tsx

@@ -0,0 +1,45 @@
+import { QuoteIcon } from 'lucide-react';
+
+export function AuthorQuoteMessage() {
+  return (
+    <div className="mx-auto mt-14 max-w-2xl sm:mt-20">
+      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-yellow-500/10 via-yellow-400/5 to-yellow-300/10 p-6 sm:p-10">
+        {/* Decorative quote mark */}
+        <div className="absolute left-4 top-4 font-serif text-8xl text-yellow-500/10 sm:block hidden">
+          <QuoteIcon className="scale-x-[-1] fill-current" />
+        </div>
+
+        <div className="relative">
+          <p className="mb-6 text-base sm:text-xl leading-relaxed text-zinc-200">
+            As someone who has worked extensively with databases throughout my
+            career, I know firsthand how crucial SQL skills are. I've created
+            this course to share the practical knowledge that has helped me
+            build and scale data systems at various companies.
+          </p>
+
+          <div className="flex items-center gap-4 border-t border-yellow-500/20 pt-6">
+            <img
+              src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
+              alt="Kamran Ahmed"
+              className="size-14 rounded-full ring-2 ring-yellow-500/20"
+            />
+            <div>
+              <h3 className="font-medium text-yellow-500">Kamran Ahmed</h3>
+              <p className="text-sm text-zinc-400">
+                Founder roadmap.sh <span className="mx-1 sm:inline hidden">·</span>
+                <a
+                  href="https://twitter.com/kamrify"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="ml-0.5 text-yellow-500/80 underline underline-offset-4 hover:text-yellow-500"
+                >
+                  @kamrify
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/SQLCourse/BuyButton.tsx

@@ -199,7 +199,7 @@ export function BuyButton(props: BuyButtonProps) {
           )}
         </button>
 
-        {!isLoadingPricing && !isAlreadyEnrolled && (
+        {!isLoadingPricing && (
           <span className="absolute top-full translate-y-2.5 text-sm text-yellow-400">
             Lifetime access <span className="mx-1">&middot;</span> Free updates
           </span>

src/components/SQLCourse/CourseAuthor.tsx

@@ -3,8 +3,9 @@ export function CourseAuthor() {
     <div className="mt-8 w-full max-w-3xl space-y-4">
       <div className="flex flex-row items-center gap-5">
         <img
-          src="https://github.com/kamranahmedse.png"
+          src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
           className="size-12 rounded-full bg-yellow-500/10 md:size-16"
+          alt="Kamran Ahmed"
         />
         <a
           href="https://twitter.com/kamrify"

src/components/SQLCourse/PlatformDemo.tsx

@@ -33,7 +33,7 @@ export function PlatformDemo() {
         src="https://assets.roadmap.sh/guest/course-environment-87jg8.png"
         alt="Course Environment"
         onClick={() => setIsZoomed(true)}
-        className="mt-20 w-full max-w-5xl rounded-xl cursor-zoom-in"
+        className="mt-12 sm:mt-20 w-full max-w-5xl rounded-xl cursor-zoom-in"
       />
     </>
   );

src/components/SQLCourse/SQLCoursePage.tsx

@@ -26,7 +26,7 @@ import { BuyButton } from './BuyButton';
 import { AccountButton } from './AccountButton';
 import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
 import { PlatformDemo } from './PlatformDemo';
-
+import { AuthorQuoteMessage } from './AuthorQuoteMessage';
 type ChapterData = {
   icon: React.ReactNode;
   title: string;
@@ -243,7 +243,7 @@ export function SQLCoursePage() {
   ];
 
   return (
-    <div className="flex flex-grow flex-col items-center bg-gradient-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="relative flex flex-grow flex-col items-center bg-gradient-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"
@@ -299,6 +299,8 @@ export function SQLCoursePage() {
         </div>
       </div>
 
+      <AuthorQuoteMessage />
+
       <PlatformDemo />
 
       <SectionHeader