Components

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeholder.com/40', message: 'New message from John Doe', time: '10 minutes ago', unread: true },
  { id: 

'use client';

import React from 'react';

interface SocialLink {
  icon: string;
  url: string;
}

interface Profile {
  avatar: string;
  name: string;
  bio: string;
  socialLinks: SocialLink[];
}

const demoProfile: Profile = {
  avatar: 'https://via.placeholder.com/50',
  name: 'John Doe',
  bio: 'Software Engineer with a passion for innovatio

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProps> = ({ label, value, trend, percentageChange, sparklineData }) => {
  const [animateValue, setAnima

'use client';

import React from 'react';

interface Testimonial {
  avatar: string;
  quote: string;
  rating: number;
  name: string;
  role: string;
}

const testimonials: Testimonial[] = [
  {
    avatar: 'https://via.placeholder.com/50',
    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    rating: 5,
    name: 'John Doe',

'use client';

import React from 'react';

interface Feature {
  name: string;
}

interface PricingCardProps {
  title: string;
  price: string;
  features: Feature[];
  featured?: boolean;
}

const PricingCard: React.FC<PricingCardProps> = ({ title, price, features, featured = false }) => {
  return (
    <div
      className={`transition duration