2) src/components/brand/LogoPreview.tsx (new file)

A tiny component that “Namelix-ifies” a name by previewing it in curated Google Fonts + color blocks.

// src/components/brand/LogoPreview.tsx
import React, { useEffect } from 'react';

type PreviewPalette = { bg: string; fg: string };

const PALETTES: PreviewPalette[] = [
  { bg: '#ffffff', fg: '#111827' },
  { bg: '#0f172a', fg: '#e2e8f0' },
  { bg: '#111827', fg: '#a7f3d0' },
  { bg: '#fde68a', fg: '#1f2937' },
  { bg: '#f1f5f9', fg: '#0f172a' },
];

const FONTS = [
  { family: 'Poppins', weight: 600 },
  { family: 'Montserrat', weight: 700 },
  { family: 'Playfair Display', weight: 600 },
  { family: 'Inter', weight: 800 },
  { family: 'Outfit', weight: 700 },
  { family: 'Raleway', weight: 700 },
  { family: 'Rubik', weight: 700 },
];

function loadGoogleFonts() {
  const existed = document.getElementById('ibrandbiz-google-fonts');
  if (existed) return;
  const link = document.createElement('link');
  link.id = 'ibrandbiz-google-fonts';
  link.rel = 'stylesheet';
  link.href =
    'https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Montserrat:wght@700&family=Outfit:wght@700&family=Poppins:wght@600&family=Playfair+Display:wght@600&family=Raleway:wght@700&family=Rubik:wght@700&display=swap';
  document.head.appendChild(link);
}

export function LogoPreview({ name }: { name: string }) {
  useEffect(() => loadGoogleFonts(), []);

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
      {FONTS.slice(0, 6).map((font, i) => {
        const pal = PALETTES[i % PALETTES.length];
        return (
          <div
            key={`${font.family}-${i}`}
            className="rounded-lg p-5 flex items-center justify-center"
            style={{ backgroundColor: pal.bg }}
          >
            <span
              style={{
                fontFamily: `'${font.family}', system-ui, sans-serif`,
                fontWeight: font.weight as any,
                color: pal.fg,
                letterSpacing: '0.3px',
                fontSize: '1.25rem',
              }}
            >
              {name}
            </span>
          </div>
        );
      })}
    </div>
  );
}
