joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update ThemePage component to include responsive layout for larger screens

Browse Source
This commit is contained in:
Mauro Balades
2024-08-17 22:42:10 +02:00
parent 88d8c51999
commit 7c90075c4f
1 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/features.tsx
View File

@@ -58,9 +58,9 @@ export default function Features() {
}, 10000); }, 10000);
}, []); }, []);
return ( return (
<div className="relative w-full mb-52 p-5 lg:p-0"> <div className="relative w-full mb-52 p-5 xl: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="w-full xl:w-1/2 p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
<div className="flex flex-col lg:p-20 justify-center"> <div className="flex flex-col xl:p-20 justify-center">
<h1 className="text-3xl font-bold">The only limit is your</h1> <h1 className="text-3xl font-bold">The only limit is your</h1>
<SparklesText className="!text-3xl" text="Imagination" /> <SparklesText className="!text-3xl" text="Imagination" />
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
@@ -68,7 +68,7 @@ export default function Features() {
</p> </p>
<Button className="mt-8" onClick={() => window.location.href = "/download"}>Try it now</Button> <Button className="mt-8" onClick={() => window.location.href = "/download"}>Try it now</Button>
</div> </div>
<div className="relative hidden lg:flex h-[500px] w-full max-w-lg items-center justify-center overflow-hidden"> <div className="relative hidden xl:flex h-[500px] w-full max-w-xl 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"> <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" /> <Image src="/logos/zen-black.png" width={100} height={100} alt="Zen Logo" />
</span> </span>
@@ -113,19 +113,19 @@ export default function Features() {
</div> </div>
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/} {/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
<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> <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"> <p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 xl:p-0 mb-24">
Discover how Zen Browser can transform your web experience with powerful features that keep you ahead. 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> Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
<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 xl:w-1/2 mx-auto flex flex-col xl:flex-row w-full mt-4 p-5 xl: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="w-full flex mx-auto xl:mr-8 flex-col xl:mb-24 xl:ml-4 xl: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"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105">
<h1 className="text-5xl font-bold">Split views</h1> <h1 className="text-5xl font-bold">Split views</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Multitask effortlessly by splitting your browser into multiple views, so you can browse several sites at once. Multitask effortlessly by splitting your browser into multiple views, so you can browse several sites at once.
</p> </p>
<img src="/split-view.png" className="mt-8 w-full h-full h-auto" /> <img src="/split-view.png" className="mt-8 w-full h-full h-auto" />
</div> </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 pt-24 lg:p-20 md:shadow-xl hover:scale-105"> <div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto xl:mx-0 relative flex flex-col mt-8 max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
<h1 className="text-5xl font-bold">Workspaces</h1> <h1 className="text-5xl font-bold">Workspaces</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Stay organized and clutter-free by creating workspaces tailored to your browsing needs. Stay organized and clutter-free by creating workspaces tailored to your browsing needs.
@@ -139,8 +139,8 @@ export default function Features() {
/> />
</div> </div>
</div> </div>
<div className="w-full lg:mr-4 flex flex-col"> <div className="w-full xl: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 pt-24 lg:p-20 md:shadow-xl hover:scale-105"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 xl:mt-0 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
<h1 className="text-5xl font-bold">Profile switching</h1> <h1 className="text-5xl font-bold">Profile switching</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Seamlessly switch between work and personal profiles for a focused browsing experience. Seamlessly switch between work and personal profiles for a focused browsing experience.
@@ -153,7 +153,7 @@ export default function Features() {
alt="" alt=""
/> />
</div> </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 pt-24 lg:p-20 md:shadow-xl hover:scale-105"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 mt-8 flex-col flex max-w-xl justify-center rounded-xl md:border-2 pt-24 xl:p-20 md:shadow-xl hover:scale-105">
<h1 className="text-5xl font-bold">Side web panels</h1> <h1 className="text-5xl font-bold">Side web panels</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Access favorite sites and services instantly, without leaving your current page. Access favorite sites and services instantly, without leaving your current page.
@@ -172,9 +172,9 @@ export default function Features() {
borderWidth={2} borderWidth={2}
borderRadius={12} borderRadius={12}
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]} color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
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" className="w-full xl:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background xl:p-12 rounded-xl md:shadow-xl"
> >
<div className="w-full lg:p-16"> <div className="w-full xl:p-16">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="!border-none" style={{ pointerEvents: 'none'}}> <TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
@@ -276,36 +276,36 @@ export default function Features() {
</Table> </Table>
</div> </div>
</ShineBorder> </ShineBorder>
<div className="grid grid-cols-1 lg:grid-cols-2 mx-auto justify-center w-full lg:w-2/3 my-80"> <div className="grid grid-cols-1 xl:grid-cols-2 mx-auto justify-center w-full xl:w-2/3 my-80">
<div className="relative w-full flex items-center"> <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={ny("flex flex-col xl: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"> <div className="flex flex-col max-w-xl text-center md:text-start">
<h1 className="text-5xl lg:text-5xl font-bold">Built for</h1> <h1 className="text-5xl xl:text-5xl font-bold">Built for</h1>
<SparklesText className="!text-5xl lg:!text-5xl" text="speed" /> <SparklesText className="!text-5xl xl:!text-5xl" text="speed" />
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience. Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
</p> </p>
<Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button> <Button className="mt-8 w-fit mx-auto xl:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
</div> </div>
</div> </div>
<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={ny("flex flex-col xl: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"> <div className="flex flex-col max-w-xl text-center md:text-start">
<h1 className="text-5xl lg:text-5xl font-bold">Privacy is</h1> <h1 className="text-5xl xl:text-5xl font-bold">Privacy is</h1>
<SparklesText className="!text-5xl lg:!text-5xl" text="key" /> <SparklesText className="!text-5xl xl:!text-5xl" text="key" />
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data. Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
</p> </p>
<Button className="mt-8 w-fit mx-auto lg:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button> <Button className="mt-8 w-fit mx-auto xl:mx-0" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
</div> </div>
</div> </div>
<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={ny("flex flex-col xl: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"> <div className="flex flex-col text-center md:text-start max-w-xl">
<h1 className="text-5xl lg:text-5xl font-bold">Security is</h1> <h1 className="text-5xl xl:text-5xl font-bold">Security is</h1>
<SparklesText className="text-5xl lg:!text-5xl" text="important" /> <SparklesText className="text-5xl xl:!text-5xl" text="important" />
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online. Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
</p> </p>
<Button className="mt-8 mx-auto lg:mx-0 w-fit" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button> <Button className="mt-8 mx-auto xl:mx-0 w-fit" onClick={() => window.location.href = "/download"}>Download Zen Browser</Button>
</div> </div>
</div> </div>
</div> </div>
@@ -313,12 +313,12 @@ export default function Features() {
height={1000} height={1000}
width={800} width={800}
src="/color-preview.png" 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.3] hover:scale-105 lg:hover:scale-[1.4] transition-all duration-200" className="rounded-xl mt-64 xl:mt-0 xl:ml-52 border-2 border-blue-500 shadow-xl xl:scale-[1.3] hover:scale-105 xl:hover:scale-[1.4] transition-all duration-200"
alt="" alt=""
/> />
</div> </div>
<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="w-full xl:w-1/2 mx-auto p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
<div className="flex flex-col lg:p-20"> <div className="flex flex-col xl:p-20">
<h1 className="text-3xl font-bold">Introducing</h1> <h1 className="text-3xl font-bold">Introducing</h1>
<SparklesText className="!text-3xl" text="Compact Mode" /> <SparklesText className="!text-3xl" text="Compact Mode" />
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
@@ -330,7 +330,7 @@ export default function Features() {
height={500} height={500}
width={300} width={300}
src="/compact-mode.png" src="/compact-mode.png"
className="hidden lg:block absolute right-0 bottom-0 rounded-tl-lg border-t-2 border-l-2" className="hidden xl:block absolute right-0 bottom-0 rounded-tl-xl border-t-2 border-l-2"
alt="" alt=""
/> />
</div> </div>
@@ -340,7 +340,7 @@ export default function Features() {
Zen Browser is packed with features designed to revolutionize your browsing. Zen Browser is packed with features designed to revolutionize your browsing.
Download it today and experience a new way to explore the web. Download it today and experience a new way to explore the web.
</p> </p>
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10"> <div className="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 mt-10">
<FeatureCard title="Beautifully designed" <FeatureCard title="Beautifully designed"
description="Zen offers an intuitive, aesthetically pleasing interface that’s easy to navigate." /> description="Zen offers an intuitive, aesthetically pleasing interface that’s easy to navigate." />
<FeatureCard title="Customizable" <FeatureCard title="Customizable"