Skip to content

Commit f6e6a72

Browse files
avb-is-meavb-is-me
committed
adss pricing
1 parent 0f4dfa7 commit f6e6a72

File tree

3 files changed

+100
-65
lines changed

3 files changed

+100
-65
lines changed

‎src/components/landing-page-components/parts/pricing-card.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const PricingCard = ({
2626
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%)",
2727
border: "2px solid rgba(255, 255, 255, 0.20)",
2828
boxShadow: "0px -2px 10px 0px rgba(233, 223, 255, 0.30), 0px -2px 40px 0px rgba(187, 155, 255, 0.15)",
29+
height: "100%"
2930
}}
3031
>
3132
<div

‎src/components/landing-page-components/sections/pricing-cards.jsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import LandingPageCard from '../parts/landing-page-card';
3+
import { useHistory } from 'react-router-dom';
4+
import PricingCard from '../parts/pricing-card';
5+
import PrimaryButton from '../parts/landing-page-button-primary';
6+
import SecondaryButton from '../parts/landing-page-button-secondary';
7+
import { LINK_CHAT_WITH_FOUNDERS, LINK_GET_STARTED } from '@site/src/constants/landing-page-links-constants';
8+
9+
const FEATURES = [
10+
{
11+
title: "Byte Plan (free tier)",
12+
description: "Everything you need to get started with Dev-Docs",
13+
bulletPoints: [
14+
"No cc required",
15+
"Access to Dev-Docs' native web app features",
16+
"Use Dev-Docs in VS Code or GitHub Codespaces",
17+
"Generate the content you need from your codebase",
18+
"Leverage Dev-Docs Chrome Extension to generate step by step guides",
19+
"Get 2,000,000 input credits and 500,000 output credits to use as you see fit",
20+
],
21+
buttonTitle: "Get started",
22+
href: "https://docs.dev/docs"
23+
},
24+
{
25+
title: "Megabyte Plan (pro tier)",
26+
description: "Get even more out of Dev-Docs",
27+
bulletPoints: [
28+
"Everything from the free plan",
29+
"Starting with 10,000,000 input credits and 2,000,000 output credits per month",
30+
"Integrate Dev-Docs into your CI/CD to fully automate the process",
31+
"Sync Dev-Docs up with your Confluence, Google Drive or Notion",
32+
"Dedicated support via a private slack channel"
33+
],
34+
buttonTitle: "Get In Touch",
35+
href: "https://dub.sh/devdocs"
36+
}
37+
];
38+
39+
const PricingCards = () => {
40+
const isMobile = window.innerWidth < 869;
41+
const history = useHistory();
42+
43+
return (
44+
<LandingPageCard
45+
className={isMobile ? "" : "px-0 p-[2rem]"}
46+
47+
>
48+
<div
49+
className={isMobile ? "font-extrabold text-[2rem] max-w-[24rem] text-center font-pixel" : "font-extrabold text-[3rem] max-w-[24rem] text-center font-pixel"}
50+
style={{
51+
fontFeatureSettings: "'liga' off, 'clig' off",
52+
}}
53+
>
54+
Benefits built for your success
55+
</div>
56+
57+
<div className={`${isMobile ? 'flex flex-col' : 'flex flex-row'} gap-[1em]`} style={{ alignItems: "stretch" }}>
58+
{FEATURES.map((feature, idx) => (
59+
<div
60+
key={`landing-page-features-card-feature-card-${idx}`}
61+
className={`${isMobile ? 'w-full' : 'nothing-yo'}`}
62+
style={{ "flexGrow": 1 }}
63+
>
64+
<PricingCard
65+
title={feature.title}
66+
description={feature.description}
67+
bulletPoints={feature.bulletPoints}
68+
href={feature.href}
69+
buttonTitle={feature.buttonTitle}
70+
/>
71+
</div>
72+
))}
73+
</div>
74+
75+
<div
76+
className={isMobile ? "flex flex-col gap-[1rem] pt-[1.5rem]" : "flex gap-[1rem] pt-[2rem]"}
77+
>
78+
<PrimaryButton
79+
className="inline-flex !w-auto px-[1.5rem] py-[0.75rem]"
80+
onClick={() => history.push(LINK_GET_STARTED)}
81+
>
82+
Get started
83+
</PrimaryButton>
84+
85+
<SecondaryButton
86+
className="inline-flex !w-auto px-[1.5rem] py-[0.75rem]"
87+
onClick={() => window.open(LINK_CHAT_WITH_FOUNDERS, '_blank')}
88+
>
89+
Chat with us
90+
</SecondaryButton>
91+
</div>
92+
</LandingPageCard>
93+
);
94+
};
95+
96+
export default PricingCards;

‎src/pages/pricing/index.jsx‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,83 +6,21 @@ import LandingPageHeader from '../../components/landing-page-components/sections
66
import LandingPageFaqCard from '../../components/landing-page-components/sections/landing-page-faq';
77
import LandingPageCard from '../../components/landing-page-components/parts/landing-page-card';
88
import LandingPageFeatureCard from '../../components/landing-page-components/parts/pricing-card';
9+
import PricingCards from '@site/src/components/landing-page-components/sections/pricing-cards';
910

1011

1112

12-
13-
const FEATURES = [
14-
{
15-
title: "Byte Plan (free tier)",
16-
description: "Everything you need to get started with Dev-Docs",
17-
bulletPoints: [
18-
"No cc required",
19-
"Access to Dev-Docs' native web app features",
20-
"Use Dev-Docs in VS Code or GitHub Codespaces",
21-
"Generate the content you need from your codebase",
22-
"Leverage Dev-Docs Chrome Extension to generate step by step guides",
23-
"Get 2,000,000 input credits and 500,000 output credits to use as you see fit",
24-
],
25-
buttonTitle: "Get started",
26-
href: "https://docs.dev/docs"
27-
},
28-
{
29-
title: "Megabyte Plan (pro tier)",
30-
description: "Get even more out of Dev-Docs",
31-
bulletPoints: [
32-
"Everything from the free plan",
33-
"Starting with 10,000,000 input credits and 2,000,000 output credits per month",
34-
"Integrate Dev-Docs into your CI/CD to fully automate the process",
35-
"Sync Dev-Docs up with your Confluence, Google Drive or Notion",
36-
"Dedicated support"
37-
],
38-
buttonTitle: "Get In Touch",
39-
href: "https://dub.sh/devdocs"
40-
}
41-
];
42-
43-
4413
const PricingPage = () => {
4514
const isMobile = useIsMobile();
4615

4716
return (
4817
<MobileContextProvider>
4918
<div
50-
className={isMobile ?
51-
"w-full font-sans bg-repeat-y bg-cover bg-landing-page text-[#ECECEC] gap-[4rem] flex flex-col"
52-
:
53-
"w-full font-sans bg-repeat-y bg-cover bg-landing-page text-[#ECECEC] gap-[15.62rem] flex flex-col"
54-
}
19+
className={`w-full font-sans bg-repeat-y bg-cover bg-landing-page text-[#ECECEC] flex flex-col ${isMobile ? 'gap-4' : 'gap-[15.62rem]'}`}
5520
>
5621
<LandingPageHeader />
5722

58-
<div
59-
className={isMobile ?
60-
"mt-[3rem] flex justify-center items-center gap-[1rem]"
61-
:
62-
"mt-[3rem] flex flex-col flex-wrap gap-[1.25rem] justify-center w-full"
63-
}
64-
style={{"alignItems": "stretch"}}
65-
>
66-
{FEATURES.map((feature, idx) => (
67-
<div
68-
key={`landing-page-features-card-feature-card-${idx}`}
69-
className={isMobile ?
70-
"flex flex-row justify-center align-items-stretch"
71-
:
72-
"flex flex-row justify-center h-[23rem] align-items-stretch"
73-
}
74-
>
75-
<LandingPageFeatureCard
76-
iconSrc={feature.iconSrc}
77-
title={feature.title}
78-
description={feature.description}
79-
bulletPoints={feature.bulletPoints}
80-
href={feature.href}
81-
buttonTitle={feature.buttonTitle}
82-
/>
83-
</div>
84-
))}
85-
</div>
23+
<PricingCards />
8624

8725
<LandingPageFaqCard />
8826
<LandingPageFooter />

0 commit comments

Comments
 (0)