Working on the homepage
This commit is contained in:
Shaun Collins
@@ -0,0 +1,62 @@
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<h1 class="fw-bold mb-4 text-primary">About Us</h1>
|
||||
<p class="lead mb-4">
|
||||
Based in Shrewsbury and serving Shropshire and nationwide, <strong>Stu Moves You</strong> is your trusted partner for professional removals and efficient waste management.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
We specialize in both domestic and commercial removals, bringing years of experience and a dedication to care for every job. Whether you're moving your family home or relocating your entire business, our team ensures a seamless, stress-free experience from start to finish.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
As fully licensed and insured waste management specialists, we also provide a convenient and cost-effective alternative to skip hire. We take pride in our competitive pricing and our commitment to responsible disposal, guaranteeing to beat any price on waste removal.
|
||||
</p>
|
||||
<div class="row g-4 mt-2">
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="fas fa-check-circle text-primary mt-1 me-3"></i>
|
||||
<div>
|
||||
<h2 class="h5 fw-bold mb-1">Licensed & Insured</h2>
|
||||
<p class="text-muted small mb-0">Complete peace of mind for every move.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="fas fa-truck text-primary mt-1 me-3"></i>
|
||||
<div>
|
||||
<h2 class="h5 fw-bold mb-1">Nationwide Coverage</h2>
|
||||
<p class="text-muted small mb-0">From Shrewsbury to anywhere in the UK.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="fas fa-trash-alt text-primary mt-1 me-3"></i>
|
||||
<div>
|
||||
<h2 class="h5 fw-bold mb-1">Waste Management</h2>
|
||||
<p class="text-muted small mb-0">Cheaper than a skip, guaranteed!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-start">
|
||||
<i class="fas fa-users text-primary mt-1 me-3"></i>
|
||||
<div>
|
||||
<h2 class="h5 fw-bold mb-1">Domestic & Commercial</h2>
|
||||
<p class="text-muted small mb-0">Tailored solutions for homes and offices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 mt-5 mt-lg-0">
|
||||
<div class="position-relative">
|
||||
<img src="/images/banner.jpg" alt="About Stu Moves You" class="img-fluid rounded-3 shadow-lg">
|
||||
<div class="position-absolute bottom-0 end-0 bg-primary text-secondary p-4 rounded-start-3 shadow-lg d-none d-md-block" style="max-width: 250px;">
|
||||
<p class="mb-0 fw-bold h5">Professional, affordable and effective!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,50 +1,56 @@
|
||||
<div class="container">
|
||||
<div class="text-center mb-4">
|
||||
<h1>Stress-Free Removals, Nationwide</h1>
|
||||
<p>
|
||||
Whether you're moving across town or to the other end of the country,
|
||||
our experienced team provides a seamless and efficient removal service tailored to your needs.
|
||||
We handle every aspect of your move, including:
|
||||
<h1 class="fw-bold text-primary">Stress-Free Removals, Nationwide</h1>
|
||||
<p class="lead">
|
||||
From local relocations to nationwide moves, our dedicated team delivers a seamless, high-quality service tailored to your specific requirements. We manage every detail of your transition with professional care and efficiency, including:
|
||||
</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2>Full Removal Services</h2>
|
||||
<p>
|
||||
From carefully packing your belongings to safely transporting them to your new destination.
|
||||
<h2 class="h4 fw-bold">Comprehensive Relocation</h2>
|
||||
<p class="mb-0">
|
||||
Our end-to-end removal service handles everything from initial planning to safe delivery, ensuring a seamless transition to your new home.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2>Professional Packing Services</h2>
|
||||
<p>
|
||||
Let our skilled packers take the stress out of packing. We ensure your items are secure and protected for transit.
|
||||
<h2 class="h4 fw-bold">Expert Packing Solutions</h2>
|
||||
<p class="mb-0">
|
||||
Relieve the pressure of moving with our professional packing team, using industry-standard techniques to keep your items secure and protected.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2>Packing Materials</h2>
|
||||
<p>
|
||||
We can source and supply all the high-quality packing materials you need, saving you time and effort.
|
||||
<h2 class="h4 fw-bold">Premium Packing Supplies</h2>
|
||||
<p class="mb-0">
|
||||
We supply high-grade, durable materials—including reinforced boxes and protective wrap—designed to safeguard your valuables throughout the journey.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2>Transportation to New Address or Storage</h2>
|
||||
<p>
|
||||
We'll move your items safely and efficiently to your new home or business premises, or to a secure storage facility.
|
||||
<h2 class="h4 fw-bold">Secure Nationwide Transport</h2>
|
||||
<p class="mb-0">
|
||||
Our modern fleet and experienced drivers ensure the timely and safe transportation of your possessions to any destination across the UK.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2>Storage Solutions</h2>
|
||||
<p>
|
||||
Need storage? We can help you find a suitable and secure storage facility to meet your specific requirements.
|
||||
<h2 class="h4 fw-bold">Flexible Storage Options</h2>
|
||||
<p class="mb-0">
|
||||
Should you require extra space, we provide access to secure, monitored storage facilities for both short and long-term requirements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="text-secondary bg-primary p-4 rounded-3 h-100">
|
||||
<h2 class="h4 fw-bold">Professional Waste Clearance</h2>
|
||||
<p class="mb-0">
|
||||
As licensed waste carriers, we offer a cost-effective alternative to skip hire, with a commitment to responsible disposal and competitive pricing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<div class="container py-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold text-primary">Our Recent Jobs</h2>
|
||||
<p class="lead">Take a look at some of our recent jobs.</p>
|
||||
</div>
|
||||
|
||||
<div id="jobsCarousel" class="carousel slide shadow-lg rounded-3 overflow-hidden">
|
||||
<div class="carousel-inner bg-light" id="carousel-items" style="min-height: 400px;">
|
||||
<div class="carousel-item active">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#jobsCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#jobsCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true" style="background-size: 50%;"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
|
||||
<div class="carousel-indicators" id="carousel-indicators">
|
||||
<!-- Indicators will be injected here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#jobsCarousel .carousel-item img {
|
||||
height: 500px;
|
||||
object-fit: contain;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#jobsCarousel .carousel-item img {
|
||||
height: 350px;
|
||||
}
|
||||
#jobsCarousel .carousel-inner,
|
||||
#jobsCarousel .carousel-item > div {
|
||||
min-height: 350px !important;
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#jobsCarousel .carousel-indicators [data-bs-target] {
|
||||
background-color: var(--bs-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const carouselInner = document.getElementById('carousel-items');
|
||||
const indicatorsContainer = document.getElementById('carousel-indicators');
|
||||
|
||||
fetch('{{ route('Images.jobs') }}')
|
||||
.then(response => response.json())
|
||||
.then(images => {
|
||||
if (!images || images.length === 0) {
|
||||
carouselInner.innerHTML = `
|
||||
<div class="carousel-item active">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
||||
<p class="text-muted">No recent job images available.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
carouselInner.innerHTML = '';
|
||||
indicatorsContainer.innerHTML = '';
|
||||
|
||||
images.forEach((image, index) => {
|
||||
// Create Item
|
||||
const item = document.createElement('div');
|
||||
item.className = `carousel-item ${index === 0 ? 'active' : ''}`;
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = `/images/Jobs/${image}`;
|
||||
img.className = 'd-block w-100';
|
||||
img.alt = `Job image ${index + 1}`;
|
||||
|
||||
item.appendChild(img);
|
||||
carouselInner.appendChild(item);
|
||||
|
||||
// Create Indicator
|
||||
const indicator = document.createElement('button');
|
||||
indicator.type = 'button';
|
||||
indicator.dataset.bsTarget = '#jobsCarousel';
|
||||
indicator.dataset.bsSlideTo = index;
|
||||
indicator.className = index === 0 ? 'active' : '';
|
||||
indicator.setAttribute('aria-label', `Slide ${index + 1}`);
|
||||
if (index === 0) indicator.setAttribute('aria-current', 'true');
|
||||
|
||||
indicatorsContainer.appendChild(indicator);
|
||||
});
|
||||
|
||||
if (images.length <= 1) {
|
||||
document.querySelectorAll('#jobsCarousel [data-bs-slide]').forEach(el => el.style.display = 'none');
|
||||
indicatorsContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
// Initialize carousel after items are added
|
||||
if (window.bootstrap && window.bootstrap.Carousel) {
|
||||
new window.bootstrap.Carousel(document.getElementById('jobsCarousel'), {
|
||||
ride: 'carousel',
|
||||
interval: 5000
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading job images:', error);
|
||||
carouselInner.innerHTML = `
|
||||
<div class="carousel-item active">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
|
||||
<p class="text-danger">Failed to load images. Please try again later.</p>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user