@djangocfg/layouts 1.4.27 → 1.4.28

package/src/layouts/UILayout/config/components/blocks.config.tsx

@@ -1,239 +0,0 @@
-/**
- * Blocks Configuration
- */
-
-import React from 'react';
-import {
-  Hero,
-  SuperHero,
-  FeatureSection,
-  CTASection,
-  NewsletterSection,
-  StatsSection,
-  TestimonialSection,
-} from '@djangocfg/ui/blocks';
-import { Sparkles, BookOpen, Zap, Shield, Code, Users, Building2, TrendingUp, Headphones } from 'lucide-react';
-import type { ComponentConfig } from './types';
-
-export const BLOCKS: ComponentConfig[] = [
-  {
-    name: 'Hero',
-    category: 'blocks',
-    description: 'Hero section with title, description, and CTAs',
-    importPath: "import { Hero } from '@djangocfg/ui/blocks';",
-    example: `<Hero
-  title="Build Your Next Project"
-  description="The best way to create modern web applications with React and TypeScript"
-  primaryAction={{ label: "Get Started", href: "/docs" }}
-  secondaryAction={{ label: "View Demo", href: "/demo" }}
-/>`,
-    preview: (
-      <Hero
-        title="Build Your Next Project"
-        description="The best way to create modern web applications"
-        primaryAction={{ label: "Get Started", href: "/docs" }}
-        secondaryAction={{ label: "View Demo", href: "/demo" }}
-      />
-    ),
-  },
-  {
-    name: 'SuperHero',
-    category: 'blocks',
-    description: 'Enhanced hero with badge, gradient title, features, and stats',
-    importPath: "import { SuperHero } from '@djangocfg/ui/blocks';",
-    example: `<SuperHero
-  badge={{ icon: <Sparkles />, text: "New in v2.0" }}
-  title="Next-Generation"
-  titleGradient="Development Platform"
-  subtitle="Build faster with our comprehensive UI library"
-  features={[
-    { icon: <span>⚛️</span>, text: "React 19" },
-    { icon: <span>📘</span>, text: "TypeScript" },
-    { icon: <span>🎨</span>, text: "Tailwind CSS 4" },
-    { icon: <span>⚡</span>, text: "Lightning Fast" }
-  ]}
-  primaryAction={{ label: "Start Building", href: "/start" }}
-  secondaryAction={{ label: "Learn More", href: "/docs", icon: <BookOpen /> }}
-  stats={[
-    { number: "56+", label: "Components" },
-    { number: "7", label: "Blocks" },
-    { number: "6", label: "Hooks" },
-    { number: "100%", label: "Type Safe" }
-  ]}
-  backgroundVariant="waves"
-  backgroundIntensity="medium"
-  showBackgroundSwitcher={true}
-/>`,
-    preview: (
-      <SuperHero
-        badge={{ icon: <Sparkles className="w-4 h-4" />, text: "New in v2.0" }}
-        title="Next-Generation"
-        titleGradient="Development Platform"
-        subtitle="Build faster with our comprehensive UI library"
-        features={[
-          { icon: <span>⚛️</span>, text: "React 19" },
-          { icon: <span>📘</span>, text: "TypeScript" },
-          { icon: <span>🎨</span>, text: "Tailwind CSS 4" },
-          { icon: <span>⚡</span>, text: "Lightning Fast" },
-        ]}
-        primaryAction={{ label: "Start Building", href: "/start" }}
-        secondaryAction={{ label: "Learn More", href: "/docs", icon: <BookOpen /> }}
-        stats={[
-          { number: "56+", label: "Components" },
-          { number: "7", label: "Blocks" },
-          { number: "6", label: "Hooks" },
-          { number: "100%", label: "Type Safe" },
-        ]}
-        backgroundVariant="waves"
-        backgroundIntensity="medium"
-        showBackgroundSwitcher={true}
-      />
-    ),
-  },
-  {
-    name: 'FeatureSection',
-    category: 'blocks',
-    description: 'Grid of features with icons and descriptions',
-    importPath: "import { FeatureSection } from '@djangocfg/ui/blocks';",
-    example: `<FeatureSection
-  title="Everything You Need"
-  subtitle="All the tools to build modern applications"
-  features={[
-    {
-      icon: <Zap className="w-6 h-6" />,
-      title: "Lightning Fast",
-      description: "Optimized for performance"
-    },
-    {
-      icon: <Shield className="w-6 h-6" />,
-      title: "Secure",
-      description: "Built with security in mind"
-    }
-  ]}
-/>`,
-    preview: (
-      <FeatureSection
-        title="Everything You Need"
-        subtitle="All the tools to build modern applications"
-        features={[
-          {
-            icon: <Zap className="w-6 h-6" />,
-            title: "Lightning Fast",
-            description: "Optimized for performance"
-          },
-          {
-            icon: <Shield className="w-6 h-6" />,
-            title: "Secure",
-            description: "Built with security in mind"
-          },
-          {
-            icon: <Code className="w-6 h-6" />,
-            title: "Developer Friendly",
-            description: "Great DX with TypeScript"
-          }
-        ]}
-      />
-    ),
-  },
-  {
-    name: 'CTASection',
-    category: 'blocks',
-    description: 'Call-to-action section to drive conversions',
-    importPath: "import { CTASection } from '@djangocfg/ui/blocks';",
-    example: `<CTASection
-  title="Ready to Get Started?"
-  subtitle="Join thousands of developers building amazing products"
-  primaryCTA={{ label: "Start Free Trial", href: "/signup" }}
-  secondaryCTA={{ label: "Contact Sales", href: "/contact" }}
-/>`,
-    preview: (
-      <CTASection
-        title="Ready to Get Started?"
-        subtitle="Join thousands of developers"
-        primaryCTA={{ label: "Start Free Trial", href: "/signup" }}
-        secondaryCTA={{ label: "Contact Sales", href: "/contact" }}
-      />
-    ),
-  },
-  {
-    name: 'NewsletterSection',
-    category: 'blocks',
-    description: 'Email capture section for newsletters',
-    importPath: "import { NewsletterSection } from '@djangocfg/ui/blocks';",
-    example: `<NewsletterSection
-  title="Stay Updated"
-  description="Get the latest news delivered to your inbox"
-  placeholder="Enter your email"
-  buttonText="Subscribe"
-  onSubmit={(email) => console.log(email)}
-/>`,
-    preview: (
-      <NewsletterSection
-        title="Stay Updated"
-        description="Get the latest news delivered to your inbox"
-        placeholder="Enter your email"
-        buttonText="Subscribe"
-        onSubmit={(email) => console.log('Subscribed:', email)}
-      />
-    ),
-  },
-  {
-    name: 'StatsSection',
-    category: 'blocks',
-    description: 'Display key metrics and statistics',
-    importPath: "import { StatsSection } from '@djangocfg/ui/blocks';",
-    example: `<StatsSection
-  title="Our Impact"
-  stats={[
-    { icon: <Users className="w-6 h-6" />, number: "10K+", label: "Active Users" },
-    { icon: <Building2 className="w-6 h-6" />, number: "500+", label: "Companies" },
-    { icon: <TrendingUp className="w-6 h-6" />, number: "99.9%", label: "Uptime" },
-    { icon: <Headphones className="w-6 h-6" />, number: "24/7", label: "Support" }
-  ]}
-/>`,
-    preview: (
-      <StatsSection
-        title="Our Impact"
-        stats={[
-          { icon: <Users className="w-6 h-6" />, number: "10K+", label: "Active Users" },
-          { icon: <Building2 className="w-6 h-6" />, number: "500+", label: "Companies" },
-          { icon: <TrendingUp className="w-6 h-6" />, number: "99.9%", label: "Uptime" },
-          { icon: <Headphones className="w-6 h-6" />, number: "24/7", label: "Support" }
-        ]}
-      />
-    ),
-  },
-  {
-    name: 'TestimonialSection',
-    category: 'blocks',
-    description: 'Customer testimonials and reviews',
-    importPath: "import { TestimonialSection } from '@djangocfg/ui/blocks';",
-    example: `<TestimonialSection
-  title="What Our Customers Say"
-  testimonials={[{
-    content: "This product changed how we work!",
-    author: {
-      name: "John Doe",
-      title: "CEO",
-      company: "Company"
-    }
-  }]}
-/>`,
-    preview: (
-      <TestimonialSection
-        title="What Our Customers Say"
-        testimonials={[
-          {
-            content: "This product changed how we work. Highly recommended!",
-            author: {
-              name: "John Doe",
-              title: "CEO",
-              company: "Company",
-              avatar: "/avatar.jpg"
-            }
-          }
-        ]}
-      />
-    ),
-  },
-];

package/src/layouts/UILayout/config/components/data.config.tsx

@@ -1,433 +0,0 @@
-/**
- * Data Display Components Configuration
- */
-
-import React from 'react';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Toggle,
-  ToggleGroup,
-  ToggleGroupItem,
-  Calendar,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-} from '@djangocfg/ui';
-import type { ComponentConfig } from './types';
-
-export const DATA_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'Table',
-    category: 'data',
-    description: 'Responsive data table component',
-    importPath: `import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@djangocfg/ui';`,
-    example: `<Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell className="font-medium">INV001</TableCell>
-      <TableCell>Paid</TableCell>
-      <TableCell>Credit Card</TableCell>
-      <TableCell className="text-right">$250.00</TableCell>
-    </TableRow>
-    <TableRow>
-      <TableCell className="font-medium">INV002</TableCell>
-      <TableCell>Pending</TableCell>
-      <TableCell>PayPal</TableCell>
-      <TableCell className="text-right">$150.00</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>`,
-    preview: (
-      <Table>
-        <TableCaption>A list of your recent invoices.</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Invoice</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Method</TableHead>
-            <TableHead className="text-right">Amount</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell className="font-medium">INV001</TableCell>
-            <TableCell>Paid</TableCell>
-            <TableCell>Credit Card</TableCell>
-            <TableCell className="text-right">$250.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className="font-medium">INV002</TableCell>
-            <TableCell>Pending</TableCell>
-            <TableCell>PayPal</TableCell>
-            <TableCell className="text-right">$150.00</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell className="font-medium">INV003</TableCell>
-            <TableCell>Unpaid</TableCell>
-            <TableCell>Bank Transfer</TableCell>
-            <TableCell className="text-right">$350.00</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    ),
-  },
-  {
-    name: 'Accordion',
-    category: 'data',
-    description: 'Vertically stacked set of collapsible sections',
-    importPath: `import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@djangocfg/ui';`,
-    example: `<Accordion type="single" collapsible className="w-full">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It comes with default styles that matches the aesthetic.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-3">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It's animated by default, but you can disable it if you prefer.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>`,
-    preview: (
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Is it styled?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It comes with default styles that matches the aesthetic.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Is it animated?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It's animated by default, but you can disable it if you prefer.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    ),
-  },
-  {
-    name: 'Collapsible',
-    category: 'data',
-    description: 'Simple collapsible content panel',
-    importPath: `import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@djangocfg/ui';`,
-    example: `<Collapsible className="w-full max-w-md space-y-2">
-  <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-muted rounded-md">
-    <span className="font-medium">Can I use this in my project?</span>
-    <ChevronDown className="h-4 w-4" />
-  </CollapsibleTrigger>
-  <CollapsibleContent className="p-4 bg-muted/50 rounded-md">
-    <p className="text-sm text-muted-foreground">
-      Yes! This component is free to use in your projects.
-    </p>
-  </CollapsibleContent>
-</Collapsible>`,
-    preview: (
-      <Collapsible className="w-full max-w-md space-y-2">
-        <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-muted rounded-md">
-          <span className="font-medium">Can I use this in my project?</span>
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="p-4 bg-muted/50 rounded-md">
-          <p className="text-sm text-muted-foreground">
-            Yes! This component is free to use in your projects. It's built with
-            Radix UI primitives and Tailwind CSS.
-          </p>
-        </CollapsibleContent>
-      </Collapsible>
-    ),
-  },
-  {
-    name: 'Toggle',
-    category: 'data',
-    description: 'Two-state button for on/off interactions',
-    importPath: `import { Toggle } from '@djangocfg/ui';`,
-    example: `<div className="flex gap-2">
-  <Toggle aria-label="Toggle bold">
-    <Bold className="h-4 w-4" />
-  </Toggle>
-  <Toggle aria-label="Toggle italic">
-    <Italic className="h-4 w-4" />
-  </Toggle>
-  <Toggle aria-label="Toggle underline">
-    <Underline className="h-4 w-4" />
-  </Toggle>
-</div>`,
-    preview: (
-      <div className="flex gap-2">
-        <Toggle aria-label="Toggle bold">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12M6 6h12M6 18h12" />
-          </svg>
-        </Toggle>
-        <Toggle aria-label="Toggle italic">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-        </Toggle>
-        <Toggle aria-label="Toggle underline">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h.01M12 12h.01M18 12h.01" />
-          </svg>
-        </Toggle>
-      </div>
-    ),
-  },
-  {
-    name: 'ToggleGroup',
-    category: 'data',
-    description: 'Group of toggle buttons with single or multiple selection',
-    importPath: `import { ToggleGroup, ToggleGroupItem } from '@djangocfg/ui';`,
-    example: `<div className="space-y-4">
-  <div>
-    <p className="text-sm font-medium mb-2">Single Selection</p>
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  </div>
-
-  <div>
-    <p className="text-sm font-medium mb-2">Multiple Selection</p>
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  </div>
-</div>`,
-    preview: (
-      <div className="space-y-4">
-        <div>
-          <p className="text-sm font-medium mb-2">Single Selection</p>
-          <ToggleGroup type="single">
-            <ToggleGroupItem value="bold" aria-label="Toggle bold">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="italic" aria-label="Toggle italic">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="underline" aria-label="Toggle underline">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18h12" />
-              </svg>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-
-        <div>
-          <p className="text-sm font-medium mb-2">Multiple Selection</p>
-          <ToggleGroup type="multiple">
-            <ToggleGroupItem value="bold" aria-label="Toggle bold">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 12h12" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="italic" aria-label="Toggle italic">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16" />
-              </svg>
-            </ToggleGroupItem>
-            <ToggleGroupItem value="underline" aria-label="Toggle underline">
-              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18h12" />
-              </svg>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'Calendar',
-    category: 'data',
-    description: 'Date picker calendar component',
-    importPath: `import { Calendar } from '@djangocfg/ui';`,
-    example: `<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  className="rounded-md border"
-/>`,
-    preview: (
-      <Calendar
-        mode="single"
-        className="rounded-md border"
-      />
-    ),
-  },
-  {
-    name: 'Carousel',
-    category: 'data',
-    description: 'Image and content carousel with navigation',
-    importPath: `import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@djangocfg/ui';`,
-    example: `<Carousel className="w-full max-w-xs">
-  <CarouselContent>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">1</span>
-      </div>
-    </CarouselItem>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">2</span>
-      </div>
-    </CarouselItem>
-    <CarouselItem>
-      <div className="p-6 border rounded-md">
-        <span className="text-4xl font-semibold">3</span>
-      </div>
-    </CarouselItem>
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`,
-    preview: (
-      <Carousel className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-6 border rounded-md bg-muted/50">
-                <div className="flex aspect-square items-center justify-center">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </div>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    ),
-  },
-  {
-    name: 'Chart',
-    category: 'data',
-    description: 'Data visualization charts powered by Recharts',
-    importPath: `import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '@djangocfg/ui';`,
-    example: `import { Bar, BarChart, XAxis, YAxis } from 'recharts';
-
-const chartConfig = {
-  sales: { label: "Sales", color: "hsl(var(--chart-1))" },
-  profit: { label: "Profit", color: "hsl(var(--chart-2))" },
-};
-
-const chartData = [
-  { month: "Jan", sales: 400, profit: 240 },
-  { month: "Feb", sales: 300, profit: 180 },
-  { month: "Mar", sales: 500, profit: 300 },
-];
-
-<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-  <BarChart data={chartData}>
-    <XAxis dataKey="month" />
-    <YAxis />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-    <Bar dataKey="sales" fill="var(--color-sales)" />
-    <Bar dataKey="profit" fill="var(--color-profit)" />
-  </BarChart>
-</ChartContainer>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          Chart components built on Recharts with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Bar, Line, Area, Pie charts</li>
-          <li>• Responsive container</li>
-          <li>• Theme-aware colors</li>
-          <li>• Tooltips and legends</li>
-          <li>• Customizable styling</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          See <strong>Recharts documentation</strong> for all chart types
-        </p>
-      </div>
-    ),
-  },
-];