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

29
src/components/features.tsx
View File

@@ -53,20 +53,19 @@ export default function Features() {
<div className="relative">
{/*<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>
<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.
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 gap-4 lg:gap-8">
<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 lg:max-w-md justify-center rounded-xl md:border-2 p-10 md:shadow-xl">
<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">
<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 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>
<p className="text-muted-foreground mt-3">
Stay organized and clutter-free by creating workspaces tailored to your browsing needs.
@@ -81,7 +80,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 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>
<p className="text-muted-foreground mt-3">
Seamlessly switch between work and personal profiles for a focused browsing experience.
@@ -94,7 +93,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 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>
<p className="text-muted-foreground mt-3">
Access favorite sites and services instantly, without leaving your current page.
@@ -113,7 +112,7 @@ export default function Features() {
borderWidth={2}
borderRadius={12}
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">
<Table>
@@ -217,9 +216,8 @@ export default function Features() {
</Table>
</div>
</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">
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
<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">
@@ -228,7 +226,7 @@ export default function Features() {
</div>
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
</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">
<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">
@@ -237,8 +235,7 @@ export default function Features() {
</div>
<EyeClosedIcon className="mx-auto hidden md:block w-32 h-32" />
</div>
<div className="flex flex-col lg:flex-row w-full mt-20 p-5 justify-between items-center">
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
<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">
@@ -248,7 +245,7 @@ export default function Features() {
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
</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>
<p className="text-muted-foreground text-center mt-3 w-1/2">
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." />
<FeatureCard title="Keyboard shortcuts"
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." />
<FeatureCard title="Tab groups"
description="Keep your browsing organized with tab groups that streamline your workflow."