Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-17 10:11:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: darker dark theme

Browse Source
This commit is contained in:
Mythie
2023-09-24 14:45:50 +10:00
parent 986bab2ba4
commit 60ae674984
39 changed files with 498 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
apps/marketing/src/components/(marketing)/pricing-table.tsx
View File

@ -41,10 +41,13 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
<AnimatePresence>
<motion.button
key="MONTHLY"
className={cn('relative flex items-center gap-x-2.5 px-1 py-2.5 text-[#727272]', {
'text-slate-900': period === 'MONTHLY',
'hover:text-slate-900/80': period !== 'MONTHLY',
})}
className={cn(
'text-muted-foreground relative flex items-center gap-x-2.5 px-1 py-2.5',
{
'text-foreground': period === 'MONTHLY',
'hover:text-foreground/80': period !== 'MONTHLY',
},
)}
onClick={() => setPeriod('MONTHLY')}
>
Monthly
@ -58,14 +61,17 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
<motion.button
key="YEARLY"
className={cn('relative flex items-center gap-x-2.5 px-1 py-2.5 text-[#727272]', {
'text-slate-900': period === 'YEARLY',
'hover:text-slate-900/80': period !== 'YEARLY',
})}
className={cn(
'text-muted-foreground relative flex items-center gap-x-2.5 px-1 py-2.5',
{
'text-foreground': period === 'YEARLY',
'hover:text-foreground/80': period !== 'YEARLY',
},
)}
onClick={() => setPeriod('YEARLY')}
>
Yearly
<div className="block rounded-full bg-slate-200 px-2 py-0.5 text-xs text-slate-700">
<div className="bg-muted text-foreground block rounded-full px-2 py-0.5 text-xs">
Save $60
</div>
{period === 'YEARLY' && (
@ -81,12 +87,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
<div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
<div
data-plan="self-hosted"
className="flex flex-col items-center justify-center rounded-lg border bg-white px-8 py-12 shadow-lg shadow-slate-900/5"
className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
>
<p className="text-4xl font-medium text-slate-900">Self Hosted</p>
<p className="text-foreground text-4xl font-medium">Self Hosted</p>
<p className="text-primary mt-2.5 text-xl font-medium">Free</p>
<p className="mt-4 max-w-[30ch] text-center text-slate-900">
<p className="text-foreground mt-4 max-w-[30ch] text-center">
For small teams and individuals who need a simple solution
</p>
@ -100,20 +106,20 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
</Link>
<div className="mt-8 flex w-full flex-col divide-y">
<p className="py-4 font-medium text-slate-900">Host your own instance</p>
<p className="py-4 text-slate-900">Full Control</p>
<p className="py-4 text-slate-900">Customizability</p>
<p className="py-4 text-slate-900">Docker Ready</p>
<p className="py-4 text-slate-900">Community Support</p>
<p className="py-4 text-slate-900">Free, Forever</p>
<p className="text-foreground py-4 font-medium">Host your own instance</p>
<p className="text-foreground py-4">Full Control</p>
<p className="text-foreground py-4">Customizability</p>
<p className="text-foreground py-4">Docker Ready</p>
<p className="text-foreground py-4">Community Support</p>
<p className="text-foreground py-4">Free, Forever</p>
</div>
</div>
<div
data-plan="community"
className="border-primary flex flex-col items-center justify-center rounded-lg border-2 bg-white px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380] shadow-slate-900/5"
className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border-2 px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380]"
>
<p className="text-4xl font-medium text-slate-900">Early Adopters</p>
<p className="text-foreground text-4xl font-medium">Community</p>
<div className="text-primary mt-2.5 text-xl font-medium">
<AnimatePresence mode="wait">
{period === 'MONTHLY' && <motion.div layoutId="pricing">$30</motion.div>}
@ -121,7 +127,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
</AnimatePresence>
</div>
<p className="mt-4 max-w-[30ch] text-center text-slate-900">
<p className="text-foreground mt-4 max-w-[30ch] text-center">
For fast-growing companies that aim to scale across multiple teams.
</p>
@ -130,33 +136,25 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
</ClaimPlanDialog>
<div className="mt-8 flex w-full flex-col divide-y">
<p className="py-4 font-medium text-slate-900">
<a href="https://documens.so/early" target="_blank">
Documenso Early Adopter Deal
</a>
<p className="text-foreground py-4 font-medium">Documenso Early Adopter Deal:</p>
<p className="text-foreground py-4">Join the movement</p>
<p className="text-foreground py-4">Simple signing solution</p>
<p className="text-foreground py-4">Email and Slack assistance</p>
<p className="text-foreground py-4">
<strong>Includes all upcoming features</strong>
</p>
<p className="py-4 text-slate-900">Join the movement</p>
<p className="py-4 text-slate-900">Simple signing solution</p>
<p className="py-4 text-slate-900">Email and Slack assistance</p>
<p className="py-4 text-slate-900">
<strong>
<a href="https://documens.so/early" target="_blank">
Includes all upcoming features
</a>
</strong>
</p>
<p className="py-4 text-slate-900">Fixed, straightforward pricing</p>
<p className="text-foreground py-4">Fixed, straightforward pricing</p>
</div>
</div>
<div
data-plan="enterprise"
className="flex flex-col items-center justify-center rounded-lg border bg-white px-8 py-12 shadow-lg shadow-slate-900/5"
className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
>
<p className="text-4xl font-medium text-slate-900">Enterprise</p>
<p className="text-foreground text-4xl font-medium">Enterprise</p>
<p className="text-primary mt-2.5 text-xl font-medium">Pricing on request</p>
<p className="mt-4 max-w-[30ch] text-center text-slate-900">
<p className="text-foreground mt-4 max-w-[30ch] text-center">
For large organizations that need extra flexibility and control.
</p>
@ -170,12 +168,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
</Link>
<div className="mt-8 flex w-full flex-col divide-y">
<p className="py-4 font-medium text-slate-900">Everything in Early Adopters, plus:</p>
<p className="py-4 text-slate-900">Custom Subdomain</p>
<p className="py-4 text-slate-900">Compliance Check</p>
<p className="py-4 text-slate-900">Guaranteed Uptime</p>
<p className="py-4 text-slate-900">Reporting & Analysis</p>
<p className="py-4 text-slate-900">24/7 Support</p>
<p className="text-foreground py-4 font-medium">Everything in Community, plus:</p>
<p className="text-foreground py-4">Custom Subdomain</p>
<p className="text-foreground py-4">Compliance Check</p>
<p className="text-foreground py-4">Guaranteed Uptime</p>
<p className="text-foreground py-4">Reporting & Analysis</p>
<p className="text-foreground py-4">24/7 Support</p>
</div>
</div>
</div>