69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
|
import { ArrowRight } from "lucide-react";
|
||
|
|
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||
|
|
import { BrandedTag } from "./about/BrandedTag";
|
||
|
|
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||
|
|
import { navigateTo } from "./Router";
|
||
|
|
|
||
|
|
export function CTABannerSection() {
|
||
|
|
return (
|
||
|
|
<section className="relative h-[700px] overflow-hidden">
|
||
|
|
{/* Background Image */}
|
||
|
|
<div className="absolute inset-0">
|
||
|
|
<ImageWithFallback
|
||
|
|
src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
|
||
|
|
alt="Professional team collaborating in modern office"
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Subtle dark overlay for overall image */}
|
||
|
|
<div className="absolute inset-0 bg-black/30" />
|
||
|
|
|
||
|
|
{/* Gradient overlay for better text readability */}
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content Container */}
|
||
|
|
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||
|
|
{/* CTA Content Block */}
|
||
|
|
<div
|
||
|
|
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||
|
|
style={{
|
||
|
|
backgroundColor: 'var(--color-brand-primary)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Branded Tag */}
|
||
|
|
<BrandedTag text="Next Steps" variant="white" />
|
||
|
|
|
||
|
|
{/* Main Headline */}
|
||
|
|
<h2
|
||
|
|
className="text-h2-white mb-8"
|
||
|
|
>
|
||
|
|
Ready to transform your leadership?
|
||
|
|
<span
|
||
|
|
className="italic"
|
||
|
|
style={{ color: 'var(--color-brand-accent)' }}
|
||
|
|
>
|
||
|
|
{" "}Get in touch{" "}
|
||
|
|
</span>
|
||
|
|
to start your development journey now.
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
{/* CTA Button - Updated to redirect to contact page */}
|
||
|
|
<PrimaryCTAButton
|
||
|
|
text="Schedule a Consultation"
|
||
|
|
onClick={() => navigateTo('/contact?topic=consulting')}
|
||
|
|
ariaLabel="Schedule a consultation with our leadership experts"
|
||
|
|
className="cta-banner-yellow"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Supporting Text */}
|
||
|
|
<p
|
||
|
|
className="text-body-white mt-6 opacity-90"
|
||
|
|
>
|
||
|
|
Connect with our leadership experts to discuss your organization's specific development needs.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|