From d7c49fe19f46077a10c13d60d57a4e3e53e55bd4 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 7 Sep 2025 20:39:09 +0200
Subject: [PATCH] Refactor into AboutBox

---
 web/components/about/box.tsx | 14 ++++++++++++++
 web/pages/index.tsx          | 33 +++++++++++++--------------------
 2 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 web/components/about/box.tsx

diff --git a/web/components/about/box.tsx b/web/components/about/box.tsx
new file mode 100644
index 00000000..e01da9db
--- /dev/null
+++ b/web/components/about/box.tsx
@@ -0,0 +1,14 @@
+export function AboutBox(props: {
+  title: string
+  text: string
+}) {
+  const {title, text} = props
+  return (
+    <div className="space-y-2">
+      <h3 className="text-lg font-bold">{title}</h3>
+      <p className="text-gray-600 dark:text-gray-400">
+        {text}
+      </p>
+    </div>
+  )
+}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index deecb2f5..32cd8c12 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -22,6 +22,7 @@ import {api} from 'web/lib/api'
 import {debounce, omit} from 'lodash'
 import {PREF_AGE_MAX, PREF_AGE_MIN,} from 'web/components/filters/location-filter'
 import {signupRedirect} from "web/lib/util/signup";
+import {AboutBox} from "web/components/about/box";
 
 
 export default function ProfilesPage() {
@@ -214,26 +215,18 @@ export default function ProfilesPage() {
               <div className="w-full bg-gray-50 dark:bg-gray-900 py-8 mt-20">
                   <div className="max-w-6xl mx-auto px-4">
                       <div className="grid md:grid-cols-3 gap-8 text-center">
-                          <div className="space-y-2">
-                              <h3 className="text-lg font-bold">Radically Transparent</h3>
-                              <p className="text-gray-600 dark:text-gray-400">
-                                  No algorithms. Every profile searchable.
-                              </p>
-                          </div>
-
-                          <div className="space-y-2">
-                              <h3 className="text-lg font-bold">Built for Depth</h3>
-                              <p className="text-gray-600 dark:text-gray-400">
-                                  Filter by any keyword and what matters most.
-                              </p>
-                          </div>
-
-                          <div className="space-y-2">
-                              <h3 className="text-lg font-bold">Community Owned</h3>
-                              <p className="text-gray-600 dark:text-gray-400">
-                                  Free forever. Built by users, for users.
-                              </p>
-                          </div>
+                          <AboutBox
+                              title='Radically Transparent'
+                              text='No algorithms. Every profile searchable.'
+                          />
+                          <AboutBox
+                              title='Built for Depth'
+                              text='Filter by any keyword and what matters most.'
+                          />
+                          <AboutBox
+                              title='Community Owned'
+                              text='Free forever. Built by users, for users.'
+                          />
                       </div>
                   </div>
               </div>