You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
20 KiB
429 lines
20 KiB
import Image from "next/image";
|
|
|
|
export function PricingSection() {
|
|
const essentialFeatures = [
|
|
"Full Project Management",
|
|
"Basic Time Tracking",
|
|
"Chat & Communication",
|
|
"Data History: Access to the last 6 months",
|
|
"Support: Email Support ",
|
|
];
|
|
|
|
const businessFeatures = [
|
|
"Advanced Financial System",
|
|
"Smart Time Tracking",
|
|
"Guest Access",
|
|
"Data History: Unlimited",
|
|
"Full Project Management",
|
|
"Basic Time Tracking",
|
|
"Chat & Communication",
|
|
"Support: Email Support ",
|
|
];
|
|
|
|
const agencyFeatures = [
|
|
"Full Project Management",
|
|
"Basic Time Tracking",
|
|
"Chat & Communication",
|
|
"Data History: Access to the last 6 months",
|
|
"VIP Support",
|
|
"Dedicated API",
|
|
"Dedicated Onboarding",
|
|
];
|
|
|
|
return (
|
|
<section
|
|
id="pricing-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[60px] md:mt-[100px] mb-[120px]"
|
|
>
|
|
{/* Top Header Block (Text, id: 4193:10401, width: 1010, height: 132) */}
|
|
<div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
|
|
{/* Glow Aura behind badge (Back, id: 4193:10402: Ellipse 1578 & 1579) */}
|
|
<div className="absolute -top-[50px] left-1/2 -translate-x-1/2 w-[180px] h-[180px] pointer-events-none -z-10">
|
|
<div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[80px] opacity-70" />
|
|
<div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[40px] opacity-80" />
|
|
</div>
|
|
|
|
{/* Badge (3, id: 4193:10407, width: 40, height: 40) */}
|
|
<div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/pricing_header_badge.svg"
|
|
alt=""
|
|
width={100}
|
|
height={100}
|
|
unoptimized
|
|
className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Container (Frame 2095586188, id: 4193:10410, width: 1010, height: 68, itemSpacing: 12) */}
|
|
<div className="w-full flex flex-col items-center gap-[12px]">
|
|
{/* Title (Title, id: 4193:10411, 32px, Inter Medium, #ffffff) */}
|
|
<h2 className="text-white text-[28px] sm:text-[32px] leading-[34px] sm:leading-[39px] font-medium tracking-tight text-center max-w-[1010px]">
|
|
Pick the plan that fits your workflow.
|
|
</h2>
|
|
|
|
{/* Subtitle (Subtitle, id: 4193:10412, 14px, Inter Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[1010px]">
|
|
Whether you’re managing tasks or running an agency, TeamBy offers flexible plans that align with how your team actually works.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Cards Container (Pricing, id: 4193:10216, width: 1216, height: 624) */}
|
|
<div className="relative w-full max-w-[1216px] min-h-[624px] mt-[48px] md:mt-[56px] flex flex-col lg:flex-row items-center lg:items-end justify-center gap-[24px] lg:gap-[25px] z-20">
|
|
{/* Ambient background glows */}
|
|
<div className="absolute left-[200px] bottom-0 w-[400px] h-[400px] pointer-events-none -z-10 opacity-60">
|
|
<Image
|
|
src="/assets/images/pricing_glow_left.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-0 w-[500px] h-[500px] pointer-events-none -z-10 opacity-70">
|
|
<Image
|
|
src="/assets/images/pricing_glow_center.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="absolute right-[100px] bottom-[50px] w-[400px] h-[400px] pointer-events-none -z-10 opacity-60">
|
|
<Image
|
|
src="/assets/images/pricing_glow_right.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* 1. Essential Plan Card (Plan, id: 4193:10322, width: 389, height: 556, x: 1, y: 256) */}
|
|
<div
|
|
id="pricing-plan-essential"
|
|
className="relative w-full sm:w-[389px] h-[556px] rounded-[24px] bg-[#080f1a]/50 p-[32px] flex flex-col justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)] flex-shrink-0"
|
|
style={{
|
|
border: "1px solid transparent",
|
|
backgroundImage:
|
|
"linear-gradient(#080f1a, #080f1a), linear-gradient(180deg, rgba(76, 118, 255, 0.6) 0%, rgba(76, 118, 255, 0.6) 19%, rgba(76, 118, 255, 0.42) 41.58%, rgba(62, 71, 253, 0.3) 81.04%, rgba(137, 142, 251, 0) 100%)",
|
|
backgroundOrigin: "border-box",
|
|
backgroundClip: "padding-box, border-box",
|
|
}}
|
|
>
|
|
{/* Top section */}
|
|
<div className="flex flex-col gap-[32px] w-full">
|
|
{/* Header + Subtitle Block */}
|
|
<div className="flex flex-col gap-[24px] w-full">
|
|
{/* Title & Badge Row */}
|
|
<div className="flex items-center justify-between w-full h-[36px]">
|
|
<h3
|
|
className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
|
|
}}
|
|
>
|
|
Essential
|
|
</h3>
|
|
<div className="flex items-center gap-[16px]">
|
|
<div className="w-px h-[36px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a]" />
|
|
<div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/pricing_cube_badge_purple.svg"
|
|
alt=""
|
|
width={96}
|
|
height={96}
|
|
unoptimized
|
|
className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subtitle & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
|
|
Professional project management without complexity
|
|
</p>
|
|
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<div className="flex items-center gap-[8px] h-[39px]">
|
|
<span
|
|
className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
|
|
}}
|
|
>
|
|
$12
|
|
</span>
|
|
<span className="text-[#6f829e] text-[12px] leading-[15px] font-normal text-left">
|
|
per<br />month
|
|
</span>
|
|
</div>
|
|
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
|
|
</div>
|
|
|
|
{/* Features List (Frame 2095586164: w: 299, h: 132, itemSpacing: 8) */}
|
|
<div className="flex flex-col gap-[8px] w-full">
|
|
{essentialFeatures.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center gap-[4px] h-[20px]">
|
|
<Image
|
|
src="/assets/images/pricing_check_blue.svg"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
<span className="text-[#cbdaef] text-[14px] leading-[17px] font-normal">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Button (Button, id: 4193:10357, width: 325, height: 44, radius: 12) */}
|
|
<button
|
|
type="button"
|
|
id="pricing-essential-cta"
|
|
className="btn-primary-gradient w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(72,126,255,0.35)]"
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
|
|
{/* 2. Business Plan Card (Plan, id: 4193:10220, width: 388, height: 584, x: 414, y: 188 - Elevated & Featured) */}
|
|
<div
|
|
id="pricing-plan-business"
|
|
className="relative w-full sm:w-[388px] h-[584px] rounded-[24px] bg-[#03070d] p-[32px] flex flex-col justify-between overflow-hidden shadow-[0_0_50px_rgba(0,24,103,0.5)] flex-shrink-0 z-10"
|
|
style={{
|
|
border: "1px solid transparent",
|
|
backgroundImage:
|
|
"linear-gradient(#03070d, #03070d), linear-gradient(180deg, rgba(173, 191, 255, 0) 0%, rgba(93, 139, 255, 0.5) 20%, rgba(75, 128, 255, 0.7) 35%, #487eff 50%, #3d6fe5 60%, #255cd9 70%, #0e4acc 80%, #0038bf 90%, #0029b2 100%)",
|
|
backgroundOrigin: "border-box",
|
|
backgroundClip: "padding-box, border-box",
|
|
}}
|
|
>
|
|
{/* Card Internal Glow & Particles Background */}
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden rounded-[24px] -z-10">
|
|
{/* Top-right subtle glow (Ellipse 1072: w: 138, h: 129, color: #032983, blur: 150) */}
|
|
<div className="absolute -top-[20px] -right-[20px] w-[140px] h-[140px] bg-[#032983] rounded-full blur-[60px] opacity-80" />
|
|
|
|
{/* Bottom Multi-layer Gradient Graphic (Background Shape, id: 4193:10221) */}
|
|
<div className="absolute -bottom-[50px] -left-[98px] w-[584px] h-[507px] pointer-events-none select-none opacity-90">
|
|
<Image
|
|
src="/assets/images/pricing_business_bg.png"
|
|
alt=""
|
|
width={584}
|
|
height={507}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Star Constellation Overlay (Container, id: 4193:10272) */}
|
|
<div className="absolute bottom-0 left-0 w-full h-[298px] pointer-events-none select-none">
|
|
<Image
|
|
src="/assets/images/pricing_business_stars.svg"
|
|
alt=""
|
|
width={388}
|
|
height={298}
|
|
unoptimized
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top section */}
|
|
<div className="flex flex-col gap-[32px] w-full relative z-10">
|
|
{/* Header + Subtitle Block */}
|
|
<div className="flex flex-col gap-[24px] w-full">
|
|
{/* Title & Badge Row */}
|
|
<div className="flex items-center justify-between w-full h-[36px]">
|
|
<h3
|
|
className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
|
|
}}
|
|
>
|
|
Business
|
|
</h3>
|
|
<div className="flex items-center gap-[16px]">
|
|
<div className="w-px h-[36px] bg-gradient-to-b from-[rgba(4,25,73,0)] via-[#184cc4] to-[rgba(4,25,73,0)]" />
|
|
<div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/pricing_cube_badge_blue.svg"
|
|
alt=""
|
|
width={96}
|
|
height={96}
|
|
unoptimized
|
|
className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subtitle & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
|
|
Growing companies that want to control profitability and costs
|
|
</p>
|
|
<div className="w-full h-px bg-gradient-to-r from-[rgba(25,59,158,0)] via-[#3260eb] to-[rgba(25,59,158,0)]" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<div className="flex items-center gap-[8px] h-[39px]">
|
|
<span
|
|
className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
|
|
}}
|
|
>
|
|
$49
|
|
</span>
|
|
<span className="text-[#b4caff] text-[12px] leading-[15px] font-normal text-left">
|
|
per<br />month
|
|
</span>
|
|
</div>
|
|
<div className="w-full h-px bg-gradient-to-r from-[rgba(48,92,207,0)] via-[#557fff] to-[rgba(48,92,207,0)]" />
|
|
</div>
|
|
|
|
{/* Features List (Frame 2095586164: w: 206, h: 216, itemSpacing: 8) */}
|
|
<div className="flex flex-col gap-[8px] w-full">
|
|
{businessFeatures.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center gap-[4px] h-[20px]">
|
|
<Image
|
|
src="/assets/images/pricing_check_white.svg"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
<span className="text-[#f7faff] text-[14px] leading-[17px] font-normal">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Button (Button, id: 4193:10270, width: 325, height: 44, radius: 12, fill: #8fb0ff 80%) */}
|
|
<button
|
|
type="button"
|
|
id="pricing-business-cta"
|
|
className="relative z-10 w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal bg-[#8fb0ff]/80 hover:bg-[#8fb0ff] active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(143,176,255,0.4)] border border-white/40"
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
|
|
{/* 3. Agency Plan Card (Plan, id: 4193:10359, width: 389, height: 557, x: 827, y: 256) */}
|
|
<div
|
|
id="pricing-plan-agency"
|
|
className="relative w-full sm:w-[389px] h-[557px] rounded-[24px] bg-[#080f1a]/50 p-[32px] flex flex-col justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)] flex-shrink-0"
|
|
style={{
|
|
border: "1px solid transparent",
|
|
backgroundImage:
|
|
"linear-gradient(#080f1a, #080f1a), linear-gradient(180deg, rgba(76, 118, 255, 0.6) 0%, rgba(76, 118, 255, 0.6) 19%, rgba(76, 118, 255, 0.42) 41.58%, rgba(62, 71, 253, 0.3) 81.04%, rgba(137, 142, 251, 0) 100%)",
|
|
backgroundOrigin: "border-box",
|
|
backgroundClip: "padding-box, border-box",
|
|
}}
|
|
>
|
|
{/* Top section */}
|
|
<div className="flex flex-col gap-[32px] w-full">
|
|
{/* Header + Subtitle Block */}
|
|
<div className="flex flex-col gap-[24px] w-full">
|
|
{/* Title & Badge Row */}
|
|
<div className="flex items-center justify-between w-full h-[36px]">
|
|
<h3
|
|
className="text-[20px] leading-[24px] font-medium tracking-tight bg-clip-text text-transparent"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #cadaff 100%)",
|
|
}}
|
|
>
|
|
Agency
|
|
</h3>
|
|
<div className="flex items-center gap-[16px]">
|
|
<div className="w-px h-[36px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a]" />
|
|
<div className="relative w-[36px] h-[36px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/pricing_cube_badge_purple.svg"
|
|
alt=""
|
|
width={96}
|
|
height={96}
|
|
unoptimized
|
|
className="w-[96px] h-[96px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subtitle & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<p className="text-[#556680] text-[14px] leading-[17px] font-normal text-left h-[34px]">
|
|
Digital agencies and large organizations that need full control and custom branding
|
|
</p>
|
|
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price & Divider */}
|
|
<div className="flex flex-col gap-[16px] w-full">
|
|
<div className="flex items-center gap-[8px] h-[39px]">
|
|
<span
|
|
className="text-[32px] leading-[39px] font-medium bg-clip-text text-transparent drop-shadow-[0_0_20px_rgba(75,128,255,0.8)]"
|
|
style={{
|
|
backgroundImage: "linear-gradient(180deg, #ffffff 0%, #a2beff 100%)",
|
|
}}
|
|
>
|
|
$59
|
|
</span>
|
|
<span className="text-[#6f829e] text-[12px] leading-[15px] font-normal text-left">
|
|
per<br />month
|
|
</span>
|
|
</div>
|
|
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#363b4d] to-transparent" />
|
|
</div>
|
|
|
|
{/* Features List (Frame 2095586164: w: 299, h: 188, itemSpacing: 8) */}
|
|
<div className="flex flex-col gap-[8px] w-full">
|
|
{agencyFeatures.map((feature, idx) => (
|
|
<div key={idx} className="flex items-center gap-[4px] h-[20px]">
|
|
<Image
|
|
src="/assets/images/pricing_check_blue.svg"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[20px] h-[20px] flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
<span className="text-[#cbdaef] text-[14px] leading-[17px] font-normal">
|
|
{feature}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Button (Button, id: 4193:10399, width: 325, height: 44, radius: 12) */}
|
|
<button
|
|
type="button"
|
|
id="pricing-agency-cta"
|
|
className="btn-primary-gradient w-full h-[44px] rounded-[12px] px-[16px] py-[12px] flex items-center justify-center text-white text-[16px] leading-[20px] font-normal hover:brightness-110 active:scale-[0.98] transition-all cursor-pointer shadow-[0_0_25px_rgba(72,126,255,0.35)]"
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|