🚧 Landing pages building blocks https://landing-blocks.now.sh
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

213 lines
7.6 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. import React from 'react'
  2. import NextLink from 'next/link'
  3. import Head from 'next/head'
  4. import { MyNavBar } from '../components/MyNavBar'
  5. import { FiGrid, FiImage, FiLayers, FiGlobe } from 'react-icons/fi'
  6. import {
  7. Hero,
  8. Heading,
  9. LandingProvider,
  10. SubHeading,
  11. Divider,
  12. Col,
  13. Feature,
  14. HowItWorks,
  15. FeaturesList,
  16. Footer,
  17. Button as LandingButton,
  18. TestimonialsLogos,
  19. SectionTitle,
  20. PageContainer,
  21. } from 'react-landing/src'
  22. import { Box, Stack, Image, Button, Flex, Text } from '@chakra-ui/core'
  23. import * as landingCards from '../svgs/landingCards'
  24. import { IndexCardsPaths, demosPaths } from '../constants'
  25. import { MyFooter } from '../components/MyFooter'
  26. export const LaindgCardsLinks = ({ ...rest }) => {
  27. return (
  28. <PageContainer>
  29. <Stack
  30. width='auto'
  31. justify='center'
  32. alignSelf='center'
  33. flexDirection='row'
  34. flexWrap='wrap'
  35. spacing='40px'
  36. flexGrow={0}
  37. flex='0 0 auto'
  38. {...rest}
  39. >
  40. {IndexCardsPaths.map((k) => {
  41. const { icon, path, title } = k
  42. return (
  43. <Box key={k.path}>
  44. <NextLink href={path}>
  45. <Button
  46. borderRadius='8px'
  47. p='20px'
  48. mx='20px'
  49. h='auto'
  50. variant='ghost'
  51. >
  52. <Stack spacing='20px'>
  53. <Box
  54. // border='1px solid'
  55. borderColor='gray.200'
  56. borderRadius='8px'
  57. width='300px'
  58. shadow='md'
  59. as={icon}
  60. />
  61. <Text>{title}</Text>
  62. </Stack>
  63. </Button>
  64. </NextLink>
  65. </Box>
  66. )
  67. })}
  68. </Stack>
  69. </PageContainer>
  70. )
  71. }
  72. const DemosLinks = ({ ...rest }) => {
  73. return (
  74. <PageContainer>
  75. <Stack
  76. width='auto'
  77. justify='center'
  78. alignSelf='center'
  79. flexDirection='row'
  80. flexWrap='wrap'
  81. spacing='40px'
  82. {...rest}
  83. >
  84. {demosPaths.map((k) => {
  85. const { imagePath, urlPath } = k
  86. return (
  87. <Box key={urlPath}>
  88. <NextLink href={urlPath}>
  89. <Button
  90. borderRadius='8px'
  91. mx='40px'
  92. h='auto'
  93. variant='unstyled'
  94. >
  95. <Stack spacing='20px'>
  96. <Image
  97. // border='1px solid'
  98. borderColor='gray.200'
  99. borderRadius='2px'
  100. width='300px'
  101. shadow='md'
  102. src={imagePath}
  103. />
  104. {/* <Text>{title}</Text> */}
  105. </Stack>
  106. </Button>
  107. </NextLink>
  108. </Box>
  109. )
  110. })}
  111. </Stack>
  112. </PageContainer>
  113. )
  114. }
  115. const Page = () => (
  116. <LandingProvider primary='white'>
  117. <Stack spacing='60px' bg='#5E629D'>
  118. <MyNavBar />
  119. <Hero
  120. dark
  121. bullet='SUPERPOWERS FOR DEVELOPER'
  122. heading='Landing pages building blocks'
  123. subheading='Build your landing page in miunutes using composable react components'
  124. image={<img width='900px' src='/heroIllustration.svg' />}
  125. cta={
  126. <NextLink href='#demos'>
  127. <LandingButton>SEE DEMOS</LandingButton>
  128. </NextLink>
  129. }
  130. fingerprint='Completely open source'
  131. />
  132. <Divider heading='DEVELOPERS FROM GREAT COMPANIES TRUST US' dark />
  133. <FeaturesList
  134. py='0'
  135. heading=''
  136. dark
  137. features={[
  138. {
  139. heading: 'Composable',
  140. icon: (
  141. <Box
  142. style={{ strokeWidth: '1px' }}
  143. size='60px'
  144. as={FiGrid}
  145. />
  146. ),
  147. subheading:
  148. 'Multi-level approvals and custom spending limits.',
  149. },
  150. {
  151. heading: 'maintenable',
  152. icon: (
  153. <Box
  154. style={{ strokeWidth: '1px' }}
  155. size='60px'
  156. as={FiLayers}
  157. />
  158. ),
  159. subheading:
  160. 'Smart company cards, virtual cards, and invoice tracking.',
  161. },
  162. {
  163. heading: 'Open Source',
  164. icon: (
  165. <Box
  166. style={{ strokeWidth: '1px' }}
  167. size='60px'
  168. as={FiGlobe}
  169. />
  170. ),
  171. subheading:
  172. 'Real-time spending overview and receipt capture.',
  173. },
  174. {
  175. heading: 'Extensible',
  176. icon: (
  177. <Box
  178. style={{ strokeWidth: '1px' }}
  179. size='60px'
  180. as={FiImage}
  181. />
  182. ),
  183. subheading: 'Simplified bookkeeping and budget analysis.',
  184. },
  185. ]}
  186. />
  187. </Stack>
  188. <SectionTitle
  189. id='components'
  190. heading='Deploy your application with ease'
  191. subheading='Deploying an application with Qovery is as simple as pushing code with git'
  192. />
  193. <LaindgCardsLinks alignSelf='center' py='40px' />
  194. <Stack spacing='60px' bg='#5E629D'>
  195. <SectionTitle
  196. id='demos'
  197. dark
  198. py='100px'
  199. heading='Explore the demos'
  200. subheading='Deploying an application with Qovery is as simple as pushing code with git'
  201. cta={<LandingButton>Download The Demos Code</LandingButton>}
  202. />
  203. <DemosLinks alignSelf='center' py='40px' />
  204. </Stack>
  205. <MyFooter />
  206. </LandingProvider>
  207. )
  208. export default Page