Merge branch 'main' into themetoggle

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 />  

src/app/privacy-policy/page.tsx

@@ -48,7 +48,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's
 * [This is how we store your passwords](https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords.)
 
 # 4. Data Security
-Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on our servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe. 
+Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe. 
 
 * Note that most of the security measures are taken care by mozilla firefox.
 

src/components/features.tsx

@@ -38,19 +38,13 @@ 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">
+      <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>
-        What does Zen offer <SparklesText className="mx-2" text="YOU" />?
+      <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>
-      </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>
       <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
@@ -58,7 +52,7 @@ export default function Features() {
             </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
@@ -68,7 +62,7 @@ export default function Features() {
           </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
@@ -76,7 +70,7 @@ export default function Features() {
             </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
@@ -97,29 +91,13 @@ export default function Features() {
             <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
+                  <span className="hidden md:block">
-                </TableHead>
+                    How Zen differs from other browsers
-                <TableHead className="py-2 font-bold text-center">
+                  </span>
-                  <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="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>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -191,31 +169,19 @@ export default function Features() {
           the web.
         </p>
         <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
-          <FeatureCard
+          <FeatureCard title="Beautifully designed"
-            title="Beautifully designed"
+              description="Zen is designed to be easy to use and beautiful to look at." />
-            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
+          <FeatureCard title="Keyboard shortcuts"
-            title="Customizable"
+              description="Navigate Zen with ease using keyboard shortcuts." />
-            description="Customize Zen to fit your needs. Change the theme, layout, and more."
+          <FeatureCard title="Your browsing experience, your way"
-          />
+              description="Zen is designed to be customizable to fit your needs." />
-          <FeatureCard
+          <FeatureCard title="Tab groups"
-            title="Workspaces"
+              description="Organize your tabs into groups to keep your browsing experience organized."
-            description="Create workspaces to keep your tabs organized."
+              todo />
-          />
+          <FeatureCard title="Vertical tabs"
-          <FeatureCard
+              description="Keep your tabs organized with vertical tabs." />
-            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="Tab groups"
-            description="Organize your tabs into groups to keep your browsing experience organized."
-            todo
-          />
-          <FeatureCard
-            title="Vertical tabs"
-            description="Keep your tabs organized with vertical tabs."
-          />
         </div>
         <Button
           onClick={() => (window.location.href = "/download")}