Browse Source

added gumroad button

pull/3/head
remorses 1 year ago
parent
commit
a76cb7f65a
6 changed files with 219 additions and 3 deletions
  1. +19
    -3
      README.md
  2. +133
    -0
      demos/src/pages/demos/gumroad.tsx
  3. +1
    -0
      react-landing/package.json
  4. +60
    -0
      react-landing/src/GumroadButton.tsx
  5. +1
    -0
      react-landing/src/index.tsx
  6. +5
    -0
      yarn.lock

+ 19
- 3
README.md View File

@ -8,10 +8,26 @@
<pre>npm i react-landing</pre>
</div>
TODO every pagecontainer shoud forward the partent theme and modify it for his children, so that you can change the buttons primary colors
TODO animate property is given to the pagecontainer, the useFaded defaults to no animation, you can add animations to certain sections with animate prop
TODO animate prop can be 'true' to use default animation, 'fadeDown', wobble, fast, slow, ...
TODO add types to every section component, these are all PageCOntainerProps + { ... }
TODO add more examples in docs pages, one example for
- light mode
- dark mode
- with decoration element
- with animation
- with custom animation elements
TODO email for element components like Heading, Subheading, Button, EmailForm, PageContainer
TODO make the landing page copy, add features and benefits, detailed footer
TODO add gumroad element to the landing page to buy the demos code
TODO team
TODO banner
TODO email capture
TODO testimonials
TODO secondary buttons
TODO featuresGrid not using grid or grid polyfill

+ 133
- 0
demos/src/pages/demos/gumroad.tsx View File

@ -0,0 +1,133 @@
import React from 'react'
import Head from 'next/head'
import {
Hero,
Heading,
LandingProvider,
Subheading,
Divider,
Col,
Feature,
HowItWorks,
FeaturesList,
NavBar,
Footer,
Banner,
Button,
Pricing,
TestimonialsTweets,
EmailForm,
GumroadButton,
} from 'react-landing/src'
import { GradientCurtains } from 'react-landing/src/decorations'
import { Link, Box } from '@chakra-ui/core'
import { FiCheck } from 'react-icons/fi'
const Page = () => (
<LandingProvider primary='#2D7FF9'>
<NavBar
logo={<img width='120px' src='/airtable/logo.svg' />}
navs={[
<a>Features</a>,
<a>Use Cases</a>,
<a>Pricing</a>,
<a>About Us</a>,
<a>Login</a>,
]}
/>
<Hero
heading='Create, your way'
subheading='Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.'
image={<img width='500px' src='/airtable/hero.png' />}
cta={<GumroadButton singlePurchase productId='demo'></GumroadButton>}
fingerprint='Already using Airtable? Sign in'
/>
<Feature
heading='Unleash your team’s creative potential with Blocks'
subheading='Airtable Blocks give you a creative palette of app-like functionality that you can mix and match to create the perfect workflow for your team.'
image={<img src='/airtable/feature1.jpg' width='500px' />}
flip
/>
<TestimonialsTweets
heading="Don't you trust me?"
subheading='Trust them'
tweets={[
'933354946111705097',
'1246480107604078592',
'https://twitter.com/naval/status/806034795658522624?s=21',
// '933354946111705097',
// '933354946111705097',
]}
/>
<Pricing
features={[
'Records per base',
'Attachment space per base',
'Revision and snapshot history',
'Rich field types including file attachments, checkboxes, dropdowns, and more',
'Grid, calendar, form, kanban, and gallery views',
'Realtime collaboration and commenting',
]}
prices={[
{
heading: 'FREE',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks'],
price: 'Free',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PLUS',
subheading: 'Essential Features',
features: [
'Unlimited',
'1200',
'2Gb',
'2 Weeks',
<Box as={FiCheck} />,
],
price: '$10',
background: '#D1F0FD',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PRO',
subheading: 'Essential Features',
features: [
'Unlimited',
'1200',
'2Gb',
'2 Weeks',
<Box as={FiCheck} />,
<Box as={FiCheck} />,
],
price: '$20',
background: '#FFEAB6',
cta: <Link color='blue.600'>Get started</Link>,
},
]}
/>
<Footer
businessName='Prismic'
columns={{
Developers: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Company: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Product: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
}}
/>
</LandingProvider>
)
export default Page

+ 1
- 0
react-landing/package.json View File

@ -51,6 +51,7 @@
"react-icons": "^3.9.0",
"react-intersection-observer": "^8.26.1",
"react-mailchimp-subscribe": "^2.1.0",
"react-script-hook": "^1.0.17",
"react-twitter-embed": "^3.0.3"
}
}

+ 60
- 0
react-landing/src/GumroadButton.tsx View File

@ -0,0 +1,60 @@
import React, { FC, Fragment, forwardRef } from 'react'
import {
Button as B,
HeadingProps,
ButtonProps,
Box,
useColorMode,
Link,
} from '@chakra-ui/core'
import { Children } from 'react'
import get from 'lodash.get'
import Color from 'color-js'
import { useTheme } from 'emotion-theming'
import { useColor } from './support'
import useScript from 'react-script-hook'
export type GumroadButtonProps = {
singlePurchase?: boolean
productId: string
}
export const GumroadButton = forwardRef(
(
{ singlePurchase = false, productId='demo', ...props }: GumroadButtonProps,
ref,
) => {
const [loading, error] = useScript({
src: 'https://gumroad.com/js/gumroad.js',
})
const { colorMode } = useColorMode()
if (loading) {
return (
<Box
borderRadius='6px'
width='230px'
h='50px'
bg={
{ light: 'gray.100', dark: 'rgba(255,255,255,.1)' }[
colorMode
]
}
/>
)
}
return (
<a
ref={ref as any}
className='gumroad-button'
href={`https://gum.co/${productId}?wanted=true`}
target='_blank'
data-gumroad-single-product={singlePurchase ? 'true' : 'false'}
{...props}
>
Buy Now My Product
</a>
)
// return <B {...props} />
},
)

+ 1
- 0
react-landing/src/index.tsx View File

@ -21,6 +21,7 @@ export { Heading } from './Heading'
export { EmailForm, MailchimpForm } from './EmailForm'
export { Subheading } from './Subheading'
export { Button } from './Button'
export { GumroadButton } from './GumroadButton'
export { Bullet } from './Bullet'
export { Divider } from './Divider'
export * from './layout'

+ 5
- 0
yarn.lock View File

@ -8977,6 +8977,11 @@ react-proptype-conditional-require@^1.0.4:
resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
integrity sha1-acLVdB5t9eCPIw82u8KUTuEiJVU=
react-script-hook@^1.0.17:
version "1.0.17"
resolved "https://registry.yarnpkg.com/react-script-hook/-/react-script-hook-1.0.17.tgz#9c3c3bd196d677d48838ac09134c912d555c67a9"
integrity sha512-maLLOqAfHcbcQPwDo9wuqdCzHSbyL/uDhULtb7Yrvh8IrbNN24LRXluHnti8Y+bk0LNn3s15esl3wDVeCMjbIg==
react-select@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"

Loading…
Cancel
Save