Blogs/blogs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restructure blogs as Astro monorepo
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-13 21:15:16 +02:00
parent fb5a3b8093
commit 58d8b661a8
1055 changed files with 116254 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

157
sites/art/src/components/sections/why-charter.tsx Normal file
View file

@ -0,0 +1,157 @@
import { PlusSigns } from "../icons/plus-signs";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";
const items = [
{
title: (
<>
Unparalleled
<br />
VAR flexibility
</>
),
description: [
"VAR is often known for its lengthy processing times. At Charter, we focus on achieving the fastest VAR transfers—often completed within hours.",
"Unlike traditional banks and middleware, we connect directly with the Federal Reserve to ensure the fastest, most transparent transfers possible.",
],
image: {
src: "/images/homepage/why-charter/1.webp",
alt: "Code snippet",
type: "fill",
},
className:
"flex flex-col pl-6 py-6 overflow-hidden md:col-span-3 md:flex-row gap-6 md:gap-12",
headerClassName: "flex-2 p-0",
contentClassName:
"relative h-[320px] w-full p-0 self-center overflow-hidden rounded-l-xl border md:flex-1",
},
{
title: "Unparalleled VAR flexibility",
description: [
"VAR has a reputation for taking too long. At Charter, we optimise for the fastest VAR transfers possible — often in a matter of hours.",
"Unlike legacy banks and middleware providers, we have a direct connection to the Federal Reserve to facilitate the quickest transfers.",
],
image: {
src: "/images/homepage/why-charter/2.svg",
alt: "VAR Process Flow",
width: 283,
height: 45,
},
className: "md:col-span-2 flex flex-col justify-center",
contentClassName:
"flex items-center justify-center p-6 max-md:mt-4 max-md:mb-8",
imagePosition: "content",
},
{
title: "Unparalleled VAR flexibility",
description: [
"VAR has a reputation for taking too long. At Charter, we optimise for the fastest VAR transfers possible — often in a matter of hours.",
],
image: {
src: "/images/homepage/why-charter/3.svg",
alt: "VAR Process Diagram",
width: 283,
height: 45,
},
className: "md:col-span-2",
headerClassName: "h-full",
imagePosition: "header",
},
{
title: "Unparalleled VAR flexibility",
description: [
"Unlike traditional banks and middleware, we connect directly with the Federal Reserve to ensure the fastest, most transparent transfers possible.",
],
image: {
src: "/images/homepage/code-snippet.webp",
alt: "Code snippet",
type: "fill",
},
className: "overflow-hidden md:col-span-3 ",
headerClassName: "",
contentClassName:
"relative h-[242px] mt-2 p-0 ml-8 w-full md:max-w-[400px] lg:max-w-[500px] overflow-hidden md:mx-auto shadow-xl rounded-t-2xl",
},
];
const WhyCharter = () => {
return (
<section
id="why-charter"
className="container relative py-16 md:py-28 lg:py-32"
>
<h3 className="mini-title">WHY CHARTER?</h3>
<div className="relative z-10 mt-8 grid grid-cols-1 gap-6 md:grid-cols-5">
{items.map((item, index) => (
<Card
key={index}
className={cn("col-span-1 shadow-xl", item.className)}
>
<CardHeader className={item.headerClassName}>
{item.imagePosition === "header" && (
<img
src={item.image.src}
alt={item.image.alt}
width={item.image.width}
height={item.image.height}
className="flex-1 self-center max-md:mb-8 max-md:mt-4 dark:[filter:brightness(0)_saturate(100%)_invert(100%)]"
/>
)}
<CardTitle className="text-3xl">{item.title}</CardTitle>
{item.description.map((desc, i) => (
<CardDescription
key={i}
className="mt-2 text-base font-medium leading-snug"
>
{desc}
</CardDescription>
))}
</CardHeader>
<CardContent className={item.contentClassName}>
{item.image.type === "fill" ? (
<img
src={item.image.src}
alt={item.image.alt}
className="size-full object-cover object-left-top"
/>
) : (
item.imagePosition === "content" && (
<img
src={item.image.src}
alt={item.image.alt}
width={item.image.width}
height={item.image.height}
className="self-center dark:[filter:brightness(0)_saturate(100%)_invert(100%)]"
/>
)
)}
</CardContent>
</Card>
))}
</div>
{/* Background decoration */}
<>
<div className="absolute inset-0 isolate will-change-transform">
<div className="bg-primary-gradient/28 absolute top-1/2 size-[700px] -translate-y-1/2 rounded-full blur-[300px]" />
<div className="bg-secondary-gradient/16 absolute right-0 top-1/2 size-[700px] -translate-y-1/2 -rotate-12 rounded-full blur-[300px]" />
<div className="bg-tertiary-gradient/6 absolute bottom-1/4 right-20 z-[1] h-[500px] w-[800px] -rotate-12 rounded-full blur-[100px] md:bottom-10" />
</div>
<div className="absolute -inset-x-20 top-0 [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_85%)]">
<PlusSigns className="text-foreground/[0.075] h-full w-full" />
</div>
</>
</section>
);
};
export default WhyCharter;