Update mobile-nav and features components

src/components/CachedImage.tsx

@@ -2,7 +2,13 @@
 
 import Image from "next/image";
 
+
+const inDev = process.env.NODE_ENV === "development";
 function imageLoader({ src }: { src: string }) {
+	// Load locally if we are in development
+	if (inDev) {
+		return src.replace(/^www\/public/, "");
+	}
 	return `https://cdn.jsdelivr.net/gh/zen-browser/${src}`;
 }
 

src/components/browser-slider.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ny } from "@/lib/utils";
+import CachedImage from "./CachedImage";
+import { Slider } from "./ui/slider";
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export default function BrowserComplexityExample() {
+  const [selectedImage, setSelectedImage] = React.useState([1]);
+  return (
+    <div className="flex h-screen items-center flex-col mx-auto mb-32 xl:mb-64 w-full md:w-5/6 lg:w-3/4">
+      <div className="flex items-center text-2xl cursor-default font-bold select-none">
+        <span>🌱</span>
+        <div className="flex mx-5 items-center opacity-10">
+          <ChevronLeft className="w-5 h-5" style={{ marginInlineEnd: "-0.8rem" }} />
+          <span className="w-24 bg-black dark:bg-white h-0.5"></span>
+          <ChevronRight className="w-5 h-5" style={{ marginInlineStart: "-0.8rem" }} />
+        </div>
+        <span>🌳</span>
+      </div>
+      <p className="mt-4 text-center text-md mx-auto w-2/3 text-muted-foreground">
+        Zen Browser is designed to be simple and easy to use. We believe that the best software is
+        the one that you don't notice. However, we can assure you that if you want customization, we have you covered
+      </p>
+      <div className="w-64 mb-6 mt-24">
+        <Slider step={1} max={3} showSteps="half" value={selectedImage} onValueChange={setSelectedImage} />
+      </div>
+      <div className="mx-auto md:mb-36 flex justify-center">
+        {[...Array(4)].map((_, i) => (
+          <CachedImage
+            width={1620}
+            height={900}
+            priority
+            key={i}
+            src={`www/public/browsers/image${i + 1}.png`}
+            alt="Zen Browser"
+            className={ny("rounded-md object-cover shadow object-right mx-12 w-full", selectedImage[0] === i 
+                ? "" //"animate-fade-up duration-500 !opacity-100" 
+                : "hidden")}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/features.tsx

@@ -22,6 +22,7 @@ import React from "react";
 
 import CachedImage from "./CachedImage";
 import { FAQ } from "@/components/faq/faq";
+import BrowserComplexityExample from "./browser-slider";
 
 function Checkmark() {
 	return (
@@ -38,6 +39,7 @@ function Question() {
 export default function Features() {
 	return (
 		<section className="w-full flex-col" id="features">
+			<BrowserComplexityExample />
 			<div className="mx-auto mt-16 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
 				<div className="flex-1 p-5 lg:p-12">
 					<div className="flex flex-col justify-center p-12">
@@ -46,7 +48,7 @@ export default function Features() {
 							<PaintBucket className="inline h-10 w-10"></PaintBucket>
 						</h3>
 						<p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
-							With Zen's Theme Store, you can customize your browsing experience
+							With Zen Mods, you can customize your browsing experience
 							to reflect your unique style and preferences. Choose from a wide
 							array of Mods, colors, and layouts to make Zen truly your own,
 							transforming your browser into a personalized digital space.

src/components/mobile-nav.tsx

@@ -76,7 +76,7 @@ export function MobileNav() {
 							</p>
 						</MobileLink>
 						<MobileLink href="/themes" onOpenChange={setOpen}>
-							<div>Theme Store</div>
+							<div>Zen Mods</div>
 							<p className="text-xs opacity-60">
 								Customize your browsing experience.
 							</p>