extern/doc.rustdesk.com
1
0
Fork 1
mirror of https://github.com/rustdesk/doc.rustdesk.com.git synced 2025-06-21 10:17:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

pricing style looks good now

Browse Source
This commit is contained in:
rustdesk 2024-10-11 22:01:58 +08:00
parent ab518d7de4
commit de8097e17a
6 changed files with 207 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
v3/src/components/common/Scamming.jsx
View File

@ -23,8 +23,8 @@ const ScammingBanner = () => {
<div className="top-0 w-full bg-gradient-to-r from-[#E014B0] to-[#802FF3] text-white p-2 flex justify-between items-center z-50"> <div className="top-0 w-full bg-gradient-to-r from-[#E014B0] to-[#802FF3] text-white p-2 flex justify-between items-center z-50">
<span className="flex-1 text-center font-bold"> <span className="flex-1 text-center font-bold">
WARNING: YOU MAY BE BEING SCAMMED! <br /> WARNING: YOU MAY BE BEING SCAMMED! <br />
If you are on the phone with someone you DON'T know AND TRUST who has asked If you are on the phone with someone you DON'T know AND TRUST who has asked you to install RustDesk,
you to install RustDesk,<br /> <br />
do not install and hang up immediately. <br /> do not install and hang up immediately. <br />
They are likely a scammer trying to steal your money or other private information. They are likely a scammer trying to steal your money or other private information.
</span> </span>

8
v3/src/components/widgets/Note.astro
View File

@ -1,11 +1,15 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
const { title = await Astro.slots.render('title'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
--- ---
<section class="bg-blue-50 dark:bg-slate-800 not-prose"> <section class="bg-blue-50 dark:bg-slate-800 not-prose">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium"> <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
<span class="font-bold"> <span class="font-bold">
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" />
> Simplicity, Best Practices and High Performance <Fragment set:html={title} />:</span
>
<Fragment set:html={subtitle} />
</div> </div>
</section> </section>

132
v3/src/components/widgets/Pricing.astro
View File

@ -21,62 +21,94 @@ const {
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}> <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} /> <Headline title={title} subtitle={subtitle} tagline={tagline} />
<div class="flex items-stretch justify-center"> <div class="flex items-stretch justify-center">
<div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> <div class="grid grid-cols-4 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
{ {
prices && prices &&
prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => ( prices.map(
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1"> ({
{price && period && ( title,
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center"> subtitle,
{hasRibbon && ribbonTitle && ( price,
<div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right"> period,
<span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']"> items,
{ribbonTitle} callToAction,
</span> callToAction2,
</div> hasRibbon = false,
)} ribbonTitle,
<div class="px-2 py-0"> }) => (
{title && ( <div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3> {price && period && (
)} <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-3 py-6 flex w-full max-w-sm flex-col justify-between text-center">
{subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>} {hasRibbon && ribbonTitle && (
<div class="my-8"> <div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
<div class="flex items-center justify-center text-center mb-1"> <span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
<span class="text-5xl">$</span> {ribbonTitle}
<span class="text-6xl font-extrabold">{price}</span> </span>
</div> </div>
<span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
</div>
{items && (
<ul class="my-8 md:my-10 space-y-2 text-left">
{items.map(
({ description, icon }) =>
description && (
<li class="mb-1.5 flex items-start space-x-3 leading-7">
<div class="rounded-full bg-primary mt-1">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
</div>
<span>{description}</span>
</li>
)
)}
</ul>
)} )}
</div> <div class="px-2 py-0">
{callToAction && ( {title && (
<div class={`flex justify-center`}> <h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">
{typeof callToAction === 'string' ? ( {title}
<Fragment set:html={callToAction} /> </h3>
) : ( )}
callToAction && {subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
callToAction.href && <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} /> <div class="my-8">
<div class="flex items-center justify-center text-center mb-1">
<span class="text-5xl">$</span>
<span class="text-5xl font-extrabold">
<Fragment set:html={price} />
</span>
</div>
<span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
</div>
{items && (
<ul class="my-8 md:my-10 space-y-2 text-left">
{items.map(
({ description, icon }) =>
description && (
<li class="mb-1.5 flex items-start space-x-3 leading-7 text-sm">
<div class="mt-1.5">
<Icon name={icon ? icon : 'tabler:check'} class="size-4 text-blue-500" />
</div>
<span>
<Fragment set:html={description} />
</span>
</li>
)
)}
</ul>
)} )}
</div> </div>
)} {callToAction && (
</div> <div class={`flex justify-center`}>
)} {typeof callToAction === 'string' ? (
</div> <Fragment set:html={callToAction} />
)) ) : (
callToAction &&
callToAction.href && (
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction} />
)
)}
</div>
)}
{callToAction2 && (
<div class={`flex justify-center`}>
{typeof callToAction2 === 'string' ? (
<Fragment set:html={callToAction2} />
) : (
callToAction2 &&
callToAction2.href && (
<Button {...(hasRibbon ? { variant: 'primary' } : {})} {...callToAction2} />
)
)}
</div>
)}
</div>
)}
</div>
)
)
} }
</div> </div>
</div> </div>

47
v3/src/pages/about.astro
View File

@ -12,16 +12,17 @@ const metadata = {
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- Hero Widget ******************* --> <!-- Hero Widget ******************* -->
<Hero <Hero tagline="About us">
tagline="About us" <Fragment slot="title"> Why Are We Building This? </Fragment>
>
<Fragment slot="title">
Why Are We Building This?
</Fragment>
<Fragment slot="subtitle"> <Fragment slot="subtitle">
<p class="text-left"> <p class="text-left">
In the midst of the Covid-19 pandemic in mid-2020, the now lead dev / founder found themselves compelled to procure a commercial license for TeamViewer to facilitate remote work in Singapore. However, they were taken aback by the exorbitant cost. Following a restless night, they embarked on a mission to create an alternative solution. Thus, RustDesk was conceived — an open-source, freely accessible remote desktop software that was diligently crafted through numerous sleepless nights. This labor of dedication and determination culminated in the release of RustDesk on GitHub in 2021, allowing it to be utilized by individuals worldwide. In the midst of the Covid-19 pandemic in mid-2020, the now lead dev / founder found themselves compelled to
procure a commercial license for TeamViewer to facilitate remote work in Singapore. However, they were taken
aback by the exorbitant cost. Following a restless night, they embarked on a mission to create an alternative
solution. Thus, RustDesk was conceived — an open-source, freely accessible remote desktop software that was
diligently crafted through numerous sleepless nights. This labor of dedication and determination culminated in
the release of RustDesk on GitHub in 2021, allowing it to be utilized by individuals worldwide.
</p> </p>
</Fragment> </Fragment>
</Hero> </Hero>
@ -34,37 +35,35 @@ const metadata = {
{ {
title: 'Joseph Jacks<br><small>CEO</small>', title: 'Joseph Jacks<br><small>CEO</small>',
description: description:
'Joseph Jacks founded OSS Capital in 2018. It is the world\'s first and only early stage VC dedicated exclusively to COSS (commercial open source) startups on a global basis. Previously, he helped start and run the very first Kubernetes startup (Kismatic) and also found and run KubeCon (the Kubernetes community conference) before donating it to the Linux Foundation in 2016 as the CNCF (Cloud Native Computing Foundation) was materializing.', "Joseph Jacks founded OSS Capital in 2018. It is the world's first and only early stage VC dedicated exclusively to COSS (commercial open source) startups on a global basis. Previously, he helped start and run the very first Kubernetes startup (Kismatic) and also found and run KubeCon (the Kubernetes community conference) before donating it to the Linux Foundation in 2016 as the CNCF (Cloud Native Computing Foundation) was materializing.",
icon: "tabler:user", icon: 'tabler:user',
}, },
{ {
title: 'Huabing Zhou<br><small>CTO</small>', title: 'Huabing Zhou<br><small>CTO</small>',
description: description:
'Prior to founding and developing RustDesk, Huabing Zhou accumulated over 12 years of experience in the field of financial IT while working in Singapore. Bringing a wealth of real life experience to both the project and managing the business.', 'Prior to founding and developing RustDesk, Huabing Zhou accumulated over 12 years of experience in the field of financial IT while working in Singapore. Bringing a wealth of real life experience to both the project and managing the business.',
icon: "tabler:user", icon: 'tabler:user',
}, },
{ {
title: 'Daniel Lamb<br><small>Community Assistant</small>', title: 'Daniel Lamb<br><small>Community Assistant</small>',
description: description:
'With a remarkable quarter century career in the IT industry, Daniel Lamb has actively participated in numerous open-source projects, assuming various roles and responsibilities. Additionally, he has accomplished the establishment of an IT services company based in Scotland, catering to customers worldwide. Daniel\'s extensive expertise encompasses support, sales, and community engagement, bringing a large amount of knowledge and experience to the project.', "With a remarkable quarter century career in the IT industry, Daniel Lamb has actively participated in numerous open-source projects, assuming various roles and responsibilities. Additionally, he has accomplished the establishment of an IT services company based in Scotland, catering to customers worldwide. Daniel's extensive expertise encompasses support, sales, and community engagement, bringing a large amount of knowledge and experience to the project.",
icon: "tabler:user", icon: 'tabler:user',
}, },
]} ]}
/> />
<!-- Features2 Widget ************** --> <!-- Features2 Widget ************** -->
<Features2 <Features2
title="Our locations" title="Our locations"
tagline="Find us" tagline="Find us"
columns={1} columns={1}
items={[ items={[
{ {
title: 'Singapore', title: 'Singapore',
description: '18A, Canberra Drive, Yishun', description: '18A, Canberra Drive, Yishun',
}, },
]} ]}
/> />
</Layout> </Layout>

128
v3/src/pages/pricing.astro
View File

@ -1,6 +1,6 @@
--- ---
import Layout from '~/layouts/PageLayout.astro'; import Layout from '~/layouts/PageLayout.astro';
import HeroText from '~/components/widgets/HeroText.astro'; import Note from '~/components/widgets/Note.astro';
import Prices from '~/components/widgets/Pricing.astro'; import Prices from '~/components/widgets/Pricing.astro';
import FAQs from '~/components/widgets/FAQs.astro'; import FAQs from '~/components/widgets/FAQs.astro';
import Steps from '~/components/widgets/Steps.astro'; import Steps from '~/components/widgets/Steps.astro';
@ -13,37 +13,82 @@ const metadata = {
--- ---
<Layout metadata={metadata}> <Layout metadata={metadata}>
<!-- HeroText Widget ******************* --> <Note
title="Note"
<HeroText subtitle='This pricing is for <span class="text-xl text-blue-500">self-hosting</span>solution, it is not a <span class="line-through text-xl text-blue-500">SaaS</span> subscription.'
tagline="Pricing"
title="Stellar Pricing for Every Journey"
subtitle="Choose the perfect plan that aligns with your cosmic goals."
/> />
<!-- Pricing Widget ******************* --> <!-- Pricing Widget ******************* -->
<Prices <Prices
title="Our prices" title='Pricing of our <span class="text-5xl text-blue-500">self-hosting</span> solutions'
subtitle="Only pay for what you need" subtitle="Only pay for what you need"
prices={[ prices={[
{ {
title: 'basic', title: 'Free',
subtitle: 'Optimal choice for personal use', subtitle: 'Free Self-hosting Plan',
price: 29, price: '0 <span class="text-sm">/month</span>',
period: 'per month', period: 'Open source and free',
items: [ items: [
{ {
description: 'Etiam in libero, et volutpat', description: 'Online status',
}, },
{ {
description: 'Aenean ac nunc dolor tristique', description: 'Community support',
},
],
callToAction: {
target: '_blank',
text: 'Get started',
href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
},
},
{
title: 'Individual',
subtitle: 'Individual Self-hosting Pro Plan',
price: '9.90 <span class="text-sm">/month</span>',
period: 'billed annually',
items: [
{
description:
'<a class="underline" target="_blank" href="https://github.com/rustdesk/rustdesk/wiki/FAQ#what-are-managed-devices--licensed-users--concurrent-connections-in-pro">1 licensed user</a>',
}, },
{ {
description: 'Cras scelerisque accumsan lib', description:
'<a class="underline" target="_blank" href="https://github.com/rustdesk/rustdesk/wiki/FAQ#what-are-managed-devices--licensed-users--concurrent-connections-in-pro">20 managed devices</a>',
}, },
{ {
description: 'In hac habitasse', description:
'<a class="underline text-blue-500 font-bold" target="_blank" href="https://github.com/rustdesk/rustdesk/wiki/FAQ#what-are-managed-devices--licensed-users--concurrent-connections-in-pro">Unlimited concurrent connections</a>',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/2fa/">2FA</a>',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/console/">Web console</a>',
},
{
description: 'Address book',
},
{
description: 'Audit log',
},
{
description: 'Change ID',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/permissions/">Access control</a>',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/strategy/">Centralized settings</a>',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/relay/">Distributed relay servers</a>',
}, },
], ],
callToAction: { callToAction: {
@ -53,25 +98,38 @@ const metadata = {
}, },
}, },
{ {
title: 'standard', title: 'Basic',
subtitle: 'Optimal choice for small teams', subtitle: 'Basic Self-hosting Pro Plan',
price: 69, price: '19.90 <span class="text-sm">/month</span>',
period: 'Per Month', period: 'billed annually',
items: [ items: [
{ {
description: 'Proin vel laoreet', description: '<span class="font-bold">Everything in the individual plan</span>',
icon: 'tabler:checks',
}, },
{ {
description: 'Ut efficitur habitasse egestas', description:
'<a class="underline" target="_blank" href="https://github.com/rustdesk/rustdesk/wiki/FAQ#what-are-managed-devices--licensed-users--concurrent-connections-in-pro">10 licensed users</a>',
}, },
{ {
description: 'Volutpat hac curabitur', description:
'<a class="underline" target="_blank" href="https://github.com/rustdesk/rustdesk/wiki/FAQ#what-are-managed-devices--licensed-users--concurrent-connections-in-pro">100 managed devices</a>',
}, },
{ {
description: 'Pellentesque blandit ut nibh', description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/oidc/">OIDC (SSO)</a>',
}, },
{ {
description: 'Donec fringilla sem', description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/ldap/">LDAP integration</a>',
},
{
description:
'<a class="underline" target="_blank" href="https://rustdesk.com/docs/en/self-host/rustdesk-server-pro/permissions/#cross-group-settings">Cross group access</a>',
},
{
description:
'<a class="underline text-blue-500 font-bold" target="_blank" href="https://rustdesk.com/docs/en/self-host/client-configuration/#1-custom-client-generator-pro-only">Custom client generator</a>',
}, },
], ],
callToAction: { callToAction: {
@ -83,28 +141,26 @@ const metadata = {
ribbonTitle: 'popular', ribbonTitle: 'popular',
}, },
{ {
title: 'premium', title: 'Customized',
subtitle: 'Optimal choice for companies', subtitle: 'Customized Pro Plan',
price: 199, price: '0 <span class="text-sm">/month</span>',
period: 'Per Month', period: 'billed annually',
items: [ items: [
{ {
description: 'Curabitur suscipit risus', description: '<span class="font-bold">Everything in the basic plan</span>',
icon: 'tabler:checks',
}, },
{ {
description: 'Aliquam habitasse malesuada', description: '$1 for each additional user',
}, },
{ {
description: 'Suspendisse sit amet blandit', description: '$0.1 for each additional device',
},
{
description: 'Suspendisse auctor blandit dui',
}, },
], ],
callToAction: { callToAction: {
target: '_blank', target: '_blank',
text: 'Get started', text: 'Get started',
href: '#', href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
}, },
}, },
]} ]}

3
v3/src/types.d.ts vendored
View File

@ -149,6 +149,7 @@ export interface Price {
period?: string; period?: string;
items?: Array<Item>; items?: Array<Item>;
callToAction?: CallToAction; callToAction?: CallToAction;
callToAction2?: CallToAction;
hasRibbon?: boolean; hasRibbon?: boolean;
ribbonTitle?: string; ribbonTitle?: string;
} }
@ -283,4 +284,4 @@ export interface Content extends Omit<Headline, 'classes'>, Widget {
callToAction?: CallToAction; callToAction?: CallToAction;
} }
export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {} export interface Contact extends Omit<Headline, 'classes'>, Form, Widget { }