You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
4.6 KiB
106 lines
4.6 KiB
import React from "react";
|
|
import type { SolutionsData } from "../types";
|
|
|
|
interface SolutionsSectionProps {
|
|
data: SolutionsData;
|
|
}
|
|
|
|
export function SolutionsSection({ data }: SolutionsSectionProps) {
|
|
const hero = data.hero ?? { title: data.title };
|
|
|
|
return (
|
|
<section id="solutions" className="relative bg-[#f5f7fb] text-[#0f1f39]">
|
|
<div className="absolute inset-0">
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-[320px] bg-gradient-to-b from-white via-[#f5f7fb] to-transparent opacity-60" />
|
|
<div className="pointer-events-none absolute -top-32 right-[-140px] h-[380px] w-[380px] rounded-full bg-[radial-gradient(circle,rgba(17,138,244,0.16)_0%,rgba(17,138,244,0)_70%)] blur-3xl opacity-70" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto w-full max-w-5xl px-4 pb-16 pt-16 md:px-6 md:pt-20">
|
|
<div className="text-center">
|
|
{hero.eyebrow && (
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.46em] text-[#118af4]">
|
|
{hero.eyebrow}
|
|
</p>
|
|
)}
|
|
<h2 className="mb-4 text-3xl font-semibold leading-tight text-[#0f1f39] md:text-[34px]">
|
|
{hero.title || data.title}
|
|
</h2>
|
|
{(hero.subtitle || hero.description) && (
|
|
<p className="mx-auto max-w-3xl text-base leading-relaxed text-[#4b5565] md:text-lg">
|
|
{hero.subtitle ?? hero.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 -mt-10 pb-16 md:-mt-12 md:pb-20">
|
|
<div className="mx-auto w-full max-w-6xl px-4 md:px-6">
|
|
<div className="grid grid-cols-1 gap-7 md:grid-cols-2">
|
|
{data.items.map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className="flex flex-col gap-6 rounded-[20px] border border-[rgba(17,138,244,0.12)] bg-white/95 p-6 shadow-[0_18px_42px_rgba(17,138,244,0.08)] transition-transform md:flex-row md:p-8"
|
|
>
|
|
<div className="flex-1">
|
|
{item.tag && (
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-[#e4f2ff] px-3.5 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#118af4]">
|
|
{item.tag}
|
|
</div>
|
|
)}
|
|
<h3 className="mt-4 text-[22px] font-semibold leading-tight text-[#0f1f39] md:text-[24px]">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-[#4b5565] md:text-base">
|
|
{item.summary}
|
|
</p>
|
|
<ul className="mt-4 space-y-2 text-sm text-[#1f2937] md:text-base">
|
|
{item.bullets.map((bullet, index) => (
|
|
<li key={index} className="flex items-start gap-2 leading-relaxed">
|
|
<span
|
|
className="mt-[6px] inline-block h-1.5 w-1.5 rounded-full bg-[#118af4]"
|
|
aria-hidden="true"
|
|
/>
|
|
<span>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{item.badges && item.badges.length > 0 && (
|
|
<div className="mt-5 flex flex-wrap gap-2.5">
|
|
{item.badges.map((badge, index) => {
|
|
const isPrimary = index === 0;
|
|
return (
|
|
<span
|
|
key={index}
|
|
className={[
|
|
"rounded-full px-4 py-2 text-xs font-semibold",
|
|
isPrimary
|
|
? "border border-[#d8e8fb] bg-[#f0f9ff] text-[#118af4]"
|
|
: "border border-transparent bg-[#f9fafb] text-[#4b5565]",
|
|
].join(" ")}
|
|
>
|
|
{badge}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mx-auto w-full max-w-[240px] shrink-0 md:w-52">
|
|
<div className="overflow-hidden rounded-2xl border border-[#d9e6f8] shadow-[0_10px_28px_rgba(15,31,57,0.12)]">
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|