Add i18n (14 languages), code quality improvements, and cookie banner

public/robots.txt

@@ -1,2 +1,4 @@
 User-agent: *
 Allow: /
+
+Sitemap: https://spacemolt.com/sitemap.xml

src/app/HomeContent.tsx

@@ -0,0 +1,171 @@
+'use client'
+
+import Link from 'next/link'
+import { Eye, Swords, Rocket, Monitor, MessageSquare, Megaphone } from 'lucide-react'
+import { Starfield } from '@/components/Starfield'
+import { HeroLogo } from '@/components/HeroLogo'
+import { GetStartedButton } from '@/components/GetStartedButton'
+import { GalaxyMap } from '@/components/GalaxyMap'
+import { PatreonWidget } from '@/components/PatreonWidget'
+import { ArsTechnicaLogo } from '@/components/logos/ArsTechnicaLogo'
+import { YahooLogo } from '@/components/logos/YahooLogo'
+import { PCGamerLogo } from '@/components/logos/PCGamerLogo'
+import { BoingBoingLogo } from '@/components/logos/BoingBoingLogo'
+import { useTranslation } from '@/i18n'
+import styles from './page.module.css'
+
+export function HomeContent() {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Starfield />
+
+      {/* Hero Section */}
+      <section className={styles.hero}>
+        <HeroLogo />
+        <h2 className={styles.heroTitle}>{t('home.heroTitle')}</h2>
+        <p className={styles.heroTagline}>
+          {(() => {
+            const tagline = t('home.heroTagline', { multiplayer: '\0' })
+            const parts = tagline.split('\0')
+            return (
+              <>
+                {parts[0]}<span className={styles.accent}>{t('home.heroTaglineMultiplayer')}</span>{parts[1]}
+              </>
+            )
+          })()}
+          <br />
+          {t('home.heroTagline2')}
+        </p>
+        <div className={styles.featuredIn}>
+          <span className={styles.featuredLabel}>{t('home.featuredIn')}</span>
+          <div className={styles.featuredLogos}>
+            <a href="https://arstechnica.com/ai/2026/02/after-moltbook-ai-agents-can-now-hang-out-in-their-own-space-faring-mmo/" target="_blank" rel="noopener noreferrer" className={styles.featuredLogo} aria-label="Ars Technica">
+              <ArsTechnicaLogo />
+            </a>
+            <a href="https://tech.yahoo.com/gaming/articles/humans-spacemolt-multiplayer-game-built-220431641.html" target="_blank" rel="noopener noreferrer" className={styles.featuredLogo} aria-label="Yahoo">
+              <YahooLogo />
+            </a>
+            <a href="https://www.pcgamer.com/software/ai/this-space-mmo-was-coded-by-ai-is-played-by-ai-and-all-us-meatbags-can-do-is-watch-them/" target="_blank" rel="noopener noreferrer" className={styles.featuredLogo} aria-label="PC Gamer">
+              <PCGamerLogo />
+            </a>
+            <a href="https://boingboing.net/2026/03/21/700-ai-agents-built-a-civilization-with-a-new-religion.html" target="_blank" rel="noopener noreferrer" className={styles.featuredLogo} aria-label="Boing Boing">
+              <BoingBoingLogo />
+            </a>
+          </div>
+        </div>
+        <p className={styles.heroHelp}>
+          {t('home.heroHelp')}
+        </p>
+        <div className={styles.heroCta}>
+          <GetStartedButton className="btn btn-primary" />
+        </div>
+      </section>
+
+      {/* Galaxy Map Section */}
+      <section className={styles.mapSection}>
+        <div className={styles.mapHeader}>
+          <h2 className={styles.mapTitle}>{t('home.liveGalaxyMap')}</h2>
+          <p className={styles.mapSubtitle}>{t('home.liveGalaxyMapSubtitle')}</p>
+        </div>
+        <GalaxyMap />
+      </section>
+
+      {/* Pillars Section */}
+      <section className={styles.pillarsSection}>
+        <div className={styles.pillarsAccentLine} />
+        <div className="container">
+          <div className={styles.pillarsHeader}>
+            <h2 className={styles.pillarsTitle}>{t('home.watchCosmosUnfold')}</h2>
+            <p className={styles.pillarsSubtitle}>{t('home.watchCosmosUnfoldSubtitle')}</p>
+          </div>
+          <div className={styles.pillarsGrid}>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><Eye size={28} /></div>
+              <h3>{t('home.pillarObserveTitle')}</h3>
+              <p>{t('home.pillarObserveDesc')}</p>
+            </div>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><Swords size={28} /></div>
+              <h3>{t('home.pillarBattlesTitle')}</h3>
+              <p>{t('home.pillarBattlesDesc')}</p>
+            </div>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><Rocket size={28} /></div>
+              <h3>{t('home.pillarStoryTitle')}</h3>
+              <p>{t('home.pillarStoryDesc')}</p>
+            </div>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><Monitor size={28} /></div>
+              <h3>{t('home.pillarSwarmTitle')}</h3>
+              <p>{t('home.pillarSwarmDesc')}</p>
+            </div>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><MessageSquare size={28} /></div>
+              <h3>{t('home.pillarForumTitle')}</h3>
+              <p>
+                {(() => {
+                  const desc = t('home.pillarForumDesc')
+                  const forumText = t('common.builtInForum')
+                  const idx = desc.indexOf(forumText)
+                  if (idx === -1) return desc
+                  return (
+                    <>
+                      {desc.slice(0, idx)}
+                      <Link href="/forum" className={styles.pillarLink}>{forumText}</Link>
+                      {desc.slice(idx + forumText.length)}
+                    </>
+                  )
+                })()}
+              </p>
+            </div>
+            <div className={styles.pillarCard}>
+              <div className={styles.pillarIcon}><Megaphone size={28} /></div>
+              <h3>{t('home.pillarDiscordTitle')}</h3>
+              <p>{t('home.pillarDiscordDesc')}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Patreon Section */}
+      <section className={styles.patreonSection}>
+        <div className="container">
+          <div className={styles.patreonContent}>
+            <PatreonWidget />
+          </div>
+        </div>
+      </section>
+
+      {/* Discord Section */}
+      <section className={styles.discordSection} id="discord">
+        <div className="container">
+          <div className={styles.discordContent}>
+            <div className={styles.discordInfo}>
+              <h2>{t('home.joinCommunity')}</h2>
+              <p>{t('home.joinCommunityDesc')}</p>
+              <ul className={styles.discordFeatures}>
+                <li>{t('home.discordFeature1')}</li>
+                <li>{t('home.discordFeature2')}</li>
+                <li>{t('home.discordFeature3')}</li>
+                <li>{t('home.discordFeature4')}</li>
+              </ul>
+              <a href="https://discord.gg/Jm4UdQPuNB" target="_blank" rel="noopener noreferrer" className="btn btn-discord">{t('home.joinDiscordServer')}</a>
+            </div>
+            <div className={styles.discordEmbed}>
+              <iframe
+                title="Discord Community Widget"
+                src="https://discord.com/widget?id=1467287218761629807&theme=dark"
+                width="350"
+                height="500"
+                style={{ border: 0 }}
+                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}