ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 01:10:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

Refactor next.config.js and form.tsx

Browse source
This commit is contained in:
mr. M 2024-10-14 22:52:01 +02:00
parent 00c7ce4c56
commit 5ec0fcbb56
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
31 changed files with 388 additions and 336 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/browser-slider.tsx
View file

@ -6,34 +6,46 @@ import { Slider } from "./ui/slider";
import React from "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">
<h1 className="text-4xl md:text-5xl font-bold text-center">How much browser do you want?</h1>
<p className="mt-4 text-center text-md mx-auto w-2/3 text-muted-foreground">
Zen 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-12 flex gap-4">
<span className="opacity-90">🌱</span>
<Slider step={1} max={3} showSteps="half" value={selectedImage} onValueChange={setSelectedImage} />
<span className="opacity-90">🌳</span>
</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>
)
const [selectedImage, setSelectedImage] = React.useState([1]);
return (
<div className="mx-auto mb-32 flex h-screen w-full flex-col items-center md:w-5/6 lg:w-3/4 xl:mb-64">
<h1 className="text-center text-4xl font-bold md:text-5xl">
How much browser do you want?
</h1>
<p className="text-md mx-auto mt-4 w-2/3 text-center text-muted-foreground">
Zen 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="mb-6 mt-12 flex w-64 gap-4">
<span className="opacity-90">🌱</span>
<Slider
step={1}
max={3}
showSteps="half"
value={selectedImage}
onValueChange={setSelectedImage}
/>
<span className="opacity-90">🌳</span>
</div>
<div className="mx-auto flex justify-center md:mb-36">
{[...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(
"mx-12 w-full rounded-md object-cover object-right shadow",
selectedImage[0] === i
? "" //"animate-fade-up duration-500 !opacity-100"
: "hidden",
)}
/>
))}
</div>
</div>
);
}