Files
preview_sites/proposals/mobile-galaxy-gaming/mockup/index.html
T

1528 lines
63 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Mobile Galaxy Gaming | Mobile Game Truck Rentals in Winfield, IL</title>
<!-- SEO -->
<meta name="description" content="Mobile Galaxy Gaming brings PS5, Xbox, Switch, and VR to your driveway for birthday parties, school events, and corporate outings near Winfield, IL.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mobile-galaxy-gaming-preview.aimloperations.com/">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Mobile Galaxy Gaming | Mobile Game Truck Rentals">
<meta property="og:description" content="The party comes to you. Book a mobile gaming truck with PS5, Xbox, Switch & VR for birthdays, school events, and corporate parties in the Chicago suburbs.">
<meta property="og:url" content="https://mobile-galaxy-gaming-preview.aimloperations.com/">
<meta property="og:locale" content="en_US">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Mobile Galaxy Gaming | Mobile Game Truck Rentals">
<meta name="twitter:description" content="The party comes to you. Book a mobile gaming truck with PS5, Xbox, Switch & VR for birthdays, school events, and corporate parties in the Chicago suburbs.">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "EntertainmentBusiness",
"name": "Mobile Galaxy Gaming",
"url": "https://mobile-galaxy-gaming-preview.aimloperations.com/",
"telephone": "(773) 817-4239",
"address": {
"@type": "PostalAddress",
"streetAddress": "1N160 Cypress Ln",
"addressLocality": "Winfield",
"addressRegion": "IL",
"postalCode": "60190",
"addressCountry": "US"
},
"areaServed": ["Winfield, IL", "Chicago suburbs, IL"],
"sameAs": ["https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2"],
"description": "Mobile gaming truck rental offering PS5, Xbox, Nintendo Switch, VR, and HD TVs for birthday parties, school events, corporate outings, and community events."
}
</script>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<!-- Font-Awesome (CSS) -->
<link rel="stylesheet" href="./assets/vendors/font-awesome/css/all.min.css">
<!-- Magnific-Popup (CSS) -->
<link rel="stylesheet" href="./assets/vendors/magnific-popup/magnific-popup.css">
<!-- Swiper (CSS) -->
<link rel="stylesheet" href="./assets/vendors/swiper/swiper-bundle.min.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./assets/css/responsive.css">
<!-- Preview overrides -->
<style>
.preview-concept-banner { position: fixed; inset: 0 0 auto 0; z-index: 10000; padding: .7rem 1rem; background: #071426; color: #fff; text-align: center; font: 600 14px/1.4 Arial, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.preview-concept-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.preview-concept-banner strong { color: #35e0ff; }
body { padding-top: 45px; }
:root {
--main-color: #1f8fff;
--secondary-color: #060c18;
--accent-color: #35e0ff;
}
.logo-content .logo-name { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; color: inherit; }
.heading .sub span,
.award-item .tag span,
.award-item p span { color: var(--accent-color); }
.home-item .content h1 { font-size: 6.5rem; font-weight: 600; margin: 0 0 2.5rem; color: var(--white); line-height: 1.1; }
.home-item .content h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.features .feature-item .feature-title { font-size: 2.5rem; color: var(--white); margin: 1rem 0; }
.award-item .award-title { padding: 1.5rem; font-size: 2.5rem; line-height: 1.2; color: var(--white); margin: 0; }
.header .icon-container button.icon { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<!-- ==================== Preview Concept Banner (Start) ==================== -->
<div class="preview-concept-banner" role="note"><strong>UX Concept Preview</strong> — Mobile Galaxy Gaming. <a href="ux-gallery.html">View proposed screens</a> · <a href="pricing.html">View feature pricing</a></div>
<!-- ==================== Preview Concept Banner (End) ==================== -->
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>1N160 Cypress Ln, Winfield, IL 60190</span></li>
<li><i class="fa-solid fa-phone"></i><span><a href="tel:+17738174239" style="color:inherit;text-decoration:none">(773) 817-4239</a></span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" class="fa-brands fa-yelp" aria-label="Mobile Galaxy Gaming reviews on Yelp" rel="noopener noreferrer" target="_blank"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == Logo == -->
<a class="logo" href="./index.html">
<img src="./assets/images/Logo/Logo.png" alt="Mobile Galaxy Gaming logo">
<div class="logo-content">
<span class="logo-name">Mobile Galaxy Gaming</span>
<p>Mobile Game Truck Rentals</p>
</div>
</a>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="./index.html">home</a>
<a class="nav-btn" href="./pages/About/About.html">about</a>
<a class="nav-btn" href="./pages/Service/Services.html">services</a>
<a class="nav-btn" href="./pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<button type="button" id="search-btn" class="icon fa-solid fa-magnifying-glass" aria-label="Open search"></button>
<button type="button" id="menu-btn" class="icon fa-solid fa-bars-staggered" aria-label="Open menu"></button>
<a href="./pages/Pages/Get-Quote.html" class="btn">book now</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./pages/About/About.html">about</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./pages/Service/Services.html">services</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./pages/Contact/Contact.html">contact</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="./pages/Pages/Get-Quote.html">book now</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Home-Slider Area (Start) ==================== -->
<section class="home">
<!-- Home Slider -->
<div class="swiper-container home-slider">
<div class="swiper-wrapper">
<!-- Home Slide-1 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-1.jpg" alt="Mobile Galaxy Gaming game truck set up for a birthday party"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>The Party Comes To You <i class="fa-solid fa-gamepad"></i></h5> <!-- Slide Subheading -->
<h1>A <span>Mobile Gaming Truck</span> Right at Your Door</h1> <!-- Main Page Heading -->
<a href="tel:+17738174239" class="btn">Call (773) 817-4239</a> <!-- Call CTA -->
</div>
</div>
</div>
<!-- Home Slide-2 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-2.jpg" alt="Kids playing console games inside the Mobile Galaxy Gaming truck"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>PS5 · Xbox · Switch · VR <i class="fa-solid fa-gamepad"></i></h5> <!-- Slide Subheading -->
<h3>Birthday Parties & <span>School Events</span> Made Easy</h3> <!-- Slide Heading -->
<a href="./pages/Pages/Get-Quote.html" class="btn">Book Your Date</a> <!-- Booking Page Button -->
</div>
</div>
</div>
<!-- Home Slide-3 -->
<div class="swiper-slide home-item">
<img src="./assets/images/Home/Home-3.jpg" alt="Mobile Galaxy Gaming truck at a corporate event"> <!-- Slide Image -->
<div class="content">
<div class="text">
<h5>Corporate & Community <i class="fa-solid fa-gamepad"></i></h5> <!-- Slide Subheading -->
<h3>Multi-Screen <span>Gaming Fun</span> for Any Occasion</h3> <!-- Slide Heading -->
<a href="./pages/Contact/Contact.html" class="btn">Contact Us</a> <!-- Contact Page Button -->
</div>
</div>
</div>
</div>
<!-- Home Slider Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<!-- Home Slider Navigation arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- ==================== Home-Slider Area (End) ==================== -->
<!-- ==================== Features Area (Start) =================== -->
<section class="features">
<div class="box-container">
<!-- Feature 1 - Console Gaming -->
<div class="feature-item">
<i class="fa-solid fa-gamepad"></i>
<p class="feature-title">Console<br>Gaming</p>
<p>PS5, Xbox Series X, and Nintendo Switch loaded with the latest games for every age group.</p>
</div>
<!-- Feature 2 - VR Stations -->
<div class="feature-item">
<i class="fa-solid fa-vr-cardboard"></i>
<p class="feature-title">VR<br>Stations</p>
<p>Immersive virtual-reality experiences that keep the whole party talking afterward.</p>
</div>
<!-- Feature 3 - Multiple HD TVs -->
<div class="feature-item">
<i class="fa-solid fa-tv"></i>
<p class="feature-title">Multiple<br>HD TVs</p>
<p>Several big screens set up inside the truck so more guests can play at once.</p>
</div>
<!-- Feature 4 - We Come To You -->
<div class="feature-item">
<i class="fa-solid fa-truck"></i>
<p class="feature-title">We Come<br>To You</p>
<p>Just a driveway or parking area — we handle setup, power, and cleanup on-site.</p>
</div>
</div>
</section>
<!-- ==================== Features Area (End) ==================== -->
<!-- ==================== About Area (Start) ==================== -->
<section class="about">
<!-- About Image -->
<div class="image">
<div class="sub-image first">
<img src="./assets/images/About/About-1.jpg" alt="Mobile Galaxy Gaming truck parked and ready for a party">
</div>
<div class="sub-image last">
<img src="./assets/images/About/About-2.jpg" alt="Kids gaming inside the Mobile Galaxy Gaming truck">
<div class="experience"><div><span><i class="fa-solid fa-truck"></i></span> The party comes to you</div></div>
</div>
</div>
<!-- Introduction Content -->
<div class="content">
<div class="heading">
<div class="sub"><span>About Us</span><i class="fa-solid fa-gamepad"></i></div> <!-- Sub Heading -->
<h2>A Full Arcade That Rolls Up to Your Driveway</h2> <!-- Main Heading -->
</div>
<!-- Description -->
<p>Mobile Galaxy Gaming brings a fully loaded game truck to birthdays, school events, corporate outings, and community celebrations across Winfield and the Chicago suburbs. No setup hassle — we bring the consoles, screens, and games right to you.</p>
<!-- Key Features -->
<div class="about-features">
<div class="point-item">
<i class="fa-solid fa-gamepad"></i>
<div>
<h3>Latest Consoles</h3>
<p>PS5, Xbox Series X, and Nintendo Switch loaded with games for every age.</p>
</div>
</div> <!-- Feature 1 -->
<div class="point-item">
<i class="fa-solid fa-truck"></i>
<div>
<h3>Fully Mobile Setup</h3>
<p>We roll up, power up, and get the games going — no equipment for you to rent or move.</p>
</div>
</div> <!-- Feature 2 -->
</div>
<a href="./pages/Contact/Contact.html" class="btn">Contact Us</a> <!-- Contact Page Button -->
</div>
</section>
<!-- ==================== About Area (End) ====================== -->
<!-- ==================== Featured Systems Area (Start) ==================== -->
<section class="awards main linear-bg">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>What's In The Truck</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Featured Game Systems</h2>
</div>
<div class="box-container">
<!-- System 1 -->
<div class="award-item">
<p class="award-title">PlayStation<br>5</p>
<div class="middle"><div class="tag"><span>Console gaming</span></div></div>
<p>Latest AAA titles and party-friendly multiplayer favorites <span>PS5</span></p>
</div>
<!-- System 2 -->
<div class="award-item">
<p class="award-title">Xbox<br>Series X</p>
<div class="middle"><div class="tag"><span>Console gaming</span></div></div>
<p>Fast load times and a huge library of co-op and racing games <span>Xbox</span></p>
</div>
<!-- System 3 -->
<div class="award-item">
<p class="award-title">Nintendo<br>Switch</p>
<div class="middle"><div class="tag"><span>Console gaming</span></div></div>
<p>Mario Kart, Smash Bros, and family-friendly favorites for all ages <span>Switch</span></p>
</div>
<!-- System 4 -->
<div class="award-item">
<p class="award-title">VR<br>Stations</p>
<div class="middle"><div class="tag"><span>Virtual reality</span></div></div>
<p>Immersive VR headsets that give the party something unforgettable <span>VR</span></p>
</div>
</div>
</section>
<!-- ==================== Featured Systems Area (End) ====================== -->
<!-- ==================== Process Slider Area (Start) ==================== -->
<section class="process">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>how it works</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Booking Process</h2>
</div>
<!-- Process Slider -->
<div class="swiper-container process-slider">
<div class="swiper-wrapper">
<!-- Step 1: Pick Your Package -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-1.jpg" alt="Choosing a party package">
<div class="content">
<h3>Pick Your<br>Package</h3>
<h6><span class="process-step">01</span></h6>
<p>Tell us the event type and guest count so we can recommend the right package.</p>
</div>
</div>
<!-- Step 2: Book Your Date -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-2.jpg" alt="Booking a date on the calendar">
<div class="content">
<h3>Book Your<br>Date</h3>
<h6><span class="process-step">02</span></h6>
<p>Reserve your date and confirm the address, start time, and length of the party.</p>
</div>
</div>
<!-- Step 3: We Deliver -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-3.jpg" alt="Game truck arriving on-site">
<div class="content">
<h3>We<br>Deliver</h3>
<h6><span class="process-step">03</span></h6>
<p>The truck rolls up, we set up power and screens, and the games are ready to go.</p>
</div>
</div>
<!-- Step 4: Guests Play -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-4.jpg" alt="Guests playing games at the party">
<div class="content">
<h3>Guests<br>Play</h3>
<h6><span class="process-step">04</span></h6>
<p>A host stays on-site the whole time to run tournaments and help every player.</p>
</div>
</div>
<!-- Step 5: We Wrap Up -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-5.jpg" alt="Packing up after the event">
<div class="content">
<h3>We Wrap<br>Up</h3>
<h6><span class="process-step">05</span></h6>
<p>When time's up, we pack up the truck and leave your driveway just as we found it.</p>
</div>
</div>
<!-- Step 6: You Relax -->
<div class="swiper-slide process-item">
<img src="./assets/images/Process/Process-6.jpg" alt="Happy party host relaxing">
<div class="content">
<h3>You<br>Relax</h3>
<h6><span class="process-step">06</span></h6>
<p>No cleanup, no rented equipment to return — just a party everyone will remember.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Process Slider Area (End) ==================== -->
<!-- ==================== Why Choose Us Area (Start) ==================== -->
<section class="why-us linear-bg main">
<div class="box-container">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>Why Choose Us</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Built for Birthdays, Trusted by Schools</h2> <!-- New Main Heading -->
<!-- Main Description -->
<p>Mobile Galaxy Gaming is focused on one thing: a stress-free, unforgettable gaming experience delivered right to your event, every time.</p>
</div>
<!-- Main Content Area -->
<div class="content">
<!-- Why Choose Us Points - Left -->
<ul class="whyus-section-points one">
<li>
<i class="fa-solid fa-truck-fast"></i>
<div class="text">
<h5>Fully Mobile Setup</h5>
<p>Everything runs from the truck — no equipment for you to rent or return.</p>
</div>
</li>
<li>
<i class="fa-solid fa-gamepad"></i>
<div class="text">
<h5>Wide Game Library</h5>
<p>Something for every age, from family favorites to competitive multiplayer.</p>
</div>
</li>
<li>
<i class="fa-solid fa-user-shield"></i>
<div class="text">
<h5>Safe & Supervised</h5>
<p>A trained host stays on-site the whole event to run games and help guests.</p>
</div>
</li>
</ul>
<!-- Why Choose Us Image -->
<div class="image">
<img src="./assets/images/WhyUs/Pic-1.png" alt="Mobile Galaxy Gaming game truck exterior">
</div>
<!-- Why Choose Us Points - Right -->
<ul class="whyus-section-points two">
<li>
<i class="fa-solid fa-house-chimney"></i>
<div class="text">
<h5>Indoor/Outdoor Ready</h5>
<p>Driveway, parking lot, or gym — we adapt the setup to your space.</p>
</div>
</li>
<li>
<i class="fa-solid fa-star"></i>
<div class="text">
<h5>Flexible Packages</h5>
<p>Time and system options that scale from small birthdays to large events.</p>
</div>
</li>
<li>
<i class="fa-solid fa-phone"></i>
<div class="text">
<h5>Local & Responsive</h5>
<p>Based in Winfield and quick to respond to booking questions.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- ==================== Why Choose Us Area (End) ==================== -->
<!-- ==================== Service Slider Area (Start) ==================== -->
<section class="services">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>Explore Our Offerings</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Our Services</h2>
</div>
<!-- Service Slider -->
<div class="swiper-container service-slider">
<div class="swiper-wrapper">
<!-- Service 1: Birthday Party Gaming -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-1.jpg" alt="Birthday Party Gaming">
<div class="content">
<div class="icon"><i class="fa-solid fa-cake-candles"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Birthday Party Gaming</h3></a>
<p>The game truck rolls up to your driveway for an unforgettable birthday celebration.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 2: School & Youth Events -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-2.jpg" alt="School and Youth Events">
<div class="content">
<div class="icon"><i class="fa-solid fa-school"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>School & Youth Events</h3></a>
<p>A low-hassle reward for students, youth groups, and community programs.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 3: Corporate & Community Events -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-3.jpg" alt="Corporate and Community Events">
<div class="content">
<div class="icon"><i class="fa-solid fa-people-group"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Corporate & Community Events</h3></a>
<p>Team outings and neighborhood gatherings that get people playing together.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 4: Console Gaming -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-4.jpg" alt="Console Gaming">
<div class="content">
<div class="icon"><i class="fa-solid fa-gamepad"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Console Gaming</h3></a>
<p>PS5, Xbox Series X, and Nintendo Switch with a rotating library of games.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 5: VR Experience -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-5.jpg" alt="VR Experience">
<div class="content">
<div class="icon"><i class="fa-solid fa-vr-cardboard"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>VR Experience</h3></a>
<p>Add virtual-reality stations for an experience guests won't stop talking about.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 6: Multi-Screen Tournaments -->
<div class="swiper-slide service-item">
<img src="./assets/images/Service/Services/Service-6.jpg" alt="Multi-Screen Tournaments">
<div class="content">
<div class="icon"><i class="fa-solid fa-trophy"></i></div>
<a href="./pages/Service/Service-Single.html"><h3>Multi-Screen Tournaments</h3></a>
<p>Run bracket-style tournaments across multiple HD TVs for bigger groups.</p>
<a href="./pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Service Slider Area (End) ==================== -->
<!-- ==================== Count Area (Start) ==================== -->
<div class="counting">
<!-- Statistic Box 1: Game Systems -->
<div class="box">
<div class="info">
<div class="icon"><i class="fa-solid fa-gamepad"></i></div>
<div class="content">
<p class="stat-value count" data-count="6">6+</p> <!-- Count of game systems -->
<h3>Game Systems</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 2: Screens Per Party -->
<div class="box">
<div class="info">
<div class="icon"><i class="fa-solid fa-tv"></i></div>
<div class="content">
<p class="stat-value count" data-count="4">4+</p> <!-- Count of screens -->
<h3>Screens Per Party</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 3: Service Radius -->
<div class="box">
<div class="info">
<div class="icon"><i class="fa-solid fa-map-marked-alt"></i></div>
<div class="content">
<p class="stat-value count" data-count="25">25+</p> <!-- Miles served -->
<h3>Mile Service Radius</h3> <!-- Statistic description -->
</div>
</div>
</div>
<!-- Statistic Box 4: Happy Guests -->
<div class="box">
<div class="info">
<div class="icon"><i class="fas fa-heart"></i></div>
<div class="content">
<p class="stat-value count" data-count="500">500+</p> <!-- Count of guests hosted -->
<h3>Happy Guests Hosted</h3> <!-- Statistic description -->
</div>
</div>
</div>
</div>
<!-- ==================== Count Area (End) ==================== -->
<!-- ==================== Pricing Area (Start) ==================== -->
<section class="pricing">
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>Explore Our Packages</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Party Packages</h2>
</div>
<!-- Pricing Plans -->
<div class="box-container">
<!-- Pricing Plan 1 - Basic Party Package -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-1.jpg" alt="Basic Party Package"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>Basic<br>Party</h3>
<i class="fa-solid fa-gamepad"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$249</div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-gamepad"></i> 2-Hour Game Truck Visit</li>
<li><i class="fa-solid fa-gamepad"></i> 2 Game Systems</li>
<li><i class="fa-solid fa-gamepad"></i> Up to 8 Players</li>
<li><i class="fa-solid fa-gamepad"></i> On-Site Party Host</li>
<li><i class="fa-solid fa-gamepad"></i> Driveway or Backyard Setup</li>
</ul>
<a href="./pages/Pages/Get-Quote.html" class="btn">Select Plan</a>
</div>
</div>
</div>
<!-- Pricing Plan 2 - Premium Party Package -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-2.jpg" alt="Premium Party Package"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>Premium<br>Party</h3>
<i class="fa-solid fa-gamepad"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$349</div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-gamepad"></i> 3-Hour Game Truck Visit</li>
<li><i class="fa-solid fa-gamepad"></i> 4 Game Systems</li>
<li><i class="fa-solid fa-gamepad"></i> Up to 14 Players</li>
<li><i class="fa-solid fa-gamepad"></i> VR Station Add-On</li>
<li><i class="fa-solid fa-gamepad"></i> Tournament Bracket Play</li>
</ul>
<a href="./pages/Pages/Get-Quote.html" class="btn">Select Plan</a>
</div>
</div>
</div>
<!-- Pricing Plan 3 - All-Access Package -->
<div class="plan-item">
<img src="./assets/images/Pricing/Plan-3.jpg" alt="All-Access Package"> <!-- Plan Image -->
<div class="content">
<div class="intro">
<h3>All-Access<br>Party</h3>
<i class="fa-solid fa-gamepad"></i>
</div>
<div class="middle"><div class="price"><div class="tag">$449</div></div></div>
<div class="bottom">
<ul> <!-- Plan Features -->
<li><i class="fa-solid fa-gamepad"></i> 4-Hour Game Truck Visit</li>
<li><i class="fa-solid fa-gamepad"></i> All Game Systems</li>
<li><i class="fa-solid fa-gamepad"></i> Up to 20 Players</li>
<li><i class="fa-solid fa-gamepad"></i> VR & Multi-Screen Setup</li>
<li><i class="fa-solid fa-gamepad"></i> Dedicated Event Host</li>
</ul>
<a href="./pages/Pages/Get-Quote.html" class="btn">Select Plan</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Pricing Area (End) ====================== -->
<!-- ==================== Home Skills Area (Start) ==================== -->
<section class="custom-form home-skills linear-bg">
<div class="box-container">
<!-- Introduction Content -->
<div class="content">
<div class="heading">
<div class="sub"><span>Why Book With Us</span><i class="fa-solid fa-gamepad"></i></div> <!-- Sub Heading -->
<h2>Your Trusted Mobile Gaming Partner</h2> <!-- Main Heading -->
</div>
<!-- Description -->
<p>Mobile Galaxy Gaming combines the latest game systems with reliable, on-time delivery. Our hosts run every event so you can relax and enjoy the party.</p>
<!-- Company's Skills -->
<div class="team-single">
<div class="skills">
<!-- On-Time Delivery -->
<div class="box">
<h3>On-Time Delivery<span> 98% </span></h3>
<div class="progress-bar"> <span style="width: 98%;"></span> </div>
</div>
<!-- Game Variety -->
<div class="box">
<h3>Game Variety<span> 95% </span></h3>
<div class="progress-bar"> <span style="width: 95%;"></span> </div>
</div>
<!-- Guest Satisfaction -->
<div class="box">
<h3>Guest Satisfaction<span> 97% </span></h3>
<div class="progress-bar"> <span style="width: 97%;"></span> </div>
</div>
<!-- Easy Booking -->
<div class="box">
<h3>Easy Booking<span> 93% </span></h3>
<div class="progress-bar"> <span style="width: 93%;"></span> </div>
</div>
</div>
</div>
<a href="./pages/Contact/Contact.html" class="btn btn-2">Contact Us</a>
<!-- Contact Page Button -->
</div>
</div>
</section>
<!-- ==================== Home Skills Area (End) ==================== -->
<!-- ==================== Projects Area (Start) ==================== -->
<section class="projects">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>Explore Our Events</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Past Events</h2>
</div>
<!-- Events Filter Buttons -->
<ul class="tab-buttons">
<li class="button active" data-filter="*">All</li>
<li class="button" data-filter=".birthday">Birthdays</li>
<li class="button" data-filter=".school">School & Community</li>
<li class="button" data-filter=".corporate">Corporate</li>
</ul>
<!-- Events Container -->
<div class="box-container">
<!-- Event 1 - Backyard Birthday Bash -->
<div class="project-item birthday">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-1.jpg" alt="Backyard Birthday Bash"> <!-- Event Image -->
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-1.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Birthday Party</p>
<a href="./pages/Service/Service-Single.html"><h3>Backyard Birthday Bash</h3></a>
</div>
</div>
</div>
</div>
<!-- Event 2 - School Game Day -->
<div class="project-item school">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-2.jpg" alt="School Game Day">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-2.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>School & Community</p>
<a href="./pages/Service/Service-Single.html"><h3>School Game Day</h3></a>
</div>
</div>
</div>
</div>
<!-- Event 3 - Corporate Team Mixer -->
<div class="project-item corporate">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-3.jpg" alt="Corporate Team Mixer">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-3.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Corporate Event</p>
<a href="./pages/Service/Service-Single.html"><h3>Corporate Team Mixer</h3></a>
</div>
</div>
</div>
</div>
<!-- Event 4 - Neighborhood Block Party -->
<div class="project-item school">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-4.jpg" alt="Neighborhood Block Party">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-4.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>School & Community</p>
<a href="./pages/Service/Service-Single.html"><h3>Neighborhood Block Party</h3></a>
</div>
</div>
</div>
</div>
<!-- Event 5 - VR Showcase -->
<div class="project-item birthday">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-5.jpg" alt="VR Showcase Birthday">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-5.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Birthday Party</p>
<a href="./pages/Service/Service-Single.html"><h3>VR Showcase Birthday</h3></a>
</div>
</div>
</div>
</div>
<!-- Event 6 - Teen Game Night Lock-In -->
<div class="project-item corporate">
<div class="projects-content">
<img src="./assets/images/Project/Projects/Project-6.jpg" alt="Teen Game Night Lock-In">
<div class="content">
<div class="btn-container">
<a class="view" href="./assets/images/Project/Projects/Project-6.jpg"><i class="fa-solid fa-plus"></i></a>
<a href="./pages/Service/Service-Single.html"><i class="fa-solid fa-link"></i></a>
</div>
<div class="text">
<p>Corporate Event</p>
<a href="./pages/Service/Service-Single.html"><h3>Teen Game Night Lock-In</h3></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Projects Area (End) ==================== -->
<!-- ==================== Get A Quote Area (Start) ==================== -->
<section class="custom-form get-quote linear-bg">
<div class="box-container">
<div class="content">
<form class="dark-form" id="quote-form" method="post">
<!-- Form Heading -->
<div class="heading">
<div class="sub"><span>Let's Plan Your Party</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Request A Booking</h2>
</div>
<div class="input-box">
<!-- Name Input Field -->
<div class="input-field">
<label for="name" class="fa-solid fa-user"></label>
<input type="text" name="name" class="box" id="name" placeholder="Name" required>
</div>
<!-- Email Input Field -->
<div class="input-field">
<label for="email" class="fa-solid fa-envelope"></label>
<input type="email" name="email" class="box" id="email" placeholder="Email" required>
</div>
</div>
<div class="input-box">
<!-- Phone Number Input Field -->
<div class="input-field">
<label for="number" class="fa-solid fa-phone"></label>
<input type="tel" name="number" class="box" id="number" placeholder="Phone Number" required>
</div>
<!-- Event Type Select Field -->
<div class="select">
<div class="select-container">
<label for="service-type" class="fa-solid fa-gamepad"></label>
<select class="select-box" id="service-type" name="service-type" required>
<option value="">Event Type</option>
<option value="birthday">Birthday Party</option>
<option value="school">School / Youth Event</option>
<option value="corporate">Corporate Event</option>
<option value="community">Community Event</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="input-box">
<!-- Event Date Input Field -->
<div class="input-field">
<label for="event-date" class="fa-solid fa-calendar-days"></label>
<input type="date" name="event-date" class="box" id="event-date" required>
</div>
<!-- Address Input Field -->
<div class="input-field">
<label for="address" class="fa-solid fa-location-dot"></label>
<input type="text" name="address" class="box" id="address" placeholder="Event Address" required>
</div>
</div>
<div class="input-box">
<!-- Setting Select Field -->
<div class="select">
<div class="select-container">
<label for="property-type" class="fa-solid fa-house"></label>
<select class="select-box" id="property-type" name="property-type" required>
<option value="">Indoor or Outdoor</option>
<option value="indoor">Indoor</option>
<option value="outdoor">Outdoor</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<!-- Guest Count Input Field -->
<div class="input-field">
<label for="area-size" class="fas fa-user-group"></label>
<input type="number" name="guest-count" class="box" id="area-size" min="1" placeholder="Number of Guests"
required>
</div>
</div>
<!-- Comment Text Area -->
<div class="input-field text-area">
<label for="comment" class="fa-solid fa-comment"></label>
<textarea cols="30" rows="10" name="comment" class="box" id="comment" placeholder="Message"
required></textarea>
</div>
<!-- Add-Ons Checkboxes -->
<div class="extra-services">
<!-- VR Station Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="vr-station-checkbox" name="extra-services[]"
value="VR Station">
<label for="vr-station-checkbox">VR Station</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Extra Hour Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="extra-hour-checkbox" name="extra-services[]" value="Extra Hour">
<label for="extra-hour-checkbox">Extra Hour</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Tournament Setup Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="tournament-checkbox" name="extra-services[]" value="Tournament Setup">
<label for="tournament-checkbox">Tournament Setup</label>
<div class="checkbox-indicator"></div>
</div>
</div>
<!-- Submit Button for Booking Request -->
<button type="submit" class="btn" name="submit" id="submit">submit</button>
<span class="alert" id="msg"></span>
</form>
</div>
</div>
</section>
<!-- ==================== Get A Quote Area (End) ==================== -->
<!-- ==================== Banner Area (Start) ==================== -->
<section class="banner">
<div class="content">
<div class="heading">
<div class="sub">
<span>Bring The Galaxy To Your Driveway</span>
<i class="fa-solid fa-gamepad"></i>
</div>
</div>
<h2>The Party Comes to You — Book the Game Truck Today</h2>
<a href="./pages/Pages/Get-Quote.html" class="btn">Book Now</a>
</div>
</section>
<!-- ==================== Banner Area (End) ==================== -->
<!-- ==================== Team Area (Start) ==================== -->
<section class="team">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>Meet Our Crew</span><i class="fa-solid fa-gamepad"></i></div> <!-- Sub Heading -->
<h2>Our Team</h2>
</div>
<div class="box-container">
<!-- Team Member 1 -->
<div class="team-item">
<img src="./assets/images/Team/Team-1.jpg" alt="Game truck host"> <!-- Team Member Image -->
<div class="content">
<div class="intro">
<h3>Ethan Green</h3> <!-- Team Member Name -->
<p>Game Truck Host</p> <!-- Team Member Designation -->
</div>
<div class="icon-container">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
</div>
<!-- Team Member 2 -->
<div class="team-item">
<img src="./assets/images/Team/Team-2.jpg" alt="Event coordinator">
<div class="content">
<div class="intro">
<h3>Sophia Bloom</h3>
<p>Event Coordinator</p>
</div>
<div class="icon-container">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-item">
<img src="./assets/images/Team/Team-3.jpg" alt="Game truck technician">
<div class="content">
<div class="intro">
<h3>Liam Woods</h3>
<p>Truck & Tech Lead</p>
</div>
<div class="icon-container">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
</div>
<!-- Team Member 4 -->
<div class="team-item">
<img src="./assets/images/Team/Team-4.jpg" alt="Booking specialist">
<div class="content">
<div class="intro">
<h3>Olivia Fern</h3>
<p>Booking Specialist</p>
</div>
<div class="icon-container">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== Team Area (End) ==================== -->
<!-- ==================== Testimonials Area (Start) ==================== -->
<section class="testimonial main linear-bg">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>What Our Customers Say</span><i class="fa-solid fa-gamepad"></i></div> <!-- Sub Heading -->
<h2>Customer Testimonials</h2>
</div>
<!-- Testimonial Slider -->
<div class="swiper-container testimonial-slider">
<div class="swiper-wrapper">
<!-- Testimonial Slide 1 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-1.jpg" alt="Parent who booked a birthday party">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Justin Smith</h4>
<h6>Birthday Parent</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"The truck rolled right into our driveway and the kids didn't want to stop playing. Setup was fast and the host kept everyone organized the whole time."</p>
</div>
<!-- Testimonial Slide 2 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-2.jpg" alt="School event organizer">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Taylor Reed</h4>
<h6>School Event Organizer</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"We booked the game truck for our school's fun fair and it was the highlight of the day. Easy to schedule and the students loved every minute."</p>
</div>
<!-- Testimonial Slide 3 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-3.jpg" alt="Corporate event planner">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Michael Brown</h4>
<h6>Corporate Event Planner</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"A fun, low-effort way to entertain our whole team. The tournament setup got even the non-gamers competing by the end of the afternoon."</p>
</div>
<!-- Testimonial Slide 4 -->
<div class="swiper-slide testi-item">
<img src="./assets/images/Testimonials/Pic-4.jpg" alt="Community event host">
<i class="fas fa-quote-right"></i>
<div class="text">
<h4>Nisa Klein</h4>
<h6>Community Event Host</h6>
</div>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<p>"Mobile Galaxy Gaming showed up on time, set up quickly, and the VR station was a hit with kids and adults alike. Highly recommend for any event."</p>
</div>
</div>
<!-- Testimonial Slider Pagination -->
<div class="swiper-pagination swiper-pagination3"></div>
</div>
</section>
<!-- ==================== Testimonials Area (End) ==================== -->
<!-- ==================== Faqs Area (Start) ==================== -->
<section class="faq">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>FAQ's</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Frequently Asked Questions</h2>
</div>
<div class="box-container">
<!-- FAQ Image -->
<div class="image">
<img src="./assets/images/FAQs/FAQs.jpg" alt="Mobile Galaxy Gaming FAQs">
</div>
<!-- FAQ Accordion Container -->
<div class="accordion-container">
<!-- FAQ Accordion 1: Driveway Space -->
<div class="accordion active">
<div class="accordion-heading">
<h3>How much driveway space do you need?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Most bookings just need a flat parking spot or driveway roughly the size of a standard parking space, plus room for guests to move around outside the truck.</p>
</div>
<!-- FAQ Accordion 2: Power Needs -->
<div class="accordion">
<div class="accordion-heading">
<h3>Do you need access to power?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">The truck runs on its own power, so a standard outlet isn't required — just let us know if you'd like us to use house power instead.</p>
</div>
<!-- FAQ Accordion 3: Weather Policy -->
<div class="accordion">
<div class="accordion-heading">
<h3>What happens if it rains?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">No problem — all the gaming happens inside the climate-controlled truck, so parties go on rain or shine.</p>
</div>
<!-- FAQ Accordion 4: Age Groups -->
<div class="accordion">
<div class="accordion-heading">
<h3>What age groups is this good for?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Our game library covers family-friendly titles for young kids up through competitive multiplayer games that teens and adults enjoy.</p>
</div>
<!-- FAQ Accordion 5: Player Capacity -->
<div class="accordion">
<div class="accordion-heading">
<h3>How many players can game at once?</h3>
<i class="fas fa-plus"></i>
</div>
<p class="accordion-content">Depending on the package, 8 to 20+ guests can play across multiple screens and systems at the same time.</p>
</div>
</div>
</div>
</section>
<!-- ==================== Faqs Area (End) ==================== -->
<!-- ==================== Newsletter Area (Start) ==================== -->
<section class="newsletter-subscribe">
<div class="content">
<h2>Get Booking Date Openings</h2> <!-- Newsletter Heading -->
<p>Sign up to hear about seasonal openings, party tips, and special offers from Mobile Galaxy Gaming.</p>
<!-- Newsletter Description -->
<form class="newsletter-form" method="post" id="newsletter-form-1">
<div class="box-container">
<input type="email" id="sub-email-1" name="email" placeholder="Your email address" required>
<!-- Email Input Field -->
<button type="submit" class="btn" name="submit" id="submit-1">Subscribe</button> <!-- Subscribe Button -->
</div>
<!-- Alert Message -->
<span class="alert" id="msg-1"></span>
</form>
</div>
</section>
<!-- ==================== Newsletter Area (End) ==================== -->
<!-- ==================== Clients Area (Start) ==================== -->
<section class="home-clients clients">
<!-- Client Slider Container -->
<div class="swiper-container client-slider">
<!-- Partner Logos -->
<div class="swiper-wrapper">
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-1.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-2.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-3.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-4.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-5.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-6.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-7.png" alt="" role="presentation"></a></div>
<div class="swiper-slide client-item"><a href="./pages/About/About.html"><img src="./assets/images/Clients/Client-8.png" alt="" role="presentation"></a></div>
</div>
</div>
</section>
<!-- ==================== Clients Area (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Company Information & Social Media Links -->
<div class="footer-item">
<!-- Company Logo -->
<a class="logo" href="./index.html">
<img src="./assets/images/Logo/Logo.png" alt="Mobile Galaxy Gaming logo">
<div class="logo-content">
<span class="logo-name">Mobile Galaxy Gaming</span>
<p>Mobile Game Truck Rentals</p>
</div>
</a>
<!-- Description -->
<p>Bringing PS5, Xbox, Switch, and VR gaming to birthdays, school events, and corporate parties across Winfield and the Chicago suburbs.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span><a href="tel:+17738174239" style="color:inherit;text-decoration:none">(773) 817-4239</a></span></p>
<p><i class="fas fa-map-marker-alt"></i><span>1N160 Cypress Ln, Winfield, IL 60190</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
<!-- Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">Birthday Party Gaming</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">School & Youth Events</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">Corporate & Community Events</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">Console Gaming</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">VR Experience</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Service-Single.html">Multi-Screen Tournaments</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/About/About.html">About Us</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Service/Services.html">Services</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Contact/Contact.html">Contact Us</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="./pages/Pages/Get-Quote.html">Book Now</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed about booking openings, party tips, and special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Copyright -->
<div class="content">
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="./assets/vendors/jquery/jquery.min.js"></script>
<!-- Swiper (JS) -->
<script src="./assets/vendors/swiper/swiper-bundle.min.js"></script>
<!-- Magnific-Popup JS -->
<script src="./assets/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Isotope (JS) -->
<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
<!-- Custom Script Files -->
<script src="assets/js/script.js"></script> <!-- Additional website functionality -->
<script src="assets/js/nav-link-toggler.js"></script> <!-- Mobile navigation link toggling -->
<script src="assets/js/home-slider.js"></script> <!-- Dynamic Home Slider -->
<script src="assets/js/counter-up.js"></script> <!-- Numerical counting animation -->
<script src="assets/js/service-slider.js"></script> <!-- Service slider control -->
<script src="assets/js/process-slider.js"></script> <!-- Process slider control -->
<script src="assets/js/projects.js"></script> <!-- Projects functionality, including image filtering -->
<script src="assets/js/testi-slider.js"></script> <!-- Interactive Testimonial Slider -->
<script src="assets/js/client-slider.js"></script> <!-- Interactive Client Slider -->
<script src="assets/js/newsletter.js"></script>
<script src="assets/js/quote.js"></script>
<script src="assets/js/accordion.js"></script> <!-- Controls the functionality of accordions for displaying content sections. -->
</body>
</html>