Figma MCP with Sonnet 4.5 Cloning Figma Learning Dashboard Template - Blog Demo

Button.tsx

import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
  variant?: 'filled' | 'outline';
  icon?: React.ReactNode;
  iconOnly?: boolean;
  className?: string;
  onClick?: () => void;
}

export default function Button({
  children,
  variant = 'filled',
  icon,
  iconOnly = false,
  className = '',
  onClick,
}: ButtonProps) {
  const baseStyles = 'flex items-center justify-center gap-3 transition-all duration-200';

  const variantStyles = {
    filled: 'bg-primary-light text-foreground hover:opacity-80',
    outline: 'border border-border hover:bg-gray-50',
  };

  const sizeStyles = iconOnly
    ? 'p-2 rounded-full'
    : 'px-3 py-2 rounded-[40px]';

  return (
    <button
      onClick={onClick}
      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles} ${className}`}
    >
      {icon && <span className="w-4 h-4">{icon}</span>}
      {!iconOnly && <span className="text-sm font-medium">{children}</span>}
    </button>
  );
}

CourseCard.tsx

import React from 'react';
import Image from 'next/image';
import { PlayIcon } from './Icons';

interface CourseCardProps {
  title: string;
  image: string;
  tag?: string;
  progress?: number;
}

export default function CourseCard({ title, image, tag = 'UI/UX Design', progress = 50 }: CourseCardProps) {
  return (
    <div className="flex flex-col gap-2.5 p-3 bg-white rounded-[20px] shadow-[0px_14px_42px_0px_rgba(8,15,52,0.06)] flex-1">
      <div className="relative w-full h-[113px] rounded-xl overflow-hidden">
        <Image
          src={image}
          alt={title}
          fill
          className="object-cover"
        />
        <button className="absolute top-[22px] right-[12px] w-5 h-5 bg-[rgba(204,204,204,0.5)] rounded-full flex items-center justify-center">
          <PlayIcon />
        </button>
      </div>
      {tag && (
        <div className="inline-flex items-center justify-center px-3 py-3 h-[15px] bg-primary-light rounded-lg self-start">
          <span className="text-[8px] font-medium text-foreground uppercase">{tag}</span>
        </div>
      )}
      <h3 className="text-sm font-medium text-foreground leading-[17px]">
        {title}
      </h3>
      <div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-[#702DFF] to-[#4A3AFF] rounded-full"
          style={{ width: `${progress}%` }}
        />
      </div>
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 rounded-full bg-gray-300" />
        <span className="text-xs font-normal text-[#5F5F5F]">
          Instructor Name
        </span>
      </div>
    </div>
  );
}

globals.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #202020;
  --primary: #702dff;
  --primary-light: rgba(112, 45, 255, 0.2);
  --text-secondary: #3f3f3f;
  --text-muted: #5f5f5f;
  --text-light: #7e7e7e;
  --text-placeholder: #9e9e9e;
  --border: rgba(204, 204, 204, 0.8);
  --border-light: #d8d8d8;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-light: var(--primary-light);
  --font-sans: var(--font-inter);
  --shadow-card: 0px 14px 42px 0px rgba(8, 15, 52, 0.06);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
}

Icons.tsx

export const SearchIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M14 14L11.1 11.1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const FilterIcon = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.33334 9.33334H24.6667" stroke="white" strokeWidth="2" strokeLinecap="round"/>
    <path d="M10.6667 16H21.3333" stroke="white" strokeWidth="2" strokeLinecap="round"/>
    <path d="M14 22.6667H18" stroke="white" strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

export const NotificationIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8.00001 4.66667V8.66667" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M8.00001 11.3333H8.00668" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M8.00001 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8.00001 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8.00001 14Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const MoreIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10Z" fill="currentColor"/>
    <path d="M19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10Z" fill="currentColor"/>
    <path d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" fill="currentColor"/>
  </svg>
);

export const SettingsIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M1.33334 8.59999V7.39999C1.33334 6.73332 1.87334 6.18666 2.54668 6.18666C3.68001 6.18666 4.16668 5.33999 3.60001 4.37332C3.27334 3.81999 3.46001 3.08666 4.02001 2.75999L5.18668 2.09332C5.67334 1.79999 6.30668 1.96666 6.60001 2.45332L6.66668 2.56666C7.22668 3.53332 8.20001 3.53332 8.76668 2.56666L8.83334 2.45332C9.12668 1.96666 9.76001 1.79999 10.2467 2.09332L11.4133 2.75999C11.9733 3.08666 12.16 3.81999 11.8333 4.37332C11.2667 5.33999 11.7533 6.18666 12.8867 6.18666C13.5533 6.18666 14.1 6.72666 14.1 7.39999V8.59999C14.1 9.26666 13.56 9.81332 12.8867 9.81332C11.7533 9.81332 11.2667 10.66 11.8333 11.6267C12.16 12.1867 11.9733 12.9133 11.4133 13.24L10.2467 13.9067C9.76001 14.2 9.12668 14.0333 8.83334 13.5467L8.76668 13.4333C8.20668 12.4667 7.23334 12.4667 6.66668 13.4333L6.60001 13.5467C6.30668 14.0333 5.67334 14.2 5.18668 13.9067L4.02001 13.24C3.46001 12.9133 3.27334 12.18 3.60001 11.6267C4.16668 10.66 3.68001 9.81332 2.54668 9.81332C1.87334 9.81332 1.33334 9.26666 1.33334 8.59999Z" stroke="currentColor" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const LogoutIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.93334 5.00667C6.14668 2.72667 7.30001 1.79334 9.90668 1.79334H10.0067C12.94 1.79334 14 2.85334 14 5.78667V10.22C14 13.1533 12.94 14.2133 10.0067 14.2133H9.90668C7.32001 14.2133 6.16668 13.2933 5.94001 11.0467" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M10 8H2.41333" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M3.90001 5.7666L1.66668 7.99993L3.90001 10.2333" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const AddIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 12H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M12 18V6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const PlayIcon = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10.5 6L2.25 10.5V1.5L10.5 6Z" fill="white" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const ArrowLeftIcon = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.5 9L4.5 6L7.5 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export const ArrowRightIcon = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4.5 9L7.5 6L4.5 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

Input.tsx

import React from 'react';

interface InputProps {
  placeholder?: string;
  icon?: React.ReactNode;
  className?: string;
}

export default function Input({ placeholder, icon, className = '' }: InputProps) {
  return (
    <div className={`flex items-center gap-2.5 px-4 py-5 bg-white border border-[rgba(204,204,204,0.8)] rounded-xl ${className}`}>
      {icon && <span className="w-4 h-4 flex-shrink-0 text-[#9E9E9E]">{icon}</span>}
      <input
        type="text"
        placeholder={placeholder}
        className="flex-1 text-xs font-medium text-[#9E9E9E] bg-transparent outline-none placeholder:text-[#9E9E9E]"
      />
    </div>
  );
}

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Dashboard - Online Learning Platform",
  description: "Professional online courses and learning management dashboard",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

page.tsx

import React from 'react';
import Image from 'next/image';
import Sidebar from '../components/Sidebar';
import Input from '../components/Input';
import Button from '../components/Button';
import StatCard from '../components/StatCard';
import CourseCard from '../components/CourseCard';
import {
  SearchIcon,
  FilterIcon,
  MoreIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  AddIcon,
} from '../components/Icons';

export default function Home() {
  const mentors = [
    { id: 1, name: 'John Doe', subject: 'UI/UX Design', color: 'bg-purple-500' },
    { id: 2, name: 'Jane Smith', subject: 'Frontend Dev', color: 'bg-blue-500' },
    { id: 3, name: 'Mike Johnson', subject: 'Backend Dev', color: 'bg-green-500' },
    { id: 4, name: 'Sarah Wilson', subject: 'Mobile Dev', color: 'bg-pink-500' },
    { id: 5, name: 'Tom Brown', subject: 'Data Science', color: 'bg-yellow-500' },
  ];

  return (
    <div className="flex items-center gap-8 w-full max-w-[1440px] h-[933px] bg-white rounded-[20px] mx-auto overflow-hidden">
      {/* Sidebar */}
      <Sidebar />

      {/* Main Content */}
      <main className="flex flex-col items-center gap-6 pt-5 pb-0 flex-1 h-full overflow-hidden">
        {/* Search Bar */}
        <div className="flex justify-center gap-3 w-full px-5">
          <Input
            placeholder="Search your course here...."
            icon={<SearchIcon />}
            className="flex-1"
          />
          <button className="flex items-center justify-center w-14 h-full bg-primary rounded-[50px]">
            <FilterIcon />
          </button>
        </div>

        {/* Hero Banner */}
        <div className="relative w-full h-[181px] bg-primary rounded-[20px] overflow-hidden">
          {/* Stars */}
          <Image
            src="/images/star1.svg"
            alt="Star"
            width={80}
            height={80}
            className="absolute top-[45px] left-[683px] opacity-25"
          />
          <Image
            src="/images/star2.svg"
            alt="Star"
            width={80}
            height={80}
            className="absolute top-[93px] left-[753px] opacity-10"
          />
          <Image
            src="/images/star3.svg"
            alt="Star"
            width={80}
            height={118}
            className="absolute top-[122px] left-[612px] opacity-10"
          />
          <Image
            src="/images/star4.svg"
            alt="Star"
            width={61}
            height={118}
            className="absolute top-[-59px] left-[753px] opacity-10"
          />
          <Image
            src="/images/star5.svg"
            alt="Star"
            width={61}
            height={60}
            className="absolute top-[20px] left-[622px] opacity-10"
          />

          {/* Content */}
          <div className="absolute top-5 left-6 flex flex-col gap-0 w-[328px]">
            <p className="text-xs font-normal uppercase text-white">Online Course</p>
            <h2 className="text-2xl font-semibold text-white leading-[29px] mt-4">
              Sharpen Your Skills With Professional Online Courses
            </h2>
            <button className="flex items-center gap-3 px-3 py-2 bg-foreground rounded-[40px] mt-6 w-fit">
              <span className="text-xs font-medium text-white">Join Now</span>
              <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                <ArrowRightIcon />
              </div>
            </button>
          </div>
        </div>

        {/* Stat Cards */}
        <div className="flex gap-3 w-full">
          <StatCard title="Product Design" subtitle="2/8 Watched" />
          <StatCard title="Product Design" subtitle="2/8 Watched" />
          <StatCard title="Product Design" subtitle="2/8 Watched" />
        </div>

        {/* Continue Watching */}
        <div className="flex flex-col gap-5 w-full">
          <div className="flex justify-between items-center w-full">
            <h3 className="text-base font-medium text-foreground">Continue watching</h3>
            <div className="flex items-center gap-3">
              <button className="w-6 h-6 border border-[#9E9E9E] rounded-full flex items-center justify-center">
                <ArrowLeftIcon />
              </button>
              <button className="w-6 h-6 border border-[#9E9E9E] rounded-full flex items-center justify-center">
                <ArrowRightIcon />
              </button>
            </div>
          </div>
          <div className="flex gap-[18px] w-full">
            <CourseCard
              title="Beginner's Guide to becoming a professional frontend developer"
              image="/images/course1.png"
            />
            <CourseCard
              title="Beginner's Guide to becoming a professional frontend developer"
              image="/images/course2.png"
            />
            <CourseCard
              title="Beginner's Guide to becoming a professional frontend developer"
              image="/images/course3.png"
            />
          </div>
        </div>

        {/* Your Mentor Section */}
        <div className="flex flex-col gap-5 w-full flex-1 overflow-hidden">
          <div className="flex justify-between items-center w-full">
            <h3 className="text-base font-medium text-foreground">Your Mentor</h3>
            <a href="#" className="text-xs font-normal text-[#3366CC]">
              See All
            </a>
          </div>
          <div className="flex flex-col gap-6 px-6 py-5 bg-white rounded-t-xl shadow-[0px_14px_42px_0px_rgba(8,15,52,0.06)] flex-1 overflow-y-auto">
            {/* Table Header */}
            <div className="flex items-center gap-14 w-full text-[8px] font-semibold uppercase text-[#3F3F3F]">
              <span className="flex-1">Instructor Name & Date</span>
              <span className="text-center w-24">Course Type</span>
              <span className="flex-1">Course Title</span>
              <span className="w-20 text-center">Actions</span>
            </div>
            {/* Table Rows */}
            {[1, 2].map((item) => (
              <div key={item} className="flex items-center gap-14 w-full">
                <div className="flex items-center gap-2 flex-1">
                  <div className="w-6 h-6 bg-purple-500 rounded-full" />
                  <div className="flex flex-col gap-1">
                    <span className="text-xs font-medium text-foreground">John Doe</span>
                    <span className="text-[10px] text-[#9E9E9E]">2 days ago</span>
                  </div>
                </div>
                <div className="w-24 flex justify-center">
                  <span className="px-3 py-3 h-[15px] bg-primary-light rounded-lg text-[8px] font-medium text-foreground flex items-center">
                    UI/UX
                  </span>
                </div>
                <span className="flex-1 text-xs font-normal text-foreground">
                  Understanding Concept of React
                </span>
                <div className="w-20 flex justify-center">
                  <span className="px-2 py-1 bg-[rgba(51,102,204,0.2)] rounded-lg text-[10px] font-medium text-[#3366CC]">
                    View
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>

      {/* Right Sidebar */}
      <aside className="flex flex-col items-center gap-9 px-6 py-8 bg-white rounded-r-[20px] shadow-[0px_14px_42px_0px_rgba(8,15,52,0.06)] h-full w-[278px]">
        {/* Header */}
        <div className="flex justify-between items-center w-full">
          <h3 className="text-base font-medium text-foreground">Your Profile</h3>
          <button className="w-5 h-5">
            <MoreIcon />
          </button>
        </div>

        {/* Profile */}
        <div className="flex flex-col items-center gap-4 w-full px-5">
          <div className="w-[100px] h-[100px] relative">
            <Image
              src="/images/profile.svg"
              alt="Profile"
              width={100}
              height={100}
              className="rounded-full"
            />
          </div>
          <div className="flex flex-col items-center gap-1.5 w-full">
            <h4 className="text-base font-medium text-foreground">Good Morning Prashant</h4>
            <p className="text-xs font-medium text-[#7E7E7E] text-center">
              Continue your journey and achieve your target
            </p>
          </div>
          <div className="flex items-center gap-6">
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 bg-primary-light rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-primary">12</span>
              </div>
              <span className="text-[10px] text-[#5F5F5F]">Courses</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 bg-primary-light rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-primary">8</span>
              </div>
              <span className="text-[10px] text-[#5F5F5F]">Completed</span>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 bg-primary-light rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-primary">4</span>
              </div>
              <span className="text-[10px] text-[#5F5F5F]">In Progress</span>
            </div>
          </div>
        </div>

        {/* Graph */}
        <div className="w-full">
          <Image
            src="/images/graph.svg"
            alt="Progress Graph"
            width={204}
            height={116}
            className="w-full"
          />
        </div>

        {/* Your Mentor */}
        <div className="flex flex-col gap-3 w-full">
          <div className="flex justify-between items-center w-full">
            <h3 className="text-base font-medium text-foreground">Your Mentor</h3>
            <button className="w-6 h-6 border border-[#9E9E9E] rounded-full flex items-center justify-center">
              <AddIcon />
            </button>
          </div>
          <div className="flex flex-col gap-4 px-3 py-4 bg-white rounded-[20px]">
            {mentors.map((mentor, index) => (
              <React.Fragment key={mentor.id}>
                {index > 0 && (
                  <div className="w-full h-px bg-[#D8D8D8]" />
                )}
                <div className="flex items-center gap-2">
                  <div className={`w-6 h-6 ${mentor.color} rounded-full`} />
                  <div className="flex flex-col gap-1 flex-1">
                    <span className="text-xs font-medium text-foreground">
                      {mentor.name}
                    </span>
                    <span className="text-[10px] text-[#9E9E9E]">
                      {mentor.subject}
                    </span>
                  </div>
                  <div className="px-2 py-1 bg-primary rounded-lg">
                    <span className="text-[10px] font-medium text-white">Chat</span>
                  </div>
                </div>
              </React.Fragment>
            ))}
          </div>
          <button className="w-full px-3 py-2 bg-primary-light rounded-[40px] text-xs font-medium text-primary">
            See All
          </button>
        </div>
      </aside>
    </div>
  );
}

Sidebar.tsx

import React from 'react';
import Image from 'next/image';
import Button from './Button';
import { SettingsIcon, LogoutIcon } from './Icons';

const navItems = [
  { label: 'Dashboard', icon: '📊' },
  { label: 'Courses', icon: '📚' },
  { label: 'Messages', icon: '💬' },
  { label: 'Community', icon: '👥' },
  { label: 'Progress', icon: '📈' },
];

const friends = [
  { id: 1, color: 'bg-purple-500' },
  { id: 2, color: 'bg-pink-500' },
  { id: 3, color: 'bg-blue-500' },
];

export default function Sidebar() {
  return (
    <aside className="flex flex-col justify-between items-center gap-[85px] px-8 py-8 bg-white rounded-l-[20px] shadow-[0px_14px_42px_0px_rgba(8,15,52,0.06)] h-full w-[210px]">
      <div className="flex flex-col items-center gap-12 w-[146px]">
        {/* Logo */}
        <div className="flex items-center gap-2 w-[146px]">
          <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center p-1.5">
            <Image
              src="/images/logo.svg"
              alt="Logo"
              width={28}
              height={28}
            />
          </div>
          <span className="text-base font-extrabold uppercase bg-gradient-to-r from-[#702DFF] via-[#7550FB] to-[#4A3AFF] bg-clip-text text-transparent">
            cOURSUE
          </span>
        </div>

        {/* Overview Section */}
        <div className="flex flex-col gap-2.5 w-full">
          <div className="flex items-center gap-2.5 py-2 w-full">
            <h3 className="text-base font-semibold uppercase text-[#3F3F3F]">Overview</h3>
          </div>
          <div className="flex flex-col gap-2 w-full">
            {navItems.map((item) => (
              <Button key={item.label} variant="outline" className="w-full justify-start">
                <span className="mr-1">{item.icon}</span>
                {item.label}
              </Button>
            ))}
          </div>
        </div>

        {/* Friends Section */}
        <div className="flex flex-col gap-2.5 w-full">
          <div className="flex items-center gap-2.5 py-2 w-full">
            <h3 className="text-base font-semibold uppercase text-[#3F3F3F]">Friends</h3>
          </div>
          <div className="flex flex-col gap-5 w-full">
            {friends.map((friend) => (
              <div key={friend.id} className="flex items-center gap-2">
                <div className={`w-10 h-10 ${friend.color} rounded-full`} />
                <div className="flex flex-col gap-1">
                  <div className="w-20 h-2 bg-gray-200 rounded" />
                  <div className="w-16 h-2 bg-gray-100 rounded" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Settings Section */}
      <div className="flex flex-col gap-2.5 w-[146px]">
        <div className="flex items-center gap-2.5 py-2 w-full">
          <h3 className="text-base font-semibold uppercase text-[#3F3F3F]">Settings</h3>
        </div>
        <Button variant="outline" icon={<SettingsIcon />} className="w-full justify-start">
          Settings
        </Button>
        <Button variant="outline" icon={<LogoutIcon />} className="w-full justify-start text-[#F13E3E]">
          Logout
        </Button>
      </div>
    </aside>
  );
}

StatCard.tsx

import React from 'react';
import { NotificationIcon, MoreIcon } from './Icons';

interface StatCardProps {
  title: string;
  subtitle: string;
}

export default function StatCard({ title, subtitle }: StatCardProps) {
  return (
    <div className="flex items-center justify-center gap-4 p-3 bg-white rounded-xl shadow-[0px_14px_42px_0px_rgba(8,15,52,0.06)] flex-1">
      <button className="flex items-center justify-center w-12 h-12 bg-primary-light rounded-full">
        <NotificationIcon />
      </button>
      <div className="flex flex-col gap-2 flex-1">
        <p className="text-xs font-normal text-[#5F5F5F]">{subtitle}</p>
        <p className="text-xs font-semibold text-foreground">{title}</p>
      </div>
      <button className="w-6 h-6">
        <MoreIcon />
      </button>
    </div>
  );
}