export default function MantleDualLandingPage() {
const taxBullets = [
"Year-round tax planning",
"Strategy for business owners & high earners",
"Proactive savings before filing season"
];
const bizBullets = [
"Bookkeeping that connects to decisions",
"Job costing, cash flow & clean financials",
"Built for contractors, trades & service businesses"
];
return (
<div className="min-h-screen bg-[#eef3f0] text-[#195364]">
<section className="px-6 py-10 md:px-12 lg:px-20">
<div className="mx-auto flex max-w-7xl items-center justify-between">
<div className="flex items-center gap-3">
<img
src="data:image/png;base64,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"
alt="The Mantle Group Logo"
className="h-14 w-auto"
/>
</div>
<button className="hidden rounded-full bg-[#2c90ae] px-5 py-2 text-sm font-semibold text-white md:block">
Book a Discovery Call
</button>
</div>
<div className="mx-auto grid max-w-7xl items-center gap-10 py-16 md:grid-cols-2">
<div>
<div className="mb-5 inline-block rounded-full bg-white px-4 py-2 text-sm font-bold text-[#195364] shadow-sm">
Built for business owners who want to build wealth through leveraging tax strategy
</div>
<h1 className="text-5xl font-black leading-tight md:text-6xl">
Your ledger, your wealth, your legacy.
</h1>
<p className="mt-6 max-w-2xl text-lg leading-8 text-[#195364]/80">
The Mantle Group connects business owners to their numbers through bookkeeping and tax strategy — so your business is powered by data, not guesswork.
</p>
<div className="mt-8 flex flex-col gap-4 sm:flex-row">
<a href="#choose" className="rounded-full bg-[#195364] px-6 py-3 text-center font-bold text-white shadow">
Choose Your Mantle Path
</a>
<a href="#strategy" className="rounded-full border border-[#195364]/30 bg-white px-6 py-3 text-center font-bold text-[#195364] shadow-sm">
See How We Help
</a>
</div>
</div>
<div className="rounded-[2rem] border border-[#195364]/20 bg-[#195364] p-2 shadow-2xl">
<div className="rounded-[1.5rem] bg-[#eef3f0] p-6">
<p className="text-sm font-black uppercase tracking-widest text-[#2c90ae]">Mantle Mindset</p>
<h2 className="mt-3 text-3xl font-black">Money moves with strategy — not panic.</h2>
<div className="mt-6 space-y-4">
<MiniTruth text="Clean books reveal the truth." />
<MiniTruth text="Tax planning creates flexibility." />
<MiniTruth text="Data turns decisions into leverage." />
</div>
</div>
</div>
</div>
</section>
<section className="px-6 pb-8 md:px-12 lg:px-20">
<div className="mx-auto max-w-7xl overflow-hidden rounded-[2rem] shadow-2xl ring-1 ring-black/5">
<img
src="cbus-314.jpg"
alt="The Mantle Group Team"
className="h-[500px] w-full object-cover"
/>
</div>
</section>
<section id="choose" className="px-6 pb-20 md:px-12 lg:px-20">
<div className="mx-auto max-w-7xl">
<h2 className="mt-3 mb-8 text-4xl font-black tracking-tight">Where do you need clarity first?</h2>
<div className="grid gap-6 md:grid-cols-2">
<a href="https://www.mantletax.com" target="_blank" rel="noopener noreferrer">
<BrandCard
badge="mantletax.com"
icon="Tax"
title="Mantle Tax Solutions"
description="Tax advisory for business owners, high-income earners, and investors who want planning — not just filing."
bullets={taxBullets}
button="Explore Tax Strategy"
accent="tax"
/>
</a>
<a href="https://www.mantlebizsolutions.com" target="_blank" rel="noopener noreferrer">
<BrandCard
badge="mantlebizsolutions.com"
icon="Books"
title="Mantle Financial Solutions"
description="Bookkeeping and financial systems for service-based business owners ready to make better decisions with better numbers."
bullets={bizBullets}
button="Explore Bookkeeping"
accent="light"
image="Screenshot 2026-05-14 202727.png"
/>
</a>
</div>
</div>
</section>
<section id="strategy" className="bg-[#195364] px-6 py-20 text-white md:px-12 lg:px-20">
<div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
<div className="max-w-2xl">
<p className="text-sm font-black uppercase tracking-[0.24em] text-white/75">The Mantle Difference</p>
<h2 className="mt-4 text-4xl font-black leading-tight tracking-tight md:text-5xl">
We do not just organize your numbers. We help you use them.
</h2>
</div>
<div className="grid gap-5 md:grid-cols-3">
<StrategyCard title="Bookkeeping" text="Clean financials that tell the truth." />
<StrategyCard title="Tax Advisory" text="Planning before the opportunity closes." />
<StrategyCard title="Strategy" text="Numbers that support the life you are building." />
</div>
</div>
</section>
<section className="px-6 py-16 md:px-12 lg:px-20">
<div className="mx-auto max-w-7xl rounded-[2rem] bg-white p-8 shadow-xl md:flex md:items-center md:justify-between md:p-12">
<div className="max-w-2xl">
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[#2c90ae]/20 text-xl font-black text-[#2c90ae]">
✓
</div>
<h2 className="text-3xl font-black tracking-tight md:text-4xl">Stop reacting to your numbers. Start leading with them.</h2>
<p className="mt-3 text-lg text-[#195364]/80">Choose the Mantle path that fits your next move — tax strategy, bookkeeping, or both.</p>
</div>
<button className="mt-8 rounded-full bg-[#2c90ae] px-8 py-4 font-bold text-white shadow-lg md:mt-0">
Schedule Your Free Discovery Call
</button>
</div>
</section>
</div>
);
}
function MiniTruth({ text }) {
return (
<div className="flex items-center gap-3 rounded-2xl bg-white p-4 shadow-sm">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2c90ae] text-sm font-bold text-white">✓</span>
<span className="font-semibold text-[#195364]">{text}</span>
</div>
);
}
function BrandCard({ badge, icon, title, description, bullets, button, accent, image }) {
const isTax = accent === "tax";
const badgeClass = isTax ? "text-[#076336]" : "text-[#24428e]";
const iconBg = isTax ? "bg-[#076336]" : "bg-[#24428e]";
const bulletBg = isTax
? "bg-[#05c66c]/20 text-[#05c66c]"
: "bg-[#227dbf]/20 text-[#227dbf]";
const titleColor = isTax ? "text-[#076336]" : "text-[#24428e]";
const descriptionColor = isTax ? "text-[#076336]/80" : "text-[#24428e]/80";
const bulletText = isTax ? "text-[#076336]" : "text-[#24428e]";
return (
<div className="flex h-full flex-col overflow-hidden rounded-[2rem] bg-white shadow-xl ring-1 ring-black/5">
{image && (
<img
src={image}
alt={title}
className="h-56 w-full object-cover"
/>
)}
<div className="p-7">
<div className={`mb-6 flex h-16 w-16 items-center justify-center rounded-3xl ${iconBg} text-sm font-black text-white shadow-lg`}>
{icon}
</div>
<p className={`text-sm font-black uppercase tracking-widest ${badgeClass}`}>{badge}</p>
<h3 className={`mt-2 text-3xl font-black tracking-tight ${titleColor}`}>{title}</h3>
<p className={`mt-4 text-lg leading-7 ${descriptionColor}`}>{description}</p>
<div className="mt-6 space-y-3">
{bullets.map((bullet) => (
<div key={bullet} className="flex gap-3">
<span className={`mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${bulletBg} text-xs font-black`}>✓</span>
<span className={`font-semibold ${bulletText}`}>{bullet}</span>
</div>
))}
</div>
<button className={`mt-auto pt-8 font-black ${badgeClass}`}>
{button} →
</button>
</div>
</div>
);
}
function StrategyCard({ title, text }) {
return (
<div className="flex min-h-[210px] flex-col justify-between rounded-[2rem] bg-white/12 p-7 ring-1 ring-white/15 backdrop-blur-sm">
<h3 className="text-2xl font-black leading-tight">{title}</h3>
<p className="mt-5 text-base leading-7 text-white/80">{text}</p>
</div>
);
}