199 lines
7.6 KiB
PHP
199 lines
7.6 KiB
PHP
<?php
|
|
|
|
/**
|
|
* Frontpage template.
|
|
*
|
|
* @package ThemeStarter
|
|
*/
|
|
|
|
?>
|
|
|
|
<!-- Get Header -->
|
|
<?php get_header(); ?>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="flex h-full items-center">
|
|
|
|
<div class="flex flex-col-reverse md:grid md:grid-cols-4 lg:grid-cols-5 gap-16 px-4 py-16 max-w-7xl mx-auto md:items-center">
|
|
|
|
<!-- Car Search -->
|
|
<!-- <div class="md:col-span-2 lg:col-span-2">
|
|
<?php /** echo do_shortcode('[form_vehicle_search]'); */ ?>
|
|
</div> -->
|
|
|
|
<!-- AutoCart Search -->
|
|
<div class="md:col-span-2 lg:col-span-2 bg-white">
|
|
<?php echo do_shortcode('[autocart]'); ?>
|
|
</div>
|
|
|
|
<!-- Hero Call To Action -->
|
|
<div class="md:col-span-2 lg:col-span-3">
|
|
<div class="text-white">
|
|
<h2 class="text-xl lg:text-3xl mb-2 lg:mb-4 uppercase">Driving Happiness</h2>
|
|
<h1 class="text-3xl lg:text-6xl mb-8 font-bold uppercase">Oakville's Largest Used Car Dealership</h1>
|
|
<div class="flex flex-col justify-start items-start space-y-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0">
|
|
<a class="px-8 py-4 bg-red-500 font-medium hover:bg-red-800 transition-colors duration-300" href="<?= esc_url(site_url('/autocart-results/?autocart-price-field=%5B10000%2C80000%5D&autocart-year-field=%5B2012%2C%222024%22%5D&autocart-make-field=allmakes&maxPrice=80000&minPrice=10000&maxYear=2024&minYear=2012&make=allmakes&autocart_nonce=419399fcdb&_wp_http_referer=%2F')); ?>">View Our Inventory</a>
|
|
<a class="font-medium" href="<?= esc_url(get_permalink('54')); ?>">Schedule Service Appointment <i class="ml-2 bi-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Home About Us -->
|
|
<section>
|
|
<div class="grid md:grid-cols-2 gap-8 px-4 py-16 max-w-7xl mx-auto">
|
|
|
|
<div>
|
|
|
|
<div class="space-y-2 mb-8">
|
|
<h3 class="text-stone-600 font-medium uppercase">About Us</h3>
|
|
<h2 class="text-4xl font-black text-stone-600"><span class="text-red-500">Rogers Motors</span> is the place to find and care for your care.</h2>
|
|
<p>Discover excellence at Rogers Motors in Oakville, ON. Let our dedicated team exceed your expectations as you service or find your perfect vehicle.</p>
|
|
</div>
|
|
|
|
<div class="space-y-2 mb-8">
|
|
|
|
<div class="flex space-x-4 items-center">
|
|
<i class="bi-cash-coin text-5xl text-stone-600 bg-stone-200 p-4 rounded-md"></i>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-bold">Financing Options</h3>
|
|
<p>Get approved for your car.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-4 items-center">
|
|
<i class="bi-car-front-fill text-5xl text-stone-600 bg-stone-200 p-4 rounded-md"></i>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-bold">Oakville's Largest Inventory</h3>
|
|
<p>Largest used car dealership in Oakville.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-4 items-center">
|
|
<i class="bi-tools text-5xl text-stone-600 bg-stone-200 p-4 rounded-md"></i>
|
|
<div class="flex flex-col">
|
|
<h3 class="font-bold">Auto Service Department</h3>
|
|
<p>Keep you new or pre-owned car in top condition.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<a class="text-white px-8 py-4 bg-red-500 font-medium hover:bg-red-800 transition-colors duration-300" href="<?= esc_url(get_permalink('2')); ?>">Learn More About Us</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center">
|
|
<img class="rounded-lg border-8 border-gray-300 shadow-lg" src="<?= get_template_directory_uri(); ?>/assets/images/bgs/rm-dealership-exterior.jpg" alt="Rogers Motors Dealership">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Financing Options -->
|
|
<section class="bg-gray-100">
|
|
|
|
<div class="py-16 px-4 max-w-7xl mx-auto">
|
|
|
|
<div class="text-center mb-8">
|
|
<h3 class="text-2xl text-stone-500 font-medium uppercase mb-4">Financing</h3>
|
|
<h2 class="text-4xl text-stone-600 font-black"><span class="text-red-500">Auto Loan</span> and <span class="text-red-500">Car Lease</span> resources</h2>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8">
|
|
|
|
<ul class="space-y-2">
|
|
<li class="p-4 bg-white rounded-lg shadow-md flex items-center space-x-4">
|
|
<i class="text-5xl bi-coin"></i>
|
|
<p class="font-bold">Finance Made Easy</p>
|
|
</li>
|
|
<li class="p-4 bg-white rounded-lg shadow-md flex items-center space-x-4">
|
|
<i class="text-5xl bi-graph-up-arrow"></i>
|
|
<p class="font-bold">Credit Rebuilding Program</p>
|
|
</li>
|
|
<li class="p-4 bg-white rounded-lg shadow-md flex items-center space-x-4">
|
|
<i class="text-5xl bi-patch-check-fill"></i>
|
|
<p class="font-bold">Certified Auto Warranty</p>
|
|
</li>
|
|
</ul>
|
|
|
|
<div>
|
|
<img src="<?= get_template_directory_uri() ?>/assets/images/bgs/family-leasing-financing-vehicle.webp" alt="Family Buying Car">
|
|
</div>
|
|
|
|
<div class="bg-white px-8 py-8">
|
|
<div>
|
|
<h3 class="text-2xl text-stone-700 font-medium uppercase mb-2">Flexible Financing Options</h3>
|
|
<div class="border-t-4 border-red-500 mb-4"></div>
|
|
</div>
|
|
<ul class="list-disc list-inside mb-8">
|
|
<li class="font-medium">Good Credit? <span class="text-green-500 font-bold">Accepted!</span><i class="bi-check-circle-fill text-green-500 ml-4"></i></li>
|
|
<li class="font-medium">Bad Credit? <span class="text-green-500 font-bold">Accepted!</span><i class="bi-check-circle-fill text-green-500 ml-4"></i></li>
|
|
<li class="font-medium">No Credit? <span class="text-green-500 font-bold">Accepted!</span><i class="bi-check-circle-fill text-green-500 ml-4"></i></li>
|
|
<li class="font-medium">Past Bankruptcy? <span class="text-green-500 font-bold">Accepted!</span><i class="bi-check-circle-fill text-green-500 ml-4"></i></li>
|
|
</ul>
|
|
<a class="text-white px-8 py-4 bg-red-500 font-medium hover:bg-red-800 transition-colors duration-300" href="<?= esc_url(get_permalink('45')); ?>">Financing Options<i class="bi-arrow-right ml-2"></i></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Service Department -->
|
|
<section>
|
|
|
|
<div class="py-16 px-4 max-w-7xl mx-auto">
|
|
|
|
<div class="mb-8">
|
|
<h3 class="text-2xl text-stone-500 font-medium uppercase mb-4">Our Service Department</h3>
|
|
<h2 class="text-4xl text-stone-600 font-black">Highly <span class="text-red-500">qualified</span> technicians. <span class="text-red-500">Timely</span> & <span class="text-red-500">exceptional</span> service.</h2>
|
|
</div>
|
|
|
|
<div class="mb-12">
|
|
<?php echo do_shortcode('[auto_services]') ?>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="text-white px-8 py-4 bg-red-500 font-medium hover:bg-red-800 transition-colors duration-300" href="<?= esc_url(get_permalink('54')); ?>">Schedule Service</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- MOM Rule -->
|
|
<section class="bg-gray-100">
|
|
|
|
<div class="py-16 px-4 max-w-7xl mx-auto">
|
|
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-4xl text-stone-600 font-black">The <span class="text-red-500">MOM</span> Rule</h2>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-8">
|
|
|
|
<div>
|
|
<img class="mx-auto" src="<?= get_template_directory_uri() ?>/assets/images/bgs/mom-rule-image.png" alt="Family Buying Car">
|
|
</div>
|
|
|
|
<div class="bg-white px-8 py-8">
|
|
<div>
|
|
<h3 class="text-2xl text-stone-700 font-bold mb-2">What is the MOM Rule?</h3>
|
|
<div class="border-t-4 border-red-500 mb-4"></div>
|
|
<p>We will not sell any vehicle we would not give to your own mom.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Get Footer -->
|
|
<?php get_footer(); ?>
|