chore: Update ThemePage component to include padding for mobile view
This commit is contained in:
Mauro Balades
@@ -29,6 +29,8 @@ import {
|
||||
import ShineBorder from "./ui/shine-border";
|
||||
import SparklesText from "./ui/sparkles-text";
|
||||
import Image from "next/image";
|
||||
import OrbitingCircles from "./ui/orbiting-circles";
|
||||
import { ny } from "@/lib/utils";
|
||||
|
||||
function Checkmark() {
|
||||
return (
|
||||
@@ -49,23 +51,81 @@ function Question() {
|
||||
}
|
||||
|
||||
export default function Features() {
|
||||
const [feature, setFeature] = useState(0);
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
setFeature((feature) => (feature + 1) % 3);
|
||||
}, 10000);
|
||||
}, []);
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="relative w-full mb-52 p-5 lg:p-0">
|
||||
<div className="w-full lg:w-1/2 p-5 lg:p-0 mx-auto grid mt-52 lg:grid-cols-2 relative lg:border-2 lg:rounded-xl lg:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
|
||||
<div className="flex flex-col lg:p-20 justify-center">
|
||||
<h1 className="text-3xl font-bold">The only limit is your</h1>
|
||||
<SparklesText className="!text-3xl" text="Imagination" />
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen{'’'}s Compact Mode offers a streamlined browsing experience that maximizes your screen space, perfect for smaller screens.
|
||||
</p>
|
||||
<Button className="mt-8" onClick={() => window.location.href = "/download"}>Try it now</Button>
|
||||
</div>
|
||||
<div className="relative hidden lg:block flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden">
|
||||
<span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
|
||||
<Image src="/logos/zen-black.png" width={100} height={100} alt="Zen Logo" />
|
||||
</span>
|
||||
|
||||
{/* Inner Circles */}
|
||||
<OrbitingCircles
|
||||
className="size-[30px] border-none bg-transparent"
|
||||
duration={20}
|
||||
delay={20}
|
||||
radius={80}
|
||||
>
|
||||
<Image src="/logos/zen-indigo.png" width={30} height={30} alt="Zen Logo" />
|
||||
</OrbitingCircles>
|
||||
<OrbitingCircles
|
||||
className="size-[30px] border-none bg-transparent"
|
||||
duration={20}
|
||||
delay={10}
|
||||
radius={80}
|
||||
>
|
||||
<Image src="/logos/zen-yellow.png" width={30} height={30} alt="Zen Logo" />
|
||||
</OrbitingCircles>
|
||||
|
||||
{/* Outer Circles (reverse) */}
|
||||
<OrbitingCircles
|
||||
className="size-[50px] border-none bg-transparent"
|
||||
radius={190}
|
||||
duration={20}
|
||||
reverse
|
||||
>
|
||||
<Image src="/logos/zen-blue.png" width={50} height={50} alt="Zen Logo" />
|
||||
</OrbitingCircles>
|
||||
<OrbitingCircles
|
||||
className="size-[50px] border-none bg-transparent"
|
||||
radius={190}
|
||||
duration={20}
|
||||
delay={20}
|
||||
reverse
|
||||
>
|
||||
<Image src="/logos/zen-pink.png" width={50} height={50} alt="Zen Logo" />
|
||||
</OrbitingCircles>
|
||||
</div>
|
||||
</div>
|
||||
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
|
||||
<h1 className="text-5xl font-bold mt-2 text-center p-5 md:p-0 flex flex-col md:flex-row justify-center items-center mb-2">What does Zen offer to <SparklesText className="mx-2" text="YOU" />?</h1>
|
||||
<h1 className="text-5xl font-bold mt-56 text-center p-5 md:p-0 flex flex-col md:flex-row justify-center items-center mb-2">What does Zen offer to <SparklesText className="mx-2" text="YOU" />?</h1>
|
||||
<p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 lg:p-0 mb-24">
|
||||
Discover how Zen Browser can transform your web experience with powerful features that keep you ahead.
|
||||
Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
|
||||
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
|
||||
<div className="w-full flex mx-auto lg:mr-8 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
|
||||
<div className="w-full lg:w-1/2 mx-auto flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
|
||||
<div className="w-full flex mx-auto lg:mr-8 flex-col lg:mb-24 lg:ml-4 lg:mt-10">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 lg:p-20 md:shadow-xl hover:scale-105">
|
||||
<h1 className="text-5xl font-bold">Split views</h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Multitask effortlessly by splitting your browser into multiple views, so you can browse several sites at once.
|
||||
</p>
|
||||
<img src="/split-view.png" className="mt-8 w-full h-full h-auto" />
|
||||
</div>
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 lg:p-20 pt-24 lg:pt-0 md:shadow-xl hover:scale-105">
|
||||
<h1 className="text-5xl font-bold">Workspaces</h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Stay organized and clutter-free by creating workspaces tailored to your browsing needs.
|
||||
@@ -80,7 +140,7 @@ export default function Features() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:mr-4 flex flex-col">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 lg:p-20 pt-24 lg:pt-0 md:shadow-xl hover:scale-105">
|
||||
<h1 className="text-5xl font-bold">Profile switching</h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Seamlessly switch between work and personal profiles for a focused browsing experience.
|
||||
@@ -93,7 +153,7 @@ export default function Features() {
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
|
||||
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 lg:p-20 pt-24 lg:pt-0 md:shadow-xl hover:scale-105">
|
||||
<h1 className="text-5xl font-bold">Side web panels</h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Access favorite sites and services instantly, without leaving your current page.
|
||||
@@ -112,9 +172,9 @@ export default function Features() {
|
||||
borderWidth={2}
|
||||
borderRadius={12}
|
||||
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
|
||||
className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
|
||||
className="w-full lg:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background lg:p-12 rounded-lg md:shadow-xl"
|
||||
>
|
||||
<div className="w-full p-16">
|
||||
<div className="w-full lg:p-16">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
|
||||
@@ -216,36 +276,65 @@ export default function Features() {
|
||||
</Table>
|
||||
</div>
|
||||
</ShineBorder>
|
||||
<div className="flex flex-col items-center justify-center w-full my-48">
|
||||
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center">
|
||||
<div className="flex flex-col max-w-lg text-center md:text-start">
|
||||
<h1 className="text-5xl font-bold flex items-center flex-col md:flex-row">Built for <SparklesText className="md:mx-2" text="speed" /></h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 mx-auto justify-center w-full lg:w-2/3 my-80">
|
||||
<div className="relative w-full flex items-center">
|
||||
<div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 0 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
|
||||
<div className="flex flex-col max-w-lg text-center md:text-start">
|
||||
<h1 className="text-5xl lg:text-8xl font-bold">Built for</h1>
|
||||
<SparklesText className="!text-5xl lg:!text-8xl" text="speed" />
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
|
||||
</p>
|
||||
<Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
|
||||
</div>
|
||||
</div>
|
||||
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row w-full mt-48 p-5 justify-between items-center">
|
||||
<div className="flex flex-col max-w-lg text-center md:text-start">
|
||||
<h1 className="text-5xl font-bold flex flex-col md:flex-row items-center">Privacy is <SparklesText className="md:mx-2" text="key" /></h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
|
||||
</p>
|
||||
<div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 1 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
|
||||
<div className="flex flex-col max-w-lg text-center md:text-start">
|
||||
<h1 className="text-5xl lg:text-8xl font-bold">Privacy is</h1>
|
||||
<SparklesText className="!text-5xl lg:!text-8xl" text="key" />
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
|
||||
</p>
|
||||
<Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
|
||||
</div>
|
||||
</div>
|
||||
<EyeClosedIcon className="mx-auto hidden md:block w-32 h-32" />
|
||||
</div>
|
||||
<div className="flex flex-col lg:flex-row w-full mt-48 p-5 justify-between items-center">
|
||||
<div className="flex flex-col text-center md:text-start max-w-lg">
|
||||
<h1 className="text-5xl font-bold items-center flex-col">Security is <SparklesText className="inline" text="important" /></h1>
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
|
||||
</p>
|
||||
<div className={ny("flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 2 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
|
||||
<div className="flex flex-col text-center md:text-start max-w-lg">
|
||||
<h1 className="text-5xl lg:text-8xl font-bold">Security is</h1>
|
||||
<SparklesText className="text-5xl lg:!text-8xl" text="important" />
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
|
||||
</p>
|
||||
<Button className="mt-8 mx-auto lg:mx-0 w-fit" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
|
||||
</div>
|
||||
</div>
|
||||
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
|
||||
</div>
|
||||
<Image
|
||||
height={1000}
|
||||
width={800}
|
||||
src="/color-preview.png"
|
||||
className="rounded-xl mt-64 lg:mt-0 lg:ml-52 border-2 border-blue-500 shadow-lg lg:scale-[1.4] hover:scale-105 lg:hover:scale-[1.5] transition-all duration-200"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="my-24 w-full flex items-center justify-center flex-col">
|
||||
<div className="w-full lg:w-1/2 mx-auto p-5 lg:p-0 mx-auto grid mt-52 lg:grid-cols-2 relative lg:border-2 lg:rounded-xl lg:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
|
||||
<div className="flex flex-col lg:p-20">
|
||||
<h1 className="text-3xl font-bold">Introducing</h1>
|
||||
<SparklesText className="!text-3xl" text="Compact Mode" />
|
||||
<p className="text-muted-foreground mt-3">
|
||||
Zen{'’'}s Compact Mode offers a streamlined browsing experience that maximizes your screen space, perfect for smaller screens.
|
||||
</p>
|
||||
<Button className="mt-8" onClick={() => window.location.href = "/download"}>Try it now</Button>
|
||||
</div>
|
||||
<Image
|
||||
height={500}
|
||||
width={300}
|
||||
src="/compact-mode.png"
|
||||
className="hidden lg:block absolute right-0 bottom-0 rounded-tl-lg border-t-2 border-l-2"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-48 w-full flex items-center justify-center flex-col">
|
||||
<h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
|
||||
<p className="text-muted-foreground text-center mt-3 w-1/2">
|
||||
Zen Browser is packed with features designed to revolutionize your browsing.
|
||||
|
||||
Reference in New Issue
Block a user