Restructure blogs as Astro monorepo

sites/art/src/components/sections/code-security.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+
+import { PlusSigns } from "../icons/plus-signs";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const FEATURES = [
+  {
+    id: "move-money",
+    title: "Move and hold money",
+    description:
+      "Previously, emerging financial companies were forced to navigate costly middleware solutions that connected them to outdated sponsor bank systems.",
+    image: "/images/homepage/code-snippet.webp",
+  },
+  {
+    id: "card-program",
+    title: "Build a modern card program",
+    description:
+      "Create and manage virtual and physical cards with complete control over spending limits, merchant categories, and real-time transaction monitoring.",
+    image: "/images/homepage/code-snippet.webp",
+  },
+  {
+    id: "lend-money",
+    title: "Lend money",
+    description:
+      "Offer various lending products through our platform with automated underwriting, loan servicing, and compliance management.",
+    image: "/images/homepage/code-snippet.webp",
+  },
+];
+
+export default function CodeSecurity() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  return (
+    <section
+      id="code-security"
+      className="container max-w-5xl py-16 md:py-28 lg:py-32"
+    >
+      <div className="from-primary-gradient/20 bg-linear-to-bl relative overflow-hidden rounded-3xl border to-transparent py-5 md:py-6 lg:py-8">
+        <div className="absolute inset-0 z-[-1]">
+          <PlusSigns className="text-foreground/[0.05] h-full w-full" />
+        </div>
+        <div className="md:px-6 lg:px-8">
+          <div className="max-md:px-5">
+            <h3 className="mini-title">WHY CHARTER?</h3>
+            <h2 className="mt-3 text-3xl font-semibold tracking-tight md:text-4xl lg:text-5xl">
+              Code security
+            </h2>
+          </div>
+          <div className="mt-10 flex gap-12 overflow-hidden max-md:flex-col md:mt-16 lg:mt-20">
+            <Accordion
+              type="single"
+              className="flex-1"
+              defaultValue="0"
+              onValueChange={(value) => setSelectedIndex(Number(value))}
+            >
+              {FEATURES.map((feature, index) => (
+                <AccordionItem
+                  key={feature.id}
+                  value={index.toString()}
+                  className="border-black/20 last:border-none dark:border-white/20"
+                >
+                  <AccordionTrigger className="hover:no-underline max-md:px-5">
+                    <h3 className="text-input font-inter text-xl font-bold">
+                      {feature.title}
+                    </h3>
+                  </AccordionTrigger>
+                  <AccordionContent className="">
+                    <p className="text-muted-foreground font-medium leading-relaxed max-md:px-5">
+                      {feature.description}
+                    </p>
+                    <div className="relative mt-4 h-[280px] translate-x-5 md:hidden">
+                      <img
+                        src={feature.image}
+                        alt={feature.title}
+                        className="size-full rounded-2xl object-cover object-left-top shadow-xl"
+                      />
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+            <div className="relative h-[240px] max-md:hidden max-md:translate-x-6 md:flex-1">
+              <img
+                src={FEATURES[selectedIndex].image}
+                alt={FEATURES[selectedIndex].title}
+                className="size-full rounded-2xl object-cover object-left-top shadow-xl"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}