Update reviews section

src/components/Dashboard/PersonalDashboard.tsx

@@ -1,22 +1,25 @@
 import { useStore } from '@nanostores/react';
 import {
   ChartColumn,
-  CheckCircle,
   CheckSquare,
   FolderGit2,
-  Pencil,
   SquarePen,
   Zap,
-  type LucideIcon,
+  type LucideIcon
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import type { AllowedProfileVisibility } from '../../api/user.ts';
 import { useToast } from '../../hooks/use-toast';
 import { cn } from '../../lib/classname.ts';
+import type { GuideFileType } from '../../lib/guide';
 import { httpGet } from '../../lib/http';
+import type { QuestionGroupType } from '../../lib/question-group';
 import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
+import type { VideoFileType } from '../../lib/video';
 import { $accountStreak, type StreakResponse } from '../../stores/streak';
 import type { PageType } from '../CommandMenu/CommandMenu';
+import { FeaturedGuideList } from '../FeaturedGuides/FeaturedGuideList';
+import { FeaturedVideoList } from '../FeaturedVideos/FeaturedVideoList';
 import {
   FavoriteRoadmaps,
   type AIRoadmapType,
@@ -24,12 +27,21 @@ import {
 import { HeroRoadmap } from '../HeroSection/HeroRoadmap.tsx';
 import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
 import type { UserProgress } from '../TeamProgress/TeamProgressPage';
-import { projectGroups } from '../../pages/index.astro';
+
-import type { QuestionGroupType } from '../../lib/question-group';
+const projectGroups =  [
-import { FeaturedGuideList } from '../FeaturedGuides/FeaturedGuideList';
+  {
-import { FeaturedVideoList } from '../FeaturedVideos/FeaturedVideoList';
+    title: 'Frontend',
-import type { GuideFileType } from '../../lib/guide';
+    id: 'frontend',
-import type { VideoFileType } from '../../lib/video';
+  },
+  {
+    title: 'Backend',
+    id: 'backend',
+  },
+  {
+    title: 'DevOps',
+    id: 'devops',
+  },
+];
 
 type UserDashboardResponse = {
   name: string;

src/components/SQLCourse/ReviewsSection.tsx

@@ -1,4 +1,6 @@
-import { StarIcon, User2Icon } from 'lucide-react';
+import { ChevronDownIcon, StarIcon, User2Icon } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../../editor/utils/classname';
 
 type Review = {
   name: string;
@@ -9,6 +11,7 @@ type Review = {
 };
 
 export function ReviewsSection() {
+  const [isExpanded, setIsExpanded] = useState(false);
   const reviews: Review[] = [
     {
       name: 'Tomáš Janků',
@@ -67,18 +70,27 @@ export function ReviewsSection() {
       avatarUrl: 'https://github.com/faisalahsan.png',
     },
     {
-      name: 'Mian Asif',
+      name: 'Kalvin Chakma',
-      role: 'Software Engineering Lead',
+      role: 'Software Engineer',
       rating: 5,
       text: "Best SQL course I've taken. The progression from basic to advanced concepts is well thought out, and the challenges are excellent.",
-      avatarUrl: 'https://github.com/mian.png',
+      avatarUrl: 'https://github.com/kalvin-chakma.png',
     },
   ];
 
+  const visibleReviews = isExpanded ? reviews : reviews.slice(0, 6);
+
   return (
-    <>
+    <div className="relative">
-      <div className="ma-x-3xl mt-24 grid grid-cols-3 flex-row gap-4 overflow-hidden">
+      <div
-        {reviews.map((review, index) => (
+        className={cn('rounded-2xl pb-12 pt-24', {
+          'pb-8': isExpanded,
+        })}
+      >
+        <div
+          className={`ma-x-3xl grid grid-cols-3 gap-4 ${!isExpanded ? 'relative' : ''}`}
+        >
+          {visibleReviews.map((review, index) => (
             <div
               key={index}
               className="max-w-[300px] flex-shrink-0 break-inside-avoid-column rounded-lg bg-zinc-800/30 p-6 backdrop-blur"
@@ -113,6 +125,25 @@ export function ReviewsSection() {
             </div>
           ))}
         </div>
-    </>
+
+        {!isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-40 rounded-b-2xl bg-gradient-to-t from-[#121212] via-[#121212]/80 to-transparent" />
+        )}
+      </div>
+
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-2 rounded-full border border-zinc-800 bg-[#121212] px-6 py-2 text-sm font-medium text-zinc-300 transition-all hover:border-zinc-700 hover:bg-zinc-900 hover:text-zinc-100"
+        >
+          {isExpanded ? 'Show Less' : 'Show More Reviews'}
+          <ChevronDownIcon
+            className={`h-4 w-4 transition-transform ${
+              isExpanded ? 'rotate-180' : ''
+            }`}
+          />
+        </button>
+      </div>
+    </div>
   );
 }