------------- Theme & Style ------------- Use the Tailwind 'Stone' palette. Headings should be deep red and serif; body text sans-serif. Do not display any comments. Links: Bold font, dark blue color. Links must open in the current window. Screen width limited to 1366 pixels. Left and right gutters equal width. -------------------- GLOBAL CONFIGURATION -------------------- - BRANDING: SVG logo of "文" (2.5em, deep red) followed by "OpenLang.ai" in large bold text. Link both to "/". - SOURCE: Right-justified button with the text "SOURCE" (1rem). Link . - SLOGAN: "Open-source language-learning games" - MENU: Menu Item|Link Video Guides|/video Community|https://www.reddit.com/r/openlang/ FAQ|/FAQ ----------------- Header Components ----------------- Title: "OpenLang.ai". Favicon: A data URI containing the character "文" (deep red on white). Top Bar Smartphone: BRANDING and SOURCE + Hamburger Menu (on a single line) SLOGAN (centered. Use the arbitrary Tailwind class 'text-[3.8vw]' to force the text to scale exactly to the screen width on a single line). Desktop (strictly in this order): BRANDING, SLOGAN (left justified in container, serif italic deep red, bold 1.5rem), MENU, SOURCE ------------ Main Content (Two Column Layout) ------------ Column 1: Language Grid: Display reduced height buttons as cards (same color) in a 4-column grid (3 column on mobile and tablet). Format: -------------------------- Native Name (12em, arial, bold, deep red) English Name (9.5em, arial, black) ------------------------- Each card links to /LANGUAGE. For any Native Name longer than 12 characters, reduce the font size to 8.5em to ensure it fits inside the button without overflowing. Do not scale up Native Name. Reduce padding above and below text. "Language Chooser" (Do not display heading): Chinese, Spanish, French, German, Ukrainian, Portuguese, Korean, Vietnamese, Hindi, Persian, Arabic, Swahili. "More Languages" (Collapsible, Default Hidden): Azerbaijani, Belarusian, Bengali, Bulgarian, Burmese, Catalan, Czech, Danish, Dutch, Estonian, Georgian, Greek, Hebrew, Hungarian, Italian, Japanese, Lao, Latin, Latvian, Lithuanian, Navajo, Norwegian, Pashto, Polish, Punjabi, Romanian, Russian, Serbo-Croatian, Sindhi, Slovak, Somali, Swedish, Tagalog, Tamil, Telugu, Thai, Turkish, Urdu. Technology Stack: Create a table with three columns. Middle column: make it wider, with text at 9.5rem Product|How It's Used|Owner Products (use exact names as written): Gemini,Claude,JavaScript,React,Tailwind,PWA,Web Speech,Cloud Text-to-Speech Populate the second and third columns yourself. For "Owner", use the company or organization that controls the actual product, not the trademark. Link the Technology field to its homepage or to a site that describes the technology, with navy blue text. For Gemini, use this text for the "How It's Used" field: "Design and code generation for games". For "Sonnet", use this text: "Design and packaging of installable apps". For "Web Speech", use this text: "Browser-based Speech Synthesis". For "Cloud Text-to-Speech", use this text: "Ukrainian voice". -------- Column 2: -------- Features Block: Create a bullet list, using tight vertical spacing. Header: "Features" Bullet points: o Hundreds of free and open-source games. o Support for 50 languages. o Easy install on mobile. o Apps with no ads or in-app purchases. o Human-like speech for many popular languages. o Vibe code customized apps (instructions provided). "Open Source for Everyone" block with a light background (bg-white) and border. Include the following text and Use Cases: The Open Source movement was a revolution for programmers, allowing them to freely reuse existing tools and systems. With the advent of mass market AI, anyone can build with Open Source. Every page on this site has a "Source" button in the top corner. You can download the source prompt for any game, change it for your needs, and produce a fully-functional customized game. Create Use_Cases table with three columns: Use Case|Prompt|Game Link Philosophy Student Studying French||/French/Philsophy_Study Pupil in Ireland learning Irish Gaelic||/Irish/Pupil Virusoligist attending Chinese conference||/Chinese/Virusology Populate the "Prompt" field with a prompt to generate 100 words and short phrases that are appropriate for the use case. The "Game Link" field should have a button that says "Play" linked to the URL in the field. ------ Footer ------ Left: Title "About the Site Logo". Text: "The Chinese wén character (文) signifies literature, culture, or writing. It is part of the name of the Chinese language itself (中文).". Center: Find us on Reddit: Right: Copyright text in small print. Link for “Functional AI Inc”: https://functional.by Link for “MIT License”: https://opensource.org/licenses/MIT The text should appear exactly as below, with the above href link markup added as underlined link. Copyright (C) 2026 by Functional AI Inc. Licensed under the MIT License.