Add design catalog to landing page

- Display all 5 available design systems in a responsive grid
- Add hero section with site description
- Add 'How to use' section showing example design URL
- Update CategoryFilter to use actual design categories

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: luongnv89

src/App.tsx

@@ -4,18 +4,13 @@ import { CopyButton } from '@/components/ui/CopyButton';
 import { SearchBar } from '@/components/ui/SearchBar';
 import { CategoryFilter } from '@/components/ui/CategoryFilter';
 import { DesignDetail } from '@/components/DesignDetail';
+import { DesignCard } from '@/components/catalog/DesignCard';
+import designs from '@/data/designs';
 
 function App() {
   const [searchValue, setSearchValue] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
-  const categories = [
-    { id: 'saas', label: 'SaaS', count: 42 },
-    { id: 'landing', label: 'Landing', count: 28 },
-    { id: 'portfolio', label: 'Portfolio', count: 15 },
-    { id: 'ecommerce', label: 'E-commerce', count: 31 },
-  ];
-
   const exampleText = 'https://luongnv89.github.io/sleek-ui/designs/warm-saas.json';
 
   return (
@@ -25,25 +20,26 @@ function App() {
           path="/"
           element={
             <div className="min-h-screen bg-background p-8">
-              <div className="mx-auto max-w-4xl space-y-12">
-                <section>
+              <div className="mx-auto max-w-7xl space-y-12">
+                <section className="text-center space-y-6 py-12 md:py-20">
                   <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-6xl">
-                    Sleek UI Components
+                    Sleek UI Design Systems
                   </h1>
-                  <p className="mt-4 text-xl text-muted-foreground">
-                    Utility components for your design system
+                  <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                    Beautiful, ready-to-use design systems for your next project.
+                    Simply pick a design and apply it to your codebase.
                   </p>
                 </section>
 
-                {/* CopyButton Demo */}
+                {/* Example Prompt Section */}
                 <section className="rounded-lg border bg-card p-6 shadow-sm">
                   <h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
-                    CopyButton
+                    How to use
                   </h2>
                   <p className="mt-4 text-lg text-muted-foreground">
-                    A button component that copies text to clipboard with visual feedback
+                    Copy the design URL and tell your AI agent to apply it:
                   </p>
-                  <div className="mt-6 flex items-center gap-2 rounded-md border p-3">
+                  <div className="mt-6 flex items-center gap-2 rounded-md border bg-muted p-3">
                     <code className="flex-1 break-all text-sm text-muted-foreground">
                       {exampleText}
                     </code>
@@ -55,6 +51,24 @@ function App() {
                   </div>
                 </section>
 
+                {/* Design Catalog */}
+                <section className="space-y-6">
+                  <div className="flex items-center justify-between">
+                    <h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+                      Available Designs
+                    </h2>
+                    <span className="text-sm text-muted-foreground">
+                      {designs.length} designs
+                    </span>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {designs.map((design) => (
+                      <DesignCard key={design.slug} design={design} />
+                    ))}
+                  </div>
+                </section>
+
                 {/* SearchBar Demo */}
                 <section className="rounded-lg border bg-card p-6 shadow-sm">
                   <h2 className="scroll-m-20 text-2xl font-semibold tracking-tight">
@@ -82,7 +96,7 @@ function App() {
                   </p>
                   <div className="mt-6">
                     <CategoryFilter
-                      categories={categories}
+                      categories={designs.map(d => d.categories).flat()}
                       selected={selectedCategory}
                       onChange={setSelectedCategory}
                     />