feat: Add shine-pulse keyframe animation to tailwind.config.ts
This commit is contained in:
Mauro Balades
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
BIN
public/profiles.png
Normal file
BIN
public/profiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
BIN
public/workspaces.png
Normal file
BIN
public/workspaces.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -16,6 +16,7 @@ import {
|
||||
} from './ui/table';
|
||||
import { CheckIcon, XIcon } from "lucide-react";
|
||||
import { QuestionMarkIcon } from "@radix-ui/react-icons";
|
||||
import ShineBorder from "./ui/shine-border";
|
||||
|
||||
function Checkmark() {
|
||||
return <CheckIcon className="mx-auto text-black mx-auto rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
|
||||
@@ -33,69 +34,72 @@ export default function Features() {
|
||||
return (
|
||||
<div>
|
||||
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
|
||||
<div className="flex flex-col lg:flex-row w-full p-5 lg:p-0">
|
||||
<div className="w-full ml-4">
|
||||
<div className="bg-pink-300 p-5 border-2 rounded-lg mb-2"></div>
|
||||
<div className="bg-blue-300 p-5 border-2 rounded-lg mb-2"></div>
|
||||
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
|
||||
<div className="w-full flex flex-col lg:mb-24 lg:ml-4 lg:mt-24">
|
||||
<div className="bg-background relative flex flex-col max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
|
||||
<h1 className="text-5xl font-bold">Split views</h1>
|
||||
<p className="text-muted-foreground mt-3">Split your browser into multiple views to browse multiple websites at once.</p>
|
||||
<img src="/split-view.png" className="mt-8 w-full h-full" />
|
||||
</div>
|
||||
<div className="bg-background relative flex flex-col mt-8 max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
|
||||
<h1 className="text-5xl font-bold">Workspaces</h1>
|
||||
<p className="text-muted-foreground mt-3">Create workspaces to keep your tabs organized and your browsing experience clutter-free.</p>
|
||||
<img src="/workspaces.png" className="mt-8 w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mr-4 mt-4">
|
||||
<div className="bg-yellow-300 border-2 p-5 rounded-lg mb-2"></div>
|
||||
<div className="bg-green-300 border-2 p-5 rounded-lg mb-2"></div>
|
||||
<div className="w-full lg:mr-4 flex flex-col">
|
||||
<div className="bg-background relative mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
|
||||
<h1 className="text-5xl font-bold">Profile switching</h1>
|
||||
<p className="text-muted-foreground mt-3">Switch between profiles to keep your work and personal browsing separate.</p>
|
||||
<img src="/profiles.png" className="mt-8 w-full h-full" />
|
||||
</div>
|
||||
<div className="bg-background relative mt-8 flex-col flex max-w-lg justify-center rounded-xl 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 your favorite websites and services without leaving the page you're on.</p>
|
||||
<img src="/sidebar.png" className="mt-8 w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg border-2 md:shadow-xl">
|
||||
<h3 className="text-lg font-bold text-center">Packed with features</h3>
|
||||
<ShineBorder borderWidth={2} borderRadius={12} color={['#A07CFE', '#FE8FB5', '#FFBE7B']} 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>
|
||||
<TableHeader>
|
||||
<TableRow className="!border-none">
|
||||
<TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">How Zen differs from other browsers</TableHead>
|
||||
<TableHead className="py-2 font-bold text-center"><img src="/favicon.ico" className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8" />Zen</TableHead>
|
||||
<TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60"><img src="/floorp.png" className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7" />Floorp</TableHead>
|
||||
<TableHead className="py-2 pl-0 font-bold text-center opacity-60"><img src="/librewolf.png" className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7" />LibreWolf</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Contain fine-grained security measures like sandboxing</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Optimized for peak performance</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Customizable with cutting-edge features</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Updated regularly with new features and latest security patches</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Question /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Open-source</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="!border-none">
|
||||
<TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">How Zen differs from other browsers</TableHead>
|
||||
<TableHead className="py-2 font-bold text-center"><img src="/favicon.ico" className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8" />Zen</TableHead>
|
||||
<TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60"><img src="/floorp.png" className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7" />Floorp</TableHead>
|
||||
<TableHead className="py-2 pl-0 font-bold text-center opacity-60"><img src="/librewolf.png" className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7" />LibreWolf</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Contain fine-grained security measures like sandboxing</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Optimized for peak performance</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Based on the latest version of Firefox</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Cross /></TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell className="py-3 font-medium">Customizable with cutting-edge features</TableCell>
|
||||
<TableCell className="py-3"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3 pl-4 pr-0"><Checkmark /></TableCell>
|
||||
<TableCell className="py-3"><Cross /></TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</ShineBorder>
|
||||
<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>
|
||||
|
||||
@@ -63,6 +63,17 @@ const config = {
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
"shine-pulse": {
|
||||
"0%": {
|
||||
"background-position": "0% 0%",
|
||||
},
|
||||
"50%": {
|
||||
"background-position": "100% 100%",
|
||||
},
|
||||
to: {
|
||||
"background-position": "0% 0%",
|
||||
},
|
||||
},
|
||||
'accordion-down': {
|
||||
from: { height: '0' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
|
||||
Reference in New Issue
Block a user