Merge branch 'main' of https://github.com/thebluedev/zencont

src/components/create-theme.tsx

@@ -187,9 +187,12 @@ export default function CreateThemePage() {
               <input type="text" className="border text-gray-500 rounded-lg p-2 w-2/3" value={dialogBg} onChange={(e) => setDialogBg(e.target.value)} />
               <div className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
             </div>
+            <div className="text-md font-bold text-muted-foreground mt-8">
+              Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.
+            </div>
             <Sheet>
               <SheetTrigger asChild>
-                <Button className="mt-8">Create theme</Button>
+                <Button disabled className="mt-8">Create theme</Button>
               </SheetTrigger>
               <SheetContent className="!w-[600px] !max-w-lg">
                 <SheetHeader>

src/components/features.tsx

@@ -28,6 +28,7 @@ import {
   UpdateIcon,
 } from "@radix-ui/react-icons";
 import Image from "next/image";
+import Link from "next/link";
 import { Button } from './ui/button';
 import { COLORS } from './create-theme';
 import { Slider } from './ui/slider';
@@ -117,8 +118,6 @@ export default function Features() {
           </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="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
             <div className="">
               <div>
@@ -129,7 +128,7 @@ export default function Features() {
                   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>
-              <Button className="mt-4 rounded-full p-5 ml-auto">Download zen now!</Button>
+              <Link href="/download"><Button className="mt-4 rounded-full p-5 ml-auto">Download Zen now!</Button></Link>
             </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) => (
@@ -148,8 +147,6 @@ export default function Features() {
           </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="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <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'>
@@ -163,7 +160,7 @@ export default function Features() {
                   Killer feature
                 </div>
               </div>
-              <Button className="mt-4 rounded-full p-5 ml-4">Download zen now!</Button>
+              <Link href="/download"><Button className="mt-4 rounded-full p-5 ml-4">Download Zen now!</Button></Link>
             </div>
             <img src="/compact-mode.png" 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" />
           </div>

src/components/release-note.tsx

@@ -97,7 +97,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
       </div>
       <div className="flex flex-wrap items-center justify-center">
         <Link href="/download">
-          <Button className="mt-12 w-fit mx-auto">Download zen now!</Button>
+          <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
         </Link>
       </div>
     </div>