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

Redesigned the website!

Browse Source
This commit is contained in:
Mauro Balades
2024-08-01 20:15:50 +02:00
parent c6a979d585
commit ac79dea1f7
12 changed files with 1161 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/features.tsx
View File

@@ -4,6 +4,7 @@ import Feature, { FeatureCard } from "./feature";
import { Button } from "./ui/button";
import TextReveal from "./ui/text-reveal";
import styled, { css, keyframes } from "styled-components";
import BlurFade from "./ui/blur-fade";
const profileColors = [
"#e8cd7d",
@@ -70,31 +71,37 @@ export default function Features() {
}, []);
return (
<div>
<TextReveal text="Zen will change the way you browse the web. 🌟" />
<Feature
title="Split Views"
description="View multiple tabs at once. Divide your screen into multiple views and browse multiple websites at the same time."
color="#EEDBF9">
<img src="/split-view.png" alt="Split Views" className="w-64 h-64 absolute left-1/2 top-1/2" style={{
transform: "translate(-50%, -50%)"
}} />
</Feature>
<Feature
title="Sidebar"
description="Access websites with ease. The sidebar allows you to quickly access your favorite websites without disrupting your browsing experience."
color="#F5ED97">
<img src="/sidebar.png" alt="Split Views" className="absolute left-1/2 top-1/2 w-4/5 rounded-lg overflow-hidden" style={{
transform: "translate(-50%, -50%)"
}} />
</Feature>
<Feature
title="Profiles"
description="Switch between profiles with ease. Create multiple profiles to keep your work and personal browsing separate."
color={currentProfileColor}>
<ProfileImage enter={profile1Enter} src="/profile-1.png" alt="Profiles" id="profile-1" className="absolute left-1/2 w-3/4 top-1/2" />
<ProfileImage enter={profile2Enter} src="/profile-2.png" alt="Profiles" id="profile-2" className="absolute left-1/2 w-3/4 top-1/2" />
<ProfileImage enter={profile3Enter} src="/profile-3.png" alt="Profiles" id="profile-3" className="absolute left-1/2 w-3/4 top-1/2" />
</Feature>
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
<BlurFade delay={0.35} inView>
<Feature
title="Split Views"
description="View multiple tabs at once. Divide your screen into multiple views and browse multiple websites at the same time."
color="#EEDBF9">
<img src="/split-view.png" alt="Split Views" className="w-64 h-64 absolute left-1/2 top-1/2" style={{
transform: "translate(-50%, -50%)"
}} />
</Feature>
</BlurFade>
<BlurFade delay={0.35} inView>
<Feature
title="Sidebar"
description="Access websites with ease. The sidebar allows you to quickly access your favorite websites without disrupting your browsing experience."
color="#F5ED97">
<img src="/sidebar.png" alt="Split Views" className="absolute left-1/2 top-1/2 w-4/5 rounded-lg overflow-hidden" style={{
transform: "translate(-50%, -50%)"
}} />
</Feature>
</BlurFade>
<BlurFade delay={0.35} inView>
<Feature
title="Profiles"
description="Switch between profiles with ease. Create multiple profiles to keep your work and personal browsing separate."
color={currentProfileColor}>
<ProfileImage enter={profile1Enter} src="/profile-1.png" alt="Profiles" id="profile-1" className="absolute left-1/2 w-3/4 top-1/2" />
<ProfileImage enter={profile2Enter} src="/profile-2.png" alt="Profiles" id="profile-2" className="absolute left-1/2 w-3/4 top-1/2" />
<ProfileImage enter={profile3Enter} src="/profile-3.png" alt="Profiles" id="profile-3" className="absolute left-1/2 w-3/4 top-1/2" />
</Feature>
</BlurFade>
<div className="my-40 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 that will change the way you browse the web. Download it today and experience a new way to browse the web.</p>