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

Added more to the site

Browse Source
This commit is contained in:
mauro-balades
2024-08-30 01:54:17 +02:00
parent 47e0fe8075
commit 7fd259f233
5 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/themes.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

2
src/app/globals.css
View File

@@ -41,7 +41,7 @@
--color-two: #fe8bbb;
--color-three: #9e7aff;
--surface: rgb(235, 235, 235);
--surface: rgb(245, 245, 245);
/*
--color-one: #37ecba;

60
src/components/features.tsx
View File

@@ -9,6 +9,7 @@ import {
EyeOffIcon,
Github,
HeartHandshake,
HeartPulseIcon,
HomeIcon,
RabbitIcon,
ShieldAlertIcon,
@@ -44,6 +45,8 @@ import {
} from './ui/table';
import React, { useState } from 'react';
import { ny } from '@/lib/utils';
import ThemeCard from './theme-card';
import { getAllThemes, ZenTheme } from '@/lib/themes';
function Checkmark() {
return (
@@ -70,10 +73,10 @@ export default function Features() {
setFeature((feature) => (feature + 1) % 3);
}, 3000);
return () => clearInterval(interval);
});
}, []);
return (
<section className="flex-col w-full" id="features">
<div className='w-full md: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-10 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'>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>
@@ -94,7 +97,7 @@ export default function Features() {
</div>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
</div>
<div className='w-full md:w-3/4 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 lg:mx-auto bg-surface mt-36 shadow'>
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" 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'>Split Views</h1>
@@ -104,7 +107,7 @@ export default function Features() {
</div>
</div>
</div>
<div className='w-full md:w-3/4 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='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>
@@ -125,7 +128,7 @@ export default function Features() {
</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-3/4 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'>
<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>
@@ -135,7 +138,52 @@ export default function Features() {
</div>
</div>
</div>
<div className='w-full md: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">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management</h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity</p>
<div className='w-full mt-8'>
<div className='flex items-center'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Workspaces</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Fast profile switcher</p>
</div>
<div className='flex items-center mt-4'>
<Checkmark />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Container Tabs</p>
</div>
<div className='flex items-center mt-4'>
<Question />
<p className='ml-2 text-gray-600 dark:text-gray-300'>Tab Groups (Comming Soon)</p>
</div>
</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="flex p-16 lg:w-1/2 flex-col">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Security And Privacy is <span className='text-purple-500 font-bold'>important</span> to us</h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>
Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.
</p>
<div className="relative">
<Button className='mt-8' variant="ghost" onClick={() => window.open('/download', '_blank')}>Security in zen <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
<Button className='mt-8' variant="ghost" onClick={() => window.open('/privacy-policy', '_blank')}>Your Privacy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></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="flex p-16 lg:w-1/2 flex-col justify-center">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way</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>
</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 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">
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Convinced?</h3>
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Download Zen Browser now and experience the future of browsing.</p>

6
src/components/header.tsx
View File

@@ -42,17 +42,17 @@ export default function Header() {
<br className="hidden md:block" /> We care about your experience, not
your data.
</p>
<div className="flex justify-center w-full">
<div className="flex flex-col md:flex-row justify-center w-full">
<a href="/download">
<Button
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
className="animate-fade-in -translate-y-4 gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
>
<span>Download Zen Now </span>
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button>
</a>
<a href="#features" className="animate-fade-up -translate-y-4 opacity-0 [--animation-delay:800ms]">
<Button variant="ghost" className="ml-4">
<Button variant="ghost" className="mt-4 md:mt-0 md:ml-4">
Start Exploring <ChevronDown className="ml-1 size-4" />
</Button>
</a>

7
src/components/theme-card.tsx
View File

@@ -2,14 +2,17 @@ import Image from "next/image";
import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
import { ny } from "@/lib/utils";
const ThemeCardWrapper = styled.div`
`;
export default function ThemeCard({
theme
theme,
className
}: {
theme: ZenTheme;
className?: string;
}) {
const maxNameLen = 50;
@@ -19,7 +22,7 @@ export default function ThemeCard({
<ThemeCardWrapper onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return;
window.open(`/themes/${theme.id}`, "_self");
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
}} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ", className)}>
<img src={theme.image} alt={theme.name} width={500} height={500}
className="w-full h-32 object-cover rounded-lg border shadow" />
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>