Update mobile-nav and features components
BIN
public/browsers/image1.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
public/browsers/image2.png
Normal file
After Width: | Height: | Size: 900 KiB |
BIN
public/browsers/image3.png
Normal file
After Width: | Height: | Size: 930 KiB |
BIN
public/browsers/image4.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 150 KiB |
|
@ -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}`;
|
||||
}
|
||||
|
||||
|
|
46
src/components/browser-slider.tsx
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
|
|