@djangocfg/layouts 2.1.20 → 2.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.20",
-    "@djangocfg/centrifugo": "^2.1.20",
-    "@djangocfg/ui-nextjs": "^2.1.20",
+    "@djangocfg/api": "^2.1.21",
+    "@djangocfg/centrifugo": "^2.1.21",
+    "@djangocfg/ui-nextjs": "^2.1.21",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -114,7 +114,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.20",
+    "@djangocfg/typescript-config": "^2.1.21",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -39,11 +39,17 @@
 import React, { ReactNode, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
-import { type AuthConfig } from '@djangocfg/api/auth';
-import { type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { Suspense, ClientOnly } from '../../components/core';
 import { BaseApp } from './BaseApp';
+import type {
+  ThemeConfig,
+  LayoutErrorTrackingConfig,
+  ErrorBoundaryConfig,
+  SWRConfigOptions,
+  McpChatConfig,
+} from '../shared/types';
+import type { AuthConfig } from '@djangocfg/api/auth';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 
@@ -81,60 +87,54 @@ function determineLayoutMode(
 
 export interface AppLayoutProps {
   children: ReactNode;
-  
+
   /** Public layout component with enabled paths */
   publicLayout?: {
     component: React.ComponentType<{ children: ReactNode }>;
     enabledPath?: string | string[];
   };
-  
+
   /** Private layout component with enabled paths */
   privateLayout?: {
     component: React.ComponentType<{ children: ReactNode }>;
     enabledPath?: string | string[];
   };
-  
+
   /** Admin layout component with enabled paths */
   adminLayout?: {
     component: React.ComponentType<{ children: ReactNode }>;
     enabledPath?: string | string[];
   };
-  
+
   /** Theme configuration */
-  theme?: {
-    defaultTheme?: 'light' | 'dark' | 'system';
-    storageKey?: string;
-  };
-  
+  theme?: ThemeConfig;
+
   /** Auth configuration */
   auth?: AuthConfig;
-  
+
   /** Analytics configuration */
   analytics?: {
     googleTrackingId?: string;
   };
-  
+
   /** Centrifugo configuration */
   centrifugo?: {
     enabled?: boolean;
     autoConnect?: boolean;
     url?: string;
   };
-  
+
   /** Error tracking configuration */
-  errorTracking?: {
-    validation?: Partial<ValidationErrorConfig>;
-    cors?: Partial<CORSErrorConfig>;
-    network?: Partial<NetworkErrorConfig>;
-    onError?: (error: any) => boolean | void;
-  };
-  
+  errorTracking?: LayoutErrorTrackingConfig;
+
+  /** SWR configuration */
+  swr?: SWRConfigOptions;
+
   /** Error boundary configuration */
-  errorBoundary?: {
-    enabled?: boolean;
-    supportEmail?: string;
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-  };
+  errorBoundary?: ErrorBoundaryConfig;
+
+  /** MCP Chat configuration */
+  mcpChat?: McpChatConfig;
 }
 
 /**
@@ -244,7 +244,7 @@ function AppLayoutContent({
  * AppLayout - Main Component with All Providers
  */
 export function AppLayout(props: AppLayoutProps) {
-  const { theme, auth, errorTracking, errorBoundary } = props;
+  const { theme, auth, errorTracking, errorBoundary, swr, mcpChat } = props;
 
   return (
     <BaseApp
@@ -252,6 +252,8 @@ export function AppLayout(props: AppLayoutProps) {
       auth={auth}
       errorTracking={errorTracking}
       errorBoundary={errorBoundary}
+      swr={swr}
+      mcpChat={mcpChat}
     >
       <AppLayoutContent {...props} />
     </BaseApp>

package/src/layouts/AppLayout/BaseApp.tsx

@@ -8,16 +8,17 @@
  * - AuthProvider (authentication context)
  * - ErrorTrackingProvider (error handling)
  * - ErrorBoundary (React error boundary, enabled by default)
+ * - MCP Chat Widget (optional, lazy loaded)
  *
  * @example
  * ```tsx
  * import { BaseApp } from '@djangocfg/layouts';
  *
- * // ErrorBoundary enabled by default
+ * // With MCP Chat enabled
  * <BaseApp
  *   theme={{ defaultTheme: 'system' }}
  *   auth={{ loginPath: '/auth/login' }}
- *   errorBoundary={{ supportEmail: 'support@example.com' }}
+ *   mcpChat={{ enabled: true, autoDetectEnvironment: true }}
  * >
  *   {children}
  * </BaseApp>
@@ -32,52 +33,28 @@
 'use client';
 
 import { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
 import { SWRConfig } from 'swr';
 import { ThemeProvider, Toaster, TooltipProvider } from '@djangocfg/ui-nextjs';
-import { AuthProvider, type AuthConfig } from '@djangocfg/api/auth';
-import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
+import { AuthProvider } from '@djangocfg/api/auth';
+import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { PageProgress } from '../../components/core/PageProgress';
+import type { BaseLayoutProps } from '../shared/types';
 
-export interface BaseAppProps {
-  children: ReactNode;
+// Lazy load MCP Chat Widget with dynamic import
+const AIChatWidget = dynamic(
+  () => import('../../snippets/McpChat/components/AIChatWidget').then(mod => ({ default: mod.AIChatWidget })),
+  { ssr: false }
+);
 
-  /** Theme configuration */
-  theme?: {
-    defaultTheme?: 'light' | 'dark' | 'system';
-    storageKey?: string;
-  };
-
-  /** Auth configuration */
-  auth?: AuthConfig;
-
-  /** Error tracking configuration */
-  errorTracking?: {
-    validation?: Partial<ValidationErrorConfig>;
-    cors?: Partial<CORSErrorConfig>;
-    network?: Partial<NetworkErrorConfig>;
-    onError?: (error: any) => boolean | void;
-  };
-
-  /** SWR configuration */
-  swr?: {
-    revalidateOnFocus?: boolean;
-    revalidateOnReconnect?: boolean;
-    dedupingInterval?: number;
-  };
-
-  /** Error boundary configuration (enabled by default) */
-  errorBoundary?: {
-    enabled?: boolean;
-    supportEmail?: string;
-    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-  };
-}
+// For backwards compatibility, re-export as BaseAppProps
+export type BaseAppProps = BaseLayoutProps;
 
 /**
  * BaseApp - Core providers wrapper for any React/Next.js app
  *
- * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, ErrorTrackingProvider, ErrorBoundary (optional)
+ * Includes: ThemeProvider, TooltipProvider, SWRConfig, AuthProvider, ErrorTrackingProvider, ErrorBoundary (optional), MCP Chat (optional)
  * Also renders global Toaster and PageProgress components
  */
 export function BaseApp({
@@ -87,10 +64,16 @@ export function BaseApp({
   errorTracking,
   errorBoundary,
   swr,
+  mcpChat,
 }: BaseAppProps) {
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
 
+  // Debug: log mcpChat config
+  if (typeof window !== 'undefined') {
+    console.log('[BaseApp] mcpChat config:', mcpChat);
+  }
+
   const content = (
     <ThemeProvider
       defaultTheme={theme?.defaultTheme || 'system'}
@@ -114,6 +97,21 @@ export function BaseApp({
               {children}
               <PageProgress />
               <Toaster />
+
+              {/* MCP Chat Widget - lazy loaded */}
+              {mcpChat?.enabled && (
+                <AIChatWidget
+                  apiEndpoint={mcpChat.apiEndpoint}
+                  title={mcpChat.title}
+                  placeholder={mcpChat.placeholder}
+                  greeting={mcpChat.greeting}
+                  position={mcpChat.position}
+                  variant={mcpChat.variant}
+                  enableStreaming={mcpChat.enableStreaming}
+                  autoDetectEnvironment={mcpChat.autoDetectEnvironment}
+                  className={mcpChat.className}
+                />
+              )}
             </ErrorTrackingProvider>
           </AuthProvider>
         </SWRConfig>

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -1,18 +1,18 @@
 /**
  * Public Layout
- * 
+ *
  * Simple layout for public pages (home, docs, contact, legal pages)
  * Import and use directly with props - no complex configs needed!
- * 
+ *
  * Features:
  * - Responsive navigation with mobile drawer
- * - Footer with links and copyright
  * - User menu integration
- * 
+ * - No footer (add your own custom footer component)
+ *
  * @example
  * ```tsx
  * import { PublicLayout } from '@djangocfg/layouts';
- * 
+ *
  * <PublicLayout
  *   logo="/logo.svg"
  *   siteName="My App"
@@ -20,9 +20,6 @@
  *     { label: 'Home', href: '/' },
  *     { label: 'Docs', href: '/docs' }
  *   ]}
- *   footer={{
- *     links: { privacy: '/privacy', terms: '/terms' }
- *   }}
  * >
  *   {children}
  * </PublicLayout>
@@ -32,30 +29,12 @@
 'use client';
 
 import { ReactNode, useState } from 'react';
+import type { NavigationItem, UserMenuConfig } from '../shared/types';
 import {
   PublicNavigation,
   PublicMobileDrawer,
-  PublicFooter,
 } from './components';
 
-export interface NavigationItem {
-  label: string;
-  href: string;
-  icon?: string;
-}
-
-export interface FooterConfig {
-  links?: {
-    privacy?: string;
-    terms?: string;
-    security?: string;
-    cookies?: string;
-    docs?: string;
-  };
-  /** Copyright text (optional, auto-generated from siteName if not provided) */
-  copyright?: string;
-}
-
 export interface PublicLayoutProps {
   children: ReactNode;
   /** Logo path or URL */
@@ -64,17 +43,8 @@ export interface PublicLayoutProps {
   siteName?: string;
   /** Navigation items */
   navigation?: NavigationItem[];
-  /** Footer configuration */
-  footer?: FooterConfig;
-  /** User menu paths (optional, uses useAuth() for authentication state) */
-  userMenu?: {
-    /** Profile page path */
-    profilePath?: string;
-    /** Dashboard page path */
-    dashboardPath?: string;
-    /** Auth page path (for sign in button) */
-    authPath?: string;
-  };
+  /** User menu configuration (optional, uses useAuth() for authentication state) */
+  userMenu?: UserMenuConfig;
 }
 
 export function PublicLayout({
@@ -82,7 +52,6 @@ export function PublicLayout({
   logo,
   siteName = 'App',
   navigation = [],
-  footer,
   userMenu,
 }: PublicLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -111,10 +80,7 @@ export function PublicLayout({
       {/* Main Content */}
       <main className="flex-1">{children}</main>
 
-      {/* Footer */}
-      {footer && (
-        <PublicFooter logo={logo} siteName={siteName} footer={footer} />
-      )}
+      {/* Footer - Add your own custom footer component here if needed */}
     </div>
   );
 }

package/src/layouts/PublicLayout/components/PublicFooter/DjangoCFGLogo.tsx

@@ -0,0 +1,45 @@
+/**
+ * DjangoCFG Logo Component
+ *
+ * Default SVG logo for DjangoCFG
+ */
+
+'use client';
+
+import React from 'react';
+
+export interface DjangoCFGLogoProps {
+  className?: string;
+  size?: number;
+}
+
+export function DjangoCFGLogo({ className, size }: DjangoCFGLogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 541 536"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M159.958 408.555C129.071 408.555 102.501 403.407 80.2482 393.111C57.9958 382.483 40.8913 366.707 28.9348 345.783C16.9783 324.527 11 297.791 11 265.575C11 236.348 16.9783 211.272 28.9348 190.348C40.8913 169.092 57.6637 152.818 79.2519 141.526C100.84 130.233 126.248 124.421 155.475 124.089C167.431 124.089 177.893 125.085 186.861 127.078C196.16 128.739 202.969 130.566 207.286 132.558L206.29 185.864C201.972 184.204 196.492 182.543 189.85 180.883C183.207 179.222 174.904 178.392 164.94 178.392C137.374 178.392 116.616 186.031 102.667 201.308C89.0496 216.586 82.241 238.008 82.241 265.575C82.241 284.506 85.0641 300.614 90.7102 313.899C96.6885 327.184 105.656 337.314 117.612 344.289C129.569 350.931 144.847 354.252 163.446 354.252C173.41 354.252 182.045 353.422 189.352 351.761C196.991 350.101 203.633 348.108 209.279 345.783L202.803 364.216C200.146 358.57 198.485 351.761 197.821 343.79C197.157 335.819 196.824 327.184 196.824 317.885V113.627C196.824 105.656 196.658 96.0244 196.326 84.7322C195.994 73.4399 195.496 62.4797 194.832 51.8517C194.167 41.2237 193.171 33.2526 191.843 27.9386L193.337 23.9531H266.571V304.433C266.571 311.076 266.571 319.711 266.571 330.339C266.903 340.635 267.235 350.765 267.567 360.729C268.231 370.693 269.228 378.664 270.556 384.642L269.062 388.627C255.112 394.273 239.004 398.923 220.737 402.577C202.803 406.562 182.543 408.555 159.958 408.555Z"
+        fill="currentColor"
+      />
+      <path
+        d="M193.337 23.9531L191.843 27.9385C193.171 33.2525 194.168 41.2236 194.832 51.8516C195.496 62.4796 195.994 73.4401 196.326 84.7324C196.658 96.0245 196.824 105.656 196.824 113.627V129.152C193.901 128.435 190.58 127.742 186.86 127.078C177.893 125.085 167.431 124.089 155.475 124.089C126.248 124.421 100.84 130.233 79.252 141.525L78.2432 142.059C57.1405 153.328 40.7042 169.425 28.9346 190.349C16.9782 211.272 11 236.348 11 265.575L11.0039 267.081C11.1878 298.625 17.1649 324.859 28.9346 345.783C40.8911 366.707 57.9956 382.483 80.248 393.111C102.5 403.407 129.07 408.555 159.958 408.555C182.543 408.555 202.803 406.562 220.737 402.576C239.004 398.923 255.112 394.273 269.062 388.627L270.557 384.642C269.228 378.663 268.232 370.692 267.567 360.729C267.235 350.765 266.903 340.635 266.571 330.339V23.9531H193.337ZM82.2412 265.575C82.2412 238.009 89.0498 216.586 102.667 201.309C116.616 186.031 137.374 178.392 164.94 178.392L166.789 178.401C175.935 178.499 183.622 179.326 189.85 180.883C192.337 181.505 194.663 182.126 196.824 182.748V317.885L196.828 319.62C196.867 328.261 197.199 336.317 197.821 343.79C197.985 345.757 198.21 347.653 198.495 349.478C195.625 350.297 192.577 351.06 189.352 351.762C182.045 353.422 173.409 354.252 163.445 354.252V343.252C172.677 343.252 180.348 342.49 186.584 341.106C186.076 333.821 185.824 326.078 185.824 317.885V191.237C180.514 190.065 173.614 189.392 164.94 189.392C139.406 189.392 122.05 196.41 110.814 208.698C99.5767 221.349 93.2412 239.809 93.2412 265.575C93.2413 283.41 95.8996 297.933 100.788 309.487C105.861 320.71 113.267 328.992 123.06 334.729C132.888 340.16 146.134 343.252 163.445 343.252V354.252C144.846 354.252 129.569 350.931 117.612 344.288C105.656 337.313 96.6882 327.184 90.71 313.899C85.2402 301.029 82.4199 285.51 82.249 267.341L82.2412 265.575ZM277.571 330.152C277.899 340.322 278.227 350.329 278.555 360.174C279.202 369.794 280.145 377.085 281.294 382.256L282.003 385.445L277.666 397.012L273.188 398.824C258.493 404.772 241.727 409.592 222.969 413.348C204.136 417.518 183.107 419.555 159.958 419.555C127.877 419.555 99.6539 414.211 75.6289 403.095L75.5684 403.066L75.5078 403.037C51.2848 391.468 32.4787 374.156 19.3838 351.24L19.3652 351.208L19.3477 351.176C6.21456 327.828 6.03515e-05 299.093 0 265.575C0 234.84 6.29459 207.797 19.3838 184.891C32.3805 161.813 50.6989 144.047 74.1533 131.778C97.5551 119.537 124.732 113.438 155.35 113.09L155.412 113.089H155.475C166.591 113.089 176.734 113.908 185.824 115.636V113.627C185.824 105.798 185.661 96.2805 185.331 85.0557C185.002 73.8772 184.51 63.0382 183.854 52.5381C183.2 42.0782 182.249 34.9186 181.171 30.6064L180.34 27.2832L185.714 12.9531H277.571V330.152Z"
+        fill="currentColor"
+        opacity="0.2"
+      />
+      <path
+        d="M326.086 273.578L489.086 2.57812L415.586 204.578H532.086L333.586 533.078L415.586 273.578H326.086Z"
+        fill="#FFEF0B"
+      />
+      <path
+        d="M493.784 4.28711L422.726 199.577H540.949L337.865 535.663L328.818 531.57L408.763 278.577H317.244L484.801 0L493.784 4.28711ZM334.929 268.577H422.409L350.98 494.621L523.223 209.577H408.446L466.683 49.5254L334.929 268.577Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/layouts/PublicLayout/components/PublicFooter/FooterBottom.tsx

@@ -0,0 +1,114 @@
+/**
+ * Footer Bottom Section Component
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { DjangoCFGLogo } from './DjangoCFGLogo';
+import type { FooterLink } from './types';
+
+export interface FooterBottomProps {
+  copyright: string;
+  credits?: {
+    text: string;
+    url?: string;
+  };
+  links?: FooterLink[];
+  variant?: 'mobile' | 'desktop';
+}
+
+export function FooterBottom({
+  copyright,
+  credits,
+  links = [],
+  variant = 'desktop',
+}: FooterBottomProps) {
+  const isMobile = variant === 'mobile';
+
+  if (isMobile) {
+    return (
+      <div className="border-t border-border pt-4">
+        <div className="text-center space-y-2">
+          <div className="text-xs text-muted-foreground">{copyright}</div>
+          {credits && (
+            <div className="text-xs text-muted-foreground flex items-center justify-center gap-1.5">
+              {credits.url ? (
+                <a
+                  href={credits.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-primary transition-colors flex items-center gap-1.5"
+                >
+                  <DjangoCFGLogo size={12} className="text-foreground" />
+                  {credits.text}
+                </a>
+              ) : (
+                <>
+                  <DjangoCFGLogo size={12} className="text-foreground" />
+                  {credits.text}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-t border-border mt-8 pt-6">
+      <div className="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0 gap-4">
+        <div className="text-xs text-muted-foreground">{copyright}</div>
+
+        {credits && (
+          <div className="text-xs text-muted-foreground flex items-center gap-1.5">
+            {credits.url ? (
+              <a
+                href={credits.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-primary transition-colors flex items-center gap-1.5"
+              >
+                <DjangoCFGLogo size={14} className="text-foreground" />
+                {credits.text}
+              </a>
+            ) : (
+              <>
+                <DjangoCFGLogo size={14} className="text-foreground" />
+                {credits.text}
+              </>
+            )}
+          </div>
+        )}
+
+        {links.length > 0 && (
+          <div className="flex flex-wrap items-center gap-3 md:gap-4 justify-center md:justify-end">
+            {links.map((link) =>
+              link.external ? (
+                <a
+                  key={link.path}
+                  href={link.path}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                >
+                  {link.label}
+                </a>
+              ) : (
+                <Link
+                  key={link.path}
+                  href={link.path}
+                  className="text-xs text-muted-foreground hover:text-primary transition-colors"
+                >
+                  {link.label}
+                </Link>
+              )
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/layouts/PublicLayout/components/PublicFooter/FooterMenuSections.tsx

@@ -0,0 +1,53 @@
+/**
+ * Footer Menu Sections Component
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import type { FooterMenuSection } from './types';
+
+export interface FooterMenuSectionsProps {
+  menuSections: FooterMenuSection[];
+}
+
+export function FooterMenuSections({ menuSections }: FooterMenuSectionsProps) {
+  if (menuSections.length === 0) return null;
+
+  // Gap in pixels (lg:gap-x-12 = 3rem = 48px)
+  const gapPx = 48;
+  const sectionCount = menuSections.length;
+  const totalGap = (sectionCount - 1) * gapPx;
+
+  // Each section = 25% of full width, minus proportional part of gap
+  const sectionWidth = `calc(25% - ${totalGap / sectionCount}px)`;
+
+  return (
+    <div className="flex flex-1 gap-8 lg:gap-x-12 justify-end">
+      {menuSections.map((section) => (
+        <div
+          key={section.title}
+          className="flex-shrink-0 min-w-0"
+          style={{ width: sectionWidth }}
+        >
+          <h3 className="text-base font-semibold text-foreground mb-3">
+            {section.title}
+          </h3>
+          <ul className="space-y-2">
+            {section.items.map((item) => (
+              <li key={item.path}>
+                <Link
+                  href={item.path}
+                  className="text-muted-foreground hover:text-primary text-sm transition-colors"
+                >
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/layouts/PublicLayout/components/PublicFooter/FooterProjectInfo.tsx

@@ -0,0 +1,77 @@
+/**
+ * Footer Project Info Component
+ */
+
+'use client';
+
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { DjangoCFGLogo } from './DjangoCFGLogo';
+import { FooterSocialLinksComponent } from './FooterSocialLinks';
+import type { FooterSocialLinks } from './types';
+
+export interface FooterProjectInfoProps {
+  siteName: string;
+  description?: string;
+  logo?: string;
+  badge?: {
+    icon: LucideIcon;
+    text: string;
+  };
+  socialLinks?: FooterSocialLinks;
+  variant?: 'mobile' | 'desktop';
+}
+
+export function FooterProjectInfo({
+  siteName,
+  description,
+  logo,
+  badge,
+  socialLinks,
+  variant = 'desktop',
+}: FooterProjectInfoProps) {
+  const isMobile = variant === 'mobile';
+
+  return (
+    <div className={isMobile ? 'text-center space-y-4 mb-6' : 'space-y-4 lg:flex-shrink-0 lg:w-80'}>
+      <div className={isMobile ? 'flex items-center justify-center gap-2' : 'flex items-center gap-2'}>
+        {logo ? (
+          <div className={isMobile ? 'w-6 h-6 flex items-center justify-center' : 'w-8 h-8 flex items-center justify-center'}>
+            <img
+              src={logo}
+              alt={`${siteName} Logo`}
+              className="w-full h-full object-contain"
+            />
+          </div>
+        ) : (
+          <DjangoCFGLogo size={isMobile ? 24 : 32} className="text-foreground" />
+        )}
+        <span className={isMobile ? 'text-lg font-bold text-foreground' : 'text-xl font-bold text-foreground'}>
+          {siteName}
+        </span>
+      </div>
+
+      {description && (
+        <p className={isMobile ? 'text-muted-foreground text-sm leading-relaxed max-w-md mx-auto' : 'text-muted-foreground text-sm leading-relaxed'}>
+          {description}
+        </p>
+      )}
+
+      {badge && !isMobile && (
+        <div className="pt-2">
+          <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gradient-to-r from-primary/80 to-secondary/60 border border-primary/30 shadow-brand text-xs font-semibold text-primary-foreground">
+            <badge.icon className="w-4 h-4" />
+            {badge.text}
+          </span>
+        </div>
+      )}
+
+      {socialLinks && (
+        <FooterSocialLinksComponent
+          socialLinks={socialLinks}
+          className={isMobile ? 'flex justify-center space-x-6' : 'flex space-x-4 pt-4'}
+        />
+      )}
+    </div>
+  );
+}