From 56a65209777830ca3b13a521ddfdb8a53db4f6ad Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sun, 11 Aug 2024 23:13:49 +0200
Subject: [PATCH] refactor: Improve responsiveness of Features component layout

---
 src/app/page.tsx            |  2 +-
 src/components/features.tsx | 28 ++++++++++++++++------------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c93021f..d8461fd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,7 +7,7 @@ import { Navigation } from "@/components/navigation";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-start">
+    <main className="flex min-h-screen overflow-x-hidden flex-col items-center justify-start">
       <Header />
       <Features />
       <Footer />  
diff --git a/src/components/features.tsx b/src/components/features.tsx
index a630eb0..73cdc6e 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -33,30 +33,30 @@ function Question() {
 
 export default function Features() {
   return (
-    <div>
+    <div className="relative">
       {/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
-      <h1 className="text-5xl font-bold mt-20 text-center flex justify-center items-center mb-2">What does Zen offer to <SparklesText className="mx-2" text="YOU" />?</h1>
-      <p className="text-muted-foreground text-center mb-24">Zen Browser is packed with features that will change the way you browse the web. Here are<br/> some of the features that Zen offers.</p>
+      <h1 className="text-5xl font-bold mt-20 text-center p-5 md:p-0 flex flex-col md:flex-row justify-center items-center mb-2">What does Zen offer to <SparklesText className="mx-2" text="YOU" />?</h1>
+      <p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 lg:p-0 mb-24">Zen Browser is packed with features that will change the way you browse the web. Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
       <div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
         <div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
-          <div className="bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Split views</h1>
             <p className="text-muted-foreground mt-3">Split your browser into multiple views to browse multiple websites at once.</p>
             <img src="/split-view.png" className="mt-8 w-full h-full" />
           </div>
-          <div className="bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Workspaces</h1>
             <p className="text-muted-foreground mt-3">Create workspaces to keep your tabs organized and your browsing experience clutter-free.</p>
             <img src="/workspaces.png" className="mt-8 w-full h-full" />
           </div>
         </div>
         <div className="w-full lg:mr-4 flex flex-col">
-          <div className="bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Profile switching</h1>
             <p className="text-muted-foreground mt-3">Switch between profiles to keep your work and personal browsing separate.</p>
             <img src="/profiles.png" className="mt-8 w-full h-full" />
           </div>
-          <div className="bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
             <h1 className="text-5xl font-bold">Side web panels</h1>
             <p className="text-muted-foreground mt-3">Access your favorite websites and services without leaving the page you're on.</p>
             <img src="/sidebar.png" className="mt-8 w-full h-full" />
@@ -68,7 +68,11 @@ export default function Features() {
           <Table>
             <TableHeader>
               <TableRow className="!border-none">
-                <TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">How Zen differs from other browsers</TableHead>
+                <TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">
+                  <span className="hidden md:block">
+                    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>
@@ -111,10 +115,10 @@ export default function Features() {
               description="Zen is designed to be easy to use and beautiful to look at." />
           <FeatureCard title="Customizable"
               description="Customize Zen to fit your needs. Change the theme, layout, and more." />
-          <FeatureCard title="Workspaces"
-              description="Create workspaces to keep your tabs organized." />
-          <FeatureCard title="Better new tab page"
-              description="The new tab page in Zen is designed to help you get to your favorite websites faster." />
+          <FeatureCard title="Keyboard shortcuts"
+              description="Navigate Zen with ease using keyboard shortcuts." />
+          <FeatureCard title="Your browsing experience, your way"
+              description="Zen is designed to be customizable to fit your needs." />
           <FeatureCard title="Tab groups"
               description="Organize your tabs into groups to keep your browsing experience organized."
               todo />