@bloomneo/uikit 1.5.0

package/bin/templates/fbca/src/web/features/docs/pages/[...slug].tsx.template

@@ -0,0 +1,83 @@
+/**
+ * Catch-All Route Example - /docs/*
+ * Handles any path under /docs/ with unlimited nesting
+ */
+
+import { useParams } from 'react-router-dom';
+import { useSEO } from '@/shared/hooks/useSEO';
+import { Header } from '@/shared/components/Header';
+import { Footer } from '@/shared/components/Footer';
+
+export default function DocsPage() {
+  const { '*': catchAll } = useParams();
+  const paths = catchAll?.split('/').filter(Boolean) || [];
+
+  useSEO({
+    title: paths.length > 0 ? `Docs: ${paths.join(' / ')}` : 'Documentation',
+    description: `Documentation for ${paths.join(' and ')}`,
+    keywords: 'documentation, guides, help, fbca, features',
+  });
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <main className="max-w-4xl mx-auto px-4 py-12">
+        <div className="space-y-8">
+          <div className="text-center">
+            <h1 className="voila-heading text-4xl mb-4">Documentation</h1>
+            <p className="voila-subheading text-muted-foreground">
+              {paths.length > 0
+                ? `Showing docs for: ${paths.join(' → ')}`
+                : 'Browse our comprehensive documentation'
+              }
+            </p>
+          </div>
+
+          {paths.length > 0 ? (
+            <div className="bg-card border border-border rounded-lg p-6">
+              <h2 className="text-2xl font-bold text-foreground mb-4">Navigation Path</h2>
+              <div className="space-y-3">
+                {paths.map((path, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-3 text-foreground"
+                  >
+                    <span className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center text-sm font-medium">
+                      {index + 1}
+                    </span>
+                    <span className="capitalize font-medium">{path.replace('-', ' ')}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="bg-card border border-border rounded-lg p-6">
+                <h3 className="text-xl font-bold text-foreground mb-3">Getting Started</h3>
+                <p className="text-muted-foreground mb-4">
+                  Learn the basics of using our platform
+                </p>
+                <div className="text-sm text-muted-foreground">
+                  Try: /docs/getting-started/installation
+                </div>
+              </div>
+
+              <div className="bg-card border border-border rounded-lg p-6">
+                <h3 className="text-xl font-bold text-foreground mb-3">API Reference</h3>
+                <p className="text-muted-foreground mb-4">
+                  Complete API documentation and examples
+                </p>
+                <div className="text-sm text-muted-foreground">
+                  Try: /docs/api/authentication
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/bin/templates/fbca/src/web/features/gallery/hooks/useGallery.ts.template

@@ -0,0 +1,74 @@
+/**
+ * Gallery Hook
+ * Manages random image loading from Picsum Photos API
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface GalleryImage {
+  id: string;
+  url: string;
+  downloadUrl: string;
+  width: number;
+  height: number;
+}
+
+interface UseGalleryResult {
+  images: GalleryImage[];
+  loading: boolean;
+  error: string | null;
+  refreshImages: () => void;
+}
+
+export const useGallery = (count: number = 6): UseGalleryResult => {
+  const [images, setImages] = useState<GalleryImage[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadImages = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const imagePromises = Array.from({ length: count }, async (_, index) => {
+        const width = 300 + Math.floor(Math.random() * 100); // 300-400px width
+        const height = 200 + Math.floor(Math.random() * 100); // 200-300px height
+        const imageId = Math.floor(Math.random() * 1000) + index;
+
+        const url = `https://picsum.photos/${width}/${height}?random=${imageId}`;
+        const downloadUrl = `https://picsum.photos/${width}/${height}?random=${imageId}`;
+
+        return {
+          id: imageId.toString(),
+          url,
+          downloadUrl,
+          width,
+          height
+        };
+      });
+
+      const newImages = await Promise.all(imagePromises);
+      setImages(newImages);
+    } catch (err) {
+      setError('Failed to load images. Please try again.');
+      console.error('Gallery loading error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [count]);
+
+  const refreshImages = useCallback(() => {
+    loadImages();
+  }, [loadImages]);
+
+  useEffect(() => {
+    loadImages();
+  }, [loadImages]);
+
+  return {
+    images,
+    loading,
+    error,
+    refreshImages
+  };
+};

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent } from '@bloomneo/uikit/card';
+import { RefreshCw, Images } from 'lucide-react';
+import { Header, Footer, SEO } from '../../../shared/components';
+import { useGallery } from '../hooks/useGallery';
+
+const GalleryPage: React.FC = () => {
+  const { images, loading, error, refreshImages } = useGallery(6);
+
+  return (
+    <PageLayout>
+      <SEO
+        title="Gallery - Random Images | UIKit FBCA Demo"
+        description="Explore beautiful random images powered by Picsum Photos API. Demonstrates external API integration with custom React hooks in Feature-Based Component Architecture."
+        keywords="react gallery, picsum photos, external api, react hooks, image gallery, fbca, feature architecture"
+        ogTitle="Gallery - Random Images | FBCA Demo"
+        ogDescription="Beautiful random image gallery showcasing external API integration with React hooks"
+      />
+      <Header />
+
+      <PageLayout.Content>
+        <div className="space-y-8">
+          {/* Hero Section */}
+          <section className="text-center py-12">
+            <div className="space-y-4">
+              <div className="flex items-center justify-center gap-3 mb-4">
+                <Images className="w-8 h-8 text-primary" />
+                <h1 className="text-4xl md:text-5xl font-bold text-gradient-primary">
+                  Random Gallery
+                </h1>
+              </div>
+              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                Beautiful random images powered by Picsum Photos. Each refresh brings new stunning photography.
+              </p>
+              <div className="pt-4">
+                <Button
+                  onClick={refreshImages}
+                  disabled={loading}
+                  className="gap-2"
+                  size="lg"
+                >
+                  <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+                  {loading ? 'Loading...' : 'Refresh Gallery'}
+                </Button>
+              </div>
+              {error && (
+                <div className="text-sm text-amber-600 bg-amber-50 p-3 rounded-lg max-w-md mx-auto">
+                  ⚠️ {error}
+                </div>
+              )}
+            </div>
+          </section>
+
+          {/* Gallery Grid */}
+          <section className="space-y-6">
+            {loading ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {[...Array(6)].map((_, i) => (
+                  <Card key={i} className="animate-pulse">
+                    <CardContent className="p-0">
+                      <div className="h-64 bg-muted rounded-lg"></div>
+                      <div className="p-4">
+                        <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
+                        <div className="h-3 bg-muted rounded w-1/2"></div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {images.map((image, index) => (
+                  <Card key={image.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden">
+                    <CardContent className="p-0">
+                      <div className="relative overflow-hidden">
+                        <img
+                          src={image.url}
+                          alt={`Gallery image ${index + 1}`}
+                          className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
+                          loading="lazy"
+                        />
+                      </div>
+                      <div className="p-4">
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <div className="text-sm font-medium">Image #{index + 1}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {image.width} × {image.height}px
+                            </div>
+                          </div>
+                          <div className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
+                            Random
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </section>
+
+          {/* Stats Section */}
+          <section className="py-8">
+            <Card className="bg-muted/20">
+              <CardContent className="p-6 text-center">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  <div>
+                    <div className="text-2xl font-bold text-primary">{images.length}</div>
+                    <div className="text-sm text-muted-foreground">Images Loaded</div>
+                  </div>
+                  <div>
+                    <div className="text-2xl font-bold text-primary">
+                      {images.reduce((total, img) => total + img.width * img.height, 0).toLocaleString()}
+                    </div>
+                    <div className="text-sm text-muted-foreground">Total Pixels</div>
+                  </div>
+                  <div>
+                    <div className="text-2xl font-bold text-primary">Picsum API</div>
+                    <div className="text-sm text-muted-foreground">Data Source</div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </section>
+        </div>
+      </PageLayout.Content>
+
+      <Footer />
+    </PageLayout>
+  );
+};
+
+export default GalleryPage;

package/bin/templates/fbca/src/web/features/main/components/CTASection.tsx.template

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { ArrowRight } from 'lucide-react';
+
+interface CTASectionProps {
+  title: string;
+  description: string;
+  primaryAction: string;
+  secondaryAction: string;
+  onPrimaryClick: () => void;
+  onSecondaryClick: () => void;
+}
+
+export const CTASection: React.FC<CTASectionProps> = ({
+  title,
+  description,
+  primaryAction,
+  secondaryAction,
+  onPrimaryClick,
+  onSecondaryClick,
+}) => {
+  return (
+    <section className="text-center py-16 bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10 border border-primary/20 rounded-lg">
+      <div className="space-y-6">
+        <h2 className="text-3xl md:text-4xl font-bold text-gradient-primary">
+          {title}
+        </h2>
+        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+          {description}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
+          <Button size="lg" onClick={onPrimaryClick}>
+            {primaryAction}
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+          <Button variant="outline" size="lg" onClick={onSecondaryClick}>
+            {secondaryAction}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};