feat: Add Google Translate widget for 133-language support

[nichechristie]

Summary

Proposing the addition of a Google Translate widget to make base.org accessible to a global audience in 133 languages. The widget would appear as a slim banner at the top of every page, allowing users to translate the site into their preferred language.

Motivation

Base is a global platform, and many users are non-English speakers. Adding translation support lowers the barrier to entry for international builders, creators, and users who want to participate in the Base ecosystem.

Currently:

• next.config.js already allows https://translate.googleapis.com in the CSP connect-src directive
• react-intl is installed as a dependency but not actively used
• The i18n config only supports en

A lightweight Google Translate integration would provide immediate multilingual access without requiring a full i18n implementation with manually maintained translation files.

Proposed Implementation

1. New component: GoogleTranslate — a 'use client' React component that dynamically loads Google's Translate Element API (translate.google.com/translate_a/element.js)
2. Placement: Full-width banner at the top of the (base-org) layout, above the sidebar/content grid
3. Styling: Minimal, matches Base's design system (dark/light mode support via Tailwind, clean typography)
4. CSP updates: Add translate.google.com and translate.googleapis.com to default-src and img-src directives

Languages Supported

Google Translate natively supports 133 languages including: Afrikaans, Albanian, Amharic, Arabic, Armenian, Bengali, Chinese (Simplified & Traditional), Dutch, French, German, Hindi, Japanese, Korean, Portuguese, Russian, Spanish, Swahili, and many more.

Design Considerations

• The widget is lightweight (~50KB) and loads asynchronously — no impact on initial page load
• Falls back gracefully if the script fails to load
• Respects the site's existing dark/light mode
• Positioned with sticky so it remains accessible while scrolling
• Can be dismissed/collapsed by users

Prior Art

I have implemented this same feature in my project Luxbin-Quantum-internet, and am happy to contribute a PR with the implementation.

Checklist

• Google Translate widget component
• Integration into base-org layout
• CSP header updates
• Dark mode support
• Responsive design (works on mobile + desktop)