npm - metabinaries - Versions diffs - 1.3.3 - Mend

metabinaries 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +32 -0
package/src/constants.js +94 -0
package/src/index.js +219 -0
package/src/templates/app-clean.js +1066 -0
package/src/templates/configs.js +391 -0
package/src/templates/core-clean.js +269 -0
package/src/templates/feature-ai-chat.js +1786 -0
package/src/templates/folder-structure.js +29 -0
package/src/templates/layout-clean.js +788 -0
package/src/templates/misc.js +275 -0
package/src/templates/packages.js +74 -0
package/src/templates/ui-2.js +585 -0
package/src/templates/ui-3.js +606 -0
package/src/templates/ui-4.js +1025 -0
package/src/templates/ui.js +777 -0
package/src/utils.js +38 -0

package/src/templates/app-clean.js ADDED Viewed

@@ -0,0 +1,1066 @@
+// app-clean.js - FIXED VERSION with NO syntax errors
+export const appTemplates = {
+  'app/layout.tsx': `import './globals.css';
+import { Providers } from '@/lib/providers';
+import type { Viewport } from 'next';
+import { Cairo } from 'next/font/google';
+const cairo = Cairo({
+  subsets: ['arabic', 'latin'],
+  display: 'swap',
+  variable: '--font-cairo',
+});
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
+  ],
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang='en' suppressHydrationWarning className={cairo.variable}>
+      <body className={\`\${cairo.className} antialiased\`}>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}`,
+  'app/not-found.tsx': `'use client';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Home, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+export default function NotFound() {
+  const router = useRouter();
+  const handleGoBack = useCallback(() => {
+    router.back();
+  }, [router]);
+  const floatingElements = useMemo(() =>
+    Array.from({ length: 6 }, (_, i) => ({
+      id: i,
+      x: \`\${Math.random() * 100}%\`,
+      y: \`\${Math.random() * 100}%\`,
+      duration: 3 + Math.random() * 2,
+      delay: Math.random() * 2
+    })), []
+  );
+  return (
+    <div
+      className='relative min-h-screen w-full flex items-center justify-center overflow-hidden bg-white dark:bg-slate-950 px-6'
+      role="main"
+      aria-labelledby="error-heading"
+    >
+      <div className='absolute inset-0 overflow-hidden pointer-events-none' aria-hidden="true">
+        <div className='absolute top-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-blue-500/10 dark:bg-blue-500/20 blur-[100px] animate-pulse' />
+        <div className='absolute bottom-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-indigo-500/10 dark:bg-indigo-500/20 blur-[100px] animate-pulse' />
+      </div>
+      <div className='relative z-10 max-w-2xl w-full text-center'>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+          className='relative'
+        >
+          <h1
+            className='text-[12rem] md:text-[16rem] font-black leading-none tracking-tighter text-slate-100 dark:text-slate-900 select-none'
+            aria-hidden="true"
+          >
+            404
+          </h1>
+          <motion.div
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.5, duration: 0.5 }}
+            className='absolute inset-0 flex items-center justify-center'
+          >
+            <h2
+              id="error-heading"
+              className='text-4xl md:text-6xl font-bold bg-gradient-to-b from-slate-900 to-slate-600 dark:from-white dark:to-slate-400 bg-clip-text text-transparent'
+            >
+              Lost in Space
+            </h2>
+          </motion.div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.7, duration: 0.5 }}
+          className='mt-8 space-y-6'
+        >
+          <p className='text-lg md:text-xl text-slate-500 dark:text-slate-400 max-w-md mx-auto'>
+            The page you are looking for doesn&apos;t exist or has been moved to another quadrant.
+          </p>
+          <div className='flex flex-wrap items-center justify-center gap-4 pt-4'>
+            <Button
+              asChild
+              size='lg'
+              className='h-12 px-6 rounded-full bg-blue-600 hover:bg-blue-700 text-white font-semibold shadow-lg shadow-blue-500/25 transition-all'
+            >
+              <Link href='/en' prefetch={true}>
+                <Home className='mr-2 w-4 h-4' aria-hidden="true" />
+                Back Home
+              </Link>
+            </Button>
+            <Button
+              onClick={handleGoBack}
+              variant='outline'
+              size='lg'
+              className='h-12 px-6 rounded-full border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 font-semibold hover:bg-slate-50 hover:text-slate-900 dark:hover:bg-slate-900 dark:hover:text-white transition-all'
+            >
+              <ArrowLeft className='mr-2 w-4 h-4' aria-hidden="true" />
+              Go Back
+            </Button>
+          </div>
+        </motion.div>
+        <div className='absolute -z-10 top-0 left-0 w-full h-full pointer-events-none' aria-hidden="true">
+          {floatingElements.map((el) => (
+            <motion.div
+              key={el.id}
+              className='absolute w-2 h-2 bg-blue-500/30 rounded-full'
+              initial={{
+                x: el.x,
+                y: el.y,
+                opacity: 0
+              }}
+              animate={{
+                y: [null, '-20px', '20px'],
+                opacity: [0, 1, 0]
+              }}
+              transition={{
+                duration: el.duration,
+                repeat: Infinity,
+                delay: el.delay,
+                ease: "easeInOut"
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}`,
+  'app/robots.ts': `import { MetadataRoute } from 'next';
+/**
+ * Robots Configuration - Production Ready
+ *
+ * Advanced configuration for proper indexing while protecting
+ * sensitive routes and managing crawler behavior.
+ */
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://metabinaries.com';
+const IS_PRODUCTION =
+  process.env.NODE_ENV === 'production' &&
+  (process.env.VERCEL_ENV === 'production' || !process.env.VERCEL_ENV);
+export default function robots(): MetadataRoute.Robots {
+  // Block all indexing in non-production environments
+  if (!IS_PRODUCTION) {
+    return {
+      rules: {
+        userAgent: '*',
+        disallow: '/',
+      },
+      sitemap: \`\${APP_URL}/sitemap.xml\`,
+    };
+  }
+  return {
+    rules: [
+      // Main crawlers configuration
+      {
+        userAgent: '*',
+        allow: [
+          '/',
+          '/api/og',      // Allow OG image generation for social sharing
+          '/public/',     // Allow public assets if needed
+        ],
+        disallow: [
+          // API & System Routes
+          '/api/',
+          '/_next/',
+          '/static/',
+          // Admin & Private Routes
+          '/admin*',
+          '/dashboard*',
+          '/account*',
+          // Dynamic & Utility Routes
+          '/*?*',         // URLs with query parameters
+          '/*/draft',     // Draft content
+          '/preview*',    // Preview pages
+          '/**/not-found',
+          // File Types
+          '/*.json',      // JSON files
+          '/*.xml',       // XML files (except sitemap)
+          '/*.env',       // Environment files
+        ],
+      },
+      // AI Crawlers Management
+      {
+        userAgent: [
+          'GPTBot',         // OpenAI
+          'ChatGPT-User',   // ChatGPT Browse
+          'CCBot',          // Common Crawl
+          'anthropic-ai',   // Anthropic
+          'Claude-Web',     // Claude
+          'Google-Extended',// Google AI (Bard)
+        ],
+        disallow: '/',
+      },
+      // Aggressive Scrapers
+      {
+        userAgent: [
+          'SemrushBot',
+          'AhrefsBot',
+          'DotBot',
+        ],
+        crawlDelay: 10,
+        disallow: '/api/',
+      },
+    ],
+    sitemap: \`\${APP_URL}/sitemap.xml\`,
+    host: APP_URL,
+  };
+}`,
+  'app/[locale]/layout.tsx': (projectName, options = {}) => {
+    const { includeAIChat = false } = options;
+    return `import type { Metadata } from 'next';
+import { NextIntlClientProvider } from 'next-intl';
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale
+} from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { routing } from '@/i18n/routing';
+import { Footer } from '@/components/layout/Footer';
+import { Header } from '@/components/layout/Header';
+${includeAIChat ? "import { AIChat } from '@/components/layout/AIChat';" : ""}
+type Locale = (typeof routing.locales)[number];
+function isValidLocale(locale: string): locale is Locale {
+  return routing.locales.includes(locale as Locale);
+}
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  if (!isValidLocale(locale)) {
+    return {};
+  }
+  const t = await getTranslations({ locale, namespace: 'Metadata' });
+  return {
+    title: {
+      default: t('title'),
+      template: \`%s | \${t('title')}\`,
+    },
+    description: t('description'),
+    keywords: t('keywords').split(',').map(k => k.trim()),
+    authors: [{ name: 'MetaBinaries' }],
+    creator: 'MetaBinaries',
+    metadataBase: new URL(
+      process.env.NEXT_PUBLIC_APP_URL || 'https://metabinaries.com'
+    ),
+    alternates: {
+      canonical: \`/\${locale}\`,
+      languages: {
+        'en': '/en',
+        'ar': '/ar',
+        'x-default': '/en',
+      },
+    },
+    openGraph: {
+      type: 'website',
+      locale: locale === 'ar' ? 'ar_EG' : 'en_US',
+      alternateLocale: locale === 'ar' ? 'en_US' : 'ar_EG',
+      url: \`/\${locale}\`,
+      title: t('title'),
+      description: t('description'),
+      siteName: t('siteName'),
+      images: [
+        {
+          url: \`/og-\${locale}.jpg\`,
+          width: 1200,
+          height: 630,
+          alt: t('title'),
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: t('title'),
+      description: t('description'),
+      images: [\`/og-\${locale}.jpg\`],
+      creator: '@metabinaries',
+    },
+    robots: {
+      index: true,
+      follow: true,
+    },
+  };
+}
+export default async function LocaleLayout({
+  children,
+  params,
+}: Readonly<{
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}>) {
+  const { locale } = await params;
+  if (!isValidLocale(locale)) {
+    notFound();
+  }
+  setRequestLocale(locale);
+  const messages = await getMessages({ locale });
+  const isRTL = locale === 'ar';
+  return (
+    <NextIntlClientProvider
+      messages={messages}
+      locale={locale}
+      timeZone="Africa/Cairo"
+    >
+      <div
+        dir={isRTL ? 'rtl' : 'ltr'}
+        className="flex min-h-screen flex-col"
+      >
+        <Header />
+        <main className="flex-1">
+          {children}
+        </main>
+        <Footer />
+        ${includeAIChat ? "<AIChat />" : ""}
+      </div>
+    </NextIntlClientProvider>
+  );
+}`;
+  },
+  'app/[locale]/sitemap.ts': `import { MetadataRoute } from 'next';
+/**
+ * Sitemap Generator - Production Ready
+ *
+ * This advanced sitemap configuration implements SEO best practices for
+ * multilingual Next.js applications, including hreflang alternates.
+ */
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://metabinaries.com';
+const LOCALES = ['en', 'ar'] as const;
+type Locale = (typeof LOCALES)[number];
+type ChangeFrequency = 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
+interface RouteConfig {
+  path: string;
+  changeFrequency: ChangeFrequency;
+  priority: number;
+}
+const STATIC_ROUTES: RouteConfig[] = [
+  { path: '', changeFrequency: 'daily', priority: 1.0 },
+  { path: '/features', changeFrequency: 'weekly', priority: 0.8 },
+  { path: '/about', changeFrequency: 'monthly', priority: 0.8 },
+  { path: '/contact', changeFrequency: 'monthly', priority: 0.7 },
+  { path: '/blog', changeFrequency: 'daily', priority: 0.9 },
+  { path: '/privacy', changeFrequency: 'yearly', priority: 0.3 },
+  { path: '/terms', changeFrequency: 'yearly', priority: 0.3 },
+];
+export default function sitemap(): MetadataRoute.Sitemap {
+  return generateStaticEntries();
+}
+function generateStaticEntries(): MetadataRoute.Sitemap {
+  return STATIC_ROUTES.flatMap((route) =>
+    LOCALES.map((locale) => ({
+      url: \`\${APP_URL}/\${locale}\${route.path}\`,
+      lastModified: new Date(),
+      changeFrequency: route.changeFrequency,
+      priority: route.priority,
+      alternates: {
+        languages: Object.fromEntries(
+          LOCALES.map((l) => [l, \`\${APP_URL}/\${l}\${route.path}\`])
+        ),
+      },
+    }))
+  );
+}`,
+  'app/[locale]/loading.tsx': `import { Loading } from '@/components/shared/loading-ui';
+export default function LoadingPage() {
+  return <Loading />;
+}`,
+  'app/[locale]/error.tsx': `'use client';
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { AlertCircle, RefreshCw, Home } from 'lucide-react';
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+  return (
+    <div
+      className="flex min-h-[100dvh] w-full flex-col items-center justify-center bg-background p-6"
+      role="alert"
+      aria-live="assertive"
+    >
+      <div className="flex flex-col items-center gap-6 max-w-md text-center">
+        <div className="relative">
+          <div className="absolute inset-0 rounded-full bg-destructive/20 animate-ping" />
+          <div className="relative flex h-20 w-20 items-center justify-center rounded-full bg-destructive/10 border border-destructive/20">
+            <AlertCircle className="h-10 w-10 text-destructive" aria-hidden="true" />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <h2 className="text-2xl font-bold tracking-tight text-foreground">
+            Something went wrong!
+          </h2>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            An unexpected error occurred. Please try again or return to the home page.
+          </p>
+        </div>
+        {error.digest && (
+          <p className="text-xs text-muted-foreground/60 font-mono bg-muted px-3 py-1.5 rounded-md">
+            Error ID: {error.digest}
+          </p>
+        )}
+        <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+          <Button
+            onClick={() => reset()}
+            variant="default"
+            className="gap-2"
+          >
+            <RefreshCw className="h-4 w-4" aria-hidden="true" />
+            Try again
+          </Button>
+          <Button
+            onClick={() => (window.location.href = '/')}
+            variant="outline"
+            className="gap-2"
+          >
+            <Home className="h-4 w-4" aria-hidden="true" />
+            Go Home
+          </Button>
+        </div>
+        <span className="sr-only">
+          An error has occurred. You can try again or go back to the home page.
+        </span>
+      </div>
+    </div>
+  );
+}`,
+  'app/[locale]/page.tsx': `'use client';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Shield, Globe, Zap, ArrowRight, Sparkles } from 'lucide-react';
+import Link from 'next/link';
+export default function HomePage() {
+  return (
+    <div className='relative min-h-screen overflow-hidden bg-white dark:bg-slate-950 font-sans selection:bg-blue-500/30'>
+      <div className='fixed inset-0 overflow-hidden pointer-events-none'>
+        <div className='absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-600/5 dark:bg-blue-600/10 blur-[120px]' />
+        <div className='absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-indigo-600/5 dark:bg-indigo-600/10 blur-[120px]' />
+      </div>
+      <div className='relative z-10 container mx-auto px-6 py-24 md:py-32 flex flex-col items-center text-center'>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className='mb-8'
+        >
+          <Badge
+            variant='outline'
+            className='py-1.5 px-4 border-blue-100 dark:border-blue-900 bg-blue-50/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 backdrop-blur-sm shadow-sm'
+          >
+            <Sparkles className='w-3.5 h-3.5 mr-2' />
+            Release v1.0 is here
+          </Badge>
+        </motion.div>
+        <motion.h1
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.1 }}
+          className='max-w-4xl text-5xl md:text-8xl font-black tracking-tight text-slate-900 dark:text-white mb-8'
+        >
+          Build something <br />
+          <span className='bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600 bg-clip-text text-transparent'>
+            Extraordinary
+          </span>
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.2 }}
+          className='max-w-2xl text-lg md:text-xl text-slate-500 dark:text-slate-400 mb-12 leading-relaxed'
+        >
+          The ultimate Next.js starter kit for developers who care about aesthetics, performance, and scalability. Start your journey today.
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.3 }}
+          className='flex flex-wrap items-center justify-center gap-4'
+        >
+          <Button asChild size='lg' className='h-14 px-8 rounded-full bg-blue-600 hover:bg-blue-700 text-white text-lg font-semibold shadow-xl shadow-blue-500/25'>
+            <Link href='#features'>
+              Get Started <ArrowRight className='ml-2 w-5 h-5' />
+            </Link>
+          </Button>
+          <Button asChild variant='outline' size='lg' className='h-14 px-8 rounded-full border-slate-200 dark:border-slate-800 text-lg font-semibold hover:bg-slate-50 dark:hover:bg-slate-900'>
+            <a href='https://nextjs.org/docs' target='_blank' rel='noopener noreferrer'>Documentation</a>
+          </Button>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          className='grid md:grid-cols-3 gap-6 mt-32 w-full max-w-5xl'
+          id='features'
+        >
+          {[
+            { icon: <Zap className='text-yellow-500' />, title: 'Incredible Speed', desc: 'Optimized for Core Web Vitals and lightning-fast LCP.' },
+            { icon: <Globe className='text-blue-500' />, title: 'I18n Built-in', desc: 'Seamless English and Arabic support out of the box.' },
+            { icon: <Shield className='text-green-500' />, title: 'Enterprise Ready', desc: 'Scalable architecture using modern React patterns.' }
+          ].map((f, i) => (
+            <div key={i} className='p-8 rounded-3xl border border-slate-100 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm hover:border-blue-500/50 transition-all group'>
+              <div className='w-12 h-12 rounded-2xl bg-white dark:bg-slate-800 shadow-sm flex items-center justify-center mb-6 group-hover:scale-110 transition-transform'>
+                {f.icon}
+              </div>
+              <h3 className='text-xl font-bold mb-3 text-slate-900 dark:text-white'>{f.title}</h3>
+              <p className='text-slate-500 dark:text-slate-400 text-sm leading-relaxed'>{f.desc}</p>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}`,
+  'app/globals.css': `/**
+ * Global Styles - Customization Guide
+ *
+ * 🎨 WHAT TO CUSTOMIZE:
+ *
+ * 1. ✅ Colors (Primary, Secondary, etc.)
+ * 2. ✅ Border Radius
+ * 3. ✅ Typography (Font sizes, weights)
+ * 4. ⚠️ Keep everything else as-is
+ */
+@import "tailwindcss";
+/* ========================================
+   🎨 CUSTOMIZATION SECTION
+   Change these values for your brand
+   ======================================== */
+@theme {
+  /*
+    ⚠️ DON'T TOUCH - These map to CSS variables
+    Only change the :root values below
+  */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  /*
+    ✅ CUSTOMIZE - Border Radius
+    Change this to match your design style
+  */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  /* ⚠️ DON'T TOUCH - Animation definitions */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes slide-in-from-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+  @keyframes slide-in-from-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+}
+/* ========================================
+   ✅ CUSTOMIZE THESE VALUES
+   ======================================== */
+@layer base {
+  /*
+    🎨 LIGHT MODE COLORS
+    Change these HSL values to match your brand
+    Format: HUE SATURATION LIGHTNESS
+    Example: 221.2 83.2% 53.3%
+    🔗 Use this tool: https://hslpicker.com
+  */
+  :root {
+    /* Background Colors */
+    --background: 0 0% 100%;           /* ✅ White - Change for different bg */
+    --foreground: 222.2 84% 4.9%;      /* ✅ Near black - Text color */
+    /* Card Colors */
+    --card: 0 0% 100%;                 /* ✅ White cards */
+    --card-foreground: 222.2 84% 4.9%; /* ✅ Card text color */
+    /* Popover Colors */
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    /* 🎨 PRIMARY COLOR - Your Brand Color */
+    --primary: 221.2 83.2% 53.3%;      /* ✅ Blue - CHANGE THIS */
+    --primary-foreground: 210 40% 98%; /* ✅ White text on primary */
+    /* Examples for different brands:
+       Red:    0 84% 60%
+       Green:  142 76% 36%
+       Purple: 262 83% 58%
+       Orange: 25 95% 53%
+    */
+    /* Secondary Color */
+    --secondary: 210 40% 96.1%;        /* ✅ Light gray */
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    /* Muted (Subtle backgrounds) */
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    /* Accent */
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    /* Destructive (Error/Delete) */
+    --destructive: 0 84.2% 60.2%;      /* ⚠️ Red - Usually keep as-is */
+    --destructive-foreground: 210 40% 98%;
+    /* Border & Input */
+    --border: 214.3 31.8% 91.4%;       /* ✅ Light gray borders */
+    --input: 214.3 31.8% 91.4%;        /* ✅ Input borders */
+    --ring: 221.2 83.2% 53.3%;         /* ✅ Focus ring (match primary) */
+    /* 🎨 BORDER RADIUS - Your Design Style */
+    --radius: 0.5rem;  /* ✅ CHANGE THIS
+                          0rem = Sharp (No radius)
+                          0.25rem = Subtle (4px)
+                          0.5rem = Moderate (8px) - Default
+                          0.75rem = Rounded (12px)
+                          1rem = Very Rounded (16px)
+                          9999px = Pills/Fully rounded
+                       */
+  }
+  /*
+    🌙 DARK MODE COLORS
+    Change these if you want a custom dark theme
+  */
+  .dark {
+    --background: 222.2 84% 4.9%;      /* ✅ Dark blue-gray */
+    --foreground: 210 40% 98%;         /* ✅ Near white */
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    /* 🎨 PRIMARY COLOR - Usually brighter in dark mode */
+    --primary: 217.2 91.2% 59.8%;      /* ✅ Lighter blue */
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;      /* ⚠️ Darker red for dark mode */
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;       /* ✅ Dark borders */
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;           /* ✅ Focus ring */
+  }
+  /* ⚠️ DON'T TOUCH - Core resets */
+  * {
+    border-color: hsl(var(--border));
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  }
+  [dir="rtl"] {
+    font-feature-settings: "ss01" 1;
+  }
+}
+/* ========================================
+   ✅ OPTIONAL: CUSTOMIZE TYPOGRAPHY
+   ======================================== */
+@layer base {
+  /*
+    🎨 CUSTOMIZE - Heading sizes
+    Change these based on your design system
+  */
+  h1 {
+    font-size: 2.25rem; /* ✅ 36px - Change if needed */
+    line-height: 2.5rem;
+    font-weight: 700;   /* ✅ Bold - Change (300-900) */
+  }
+  h2 {
+    font-size: 1.875rem; /* ✅ 30px */
+    line-height: 2.25rem;
+    font-weight: 600;
+  }
+  h3 {
+    font-size: 1.5rem; /* ✅ 24px */
+    line-height: 2rem;
+    font-weight: 600;
+  }
+  h4 {
+    font-size: 1.25rem; /* ✅ 20px */
+    line-height: 1.75rem;
+    font-weight: 600;
+  }
+  /*
+    🎨 CUSTOMIZE - Paragraph spacing
+  */
+  p {
+    line-height: 1.7; /* ✅ Change for tighter/looser text */
+  }
+  /*
+    🎨 CUSTOMIZE - Link styles
+  */
+  a {
+    text-decoration: none;
+    transition: color 0.15s ease-in-out;
+  }
+  a:hover {
+    color: hsl(var(--primary)); /* ✅ Links turn primary color on hover */
+  }
+  /* ⚠️ DON'T TOUCH - Accessibility */
+  *:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+  *:focus:not(:focus-visible) {
+    outline: none;
+  }
+}
+/* ========================================
+   ✅ OPTIONAL: CUSTOMIZE SCROLLBAR
+   ======================================== */
+::-webkit-scrollbar {
+  width: 10px;        /* ✅ Change scrollbar width (8px-14px) */
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent; /* ✅ Or use a color */
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.2);
+  border-radius: 10px;
+  border: 2px solid hsl(var(--background));
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.3); /* ✅ Darker on hover */
+}
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
+}
+/* ========================================
+   ✅ OPTIONAL: CUSTOMIZE SELECTION
+   ======================================== */
+::selection {
+  background-color: hsl(var(--primary) / 0.2); /* ✅ Selection highlight */
+  color: hsl(var(--foreground));
+}
+::-moz-selection {
+  background-color: hsl(var(--primary) / 0.2);
+  color: hsl(var(--foreground));
+}
+/* ========================================
+   ⚠️ DON'T TOUCH - Utility Classes
+   ======================================== */
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  [dir="rtl"] .rtl\:rotate-180 {
+    transform: rotate(180deg);
+  }
+  .animation-delay-200 {
+    animation-delay: 200ms;
+  }
+  .animation-delay-400 {
+    animation-delay: 400ms;
+  }
+  .animation-delay-600 {
+    animation-delay: 600ms;
+  }
+}
+/* ========================================
+   ⚠️ DON'T TOUCH - Accessibility
+   ======================================== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.skip-to-content {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 9999;
+  padding: 1rem 2rem;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  border: 2px solid hsl(var(--border));
+  border-radius: var(--radius);
+  transition: top 0.3s ease-in-out;
+}
+.skip-to-content:focus {
+  top: 1rem;
+}
+/* ========================================
+   ⚠️ DON'T TOUCH - Print Styles
+   ======================================== */
+@media print {
+  *, *::before, *::after {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a, a:visited {
+    text-decoration: underline;
+  }
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+  p, h2, h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+  }
+}
+/* ========================================
+   ⚠️ DON'T TOUCH - Performance
+   ======================================== */
+.will-change-transform {
+  will-change: transform;
+}
+.will-change-opacity {
+  will-change: opacity;
+}
+img, video {
+  height: auto;
+  max-width: 100%;
+}
+img[loading="lazy"] {
+  min-height: 100px;
+}
+/* ========================================
+   ✅ ADD YOUR CUSTOM STYLES HERE
+   ======================================== */
+/*
+  Example: Custom button styles
+  .btn-custom {
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+  }
+*/`,
+};