From be249a73a51ecdfeddec397937fc57c82cfeb63b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 30 Jun 2025 23:19:29 +0100
Subject: [PATCH] Improve overall page design

---
 .../SQLCourseVariant/AuthorCredentials.tsx    | 34 ++++++++-----------
 .../SQLCourseVariant/ChapterRow.tsx           |  4 +--
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/SQLCourseVariant/AuthorCredentials.tsx b/src/components/SQLCourseVariant/AuthorCredentials.tsx
index 2a63d3c2d..4c031e5d2 100644
--- a/src/components/SQLCourseVariant/AuthorCredentials.tsx
+++ b/src/components/SQLCourseVariant/AuthorCredentials.tsx
@@ -4,48 +4,44 @@ import { Popover, PopoverContent, PopoverTrigger } from '../Popover';
 
 export function AuthorCredentials() {
   return (
-    <div className="flex items-center gap-4 text-white lg:mt-auto">
+    <div className="flex items-center gap-3 text-white lg:mt-auto">
       <img
         src="https://assets.roadmap.sh/guest/kamran-course-pf-agibf.jpg"
-        className="aspect-[4/5] h-[140px] w-[112px] rounded-2xl object-cover shadow-lg"
+        className="aspect-[4/5] h-[110px] w-[88px] rounded-xl object-cover shadow-md"
         alt="Kamran Ahmed"
       />
 
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2">
         <div>
-          <a
-            href="https://twitter.com/kamrify"
-            target="_blank"
-            className="text-xl font-semibold transition-colors duration-200 hover:text-blue-400"
-          >
-            Kamran Ahmed
-          </a>
-          <p className="mt-1 text-sm text-gray-300">
+          <p className="text-xl font-medium transition-colors duration-200">
+            by Kamran Ahmed
+          </p>
+          <p className="mt-0.5 text-sm text-gray-400">
             Your teacher for this course
           </p>
         </div>
 
-        <div className="flex flex-col gap-1.5">
+        <div className="flex flex-col gap-1">
           <a
             href="https://github.com/kamranahmedse"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-yellow-500/30 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 px-3 py-1.5 backdrop-blur-sm transition-all duration-200 hover:border-yellow-400/50 hover:from-yellow-500/30 hover:to-orange-500/30"
+            className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gradient-to-r from-yellow-500/15 to-orange-500/15 px-2 py-1.5 backdrop-blur-sm transition-all duration-200 hover:border-yellow-400/40 hover:from-yellow-500/25 hover:to-orange-500/25"
           >
-            <GitHubIcon className="size-3.5 text-yellow-400" />
-            <span className="text-xs font-medium text-yellow-100">
+            <GitHubIcon className="size-3 text-yellow-400" />
+            <span className="text-xs font-medium text-yellow-200">
               #2 Most Starred Developer
             </span>
           </a>
 
           <Popover>
             <PopoverTrigger asChild>
-              <div className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-purple-500/30 bg-gradient-to-r from-purple-500/20 to-pink-500/20 px-3 py-1.5 backdrop-blur-sm transition-all duration-200 hover:border-purple-400/50 hover:from-purple-500/30 hover:to-pink-500/30">
-                <AwardIcon className="size-3.5 text-purple-400" />
-                <span className="text-xs font-medium text-purple-100">
+              <div className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gradient-to-r from-yellow-500/15 to-orange-500/15 px-2 py-1.5 backdrop-blur-sm transition-all duration-200 hover:border-yellow-400/40 hover:from-yellow-500/25 hover:to-orange-500/25">
+                <AwardIcon className="size-3 text-yellow-400" />
+                <span className="text-xs font-medium text-yellow-200">
                   Founder roadmap.sh
                 </span>
-                <InfoIcon className="ml-1 size-3.5 text-purple-400/70 hover:text-purple-300" />
+                <InfoIcon className="ml-auto size-3 text-yellow-400/70 hover:text-yellow-300" />
               </div>
             </PopoverTrigger>
             <PopoverContent
diff --git a/src/components/SQLCourseVariant/ChapterRow.tsx b/src/components/SQLCourseVariant/ChapterRow.tsx
index 08e49309d..c7c5fcb97 100644
--- a/src/components/SQLCourseVariant/ChapterRow.tsx
+++ b/src/components/SQLCourseVariant/ChapterRow.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, BookIcon, CodeIcon, CircleDot } from 'lucide-react';
 import { cn } from '../../lib/classname';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 type ChapterRowProps = {
   counter: number;
@@ -100,7 +100,7 @@ export function ChapterRow(props: ChapterRowProps) {
                   {regularLessons.map((lesson, index) => (
                     <div
                       key={index}
-                      className="flex items-center gap-3 text-zinc-400 hover:text-yellow-500"
+                      className="flex items-center gap-3 text-zinc-400 cursor-text"
                     >
                       <BookIcon className="h-4 w-4" />
                       <span>{lesson.title}</span>