info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-01 21:32:35 +02:00
Code Issues Releases Wiki Activity

Improve overall page design

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-30 23:19:29 +01:00
parent f621d0a549
commit be249a73a5
2 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/SQLCourseVariant/AuthorCredentials.tsx
View File

@@ -4,48 +4,44 @@ import { Popover, PopoverContent, PopoverTrigger } from '../Popover';
export function AuthorCredentials() { export function AuthorCredentials() {
return ( 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 <img
src="https://assets.roadmap.sh/guest/kamran-course-pf-agibf.jpg" 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" alt="Kamran Ahmed"
/> />
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-2">
<div> <div>
<a <p className="text-xl font-medium transition-colors duration-200">
href="https://twitter.com/kamrify" by Kamran Ahmed
target="_blank" </p>
className="text-xl font-semibold transition-colors duration-200 hover:text-blue-400" <p className="mt-0.5 text-sm text-gray-400">
>
Kamran Ahmed
</a>
<p className="mt-1 text-sm text-gray-300">
Your teacher for this course Your teacher for this course
</p> </p>
</div> </div>
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1">
<a <a
href="https://github.com/kamranahmedse" href="https://github.com/kamranahmedse"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <GitHubIcon className="size-3 text-yellow-400" />
<span className="text-xs font-medium text-yellow-100"> <span className="text-xs font-medium text-yellow-200">
#2 Most Starred Developer #2 Most Starred Developer
</span> </span>
</a> </a>
<Popover> <Popover>
<PopoverTrigger asChild> <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"> <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.5 text-purple-400" /> <AwardIcon className="size-3 text-yellow-400" />
<span className="text-xs font-medium text-purple-100"> <span className="text-xs font-medium text-yellow-200">
Founder roadmap.sh Founder roadmap.sh
</span> </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> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent

4
src/components/SQLCourseVariant/ChapterRow.tsx
View File

@@ -1,6 +1,6 @@
import { ChevronDown, BookIcon, CodeIcon, CircleDot } from 'lucide-react'; import { ChevronDown, BookIcon, CodeIcon, CircleDot } from 'lucide-react';
import { cn } from '../../lib/classname'; import { cn } from '../../lib/classname';
import { useEffect, useState } from 'react'; import { useState } from 'react';
type ChapterRowProps = { type ChapterRowProps = {
counter: number; counter: number;
@@ -100,7 +100,7 @@ export function ChapterRow(props: ChapterRowProps) {
{regularLessons.map((lesson, index) => ( {regularLessons.map((lesson, index) => (
<div <div
key={index} 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" /> <BookIcon className="h-4 w-4" />
<span>{lesson.title}</span> <span>{lesson.title}</span>