Below is a **sample file structure** for your **BURNERS TOP-UP STORE** website, along with notes on how each part relates to the **UI/UX proposal (prope)** we discussed. This structure assumes a typical **HTML/CSS/JS** setup with separate pages for each major category (Free Fire, Vouchers, PUBG), plus assets for styling, scripts, and images. --- ## Top-Level Structure ``` BURNERS TOP-UP STORE/ │ ├── assets/ │ ├── css/ │ │ ├── main.css │ │ ├── responsive.css │ │ └── (any additional CSS files) │ ├── js/ │ │ ├── main.js │ │ └── (any additional JavaScript files) │ └── images/ │ ├── logos/ │ │ └── logo.png │ ├── banners/ │ │ └── (hero images or promotional banners) │ ├── products/ │ │ └── (images for Free Fire, PUBG, Garena Shell, UniPin, etc.) │ └── (other images/icons) │ ├── partials/ │ ├── header.html │ ├── footer.html │ └── (optional: sidebar.html, nav.html, etc.) │ ├── pages/ │ ├── free-fire/ │ │ ├── index.html │ │ ├── indonesia-topup.html │ │ ├── weekly-monthly-offer.html │ │ ├── airdrop.html │ │ └── ff-in-game-topup.html │ │ │ ├── vouchers/ │ │ ├── index.html │ │ ├── garena-shells.html │ │ └── unipin-bd.html │ │ │ ├── pubg/ │ │ └── pubg-uc.html │ │ │ └── (any additional categories or pages) │ ├── my-wallet/ │ └── index.html │ ├── my-account/ │ ├── index.html │ ├── orders.html │ ├── account-details.html │ └── wallet-topup.html │ ├── index.html (Home / Landing Page) ├── about.html (Optional: About Us) ├── contact.html (Optional: Contact Us) ├── privacy-policy.html (Optional: Privacy Policy) ├── terms.html (Optional: Terms & Conditions) └── README.md (Optional: Documentation or setup instructions) ``` --- ## Explanation of Each Folder & File ### 1. **assets/** Holds **all static files**—CSS, JavaScript, and images. - **css/** - **main.css**: Primary stylesheet for the entire site (colors, typography, layout). - **responsive.css**: Media queries for mobile/tablet/desktop responsiveness (if you keep it separate). - Additional CSS files as needed (e.g., vendor libraries). - **js/** - **main.js**: Contains scripts for site-wide functionality (navigation toggles, form validations, etc.). - Additional JS files for plugins or specific pages if necessary. - **images/** - **logos/**: Brand logos or partner logos. - **banners/**: Hero images or promotional banners for the homepage or category pages. - **products/**: Specific images for Free Fire, PUBG, Garena Shells, UniPin, etc. - **icons**, **backgrounds**, or other subfolders as needed for organization. ### 2. **partials/** Houses **reusable chunks of HTML** such as the header, footer, or navigation. You can **include** or **import** these partials into other pages (depending on your setup or templating engine). - **header.html**: The top navigation bar, site logo, and main menu. - **footer.html**: Footer section with support info, links (About, Contact, Privacy, etc.), and social icons. - Additional partials as needed (e.g., a sidebar or a common script block). ### 3. **pages/** Contains **category-specific** pages or subfolders: - **free-fire/** - **index.html**: A general Free Fire landing page showing sub-options or an overview. - **indonesia-topup.html**: Specific product page with diamond packages and “Buy Now” form. - **weekly-monthly-offer.html**: Another product page with relevant packages. - **airdrop.html**: Airdrop [InGame] packages and user login fields. - **ff-in-game-topup.html**: Additional diamond top-up page. - **vouchers/** - **index.html**: A general Vouchers page listing Garena Shells, UniPin, etc. - **garena-shells.html**: Page displaying Garena Shell denominations, “Buy Now” button, and description. - **unipin-bd.html**: UniPin Voucher BD packages and instructions. - **pubg/** - **pubg-uc.html**: Page for PUBG Mobile UC top-up with multiple denominations and a “Buy Now” form. > Each of these **HTML pages** follows the structure you showed in your screenshots: a grid or table of packages, player ID or account fields, a “Buy Now” button, and a description/FAQ below. ### 4. **my-wallet/** - **index.html**: Displays user’s Main Balance, Pending Balance, and transaction history. - If you prefer, you can merge this into **my-account/** or keep it separate for clarity. ### 5. **my-account/** Houses pages for user-specific actions: - **index.html**: Account dashboard (overview of orders, wallet balance, etc.). - **orders.html**: Detailed order list/history page. - **account-details.html**: Profile info, password change, personal settings. - **wallet-topup.html**: A form for topping up the user’s wallet if you separate that from the main wallet page. ### 6. **Root Files** - **index.html**: The **homepage** or **landing page**. Could include a hero banner, featured deals (e.g., “50% Off on Free Fire Diamond Packages”), and big category buttons (Free Fire, Vouchers, PUBG). - **about.html**, **contact.html**, **privacy-policy.html**, **terms.html**: Typical **informational or legal pages**. - **README.md**: Documentation on how to run or maintain the site. --- ## Integrating the “Prope” (UI/UX Proposal) with This Structure 1. **Home Page** (`index.html`) - Show the **category shortcuts** (Free Fire, Vouchers, PUBG). - Display any promotional banners or hero sections. 2. **Category Pages** (`pages/free-fire/index.html`, `pages/vouchers/index.html`, `pages/pubg/pubg-uc.html`) - Each page (or sub-page) has the **grid of packages** (e.g., “75 Diamond – 75৳,” “PUBG 60 UC – 145৳,” “65 Shell – 125৳,” etc.), **player/account input fields**, and **Buy Now** buttons. - **Description/FAQ** is placed below the packages. 3. **My Wallet & My Account** - **my-wallet/index.html**: Reflects the user’s balance and transaction history. - **my-account/** pages: Overview, orders, account details, etc. - The structure ensures consistency with the proposed user flows (login → view wallet → top-up or buy packages → see orders). 4. **Partials** (`partials/header.html` & `partials/footer.html`) - Reuse the **header** and **footer** on each page for consistent navigation, brand identity, and user trust. 5. **assets/css & assets/js** - Use **main.css** (and possibly **responsive.css**) to style the site in line with the **gaming-inspired** color scheme and typography mentioned in the proposal. - **main.js** can handle interactive elements (like form validations, toggling modals, etc.). --- ## Final Notes - This file structure is **flexible**: you can combine or split files depending on your development approach (pure HTML, a CMS like WordPress, or a framework like React/Next.js). - Keep your **folder names** and **file names** descriptive so you can easily find and update pages. - Maintain **consistent naming conventions** (e.g., all lowercase, hyphens for spaces) for easier collaboration and deployment. By following this structure, you’ll have a **clear, maintainable** layout for your **BURNERS TOP-UP STORE** website that aligns with the **UI/UX proposal** (the “prope”) and ensures a smooth experience for both **site administrators** and **end users**.Below is a **comprehensive UI/UX proposal (“prope”)** for your **Burners Store** (or “Gaming Topup”) website. This updated version integrates the newly provided screenshots, which show how each product page (Indonesia Top-Up, Weekly Monthly Offer, Airdrop [InGame], PUBG Mobile UC, Garena Shells MY, FF In-Game Top-Up, UniPin Voucher BD, etc.) is laid out with multiple denomination options, an input for Player ID or account info, and a “Buy Now” button. --- ## 1. Site Structure & Navigation 1. **Header & Main Menu** - **Logo/Brand Name**: Keep your “Burners Store” or “Gaming Topup” logo at the top-left. - **Navigation Links**: - **Home** - **Free Fire** (with sub-pages for Indonesia Top-Up, Weekly/Monthly Offer, Airdrop, In-Game Top-Up, etc.) - **Vouchers** (Garena Shells MY, UniPin Voucher BD) - **PUBG Top-Up** (PUBG Mobile UC) - **My Wallet** - **My Account** - **Login/Register**: Top-right, highlighted button or link for easy access. 2. **Home / Landing Page** - **Featured Banners** or **Carousel**: Showcase promotions or popular packages (e.g., special deals for Free Fire or PUBG). - **Category Shortcuts**: Big clickable cards for **Free Fire**, **Vouchers**, and **PUBG**. On click, each card goes to its respective category page. 3. **Footer** - **Support Section**: Display phone numbers, WhatsApp, or email clearly. - **Links**: About Us, Contact Us, Privacy Policy, Refund & Return, Terms & Conditions. - **Brand Consistency**: Match the header’s color scheme and typography. --- ## 2. Category & Product Pages ### A. Free Fire When a user clicks **Free Fire**, they’ll see a page listing subcategories or directly listing the products: 1. **Indonesia Top-Up** (as per your first screenshot example) - Multiple diamond packages (e.g., 5 Diamond, 12 Diamond, 47 Diamond, etc.). - **Player ID** input field. - “Buy Now” button. - **Description** section below with helpful details and instructions. 2. **Weekly Monthly Offer** - Multiple package options (e.g., 3x Weekly, 5x Weekly + Monthly, etc.). - **Player ID** field. - “Buy Now” button. - **Description**: Show how these packages differ from standard diamond top-ups. 3. **Airdrop [InGame]** - Various airdrop percentage bundles (e.g., 96% Airdrop, 98% Airdrop). - **Select Account Type** (Facebook, Email/Phone) - **Enter password**, **two-step code** fields. - “Buy Now” button. - **Description**: Explain what an airdrop is and how it works. 4. **FF In-Game Top-Up** - Diamond bundles (520, 1040, 2080, etc.). - **Select Account Type** (Facebook, Email/Phone). - “Buy Now” button. - **Description**: Outline any additional steps needed for successful top-up. > **Tip**: You can display these subcategories as **tabs** or as **separate product pages** under “Free Fire.” Each page follows a similar layout—**product grid** at the top, **player/account input** fields in the middle, and a **description** at the bottom. ### B. Vouchers When a user clicks **Vouchers**, show: 1. **Garena Shells MY** - Package options (e.g., 65 Shell, 125 Shell, 245 Shell, etc.). - **Player ID** (if needed) or simply a “Buy Now” button if it’s a voucher code delivery. - **Description**: Explains what Garena Shell is and how to redeem it. 2. **UniPin Voucher BD** - Package options (e.g., 50 BDT, 100 BDT, 240 BDT, 610 BDT, etc.). - “Buy Now” button. - **Description**: Tells how UniPin vouchers can be used to top up various games. > **Tip**: Keep voucher pages consistent: a **grid of voucher denominations** up top, the input fields or immediate “Buy Now” button, and a clear description below. ### C. PUBG Top-Up When a user clicks **PUBG Top-Up**, display the **PUBG Mobile UC** page: 1. **PUBG Mobile UC** - Packages (e.g., 60 UC, 325 UC, 500 UC, 810 UC, etc.). - **Player ID** input field. - “Buy Now” button. - **Description**: Clarify how to retrieve and enter the correct Player ID (UID), any wait times for UC delivery, etc. --- ## 3. Product Page Layout Details Each product page (as seen in your screenshots) should follow a **consistent layout**: 1. **Product Title / Category** - Example: “Indonesia TopUp,” “PUBG Mobile UC,” “UniPin Voucher BD,” etc. 2. **Grid or Table of Packages** - Clearly labeled options (e.g., “75 Diamond – 75৳,” “Weekly + Monthly – 854৳,” “PUBG 60 UC – 145৳,” etc.). - Make the package titles clickable or just place a “Buy Now” button next to each package. 3. **Account / Player ID Input** - If the game requires a Player ID or login method, place fields like: - “Player ID (UID)” - “Select Account Type” (Facebook, Email/Phone) - “Enter Password” - “Enter Two-Step Code” - These fields can be shown only if relevant. For example, vouchers may not need a Player ID. 4. **Buy Now Button** - A prominent, contrasting button. - Clicking it leads to the checkout or a pop-up confirming details (package selected, price, etc.). 5. **Description / Instructions** - Provide info on how to input the Player ID, how long the top-up takes, any refund policy, or disclaimers. 6. **Additional Info / FAQs** - Below the description, consider a small FAQ or an accordion with common questions. --- ## 4. Checkout & Payment Flow 1. **Cart or Direct Checkout** - If you allow multiple items in one purchase, implement a cart system. If it’s one product at a time, go straight to a **checkout** page. 2. **Confirm Details** - Show the chosen package, price, and user’s ID or login info. 3. **Payment Methods** - Let users select from available payment gateways (e.g., bKash, Rocket, Nagad, credit/debit card, etc.). 4. **Order Confirmation** - Display an order ID or reference number, plus a summary of the purchase. --- ## 5. My Wallet & My Account 1. **My Wallet** - **Main Balance** and **Pending Balance** displayed. - **Wallet Top-Up**: If you let users add funds to their wallet, show the top-up form. - **Transactions**: List past top-ups and statuses. 2. **My Account** - **Dashboard**: Overview of recent orders and wallet balance. - **Account Details**: Profile info, change password, security settings. - **Order List**: Detailed order history with status (Processing, Completed, etc.). - **Logout**: Simple link or button. --- ## 6. Visual & Brand Consistency 1. **Color Palette** - Use a **gaming-inspired** palette (dark backgrounds with neon or bright accent colors) or a clean white background with bold accent colors for buttons and headings. 2. **Typography** - A **bold, readable sans-serif** for headings (e.g., Poppins, Montserrat) and a lighter sans-serif for body text. 3. **Icons & Imagery** - Use game logos (Free Fire, PUBG, Garena Shell, UniPin) and relevant icons (diamond, UC, voucher) to quickly communicate each product. 4. **Responsiveness** - Make sure all pages (product grids, forms, etc.) adjust smoothly on mobile devices. - Use collapsible menus and stacking layouts on smaller screens. --- ## 7. Trust & Credibility 1. **Security Indicators** - HTTPS, SSL badges, or secure payment gateway icons. 2. **Customer Support** - Prominent contact channels (WhatsApp, phone, email). - Possibly a live chat widget if feasible. 3. **Social Proof** - If you have customer reviews or are an official partner/reseller, show it in the description or homepage banners. --- ## 8. Implementation Tips 1. **Category Tabs vs. Separate Pages** - You can implement each subcategory (e.g., “Indonesia Top-Up,” “Weekly Monthly Offer,” “Airdrop,” etc.) as separate pages or as **tabs** on a single “Free Fire” page. 2. **Consistent Template** - Use the same **page template** for each product type: a **grid of packages**, an **input section**, a **description**, and a **Buy Now** button. 3. **Local Language Support** - Since your descriptions are partly in Bangla (Bengali), ensure fonts and text rendering work well in both English and Bangla. --- ## Conclusion By integrating these **new product page layouts**—where each top-up or voucher type has its own **grid of denominations**, an **account input section**, a **Buy Now** button, and a **description**—you create a **user-friendly, consistent experience**. Visitors can quickly pick their package, enter their details, and complete the purchase. Maintaining a cohesive **color scheme**, **responsive design**, and **clear navigation** across **Free Fire**, **Vouchers**, and **PUBG Top-Up** pages will make your site look professional and trustworthy. **Next Steps**: 1. Update each category page to display the **new layouts** shown in your screenshots (multiple denominations, ID fields, descriptions). 2. Ensure the **navigation** flows smoothly between **Home**, **Free Fire**, **Vouchers**, **PUBG**, **My Wallet**, and **My Account**. 3. Maintain **visual consistency** (same fonts, colors, button styles) across all pages. 4. Test on mobile devices to confirm everything is legible and easy to use.
I've created a Next.js application that implements the core structure and design shown in the screenshots. The app includes:
- A responsive layout with header and bottom navigation
- Homepage with game category cards
- Account management pages
- Wallet functionality
- Support section
The components use shadcn/ui for consistent styling and follow the App Router conventions. I've maintained the exact look and feel from the screenshots while making it responsive and accessible.
Let me know if you'd like me to implement any other specific pages or features from the screenshots!
I've updated the components to match the screenshot exactly:
- Modified the homepage layout to show games in a 2x2 grid with proper spacing and styling
- Added the Support section with phone and WhatsApp icons
- Added the About Us section with all the links shown
- Updated the header with the correct gray background and orange login button
- Styled the bottom navigation to match the screenshot with proper icons and labels
- Used the exact colors from the screenshot (green for titles, blue for sections)
The layout is now responsive and matches the mobile design shown in the screenshot while still looking good on larger screens. Let me know if you'd like any adjustments to make it match the design even more closely!
Below is a comprehensive UI/UX proposal (“prope”) for your BURNERS TOP-UP STORE website. This updated version integrates the newly provided screenshots, which show how each product page (Indonesia Top-Up, Weekly Monthly Offer, Airdrop [InGame], PUBG Mobile UC, Garena Shells MY, FF In-Game Top-Up, UniPin Voucher BD, etc.) is laid out with multiple denomination options, an input for Player ID or account info, and a “Buy Now” button.
- Site Structure & Navigation
Header & Main Menu
Logo/Brand Name: Keep your “Burners Store” or “Gaming Topup” logo at the top-left.Navigation Links: HomeFree Fire (with sub-pages for Indonesia Top-Up, Weekly/Monthly Offer, Airdrop, In-Game Top-Up, etc.)Vouchers (Garena Shells MY, UniPin Voucher BD)PUBG Top-Up (PUBG Mobile UC)My WalletMy Account Login/Register: Top-right, highlighted button or link for easy access.
Home / Landing Page
Featured Banners or Carousel: Showcase promotions or popular packages (e.g., special deals for Free Fire or PUBG).Category Shortcuts: Big clickable cards for Free Fire, Vouchers, and PUBG. On click, each card goes to its respective category page.
Footer
Support Section: Display phone numbers, WhatsApp, or email clearly.Links: About Us, Contact Us, Privacy Policy, Refund & Return, Terms & Conditions.Brand Consistency: Match the header’s color scheme and typography.
- Category & Product Pages
A. Free Fire
When a user clicks Free Fire, they’ll see a page listing subcategories or directly listing the products:
Indonesia Top-Up (as per your first screenshot example)
Multiple diamond packages (e.g., 5 Diamond, 12 Diamond, 47 Diamond, etc.).Player ID input field.“Buy Now” button.Description section below with helpful details and instructions.
Weekly Monthly Offer
Multiple package options (e.g., 3x Weekly, 5x Weekly + Monthly, etc.).Player ID field.“Buy Now” button.Description: Show how these packages differ from standard diamond top-ups.
Airdrop [InGame]
Various airdrop percentage bundles (e.g., 96% Airdrop, 98% Airdrop).Select Account Type (Facebook, Email/Phone)Enter password, two-step code fields.“Buy Now” button.Description: Explain what an airdrop is and how it works.
FF In-Game Top-Up
Diamond bundles (520, 1040, 2080, etc.).Select Account Type (Facebook, Email/Phone).“Buy Now” button.Description: Outline any additional steps needed for successful top-up.
Tip: You can display these subcategories as tabs or as separate product pages under “Free Fire.” Each page follows a similar layout—product grid at the top, player/account input fields in the middle, and a description at the bottom.
B. Vouchers
When a user clicks Vouchers, show:
Garena Shells MY
Package options (e.g., 65 Shell, 125 Shell, 245 Shell, etc.).Player ID (if needed) or simply a “Buy Now” button if it’s a voucher code delivery.Description: Explains what Garena Shell is and how to redeem it.
UniPin Voucher BD
Package options (e.g., 50 BDT, 100 BDT, 240 BDT, 610 BDT, etc.).“Buy Now” button.Description: Tells how UniPin vouchers can be used to top up various games.
Tip: Keep voucher pages consistent: a grid of voucher denominations up top, the input fields or immediate “Buy Now” button, and a clear description below.
C. PUBG Top-Up
When a user clicks PUBG Top-Up, display the PUBG Mobile UC page:
PUBG Mobile UC Packages (e.g., 60 UC, 325 UC, 500 UC, 810 UC, etc.).Player ID input field.“Buy Now” button.Description: Clarify how to retrieve and enter the correct Player ID (UID), any wait times for UC delivery, etc.
- Product Page Layout Details
Each product page (as seen in your screenshots) should follow a consistent layout:
Product Title / Category
Example: “Indonesia TopUp,” “PUBG Mobile UC,” “UniPin Voucher BD,” etc.
Grid or Table of Packages
Clearly labeled options (e.g., “75 Diamond – 75৳,” “Weekly + Monthly – 854৳,” “PUBG 60 UC – 145৳,” etc.).Make the package titles clickable or just place a “Buy Now” button next to each package.
Account / Player ID Input
If the game requires a Player ID or login method, place fields like: “Player ID (UID)”“Select Account Type” (Facebook, Email/Phone)“Enter Password”“Enter Two-Step Code” These fields can be shown only if relevant. For example, vouchers may not need a Player ID.
Buy Now Button
A prominent, contrasting button.Clicking it leads to the checkout or a pop-up confirming details (package selected, price, etc.).
Description / Instructions
Provide info on how to input the Player ID, how long the top-up takes, any refund policy, or disclaimers.
Additional Info / FAQs
Below the description, consider a small FAQ or an accordion with common questions.
- Checkout & Payment Flow
Cart or Direct Checkout If you allow multiple items in one purchase, implement a cart system. If it’s one product at a time, go straight to a checkout page. Confirm Details Show the chosen package, price, and user’s ID or login info. Payment Methods Let users select from available payment gateways (e.g., bKash, Rocket, Nagad, credit/debit card, etc.). Order Confirmation Display an order ID or reference number, plus a summary of the purchase.
- My Wallet & My Account
My Wallet
Main Balance and Pending Balance displayed.Wallet Top-Up: If you let users add funds to their wallet, show the top-up form.Transactions: List past top-ups and statuses.
My Account
Dashboard: Overview of recent orders and wallet balance.Account Details: Profile info, change password, security settings.Order List: Detailed order history with status (Processing, Completed, etc.).Logout: Simple link or button.
- Visual & Brand Consistency
Color Palette Use a gaming-inspired palette (dark backgrounds with neon or bright accent colors) or a clean white background with bold accent colors for buttons and headings. Typography A bold, readable sans-serif for headings (e.g., Poppins, Montserrat) and a lighter sans-serif for body text. Icons & Imagery Use game logos (Free Fire, PUBG, Garena Shell, UniPin) and relevant icons (diamond, UC, voucher) to quickly communicate each product. Responsiveness Make sure all pages (product grids, forms, etc.) adjust smoothly on mobile devices.Use collapsible menus and stacking layouts on smaller screens.
- Trust & Credibility
Security Indicators HTTPS, SSL badges, or secure payment gateway icons. Customer Support Prominent contact channels (WhatsApp, phone, email).Possibly a live chat widget if feasible. Social Proof If you have customer reviews or are an official partner/reseller, show it in the description or homepage banners.
- Implementation Tips
Category Tabs vs. Separate Pages You can implement each subcategory (e.g., “Indonesia Top-Up,” “Weekly Monthly Offer,” “Airdrop,” etc.) as separate pages or as tabs on a single “Free Fire” page. Consistent Template Use the same page template for each product type: a grid of packages, an input section, a description, and a Buy Now button. Local Language Support Since your descriptions are partly in Bangla (Bengali), ensure fonts and text rendering work well in both English and Bangla.
Conclusion
By integrating these new product page layouts—where each top-up or voucher type has its own grid of denominations, an account input section, a Buy Now button, and a description—you create a user-friendly, consistent experience. Visitors can quickly pick their package, enter their details, and complete the purchase. Maintaining a cohesive color scheme, responsive design, and clear navigation across Free Fire, Vouchers, and PUBG Top-Up pages will make your site look professional and trustworthy.
Next Steps:
Update each category page to display the new layouts shown in your screenshots (multiple denominations, ID fields, descriptions).Ensure the navigation flows smoothly between Home, Free Fire, Vouchers, PUBG, My Wallet, and My Account.Maintain visual consistency (same fonts, colors, button styles) across all pages.Test on mobile devices to confirm everything is legible and easy to use.
