Small CTA mobile adjustments

Reduced CTA section padding, typography, and button spacing on mobile for the Need a Custom Quote? section; maintained existing layout on larger screens.

X-Lovable-Edit-ID: edt-3f95874a-dd1f-4978-9896-b7093712fd56
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 21:19:35 +00:00
commit d24f96fd1e

View file

@ -146,17 +146,17 @@ const Index = () => {
</section>
{/* CTA Section */}
<section className="py-16 opacity-100 bg-[#e3b24f]">
<section className="py-8 md:py-16 opacity-100 bg-[#e3b24f]">
<div className="container mx-auto px-4 text-center">
<h2 className="font-display text-3xl md:text-4xl font-bold text-primary-foreground mb-4">
<h2 className="font-display text-2xl md:text-4xl font-bold text-primary-foreground mb-2 md:mb-4">
Need a Custom Quote?
</h2>
<p className="text-primary-foreground/80 max-w-2xl mx-auto mb-8">
<p className="text-primary-foreground/80 max-w-2xl mx-auto mb-4 md:mb-8 text-sm md:text-base">
Our team specializes in providing tailored solutions for mining and construction projects.
Add items to your cart and request a personalized quote today.
</p>
<div className="flex flex-wrap justify-center gap-4">
<a href="tel:+27123456789" className="inline-flex items-center gap-2 text-brand-yellow-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity bg-zinc-700 text-white border-white">
<div className="flex flex-wrap justify-center gap-3 md:gap-4">
<a href="tel:+27123456789" className="inline-flex items-center gap-2 text-brand-yellow-foreground font-semibold px-6 md:px-8 py-2.5 md:py-3 text-sm md:text-base rounded-lg hover:opacity-90 transition-opacity bg-zinc-700 text-white border-white">
Call Us Now
</a>
<QuoteRequestForm />