Initial commit

2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
--- a/src/templates/FeaturesPage/Benefits/index.tsx
+++ b/src/templates/FeaturesPage/Benefits/index.tsx
@@ -0,0 +1,83 @@
+import { useRef, useState } from "react";
+import Link from "next/link";
+import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
+import Section from "@/components/Section";
+import Image from "@/components/Image";
+
+import { benefits } from "@/mocks/benefits";
+
+type BenefitsProps = {};
+
+const Benefits = ({}: BenefitsProps) => {
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    const ref = useRef<any>(null);
+
+    const handleClick = (index: number) => {
+        setActiveIndex(index);
+        ref.current?.go(index);
+    };
+
+    return (
+        <Section className="overflow-hidden">
+            <div className="container relative z-2">
+                <Splide
+                    className="splide-benefits splide-visible max-w-[16rem] md:max-w-none"
+                    options={{
+                        mediaQuery: "min",
+                        pagination: false,
+                        arrows: false,
+                        gap: "1.5rem",
+                        breakpoints: {
+                            768: {
+                                destroy: true,
+                            },
+                        },
+                    }}
+                    onMoved={(e, newIndex) => setActiveIndex(newIndex)}
+                    hasTrack={false}
+                    ref={ref}
+                >
+                    <SplideTrack>
+                        {benefits.map((item) => (
+                            <SplideSlide key={item.id}>
+                                <div className="flex items-center mb-6">
+                                    <Image
+                                        src={item.iconUrl}
+                                        width={48}
+                                        height={48}
+                                        alt={item.title}
+                                    />
+                                </div>
+                                <h5 className="h6 mb-4">{item.title}</h5>
+                                <p className="body-2 text-n-3">{item.text}</p>
+                            </SplideSlide>
+                        ))}
+                    </SplideTrack>
+                </Splide>
+                <div className="flex mt-12 -mx-2 md:hidden">
+                    {benefits.map((item, index) => (
+                        <button
+                            className="relative w-6 h-6 mx-2"
+                            onClick={() => handleClick(index)}
+                            key={item.id}
+                        >
+                            <span
+                                className={`absolute inset-0 bg-conic-gradient rounded-full transition-opacity ${
+                                    index === activeIndex
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                }`}
+                            ></span>
+                            <span className="absolute inset-0.25 bg-n-8 rounded-full">
+                                <span className="absolute inset-2 bg-n-1 rounded-full"></span>
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </Section>
+    );
+};
+
+export default Benefits;