• Support

    • Branding & Design

    Customize colors, fonts, and visual identity to match your brand.

    Brand Colors

    Update your brand colors in app/globals.css

    --color-brand-primary: #06B6D4; /* Your primary color */
    --color-brand-accent: #14B8A6; /* Your accent color */
    Typography

    Change fonts by updating the Google Fonts import and CSS variables:

    --font-sans: 'Inter', sans-serif;
    --font-display: 'Poppins', sans-serif;
    Logo & Assets

    Replace placeholder assets with your own:

    • • app/favicon.ico - Browser favicon
    • • public/icon-192x192.png - PWA icon (192x192)
    • • public/icon-512x512.png - PWA icon (512x512)
    • • public/og-image.png - Social sharing image
    • • Update logo in landing page components

    Generate all favicon formats:

    Use this tool to generate all required icon sizes from a single image:

    → Real Favicon Generator
    Icon & Asset Optimization

    Optimize icons and assets for better performance and smaller bundle sizes.

    Lucide Icons

    The boilerplate uses lucide-react for icons - only imports what you use:

    import { Check, X, Loader2 } from 'lucide-react';

<Check className="h-4 w-4" />  // Only imports needed icons

    Browse all icons at lucide.dev

    Code Splitting

    Lazy load heavy components to improve initial page load:

    import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>
});

    Performance Tips

    • • Icons: Only import icons you actually use
    • • Images: Use Next.js Image component for optimization
    • • Components: Lazy load heavy components with dynamic imports
    • • Bundle: Check bundle size with npm run build
    Dark Mode

    The boilerplate uses a dark theme by default. Customize the color palette in globals.css to adjust the dark mode appearance.