mirror of
https://github.com/rustdesk/doc.rustdesk.com.git
synced 2025-06-21 02:08:12 +02:00
pricing style looks good now
This commit is contained in:
parent
ab518d7de4
commit
de8097e17a
@ -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">
|
||||
<span className="flex-1 text-center font-bold">
|
||||
WARNING: YOU MAY BE BEING SCAMMED! <br />
|
||||
If you are on the phone with someone you DON'T know AND TRUST who has asked
|
||||
you to install RustDesk,<br />
|
||||
If you are on the phone with someone you DON'T know AND TRUST who has asked you to install RustDesk,
|
||||
<br />
|
||||
do not install and hang up immediately. <br />
|
||||
They are likely a scammer trying to steal your money or other private information.
|
||||
</span>
|
||||
|
@ -1,11 +1,15 @@
|
||||
---
|
||||
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">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
|
||||
<span class="font-bold">
|
||||
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
|
||||
> Simplicity, Best Practices and High Performance
|
||||
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" />
|
||||
<Fragment set:html={title} />:</span
|
||||
>
|
||||
<Fragment set:html={subtitle} />
|
||||
</div>
|
||||
</section>
|
||||
|
@ -21,13 +21,24 @@ const {
|
||||
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
|
||||
<Headline title={title} subtitle={subtitle} tagline={tagline} />
|
||||
<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.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
|
||||
prices.map(
|
||||
({
|
||||
title,
|
||||
subtitle,
|
||||
price,
|
||||
period,
|
||||
items,
|
||||
callToAction,
|
||||
callToAction2,
|
||||
hasRibbon = false,
|
||||
ribbonTitle,
|
||||
}) => (
|
||||
<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 && (
|
||||
<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">
|
||||
<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">
|
||||
{hasRibbon && ribbonTitle && (
|
||||
<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">
|
||||
<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-['']">
|
||||
@ -37,13 +48,17 @@ const {
|
||||
)}
|
||||
<div class="px-2 py-0">
|
||||
{title && (
|
||||
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
|
||||
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
|
||||
<div class="my-8">
|
||||
<div class="flex items-center justify-center text-center mb-1">
|
||||
<span class="text-5xl">$</span>
|
||||
<span class="text-6xl font-extrabold">{price}</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>
|
||||
@ -52,11 +67,13 @@ const {
|
||||
{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" />
|
||||
<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>{description}</span>
|
||||
<span>
|
||||
<Fragment set:html={description} />
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
@ -69,14 +86,29 @@ const {
|
||||
<Fragment set:html={callToAction} />
|
||||
) : (
|
||||
callToAction &&
|
||||
callToAction.href && <Button {...(hasRibbon ? { variant: 'primary' } : {})} {...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>
|
||||
|
@ -12,16 +12,17 @@ const metadata = {
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero Widget ******************* -->
|
||||
|
||||
<Hero
|
||||
tagline="About us"
|
||||
>
|
||||
<Fragment slot="title">
|
||||
Why Are We Building This?
|
||||
</Fragment>
|
||||
<Hero tagline="About us">
|
||||
<Fragment slot="title"> Why Are We Building This? </Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
<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>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
@ -34,27 +35,26 @@ const metadata = {
|
||||
{
|
||||
title: 'Joseph Jacks<br><small>CEO</small>',
|
||||
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.',
|
||||
icon: "tabler:user",
|
||||
"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',
|
||||
},
|
||||
{
|
||||
title: 'Huabing Zhou<br><small>CTO</small>',
|
||||
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.',
|
||||
icon: "tabler:user",
|
||||
icon: 'tabler:user',
|
||||
},
|
||||
{
|
||||
title: 'Daniel Lamb<br><small>Community Assistant</small>',
|
||||
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.',
|
||||
icon: "tabler:user",
|
||||
"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',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- Features2 Widget ************** -->
|
||||
|
||||
|
||||
<Features2
|
||||
title="Our locations"
|
||||
tagline="Find us"
|
||||
@ -65,6 +65,5 @@ const metadata = {
|
||||
description: '18A, Canberra Drive, Yishun',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
/>
|
||||
</Layout>
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
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 FAQs from '~/components/widgets/FAQs.astro';
|
||||
import Steps from '~/components/widgets/Steps.astro';
|
||||
@ -13,37 +13,82 @@ const metadata = {
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- HeroText Widget ******************* -->
|
||||
|
||||
<HeroText
|
||||
tagline="Pricing"
|
||||
title="Stellar Pricing for Every Journey"
|
||||
subtitle="Choose the perfect plan that aligns with your cosmic goals."
|
||||
<Note
|
||||
title="Note"
|
||||
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.'
|
||||
/>
|
||||
|
||||
<!-- Pricing Widget ******************* -->
|
||||
|
||||
<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"
|
||||
prices={[
|
||||
{
|
||||
title: 'basic',
|
||||
subtitle: 'Optimal choice for personal use',
|
||||
price: 29,
|
||||
period: 'per month',
|
||||
title: 'Free',
|
||||
subtitle: 'Free Self-hosting Plan',
|
||||
price: '0 <span class="text-sm">/month</span>',
|
||||
period: 'Open source and free',
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: 'Cras scelerisque accumsan lib',
|
||||
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: 'In hac habitasse',
|
||||
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:
|
||||
'<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: {
|
||||
@ -53,25 +98,38 @@ const metadata = {
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'standard',
|
||||
subtitle: 'Optimal choice for small teams',
|
||||
price: 69,
|
||||
period: 'Per Month',
|
||||
title: 'Basic',
|
||||
subtitle: 'Basic Self-hosting Pro Plan',
|
||||
price: '19.90 <span class="text-sm">/month</span>',
|
||||
period: 'billed annually',
|
||||
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: {
|
||||
@ -83,28 +141,26 @@ const metadata = {
|
||||
ribbonTitle: 'popular',
|
||||
},
|
||||
{
|
||||
title: 'premium',
|
||||
subtitle: 'Optimal choice for companies',
|
||||
price: 199,
|
||||
period: 'Per Month',
|
||||
title: 'Customized',
|
||||
subtitle: 'Customized Pro Plan',
|
||||
price: '0 <span class="text-sm">/month</span>',
|
||||
period: 'billed annually',
|
||||
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: 'Suspendisse auctor blandit dui',
|
||||
description: '$0.1 for each additional device',
|
||||
},
|
||||
],
|
||||
callToAction: {
|
||||
target: '_blank',
|
||||
text: 'Get started',
|
||||
href: '#',
|
||||
href: 'https://rustdesk.com/docs/en/self-host/rustdesk-server-oss/',
|
||||
},
|
||||
},
|
||||
]}
|
||||
|
3
v3/src/types.d.ts
vendored
3
v3/src/types.d.ts
vendored
@ -149,6 +149,7 @@ export interface Price {
|
||||
period?: string;
|
||||
items?: Array<Item>;
|
||||
callToAction?: CallToAction;
|
||||
callToAction2?: CallToAction;
|
||||
hasRibbon?: boolean;
|
||||
ribbonTitle?: string;
|
||||
}
|
||||
@ -283,4 +284,4 @@ export interface Content extends Omit<Headline, 'classes'>, Widget {
|
||||
callToAction?: CallToAction;
|
||||
}
|
||||
|
||||
export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}
|
||||
export interface Contact extends Omit<Headline, 'classes'>, Form, Widget { }
|
||||
|
Loading…
x
Reference in New Issue
Block a user