mirror of
https://github.com/chinchang/web-maker.git
synced 2025-03-22 03:29:42 +01:00
pro modal
This commit is contained in:
Kushagra Gour
parent
e87d4ed213
commit
b938966a45
BIN
src/assets/pro-panda-flying.png
Normal file
BIN
src/assets/pro-panda-flying.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
BIN
src/assets/pro-panda.png
Normal file
BIN
src/assets/pro-panda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
@ -125,6 +125,9 @@ export function Icons() {
|
||||
<symbol id="eye-striked" viewBox="0 0 24 24">
|
||||
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
|
||||
</symbol>
|
||||
<symbol id="check-circle" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
|
||||
</symbol>
|
||||
<symbol id="loader-icon" viewBox="0 0 44 44">
|
||||
{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
|
||||
<g fill="none" fillRule="evenodd" strokeWidth={10}>
|
||||
@ -179,7 +182,7 @@ export function Icons() {
|
||||
);
|
||||
}
|
||||
|
||||
export const Icon = ({ name, color, size, ...rest }) => {
|
||||
export const Icon = ({ name, color = 'currentColor', size, ...rest }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -5,6 +5,8 @@ import Switch from './Switch';
|
||||
import { alertsService } from '../notifications';
|
||||
import { A, Button } from './common';
|
||||
import { useCheckout } from '../hooks/useCheckout';
|
||||
import { Text } from './Text';
|
||||
import { Icon } from './Icons';
|
||||
|
||||
export function Pro({ user }) {
|
||||
const hasCheckoutLoaded = useCheckout();
|
||||
@ -24,12 +26,71 @@ export function Pro({ user }) {
|
||||
}, [hasCheckoutLoaded]);
|
||||
return (
|
||||
<VStack gap={4} align="stretch">
|
||||
<A
|
||||
class="btn lemonsqueezy-button"
|
||||
href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
|
||||
>
|
||||
Go <ProBadge />
|
||||
</A>
|
||||
<Stack gap={2} align="stretch">
|
||||
<Card
|
||||
price="Free"
|
||||
name="Starter"
|
||||
features={[
|
||||
'Unlimited private creations',
|
||||
'2 Public creations',
|
||||
'1 Files mode creation'
|
||||
]}
|
||||
/>
|
||||
<Card
|
||||
bg="#674dad"
|
||||
price="$6/mo"
|
||||
name="Pro"
|
||||
action={
|
||||
<A
|
||||
class="btn btn--primary lemonsqueezy-button d-f jc-c ai-c"
|
||||
style="gap:0.2rem"
|
||||
href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
|
||||
>
|
||||
Go <ProBadge />
|
||||
</A>
|
||||
}
|
||||
features={[
|
||||
'Unlimited private creations',
|
||||
'Unlimited public creations',
|
||||
'Unlimited files mode creations',
|
||||
'Asset hosting',
|
||||
'Priority support',
|
||||
'No Ads'
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
|
||||
const Card = ({ bg, name, price, action, features }) => {
|
||||
return (
|
||||
<div class="plan-card" style={{ background: bg }}>
|
||||
<VStack gap={2} align="stretch" justify="flex-start">
|
||||
<VStack gap={0} align="stretch" justify="flex-start">
|
||||
<Text transform="uppercase" weight="600">
|
||||
{name}
|
||||
</Text>
|
||||
<Text size="5" weight="800" appearance="primary">
|
||||
{' '}
|
||||
{price}
|
||||
</Text>
|
||||
</VStack>
|
||||
{action}
|
||||
{!action && (
|
||||
<a class="btn" aria-hidden="true" style="visibility:hidden">
|
||||
s
|
||||
</a>
|
||||
)}
|
||||
<VStack gap={1} align="flex-start">
|
||||
{features.map(f => (
|
||||
<HStack gap={1} align="center">
|
||||
<Icon name="check-circle" size="1.4rem" />
|
||||
{f}
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -18,6 +18,17 @@ const appearanceStyles = {
|
||||
}
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
0: '0.875rem',
|
||||
1: '1rem',
|
||||
2: '1.125rem',
|
||||
3: '1.25rem',
|
||||
4: '1.5rem',
|
||||
5: '2rem',
|
||||
6: '2.5rem',
|
||||
7: '3rem',
|
||||
8: '4rem'
|
||||
};
|
||||
export const Text = forwardRef(
|
||||
(
|
||||
{
|
||||
@ -29,6 +40,7 @@ export const Text = forwardRef(
|
||||
letterSpacing = 0,
|
||||
lineHeight = 1.4,
|
||||
align = 'left',
|
||||
transform,
|
||||
classes = '',
|
||||
children
|
||||
},
|
||||
@ -38,8 +50,8 @@ export const Text = forwardRef(
|
||||
|
||||
const styles = {
|
||||
letterSpacing: letterSpacing,
|
||||
fontSize: `var(--font-size-${size})`,
|
||||
|
||||
fontSize: sizes[size],
|
||||
textTransform: transform,
|
||||
fontWeight: weight,
|
||||
textAlign: align,
|
||||
lineHeight: lineHeight,
|
||||
|
||||
@ -1827,6 +1827,7 @@ export default class App extends Component {
|
||||
<Modal
|
||||
show={this.state.isProModalOpen}
|
||||
closeHandler={() => this.setState({ isProModalOpen: false })}
|
||||
extraClasses="pro-modal"
|
||||
>
|
||||
<Pro user={this.state.user} />
|
||||
</Modal>
|
||||
|
||||
@ -10,11 +10,14 @@
|
||||
--color-focus-outline: #d3a447;
|
||||
--color-form-control-bg: #2c214b;
|
||||
|
||||
--color-heading: #efecf9;
|
||||
--color-heading: #fff;
|
||||
--color-text-light: #b0a5d6;
|
||||
--color-text-lightest-final: #787090;
|
||||
--clr-brand: purple;
|
||||
|
||||
--color-pro-1: #1fffb3;
|
||||
--color-pro-2: #f2ff00;
|
||||
|
||||
--footer-height: 37px;
|
||||
--console-height: 32px;
|
||||
|
||||
@ -128,11 +131,13 @@ button {
|
||||
.ai-c {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-h-center {
|
||||
.flex-h-center,
|
||||
.jc-c {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-h-end {
|
||||
.flex-h-end,
|
||||
.jc-fe {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -395,7 +400,7 @@ a > svg {
|
||||
font-size: inherit;
|
||||
background: transparent;
|
||||
border: 3px solid var(--color-button);
|
||||
border-radius: 5px;
|
||||
border-radius: 2rem;
|
||||
padding: 9px 15px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.2px;
|
||||
@ -803,6 +808,7 @@ body > #demo-frame {
|
||||
margin-left: 10px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.9);
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(180deg, hsl(0, 0%, 25%) 0, hsl(0, 0%, 13%) 100%);
|
||||
box-shadow: inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
@ -2175,7 +2181,7 @@ while the theme CSS file is loading */
|
||||
.pro-badge {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.3rem;
|
||||
background-color: #fff91f;
|
||||
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
|
||||
border-radius: 1rem;
|
||||
font-size: 0.7em;
|
||||
color: #222;
|
||||
@ -2191,6 +2197,14 @@ while the theme CSS file is loading */
|
||||
.templates-container .saved-item-tile {
|
||||
margin: 0;
|
||||
}
|
||||
.pro-modal {
|
||||
background: url('/assets/pro-panda-flying.png') no-repeat;
|
||||
background-position: bottom right;
|
||||
}
|
||||
.plan-card {
|
||||
border-radius: 0.4rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
font-size: 70%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user