Make the following requested changes only. Do NOT modify unrelated functionality.
1. Make advertising spaces global across the website
The advertising system currently exists, but advertising placements should NOT be limited to only one or a few pages.
Make the advertising system support displaying active advertisements across the entire storefront/site wherever an advertising slot is defined.
Requirements
Ads must be managed from the existing admin Ads panel under /BRAYA/ads.
Use the existing Ad model, API, tracking, scheduling, activation/deactivation, and security system.
Do NOT create a second advertising system.
Do NOT duplicate ad logic separately for every page.
Create/reuse a shared storefront AdSlot component so the same system can be used globally.
Active ads should be able to appear on relevant storefront pages such as:
Homepage /
Products /products
Product details /products/[slug]
Categories /categories
FAQ /faq
Contact /contact
Cart /cart
Other public storefront pages where an advertising placement makes sense
Do NOT place ads over or inside:
Login forms
Registration forms
Checkout/payment forms
Account/security settings
Important transactional confirmation screens
Admin panel
Important
Do NOT force an ad into every single visual area.
Instead, create consistent global ad slots that can be reused across the storefront, while keeping the UI clean and responsive.
Ads must:
Respect active/inactive status.
Respect start/end scheduling.
Track impressions.
Track clicks.
Keep the existing IMAGE / TEXT / IFRAME ad types.
Keep the existing iframe security restrictions.
Keep HTTPS-only external iframe behavior.
Keep CSP/security protections.
Work correctly in Arabic, English, Russian, and Chinese.
Work correctly in RTL for Arabic.
Work correctly in LTR for English, Russian, and Chinese.
Work on desktop and mobile.
Do NOT allow arbitrary HTML/JavaScript advertisements.
Do NOT weaken any existing security protections.
2. Remove “Shop by Category” and use the Playerok-style category UI
There is currently a section called:
“Shop by Category”
Remove this section from the storefront.
Do NOT simply hide it with CSS.
Remove its rendering from the relevant page/component.
Replace it with the existing Playerok-inspired category design
Use the same category tile/filter concept that was already implemented for the /products page.
The goal is to have ONE consistent category experience rather than multiple different category sections.
The category UI should resemble the style/concept of Playerok:
Category tiles/cards
Category icon/image
Category name
Clean compact layout
Responsive grid/row
Easy to click/tap
Modern marketplace-style appearance
Reuse the existing category data and existing category filtering logic.
Do NOT create duplicate categories in the database.
Do NOT create a second category system.
Filtering behavior
Keep the existing category filtering behavior:
“All” → /products
Specific category → /products?category=<slug>
The category UI must continue to work with:
Arabic
English
Russian
Chinese
RTL
Mobile
Desktop
3. Add complete storefront theme/color controls to the Admin Panel
Add a proper theme customization section to the Admin Panel under /BRAYA.
The administrator should be able to change the storefront’s visual colors WITHOUT editing source code.
Admin theme controls
Create a dedicated theme/settings section where the admin can control the main storefront colors, including where applicable:
Primary color
Secondary color
Accent color
Background color
Surface/card color
Text color
Muted text color
Border color
Button color
Button text color
Header color
Footer color
Link color
Hover color
Light Mode colors
Dark Mode colors
Use the existing Light/Dark Mode system.
Do NOT replace the existing theme architecture unnecessarily.
Gradient controls
Add a configurable gradient system to the Admin Panel.
The admin should be able to choose/edit:
Gradient start color
Gradient end color
Gradient direction/angle
Where the gradient is used
The visual style can be inspired by the red/purple gradient feeling used by WormGPT, but:
Do NOT copy WormGPT’s design.
Do NOT copy its branding.
Do NOT copy logos, assets, or copyrighted visual elements.
Only use it as general visual inspiration for a modern gradient aesthetic.
The admin must be able to change the gradient colors later without modifying code.
Theme persistence
Theme settings must be stored persistently in the database or the project’s appropriate persistent settings system.
Do NOT store important global theme configuration only in browser localStorage.
Changes made by the admin should be reflected across the storefront.
Make sure:
Existing products are unaffected.
Existing functionality is unaffected.
Theme changes work in Light Mode.
Theme changes work in Dark Mode.
Arabic/RTL works.
English/Russian/Chinese LTR works.
Mobile works.
No flash/broken styling should occur during normal page loading.
Security
Only authenticated/authorized admins can change theme settings.
Do not expose admin theme-management APIs to unauthenticated users.
Validate color values server-side.
Do not allow arbitrary CSS/JavaScript injection through theme settings.
Do NOT allow the admin to inject arbitrary CSS or JavaScript.
4. Add Chinese language support
Add Chinese as a full storefront language.
The storefront should support:
English
Arabic
Russian
Chinese
Use the project’s existing internationalization architecture.
Do NOT create a separate translation system.
Add Chinese translations for all existing user-facing storefront text, including where applicable:
Header/navigation
Homepage
Products
Product details
Categories
Cart
FAQ
Contact
Login
Register
Reviews
Purchase count
Ads
Buttons
Forms
Validation messages
Empty states
Footer
Theme-related user-facing text
Use Simplified Chinese unless the project already explicitly uses another Chinese locale.
Add the appropriate Chinese locale file following the existing locale structure.
Do NOT leave visible English fallback text where a Chinese translation should exist.
5. IMPORTANT — Storefront language and Admin language MUST be independent
This is very important.
Changing the language on the main public website MUST NOT automatically change the language of the Admin Panel.
The storefront and Admin Panel must maintain independent language preferences.
Example:
Storefront language = Chinese
Admin Panel language = English
This must remain possible.
Another example:
Storefront language = Arabic
Admin Panel language = Russian
This must also remain possible.
Changing the language selector on the storefront must NOT modify the Admin Panel language.
Changing the language inside /BRAYA must NOT modify the storefront language.
Implementation requirement
Use separate language state/cookies/preferences for:
Storefront
Admin Panel
Do NOT use one shared global locale state if that would cause the two interfaces to change together.
The existing Admin Panel language preference should remain independent.
Do not break authentication or admin sessions while implementing this.
6. Important scope protection
Do NOT modify:
Telegram functionality
Telegram product publishing
NavApp system
Product deletion logic
Purchase count
Verified buyer reviews
Orders
Payments
Authentication architecture
Database relationships
Existing ad security
Existing admin permissions
unless a tiny change is strictly required to make the requested features work.
Use minimal-diff changes.
Do NOT perform unrelated refactoring.
Do NOT upgrade dependencies unless absolutely required.
Do NOT redesign the entire website.
7. Database and migration safety
If theme settings or language settings require database changes:
Use a proper Prisma migration.
Do NOT delete existing data.
Do NOT rewrite existing migration history.
Do NOT delete existing users, products, orders, reviews, payments, categories, or activity logs.
Keep the migration reversible/safe where practical.
8. Validation
After implementation run:
npx tsc --noEmit
npx next build
npx prisma validate
Also test:
/
/products
/categories
/cart
/faq
/contact
/login
/register
A product details page
/BRAYA
/BRAYA/ads
The new Admin theme/settings page
Verify
Ads can appear on multiple storefront pages using the shared system.
Disabled/expired ads do not appear.
Impression/click tracking still works.
No unsafe HTML/JS can be injected through ads.
“Shop by Category” no longer appears.
The Playerok-style category UI appears where appropriate.
Categories still filter products correctly.
Chinese language works throughout the storefront.
Arabic/English/Russian still work.
RTL works correctly for Arabic.
LTR works correctly for English/Russian/Chinese.
Theme colors can be changed from the Admin Panel.
Gradient colors can be changed from the Admin Panel.
Gradient settings persist after restarting the server.
Light Mode remains functional.
Dark Mode remains functional.
Theme changes do not break mobile layouts.
Theme settings cannot be modified by unauthenticated users.
Storefront language and Admin language are completely independent.
Changing storefront language does NOT change /BRAYA language.
Changing /BRAYA language does NOT change storefront language.
Admin protection remains unchanged.
Existing Telegram functionality still works.
Existing NavApp functionality still works.
Existing product/review/order/payment functionality still works.
9. Final report
Finally, provide a concise report listing:
Files changed.
What changed in each file.
How global ad placement works.
Where the Playerok-style category UI is now used.
Where the Admin theme controls are located.
Which colors/gradient settings can be changed.
How theme settings are persisted.
How Chinese localization was implemented.
How storefront/admin language independence was implemented.
Database migrations created, if any.
TypeScript result.
Prisma validation result.
Production build result.
Any remaining limitations or warnings.
MOST IMPORTANT:
Make only the requested changes.
Preserve all existing working functionality.
Use minimal-diff implementation.
Do NOT make unrelated changes.