From 4838df315931bb883f704ec3e1abe2685f296cdf Mon Sep 17 00:00:00 2001
From: HsiangNianian <admin@jyunko.cn>
Date: Sat, 22 Apr 2023 19:52:26 +0800
Subject: 😀
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pages/home-shared/FeaturesBento.tsx | 38 ++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 docs/components/pages/home-shared/FeaturesBento.tsx

(limited to 'docs/components/pages/home-shared/FeaturesBento.tsx')

diff --git a/docs/components/pages/home-shared/FeaturesBento.tsx b/docs/components/pages/home-shared/FeaturesBento.tsx
new file mode 100644
index 0000000..f2664db
--- /dev/null
+++ b/docs/components/pages/home-shared/FeaturesBento.tsx
@@ -0,0 +1,38 @@
+import type { Features } from "../../../content/features";
+import { FadeIn } from "./FadeIn";
+import { SectionHeader, SectionSubtext } from "./Headings";
+import { FeatureBox } from "./FeatureBox";
+
+export function FeaturesBento({
+  header,
+  body,
+  features,
+}: {
+  header: string;
+  body: string;
+  features: Features;
+}) {
+  return (
+    <section className="relative flex flex-col items-center px-6 pb-16 font-sans md:pb-24 lg:pb-32 gap-9 lg:gap-14">
+      <FadeIn className="flex flex-col items-center gap-5 md:gap-6">
+        <SectionHeader>{header}</SectionHeader>
+        <SectionSubtext>{body}</SectionSubtext>
+      </FadeIn>
+      <div className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-6 max-w-[1200px]">
+        {features.map((feature) => (
+          <FadeIn
+            className="flex"
+            key={feature.name.replace(/\s+/g, "-").toLowerCase()}
+          >
+            <FeatureBox
+              name={feature.name}
+              description={feature.description}
+              iconDark={feature.iconDark}
+              iconLight={feature.iconLight}
+            />
+          </FadeIn>
+        ))}
+      </div>
+    </section>
+  );
+}
-- 
cgit v1.2.3-70-g09d2