Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: enterprise let's chat form #2034

Merged
merged 11 commits into from Oct 18, 2022
Merged

feat: enterprise let's chat form #2034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1340091
chore: new branch
drewdelano Oct 14, 2022
acb16f1
feat: copy modal from previous pr
drewdelano Oct 14, 2022
c79e486
feat: be more like the storage modal
drewdelano Oct 14, 2022
df368ac
feat: remove href for mailto
drewdelano Oct 14, 2022
5155e90
feat: delete default kwesform style
drewdelano Oct 14, 2022
34b71b3
feat: trying to get kwes-form working
drewdelano Oct 14, 2022
0fcbe90
feat: namespace all of the kwes forms separately
drewdelano Oct 17, 2022
e13b44a
Merge branch 'main' into feat/enterprise-lets-chat
gobengo Oct 18, 2022
535e0a8
fix: remove unneeded event handler
drewdelano Oct 18, 2022
bda2d9a
fix: rename component
drewdelano Oct 18, 2022
d3300f4
fix: remove commented CSS
drewdelano Oct 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/website/components/customStorageForm/customStorageForm.js
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ const CustomStorageForm = ({ onClose }) => {
return (
<form
id="kwesForm"
className="kwes-form text-left max-w-lg text-lg mx-auto mt-12"
className="kwes-form custom-storage-form text-left max-w-lg text-lg mx-auto mt-12"
action="https://kwesforms.com/api/foreign/forms/rJbS5DK02SKLzypcNzJ3"
>
<h3>Enterprise user inquiry</h3>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/customStorageForm/customStorageForm.scss
View file
Open in desktop
@@ -1,4 +1,4 @@
.kwes-form {
.custom-storage-form .kwes-form {
.fields {
display: grid;
width: 100%;
Expand Down
69 changes: 69 additions & 0 deletions packages/website/components/enterpriseTierRequestModal/enterpriseTierRequestModal.js
View file
Open in desktop
@@ -0,0 +1,69 @@
import { useEffect } from 'react';
import kwesforms from 'kwesforms';

import Modal from 'modules/zero/components/modal/modal';
import CloseIcon from 'assets/icons/close';
import Button from 'components/button/button.js';
import GradientBackground from 'components/gradientbackground/gradientbackground';

const EnterpriseTierRequestModal = ({ isOpen, onClose }) => {
useEffect(() => {
kwesforms.init();
gobengo marked this conversation as resolved.
Show resolved Hide resolved
}, []);

return (
<div className="user-request-modal enterprise-tier-inquiry">
<Modal
className=""
closeIcon={<CloseIcon className="file-uploader-close" />}
modalState={[isOpen, onClose]}
showCloseButton
>
<div className="user-request-modal__container">
<GradientBackground variant="saturated-variant" />
<h1 className="user-request-modal__heading">Enterprise Storage Inquiry</h1>
<form
method="POST"
id="enterpriseKwesForm"
className="kwes-form"
action="https://kwesforms.com/api/foreign/forms/6M733IJbJvlIUBMRbSWB"
>
<div className="input-container">
<label htmlFor="auth-method">Please share your email address. </label>
<textarea id="auth-method" name="auth-method" required rows={1} />
</div>
<div className="input-container">
<label htmlFor="links">Please share links (Github, website, etc) for what you&apos;re building. </label>
<textarea id="links" name="links" required rows={4} />
</div>
<div className="input-container">
<label htmlFor="data-volume">
Please provide a ballpark estimate for your data volume (both in aggregate and over a given month).{' '}
</label>
<textarea id="data-volume" name="data-volume" required rows={2} />
</div>
<div className="input-container">
<label htmlFor="data-read-type-and-frequency">
How do you plan on reading data uploaded to web3.storage (E.g., w3link gateway, other gateway, directly
over bitswap, etc.)? How frequently do you plan on reading data?{' '}
</label>
<textarea id="data-read-type-and-frequency" name="data-read-type-and-frequency" required rows={2} />
</div>
<div className="input-container">
<label htmlFor="additional-info">Is there any additional usage information we should know about? </label>
<textarea id="additional-info" name="additional-info" required rows={4} />
</div>

<div className="input-container">
<Button className="bg-nslime" type="submit" id="create-new-key">
Request
</Button>
</div>
</form>
</div>
</Modal>
</div>
);
};

export default EnterpriseTierRequestModal;
2 changes: 1 addition & 1 deletion packages/website/components/pinningRequestModal/pinningRequestModal.js
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ const PinningRequestModal = ({ isOpen, onClose }) => {
}

return (
<div className="user-request-modal">
<div className="user-request-modal kwes-form-web3-defaults">
<Modal
className=""
closeIcon={<CloseIcon className="file-uploader-close" />}
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/storageLimitRequestModal/storageLimitRequestModal.js
View file
Open in desktop
Expand Up @@ -29,7 +29,7 @@ const UserRequestModal = ({ isOpen, onClose }) => {
}

return (
<div className="user-request-modal">
<div className="user-request-modal kwes-form-web3-defaults">
<Modal
className=""
closeIcon={<CloseIcon className="file-uploader-close" />}
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/w3link_form/w3link_form.js
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@ const W3linkForm = () => {

return (
<form
className="kwes-form text-left max-w-lg text-lg mx-auto mt-12"
className="kwes-form w3-link-form text-left max-w-lg text-lg mx-auto mt-12"
action="https://kwesforms.com/api/foreign/forms/YKmGgxCJeFWb8c9zWtDk"
>
<p>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/components/w3link_form/w3link_form.scss
View file
Open in desktop
@@ -1,4 +1,4 @@
.kwes-form {
.w3-link-form .kwes-form {
.fields {
display: grid;
width: 100%;
Expand Down
174 changes: 94 additions & 80 deletions packages/website/pages/pricing.js
View file
Open in desktop
@@ -1,3 +1,5 @@
import { useState } from 'react';

import Img from 'components/cloudflareImage.js';
import GradientBackground from 'components/gradientbackground/gradientbackground.js';
import Scroll2Top from 'components/scroll2top/scroll2top.js';
Expand All @@ -10,6 +12,7 @@ import BlobCluster from 'public/images/illustrations/blob-cluster.png';
import Cluster1 from 'public/images/index/cluster-1.png';
import Button from 'ZeroComponents/button/button';
import GeneralPageData from '../content/pages/general.json';
import EnterpriseTierRequestModal from 'components/enterpriseTierRequestModal/enterpriseTierRequestModal';
import CardListBlock from 'components/cardlistblock/cardlistblock';

const logos = [
Expand Down Expand Up @@ -132,96 +135,107 @@ const Card = props => {
);
};

const PricingTiers = () => (
<>
<section id="section_plan_cards" className="sectional">
<div className="grid-middle">
<div>
<div className="column-content">
<Card
title="Free"
price="$0"
storageAllocation="5GiB storage"
storageOverageRate=""
callToAction="GET STARTED"
callToActionUrl="/account/payment?plan=free"
>
<li className="pricing-bullet-1">Easily store your data and make it available on IPFS</li>
<li className="pricing-bullet-2">
All data is replicated onto the Filecoin storage network for verifiability that your data is safe
</li>
<li className="pricing-bullet-3">
Use the platform&apos;s other services like w3name and w3link to build the next generation of apps
</li>
</Card>
const PricingTiers = () => {
const [isEnterpriseRequestModelOpen, setIsEnterpriseRequestModelOpen] = useState(false);

return (
<>
<section id="section_plan_cards" className="sectional">
<div className="grid-middle">
<div>
<div className="column-content">
<Card
title="Free"
price="$0"
storageAllocation="5GiB storage"
storageOverageRate=""
callToAction="GET STARTED"
callToActionUrl="/account/payment?plan=free"
>
<li className="pricing-bullet-1">Easily store your data and make it available on IPFS</li>
<li className="pricing-bullet-2">
All data is replicated onto the Filecoin storage network for verifiability that your data is safe
</li>
<li className="pricing-bullet-3">
Use the platform&apos;s other services like w3name and w3link to build the next generation of apps
</li>
</Card>

<Card
title="Lite"
price="$3"
storageAllocation="15GiB storage"
storageOverageRate="+ $0.20/mo per additional GiB"
callToAction="CHOOSE THIS PLAN"
callToActionUrl="/account/payment?plan=lite"
>
<li className="pricing-bullet-1">
<i>Everything from the Free tier, plus...</i>
</li>
<li className="pricing-bullet-2">
Additional storage for personal usage or projects requiring lower data volumes
</li>
</Card>
<Card
gobengo marked this conversation as resolved.
Show resolved Hide resolved
title="Lite"
price="$3"
storageAllocation="15GiB storage"
storageOverageRate="+ $0.20/mo per additional GiB"
callToAction="CHOOSE THIS PLAN"
callToActionUrl="/account/payment?plan=lite"
>
<li className="pricing-bullet-1">
<i>Everything from the Free tier, plus...</i>
</li>
<li className="pricing-bullet-2">
Additional storage for personal usage or projects requiring lower data volumes
</li>
</Card>

<Card
title="Expert"
price="$10"
isBestValue={true}
storageAllocation="60GiB storage"
storageOverageRate="+ $0.17/mo per additional GiB"
callToAction="CHOOSE THIS PLAN"
callToActionUrl="/account/payment?plan=pro"
>
<li className="pricing-bullet-1">
<i>Everything from the Lite tier, plus...</i>
</li>
<li className="pricing-bullet-2">
Our lowest tier price per GiB stored for use cases that require scale
</li>
<li className="pricing-bullet-3">Early access to additional products that make web3 production-ready</li>
</Card>
<Card
title="Expert"
price="$10"
isBestValue={true}
storageAllocation="60GiB storage"
storageOverageRate="+ $0.17/mo per additional GiB"
callToAction="CHOOSE THIS PLAN"
callToActionUrl="/account/payment?plan=pro"
>
<li className="pricing-bullet-1">
<i>Everything from the Lite tier, plus...</i>
</li>
<li className="pricing-bullet-2">
Our lowest tier price per GiB stored for use cases that require scale
</li>
<li className="pricing-bullet-3">
Early access to additional products that make web3 production-ready
</li>
</Card>
</div>
</div>
</div>
</div>
<div className="grid-middle">
<div className="col-12_sm-12_mi-12_ti-12 column-1">
<div className="column-content">
<div className="pricing-enterprise-users">
<div className="enterprise-blob">
<Img alt="" src={BlobCluster} />
</div>
<div className="enterprise-content">
<div className="enterprise-title">FOR ENTERPRISE USERS...</div>
<div className="enterprise-heading">Custom</div>
<div className="enterprise-description">
Looking for way more? Anticipate having a complex integration? Just tell us more about your company
and what you&apos;re building using the form below, and we&apos;ll get back to you shortly.
<div className="grid-middle">
<div className="col-12_sm-12_mi-12_ti-12 column-1">
<div className="column-content">
<div className="pricing-enterprise-users">
<div className="enterprise-blob">
<Img alt="" src={BlobCluster} />
</div>
<div className="enterprise-above-call-to-action"></div>
<div>
<Button
className="button outline-light enterprise-call-to-action"
href="mailto:support@web3.storage?subject=Enterprise%20Tier%20Inquiry&body=-%20Please%20share%20your%20email%20address.%0D%0A%0D%0A%0D%0A-%20Please%20share%20links%20(Github%2C%20website%2C%20etc)%20for%20what%20you%E2%80%99re%20building.%0D%0A%0D%0A%0D%0A-%20Please%20provide%20a%20ballpark%20estimate%20for%20your%20data%20volume%20(both%20in%20aggregate%20and%20over%20a%20given%20month).%0D%0A%0D%0A%0D%0A-%20How%20do%20you%20plan%20on%20reading%20data%20uploaded%20to%20%5Bweb3.storage%5D(http%3A%2F%2Fweb3.storage)%20(E.g.%2C%20w3link%20gateway%2C%20other%20gateway%2C%20directly%20over%20bitswap%2C%20etc.)%3F%20How%20frequently%20do%20you%20plan%20on%20reading%20data%3F%0D%0A%0D%0A%0D%0A-%20Is%20there%20any%20additional%20usage%20information%20we%20should%20know%20about%3F%0D%0A%0D%0A"
>
LET&apos;S CHAT
</Button>
<div className="enterprise-content">
<div className="enterprise-title">FOR ENTERPRISE USERS...</div>
<div className="enterprise-heading">Custom</div>
<div className="enterprise-description">
Looking for way more? Anticipate having a complex integration? Just tell us more about your company
and what you&apos;re building using the form below, and we&apos;ll get back to you shortly.
</div>
<div className="enterprise-above-call-to-action"></div>
<div>
<Button
onClick={() => setIsEnterpriseRequestModelOpen(true)}
className="button outline-light enterprise-call-to-action"
>
LET&apos;S CHAT
</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);

<EnterpriseTierRequestModal
isOpen={isEnterpriseRequestModelOpen}
onClose={() => setIsEnterpriseRequestModelOpen(false)}
/>
</section>
</>
);
};

const FaqSection = () => (
<>
Expand Down