Browse Source

added countdown to main page

pull/3/head
remorses 1 year ago
parent
commit
1d39623e56
8 changed files with 146 additions and 9 deletions
  1. +7
    -2
      demos/src/constants.tsx
  2. +0
    -1
      demos/src/pages/demos/datocms.tsx
  3. +18
    -4
      demos/src/pages/demos/quovery.tsx
  4. +23
    -0
      demos/src/pages/docs/countdown.mdx
  5. +0
    -2
      demos/src/pages/index.tsx
  6. +55
    -0
      demos/src/svgs/landingCards/Countdown.tsx
  7. +1
    -0
      demos/src/svgs/landingCards/index.tsx
  8. +42
    -0
      demos/svgs/landingCards/countdown.svg

+ 7
- 2
demos/src/constants.tsx View File

@ -47,12 +47,12 @@ export const IndexCardsPaths = [
},
{
icon: landingCards.Pricing,
title: '<Pricing/>',
title: 'Pricing',
path: BASE_PATH + 'pricing',
},
{
icon: landingCards.Tweets,
title: '<TestimonialsTweets/>',
title: 'TestimonialsTweets',
path: BASE_PATH + 'testimonialsTweets',
},
{
@ -60,6 +60,11 @@ export const IndexCardsPaths = [
title: 'Banner',
path: BASE_PATH + 'banner',
},
{
icon: landingCards.Countdown,
title: 'Countdown',
path: BASE_PATH + 'countdown',
},
]
export const demosPaths = [

+ 0
- 1
demos/src/pages/demos/datocms.tsx View File

@ -75,7 +75,6 @@ const Page = () => (
</Heading>
}
subheading='HERE’S 3 SYMPTOMS TO WATCH OUT'
image={null}
floatingElement={
<GradientRect
maxW='pageContainer'

+ 18
- 4
demos/src/pages/demos/quovery.tsx View File

@ -16,8 +16,10 @@ import {
SectionTitle,
Button,
EmailForm,
Countdown,
} from 'react-landing/src'
import { Box, Stack, Image } from '@chakra-ui/core'
import { MailchimpForm } from 'react-landing/src/EmailForm'
const Page = () => (
<LandingProvider primary='white'>
@ -38,7 +40,7 @@ const Page = () => (
<a>Community</a>,
<a>Enterprise</a>,
<a>Blog</a>,
<Button px='10px'>Sign up</Button>
<Button px='10px'>Sign up</Button>,
]}
/>
<Hero
@ -62,11 +64,23 @@ const Page = () => (
]}
/>
</Stack>
<SectionTitle
<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=''/>}
/>
{/* <SectionTitle
heading='Deploy your application with ease'
subheading='Deploying an application with Qovery is as simple as pushing code with git'
image={null}
/>
/> */}
<Feature
heading='Fully integrated to git'
subheading='Qovery is fully integrated to Github, Bitbucket and Gitlab. Once you have pushed your code, Qovery launches all the necessaries steps to make your application available online.'

+ 23
- 0
demos/src/pages/docs/countdown.mdx View File

@ -0,0 +1,23 @@
export const breadcrumbs = ['Components', 'Countdown']
# Countdown
## 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>
```

+ 0
- 2
demos/src/pages/index.tsx View File

@ -193,7 +193,6 @@ const Page = () => (
id='components'
heading='Deploy your application with ease'
subheading='Deploying an application with Qovery is as simple as pushing code with git'
image={null}
/>
<LaindgCardsLinks alignSelf='center' py='40px' />
<Stack spacing='60px' bg='#5E629D'>
@ -203,7 +202,6 @@ const Page = () => (
py='100px'
heading='Explore the demos'
subheading='Deploying an application with Qovery is as simple as pushing code with git'
image={null}
cta={<LandingButton>Download The Demos Code</LandingButton>}
/>
<DemosLinks alignSelf='center' py='40px' />

+ 55
- 0
demos/src/svgs/landingCards/Countdown.tsx View File

@ -0,0 +1,55 @@
import * as React from "react";
function SvgCountdown(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 280 140" {...props}>
<defs>
<path id="countdown_svg__a" d="M0 0h280v140H0z" />
</defs>
<g fill="none" fillRule="evenodd">
<path fill="#323452" d="M0 0h280v140H0z" />
<mask id="countdown_svg__b" fill="#fff">
<use xlinkHref="#countdown_svg__a" />
</mask>
<g mask="url(#countdown_svg__b)">
<path fill="#323452" d="M0 0h280v140H0z" />
<g transform="translate(35 42)" fill="#FFF">
<rect fillOpacity={0.61} width={220} height={69} rx={4} />
<path
fillOpacity={0.453}
d="M53 39h15v2H53zM82 39h15v2H82zM112 39h15v2h-15zM145 38h15v2h-15z"
/>
<g transform="translate(62 10)" fillOpacity={0.354}>
<rect y={5} width={88} height={2} rx={1} />
<rect x={16} width={57} height={2} rx={1} />
</g>
<path
d="M56.854 35.308c1.476 0 2.625-.582 3.445-1.745.82-1.163 1.23-2.796 1.23-4.9 0-2.098-.413-3.73-1.239-4.9-.826-1.169-1.972-1.753-3.436-1.753-1.477 0-2.628.583-3.455 1.749-.826 1.166-1.239 2.795-1.239 4.887 0 2.109.412 3.747 1.235 4.913.823 1.166 1.976 1.749 3.459 1.749zm0-1.723c-.868 0-1.536-.425-2.004-1.274-.47-.85-.704-2.072-.704-3.665 0-1.577.238-2.79.712-3.64.475-.849 1.14-1.274 1.996-1.274.855 0 1.517.424 1.986 1.27.469.847.703 2.061.703 3.644 0 1.6-.231 2.822-.694 3.669-.463.847-1.128 1.27-1.995 1.27zM68.124 35V22.317h-1.96l-3.34 2.356v2.013l3.182-2.25h.15V35h1.968zM86.38 35V22.317h-1.96l-3.339 2.356v2.013l3.182-2.25h.15V35h1.968zm11.28 0v-1.767h-5.8v-.149l2.82-2.856c1.061-1.073 1.79-1.938 2.185-2.598.395-.659.593-1.325.593-2 0-1.042-.395-1.906-1.186-2.592-.791-.685-1.79-1.028-2.997-1.028-1.248 0-2.271.37-3.068 1.112-.797.74-1.195 1.694-1.195 2.86v.027h1.863v-.027c0-.68.215-1.227.646-1.643.43-.416.995-.624 1.692-.624.656 0 1.204.193 1.644.58.439.387.659.87.659 1.45 0 .469-.14.927-.422 1.376-.281.448-.844 1.111-1.688 1.99l-4.289 4.465V35h8.543zM114.854 35.308c1.476 0 2.625-.582 3.445-1.745.82-1.163 1.23-2.796 1.23-4.9 0-2.098-.413-3.73-1.239-4.9-.826-1.169-1.972-1.753-3.436-1.753-1.477 0-2.628.583-3.455 1.749-.826 1.166-1.239 2.795-1.239 4.887 0 2.109.412 3.747 1.235 4.913.823 1.166 1.976 1.749 3.459 1.749zm0-1.723c-.868 0-1.536-.425-2.004-1.274-.47-.85-.704-2.072-.704-3.665 0-1.577.238-2.79.712-3.64.475-.849 1.14-1.274 1.996-1.274.855 0 1.517.424 1.986 1.27.469.847.703 2.061.703 3.644 0 1.6-.231 2.822-.694 3.669-.463.847-1.128 1.27-1.995 1.27zm10.655 1.723c1.365 0 2.471-.408 3.318-1.222.846-.815 1.27-1.878 1.27-3.19 0-1.249-.383-2.27-1.147-3.063-.765-.794-1.75-1.191-2.958-1.191-1.19 0-2.083.383-2.68 1.151h-.15l.334-3.718h5.863v-1.758h-7.4l-.669 7.26h1.802c.246-.41.583-.73 1.01-.958a3.029 3.029 0 011.45-.343c.774 0 1.404.248 1.89.743.487.495.73 1.138.73 1.93 0 .79-.243 1.426-.73 1.906-.486.48-1.124.721-1.915.721-.698 0-1.28-.187-1.75-.562a2.17 2.17 0 01-.817-1.486h-1.872c.059 1.114.495 2.022 1.31 2.725.814.703 1.851 1.055 3.11 1.055zM146.766 35.308c1.365 0 2.47-.408 3.317-1.222.847-.815 1.27-1.878 1.27-3.19 0-1.249-.382-2.27-1.146-3.063-.765-.794-1.75-1.191-2.958-1.191-1.19 0-2.083.383-2.68 1.151h-.15l.334-3.718h5.862v-1.758h-7.4l-.668 7.26h1.802c.246-.41.583-.73 1.01-.958a3.029 3.029 0 011.45-.343c.774 0 1.404.248 1.89.743.487.495.73 1.138.73 1.93 0 .79-.243 1.426-.73 1.906-.486.48-1.125.721-1.916.721-.697 0-1.28-.187-1.749-.562a2.17 2.17 0 01-.817-1.486h-1.872c.058 1.114.495 2.022 1.31 2.725.814.703 1.85 1.055 3.11 1.055zm10.347 0c1.588 0 2.823-.6 3.705-1.798.882-1.198 1.323-2.872 1.323-5.023 0-1.547-.261-2.833-.782-3.858-.41-.85-.973-1.499-1.688-1.947-.715-.448-1.541-.672-2.478-.672-1.348 0-2.451.414-3.31 1.243-.858.83-1.287 1.892-1.287 3.186 0 1.225.394 2.236 1.182 3.033.788.797 1.786 1.195 2.993 1.195.75 0 1.415-.168 1.995-.505a3.323 3.323 0 001.327-1.42h.15c-.018 1.53-.298 2.715-.84 3.555-.542.841-1.3 1.262-2.272 1.262-.58 0-1.081-.15-1.503-.449a2.222 2.222 0 01-.861-1.221h-1.987c.194 1.037.683 1.866 1.468 2.487.785.621 1.74.932 2.865.932zm.088-6.31c-.779 0-1.415-.247-1.907-.74-.492-.491-.738-1.121-.738-1.889 0-.744.255-1.368.764-1.872.51-.504 1.143-.756 1.899-.756.75 0 1.38.255 1.89.765s.764 1.145.764 1.907c0 .75-.252 1.368-.756 1.855-.504.486-1.142.73-1.916.73z"
fillRule="nonzero"
/>
</g>
</g>
<rect
fillOpacity={0.61}
fill="#FFF"
x={125}
y={92}
width={30}
height={9}
rx={3}
/>
<rect
fillOpacity={0.354}
fill="#FFF"
x={133}
y={96}
width={14}
height={1}
rx={0.5}
/>
</g>
</svg>
);
}
export default SvgCountdown;

+ 1
- 0
demos/src/svgs/landingCards/index.tsx View File

@ -1,6 +1,7 @@
export { default as NavBar } from './NavBar'
export { default as Banner } from './Banner'
export { default as BlogPosts } from './BlogPosts'
export { default as Countdown } from './Countdown'
export { default as Faq } from './Faq'
export { default as Feature } from './Feature'
export { default as FeatureList } from './FeatureList'

+ 42
- 0
demos/svgs/landingCards/countdown.svg View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="280px" height="140px" viewBox="0 0 280 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63 (92445) - https://sketch.com -->
<title>countdown</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="280" height="140"></rect>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-853.000000, -1453.000000)">
<g id="countdown" transform="translate(853.000000, 1453.000000)">
<rect id="Rectangle" fill="#323452" x="0" y="0" width="280" height="140"></rect>
<g id="Clipped">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle"></g>
<g id="Group" mask="url(#mask-2)">
<rect id="Rectangle" fill="#323452" x="0" y="0" width="280" height="140"></rect>
<g id="Group-11" transform="translate(35.000000, 42.000000)" fill="#FFFFFF">
<rect id="Rectangle" fill-opacity="0.610085227" x="0" y="0" width="220" height="69" rx="4"></rect>
<rect id="Rectangle" fill-opacity="0.452933785" x="53" y="39" width="15" height="2"></rect>
<rect id="Rectangle-Copy-2" fill-opacity="0.452933785" x="82" y="39" width="15" height="2"></rect>
<rect id="Rectangle-Copy-3" fill-opacity="0.452933785" x="112" y="39" width="15" height="2"></rect>
<rect id="Rectangle-Copy-4" fill-opacity="0.452933785" x="145" y="38" width="15" height="2"></rect>
<g id="Group-12" transform="translate(62.000000, 10.000000)" fill-opacity="0.354212194">
<rect id="Rectangle" x="0" y="5" width="88" height="2" rx="1"></rect>
<rect id="Rectangle-Copy" x="16" y="0" width="57" height="2" rx="1"></rect>
</g>
<path d="M56.8535156,35.3076172 C58.3300781,35.3076172 59.4785156,34.7260742 60.2988281,33.5629883 C61.1191406,32.3999023 61.5292969,30.7666016 61.5292969,28.6630859 C61.5292969,26.5654297 61.1162109,24.9321289 60.2900391,23.7631836 C59.4638672,22.5942383 58.3183594,22.0097656 56.8535156,22.0097656 C55.3769531,22.0097656 54.2255859,22.5927734 53.3994141,23.7587891 C52.5732422,24.9248047 52.1601562,26.5537109 52.1601562,28.6455078 C52.1601562,30.7548828 52.5717773,32.3925781 53.3950195,33.5585938 C54.2182617,34.7246094 55.3710938,35.3076172 56.8535156,35.3076172 Z M56.8535156,33.5849609 C55.9863281,33.5849609 55.3183594,33.1601562 54.8496094,32.3105469 C54.3808594,31.4609375 54.1464844,30.2392578 54.1464844,28.6455078 C54.1464844,27.0693359 54.3837891,25.8564453 54.8583984,25.0068359 C55.3330078,24.1572266 55.9980469,23.7324219 56.8535156,23.7324219 C57.7089844,23.7324219 58.3710938,24.1557617 58.8398438,25.0024414 C59.3085938,25.8491211 59.5429688,27.0634766 59.5429688,28.6455078 C59.5429688,30.2451172 59.3115234,31.4682617 58.8486328,32.3149414 C58.3857422,33.1616211 57.7207031,33.5849609 56.8535156,33.5849609 Z M68.1241587,35 L68.1241587,22.3173828 L66.1641978,22.3173828 L62.824354,24.6728516 L62.824354,26.6855469 L66.0059946,24.4355469 L66.1554087,24.4355469 L66.1554087,35 L68.1241587,35 Z" id="01" fill-rule="nonzero"></path>
<path d="M86.3808594,35 L86.3808594,22.3173828 L84.4208984,22.3173828 L81.0810547,24.6728516 L81.0810547,26.6855469 L84.2626953,24.4355469 L84.4121094,24.4355469 L84.4121094,35 L86.3808594,35 Z M97.6602915,35 L97.6602915,33.2333984 L91.8595103,33.2333984 L91.8595103,33.0839844 L94.6807993,30.2275391 C95.7413462,29.1552734 96.4693735,28.2895508 96.8648814,27.6303711 C97.2603892,26.9711914 97.4581431,26.3046875 97.4581431,25.6308594 C97.4581431,24.5878906 97.0626353,23.7236328 96.2716196,23.0380859 C95.480604,22.3525391 94.4815806,22.0097656 93.2745493,22.0097656 C92.0265024,22.0097656 91.0040415,22.3803711 90.2071665,23.121582 C89.4102915,23.862793 89.011854,24.8164062 89.011854,25.9824219 L89.011854,25.9824219 L89.011854,26.0087891 L90.8751353,26.0087891 L90.8751353,25.9824219 C90.8751353,25.3027344 91.0904673,24.7548828 91.5211314,24.3388672 C91.9517954,23.9228516 92.5157603,23.7148438 93.2130259,23.7148438 C93.8692759,23.7148438 94.4171274,23.9082031 94.8565806,24.2949219 C95.2960337,24.6816406 95.5157603,25.1650391 95.5157603,25.7451172 C95.5157603,26.2138672 95.3751353,26.6723633 95.0938853,27.1206055 C94.8126353,27.5688477 94.2501353,28.2324219 93.4063853,29.1113281 L93.4063853,29.1113281 L89.1173228,33.5761719 L89.1173228,35 L97.6602915,35 Z" id="12" fill-rule="nonzero"></path>
<path d="M114.853516,35.3076172 C116.330078,35.3076172 117.478516,34.7260742 118.298828,33.5629883 C119.119141,32.3999023 119.529297,30.7666016 119.529297,28.6630859 C119.529297,26.5654297 119.116211,24.9321289 118.290039,23.7631836 C117.463867,22.5942383 116.318359,22.0097656 114.853516,22.0097656 C113.376953,22.0097656 112.225586,22.5927734 111.399414,23.7587891 C110.573242,24.9248047 110.160156,26.5537109 110.160156,28.6455078 C110.160156,30.7548828 110.571777,32.3925781 111.39502,33.5585938 C112.218262,34.7246094 113.371094,35.3076172 114.853516,35.3076172 Z M114.853516,33.5849609 C113.986328,33.5849609 113.318359,33.1601562 112.849609,32.3105469 C112.380859,31.4609375 112.146484,30.2392578 112.146484,28.6455078 C112.146484,27.0693359 112.383789,25.8564453 112.858398,25.0068359 C113.333008,24.1572266 113.998047,23.7324219 114.853516,23.7324219 C115.708984,23.7324219 116.371094,24.1557617 116.839844,25.0024414 C117.308594,25.8491211 117.542969,27.0634766 117.542969,28.6455078 C117.542969,30.2451172 117.311523,31.4682617 116.848633,32.3149414 C116.385742,33.1616211 115.720703,33.5849609 114.853516,33.5849609 Z M125.508924,35.3076172 C126.874159,35.3076172 127.980116,34.9003906 128.826795,34.0859375 C129.673475,33.2714844 130.096815,32.2080078 130.096815,30.8955078 C130.096815,29.6474609 129.714491,28.6264648 128.949842,27.8325195 C128.185194,27.0385742 127.199354,26.6416016 125.992323,26.6416016 C124.80287,26.6416016 123.909315,27.0253906 123.311659,27.7929688 L123.311659,27.7929688 L123.162245,27.7929688 L123.496229,24.0751953 L129.358534,24.0751953 L129.358534,22.3173828 L121.958143,22.3173828 L121.290174,29.5771484 L123.091932,29.5771484 C123.338026,29.1669922 123.67494,28.8476562 124.102674,28.6191406 C124.530409,28.390625 125.013807,28.2763672 125.55287,28.2763672 C126.326307,28.2763672 126.95619,28.5239258 127.442518,29.019043 C127.928846,29.5141602 128.17201,30.1572266 128.17201,30.9482422 C128.17201,31.7392578 127.928846,32.375 127.442518,32.8554688 C126.95619,33.3359375 126.317518,33.5761719 125.526502,33.5761719 C124.829237,33.5761719 124.246229,33.3886719 123.777479,33.0136719 C123.308729,32.6386719 123.036268,32.1435547 122.960096,31.5283203 L122.960096,31.5283203 L121.088026,31.5283203 C121.14662,32.6416016 121.583143,33.5498047 122.397596,34.2529297 C123.212049,34.9560547 124.249159,35.3076172 125.508924,35.3076172 Z" id="05" fill-rule="nonzero"></path>
<path d="M146.765625,35.3076172 C148.130859,35.3076172 149.236816,34.9003906 150.083496,34.0859375 C150.930176,33.2714844 151.353516,32.2080078 151.353516,30.8955078 C151.353516,29.6474609 150.971191,28.6264648 150.206543,27.8325195 C149.441895,27.0385742 148.456055,26.6416016 147.249023,26.6416016 C146.05957,26.6416016 145.166016,27.0253906 144.568359,27.7929688 L144.568359,27.7929688 L144.418945,27.7929688 L144.75293,24.0751953 L150.615234,24.0751953 L150.615234,22.3173828 L143.214844,22.3173828 L142.546875,29.5771484 L144.348633,29.5771484 C144.594727,29.1669922 144.931641,28.8476562 145.359375,28.6191406 C145.787109,28.390625 146.270508,28.2763672 146.80957,28.2763672 C147.583008,28.2763672 148.212891,28.5239258 148.699219,29.019043 C149.185547,29.5141602 149.428711,30.1572266 149.428711,30.9482422 C149.428711,31.7392578 149.185547,32.375 148.699219,32.8554688 C148.212891,33.3359375 147.574219,33.5761719 146.783203,33.5761719 C146.085938,33.5761719 145.50293,33.3886719 145.03418,33.0136719 C144.56543,32.6386719 144.292969,32.1435547 144.216797,31.5283203 L144.216797,31.5283203 L142.344727,31.5283203 C142.40332,32.6416016 142.839844,33.5498047 143.654297,34.2529297 C144.46875,34.9560547 145.505859,35.3076172 146.765625,35.3076172 Z M157.113417,35.3076172 C158.701307,35.3076172 159.93617,34.7084961 160.818006,33.5102539 C161.699842,32.3120117 162.14076,30.6376953 162.14076,28.4873047 C162.14076,26.9404297 161.880018,25.6542969 161.358534,24.6289062 C160.948377,23.7792969 160.385877,23.1303711 159.671034,22.6821289 C158.95619,22.2338867 158.130018,22.0097656 157.192518,22.0097656 C155.844862,22.0097656 154.741834,22.4243164 153.883436,23.253418 C153.025038,24.0825195 152.595838,25.1445312 152.595838,26.4394531 C152.595838,27.6640625 152.989881,28.6748047 153.777967,29.4716797 C154.566053,30.2685547 155.563612,30.6669922 156.770643,30.6669922 C157.520643,30.6669922 158.185682,30.4985352 158.76576,30.1616211 C159.345838,29.824707 159.788221,29.3515625 160.092909,28.7421875 L160.092909,28.7421875 L160.242323,28.7421875 C160.224745,30.2714844 159.944959,31.456543 159.402967,32.2973633 C158.860975,33.1381836 158.103651,33.5585938 157.130995,33.5585938 C156.550917,33.5585938 156.04994,33.4091797 155.628065,33.1103516 C155.20619,32.8115234 154.919081,32.4042969 154.766737,31.8886719 L154.766737,31.8886719 L152.780409,31.8886719 C152.973768,32.9257812 153.463026,33.7548828 154.248182,34.3759766 C155.033338,34.9970703 155.988417,35.3076172 157.113417,35.3076172 Z M157.201307,28.9970703 C156.42201,28.9970703 155.786268,28.7509766 155.294081,28.2587891 C154.801893,27.7666016 154.555799,27.1367188 154.555799,26.3691406 C154.555799,25.625 154.810682,25.0009766 155.320448,24.4970703 C155.830213,23.9931641 156.463026,23.7412109 157.218885,23.7412109 C157.968885,23.7412109 158.598768,23.9960938 159.108534,24.5058594 C159.618299,25.015625 159.873182,25.6513672 159.873182,26.4130859 C159.873182,27.1630859 159.621229,27.78125 159.117323,28.2675781 C158.613417,28.7539062 157.974745,28.9970703 157.201307,28.9970703 Z" id="59" fill-rule="nonzero"></path>
</g>
</g>
</g>
<rect id="Rectangle" fill-opacity="0.610085227" fill="#FFFFFF" x="125" y="92" width="30" height="9" rx="3"></rect>
<rect id="Rectangle" fill-opacity="0.354212194" fill="#FFFFFF" x="133" y="96" width="14" height="1" rx="0.5"></rect>
</g>
</g>
</g>
</svg>

Loading…
Cancel
Save