# Next Gen eSports - Complete Wix + Velo Implementation Guide ## Overview This guide provides complete implementation for rebuilding nextgenesports.in on Wix with rentkar.app-inspired design and black/white/true blue color scheme. --- ## PHASE 1: WIX DATABASE SETUP ### Collection 1: `PlayStationRentals` **Fields:** - `title` (Text) - e.g., "PlayStation 5 Rent 1 Month" - `description` (Rich Text) - `price` (Number) - `priceUnit` (Text) - "per day", "per week", "per month" - `console` (Text) - "PS4" or "PS5" - `duration` (Text) - "1 Day", "3 Days", "1 Week", "1 Month" - `controllersIncluded` (Number) - Default: 2 - `image` (Image) - `featured` (Boolean) - `available` (Boolean) - `gamesAvailable` (Array - Text) - List of game titles - `pincodes` (Array - Text) - Service areas - `slug` (Text) - URL-friendly name **Sample Data:** ``` Title: PlayStation 5 Rent 1 Month Price: 6999 Console: PS5 Duration: 1 Month Games Available: [Assassins Creed Unity, Call of Duty Modern Warfare, God of War Ragnarok, GTA V, Spider Man 2, Tekken 8, Black Myth Wukong, FC 25, etc.] Pincodes: [401201, 401202, 401203, 401207, 401208, 401209, 401301, 401302, 401303, 401304, 401305] ``` --- ### Collection 2: `Games` **Fields:** - `title` (Text) - `description` (Rich Text) - `price` (Number) - Purchase price - `console` (Text) - "PS4", "PS5", "Both" - `category` (Text) - "PlayStation 4 Games", "PlayStation 5 Games" - `genre` (Text) - "Action", "Sports", "Racing", "Story", etc. - `image` (Image) - `stock` (Number) - `ribbon` (Text) - "New Arrival", "Rare", "Steel book edition" - `featured` (Boolean) - `multiplayerSupported` (Boolean) - `slug` (Text) --- ### Collection 3: `BookingServices` **Fields:** - `serviceName` (Text) - `price` (Number) - `description` (Rich Text) - `image` (Image) - `duration` (Text) - "Per Session", "Hourly" - `featured` (Boolean) - `slug` (Text) **Sample Data:** ``` PS4 Gaming Session - From ₹80 PlayStation 5 Gaming Session - From ₹70 Simulator with Cockpit Logitech G29 - From ₹100 PlayStation VR - From ₹100 ``` --- ### Collection 4: `CustomControllers` **Fields:** - `title` (Text) - `description` (Rich Text) - `price` (Number) - `optionType` (Text) - "Left", "Right", "Both" - `image` (Image) - `pincodes` (Array - Text) - `featured` (Boolean) --- ### Collection 5: `Bookings` (For customer orders) **Fields:** - `customerName` (Text) - `customerEmail` (Text) - `customerPhone` (Text) - `serviceType` (Text) - "Rental", "Gaming Session", "Purchase" - `productId` (Reference - to relevant collection) - `selectedGame` (Text) - `pincode` (Text) - `startDate` (Date) - `endDate` (Date) - `totalAmount` (Number) - `status` (Text) - "Pending", "Confirmed", "Delivered", "Completed", "Cancelled" - `bookingDate` (Date & Time) - `additionalNotes` (Text) --- ## PHASE 2: GLOBAL CSS STYLING **Add to: Site Settings → Custom Code → Header (for CSS)** ```html ``` # Next Gen eSports - Wix Page Structure Guide ## Complete List of Pages to Create in Wix --- ## 1. HOME PAGE (/) ### Sections to Add: #### **Header (Sticky)** - Logo: Image or text "Next Gen eSports 2.0" - Navigation Menu: Categories | Rentals | Games | Booking | About | Contact - Search Bar (with search icon) - Cart Icon (with count badge) - Mobile Menu Button (hamburger icon) #### **Hero Section** - Background: Full-width image (gaming arena/esports) - Overlay: Black gradient (90% to 40% transparency) - Heading: "Experience the Future of Gaming!" - Subheading: "Rent, Play, Compete & Conquer!" - CTA Buttons: "Browse Rentals" | "Book a Session" - Stats Bar: 400+ Games | 50+ Products | 11 Locations Served #### **Featured Services (3 Cards)** 1. PlayStation Rentals 2. Gaming Sessions 3. Buy Pre-owned Games #### **PlayStation Rentals Section** - Section Title: "PlayStation Rentals" - Repeater (#rentalRepeater) with 4 items showing: - PS5/PS4 Image - Title (e.g., "PlayStation 5 Rent 1 Month") - Price (₹6999) - Duration badge - "Rent Now" button - "2 Controllers Included" text #### **Featured Games Section** - Section Title: "New Releases & Popular Games" - Repeater (#gamesRepeater) with 8 items showing: - Game cover image - Game title - Console badge (PS4/PS5) - Price - Stock status badge - "View Details" button #### **How It Works Section (Dark Background)** - Background: Black (#000000) - 4 Step Cards: 1. Browse & Select 2. Choose Dates/Book 3. Get Delivered 4. Game On! - Each card has icon, title, description #### **Why Choose Us Section** - 4 Feature Cards: 1. Verified Equipment 2. Fast Delivery 3. Flexible Payment 4. 24/7 Support #### **Footer (Black Background)** - 4 Columns: 1. Brand Logo + Description + Social Icons 2. Quick Links 3. Support Links 4. Newsletter Signup - Bottom: Contact info (Phone, Email, Address) - Copyright: "© 2026 Next Gen eSports. All rights reserved." --- ## 2. PLAYSTATION RENTALS PAGE (/playstation-rentals) ### Elements: - Page Title: "PlayStation Rentals" - Filters Section: - Console Filter: Dropdown (All | PS4 | PS5) - Duration Filter: Dropdown (All | 1 Day | 3 Days | 1 Week | 1 Month) - Pincode Filter: Text Input + "Check" Button - Sort: Dropdown (Price: Low to High | High to Low | Console) - Clear Filters Button - Results Section: - Result Count Text (#resultCount) - Loading Indicator (#loadingIndicator) - Rentals Repeater (#rentalsRepeater) - Each item: Image, Title, Console, Duration, Price, Controllers Info, "Rent Now" button --- ## 3. RENTAL DETAILS PAGE (/rental-details) ### Elements: - Left Column: - Large product image - Image gallery (if multiple images) - Right Column: - Product Title - Console Badge - Duration Badge - Price (large text) - Description (rich text) - Controllers Included info - Available Games List - Booking Form: - Game Selection Dropdown (#gameSelector) - Pincode Selection Dropdown (#pincodeSelector) - Customer Name (#customerName) - Customer Email (#customerEmail) - Customer Phone (#customerPhone) - Start Date (#startDate) - Additional Notes (textarea) - "Rent Now" Button - Error Message (#errorMessage) - Additional Options: - Extra Controller Checkbox - Multiple Games Checkbox - Contact Buttons: - WhatsApp Button - Call Button --- ## 4. GAMES PAGE (/games) ### Elements: - Page Title: "PlayStation Games" - Category Tabs: All | PS4 Games | PS5 Games - Filters Section: - Console: Dropdown (All | PS4 | PS5 | Both) - Genre: Dropdown (All | Action | Sports | Racing | Story | RPG) - Price Range: Dropdown (All | Under ₹1000 | ₹1000-₹2000 | Above ₹2000) - Stock: Dropdown (All | In Stock | Out of Stock) - Sort: Dropdown (Newest | Price: Low to High | High to Low | Name A-Z) - Search: Text Input + Button - Results Section: - Result Count (#resultCount) - Games Grid Repeater (#gamesRepeater) - Each item: Image, Title, Console, Price, Stock Badge, Ribbon (if any), "View Details" + "Buy Now" buttons --- ## 5. GAME DETAILS PAGE (/game-details) ### Elements: - Game Image (large) - Game Title - Console Badge - Price - Stock Status - Description - Genre - Ribbon/Special Badge (if applicable) - Multiplayer Badge (if supported) - Purchase Buttons: - "Buy Now" Button - "Add to Cart" Button - Success Message (#cartMessage) - Similar Games Section: - Repeater showing 4 similar games - Contact Section: - "Contact for Purchase" heading - WhatsApp Button - Call Button --- ## 6. BOOKING SERVICES PAGE (/booking) ### Elements: - Page Title: "Book Gaming Sessions" - Subtitle: "Play, Compete & Conquer!" - Services Repeater (#servicesRepeater): Each service card shows: - Service Image - Service Name (e.g., "PS4 Gaming Session") - Description - Price ("From ₹80") - Duration info - "Book Now" Button **Available Services:** 1. PS4 Gaming Session - From ₹80 2. PlayStation 5 Gaming Session - From ₹70 3. Simulator with Cockpit Logitech G29 - From ₹100 4. PlayStation VR - From ₹100 - Booking Form Section (#bookingFormSection): - Selected Service Display - Date Picker (#bookingDate) - Time Slot Dropdown (#timeSlot) - Duration Selector (#durationHours) - Availability Message (#availabilityMessage) - Price Breakdown (#priceBreakdown) - Total Amount (#totalAmount) - Customer Details: - Name (#customerName) - Email (#customerEmail) - Phone (#customerPhone) - Additional Notes (#additionalNotes) - "Confirm Booking" Button - Error Message (#errorMessage) - Contact Options: - WhatsApp Button - Call Button --- ## 7. CUSTOM CONTROLLERS PAGE (/custom-controllers) ### Elements: - Page Title: "Hall Effect Analog Controllers" - Description: What is Hall Effect technology - Product Card: - Product Image - Title: "Hall Effect Analog Right/Left side only" - Price: ₹1500 - Description - "New Arrival" Badge - Order Form: - Option Selection: Left | Right | Both - Pincode Selection - Customer Details - "Order Now" Button --- ## 8. CHECKOUT PAGE (/checkout) ### Elements: - Order Summary: - Product Image - Product Title - Quantity - Price - Customer Information Form: - Full Name - Email - Phone Number - Shipping Address - City - State - Pincode - Payment Method Selection: - COD (Cash on Delivery) - Online Payment (coming soon) - Order Total: - Subtotal - Shipping (if applicable) - Total Amount - "Place Order" Button - Error Message Display --- ## 9. BOOKING/ORDER CONFIRMATION PAGE (/booking-confirmation, /order-confirmation) ### Elements: - Success Icon/Animation - Confirmation Number (#confirmationNumber) - "Thank You" Message - Booking/Order Details: - Customer Name - Service/Product Name - Date & Time (for bookings) - Duration (for bookings) - Total Amount - Status - Contact Information: - Email - Phone - Next Steps Instructions - "Track Order" Button (future feature) - "Back to Home" Button --- ## 10. ABOUT PAGE (/about) ### Elements: - Hero Image - About Section: - "About Next Gen eSports" - Mission Statement - What we offer - Image with Gaming Scene - Game Collection Info: "400+ Games" - Features Grid: - PlayStation on Rent - Repair & Damage-free Console - 24x7 Services - Assured & Verified - Team Section (optional) - Values/Principles --- ## 11. CONTACT PAGE (/contact) ### Elements: - Page Title: "Get In Touch" - Contact Information: - Phone: +91 7738483030 / +91 7738454848 - Email: support@nextgenesports.in - Address: Mumbai, Maharashtra - Service Pincodes List - Contact Form: - Name - Email - Phone - Subject - Message - "Send Message" Button - Map (Google Maps embed) - Social Media Links: - Instagram - Facebook - YouTube - Twitter --- ## 12. SEARCH RESULTS PAGE (/search) ### Elements: - Search Query Display - Filter Options (similar to Games/Rentals pages) - Results Tabs: All | Rentals | Games | Services - Results Repeater (unified for all types) - "No Results" Message --- ## ELEMENT ID NAMING CONVENTION ### Repeaters: - `#rentalRepeater` - PlayStation rentals - `#gamesRepeater` - Games listing - `#servicesRepeater` - Booking services - `#similarGamesRepeater` - Similar games ### Within Repeaters (prepend item ID): - `#rentalCard`, `#gameCard`, `#serviceCard` - `#rentalImage`, `#gameImage`, `#serviceImage` - `#rentalTitle`, `#gameTitle`, `#serviceName` - `#rentNowBtn`, `#buyNowBtn`, `#bookServiceBtn` ### Form Inputs: - `#searchInput` - `#customerName`, `#customerEmail`, `#customerPhone` - `#bookingDate`, `#timeSlot`, `#durationHours` - `#gameSelector`, `#pincodeSelector` - `#additionalNotes` ### Buttons: - `#searchBtn`, `#checkPincodeBtn`, `#clearFiltersBtn` - `#confirmBookingBtn`, `#placeOrderBtn` - `#contactWhatsAppBtn`, `#contactCallBtn` ### Messages/Status: - `#errorMessage`, `#successMessage` - `#availabilityMessage`, `#pincodeMessage` - `#resultCount`, `#loadingIndicator` ### Filters: - `#consoleFilter`, `#genreFilter`, `#priceRangeFilter` - `#durationFilter`, `#stockFilter`, `#sortFilter` --- ## COLOR SCHEME TO USE IN WIX EDITOR **Primary Colors:** - **True Blue**: #0047AB (Primary buttons, links, accents) - **Black**: #000000 (Hero sections, footer, dark sections) - **White**: #FFFFFF (Main background, text on dark backgrounds) **Secondary Colors:** - **Gray Light**: #F5F5F5 (Card backgrounds, input fields) - **Gray Medium**: #666666 (Secondary text) - **Gray Dark**: #1A1A1A (Dark cards) **Accent Colors:** - **Border**: #E5E5E5 - **Success Green**: #10B981 (for available/in stock) - **Error Red**: #DC2626 (for out of stock/errors) - **Warning Yellow**: #FFD700 (for rare items) --- ## FONTS **Headings**: - Font: Helvetica Neue Bold / Arial Bold - Weights: 700 (Bold), 600 (Semibold) **Body Text**: - Font: Helvetica Neue / Arial - Weights: 400 (Regular), 500 (Medium) **Sizes**: - H1: 48px (Mobile: 32px) - H2: 36px (Mobile: 28px) - H3: 28px (Mobile: 24px) - Body: 16px - Small: 14px --- ## RESPONSIVE BREAKPOINTS - **Desktop**: 1200px+ - **Tablet**: 768px - 1199px - **Mobile**: < 768px Hide desktop navigation on mobile, show hamburger menu. Stack cards vertically on mobile. Full-width buttons on mobile. --- This structure ensures your Wix site will match the functionality and look of your current site while using the black/white/true blue theme!

top of page