이미지로 작업하기

Generate React components to implement this dashboard design

// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';

export function DashboardLayout() {
  return (
    <div className="dashboard-container">
      <div className="stats-grid">
        <StatCard title="Total Users" value="1,234" trend="+12%" />
        <StatCard title="Revenue" value="$45.6K" trend="+8%" />
        <StatCard title="Active Sessions" value="89" trend="-3%" />
      </div>
      <div className="charts-section">
        <UserChart />
      </div>
      <div className="activity-section">
        <RecentActivity />
      </div>
    </div>
  );
}

Generate Tailwind CSS classes to match the mockup styling

<div className="grid grid-cols-3 gap-6 p-6">
  <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>

The spacing between stat cards should be larger, and add the blue accent color from the mockup