Postal/Zero
1
0
Fork 0
mirror of https://github.com/Mail-0/Zero.git synced 2026-07-01 08:16:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Nizzy
2025-05-21 19:13:34 -07:00
parent b1f0e7f8ea
commit bffa7411c2
6 changed files with 173 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
apps/mail/app/(full-width)/pricing.tsx
View File

@@ -72,7 +72,7 @@ export default function PricingPage() {
const { data: session } = useSession();
return (
<main className="relative flex h-screen flex-1 flex-col overflow-x-hidden bg-[#0F0F0F]">
<main className="relative flex min-h-screen flex-1 flex-col overflow-x-hidden bg-[#0F0F0F]">
<PixelatedBackground
className="z-1 absolute left-1/2 top-[-40px] h-auto w-screen min-w-[1920px] -translate-x-1/2 object-cover"
style={{
@@ -136,8 +136,7 @@ export default function PricingPage() {
</div>
<div className="flex gap-2">
<Button
variant="ghost"
className="h-8 text-white hover:bg-accent/10 hover:text-white"
className="h-8 text-black hover:bg-white hover:text-black bg-white"
onClick={() => {
if (session) {
// User is logged in, redirect to inbox
@@ -156,12 +155,8 @@ export default function PricingPage() {
}
}}
>
Sign in
Sign in
</Button>
<a target="_blank" href="https://cal.com/team/0">
<Button className="h-8 font-medium bg-white text-black">Contact Us</Button>
</a>
</div>
</nav>
</header>
@@ -210,6 +205,7 @@ export default function PricingPage() {
alt={resource.platform}
width={20}
height={20}
/>
)}
</Link>
@@ -219,7 +215,7 @@ export default function PricingPage() {
</Sheet>
</div>
<div className="container mx-auto mb-20 mt-12 h-screen px-4 py-16 md:mt-44">
<div className="container mx-auto px-4 py-16 mt-12 md:mt-44">
<div className="mb-12 text-center">
<h1 className="mb-2 self-stretch text-5xl font-medium leading-[62px] text-white md:text-6xl">
Simple, Transparent Pricing
@@ -229,136 +225,14 @@ export default function PricingPage() {
</p>
</div>
<div className="mx-auto max-w-5xl px-4">
{/* Free Plan */}
<div className="mx-auto max-w-7xl">
<PricingCard />
{/* <div className="relative flex h-full flex-col rounded-xl border bg-[#121212] px-8 pb-4 pt-8">
<h1 className="mb-4 text-center text-lg font-normal text-white/50">Free</h1>
<div className="mb-4 text-center text-3xl font-bold dark:text-white">
$0 <span className="text-lg font-medium">/ mo</span>
</div>
<ul className="mb-6 w-full flex-grow space-y-2 text-left">
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> 1 email connection
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI chat{' '}
<span className="text-xs text-white/50">(25 per day)</span>
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI writing assistant
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Auto labeling
<span className="text-xs text-white/50">(25 per day)</span>
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" />
<span>
AI thread summaries <span className="text-xs text-white/50">(25 per day)</span>
</span>
</li>
<li className="flex items-center gap-2">
<CircleX className="h-4 w-4 fill-white opacity-50" /> Instant thread AI-generated
summaries
</li>
<li className="flex items-center gap-2">
<CircleX className="h-4 w-4 fill-white opacity-50" /> Verified checkmark
</li>
<li className="flex items-center gap-2">
<CircleX className="h-4 w-4 fill-white opacity-50" /> Priority customer support
</li>
</ul>
<a href="/login">
<Button className="h-8 w-full">Get Started</Button>
</a>
</div> */}
{/* Pro Plan */}
{/* <div className="relative flex h-full flex-col rounded-xl border bg-[#121212] px-8 pb-4 pt-8">
<h1 className="mb-4 text-center text-lg font-normal text-white/50">Pro</h1>
<div className="mb-4 text-center text-3xl font-bold dark:text-white">
$20 <span className="text-lg font-medium">/ mo</span>
</div>
<ul className="mb-6 w-full flex-grow space-y-2 text-left">
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Unlimited email connections
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI chat
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI writing assistant
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Auto labeling
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI thread summaries
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Verified checkmark
</li>
</ul>
<Button className="h-8 w-full" onClick={handleUpgrade}>
Get Started
</Button>
</div> */}
{/* Enterprise Plan */}
{/* <div className="relative flex h-full flex-col rounded-xl border bg-[#121212] px-8 pb-4 pt-8">
<h1 className="mb-4 text-center text-lg font-normal text-white/50">Enterprise</h1>
<div className="mb-4 text-center text-3xl font-bold dark:text-white">Contact us</div>
<ul className="mb-6 w-full flex-grow space-y-2 text-left">
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Unlimited email connections
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI chat
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI writing assistant
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Auto labeling
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> AI thread summaries
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Verified checkmark
</li>
<li className="flex items-center gap-2">
<CircleCheck className="h-4 w-4 fill-[#2FAD71]" /> Priority customer support
</li>
</ul>
<a href="https://cal.com/team/0/chat" target="_blank">
<Button className="h-8 w-full" onClick={handleUpgrade}>
Contact us
</Button>
</a>
</div> */}
</div>
</div>
<div className="mx-12 mt-[500px] md:mt-12">
<div className="container mx-auto px-4 mb-40">
<Comparision />
</div>
<div className="mt-20">
<div className="mt-auto">
<Footer />
</div>
</main>

55
apps/mail/components/home/HomeContent.tsx
View File

@@ -50,10 +50,10 @@ import { Balancer } from 'react-wrap-balancer';
import { Input } from '@/components/ui/input';
import { Command, Menu } from 'lucide-react';
import { Separator } from '../ui/separator';
import { signIn } from '@/lib/auth-client';
import { signIn, useSession } from '@/lib/auth-client';
import { useForm } from 'react-hook-form';
import { useTheme } from 'next-themes';
import { Link } from 'react-router';
import { Link, useNavigate } from 'react-router';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
import Footer from './footer';
@@ -110,7 +110,7 @@ const aboutLinks = [
href: '/about',
description: 'Learn more about Zero and our mission.',
},
{
title: 'Privacy',
href: '/privacy',
@@ -133,6 +133,8 @@ export default function HomeContent() {
const [open, setOpen] = useState(false);
const { setTheme } = useTheme();
const ref = useRef(null);
const { data: session } = useSession();
const navigate = useNavigate();
useEffect(() => {
setTheme('dark');
@@ -169,12 +171,15 @@ export default function HomeContent() {
return (
<main className="relative flex h-full flex-1 flex-col overflow-x-hidden bg-[#0F0F0F]">
<PixelatedBackground
className="z-1 absolute top-[-40px] left-1/2 h-auto w-screen min-w-[1920px] -translate-x-1/2 object-cover "
style={{ mixBlendMode: 'screen', maskImage: 'linear-gradient(to bottom, black, transparent)' }}
className="z-1 absolute left-1/2 top-[-40px] h-auto w-screen min-w-[1920px] -translate-x-1/2 object-cover"
style={{
mixBlendMode: 'screen',
maskImage: 'linear-gradient(to bottom, black, transparent)',
}}
/>
{/* Desktop Navigation - Hidden on mobile */}
<header className="fixed z-50 hidden w-full items-center justify-center px-4 pt-6 md:flex">
<nav className="border-input/50 bg-[#1E1E1E] flex w-full max-w-3xl items-center justify-between gap-2 rounded-xl border-t p-2 px-4">
<nav className="border-input/50 flex w-full max-w-3xl items-center justify-between gap-2 rounded-xl border-t bg-[#1E1E1E] p-2 px-4">
<div className="flex items-center gap-6">
<Link to="/" className="relative bottom-1 cursor-pointer">
<img src="white-icon.svg" alt="Zero Email" width={22} height={22} />
@@ -225,26 +230,27 @@ export default function HomeContent() {
</div>
<div className="flex gap-2">
<Button
variant="ghost"
className="h-8"
className="h-8 bg-white text-black hover:bg-white hover:text-black"
onClick={() => {
toast.promise(
signIn.social({
provider: 'google',
callbackURL: `${window.location.origin}/mail`,
}),
{
error: 'Login redirect failed',
},
);
if (session) {
// User is logged in, redirect to inbox
navigate('/mail/inbox');
} else {
// User is not logged in, show sign-in dialog
toast.promise(
signIn.social({
provider: 'google',
callbackURL: `${window.location.origin}/mail`,
}),
{
error: 'Login redirect failed',
},
);
}
}}
>
Sign in
</Button>
<a target="_blank" href="https://cal.com/team/0">
<Button className="h-8 font-medium">Contact Us</Button>
</a>
</div>
</nav>
</header>
@@ -268,7 +274,9 @@ export default function HomeContent() {
</SheetHeader>
<div className="mt-8 flex flex-col space-y-3">
<div className="space-y-3">
<Link href="/pricing" className='mt-2'>Pricing</Link>
<Link href="/pricing" className="mt-2">
Pricing
</Link>
{aboutLinks.map((link) => (
<a key={link.title} href={link.href} className="block font-medium">
{link.title}
@@ -364,9 +372,8 @@ export default function HomeContent() {
>
Get Started
</Button>
</motion.div>
<p className="text-[#B7B7B7]/60 text-xs mt-2 ml-0.5">No credit card required. </p>
<p className="ml-0.5 mt-2 text-xs text-[#B7B7B7]/60">No credit card required. </p>
</section>
<section className="relative mt-10 hidden flex-col justify-center md:flex">

2
apps/mail/components/pricing/comparision.tsx
View File

@@ -38,7 +38,7 @@ export default function Comparision() {
}
};
return (
<div className="relative mx-auto hidden max-w-[1200px] flex-col items-center justify-center md:flex">
<div className="relative mx-auto mt-20 hidden max-w-[1200px] flex-col items-center justify-center md:flex">
<Plus className="absolute left-[-5px] top-[-6px] mb-4 h-3 w-3 fill-white" />
<Plus className="absolute bottom-[-21px] left-[-5px] mb-4 h-3 w-3 fill-white" />
<Plus className="absolute right-[-5px] top-[-6px] mb-4 h-3 w-3 fill-white" />

233
apps/mail/components/pricing/pricing-card.tsx
View File

@@ -6,6 +6,42 @@ import { useNavigate } from 'react-router';
import { Badge } from '../ui/badge';
import { useState } from 'react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
const PRICING_CONSTANTS = {
FREE_FEATURES: [
'One email connection',
'AI-powered chat with your inbox',
'Basic labeling',
'Limited AI email writing',
],
PRO_FEATURES: [
'Unlimited email connections',
'AI-powered chat with your inbox',
'Auto labeling',
'One-click AI email writing & replies',
'Instant thread AI-generated summaries',
],
ENTERPRISE_FEATURES: [
'Unlimited email connections',
'AI-powered chat with your inbox',
'Auto labeling',
'One-click AI email writing & replies',
'Instant thread AI-generated summaries',
'Dedicated Slack channel',
'Priority customer support',
],
CARD_STYLES: {
base: 'relative flex-1 min-w-[280px] max-w-[384px] min-h-[630px] flex flex-col items-start justify-between overflow-hidden rounded-2xl border border-[#2D2D2D] bg-zinc-900/50 p-5',
header: 'inline-flex items-center justify-start gap-2.5 rounded-lg p-2',
headerFree: 'bg-[#422F10]',
headerPro: 'bg-[#B183FF]',
pro: 'outline outline-2 outline-offset-[3.5px] outline-[#2D2D2D]',
divider: 'h-0 self-stretch outline outline-1 outline-offset-[-0.50px] outline-white/10',
},
MONTHLY_PRICE: 20,
ANNUAL_DISCOUNT: 0.5,
} as const;
const handleGoogleSignIn = (
callbackURL: string,
@@ -23,10 +59,30 @@ const handleGoogleSignIn = (
);
};
interface FeatureItemProps {
text: string;
isPro?: boolean;
}
const FeatureItem = ({ text, isPro }: FeatureItemProps) => (
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
{isPro ? (
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
) : (
<ThickCheck className="relative left-[1px] top-[1px]" />
)}
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
{text}
</div>
</div>
);
export default function PricingCard() {
const [isAnnual, setIsAnnual] = useState(false);
const monthlyPrice = 20;
const annualPrice = monthlyPrice * 0.5;
const monthlyPrice = PRICING_CONSTANTS.MONTHLY_PRICE;
const annualPrice = monthlyPrice * PRICING_CONSTANTS.ANNUAL_DISCOUNT;
const { attach } = useBilling();
const { data: session } = useSession();
const navigate = useNavigate();
@@ -51,19 +107,19 @@ export default function PricingCard() {
}
};
return (
<div>
<div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="relative z-20 mb-8 flex items-center justify-center gap-2">
<PricingSwitch onCheckedChange={(checked) => setIsAnnual(checked)} />
<p className="text-sm text-white/70">Billed Annually</p>
<Badge className="border border-[#656565] bg-[#3F3F3F] text-white">Save 50%</Badge>
</div>
<div className="flex flex-col items-center justify-center gap-5 md:flex-row">
<div className="relative inline-flex h-[535px] w-96 flex-col items-start justify-start overflow-hidden rounded-2xl border border-[#2D2D2D] bg-zinc-900/50 p-5">
<div className="flex flex-col items-center justify-center gap-5 lg:flex-row lg:items-stretch">
<div className={PRICING_CONSTANTS.CARD_STYLES.base}>
<div className="absolute inset-0 z-0 h-full w-full overflow-hidden"></div>
<div className="relative bottom-[-5] z-10 flex flex-col items-start justify-start gap-5 self-stretch lg:bottom-0">
<div className="relative z-10 flex flex-col items-start justify-start gap-5 self-stretch">
<div className="flex flex-col items-start justify-start gap-4 self-stretch">
<div className="inline-flex items-center justify-center gap-2.5 overflow-hidden rounded-lg bg-[#422F10] p-2">
<div className={cn(PRICING_CONSTANTS.CARD_STYLES.header, PRICING_CONSTANTS.CARD_STYLES.headerFree)}>
<div className="relative h-6 w-6">
<img
src="lock.svg"
@@ -89,40 +145,11 @@ export default function PricingCard() {
</div>
</div>
</div>
<div className="h-0 self-stretch outline outline-1 outline-offset-[-0.50px] outline-white/10"></div>
<div className={PRICING_CONSTANTS.CARD_STYLES.divider}></div>
<div className="flex flex-col items-start justify-start gap-2.5 self-stretch">
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<ThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
One email connection{' '}
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<ThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
AI-powered chat with your inbox{' '}
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<ThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Basic labeling{' '}
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<ThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Limited AI email writing{' '}
</div>
</div>
{PRICING_CONSTANTS.FREE_FEATURES.map((feature) => (
<FeatureItem key={feature} text={feature} />
))}
</div>
</div>
<button
@@ -136,17 +163,17 @@ export default function PricingCard() {
});
}
}}
className="relative top-[154px] inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 outline-offset-[-1px] outline-[#434343] lg:top-[138px]"
className="mt-auto z-30 inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 outline-offset-[-1px] outline-[#434343]"
>
<div className="flex items-center justify-center gap-2.5 px-1">
<div className="justify-start text-center font-semibold leading-none text-[#D5D5D5]">
Get Started For Free
Get started
</div>
</div>
</button>
</div>
<div className="gap- relative inline-flex h-[535px] w-96 flex-col items-start justify-start overflow-hidden rounded-2xl border border-[#2D2D2D] bg-zinc-900/50 p-5 outline outline-2 outline-offset-[3.5px] outline-[#2D2D2D]">
<div className={cn(PRICING_CONSTANTS.CARD_STYLES.base, PRICING_CONSTANTS.CARD_STYLES.pro)}>
<div className="absolute inset-0 z-0 h-full w-full overflow-hidden">
<img
src="/pricing-gradient.png"
@@ -158,20 +185,17 @@ export default function PricingCard() {
/>
</div>
<div className="relative right-5 top-[-70px] h-56 w-[720px]">
<div className="absolute left-[-157px] top-[-68.43px] h-36 w-[1034px] rounded-full bg-white/10 mix-blend-overlay blur-[100px]" />
<div className="absolute inset-x-0 -top-14 h-56 overflow-hidden">
<div className="absolute inset-0 bg-white/10 mix-blend-overlay blur-[100px]" />
<img
className="absolute left-0 top-0 h-56 w-[719.25px] mix-blend-screen"
className="absolute inset-0 h-full w-full object-cover mix-blend-screen"
src="/small-pixel.png"
height={56}
width={719}
alt="small-pixel"
alt="background effect"
/>
</div>
<div className="relative bottom-[50px] z-10 flex flex-col items-start justify-start gap-5 self-stretch md:bottom-[55px] lg:bottom-[37px]">
<div className="relative z-10 flex flex-col items-start justify-start gap-5 self-stretch">
<div className="flex flex-col items-start justify-start gap-4 self-stretch">
<div className="inline-flex items-center justify-center gap-2.5 overflow-hidden rounded-lg bg-[#B183FF] p-2">
<div className={cn(PRICING_CONSTANTS.CARD_STYLES.header, PRICING_CONSTANTS.CARD_STYLES.headerPro)}>
<div className="relative h-6 w-6">
<img height={24} width={24} src="zap.svg" alt="hi" />
</div>
@@ -196,68 +220,15 @@ export default function PricingCard() {
</div>
</div>
</div>
<div className="h-0 self-stretch outline outline-1 outline-offset-[-0.50px] outline-white/10"></div>
<div className={PRICING_CONSTANTS.CARD_STYLES.divider}></div>
<div className="flex flex-col items-start justify-start gap-2.5 self-stretch">
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Unlimited email connections
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
AI-powered chat with your inbox
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Auto labeling
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
One-click AI email writing & replies
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Instant thread AI-generated summaries
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Priority customer support
</div>
</div>
<div className="inline-flex items-center justify-start gap-2.5">
<div className="flex h-5 w-5 items-start justify-start gap-3 rounded-[125px] bg-white/10 p-[5px]">
<PurpleThickCheck className="relative left-[1px] top-[1px]" />
</div>
<div className="justify-center text-sm font-normal leading-normal text-white lg:text-base">
Access to private Discord community
</div>
</div>
{PRICING_CONSTANTS.PRO_FEATURES.map((feature) => (
<FeatureItem key={feature} text={feature} isPro />
))}
</div>
</div>
<button
className="z-30 inline-flex h-24 cursor-pointer items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-white p-3 outline outline-1 outline-offset-[-1px]"
className="mt-auto z-30 inline-flex h-10 cursor-pointer items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-white p-3 outline outline-1 outline-offset-[-1px]"
onClick={handleUpgrade}
>
<div className="flex items-center justify-center gap-2.5 px-1">
@@ -267,6 +238,48 @@ export default function PricingCard() {
</div>
</button>
</div>
<div className={PRICING_CONSTANTS.CARD_STYLES.base}>
<div className="absolute inset-0 z-0 h-full w-full overflow-hidden"></div>
<div className="relative z-10 flex flex-col items-start justify-start gap-5 self-stretch">
<div className="flex flex-col items-start justify-start gap-4 self-stretch">
<div className={cn(PRICING_CONSTANTS.CARD_STYLES.header, PRICING_CONSTANTS.CARD_STYLES.headerFree, "bg-[#B183FF]/60")}>
<div className="relative h-6 w-6">
<img height={40} width={40} src="mail-pixel.svg" alt="enterprise" />
</div>
</div>
<div className="flex flex-col items-start justify-start gap-2 self-stretch">
<div className="inline-flex items-end justify-start gap-1 self-stretch">
<div className="justify-center text-4xl font-semibold leading-10 text-white">
Enterprise
</div>
</div>
<div className="flex flex-col items-start justify-start gap-2 self-stretch">
<div className="justify-center self-stretch text-sm font-normal leading-normal text-white opacity-70 lg:text-base">
For teams and organizations that need advanced features and support.
</div>
</div>
</div>
</div>
<div className={PRICING_CONSTANTS.CARD_STYLES.divider}></div>
<div className="flex flex-col items-start justify-start gap-2.5 self-stretch">
{PRICING_CONSTANTS.ENTERPRISE_FEATURES.map((feature) => (
<FeatureItem key={feature} text={feature} isPro />
))}
</div>
</div>
<button
className="mt-auto z-30 inline-flex h-10 items-center justify-center gap-2.5 self-stretch overflow-hidden rounded-lg bg-[#2D2D2D] p-3 shadow shadow-black/30 outline outline-1 outline-offset-[-1px] outline-[#434343]"
onClick={() => window.open('https://cal.com/team/0/chat', '_blank')}
>
<div className="flex items-center justify-center gap-2.5 px-1">
<div className="justify-start text-center font-semibold leading-none text-[#D5D5D5]">
Contact us
</div>
</div>
</button>
</div>
</div>
</div>
);

2
apps/mail/components/ui/navigation-menu.tsx
View File

@@ -135,7 +135,7 @@ const ListItem = React.forwardRef<
{...props}
>
<div className="flex items-center gap-2 text-sm font-medium leading-none">
{IconComponent && <IconComponent className="h-4 w-4 fill-white" />}
{IconComponent && <IconComponent className="h-4 w-4 dark:fill-white fill-black" />}
{title}
</div>
<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">{children}</p>

9
apps/mail/public/mail-pixel.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="512" height="512" fill="url(#pattern0_3824_12077)" style=""/>
<defs>
<pattern id="pattern0_3824_12077" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3824_12077" transform="scale(0.00195312)"/>
</pattern>
<image id="image0_3824_12077" width="512" height="512" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB