From 86cf5e745b8a422c4361a5e3e64ee313a37247ae Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 27 Jun 2025 01:34:06 +0600
Subject: [PATCH] wip

---
 .../SQLCourseVariant/ChapterRow.tsx           | 140 ++++++++
 .../SQLCourseVariant/CourseFeatures.tsx       |   7 +-
 .../SQLCourseVariant/MeetYourInstructor.tsx   |  60 ++++
 .../SQLCourseVariant/SQLCourseVariantPage.tsx | 329 +++++++++++++++---
 4 files changed, 490 insertions(+), 46 deletions(-)
 create mode 100644 src/components/SQLCourseVariant/ChapterRow.tsx
 create mode 100644 src/components/SQLCourseVariant/MeetYourInstructor.tsx

diff --git a/src/components/SQLCourseVariant/ChapterRow.tsx b/src/components/SQLCourseVariant/ChapterRow.tsx
new file mode 100644
index 000000000..aaa7b0c38
--- /dev/null
+++ b/src/components/SQLCourseVariant/ChapterRow.tsx
@@ -0,0 +1,140 @@
+import { ChevronDown, BookIcon, CodeIcon, CircleDot } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { useEffect, useState } from 'react';
+
+type ChapterRowProps = {
+  counter: number;
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  lessonCount: number;
+  challengeCount: number;
+  isExpandable?: boolean;
+  className?: string;
+  lessons?: { title: string; type: 'lesson' | 'challenge' | 'quiz' }[];
+};
+
+export function ChapterRow(props: ChapterRowProps) {
+  const {
+    counter,
+    icon,
+    title,
+    description,
+    lessonCount,
+    challengeCount,
+    isExpandable = true,
+    className,
+    lessons = [],
+  } = props;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const regularLessons = lessons.filter((l) => l.type === 'lesson');
+  const challenges = lessons.filter((l) =>
+    ['challenge', 'quiz'].includes(l.type),
+  );
+
+  return (
+    <div
+      className={cn('group relative overflow-hidden select-none', className)}
+    >
+      <div
+        role="button"
+        onClick={() => isExpandable && setIsExpanded(!isExpanded)}
+        className={cn(
+          'relative rounded-xl border border-zinc-800 bg-zinc-800 p-6',
+          'bg-linear-to-br from-zinc-900/90 via-zinc-900/70 to-zinc-900/50',
+          !isExpanded &&
+            'hover:bg-linear-to-br hover:from-zinc-900/95 hover:via-zinc-900/80 hover:to-zinc-900/60',
+          !isExpanded &&
+            'hover:cursor-pointer hover:shadow-[0_0_30px_rgba(0,0,0,0.2)]',
+          isExpanded && 'cursor-pointer rounded-b-none border-b-0',
+        )}
+      >
+        <div className="flex items-start gap-4">
+          <div className="hidden shrink-0 md:block">
+            <div className="rounded-full bg-yellow-500/10 p-3">{icon}</div>
+          </div>
+
+          <div className="grow">
+            <h3 className="text-xl font-semibold tracking-wide text-white">
+              <span className="inline text-gray-500 md:hidden">
+                {counter}.{' '}
+              </span>
+              {title}
+            </h3>
+            <p className="mt-2 text-zinc-400">{description}</p>
+
+            <div className="mt-4 flex items-center gap-4">
+              <div className="flex items-center gap-2 text-sm text-zinc-500">
+                <span>{lessonCount} Lessons</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-zinc-500">
+                <span>{challengeCount} Challenges</span>
+              </div>
+            </div>
+          </div>
+
+          {isExpandable && (
+            <div className="shrink-0 rounded-full bg-zinc-800/80 p-2 text-zinc-400 group-hover:bg-zinc-800 group-hover:text-yellow-500">
+              <ChevronDown
+                className={cn(
+                  'h-4 w-4 transition-transform',
+                  isExpanded ? 'rotate-180' : '',
+                )}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="rounded-b-xl border border-t-0 border-zinc-800 bg-linear-to-br from-zinc-900/50 via-zinc-900/30 to-zinc-900/20">
+          <div className="grid grid-cols-1 divide-zinc-800 md:grid-cols-2 md:divide-x">
+            {regularLessons.length > 0 && (
+              <div className="p-6 pb-0 md:pb-6">
+                <h4 className="mb-4 text-sm font-medium tracking-wider text-zinc-500 uppercase">
+                  Lessons
+                </h4>
+                <div className="space-y-3">
+                  {regularLessons.map((lesson, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-3 text-zinc-400 hover:text-yellow-500"
+                    >
+                      <BookIcon className="h-4 w-4" />
+                      <span>{lesson.title}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {challenges.length > 0 && (
+              <div className="p-6">
+                <h4 className="mb-4 text-sm font-medium tracking-wider text-zinc-500 uppercase">
+                  Exercises
+                </h4>
+                <div className="space-y-3">
+                  {challenges.map((challenge, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-3 text-zinc-400 hover:text-yellow-500"
+                    >
+                      {challenge.type === 'challenge' ? (
+                        <CodeIcon className="h-4 w-4" />
+                      ) : (
+                        <CircleDot className="h-4 w-4" />
+                      )}
+                      <span>{challenge.title}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SQLCourseVariant/CourseFeatures.tsx b/src/components/SQLCourseVariant/CourseFeatures.tsx
index c0e3a567b..93511ee6d 100644
--- a/src/components/SQLCourseVariant/CourseFeatures.tsx
+++ b/src/components/SQLCourseVariant/CourseFeatures.tsx
@@ -102,7 +102,12 @@ function CourseFeature(props: CourseFeatureProps) {
 
   return (
     <div>
-      <div className="flex items-center justify-between gap-2 px-5 py-3">
+      <div
+        className={cn(
+          'flex items-center justify-between gap-2 px-5 py-3',
+          !isExpanded && 'bg-zinc-900',
+        )}
+      >
         <div className="flex items-center gap-2">
           <Icon className="h-5 w-5 shrink-0 text-yellow-600" />
           <h3 className={cn('text-lg', isExpanded && 'text-zinc-200')}>
diff --git a/src/components/SQLCourseVariant/MeetYourInstructor.tsx b/src/components/SQLCourseVariant/MeetYourInstructor.tsx
new file mode 100644
index 000000000..a6031315c
--- /dev/null
+++ b/src/components/SQLCourseVariant/MeetYourInstructor.tsx
@@ -0,0 +1,60 @@
+import { AwardIcon, TrophyIcon } from 'lucide-react';
+
+export function MeetYourInstructor() {
+  return (
+    <div className="mx-auto mt-14 max-w-3xl rounded-2xl bg-yellow-500/10 p-5">
+      <h4 className="text-center text-2xl font-medium text-zinc-200 md:text-3xl">
+        Meet your instructor: Kamran Ahmed
+      </h4>
+
+      <div className="mt-14 flex gap-10">
+        <div className="flex shrink-0 flex-col items-center">
+          <img
+            src="https://assets.roadmap.sh/guest/kamran-lqjta.jpeg"
+            alt="Kamran Ahmed"
+            className="h-24 w-24 rounded-full"
+          />
+          <h5 className="mt-2 text-lg font-medium text-zinc-200">
+            Kamran Ahmed
+          </h5>
+          <span>Founder roadmap.sh</span>
+        </div>
+        <div className="text-zinc-300">
+          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-zinc-400">
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-yellow-500/10 px-3 py-1">
+              <TrophyIcon className="size-4 text-yellow-500/80" />
+              Multiple GitHub Star Awards
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-yellow-500/10 px-3 py-1">
+              <svg className="size-4 fill-yellow-500/80" viewBox="0 0 24 24">
+                <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.291 2.747-1.022 2.747-1.022.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+              </svg>
+              #2 Most Starred Developer
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-yellow-500/10 px-3 py-1">
+              <AwardIcon className="size-4 text-yellow-500/80" />
+              Founder roadmap.sh
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-yellow-500/10 px-3 py-1">
+              <AwardIcon className="size-4 text-yellow-500/80" />
+              Google Developer Expert
+            </span>
+          </div>
+
+          <p className="mt-8 text-base text-zinc-300">
+            Kamran is the creator of roadmap.sh (2M+ registered users!) and an
+            engineering leader with over a decade of experience in the tech
+            industry. Throughout his career he’s built and scaled software
+            systems, designed complex data systems, and worked with large
+            amounts of data to create efficient solutions.
+          </p>
+
+          <p className="mt-4 text-base text-zinc-300">
+            This hands-on, AI-assisted course is his distilled blueprint on how
+            to master SQL queries, from beginner to advanced.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
index 0bc8f9fa2..5827d1b82 100644
--- a/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
+++ b/src/components/SQLCourseVariant/SQLCourseVariantPage.tsx
@@ -5,6 +5,14 @@ import {
   Eye,
   FileCheckIcon,
   FileQuestionIcon,
+  DatabaseIcon,
+  TableIcon,
+  LayersIcon,
+  GitMergeIcon,
+  WrenchIcon,
+  BarChartIcon,
+  GitBranchIcon,
+  ArrowUpDownIcon,
 } from 'lucide-react';
 import { Spotlight } from '../SQLCourse/Spotlight';
 import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo';
@@ -13,64 +21,281 @@ import { PlatformDemo } from './PlatformDemo';
 import { PurchaseBanner } from './PurchaseBanner';
 import { ReviewCarousel } from './ReviewCarousel';
 import { CourseFeatures } from './CourseFeatures';
+import { MeetYourInstructor } from './MeetYourInstructor';
+import { SectionHeader } from './SectionHeader';
+import { ChapterRow } from './ChapterRow';
+
+type ChapterData = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  lessonCount: number;
+  challengeCount: number;
+  lessons: { title: string; type: 'lesson' | 'challenge' | 'quiz' }[];
+};
+
+export const sqlCourseChapters: ChapterData[] = [
+  {
+    icon: <DatabaseIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Introduction',
+    description: 'Get comfortable with database concepts and SQL fundamentals.',
+    lessonCount: 4,
+    challengeCount: 1,
+    lessons: [
+      { title: 'Basics of Databases', type: 'lesson' },
+      { title: 'What is SQL?', type: 'lesson' },
+      { title: 'Types of Queries', type: 'lesson' },
+      { title: 'Next Steps', type: 'lesson' },
+      { title: 'Introduction Quiz', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <TableIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'SQL Basics',
+    description: 'Master the essential SQL query operations and syntax.',
+    lessonCount: 9,
+    challengeCount: 7,
+    lessons: [
+      { title: 'SELECT Fundamentals', type: 'lesson' },
+      { title: 'Aliases and Constants', type: 'lesson' },
+      { title: 'Expressions in SELECT', type: 'lesson' },
+      { title: 'Selecting DISTINCT Values', type: 'lesson' },
+      { title: 'Filtering with WHERE', type: 'lesson' },
+      { title: 'Sorting with ORDER BY', type: 'lesson' },
+      { title: 'Limiting Results with LIMIT', type: 'lesson' },
+      { title: 'Handling NULL Values', type: 'lesson' },
+      { title: 'Comments', type: 'lesson' },
+      { title: 'Basic Queries Quiz', type: 'quiz' },
+      { title: 'Projection Challenge', type: 'challenge' },
+      { title: 'Select Expression', type: 'challenge' },
+      { title: 'Select Unique', type: 'challenge' },
+      { title: 'Logical Operators', type: 'challenge' },
+      { title: 'Sorting Challenge', type: 'challenge' },
+      { title: 'Sorting and Limiting', type: 'challenge' },
+      { title: 'Sorting and Filtering', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <CodeIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Manipulating Data',
+    description: 'Learn how to modify and manipulate data in your database.',
+    lessonCount: 3,
+    challengeCount: 3,
+    lessons: [
+      { title: 'INSERT Operations', type: 'lesson' },
+      { title: 'UPDATE Operations', type: 'lesson' },
+      { title: 'DELETE Operations', type: 'lesson' },
+      { title: 'Data Manipulation Quiz', type: 'quiz' },
+      { title: 'Inserting Customers', type: 'challenge' },
+      { title: 'Updating Bookstore', type: 'challenge' },
+      { title: 'Deleting Books', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <LayersIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Defining Tables',
+    description: 'Master database schema design and table management.',
+    lessonCount: 9,
+    challengeCount: 7,
+    lessons: [
+      { title: 'Creating Tables', type: 'lesson' },
+      { title: 'Data Types in SQLite', type: 'lesson' },
+      { title: 'Common Data Types', type: 'lesson' },
+      { title: 'More on Numeric Types', type: 'lesson' },
+      { title: 'Temporal Data Types', type: 'lesson' },
+      { title: 'CHECK Constraints', type: 'lesson' },
+      { title: 'Primary Key Constraint', type: 'lesson' },
+      { title: 'Modifying Tables', type: 'lesson' },
+      { title: 'Dropping and Truncating', type: 'lesson' },
+      { title: 'Defining Tables Quiz', type: 'quiz' },
+      { title: 'Simple Table Creation', type: 'challenge' },
+      { title: 'Data Types Challenge', type: 'challenge' },
+      { title: 'Constraints Challenge', type: 'challenge' },
+      { title: 'Temporal Validation', type: 'challenge' },
+      { title: 'Sales Data Analysis', type: 'challenge' },
+      { title: 'Modifying Tables', type: 'challenge' },
+      { title: 'Removing Table Data', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <GitMergeIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Multi-Table Queries',
+    description:
+      'Learn to work with multiple tables using JOINs and relationships.',
+    lessonCount: 7,
+    challengeCount: 10,
+    lessons: [
+      { title: 'More on Relational Data', type: 'lesson' },
+      { title: 'Relationships and Types', type: 'lesson' },
+      { title: 'JOINs in Queries', type: 'lesson' },
+      { title: 'Self Joins and Usecases', type: 'lesson' },
+      { title: 'Foreign Key Constraint', type: 'lesson' },
+      { title: 'Set Operator Queries', type: 'lesson' },
+      { title: 'Views and Virtual Tables', type: 'lesson' },
+      { title: 'Multi-Table Queries Quiz', type: 'quiz' },
+      { title: 'Inactive Customers', type: 'challenge' },
+      { title: 'Recent 3 Orders', type: 'challenge' },
+      { title: 'High Value Orders', type: 'challenge' },
+      { title: 'Specific Book Customers', type: 'challenge' },
+      { title: 'Referred Customers', type: 'challenge' },
+      { title: 'Readers Like You', type: 'challenge' },
+      { title: 'Same Price Books', type: 'challenge' },
+      { title: 'Multi-Section Authors', type: 'challenge' },
+      { title: 'Expensive Books', type: 'challenge' },
+      { title: 'Trending Tech Books', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <WrenchIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Aggregate Functions',
+    description:
+      "Analyze and summarize data using SQL's powerful aggregation features.",
+    lessonCount: 4,
+    challengeCount: 10,
+    lessons: [
+      { title: 'What is Aggregation?', type: 'lesson' },
+      { title: 'Basic Aggregation', type: 'lesson' },
+      { title: 'Grouping Data', type: 'lesson' },
+      { title: 'Grouping and Filtering', type: 'lesson' },
+      { title: 'Aggregate Queries Quiz', type: 'quiz' },
+      { title: 'Book Sales Summary', type: 'challenge' },
+      { title: 'Category Insights', type: 'challenge' },
+      { title: 'Author Tier Analysis', type: 'challenge' },
+      { title: 'Author Book Stats', type: 'challenge' },
+      { title: 'Daily Sales Report', type: 'challenge' },
+      { title: 'Publisher Stats', type: 'challenge' },
+      { title: 'High Value Publishers', type: 'challenge' },
+      { title: 'Premium Authors', type: 'challenge' },
+      { title: 'Sales Analysis', type: 'challenge' },
+      { title: 'Employee Performance', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <BarChartIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Scalar Functions',
+    description:
+      'Master built-in functions for data transformation and manipulation.',
+    lessonCount: 6,
+    challengeCount: 5,
+    lessons: [
+      { title: 'What are they?', type: 'lesson' },
+      { title: 'String Functions', type: 'lesson' },
+      { title: 'Numeric Functions', type: 'lesson' },
+      { title: 'Date Functions', type: 'lesson' },
+      { title: 'Conversion Functions', type: 'lesson' },
+      { title: 'Logical Functions', type: 'lesson' },
+      { title: 'Scalar Functions Quiz', type: 'quiz' },
+      { title: 'Customer Contact List', type: 'challenge' },
+      { title: 'Membership Duration', type: 'challenge' },
+      { title: 'Book Performance', type: 'challenge' },
+      { title: 'Book Categories', type: 'challenge' },
+      { title: 'Monthly Sales Analysis', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <GitBranchIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Subqueries and CTEs',
+    description:
+      'Write complex queries using subqueries and common table expressions.',
+    lessonCount: 4,
+    challengeCount: 6,
+    lessons: [
+      { title: 'What are Subqueries?', type: 'lesson' },
+      { title: 'Correlated Subqueries', type: 'lesson' },
+      { title: 'Common Table Expressions', type: 'lesson' },
+      { title: 'Recursive CTEs', type: 'lesson' },
+      { title: 'Subqueries Quiz', type: 'quiz' },
+      { title: 'Books Above Average', type: 'challenge' },
+      { title: 'Latest Category Books', type: 'challenge' },
+      { title: 'Low Stock by Category', type: 'challenge' },
+      { title: 'Bestseller Rankings', type: 'challenge' },
+      { title: 'New Customer Analysis', type: 'challenge' },
+      { title: 'Daily Sales Report', type: 'challenge' },
+    ],
+  },
+  {
+    icon: <ArrowUpDownIcon className="h-6 w-6 text-yellow-500" />,
+    title: 'Window Functions',
+    description: 'Advanced analytics and calculations using window functions.',
+    lessonCount: 5,
+    challengeCount: 7,
+    lessons: [
+      { title: 'What are they?', type: 'lesson' },
+      { title: 'OVER and PARTITION BY', type: 'lesson' },
+      { title: 'Use of ORDER BY', type: 'lesson' },
+      { title: 'Ranking Functions', type: 'lesson' },
+      { title: 'Window Frames', type: 'lesson' },
+      { title: 'Window Functions Quiz', type: 'quiz' },
+      { title: 'Basic Sales Metrics', type: 'challenge' },
+      { title: 'Bestseller Comparison', type: 'challenge' },
+      { title: 'Author Category Sales', type: 'challenge' },
+      { title: 'Top Authors', type: 'challenge' },
+      { title: 'Price Tier Rankings', type: 'challenge' },
+      { title: 'Month-over-Month Sales', type: 'challenge' },
+      { title: 'Price Range Analysis', type: 'challenge' },
+    ],
+  },
+];
 
 export function SQLCourseVariantPage() {
   return (
     <>
       <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="relative mt-7 w-full max-w-5xl md:mt-20">
-          <Spotlight className="top-[-200px] left-[-170px]" fill="#EAB308" />
+        <div className="mt-7 w-full max-w-5xl md:mt-20">
+          <div className="relative">
+            <Spotlight className="top-[-200px] left-[-170px]" fill="#EAB308" />
 
-          <div className="flex flex-row items-center gap-5">
-            <a
-              href="https://roadmap.sh"
-              target="_blank"
-              className="transition-opacity hover:opacity-100"
-            >
-              <RoadmapLogoIcon className="size-18" />
-            </a>
-            <div className="flex flex-col items-start gap-2.5">
-              <h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl">
-                Master SQL Queries
-              </h1>
-              <p className="text-left text-xl text-zinc-300 md:text-xl">
-                Complete course with AI Tutor, real-world challenges and more
-              </p>
+            <div className="flex flex-row items-center gap-5">
+              <a
+                href="https://roadmap.sh"
+                target="_blank"
+                className="transition-opacity hover:opacity-100"
+              >
+                <RoadmapLogoIcon className="size-18" />
+              </a>
+              <div className="flex flex-col items-start gap-2.5">
+                <h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl">
+                  Master SQL Queries
+                </h1>
+                <p className="text-left text-xl text-zinc-300 md:text-xl">
+                  Complete course with AI Tutor, real-world challenges and more
+                </p>
+              </div>
             </div>
-          </div>
 
-          <p className="my-5 text-xl text-balance text-zinc-300 md:my-14 lg:text-2xl">
-            Get certified for SQL queries and ready to deploy your newly-gained
-            skill in 30 days. Perfect for developers, data analysts, and anyone
-            working with data. Level up risk-free with a 7-day money-back
-            guarantee.
-          </p>
+            <p className="my-5 text-xl text-balance text-zinc-300 md:my-14 lg:text-2xl">
+              Get certified for SQL queries and ready to deploy your
+              newly-gained skill in 30 days. Perfect for developers, data
+              analysts, and anyone working with data. Level up risk-free with a
+              7-day money-back guarantee.
+            </p>
 
-          <div className="flex gap-14">
-            <div className="flex shrink-0 flex-col gap-3 text-lg">
-              <div className="flex flex-col gap-3">
-                <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">
-                  <BrainIcon className="size-6 text-yellow-600" />
-                  <span>AI Tutor</span>
-                </div>
-                <div className="flex flex-row items-center gap-2">
-                  <CodeIcon className="size-6 text-yellow-600" />
-                  <span>Integrated IDE</span>
+            <div className="flex gap-14">
+              <div className="flex shrink-0 flex-col gap-3 text-lg">
+                <div className="flex flex-col gap-3">
+                  <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">
+                    <BrainIcon className="size-6 text-yellow-600" />
+                    <span>AI Tutor</span>
+                  </div>
+                  <div className="flex flex-row items-center gap-2">
+                    <CodeIcon className="size-6 text-yellow-600" />
+                    <span>Integrated IDE</span>
+                  </div>
                 </div>
+
+                <AuthorCredentials />
               </div>
 
-              <AuthorCredentials />
+              <PlatformDemo />
             </div>
-
-            <PlatformDemo />
           </div>
 
           <PurchaseBanner />
@@ -78,6 +303,20 @@ export function SQLCourseVariantPage() {
           <ReviewCarousel />
 
           <CourseFeatures />
+
+          <MeetYourInstructor />
+
+          <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="mx-auto mt-8 w-full max-w-3xl space-y-4 md:mt-12">
+            {sqlCourseChapters.map((chapter, index) => (
+              <ChapterRow key={index} counter={index + 1} {...chapter} />
+            ))}
+          </div>
         </div>
       </div>
     </>