Official multi-language website for Beatra, a free Discord music bot with premium plans, commands, partners, and legal pages.
Website · Invite Bot · Support Server · Vote
This repository contains the marketing and product website for Beatra. The site is built with the Next.js App Router, Once UI System, dictionary-based internationalization, static generation, and a responsive layout for desktop and mobile.
The website includes:
- Home page with product highlights, usage-focused sections, and premium callouts
- Commands page for Beatra slash commands
- Premium page with Personal, Server Premium, and Custom Bot plan tabs
- Partners page for Beatra partner products
- Terms of Service and Privacy Policy pages
- Locale-aware routing under
/<locale> - Mobile header menu, language switcher, and live style customizer
| Area | Technology |
|---|---|
| Framework | Next.js 15 App Router |
| UI runtime | React 18 |
| Design system | Once UI System |
| Styling | Once UI tokens, Sass, and scoped custom CSS |
| Icons | Once UI icons plus react-icons |
| i18n | Custom dictionaries and middleware routing |
| Images | Static assets in public/img |
| Build | Static generation through next build |
- Seven languages included: English, Turkish, Spanish, Portuguese, French, German, and Russian.
- Locale routing:
/en,/tr,/es,/pt,/fr,/de, and/ruare generated at build time. - Automatic locale redirect:
/redirects to the best matching supported language using the visitor's browser language or saved locale cookie. - Premium plan tabs: Personal, Server Premium, and Custom Bot plans are translated and responsive.
- Responsive header: Desktop navigation, mobile menu, invite button, language selector, and style customizer.
- Live style customizer: Visitors can preview theme settings from the header.
- SEO-ready structure: Locale pages, metadata support, Open Graph image assets, favicon, and app icons.
- Production build friendly: Sass dependency warnings from Once UI are silenced in
next.config.js.
| Route | Description |
|---|---|
/<locale> |
Home page |
/<locale>/commands |
Command list |
/<locale>/premium |
Premium plans |
/<locale>/partners |
Partner products |
/<locale>/tos |
Terms of Service |
/<locale>/privacy |
Privacy Policy |
Example localized URLs:
https://beatra.app/enhttps://beatra.app/tr/premiumhttps://beatra.app/de/commands
- Node.js 18.18 or newer
- npm
git clone https://github.com/umutxyp/Discord-Bot-Website.git
cd Discord-Bot-Website
npm installnpm run devOpen http://localhost:3000. The middleware redirects / to a supported locale.
npm run build
npm run startThe production server runs at http://localhost:3000 by default.
.
├── public/
│ ├── favicon.ico
│ └── img/
│ ├── logo-192.png
│ ├── logo.png
│ ├── og-image.png
│ └── products/
│ ├── beatra.png
│ ├── codeshare.png
│ ├── mcstat.png
│ └── sylon.png
├── src/
│ ├── app/
│ │ └── [locale]/
│ │ ├── commands/page.jsx
│ │ ├── partners/page.jsx
│ │ ├── premium/page.jsx
│ │ ├── privacy/page.jsx
│ │ ├── tos/page.jsx
│ │ ├── layout.jsx
│ │ ├── not-found.jsx
│ │ └── page.jsx
│ ├── components/
│ │ ├── Footer.jsx
│ │ ├── Header.jsx
│ │ ├── LanguageSwitcher.jsx
│ │ ├── PremiumTabs.jsx
│ │ ├── Providers.jsx
│ │ └── StyleCustomizer.jsx
│ ├── i18n/
│ │ ├── config.js
│ │ ├── getDictionary.js
│ │ └── dictionaries/
│ ├── resources/
│ │ ├── constants.js
│ │ ├── custom.css
│ │ ├── icons.js
│ │ ├── once-ui.config.js
│ │ └── seo.js
│ └── middleware.js
├── next.config.js
├── package.json
└── README.md
Supported locale codes are defined in src/i18n/config.js:
export const locales = ["en", "tr", "es", "pt", "fr", "de", "ru"];
export const defaultLocale = "en";Translation files live in src/i18n/dictionaries. Each page reads copy from the active locale dictionary.
To add a new language:
- Copy
src/i18n/dictionaries/en.json. - Rename it to the new locale code, for example
it.json. - Translate every string in the new file.
- Add the locale code and display name to
src/i18n/config.js. - Register the dictionary loader in
src/i18n/getDictionary.js.
Main external links are stored in src/resources/constants.js:
- Discord invite URL
- Support server URL
- Premium URL
- Vote URL
- GitHub URL
- YouTube, X, and Instagram URLs
Theme defaults live in src/resources/once-ui.config.js. The global CSS overrides and responsive fixes live in src/resources/custom.css.
The header style customizer uses Once UI's StylePanel, so visitors can preview visual settings directly on the site.
Premium plan content is translated inside each dictionary under:
premium.categories
The plan tabs are rendered by src/components/PremiumTabs.jsx. Current categories are:
- Personal
- Server Premium
- Custom Bot
- Header navigation, mobile menu, language selector, invite button, and customizer are in
src/components/Header.jsx. - Footer brand text, social links, legal links, and site links are in
src/components/Footer.jsx.
Place public images under public/img. Product images are stored in public/img/products.
Recommended assets:
public/img/logo-192.pngpublic/img/logo.pngpublic/img/og-image.pngpublic/img/apple-touch-icon.pngpublic/favicon.ico
This is a standard Next.js app and can be deployed to Vercel, a Node.js host, or any platform that supports Next.js 15.
Typical Vercel settings:
| Setting | Value |
|---|---|
| Install command | npm install |
| Build command | npm run build |
| Output | Next.js default |
No environment variables are required for the current public website.
npm run dev # Start local development
npm run build # Create production build
npm run start # Serve production buildIssues and pull requests are welcome.
Before opening a pull request:
- Keep translations synchronized across all dictionary files.
- Make sure responsive layouts still work on mobile and desktop.
- Run a production build.
npm run buildThis project is licensed under the MIT License. See LICENSE for details.