Browse Source

made countdown

pull/5/head
remorses 11 months ago
parent
commit
082efe989d
4 changed files with 105 additions and 37 deletions
  1. +16
    -4
      landing-blocks/src/Footer.tsx
  2. +2
    -0
      website/pages/_app.tsx
  3. +41
    -16
      website/pages/docs/components/countdown.mdx
  4. +46
    -17
      website/pages/docs/components/footer.mdx

+ 16
- 4
landing-blocks/src/Footer.tsx View File

@ -13,7 +13,13 @@ export function Footer({
...rest
}: FooterProps) {
return (
<PageContainer py='60px' minHeight='200px' {...rest}>
<PageContainer
fontWeight='medium'
py='60px'
minHeight='200px'
spacing='60px'
{...rest}
>
<Stack
direction={['column', null, 'row']}
justifyContent='space-evenly'
@ -36,14 +42,20 @@ export function Footer({
{k}
</Box>
{columns[k].map((x, i) => (
<Box opacity={.6} key={i}>{x}</Box>
<Box opacity={0.6} key={i}>
{x}
</Box>
))}
</Stack>
)
})}
</Stack>
<Box mt='60px' ml='60px' />
<Box width='auto' opacity={0.7} fontSize='subtext' alignSelf='center'>
<Box
width='auto'
opacity={0.6}
fontSize='subtext'
alignSelf='center'
>
Copyright © {new Date().getFullYear()} {businessName}
</Box>
</PageContainer>

+ 2
- 0
website/pages/_app.tsx View File

@ -37,6 +37,8 @@ export default function App(props) {
feature: true,
featuresList: true,
howItWorks: true,
footer: true,
banner: true,
},
},
}}

+ 41
- 16
website/pages/docs/components/countdown.mdx View File

@ -1,23 +1,48 @@
export const breadcrumbs = ['Components', 'Countdown']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Countdown,
MailchimpForm,
} from 'landing-blocks/src'
# Countdown
The countdown is useful for landing pages that still have not launched the product, usually it contains a Email Form to gather some emails.
The essential properties are
- heading
- subheading
- deadline
- cta
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider>
<Countdown
// dark
// bg='gray.800'
py='60px'
heading='We will release soon'
subheading='Check out in a few days'
deadline={
new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 60 * 3)
}
cta={<MailchimpForm url='' />}
/>
</LandingProvider>
```
<Playground iframe>
<LandingProvider bg='gray.800' primary='#547eff'>
<Countdown
dark
py='60px'
heading='We will release soon'
subheading='Check out in a few days'
deadline={
new Date(
new Date().getTime() + 1000 * 60 * 60 * 24 * 2 + 60 * 3,
)
}
cta={<MailchimpForm dark url='' />}
/>
</LandingProvider>
</Playground>

+ 46
- 17
website/pages/docs/components/footer.mdx View File

@ -1,24 +1,53 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Footer,
} from 'landing-blocks/src'
# Footer
The footer is essential in any website, it adds useful links that should not be in the navbar but are still necessary for certain users.
Usually you find links that point to
- Company social profiles
- Branding assets (useful for designers and prs)
- Other Website routes
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider primary='#FF593D'>
<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>
```
<Playground iframe>
<LandingProvider primary='#FF593D'>
<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>
</Playground>

Loading…
Cancel
Save