Pages and Features

Pages and Features

This page describes everything the website shows: each route, each section, the shared header and footer, and the content that is built into the code (commands, premium plans, partners).

---

Routes

All pages live under a language prefix. <locale> is one of en, tr, es, pt, fr, de, ru.

Route	File	What it shows
/<locale>	src/app/[locale]/page.jsx	Home page
/<locale>/commands	src/app/[locale]/commands/page.jsx	Command list
/<locale>/premium	src/app/[locale]/premium/page.jsx	Premium plans
/<locale>/partners	src/app/[locale]/partners/page.jsx	Partner products
/<locale>/tos	src/app/[locale]/tos/page.jsx	Terms of Service
/<locale>/privacy	src/app/[locale]/privacy/page.jsx	Privacy Policy
(not found)	src/app/[locale]/not-found.jsx	Localized not-found (404) page for the [locale] segment (see 404 page for when it is used)
/ or a path without a language	src/middleware.js	Redirect to the best language, for example /premium → /tr/premium

Examples: https://beatra.app/en, https://beatra.app/tr/premium, https://beatra.app/de/commands.

All six routes are pre-rendered for every language at build time, because layout.jsx exports generateStaticParams() that returns one entry per locale.

---

Shared layout

Every page is wrapped by src/app/[locale]/layout.jsx, which:

1. loads the dictionary for the current language with getDictionary(locale),
2. sets the page metadata (see Configuration),
3. sets <html lang="..."> to the current language,
4. applies the Once UI theme (ThemeInit plus Providers),
5. renders the Header, the page, and the Footer.

Header (src/components/Header.jsx)

Element	Desktop	Small screens
Logo + "Beatra"	Links to /<locale>	Same
Navigation	Home, Commands, Premium, Partners, Support	Hidden; moved into the menu
Active link	Underlined when the path equals the link exactly	Highlighted toggle button
Customize (sliders icon)	Opens the style customizer	Same
Language button	Dropdown with all languages	Inside the menu
Invite button	Links to INVITE_URL	Inside the menu
Menu button	Hidden	Opens a full-screen panel; it closes automatically when the route changes

The header is sticky (it stays at the top while you scroll) and has a blurred background.

Language switcher (src/components/LanguageSwitcher.jsx)

• Shows the current language code (for example EN) with a dropdown of all names from localeNames.
• Choosing a language saves the locale cookie for one year and replaces the first part of the URL, so /en/premium becomes /de/premium.
• Closes when you click outside it or press Esc.

Style customizer (src/components/StyleCustomizer.jsx)

• The sliders button opens a centered modal titled with the dictionary's nav.customize text ("Customize" in English).
• Inside is Once UI's StylePanel, which lets visitors preview theme, colors and other style settings live.
• While open, page scrolling is locked. Esc or the close button closes it.

Footer (src/components/Footer.jsx)

Part	Content
Brand	Logo, "Beatra", and footer.description
Social icons	Discord, GitHub, YouTube, X, Instagram (from constants.js)
Bot column	Invite Bot, Vote Bot, Support Server
Site column	Commands, Premium, Partners, GitHub
Legal column	Terms of Service, Privacy Policy
Bottom row	© <year> Beatra (links to https://beatra.app) and the credit line footer.credit ("Powered by {name}"), where {name} becomes a link to Codeshare

Note: The year comes from new Date().getFullYear(). Because the pages are pre-rendered, it is the year of the last npm run build, not the visitor's current year. Rebuild once a year (or on every deploy) to keep it current.

---

Home page

/<locale>, file src/app/[locale]/page.jsx. Sections from top to bottom:

#	Section	Dictionary keys	Content (English)
1	Hero	hero.title, hero.subtitle, hero.ctaPrimary, hero.ctaSecondary	"A Discord bot that just works", with Invite Beatra and Join Support Server buttons on a gradient background
2	Stats	stats.* (every entry is shown)	24/7 Uptime · Free Cost · Unlimited Servers · < 1 min Setup time
3	How it works	howItWorks.title, subtitle, steps[]	Three numbered cards (01, 02, 03): Invite Beatra, Join a voice channel, Play anything
4	Features	features.title, subtitle, items[] (each with an icon)	Always online, Fine-tuned control, Open & secure, Always-on support
5	Premium banner	homePremium.title, subtitle, button	Button links to /<locale>/premium
6	Experience	experience.title, subtitle, items[] (each with an icon)	Multi-source playback, Community playlists, Dashboard controls
7	Divider		A short line
8	Call to action	cta.title, cta.subtitle, cta.button	"Ready to level up your server?" with an invite button

---

Commands page

/<locale>/commands, file src/app/[locale]/commands/page.jsx.

The command names are written in the page file (the commandGroups array), not in the dictionaries. Only the page title, subtitle, group labels and button texts are translated.

Group key	Label (English)	Commands
playback	Playback	play, pause, resume, stop, skip, back, seek, volume, loop, autoplay, filter
queue	Queue & playlists	queue, shuffle, clear, playlist, save, search, nowplaying
utility	Server & utility	channel, dj, language, servers, statistic, time, help, ping

That is 26 commands, shown as cards in a grid (4 columns on desktop, 3 on medium screens, 2 on small screens). Under the list are three buttons: Invite Beatra (INVITE_URL), Support Server (DISCORD_URL) and Vote Beatra (VOTE_URL).

Note: The site shows command names only. Usage, options and permissions belong to the bot, which is not part of this repository.

---

Premium page

/<locale>/premium, file src/app/[locale]/premium/page.jsx, with the tabs in src/components/PremiumTabs.jsx.

Sections:

1. Header: premium.title ("Unlock unlimited power") and premium.subtitle.
2. Plan tabs: one tab per entry in premium.categories. The first tab is selected by default.
3. Highlights: four cards from premium.highlights (24/7 mode, Huge queues, Advanced audio, No vote walls) under premium.comparisonTitle.
4. FAQ: premium.faq in a two-column grid under premium.faqTitle.

Plans in the shipped English dictionary

Tab	Plan	Price	Badge	Button	Features in JSON
Personal	Premium	$1.49 / month	Most popular	Get Premium	8
Personal	Premium Plus	$2.49 / month	More limits	Get Premium Plus	8
Server Premium	Server Premium	$4.99 / month	Server	Get Premium	15
Server Premium	Team Server Premium	$6.99 / month	Team Premium	Get Premium	17
Server Premium	Ultra Server Premium	$9.49 / month	Ultra	Get Premium	16
Custom Bot	Custom Bot	$11.99 / month	Custom Bot	Get Custom Bot	19
Custom Bot	Ultra Custom Bot	$14.99 / month	Best value	Get Ultra	20

How the cards behave:

• Each card shows an optional kicker, the name, an optional badge, the description, the price followed by premium.perMonth ("/ month"), a button, and the feature list.
• Every plan button links to PREMIUM_URL from constants.js. The button icon is ctaIcon (the Custom Bot plans use discord) or sparkles by default.
• Only the first 8 features are shown for the Personal tab and the first 6 for the other tabs. The rest of the list in the JSON is not displayed.
• The feature list has a maximum height of 320 px and scrolls if it is longer. On screens 768 px wide or less this limit is removed.
• Personal and Custom Bot use a centered two-card layout (each card up to 420 px wide); Server Premium uses three columns. On smaller screens the cards stack in one column.

---

Partners page

/<locale>/partners, file src/app/[locale]/partners/page.jsx.

The title and subtitle come from the dictionary. The four product cards are written in the page file (the products array) and are not translated.

Name	Link	Badge	Tagline	Tags
Codeshare	https://codeshare.me	Flagship	Code & Digital Marketplace	Code Marketplace, Developer Services, CLI Tool, Live Preview
Beatra	https://beatra.app	Free & Paid	Discord Music Bot	24/7 Uptime, Free & Premium Plans, Playlist Support
Sylon	https://sylon.app	Free & Paid	Discord Moderation Bot	AI Moderation, Spam & Ad Protection, Tickets, Server Guard
McStat	https://mcstat.org	Free & Paid	Minecraft Statistics Platform	10s Refresh Rate, TPS & Player Tracking, Historical Trends

Each card is fully clickable, shows the logo from public/img/products/, and lays out in two columns (one on small screens).

---

Terms of Service and Privacy Policy

/<locale>/tos and /<locale>/privacy. Both pages render title, an updated line ("Last updated: July 13, 2026" in English) and a list of sections.

Section field	Terms of Service	Privacy Policy
heading	Shown	Shown
text (a paragraph)	Shown	Shown
items (a bullet list)	Shown	Shown
note (a small line under the list)	Not rendered	Shown

Sections in the English dictionary:

• Terms of Service: Acceptance, Service, User responsibilities, Availability, Prohibited, Premium.
• Privacy Policy: What we collect, How we use data, Security, Compliance, Your rights.

Note: This legal text describes the Beatra service. If you run the site for your own bot, replace it with your own terms and policy.

---

404 page

src/app/[locale]/not-found.jsx is the not-found page of the [locale] segment. It is a client component that reads the first part of the URL: if that is a supported language it uses that dictionary, otherwise defaultLocale (English). It shows notFound.title ("404"), notFound.message and a button (notFound.button, "Go home") that links to /<locale>.

Note: This file imports all seven dictionaries directly. When you add a language, add it here too (see Internationalization).

Note: Next.js shows a segment's not-found.jsx when notFound() is called inside that segment. The current code never calls notFound() and has no catch-all route, so an address that matches no page (for example /en/abc) gets Next.js's built-in 404 page instead of this one. To use the localized page for unknown addresses too, add src/app/[locale]/[...rest]/page.jsx:

import { notFound } from "next/navigation";

export default function CatchAll() {
    notFound();
}

---

Responsive design

• The layout uses Once UI's responsive props (s, m) and extra rules in src/resources/custom.css, with breakpoints at max-width: 768px and max-width: 420px.
• Grids collapse from four or three columns on small screens: the home stats and the command list keep two columns, while the cards (features, steps, experience, premium plans, highlights, partners) drop to one.
• The mobile menu replaces the desktop navigation.
• At 768 px or less, the style customizer opens almost full-screen and the footer links switch to a two-column grid (one column at 420 px or less).