import React, { useState } from 'react'; import { motion } from 'motion/react'; import { toggleTheme, Toggle } from 'reablocks'; import { radioTheme, Radio } from 'reablocks'; import { Button } from 'reablocks'; import { Card, Divider, List, ListItem, MotionGroup, MotionItem, Stack, VerticalSpacer } from 'reablocks'; import { Chip } from 'reablocks'; import { cn } from 'reablocks'; export default { title: 'Blocks/Administration/Pricing' }; const CheckIcon = () => ( ); const ToggleTheme = { ...toggleTheme, base: 'flex items-center justify-start cursor-pointer box-border border dark:border-charade dark:bg-[#1E1E2E] light:border-mystic light:bg-[#C9C9D6] hover:bg-primary-hover focus-visible:outline-hidden focus-visible:border-primary-hover rounded-xl transition-colors', checked: 'justify-end bg-blue-500!', handle: { base: 'rounded-full dark:bg-black light:bg-white', sizes: { ...toggleTheme.handle.sizes, medium: 'w-5 h-5' } }, sizes: { ...toggleTheme.sizes, medium: 'w-12 h-6 py-0.5 px-[1px]' } }; const RadioTheme = { ...radioTheme, base: 'box-border leading-3', radio: { ...radioTheme.radio, base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-full bg-transparent border light:border-charade cursor-pointer focus-visible:outline-hidden focus-visible:border-primary-hover', checked: 'border-primary' } }; export const Pricing = () => { const [selected, setSelected] = useState('free'); return (

Free

Current Plan For small teams

$0

/Month } className="dark:text-waterloo light:text-charade" > 10 members } className="dark:text-waterloo light:text-charade" > Integration support } className="dark:text-waterloo light:text-charade" > Figma support

Starter

Recommended For a broad set of teams

$1,000

/Month } className="dark:text-waterloo light:text-charade" > Unlimited members } className="dark:text-waterloo light:text-charade" > Integration support } className="dark:text-waterloo light:text-charade" > Figma support } className="dark:text-waterloo light:text-charade" > Storybook support

Enterprise

For all custom needs

Custom

} className="dark:text-waterloo light:text-charade" > Unlimited members } className="dark:text-waterloo light:text-charade" > Integration support } className="dark:text-waterloo light:text-charade" > Figma support } className="dark:text-waterloo light:text-charade" > Storybook support } className="dark:text-waterloo light:text-charade" > Everything else ); }; export const PricingFull = () => { const [cycle, setCycle] = useState('Monthly'); return (

Back to billing {['Monthly', 'Yearly'].map(type => ( ))}

Plans

Change your current workspace plan

Core Features

Founders Package

{cycle === 'Monthly' ? '$1,000' : '$10,000'}

{cycle === 'Monthly' ? 'Per month' : 'Per year'}

Current Plan

Startup Package

{cycle === 'Monthly' ? '$5,000' : '$50,000'}

{cycle === 'Monthly' ? 'Per month' : 'Per year'}

Seed Package

Let's talk

{cycle === 'Monthly' ? 'Per month' : 'Per year'}

Design Support (Add On)

Unlimited

Product Research

Logo and brand book

Competitor analysis Product guidance

See details{' '}

Brand Style Guide

See details{' '}

Prototype of Web Application

3 Figma Designs

Fully interactive prototype

See details{' '}

Development of Web Application

Build out of pages/features in react.js

); }; export const PricingMinimal = () => { const [isAnnual, setIsAnnual] = useState(false); const [isFree, setIsFree] = useState(true); return (

Change your plan

Switch to annual to save 16%

} disablePadding >

Annual pricing Save 16%

FREE account

setIsFree(selected)} />

$0

{isAnnual ? '/Year' : '/Month'}

} className="dark:text-waterloo light:text-charade" > Basic Integration support } className="dark:text-waterloo light:text-charade" > Limited Figma support } className="dark:text-waterloo light:text-charade" > Storybook Support

PRO account

setIsFree(!selected)} />

{isAnnual ? '$222' : '$25'}

{isAnnual ? '/Year' : '/Month'}

); };