From 7c04bda5b77ae753b4bb5bc6a3b336ab8983435d Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Thu, 6 Feb 2025 16:57:16 +0100
Subject: [PATCH] docs: improve mobile layout of landing page

---
 docs/src/components/feature-box.tsx | 38 +++++++++--------------------
 docs/src/pages/index.tsx            |  2 +-
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/docs/src/components/feature-box.tsx b/docs/src/components/feature-box.tsx
index 39683b0..f7cefcc 100644
--- a/docs/src/components/feature-box.tsx
+++ b/docs/src/components/feature-box.tsx
@@ -10,32 +10,18 @@ export default function FeatureBox({
   imgLeft?: boolean;
 }) {
   return (
-    <div className="p-6 glass grid grid-cols-12 gap-10 items-center">
-      {imgLeft ? (
-        <>
-          <img
-            src={imgSrc}
-            alt="Feature Image"
-            className="mr-3 rounded-lg col-span-7 border border-neutral-800"
-          />
-          <div className="col-span-5">
-            <p className="text-3xl font-semibold !mb-3">{title}</p>
-            <p className="text-gray-300 mt-2">{description}</p>
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="col-span-5">
-            <p className="text-3xl font-semibold !mb-3">{title}</p>
-            <p className="text-gray-300">{description}</p>
-          </div>
-          <img
-            src={imgSrc}
-            alt="Feature Image"
-            className="ml-3 rounded-lg col-span-7 border border-neutral-800"
-          />
-        </>
-      )}
+    <div className="p-6 glass grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
+      <div className="col-span-5">
+        <p className="text-3xl font-semibold !mb-3">{title}</p>
+        <p className="text-gray-300">{description}</p>
+      </div>
+      <img
+        src={imgSrc}
+        alt="Feature Image"
+        className={`rounded-lg col-span-7 border border-neutral-800 ${
+          imgLeft ? "order-first" : "order-last"
+        }`}
+      />
     </div>
   );
 }
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 87dec12..6e26454 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -61,7 +61,7 @@ const Home: React.FC = () => {
         </section>
 
         <section className="mt-15">
-          <h2 className="text-2xl sm:text-3xl font-bold">Features</h2>
+          <h2 className="!text-3xl font-bold">Features</h2>
           <div className="flex flex-col gap-5">
             <FeatureBox
               title="Passwordless Authentication"