@bloomneo/uikit 1.5.0

package/bin/templates/fbca/src/web/features/main/pages/About.tsx.template

@@ -0,0 +1,374 @@
+import React from 'react';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Badge } from '@bloomneo/uikit/badge';
+import {
+  Layers,
+  Zap,
+  Route,
+  FolderOpen,
+  Code2,
+  Globe,
+  Lightbulb,
+  ArrowRight
+} from 'lucide-react';
+import { Header, Footer, SEO } from '../../../shared/components';
+
+export const AboutPage: React.FC = () => {
+  return (
+    <PageLayout>
+      <SEO
+        title="About FBCA - Feature-Based Component Architecture | UIKit Demo"
+        description="Learn about Feature-Based Component Architecture (FBCA) with convention-based routing, auto-discovery, and modern React patterns. Complete guide to FBCA implementation."
+        keywords="fbca, feature-based architecture, react architecture, component organization, routing conventions, auto-discovery, react patterns"
+        ogTitle="About FBCA - Feature-Based Component Architecture"
+        ogDescription="Complete guide to Feature-Based Component Architecture with auto-discovery routing and modern React patterns"
+      />
+      <Header />
+
+      <PageLayout.Content>
+        <div className="space-y-8">
+          <div className="text-center space-y-4">
+            <h1 className="voila-heading text-4xl md:text-5xl text-gradient-primary">
+              About FBCA Architecture
+            </h1>
+            <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto text-xl">
+              Feature-Based Component Architecture with Page Router - A modern approach to building scalable React applications
+            </p>
+          </div>
+
+          {/* What is FBCA */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Lightbulb className="h-5 w-5" />
+                What is FBCA?
+              </CardTitle>
+              <CardDescription>
+                Feature-Based Component Architecture organizes your application by features, not technical layers
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-lg">Traditional Structure</h4>
+                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
+                    <div className="text-red-600">❌ src/</div>
+                    <div className="ml-2">├── components/</div>
+                    <div className="ml-2">├── pages/</div>
+                    <div className="ml-2">├── hooks/</div>
+                    <div className="ml-2">├── utils/</div>
+                    <div className="ml-2">└── services/</div>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Files scattered across technical layers, hard to find related code
+                  </p>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-lg">FBCA Structure</h4>
+                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
+                    <div className="text-green-600">✅ src/</div>
+                    <div className="ml-2">├── features/</div>
+                    <div className="ml-4">│   ├── auth/pages/</div>
+                    <div className="ml-4">│   ├── gallery/pages/</div>
+                    <div className="ml-4">│   └── main/pages/</div>
+                    <div className="ml-2">├── shared/components/</div>
+                    <div className="ml-2">└── lib/page-router.tsx</div>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Everything related to a feature lives together, easy to find and maintain
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* FBCA Routing System */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Route className="h-5 w-5" />
+                FBCA Routing System
+              </CardTitle>
+              <CardDescription>
+                Convention-based routing with support for nested routes and dynamic parameters
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                {/* Basic Routing Rules */}
+                <div className="space-y-4">
+                  <h4 className="font-semibold flex items-center gap-2">
+                    <FolderOpen className="h-4 w-4" />
+                    Basic File-Based Routing
+                  </h4>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-3">
+                      <Badge variant="outline" className="mb-2">Main Feature Priority</Badge>
+                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
+                        <div>features/main/pages/index.tsx</div>
+                        <div className="text-primary">→ /</div>
+                      </div>
+                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
+                        <div>features/main/pages/About.tsx</div>
+                        <div className="text-primary">→ /about</div>
+                      </div>
+                    </div>
+                    <div className="space-y-3">
+                      <Badge variant="outline" className="mb-2">Feature Routes</Badge>
+                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
+                        <div>features/auth/pages/index.tsx</div>
+                        <div className="text-primary">→ /auth</div>
+                      </div>
+                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
+                        <div>features/gallery/pages/index.tsx</div>
+                        <div className="text-primary">→ /gallery</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Advanced Routing */}
+                <div className="space-y-4">
+                  <h4 className="font-semibold flex items-center gap-2">
+                    <Layers className="h-4 w-4" />
+                    Advanced Routing Patterns
+                  </h4>
+
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {/* Nested Routes */}
+                    <div className="space-y-3">
+                      <Badge variant="secondary" className="mb-2">Nested Routes</Badge>
+                      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border border-blue-200 dark:border-blue-800 p-4 rounded-lg">
+                        <div className="font-mono text-sm space-y-2">
+                          <div className="font-semibold text-blue-800 dark:text-blue-200">File Structure:</div>
+                          <div className="ml-2">features/gallery/pages/new/</div>
+                          <div className="ml-4 text-blue-600 dark:text-blue-300">└── cat.tsx</div>
+                          <div className="mt-3 pt-2 border-t border-blue-200 dark:border-blue-700">
+                            <span className="text-blue-800 dark:text-blue-200 font-semibold">Route:</span>
+                            <div className="text-blue-600 dark:text-blue-300 font-bold">/gallery/new/cat</div>
+                          </div>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        Create nested directories for deeply nested routes
+                      </p>
+                    </div>
+
+                    {/* Dynamic Routes */}
+                    <div className="space-y-3">
+                      <Badge variant="secondary" className="mb-2">Dynamic Parameters</Badge>
+                      <div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border border-green-200 dark:border-green-800 p-4 rounded-lg">
+                        <div className="font-mono text-sm space-y-2">
+                          <div className="font-semibold text-green-800 dark:text-green-200">File Structure:</div>
+                          <div className="ml-2">features/gallery/pages/</div>
+                          <div className="ml-4 text-green-600 dark:text-green-300">└── [animal].tsx</div>
+                          <div className="mt-3 pt-2 border-t border-green-200 dark:border-green-700">
+                            <span className="text-green-800 dark:text-green-200 font-semibold">Route:</span>
+                            <div className="text-green-600 dark:text-green-300 font-bold">/gallery/:animal</div>
+                          </div>
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        Square brackets create URL parameters
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Page Router Magic */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="h-5 w-5" />
+                Page Router Magic
+              </CardTitle>
+              <CardDescription>
+                Zero-configuration routing that automatically discovers your pages
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-6">
+                <div className="bg-gradient-to-r from-primary/10 to-accent/10 p-6 rounded-lg border border-primary/20">
+                  <div className="flex items-start gap-4">
+                    <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
+                      <Globe className="h-6 w-6 text-primary" />
+                    </div>
+                    <div className="space-y-2">
+                      <h4 className="font-semibold text-lg">Auto-Discovery</h4>
+                      <p className="text-muted-foreground">
+                        The PageRouter scans <code className="bg-muted px-1 rounded">features/*/pages/*.tsx</code> using Vite glob imports and automatically generates routes. No manual configuration needed!
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <h4 className="font-semibold">How It Works</h4>
+                    <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
+                      <li>PageRouter scans all feature folders at build time</li>
+                      <li>Generates route map based on file paths</li>
+                      <li>Main feature gets priority routes (/, /about)</li>
+                      <li>Other features get namespaced routes (/auth, /gallery)</li>
+                      <li>Components are lazy-loaded automatically</li>
+                    </ol>
+                  </div>
+
+                  <div className="space-y-3">
+                    <h4 className="font-semibold">Benefits</h4>
+                    <ul className="text-sm space-y-2 text-muted-foreground">
+                      <li className="flex items-center gap-2">
+                        <ArrowRight className="h-3 w-3 text-primary" />
+                        No route configuration needed
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <ArrowRight className="h-3 w-3 text-primary" />
+                        Add feature folder → route appears automatically
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <ArrowRight className="h-3 w-3 text-primary" />
+                        No route conflicts or overlaps
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <ArrowRight className="h-3 w-3 text-primary" />
+                        Clear ownership per feature
+                      </li>
+                      <li className="flex items-center gap-2">
+                        <ArrowRight className="h-3 w-3 text-primary" />
+                        Automatic code splitting
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Key Technologies */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Code2 className="h-5 w-5" />
+                Technology Stack
+              </CardTitle>
+              <CardDescription>
+                Modern tools that power this FBCA implementation
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">React 19</span>
+                    <Badge variant="secondary">Frontend</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Latest React with Suspense for code splitting
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">Vite Glob Imports</span>
+                    <Badge variant="secondary">Build</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Dynamic page discovery at build time
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">UIKit Components</span>
+                    <Badge variant="secondary">UI</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Professional components with theme support
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">TypeScript</span>
+                    <Badge variant="secondary">Language</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Full type safety across the application
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">Tailwind CSS</span>
+                    <Badge variant="secondary">Styling</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Utility-first CSS with UIKit integration
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">React Router</span>
+                    <Badge variant="secondary">Routing</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Client-side routing with lazy loading
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Getting Started */}
+          <Card className="bg-gradient-to-r from-primary/5 via-accent/5 to-primary/5 border-primary/20">
+            <CardHeader>
+              <CardTitle>Try FBCA Yourself</CardTitle>
+              <CardDescription>
+                Experience the power of Feature-Based Component Architecture
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
+                  <h4 className="font-semibold">Create a New Feature</h4>
+                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm space-y-1">
+                    <div>mkdir src/features/blog</div>
+                    <div>mkdir src/features/blog/pages</div>
+                    <div>touch src/features/blog/pages/index.tsx</div>
+                    <div className="text-green-600"># Route automatically available at /blog</div>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="font-semibold">Add Feature Components</h4>
+                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm space-y-1">
+                    <div>mkdir src/features/blog/components</div>
+                    <div>mkdir src/features/blog/hooks</div>
+                    <div>touch src/features/blog/hooks/usePosts.ts</div>
+                    <div className="text-green-600"># Self-contained feature</div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="text-center pt-4">
+                <Badge variant="outline" className="text-sm">
+                  No configuration needed • Routes auto-discovered • Zero conflicts
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </PageLayout.Content>
+
+      <Footer />
+    </PageLayout>
+  );
+};
+
+export default AboutPage;

package/bin/templates/fbca/src/web/features/main/pages/index.tsx.template

@@ -0,0 +1,214 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import { ArrowRight, Zap, Images, BookOpen, LogIn, Code2 } from 'lucide-react';
+import { CTASection } from '../components/CTASection';
+import { Header, Footer, SEO } from '../../../shared/components';
+import { asset } from '../../../shared/utils/asset';
+
+export const HomePage: React.FC = () => {
+  const { theme } = useTheme();
+
+  const themeDescriptions = {
+    base: 'Clean default configuration showcasing the base system',
+    elegant: 'Fresh sky blue theme with clean design',
+    metro: 'Dark teal theme with bright yellow accents',
+    studio: 'Sophisticated neutral theme with golden accents',
+    vivid: 'Premium cursive theme with sophisticated typography'
+  };
+
+
+  return (
+    <PageLayout>
+      <SEO
+        title="UIKit FBCA Demo - Feature-Based Component Architecture"
+        description="Experience Feature-Based Component Architecture with auto-discovery routing, UIKit components, and modern React patterns. Zero configuration, convention-based routing."
+        keywords="react, fbca, feature-based architecture, uikit, components, typescript, auto-discovery, routing"
+        ogTitle="UIKit FBCA Demo - Modern React Architecture"
+        ogDescription="Discover Feature-Based Component Architecture with UIKit components and zero-config routing"
+      />
+      <Header />
+
+      <PageLayout.Content>
+        <div className="space-y-12">
+          {/* Hero Section */}
+          <section className="text-center py-16 bg-gradient-to-b from-background to-muted/20 rounded-lg">
+            <div className="space-y-6">
+              <div className="mb-6">
+                <img
+                  src={asset('/hero_fbca.svg')}
+                  alt="UIKit FBCA Hero Illustration"
+                  className="mx-auto max-w-md w-full h-auto"
+                />
+              </div>
+              <h1 className="voila-heading text-4xl md:text-6xl mb-6 text-gradient-primary">
+                UIKit FBCA Demo
+              </h1>
+              <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+                Experience Feature-Based Component Architecture with auto-discovery routing and modern React patterns
+              </p>
+              <div className="inline-flex items-center gap-3 text-sm text-muted-foreground bg-muted/50 backdrop-blur px-6 py-3 rounded-full border">
+                <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
+                {themeDescriptions[theme as keyof typeof themeDescriptions]}
+              </div>
+              <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
+                <Button size="lg" asChild>
+                  <Link to="/gallery">
+                    <Images className="mr-2 h-4 w-4" />
+                    View Gallery
+                  </Link>
+                </Button>
+                <Button variant="secondary" size="lg" asChild>
+                  <Link to="/about">
+                    <BookOpen className="mr-2 h-4 w-4" />
+                    Learn FBCA
+                  </Link>
+                </Button>
+              </div>
+            </div>
+          </section>
+
+
+          {/* Features Grid */}
+          <section className="space-y-6">
+            <div className="text-center">
+              <h2 className="text-3xl font-bold mb-4">Feature-Based Architecture</h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Explore features organized by domain with auto-discovery routing and zero configuration
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                    <Images className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle>Gallery Feature</CardTitle>
+                  <CardDescription>Image gallery with responsive design and custom hooks</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <ul className="text-sm space-y-2 text-muted-foreground">
+                    <li>• Custom React Hooks</li>
+                    <li>• Responsive Image Grid</li>
+                    <li>• Feature-Based Organization</li>
+                    <li>• Modern UI Components</li>
+                  </ul>
+                  <Button asChild className="w-full">
+                    <Link to="/gallery">
+                      View Gallery
+                      <ArrowRight className="ml-2 h-4 w-4" />
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
+                    <LogIn className="h-6 w-6 text-secondary" />
+                  </div>
+                  <CardTitle>Auth Feature</CardTitle>
+                  <CardDescription>Authentication flow with login forms and user management</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <ul className="text-sm space-y-2 text-muted-foreground">
+                    <li>• Login & Registration Forms</li>
+                    <li>• Form Validation</li>
+                    <li>• User State Management</li>
+                    <li>• Route Protection</li>
+                  </ul>
+                  <Button asChild className="w-full">
+                    <Link to="/auth">
+                      Try Auth
+                      <ArrowRight className="ml-2 h-4 w-4" />
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+                <CardHeader>
+                  <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
+                    <BookOpen className="h-6 w-6 text-accent" />
+                  </div>
+                  <CardTitle>FBCA Architecture</CardTitle>
+                  <CardDescription>Learn about Feature-Based Component Architecture and conventions</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <ul className="text-sm space-y-2 text-muted-foreground">
+                    <li>• Convention-Based Routing</li>
+                    <li>• Auto-Discovery Pattern</li>
+                    <li>• Feature Organization</li>
+                    <li>• Zero Configuration</li>
+                  </ul>
+                  <Button asChild className="w-full">
+                    <Link to="/about">
+                      Learn FBCA
+                      <ArrowRight className="ml-2 h-4 w-4" />
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </section>
+
+          {/* FBCA Benefits */}
+          <section className="bg-gradient-to-r from-primary/5 via-accent/5 to-primary/5 border border-primary/20 rounded-lg p-8">
+            <div className="text-center space-y-6">
+              <div className="flex items-center justify-center gap-3 mb-4">
+                <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
+                  <Zap className="h-6 w-6 text-primary" />
+                </div>
+                <h2 className="text-2xl font-bold">FBCA Architecture Benefits</h2>
+              </div>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                This demo showcases Feature-Based Component Architecture with zero-configuration routing
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                <div className="bg-background/80 border rounded-lg p-4 space-y-2">
+                  <div className="w-8 h-8 bg-primary/20 rounded flex items-center justify-center mb-3">
+                    <Code2 className="h-4 w-4 text-primary" />
+                  </div>
+                  <div className="font-semibold">Feature Organization</div>
+                  <div className="text-muted-foreground">features/*/pages/*.tsx</div>
+                </div>
+                <div className="bg-background/80 border rounded-lg p-4 space-y-2">
+                  <div className="w-8 h-8 bg-secondary/20 rounded flex items-center justify-center mb-3">
+                    <Zap className="h-4 w-4 text-secondary" />
+                  </div>
+                  <div className="font-semibold">Auto-Discovery</div>
+                  <div className="text-muted-foreground">Zero configuration routing</div>
+                </div>
+                <div className="bg-background/80 border rounded-lg p-4 space-y-2">
+                  <div className="w-8 h-8 bg-accent/20 rounded flex items-center justify-center mb-3">
+                    <ArrowRight className="h-4 w-4 text-accent" />
+                  </div>
+                  <div className="font-semibold">Convention-Based</div>
+                  <div className="text-muted-foreground">File path = route path</div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* CTA Section */}
+          <CTASection
+            title="Ready to Try FBCA?"
+            description="Experience Feature-Based Component Architecture with auto-discovery routing and zero configuration."
+            primaryAction="Learn Architecture"
+            secondaryAction="View Gallery"
+            onPrimaryClick={() => window.location.href = '/about'}
+            onSecondaryClick={() => window.location.href = '/gallery'}
+          />
+        </div>
+      </PageLayout.Content>
+
+      <Footer />
+    </PageLayout>
+  );
+};
+
+export default HomePage;

package/bin/templates/fbca/src/web/index.html.template

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}} - UIKit FBCA</title>
+    <meta name="description" content="Feature-Based Component Architecture demo with UIKit components" />
+    <meta name="theme-color" content="#8B5CF6">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>