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

feat: Update download page layout for responsive design

Browse Source
This commit is contained in:
Mauro Balades
2024-08-15 10:57:52 +02:00
parent 765eafbef5
commit f36a630f81
2 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/download.tsx
View File

@@ -255,7 +255,7 @@ export default function DownloadPage() {
</div> </div>
)) || ( )) || (
<> <>
<h1 className="text-6xl font-bold">Download <SparklesText className="mx-2" text="Zen " /></h1> <h1 className="text-6xl font-bold flex flex-col lg:flex-row">Download <SparklesText className="mx-2" text="Zen" /></h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise. We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.
</p> </p>

29
src/components/features.tsx
View File

@@ -53,20 +53,19 @@ export default function Features() {
<div className="relative"> <div className="relative">
{/*<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-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-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>
<p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 lg:p-0 mb-10"> <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. 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="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0 gap-4 lg:gap-8"> <div className="w-full flex mx-auto lg:mr-8 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
<div className="w-full flex flex-col gap-4 lg:gap-8"> <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="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col lg:max-w-md justify-center rounded-xl md:border-2 p-10 md:shadow-xl">
<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 lg:max-w-md 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 p-20 md:shadow-xl">
<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.
@@ -81,7 +80,7 @@ export default function Features() {
</div> </div>
</div> </div>
<div className="w-full lg:mr-4 flex flex-col"> <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 lg:max-w-md 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 p-20 md:shadow-xl">
<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.
@@ -94,7 +93,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 lg:max-w-md 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 p-20 md:shadow-xl">
<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.
@@ -113,7 +112,7 @@ export default function Features() {
borderWidth={2} borderWidth={2}
borderRadius={12} borderRadius={12}
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]} color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
className="mt-20 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl" className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
> >
<div className="w-full p-16"> <div className="w-full p-16">
<Table> <Table>
@@ -217,9 +216,8 @@ export default function Features() {
</Table> </Table>
</div> </div>
</ShineBorder> </ShineBorder>
<div className="flex flex-col items-center justify-center w-full mt-20"> <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 lg:flex-row w-full mt-4 p-5 justify-between items-center">
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
<div className="flex flex-col max-w-lg text-center md:text-start"> <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> <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"> <p className="text-muted-foreground mt-3">
@@ -228,7 +226,7 @@ export default function Features() {
</div> </div>
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" /> <RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
</div> </div>
<div className="flex flex-col lg:flex-row w-full mt-20 p-5 justify-between items-center"> <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"> <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> <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"> <p className="text-muted-foreground mt-3">
@@ -237,8 +235,7 @@ export default function Features() {
</div> </div>
<EyeClosedIcon className="mx-auto hidden md:block w-32 h-32" /> <EyeClosedIcon className="mx-auto hidden md:block w-32 h-32" />
</div> </div>
<div className="flex flex-col lg:flex-row w-full mt-20 p-5 justify-between items-center"> <div className="flex flex-col lg:flex-row w-full mt-48 p-5 justify-between items-center">
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
<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-lg">
<h1 className="text-5xl font-bold items-center flex-col">Security is <SparklesText className="inline" text="important" /></h1> <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"> <p className="text-muted-foreground mt-3">
@@ -248,7 +245,7 @@ export default function Features() {
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" /> <LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
</div> </div>
</div> </div>
<div className="my-20 w-full flex items-center justify-center flex-col"> <div className="my-24 w-full flex items-center justify-center flex-col">
<h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1> <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"> <p className="text-muted-foreground text-center mt-3 w-1/2">
Zen Browser is packed with features designed to revolutionize your browsing. Zen Browser is packed with features designed to revolutionize your browsing.
@@ -261,7 +258,7 @@ export default function Features() {
description="Personalize Zen to match your preferences with themes, layouts, and more." /> description="Personalize Zen to match your preferences with themes, layouts, and more." />
<FeatureCard title="Keyboard shortcuts" <FeatureCard title="Keyboard shortcuts"
description="Boost your productivity with keyboard shortcuts tailored for efficiency." /> description="Boost your productivity with keyboard shortcuts tailored for efficiency." />
<FeatureCard title="Your browsing experience, your way" <FeatureCard title="Your browser, your way"
description="Zen adapts to your needs, offering a browsing experience as unique as you." /> description="Zen adapts to your needs, offering a browsing experience as unique as you." />
<FeatureCard title="Tab groups" <FeatureCard title="Tab groups"
description="Keep your browsing organized with tab groups that streamline your workflow." description="Keep your browsing organized with tab groups that streamline your workflow."