metabinaries 1.3.3

package/src/templates/layout-clean.js

@@ -0,0 +1,788 @@
+// Clean Layout & Components (Simple Frontend Only)
+export const layoutTemplates = {
+  'lib/providers.tsx': (projectName, options = {}) => {
+    const { includeRedux = false, includeAIChat = false } = options;
+    const useRedux = includeRedux || includeAIChat;
+
+    return `'use client';
+
+import { ThemeProvider as NextThemeProvider } from 'next-themes';
+${useRedux ? "import { StoreProvider } from '@/store/features/aiChat/Provider';" : ""}
+import { ReactNode } from 'react';
+import { Toaster } from '@/components/ui/sonner';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 1000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      ${useRedux ? "<StoreProvider>" : ""}
+        <NextThemeProvider
+          attribute='class'
+          defaultTheme='system'
+          enableSystem
+          disableTransitionOnChange
+          themes={['light', 'dark', 'system']}
+        >
+          {children}
+          <Toaster
+            position='bottom-right'
+            expand={true}
+            richColors={true}
+            closeButton={true}
+          />
+        </NextThemeProvider>
+      ${useRedux ? "</StoreProvider>" : ""}
+    </QueryClientProvider>
+  );
+}`;
+  },
+
+  'components/layout/LanguageSwitcher.tsx': `'use client';
+
+import { Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useParams, useSearchParams } from 'next/navigation';
+import { useRouter, usePathname } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import { useTransition } from 'react';
+
+type Locale = 'en' | 'ar';
+
+const LANGUAGES = [
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'ar', name: 'العربية', flag: '🇸🇦', dir: 'rtl' },
+] as const;
+
+export function LanguageSwitcher() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isPending, startTransition] = useTransition();
+
+  const currentLocale = (params?.locale as Locale) || 'en';
+
+  const handleLocaleChange = (newLocale: Locale) => {
+    if (newLocale === currentLocale || isPending) return;
+
+    startTransition(() => {
+      // Build query string from current search params
+      const queryString = searchParams.toString();
+      const pathnameWithQuery = queryString
+        ? \`\${pathname}?\${queryString}\`
+        : pathname;
+
+      router.replace(
+        pathnameWithQuery,
+        { locale: newLocale }
+      );
+    });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          title="Change Language"
+          disabled={isPending}
+          className="relative text-foreground hover:bg-accent transition-colors gap-2 px-3 h-10 focus-visible:outline-none focus:ring-0 focus:ring-offset-0"
+          aria-label="Change language"
+        >
+          <Globe className={cn(
+            'h-[18px] w-[18px] text-muted-foreground',
+            isPending && 'animate-spin'
+          )} />
+          <span className="text-sm font-semibold uppercase tracking-wide">
+            {currentLocale}
+          </span>
+          <span className="sr-only">Change Language</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[160px]" onCloseAutoFocus={(e) => e.preventDefault()}>
+        {LANGUAGES.map((lang) => {
+          const isActive = currentLocale === lang.code;
+          return (
+            <DropdownMenuItem
+              key={lang.code}
+              onClick={() => handleLocaleChange(lang.code as Locale)}
+              disabled={isPending}
+              className={cn(
+                'cursor-pointer justify-between',
+                isActive && 'bg-muted font-medium'
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <span className="text-lg">{lang.flag}</span>
+                <span>{lang.name}</span>
+              </span>
+              {isActive && (
+                <span className="text-primary font-bold">✓</span>
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}`,
+
+  'components/layout/ThemeSwitcher.tsx': `'use client';
+
+import { Moon, Sun, Monitor } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='ghost'
+          size='sm'
+          title='Toggle theme'
+          className='text-foreground hover:bg-accent h-10 w-10 p-0 rounded-full transition-colors focus-visible:outline-none focus:ring-0 focus:ring-offset-0'
+        >
+          <Sun className='h-[18px] w-[18px] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-muted-foreground' />
+          <Moon className='absolute h-[18px] w-[18px] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 text-muted-foreground' />
+          <span className='sr-only'>Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className='mr-2 h-4 w-4' />
+          Light
+          {theme === 'light' && <span className='ml-auto'>✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className='mr-2 h-4 w-4' />
+          Dark
+          {theme === 'dark' && <span className='ml-auto'>✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className='mr-2 h-4 w-4' />
+          System
+          {theme === 'system' && <span className='ml-auto'>✓</span>}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}`,
+
+  'components/layout/Header.tsx': `'use client';
+
+import Link from 'next/link';
+import * as React from 'react';
+import { usePathname } from 'next/navigation';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { ThemeSwitcher } from './ThemeSwitcher';
+import { Button } from '@/components/ui/button';
+import { Menu, X, ArrowRight } from 'lucide-react';
+import { useState } from 'react';
+import Logo from '@/components/ui/logo';
+import { cn } from '@/lib/utils';
+
+const defaultNavigation = [
+  { name: 'Home', href: '/' },
+];
+
+export function Header({
+  siteName = 'MetaBinaries',
+  navigation = defaultNavigation,
+}) {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const locale = pathname?.split('/')[1] || 'en';
+  const currentPath = pathname?.replace(\`/\${locale}\`, '') || '/';
+
+  return (
+    <header className='sticky top-0 z-50 w-full bg-background/80 backdrop-blur-md border-b border-border/40 py-4'>
+      <div className='w-full flex h-14 items-center justify-between px-4 sm:px-12'>
+
+        <Link
+          href={\`/\${locale}\`}
+          className='flex items-center gap-3 group shrink-0'
+        >
+          <Logo className='w-auto h-auto' />
+          <span className='text-xl font-bold tracking-tight text-foreground'>
+            {siteName}
+          </span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className='hidden md:flex items-center gap-1 p-1'>
+          {navigation.map(item => {
+            const isActive =
+              currentPath === item.href ||
+              (item.href !== '/' && currentPath.startsWith(item.href));
+            return (
+              <Link
+                key={item.name}
+                href={\`/\${locale}\${item.href}\`}
+                className={cn(
+                  'px-6 py-2 rounded-full text-sm font-medium transition-all duration-300',
+                  isActive
+                    ? 'text-blue-600 bg-blue-500/10 dark:text-blue-400'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                )}
+              >
+                {item.name}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className='flex items-center gap-4'>
+          <div className='hidden sm:flex items-center gap-2'>
+            <React.Suspense fallback={<div className='w-8 h-8' />}>
+              <LanguageSwitcher />
+            </React.Suspense>
+            <div className='w-[1px] h-4 bg-border mx-1' />
+            <ThemeSwitcher />
+          </div>
+
+          <Button className='hidden md:flex rounded-full bg-blue-600 hover:bg-blue-700 text-white px-6 h-11 border-none font-semibold shadow-lg shadow-blue-500/20 gap-2 transition-all hover:translate-y-[-1px] active:scale-95'>
+            Start Project
+            <ArrowRight className='w-4 h-4' />
+          </Button>
+
+          <Button
+            variant='ghost'
+            size='icon'
+            className='md:hidden rounded-full text-foreground hover:bg-accent'
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <X className='w-6 h-6' />
+            ) : (
+              <Menu className='w-6 h-6' />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div className='md:hidden absolute top-full left-0 w-full bg-background border-b border-border animate-in fade-in slide-in-from-top-4'>
+          <div className='container py-8 flex flex-col gap-6'>
+            {navigation.map(item => (
+              <Link
+                key={item.name}
+                href={\`/\${locale}\${item.href}\`}
+                onClick={() => setMobileMenuOpen(false)}
+                className='text-xl font-medium px-4 py-3 text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors'
+              >
+                {item.name}
+              </Link>
+            ))}
+            <div className='flex items-center justify-between gap-4 px-4 pt-6 border-t border-border'>
+              <div className='flex items-center gap-4'>
+                <React.Suspense fallback={<div className='w-8 h-8' />}>
+                  <LanguageSwitcher />
+                </React.Suspense>
+                <ThemeSwitcher />
+              </div>
+              <Button className='rounded-xl bg-blue-600 px-8 text-white'>
+                Get Started
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}`,
+
+  'components/layout/Footer.tsx': `'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Facebook, Twitter, Instagram, Github, Mail } from 'lucide-react';
+import Logo from '@/components/ui/logo';
+
+interface FooterProps {
+  siteName?: string;
+  description?: string;
+}
+
+export function Footer({
+  siteName = 'MetaBinaries',
+  description = 'Empowering businesses with modern digital solutions and intelligent workspaces.'
+}: FooterProps) {
+  const currentYear = new Date().getFullYear();
+
+  const footerLinks = [
+    {
+      title: 'Product',
+      links: [
+        { name: 'Features', href: '/#features' },
+        { name: 'Documentation', href: 'https://nextjs.org/docs' },
+      ],
+    },
+    {
+      title: 'Company',
+      links: [
+        { name: 'Privacy Policy', href: '/privacy' },
+        { name: 'Terms', href: '/terms' },
+      ],
+    },
+  ];
+
+  return (
+    <footer className='bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 transition-colors duration-300'>
+      <div className='container mx-auto px-4 pt-16 pb-8'>
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12'>
+          {/* Brand Section */}
+          <div className='flex flex-col gap-4'>
+            <Link href='/' className='flex items-center gap-2 group'>
+              <Logo className='w-10 h-10 group-hover:scale-110 transition-transform' />
+              <span className='text-2xl font-bold tracking-tight text-slate-900 dark:text-white'>
+                {siteName}
+              </span>
+            </Link>
+            <p className='text-slate-500 dark:text-slate-400 text-sm leading-relaxed max-w-xs'>
+              {description}
+            </p>
+            <div className='flex items-center gap-4 mt-2'>
+              <Link href='#' className='text-slate-400 hover:text-blue-600 transition-colors'><Facebook size={20} /></Link>
+              <Link href='#' className='text-slate-400 hover:text-blue-400 transition-colors'><Twitter size={20} /></Link>
+              <Link href='#' className='text-slate-400 hover:text-pink-600 transition-colors'><Instagram size={20} /></Link>
+              <Link href='#' className='text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors'><Github size={20} /></Link>
+            </div>
+          </div>
+
+          {/* Links Sections */}
+          {footerLinks.map((section) => (
+            <div key={section.title} className='flex flex-col gap-4'>
+              <h4 className='text-sm font-bold uppercase tracking-widest text-slate-900 dark:text-white'>
+                {section.title}
+              </h4>
+              <ul className='flex flex-col gap-2'>
+                {section.links.map((link) => (
+                  <li key={link.name}>
+                    <Link
+                      href={link.href}
+                      className='text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors decoration-2 underline-offset-4 hover:underline'
+                    >
+                      {link.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Bottom Bar */}
+        <div className='pt-8 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4'>
+          <p className='text-slate-400 text-xs'>
+            © {currentYear} {siteName}. All rights reserved.
+          </p>
+          <div className='flex items-center gap-6'>
+            <Link href='#' className='text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-xs flex items-center gap-1 transition-colors'>
+              <Mail size={14} />
+              hello@{siteName.toLowerCase()}.com
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}`,
+
+  'components/ui/logo.tsx': `'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface LogoProps {
+  className?: string;
+  showText?: boolean;
+}
+
+const Logo: React.FC<LogoProps> = ({ className }) => {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <div className='relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-lg shrink-0 overflow-hidden'>
+        <div className='w-3 h-3 bg-white rounded-[2px]' />
+        {/* Subtle inner detail */}
+        <div className='absolute inset-0 border-[3px] border-white/10 rounded-lg' />
+      </div>
+    </div>
+  );
+};
+
+export default Logo;`,
+
+  'components/layout/MainMenu.tsx': `'use client';
+import React from 'react';
+import Link from 'next/link';
+import { X } from 'lucide-react';
+
+export interface MenuLink {
+  name: string;
+  url: string;
+}
+
+export interface MenuSection {
+  title: string;
+  links: MenuLink[];
+}
+
+interface MainMenuProps {
+  open: boolean;
+  onClose: () => void;
+  sections: MenuSection[];
+  isRTL?: boolean;
+  className?: string;
+  overlayClassName?: string;
+}
+
+export const MainMenu: React.FC<MainMenuProps> = ({
+  open,
+  onClose,
+  sections,
+  isRTL = false,
+  className = '',
+  overlayClassName = '',
+}) => {
+  if (!open) return null;
+
+  return (
+    <div
+      className={\`fixed inset-0 z-50 pt-16 xl:pt-20 bg-black/95 backdrop-blur-md flex animate-in fade-in slide-in-from-bottom-8 overflow-y-auto \${overlayClassName}\`}
+    >
+      <button
+        className={\`fixed top-4 xl:top-6 \${isRTL ? 'left-4 xl:left-6' : 'right-4 xl:right-6'
+          } text-white hover:bg-white/10 p-2 rounded-full transition-colors z-[60]\`}
+        onClick={onClose}
+        aria-label='Close menu'
+      >
+        <X className='w-6 h-6' />
+      </button>
+
+      <div className={\`container mx-auto px-6 py-12 \${className}\`}>
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12'>
+          {sections.map((section, idx) => (
+            <div key={idx} className='flex flex-col'>
+              <h3 className='text-white text-xl font-bold mb-6 pb-2 border-b border-white/20 uppercase tracking-wider'>
+                {section.title}
+              </h3>
+              <div className='flex flex-col space-y-4'>
+                {section.links.map((link, lIdx) => (
+                  <Link
+                    key={lIdx}
+                    href={link.url}
+                    onClick={onClose}
+                    className='text-white/70 hover:text-white transition-colors text-lg hover:translate-x-1 duration-200 inline-block'
+                  >
+                    {link.name}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MainMenu;`,
+
+  'components/layout/MobileNavbar.tsx': `'use client';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { MenuIcon, UserIcon, Search, LogOut, X, Shield } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import Logo from '@/components/ui/logo';
+
+const MobileNavbar = () => {
+  const t = useTranslations('aiChat'); // Fallback to aiChat or similar if wanted
+  const locale = useLocale();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentLocale = pathname?.split('/')[1] === 'ar' ? 'ar' : 'en';
+  const otherLocale = currentLocale === 'en' ? 'ar' : 'en';
+  const basePath = pathname?.replace(/^\\/(en|ar)/, '') || '/';
+
+  const searchParamsString = searchParams.toString();
+  const queryString = searchParamsString ? \`?\${searchParamsString}\` : '';
+
+  const currentSection =
+    pathname
+      ?.replace(/^\\/(en|ar)/, '')
+      .split('/')
+      .filter(Boolean)[0] || '';
+
+  const handleLinkClick = () => {
+    setMenuOpen(false);
+  };
+
+  const isRTL = locale === 'ar';
+
+  return (
+    <>
+      <header className='lg:hidden w-full flex sticky top-0 z-50'>
+        <nav className='w-full flex items-center justify-between px-3 md:px-6 bg-blue-600 border-b-blue-500 border-b-2 h-14 sm:h-16 text-white'>
+          <Link href={\`/\${currentLocale}\`} onClick={handleLinkClick} className='flex-shrink-0'>
+            <Logo className='w-10 h-10 sm:w-12' />
+          </Link>
+
+          <div className='flex items-center gap-2'>
+            <button
+              className='flex items-center gap-1 px-2 py-1 rounded bg-white/10 hover:bg-white/20 transition text-sm'
+              onClick={() =>
+                router.push(\`/\${otherLocale}\${basePath}\${queryString}\`)
+              }
+            >
+              {otherLocale === 'ar' ? '🇸🇦' : '🇬🇧'}
+            </button>
++
+            <button
+              className='p-2 rounded-full hover:bg-white/10 transition'
+              onClick={() => setMenuOpen(!menuOpen)}
+            >
+              {menuOpen ? <X className='w-5 h-5' /> : <MenuIcon className='w-5 h-5' />}
+            </button>
+          </div>
+        </nav>
+      </header>
+
+      {menuOpen && (
+        <div className='lg:hidden fixed inset-0 z-50 pt-16 bg-blue-600 bg-opacity-95 animate-in fade-in slide-in-from-top-8'>
+          <div className='flex flex-col h-full'>
+            <div className='flex-1 px-6 pb-6 overflow-y-auto'>
+              <ul className='space-y-4 text-white'>
+                {[
+                  { name: 'Home', path: '' },
+                ].map((item) => (
+                  <li key={item.path}>
+                    <Link
+                      href={\`/\${currentLocale}/\${item.path}\`}
+                      onClick={handleLinkClick}
+                      className={\`block py-3 text-lg font-semibold rounded-lg transition-colors \${currentSection === item.path
+                          ? 'bg-white/20 text-white'
+                          : 'hover:bg-white/10'
+                        }\`}
+                    >
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+
+              <div className='mt-8 pt-8 border-t border-white/20 space-y-4'>
+                <Button className='w-full bg-white text-blue-600 hover:bg-white/90 h-12 rounded-xl font-bold'>
+                  Get Started
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+export default MobileNavbar;`,
+
+  'components/shared/loading-ui.tsx': `'use client';
+
+import { cn } from '@/lib/utils';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { motion } from 'framer-motion';
+import Logo from '@/components/ui/logo';
+
+const loadingVariants = cva(
+  'flex items-center justify-center relative overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'min-h-[100dvh] w-full bg-background',
+        inline: 'h-full w-full py-12',
+        overlay: 'fixed inset-0 z-[100] bg-background/80 backdrop-blur-md',
+      },
+      size: {
+        sm: 'scale-75',
+        default: 'scale-100',
+        lg: 'scale-125',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+interface LoadingProps extends VariantProps<typeof loadingVariants> {
+  text?: string;
+  className?: string;
+  showDots?: boolean;
+}
+
+export function Loading({
+  variant,
+  size,
+  text = 'Loading',
+  className,
+  showDots = true
+}: LoadingProps) {
+  return (
+    <div
+      className={cn(loadingVariants({ variant, size }), className)}
+      role="status"
+      aria-live="polite"
+      aria-label={text}
+    >
+      {/* Dynamic Background Blobs */}
+      {variant === 'default' && (
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <motion.div
+            animate={{
+              scale: [1, 1.2, 1],
+              x: [0, 50, 0],
+              y: [0, 30, 0],
+            }}
+            transition={{
+              duration: 8,
+              repeat: Infinity,
+              ease: "easeInOut"
+            }}
+            className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500/5 rounded-full blur-[100px]"
+          />
+          <motion.div
+            animate={{
+              scale: [1, 1.1, 1],
+              x: [0, -30, 0],
+              y: [0, -50, 0],
+            }}
+            transition={{
+              duration: 10,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: 1
+            }}
+            className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-600/5 rounded-full blur-[100px]"
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col items-center gap-8 relative z-10">
+        {/* Modern Animated Logo Container */}
+        <div className="relative flex items-center justify-center">
+          {/* Outer Rotating Ring */}
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+            className="absolute w-24 h-24 rounded-full border-[3px] border-blue-600/10 border-t-blue-600"
+          />
+
+          {/* Inner Pulsing Circle */}
+          <motion.div
+            animate={{ scale: [0.9, 1.05, 0.9], opacity: [0.5, 0.8, 0.5] }}
+            transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+            className="absolute w-16 h-16 rounded-full bg-blue-600/10"
+          />
+
+          {/* Core Logo */}
+          <motion.div
+            initial={{ scale: 0.8, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className="relative z-20 p-4 bg-blue-600 rounded-2xl shadow-xl shadow-blue-600/20"
+          >
+            <Logo className="w-8 h-8 text-white" />
+          </motion.div>
+        </div>
+
+        {/* Text Area */}
+        {text && (
+          <div className="flex flex-col items-center gap-3">
+            <div className="flex items-center gap-2">
+              <motion.p
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="text-lg font-bold tracking-tight text-foreground"
+              >
+                {text}
+              </motion.p>
+              {showDots && (
+                <div className="flex gap-1.5 pt-1">
+                  {[0, 1, 2].map((i) => (
+                    <motion.span
+                      key={i}
+                      animate={{
+                        scale: [1, 1.5, 1],
+                        opacity: [0.3, 1, 0.3],
+                      }}
+                      transition={{
+                        duration: 1,
+                        repeat: Infinity,
+                        delay: i * 0.2,
+                        ease: "easeInOut",
+                      }}
+                      className="h-1.5 w-1.5 rounded-full bg-blue-600"
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4 }}
+              className="text-[11px] font-semibold text-muted-foreground/50 uppercase tracking-[0.3em]"
+            >
+              Building your experience
+            </motion.p>
+          </div>
+        )}
+      </div>
+
+      <span className="sr-only">Please wait while content is loading</span>
+    </div>
+  );
+}`,
+};