From 7c90075c4f146f725d5d8c788bc21870c5fca4a5 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 17 Aug 2024 22:42:10 +0200
Subject: [PATCH] chore: Update ThemePage component to include responsive
 layout for larger screens

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

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 6410d5f..fb6e225 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -58,9 +58,9 @@ export default function Features() {
     }, 10000);
   }, []);
   return (
-    <div className="relative w-full mb-52 p-5 lg:p-0">
-      <div className="w-full lg:w-1/2 p-5 lg:p-0 mx-auto grid mt-52 lg:grid-cols-2 relative lg:border-2 lg:rounded-xl lg:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
-        <div className="flex flex-col lg:p-20 justify-center">
+    <div className="relative w-full mb-52 p-5 xl:p-0">
+      <div className="w-full xl:w-1/2 p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
+        <div className="flex flex-col xl:p-20 justify-center">
           <h1 className="text-3xl font-bold">The only limit is your</h1>
           <SparklesText className="!text-3xl" text="Imagination" />
           <p className="text-muted-foreground mt-3">
@@ -68,7 +68,7 @@ export default function Features() {
           </p>
           <Button className="mt-8" onClick={() => window.location.href = "/download"}>Try it now</Button>
         </div>
-        <div className="relative hidden lg:flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden">
+        <div className="relative hidden xl:flex h-[500px] w-full max-w-xl items-center justify-center overflow-hidden">
          <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
             <Image src="/logos/zen-black.png" width={100} height={100} alt="Zen Logo" />
          </span>
@@ -113,19 +113,19 @@ export default function Features() {
       </div>
       {/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
       <h1 className="text-5xl font-bold mt-56 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">
+      <p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 xl:p-0 mb-24">
       Discover how Zen Browser can transform your web experience with powerful features that keep you ahead.
       Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
-      <div className="w-full lg:w-1/2 mx-auto flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
-        <div className="w-full flex mx-auto lg:mr-8 flex-col lg:mb-24 lg:ml-4 lg:mt-10">
-          <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 lg:p-20 md:shadow-xl hover:scale-105"> 
+      <div className="w-full xl:w-1/2 mx-auto flex flex-col xl:flex-row w-full mt-4 p-5 xl:p-0">
+        <div className="w-full flex mx-auto xl:mr-8 flex-col xl:mb-24 xl:ml-4 xl:mt-10">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105"> 
             <h1 className="text-5xl font-bold">Split views</h1>
             <p className="text-muted-foreground mt-3">
             Multitask effortlessly by splitting your browser into multiple views, so you can browse several sites at once.
             </p>
             <img src="/split-view.png" className="mt-8 w-full h-full h-auto" />
           </div>
-          <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 pt-24 lg:p-20 md:shadow-xl hover:scale-105">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto xl:mx-0 relative flex flex-col mt-8 max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
             <h1 className="text-5xl font-bold">Workspaces</h1>
             <p className="text-muted-foreground mt-3">
             Stay organized and clutter-free by creating workspaces tailored to your browsing needs.
@@ -139,8 +139,8 @@ export default function Features() {
             />
           </div>
         </div>
-        <div className="w-full lg:mr-4 flex flex-col">
-          <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 pt-24 lg:p-20 md:shadow-xl hover:scale-105">
+        <div className="w-full xl:mr-4 flex flex-col">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 xl:mt-0 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
             <h1 className="text-5xl font-bold">Profile switching</h1>
             <p className="text-muted-foreground mt-3">
             Seamlessly switch between work and personal profiles for a focused browsing experience.
@@ -153,7 +153,7 @@ export default function Features() {
               alt=""
             />
           </div>
-          <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 pt-24 lg:p-20 md:shadow-xl hover:scale-105">
+          <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
             <h1 className="text-5xl font-bold">Side web panels</h1>
             <p className="text-muted-foreground mt-3">
             Access favorite sites and services instantly, without leaving your current page.
@@ -172,9 +172,9 @@ export default function Features() {
         borderWidth={2}
         borderRadius={12}
         color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
-        className="w-full lg:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background lg:p-12 rounded-lg md:shadow-xl"
+        className="w-full xl:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background xl:p-12 rounded-xl md:shadow-xl"
       >
-        <div className="w-full lg:p-16">
+        <div className="w-full xl:p-16">
           <Table>
             <TableHeader>
               <TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
@@ -276,36 +276,36 @@ export default function Features() {
           </Table>
         </div>
       </ShineBorder>
-      <div className="grid grid-cols-1 lg:grid-cols-2 mx-auto justify-center w-full lg:w-2/3 my-80">
+      <div className="grid grid-cols-1 xl:grid-cols-2 mx-auto justify-center w-full xl:w-2/3 my-80">
         <div className="relative w-full flex items-center">
-          <div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 0 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
-            <div className="flex flex-col max-w-lg text-center md:text-start">
-              <h1 className="text-5xl lg:text-5xl font-bold">Built for</h1>
-              <SparklesText className="!text-5xl lg:!text-5xl" text="speed" />
+          <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 0 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
+            <div className="flex flex-col max-w-xl text-center md:text-start">
+              <h1 className="text-5xl xl:text-5xl font-bold">Built for</h1>
+              <SparklesText className="!text-5xl xl:!text-5xl" text="speed" />
               <p className="text-muted-foreground mt-3">
               Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
               </p>
-              <Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
+              <Button className="mt-8 w-fit mx-auto xl:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
             </div>
           </div>
-          <div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 1 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
-            <div className="flex flex-col max-w-lg text-center md:text-start">
-              <h1 className="text-5xl lg:text-5xl font-bold">Privacy is</h1>
-              <SparklesText className="!text-5xl lg:!text-5xl" text="key" />
+          <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 1 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
+            <div className="flex flex-col max-w-xl text-center md:text-start">
+              <h1 className="text-5xl xl:text-5xl font-bold">Privacy is</h1>
+              <SparklesText className="!text-5xl xl:!text-5xl" text="key" />
               <p className="text-muted-foreground mt-3">
               Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
               </p>
-              <Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
+              <Button className="mt-8 w-fit mx-auto xl:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
             </div>
           </div>
-          <div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 2 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
-            <div className="flex flex-col text-center md:text-start max-w-lg">
-              <h1 className="text-5xl lg:text-5xl font-bold">Security is</h1>
-              <SparklesText className="text-5xl lg:!text-5xl" text="important" />
+          <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 2 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
+            <div className="flex flex-col text-center md:text-start max-w-xl">
+              <h1 className="text-5xl xl:text-5xl font-bold">Security is</h1>
+              <SparklesText className="text-5xl xl:!text-5xl" text="important" />
               <p className="text-muted-foreground mt-3">
               Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
               </p>
-              <Button className="mt-8 mx-auto lg:mx-0 w-fit" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
+              <Button className="mt-8 mx-auto xl:mx-0 w-fit" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
             </div>
           </div>
         </div>
@@ -313,12 +313,12 @@ export default function Features() {
           height={1000}
           width={800}
           src="/color-preview.png"
-          className="rounded-xl mt-64 lg:mt-0 lg:ml-52 border-2 border-blue-500 shadow-lg lg:scale-[1.3] hover:scale-105 lg:hover:scale-[1.4] transition-all duration-200"
+          className="rounded-xl mt-64 xl:mt-0 xl:ml-52 border-2 border-blue-500 shadow-xl xl:scale-[1.3] hover:scale-105 xl:hover:scale-[1.4] transition-all duration-200"
           alt=""
         />
       </div>
-      <div className="w-full lg:w-1/2 mx-auto p-5 lg:p-0 mx-auto grid mt-52 lg:grid-cols-2 relative lg:border-2 lg:rounded-xl lg:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
-        <div className="flex flex-col lg:p-20">
+      <div className="w-full xl:w-1/2 mx-auto p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
+        <div className="flex flex-col xl:p-20">
           <h1 className="text-3xl font-bold">Introducing</h1>
           <SparklesText className="!text-3xl" text="Compact Mode" />
           <p className="text-muted-foreground mt-3">
@@ -330,7 +330,7 @@ export default function Features() {
           height={500}
           width={300}
           src="/compact-mode.png"
-          className="hidden lg:block absolute right-0 bottom-0 rounded-tl-lg border-t-2 border-l-2"
+          className="hidden xl:block absolute right-0 bottom-0 rounded-tl-xl border-t-2 border-l-2"
           alt=""
         />
       </div>
@@ -340,7 +340,7 @@ export default function Features() {
         Zen Browser is packed with features designed to revolutionize your browsing.
           Download it today and experience a new way to explore the web.
         </p>
-        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 mt-10">
           <FeatureCard title="Beautifully designed"
               description="Zen offers an intuitive, aesthetically pleasing interface that’s easy to navigate." />
           <FeatureCard title="Customizable"