Started working on new site

next.config.js

@@ -0,0 +1,41 @@
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+
+/** @type {import('next').NextConfig} */
+module.exports = (phase, { defaultConfig }) => {
+  const defaultConfigWWW = {
+    images: {
+      remotePatterns: [
+        {
+          protocol: "https",
+          hostname: "raw.githubusercontent.com",
+        },
+        {
+          protocol: "https",
+          hostname: "cdn.jsdelivr.net",
+        }
+      ],
+      domains: ['cdn.jsdelivr.net', "raw.githubusercontent.com"],  // Allow images from jsDelivr
+    },
+    experimental: {
+      serverActions: {
+        // edit: updated to new key. Was previously `allowedForwardedHosts`
+        allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
+      },
+    },
+    compiler: {
+      styledComponents: true,
+    },
+  };
+  if (phase === PHASE_DEVELOPMENT_SERVER) {
+    return {
+      ...defaultConfigWWW,
+      // development only config options here
+    };
+  }
+  return {
+    ...defaultConfigWWW,
+    // production only config options here
+    output: 'export',
+  };
+};
+

next.config.mjs

@@ -1,28 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: 'export',
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "raw.githubusercontent.com",
-      },
-      {
-        protocol: "https",
-        hostname: "cdn.jsdelivr.net",
-      }
-    ],
-    domains: ['cdn.jsdelivr.net', "raw.githubusercontent.com"],  // Allow images from jsDelivr
-  },
-  experimental: {
-    serverActions: {
-      // edit: updated to new key. Was previously `allowedForwardedHosts`
-      allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
-    },
-  },
-  compiler: {
-    styledComponents: true,
-  },
-};
-
-export default nextConfig;

src/app/globals.css

@@ -41,6 +41,8 @@
       --color-two: #fe8bbb;
       --color-three: #9e7aff;
 
+      --surface: rgb(235, 235, 235);
+
       /*
     --color-one: #37ecba;
     --color-two: #72afd3;
@@ -52,6 +54,8 @@
       --background: 0 0% 0%;
       --foreground: 0 0% 98%;
 
+      --surface: rgb(23, 23, 23);
+
       --card: 0 0% 3.9%;
       --card-foreground: 0 0% 98%;
 
@@ -86,5 +90,7 @@
    }
    body {
       @apply bg-background text-foreground;
+
+      scroll-behavior: smooth;
    }
 }

src/components/features.tsx

@@ -4,9 +4,11 @@ import {
   CheckIcon,
   ChevronLeft,
   ChevronRight,
+  ExternalLinkIcon,
   EyeIcon,
   EyeOffIcon,
   Github,
+  HeartHandshake,
   HomeIcon,
   RabbitIcon,
   ShieldAlertIcon,
@@ -45,19 +47,19 @@ import { ny } from '@/lib/utils';
 
 function Checkmark() {
   return (
-    <CheckIcon className="mx-auto text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
+    <CheckIcon className="text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
   );
 }
 
 function Cross() {
   return (
-    <XIcon className="mx-auto text-black rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
+    <XIcon className="text-black rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
   );
 }
 
 function Question() {
   return (
-    <QuestionMarkIcon className="mx-auto text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
+    <QuestionMarkIcon className="text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
   );
 }
 
@@ -70,389 +72,87 @@ export default function Features() {
     return () => clearInterval(interval);
   });
   return (
-    <div className="max-w-[1300px] relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
+    <section className="flex-col w-full" id="features">
-      <div className="grid grid-cols-1 md:grid-cols-3 md:grid-rows-10 w-full">
+      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-10 shadow'>
-        <div className="items-center justify-center flex flex-col p-16">
+        <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
-          <div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
+          <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1>
-            <RabbitIcon className="mx-auto w-7 h-7" />
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p>
+          <div className='w-full mt-8'>
+            <div className='flex items-center'>
+              <Checkmark />
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Completely Customizable</p>
             </div>
-          <div className="mt-10">
+            <div className='flex items-center mt-4'>
-            <h2 className="text-lg font-bold text-center">
+              <Checkmark />
-              Goodbye bad performance
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Vertical Tabs</p>
-            </h2>
+            </div>
-            <p className="text-center text-sm mt-2 text-muted-foreground">
+            <div className='flex items-center mt-4'>
-              We are constantly tweaking Firefox's engine and settings to make it
+              <Checkmark />
-              faster than ever. <a className="text-blue-500" href="https://docs.zen-browser.app/benchmarks" target='_blank'>Learn more</a>
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Thoughtful Design</p>
-            </p>
             </div>
           </div>
-        <div className="items-center justify-center md:border-l-2 flex flex-col p-16">
-          <div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
-            <LockClosedIcon className="mx-auto w-7 h-7" />
         </div>
-          <div className="mt-10">
+        <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
-            <h2 className="text-lg font-bold text-center">Privacy first</h2>
-            <p className="text-center text-sm mt-2 text-muted-foreground">
-              We don't track you. We don't sell your data. We don't even know
-              who you are.{' '}
-              <a className="text-blue-500" href="/privacy-policy">
-                Learn more
-              </a>
-            </p>
       </div>
-        </div>
+      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
-        <div className="items-center justify-center md:border-l-2 flex flex-col p-16">
+        <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
-          <div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
+        <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
-            <ShieldCheck className="mx-auto w-7 h-7" />
+          <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views</h1>
-          </div>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.</p>
-          <div className="mt-10">
-            <h2 className="text-lg font-bold text-center">Secure by default</h2>
-            <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are always using the latest security features from Firefox to
-              keep you safe.{' '}
-              <a
-                className="text-blue-500"
-                href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe"
-              >
-                Learn more
-              </a>
-            </p>
-          </div>
-        </div>
-        <div className="relative md:border-t-2 hidden md:block flex-col p-16 row-span-4 scrollarea">
-          <Sticky
-            stickyClassName="mx-auto py-32"
-            hideOnBoundaryHit={false}
-            boundaryElement=".scrollarea"
-            topOffset={-130}
-          >
-            <h2 className="text-3xl font-bold">User experience comes first</h2>
-            <p className="text-sm mt-2 text-muted-foreground">
-              We are always looking for ways to make your experience better.
-              Always looking for feedback and suggestions!
-            </p>
-          </Sticky>
-        </div>
-        <div className="relative md:grid border-t-2 md:border-l-2 md:col-span-2 md:grid-cols-2 row-span-2">
-          <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
-            <div className="">
-              <div>
-                <h2 className="text-3xl font-bold">Customization is key</h2>
-                <p className="text-sm mt-2 text-muted-foreground">
-                  We are always looking for ways to make your experience better.
-                  With stackable themes that can be mixed and matched, you can
-                  create a browser that is truly yours.{' '}
-                  <a
-                    className="text-blue-500"
-                    href="https://docs.zen-browser.app/themes-store/themes-marketplace"
-                  >
-                    Learn more
-                  </a>
-                </p>
-              </div>
-              <a href="/download">
-                <Button className="mt-4 rounded-full p-5 ml-auto">
-                  Download Zen now!
-                </Button>
-              </a>
-            </div>
-            <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
-              {COLORS.map((color) => (
-                <div
-                  key={color}
-                  className="w-5 h-5 rounded-full mx-3 "
-                  style={{ backgroundColor: color }}
-                />
-              ))}
-            </div>
-            <div className="border w-1/2 rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex transform translate-x-[calc(50%-1.5rem)]">
-              <Slider defaultValue={[80]} max={100} />
-            </div>
-            <a
-              href="/themes"
-              className="border-2 w-fit md:w-1/2 lg:w-fit flex items-center justify-center rounded-xl shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black border-blue-500 flex text-muted-foreground"
-            >
-              <span>Checkout our themes store</span>
-              <ChevronRight className="w-5 h-5 ml-2" />
-            </a>
-          </div>
-        </div>
-        <div className="relative md:grid md:border-l-2 border-t-2 md:col-span-2 grid-cols-2 row-span-2">
-          <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
-            <div className="flex flex-col md:flex-row">
           <div className="relative">
-                <h2 className="text-3xl font-bold">Compact mode is here!</h2>
+            <Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
-                <p className="text-sm mt-2 text-muted-foreground">
-                  With a new compact mode, you can save space and focus on what
-                  matters.
-                </p>
-                <div className="bg-blue-600 p-1 px-2 text-white rounded-md text-xs transform rotate-[10deg] absolute right-0 top-[-10px]">
-                  Killer feature
           </div>
         </div>
-              <a href="/download">
-                <Button className="mt-4 rounded-full p-5 ml-4">
-                  Download Zen now!
-                </Button>
-              </a>
       </div>
-            <img
+      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
-              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png"
+        <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
-              className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600"
+          <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
-            />
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
-          </div>
+          <div className='w-full mt-8'>
-        </div>
+            <div className='flex items-center'>
-        <div className="flex flex-col p-5 md:p-16 md:col-span-2 border-t-2 row-span-2">
-          <div className="rounded-full px-8 py-3 shadow border-2 flex items-center">
-            <div className="font-bold text-md">
-              What makes Zen Browser different?
-            </div>
-            <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/favicon.ico" className="ml-auto w-7 h-7" />
-          </div>
-          <div className="h-full w-full flex items-center justify-center">
-            <Table className="w-full">
-              <TableHeader>
-                <TableRow
-                  className="!border-none"
-                  style={{ pointerEvents: 'none' }}
-                >
-                  <TableHead className="py-2 text-2xl font-bold text-black dark:text-white">
-                    <span className="">How Zen compares to other browsers</span>
-                  </TableHead>
-                  <TableHead className="py-2 font-bold text-center">
-                    <img
-                      height={32}
-                      width={32}
-                      src="/favicon.ico"
-                      className="border-2 rounded-lg mx-auto mb-2 w-8 h-8"
-                      alt="zen"
-                    />
-                    Zen
-                  </TableHead>
-                  <TableHead className="py-2 pl-4 lg:pr-0 pr-2 font-bold text-center opacity-60">
-                    <img
-                      height={32}
-                      width={32}
-                      src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/floorp.png"
-                      className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7"
-                      alt="floorp"
-                    />
-                    Floorp
-                  </TableHead>
-                  <TableHead className="py-2 pl-0 font-bold text-center opacity-60">
-                    <img
-                      height={32}
-                      width={32}
-                      src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/librewolf.png"
-                      className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7"
-                      alt="librewolf"
-                    />
-                    LibreWolf
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                <TableRow className="border-none">
-                  <TableCell className="py-3 font-medium">
-                    Fine-grained security like sandboxing
-                  </TableCell>
-                  <TableCell className="py-3">
               <Checkmark />
-                  </TableCell>
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Quick Access</p>
-                  <TableCell className="py-3 pl-4 pr-0">
+            </div>
-                    <Cross />
+            <div className='flex items-center mt-4'>
-                  </TableCell>
-                  <TableCell className="py-3">
               <Checkmark />
-                  </TableCell>
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Customizable</p>
-                </TableRow>
+            </div>
-                <TableRow className="border-none">
+            <div className='flex items-center mt-4'>
-                  <TableCell className="py-3 font-medium">
-                    Optimized for peak performance
-                  </TableCell>
-                  <TableCell className="py-3">
               <Checkmark />
-                  </TableCell>
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Easy to Use</p>
-                  <TableCell className="py-3 pl-4 pr-0">
-                    <Cross />
-                  </TableCell>
-                  <TableCell className="py-3">
-                    <Cross />
-                  </TableCell>
-                </TableRow>
-                <TableRow className="border-none">
-                  <TableCell className="py-3 font-medium">
-                    Based on the latest Firefox
-                  </TableCell>
-                  <TableCell className="py-3">
-                    <Checkmark />
-                  </TableCell>
-                  <TableCell className="py-3 pl-4 pr-0">
-                    <Cross />
-                  </TableCell>
-                  <TableCell className="py-3">
-                    <Checkmark />
-                  </TableCell>
-                </TableRow>
-                <TableRow className="border-none">
-                  <TableCell className="py-3 font-medium">
-                    Customizable with cutting-edge features
-                  </TableCell>
-                  <TableCell className="py-3">
-                    <Checkmark />
-                  </TableCell>
-                  <TableCell className="py-3 pl-4 pr-0">
-                    <Checkmark />
-                  </TableCell>
-                  <TableCell className="py-3">
-                    <Cross />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-        <div className="border-t-2 md:border-l-2 row-span-3 grid grid-rows-3">
-          <div className="flex items-center flex-col justify-center p-16">
-            <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
-              <Github className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">Open source</h2>
-            </div>
-            <p className="text-sm mt-8 text-muted-foreground text-center">
-              Zen Browser is open source and always will be. You can check out
-              the source code on our{' '}
-              <a
-                className="text-blue-500"
-                href="https://github.com/zen-browser"
-              >
-                Github
-              </a>
-              !
-            </p>
-          </div>
-          <div className="flex flex-col items-center justify-center p-16 md:border-t-2">
-            <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
-              <ReloadIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">Updated</h2>
-            </div>
-            <p className="text-sm mt-8 text-muted-foreground text-center">
-              We are always working on new features and improvements. You can
-              expect regular updates to keep your browser up to date.
-            </p>
-          </div>
-
-          <div className="flex flex-col p-16 md:border-t-2">
-            <div className="border-2 mt-4 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
-              <HeartFilledIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">Community</h2>
-            </div>
-            <p className="text-sm mt-8 text-muted-foreground text-center">
-              Zen Browser is built by a community of passionate developers and
-              designers. You can join us on our{' '}
-              <a className="text-blue-500" href="https://discord.gg/nnShMQzR4b">
-                Discord
-              </a>
-              !
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-col md:border-t-2 md:col-span-2 grid grid-cols-1 md:grid-cols-2">
-          <div className="p-16 border-r-2 flex flex-col items-center justify-center">
-            <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
-              <EyeClosedIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">Your Data</h2>
-            </div>
-            <p className="text-sm mt-8 text-muted-foreground text-center">
-              We are always looking for ways to improve your privacy. Zen
-              Browser comes with built-in privacy features to keep you safe.
-            </p>
-          </div>
-          <div className="p-16 flex flex-col items-center justify-center">
-            <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
-              <UpdateIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">Improvements</h2>
-            </div>
-            <p className="text-sm mt-8 text-muted-foreground text-center">
-              We are always looking for ways to make Zen Browser better. You can
-              expect regular updates with new features and improvements.
-            </p>
-          </div>
-        </div>
-        <div className="flex flex-col border-t-2 md:col-span-3 grid grid-cols-1 md:grid-cols-3 grid-rows-2 row-span-2">
-          <div className="relative p-16 border-r-2 flex flex-col items-center justify-center row-span-2 col-span-2">
-            <div className="relative w-full h-full flex items-center justify-center">
-              <img
-                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/split-view.png"
-                className={ny(
-                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
-                  feature === 0 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
-                )}
-              />
-              <img
-                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/workspaces.png"
-                className={ny(
-                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
-                  feature === 1 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
-                )}
-              />
-              <img
-                src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/sidebar.png"
-                className={ny(
-                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
-                  feature === 2 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
-                )}
-              />
-            </div>
-          </div>
-          <div className="p-16 flex flex-col items-center justify-around row-span-2">
-            <div
-              className={ny(
-                feature === 0 ? 'opacity-100' : 'opacity-50',
-                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
-              )}
-              onClick={() => setFeature(0)}
-            >
-              <h2 className="text-lg font-bold ml-4 flex items-center">
-                <SplitSquareHorizontal className="w-4 h-4 mr-2" />
-                Split view
-              </h2>
-              <p className="text-sm mt-2 text-muted-foreground ml-5">
-                Split your browser into two windows to work more efficiently.
-              </p>
-            </div>
-            <div
-              className={ny(
-                feature === 1 ? 'opacity-100' : 'opacity-50',
-                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
-              )}
-              onClick={() => setFeature(1)}
-            >
-              <h2 className="text-lg font-bold ml-4 flex items-center">
-                <HomeIcon className="w-4 h-4 mr-2" />
-                Workspaces
-              </h2>
-              <p className="text-sm mt-2 text-muted-foreground ml-5">
-                Organize your tabs into workspaces to keep things tidy.
-              </p>
-            </div>
-            <div
-              className={ny(
-                feature === 2 ? 'opacity-100' : 'opacity-50',
-                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
-              )}
-              onClick={() => setFeature(2)}
-            >
-              <h2 className="text-lg font-bold ml-4 flex items-center">
-                <SidebarIcon className="w-4 h-4 mr-2" />
-                Sidebar
-              </h2>
-              <p className="text-sm mt-2 text-muted-foreground ml-5">
-                Keep your favorite websites at your fingertips with the sidebar.
-              </p>
             </div>
           </div>
         </div>
+        <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
+      </div>
+      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+        <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
+        <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
+          <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.</p>
+          <div className="relative">
+            <Button className='mt-8' onClick={() => window.open('/download', '_self')}>What are you waiting for?</Button>
           </div>
         </div>
+      </div>
+      <div className='w-full md:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+        <div className="flex p-16 lg:w-1/2 flex-col justify-center">
+          <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Convinced?</h3>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Download Zen Browser now and experience the future of browsing.</p>
+          <div className="relative">
+            <Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
+          </div>
+        </div>
+        <div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
+        <div className="flex p-16 lg:w-1/2 flex-col justify-center">
+          <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Even more convinced? <HeartHandshake className='inline text-red-500 h-10 w-10' /></h3>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Help support the development of Zen Browser by donating to our cause.</p>
+          <div className="relative mt-8 flex">
+            <Button variant="ghost" onClick={() => window.open('https://patreon.com/zen_browser', '_blank')}>Patreon <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
+            <Button className="ml-8" variant="ghost" onClick={() => window.open('https://ko-fi.com/zen_browser', '_blank')}>Ko-fi <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }

src/components/header.tsx

@@ -7,7 +7,7 @@ import AnimatedGradientText from "./ui/animated-gradient-text";
 import { Button } from "./ui/button";
 import { BorderBeam } from "./ui/border-beam";
 import { ny } from "@/lib/utils";
-import { ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import Particles from "./ui/particles";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,7 +18,7 @@ export default function Header() {
     <>
       <section
         id="hero"
-        className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
+        className="relative mx-auto min-h-screen flex justify-center flex-col max-w-7xl px-6 text-center md:px-8"
       >
         <a href="/download">
           <AnimatedGradientText>
@@ -42,6 +42,7 @@ export default function Header() {
           <br className="hidden md:block" /> We care about your experience, not
           your data.
         </p>
+        <div className="flex justify-center w-full">
           <a href="/download">
           <Button
             className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
@@ -50,56 +51,13 @@ export default function Header() {
             <ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
           </Button>
           </a>
-        <div
+          <a href="#features" className="animate-fade-up -translate-y-4 opacity-0 [--animation-delay:800ms]">
-          ref={ref}
+            <Button variant="ghost" className="ml-4">
-          className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"
+              Start Exploring <ChevronDown className="ml-1 size-4" />
-        >
+            </Button>
-          <div
+          </a>
-            className={`rounded-xl border border-white/10 bg-white bg-opacity-[0.01] before:absolute before:bottom-1/2 before:left-0 before:top-0 before:size-full before:opacity-0 before:[background-image:linear-gradient(to_bottom,var(--color-one),var(--color-one),transparent_40%)] before:[filter:blur(180px)] ${
-              inView ? "before:animate-image-glow" : ""
-            }`}
-          >
-            <BorderBeam
-              size={200}
-              duration={12}
-              delay={11}
-              colorFrom="var(--color-one)"
-              colorTo="var(--color-two)"
-            />
-
-            <img
-              width={1500}
-              height={700}
-              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
-              alt="browser Image"
-              className="relative hidden rounded-[inherit] border object-contain dark:block"
-            />
-            <img
-              width={1500}
-              height={700}
-              src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"
-              alt="browser Image"
-              className="relative block rounded-[inherit]  border object-contain dark:hidden"
-            />
-          </div>
         </div>
       </section>
-      <Particles
-        className="absolute inset-0 -z-10 hidden dark:block"
-        quantity={50}
-        ease={70}
-        size={0.05}
-        staticity={40}
-        color="#ffffff"
-      />
-      <Particles
-        className="absolute inset-0 -z-10 block dark:hidden"
-        quantity={50}
-        ease={70}
-        size={0.05}
-        staticity={40}
-        color="#000000"
-      />
     </>
   );
 }

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import { ny } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -21,7 +21,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
+        default: "h-12 px-8 py-4",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",

tailwind.config.ts

@@ -28,6 +28,7 @@ const config = {
          ring: 'hsl(var(--ring))',
          background: 'hsl(var(--background))',
          foreground: 'hsl(var(--foreground))',
+         surface: "var(--surface)",
          primary: {
             DEFAULT: 'hsl(var(--primary))',
             foreground: 'hsl(var(--primary-foreground))',