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

Added mroe features

Browse Source
This commit is contained in:
mauro-balades
2024-08-30 02:10:50 +02:00
parent ba7f905f4e
commit 673f10b007
1 changed files with 76 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/features.tsx
View File

@@ -11,6 +11,8 @@ import {
HeartHandshake, HeartHandshake,
HeartPulseIcon, HeartPulseIcon,
HomeIcon, HomeIcon,
PaintBucket,
PersonStanding,
RabbitIcon, RabbitIcon,
ShieldAlertIcon, ShieldAlertIcon,
ShieldCheck, ShieldCheck,
@@ -25,6 +27,7 @@ import {
Cross1Icon, Cross1Icon,
EyeClosedIcon, EyeClosedIcon,
HeartFilledIcon, HeartFilledIcon,
Link1Icon,
LockClosedIcon, LockClosedIcon,
QuestionMarkIcon, QuestionMarkIcon,
ReloadIcon, ReloadIcon,
@@ -76,7 +79,51 @@ export default function Features() {
}, []); }, []);
return ( return (
<section className="flex-col w-full" id="features"> <section className="flex-col w-full" id="features">
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-10 shadow'> <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-16 shadow'>
<div className="md:w-1/2 p-5 lg:p-12">
<div className="flex p-12 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way <PaintBucket className='inline w-10 h-10'></PaintBucket></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/themes', '_self')}>View Theme Store</Button>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/themes.webp" alt="Zen Browser" className="rounded-md mt-12" />
</div>
</div>
<div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
<div className="md:w-1/2 p-5 lg:p-12">
<div className="flex p-12 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Community driven and Open Source <Link1Icon className='inline w-10 h-10'></Link1Icon></h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.</p>
<div className='relative'>
<Button className='mt-8' onClick={() => window.open('https://github.com/zen-browser', '_blank')}>GitHub Page</Button>
</div>
<div className='w-full mt-14'>
<div className='flex items-center'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Firefox Based</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Fully Open source</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Automated Releases, to prove security</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Comunity driven</p>
</div>
<div className='flex items-center mt-5'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Constantly improving</p>
</div>
</div>
</div>
</div>
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className='p-16 lg:w-1/2 flex flex-col justify-center'> <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1> <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p> <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p>
@@ -107,37 +154,6 @@ export default function Features() {
</div> </div>
</div> </div>
</div> </div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
<div className='w-full mt-8'>
<div className='flex items-center'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Quick Access</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Customizable</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Easy to Use</p>
</div>
</div>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>What are you waiting for?</Button>
</div>
</div>
</div>
<div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'> <div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="flex p-16 lg:w-1/2 flex-col justify-center"> <div className="flex p-16 lg:w-1/2 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management</h3> <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management</h3>
@@ -173,15 +189,36 @@ export default function Features() {
</div> </div>
</div> </div>
</div> </div>
<div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'> <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="flex p-16 lg:w-1/2 flex-col justify-center"> <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way</h3> <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.</p> <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
<div className="relative"> <div className='w-full mt-8'>
<Button className='mt-8' onClick={() => window.open('/themes', '_self')}>View Theme Store</Button> <div className='flex items-center'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Quick Access</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Customizable</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Easy to Use</p>
</div>
</div>
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
</div>
<div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.</p>
<div className="relative">
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>What are you waiting for?</Button>
</div> </div>
</div> </div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/themes.webp" alt="Zen Browser" className="rounded-md lg:w-1/2" />
</div> </div>
<div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'> <div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
<div className="flex p-16 lg:w-1/2 flex-col justify-center"> <div className="flex p-16 lg:w-1/2 flex-col justify-center">