Here is the custom static HTML code for your Squarespace homepage. The Quote form is gone, replaced with a clean layout and a spot for your reviews widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Shelf Car Care - Mobile Detailing</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.hero-bg {
background-color: #111827;
background-image: linear-gradient(rgba(17, 24, 39, 0.6), rgba(17, 24, 39, 0.8)), url('https://images.squarespace-cdn.com/content/v1/68ae1d9b4868ec7ca0f28519/3765fb79-44fc-4c98-9d25-f8ee7becd61b/unsplash-image-3ZUsNJhi_Ik.jpg');
background-size: cover;
background-position: center;
}
#tscc-wrapper, #tscc-wrapper * {
box-sizing: border-box;
}
#tscc-wrapper {
visibility: hidden;
}
</style>
<script>
(function() {
var MOBILE_BREAKPOINT = 768;
function expand() {
var wrapper = document.getElementById('tscc-wrapper');
if (!wrapper) return;
var isMobile = window.innerWidth < MOBILE_BREAKPOINT;
if (isMobile) {
var el = wrapper.parentElement;
while (el && el !== document.body) {
el.style.paddingLeft = '0';
el.style.paddingRight = '0';
el.style.marginLeft = '0';
el.style.marginRight = '0';
el.style.maxWidth = '100%';
el.style.width = '100%';
el = el.parentElement;
}
wrapper.style.position = 'static';
wrapper.style.width = '100%';
wrapper.style.transform = 'none';
wrapper.style.left = 'auto';
wrapper.style.paddingTop = '0';
wrapper.style.marginTop = '0';
} else {
var el = wrapper.parentElement;
while (el && el !== document.body) {
el.style.overflow = 'visible';
el.style.overflowX = 'visible';
el.style.maxWidth = 'none';
el.style.width = '100%';
el.style.padding = '0';
el.style.margin = '0';
el = el.parentElement;
}
var vw = window.innerWidth;
var rect = wrapper.getBoundingClientRect();
wrapper.style.position = 'relative';
wrapper.style.width = vw + 'px';
wrapper.style.left = '0';
wrapper.style.transform = 'translateX(' + (-rect.left) + 'px)';
}
wrapper.style.visibility = 'visible';
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', expand);
} else {
expand();
}
window.addEventListener('resize', expand);
})();
</script>
</head>
<body class="bg-gray-50 text-gray-900 m-0 p-0">
<div id="tscc-wrapper">
<!-- Hero Section -->
<header class="hero-bg !text-white min-h-[85vh] flex flex-col justify-center">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center w-full">
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-4" style="color: white !important;">
Premium Mobile Detailing
</h1>
<p class="text-xl md:text-2xl font-medium mb-8" style="color: #d1d5db !important;">
Orlando, FL
</p>
<!-- Star rating -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 mb-10">
<div class="flex gap-0.5">
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-white font-semibold text-base text-center">43 Five-Star Reviews on Google</span>
</div>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-4 w-full justify-center max-w-2xl mx-auto mb-10">
<a href="https://www.topshelfcarcare.com/packages-and-pricing" class="flex items-center justify-center bg-amber-500 hover:bg-amber-600 text-white text-lg font-bold py-4 px-8 rounded-xl shadow-lg transition-all duration-300 hover:shadow-amber-500/30 hover:-translate-y-1">
Packages & Pricing
</a>
<a href="https://www.topshelfcarcare.com/createyourownpackage" class="flex items-center justify-center bg-white hover:bg-gray-100 text-gray-900 text-lg font-bold py-4 px-8 rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
Create Your Own Package
</a>
</div>
<!-- Trust badges -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 text-gray-200 text-sm font-medium">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
<span>Fully licensed & insured</span>
</div>
<span class="hidden sm:block text-gray-600">•</span>
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/></svg>
<span>We bring our own water & power</span>
</div>
</div>
</div>
</header>
<!-- How It Works Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900">How It Works</h2>
<p class="mt-4 text-xl text-gray-600">Professional detailing delivered straight to your office or home.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
<div class="p-8 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
<div class="w-16 h-16 bg-amber-500 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-amber-200 shadow-lg">1</div>
<h3 class="text-2xl font-bold mb-4 text-gray-900">Book Online</h3>
<p class="text-gray-600 leading-relaxed">Choose your package, pick a date, and schedule your appointment in minutes directly on our website.</p>
</div>
<div class="p-8 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
<div class="w-16 h-16 bg-amber-500 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-amber-200 shadow-lg">2</div>
<h3 class="text-2xl font-bold mb-4 text-gray-900">We Come To You</h3>
<p class="text-gray-600 leading-relaxed">Our fully-equipped mobile unit arrives at your home or office anywhere in the Orlando area.</p>
</div>
<div class="p-8 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
<div class="w-16 h-16 bg-amber-500 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-amber-200 shadow-lg">3</div>
<h3 class="text-2xl font-bold mb-4 text-gray-900">Enjoy The Shine</h3>
<p class="text-gray-600 leading-relaxed">Experience that brand-new car feeling without ever having to drop off your vehicle at the shop.</p>
</div>
</div>
</div>
</section>
<!-- Monthly Mint Section -->
<section class="py-20 bg-gray-900">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-flex items-center gap-2 bg-amber-500/20 border border-amber-400/40 text-amber-300 text-sm font-semibold px-4 py-1.5 rounded-full mb-6 tracking-wide uppercase">
Recurring Service
</div>
<h2 class="text-3xl md:text-4xl font-extrabold text-white mb-4">The Monthly Mint Program</h2>
<p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">Keep your car looking freshly detailed year-round. Book a recurring plan and lock in priority scheduling, consistent results, and savings on every visit.</p>
<a href="https://www.topshelfcarcare.com/monthly-mint" class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white text-lg font-bold py-4 px-10 rounded-xl shadow-lg transition-all duration-300 hover:shadow-amber-500/30 hover:-translate-y-1">
Learn More
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</section>
<!-- Reviews Section -->
<section class="py-20 bg-gray-50 border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900">What Our Customers Say</h2>
<div class="flex justify-center items-center gap-1 mt-4">
<span class="text-yellow-400 text-2xl">★</span>
<span class="text-yellow-400 text-2xl">★</span>
<span class="text-yellow-400 text-2xl">★</span>
<span class="text-yellow-400 text-2xl">★</span>
<span class="text-yellow-400 text-2xl">★</span>
<span class="ml-2 text-lg font-medium text-gray-700">5.0 on Google</span>
</div>
</div>
<div class="max-w-5xl mx-auto">
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-c3804cce-4c21-425f-b5d3-4f192d1e4994" data-elfsight-app-lazy></div>
</div>
</div>
</section>
</div>
</body>
</html>