From 9324a64a03c2920022e0770e3120af68f8b038df Mon Sep 17 00:00:00 2001
From: Luke Thomas <96008479+Zoobdude@users.noreply.github.com>
Date: Mon, 12 Aug 2024 15:06:49 +0100
Subject: [PATCH 1/2] Fix spacing of comparison table on mobile

---
 README.md                   | 14 +++++++++++++-
 src/components/features.tsx | 22 ++++++++++++++++------
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c403366..8848287 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,19 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+First you need to install the dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+Then, run the development server:
 
 ```bash
 npm run dev
diff --git a/src/components/features.tsx b/src/components/features.tsx
index a55a558..28ed6fb 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -89,15 +89,25 @@ export default function Features() {
         <div className="w-full p-16">
           <Table>
             <TableHeader>
-              <TableRow className="!border-none">
-                <TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">
-                  <span className="hidden md:block">
+              <TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
+                <TableHead className="py-2 text-2xl font-bold text-black dark:text-white">
+                  <span className="">
                     How Zen differs from other browsers
                   </span>
                 </TableHead>
-                <TableHead className="py-2 font-bold text-center"><img src="/favicon.ico" className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8" />Zen</TableHead>
-                <TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60"><img src="/floorp.png" className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7" />Floorp</TableHead>
-                <TableHead className="py-2 pl-0 font-bold text-center opacity-60"><img src="/librewolf.png" className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7" />LibreWolf</TableHead>
+                <TableHead className="font-bold text-center min-w-[70px]">
+                  <img src="/favicon.ico" className="dark:bg-white rounded-md mx-auto mb-2 w-9 h-9" />
+                  Zen
+                </TableHead>
+                <TableHead className="pl-4 pr-0 font-bold text-center opacity-60 min-w-[70px]">
+                  <img src="/floorp.png" className="dark:bg-white rounded-md p-1 mx-auto mt-1 mb-3 w-7 h-7" />
+                  Floorp
+                </TableHead>
+                
+                <TableHead className="font-bold text-center opacity-60 min-w-[70px] ">
+                  <img src="/librewolf.png" className="dark:bg-white rounded-md mx-auto p-1 mt-1 mb-3 w-7 h-7" />
+                  LibreWolf
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

From df58b92bee48d2e5be59e889f4d5410228b415a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mauro=20=F0=9F=A4=99?= <mauro.balades@tutanota.com>
Date: Mon, 12 Aug 2024 15:09:46 +0000
Subject: [PATCH 2/2] refactor: Improve responsiveness of Features component
 layout

---
 src/components/features.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 28ed6fb..83d786d 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -176,7 +176,7 @@ export default function Features() {
           <RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
           <div className="flex flex-col max-w-lg text-center md:text-start">
             <h1 className="text-5xl font-bold flex items-center flex-col md:flex-row">Built for <SparklesText className="md:mx-2" text="speed" /></h1>
-            <p className="text-muted-foreground mt-3">
+            <p className="text-muted-foreground px-5 md:p-0 mt-3">
               Zen is built with speed in mind. Improving release after release, with new optimizations and technologies to make your browsing experience faster.<br /><br />
               We have been working and benchmarking Zen to make it the fastest browser out there.
             </p>
@@ -185,7 +185,7 @@ export default function Features() {
         <div className="flex flex-col lg:flex-row w-full mt-52 p-5 justify-between items-center">
           <div className="flex flex-col max-w-lg text-center md:text-start">
             <h1 className="text-5xl font-bold flex flex-col md:flex-row items-center">Privacy is <SparklesText className="md:mx-2" text="key" /></h1>
-            <p className="text-muted-foreground mt-3">
+            <p className="text-muted-foreground px-5 md:p-0 mt-3">
               Zen is designed with privacy in mind. We found the perfect balance between privacy and functionality, so you can browse the web without worrying about your data.
             </p>
           </div>
@@ -195,7 +195,7 @@ export default function Features() {
           <LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
           <div className="flex flex-col text-center md:text-start max-w-lg">
             <h1 className="text-5xl font-bold items-center flex-col">Security is <SparklesText className="inline" text="important" /></h1>
-            <p className="text-muted-foreground mt-3">
+            <p className="text-muted-foreground px-5 md:p-0 mt-3">
               Zen is built with security in mind. We use the latest technologies and security measures that no other firefox-based browser offers.
             </p>
           </div>