update pay function
This commit is contained in:
371
boilerplate-chakra-pro-main/components/landing/faq.tsx
Normal file
371
boilerplate-chakra-pro-main/components/landing/faq.tsx
Normal file
@@ -0,0 +1,371 @@
|
||||
/*eslint-disable*/
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Flex,
|
||||
Text,
|
||||
Box,
|
||||
SimpleGrid,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
return (
|
||||
<Box
|
||||
w="100%"
|
||||
pt={{ base: '90', md: '100px', xl: '140px' }}
|
||||
bg="linear-gradient(180deg, #F8FAFC 0%, rgba(255, 255, 255, 0) 47.33%)"
|
||||
id="faqs"
|
||||
bgSize="cover"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
mx="auto"
|
||||
mb="40px"
|
||||
maxW={{ base: '90%', lg: '62%' }}
|
||||
justify="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
textAlign={{ base: 'center', lg: 'center' }}
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
color="brand.500"
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
FREQUENTLY ASKED QUESTIONS
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
mx="auto"
|
||||
color={textColor}
|
||||
fontWeight="800"
|
||||
fontSize={{ base: '30px', md: '38px', lg: '38px', xl: '38px' }}
|
||||
lineHeight={{ base: '38px', md: '50px', lg: '50px', xl: '50px' }}
|
||||
mb={{ base: '10px', md: '20px' }}
|
||||
>
|
||||
Frequently asked questions
|
||||
</Text>
|
||||
<Text
|
||||
mx="auto"
|
||||
color="gray.600"
|
||||
fontSize={{ base: 'md', md: 'md', xl: 'lg' }}
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
mb="30px"
|
||||
maxW={{ base: '100%', md: '80%', lg: '60%' }}
|
||||
>
|
||||
Looking for something else? Chat with us via{' '}
|
||||
<Link href="mailto:hello@horizon-ui.com ">hello@horizon-ui.com</Link>{' '}
|
||||
and we will try our best to help you with your questions!
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box
|
||||
w="100%"
|
||||
maxW={{ base: '100%', md: '80%', lg: '860px' }}
|
||||
mx="auto"
|
||||
mb="120px"
|
||||
>
|
||||
<Accordion allowMultiple>
|
||||
<AccordionItem borderTop="0px solid">
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
What is Horizon UI Boilerplate?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
Is Horizon UI Boilerplate Free?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
You can learn more on our{' '}
|
||||
<Link href="/pricing">
|
||||
<Text as="span" fontWeight={'bold'} color="brand.500">
|
||||
Pricing Page.
|
||||
</Text>
|
||||
</Link>{' '}
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
How does Horizon UI Boilerplate work?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
How can I use Horizon UI Boilerplate?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
Is Horizon UI Boilerplate suitable for all academic levels?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
Can I trust the quality of the essays generated by Essay
|
||||
Builder AI?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
<AccordionItem>
|
||||
<Text>
|
||||
<AccordionButton
|
||||
py="25px"
|
||||
_hover={{ bg: 'none' }}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'700'}
|
||||
color={textColor}
|
||||
_active={{ boxShadow: 'none' }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<Flex as="h3" flex={1} textAlign="left">
|
||||
Is the content generated by Horizon UI Boilerplate plagiarism-free?
|
||||
</Flex>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</Text>
|
||||
<AccordionPanel pb={4}>
|
||||
<SimpleGrid gap="40px" columns={1}>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
This is an awesome example of how you can use our accordion
|
||||
component for your FAQs section to provide clear, concise
|
||||
answers while maintaining a clean and engaging user interface.
|
||||
The intuitive design allows users to easily navigate through
|
||||
common questions, expanding each section to find detailed
|
||||
information without overwhelming them with text. It's an ideal
|
||||
way to streamline your website's content and enhance user
|
||||
experience, ensuring that visitors have quick access to the
|
||||
answers they need.
|
||||
</Text>
|
||||
</SimpleGrid>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
133
boilerplate-chakra-pro-main/components/landing/feature-one.tsx
Normal file
133
boilerplate-chakra-pro-main/components/landing/feature-one.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import InnerContent from '@/components/layout/innerContent';
|
||||
import image from '@/public/img/features/feature-one.png';
|
||||
import {
|
||||
Flex,
|
||||
Link,
|
||||
Button,
|
||||
Icon,
|
||||
Image,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { MdChevronRight } from 'react-icons/md';
|
||||
|
||||
export default function FeatureOne() {
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
const textColorSecondary = useColorModeValue('gray.600', 'white');
|
||||
return (
|
||||
<Flex
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
pt={{ base: '100px', md: '140px', lg: '140px' }}
|
||||
pb={{ base: '100px', md: '140px', lg: '140px' }}
|
||||
overflow="hidden"
|
||||
bgSize="cover"
|
||||
position="relative"
|
||||
>
|
||||
<InnerContent px={{ base: '20px', md: '40px', xl: '0px' }}>
|
||||
<Flex
|
||||
align={'center'}
|
||||
direction={{ base: 'column', lg: 'row' }}
|
||||
maxW="100%"
|
||||
justifyContent="space-between"
|
||||
columnGap="50px"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
my="auto"
|
||||
maxW="100%"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
bg="brand.500"
|
||||
bgClip="text"
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
YOUR STARTUP FEATURES
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
fontWeight="800"
|
||||
color={textColor}
|
||||
fontSize={{ base: '30px', md: '40px', xl: '42px' }}
|
||||
lineHeight={{ base: '40px', md: '50px', lg: '52px' }}
|
||||
mb="20px"
|
||||
w={{ base: '100%', md: '80%', lg: '100%' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
maxW={{ base: '100%', md: 'unset' }}
|
||||
>
|
||||
Ready to use Web App
|
||||
<br />
|
||||
for your Startup project
|
||||
</Text>
|
||||
<Text
|
||||
color={textColorSecondary}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
fontSize={{ base: 'sm', md: 'md', xl: 'md' }}
|
||||
w={{ base: '94%', md: '94%', lg: '97%' }}
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
mb="30px"
|
||||
>
|
||||
It’s so easy to beat your endless procrastination when you have
|
||||
all the necessary resources to get that project done and start to
|
||||
generate your startup’s first dollar in just a few days.
|
||||
</Text>
|
||||
<Flex
|
||||
align="center"
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
mb={{ md: '0px', lg: '30px' }}
|
||||
justifyContent={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Link href="/dashboard/signin" me={{ base: '0px', md: '14px' }}>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '230px' }}
|
||||
h="54px"
|
||||
>
|
||||
Get started now
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/dashboard/signin">
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="setup"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '160px' }}
|
||||
h="54px"
|
||||
>
|
||||
Try it for Free
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Image
|
||||
alt=" "
|
||||
src={image.src}
|
||||
w={{ base: '100%', lg: '415px', xl: '575px' }}
|
||||
mt={{ base: '20px', md: '50px', lg: '0px' }}
|
||||
/>
|
||||
</Flex>
|
||||
</InnerContent>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
130
boilerplate-chakra-pro-main/components/landing/feature-three.tsx
Normal file
130
boilerplate-chakra-pro-main/components/landing/feature-three.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import InnerContent from '@/components/layout/innerContent';
|
||||
import image from '@/public/img/features/feature-three.png';
|
||||
import {
|
||||
Flex,
|
||||
Link,
|
||||
Button,
|
||||
Icon,
|
||||
Image,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { MdChevronRight } from 'react-icons/md';
|
||||
|
||||
export default function FeatureOne() {
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
const textColorSecondary = useColorModeValue('gray.600', 'white');
|
||||
return (
|
||||
<Flex
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
pb={{ base: '100px', md: '140px', lg: '140px' }}
|
||||
overflow="hidden"
|
||||
bgSize="cover"
|
||||
position="relative"
|
||||
>
|
||||
<InnerContent px={{ base: '20px', md: '40px', xl: '0px' }}>
|
||||
<Flex
|
||||
align={'center'}
|
||||
direction={{ base: 'column', lg: 'row' }}
|
||||
maxW="100%"
|
||||
justifyContent="space-between"
|
||||
columnGap="50px"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
my="auto"
|
||||
maxW="100%"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
bg="linear-gradient(89deg, #3D1DFF 9.03%, #6147FF 10.23%, #D451FF 20.91%, #EC458D 30.02%, #FFCA8B 44.68%)"
|
||||
bgClip="text"
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
DISCOVER MORE WITH PRO
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
fontWeight="800"
|
||||
color={textColor}
|
||||
fontSize={{ base: '26px', md: '40px', xl: '42px' }}
|
||||
lineHeight={{ base: '36px', md: '50px', lg: '52px' }}
|
||||
mb="20px"
|
||||
w={{ base: '100%', md: '80%', lg: '100%' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
maxW={{ base: '100%', md: 'unset' }}
|
||||
>
|
||||
Generate an Outstanding SaaS without limitations
|
||||
</Text>
|
||||
<Text
|
||||
color={textColorSecondary}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
fontSize={{ base: 'sm', md: 'md', xl: 'md' }}
|
||||
w={{ base: '100%', md: '80%', lg: '97%' }}
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
mb="30px"
|
||||
>
|
||||
Give life to your startup project by choosing from a premium pack
|
||||
of top-notch landing sections like Hero, Features, Call to
|
||||
Actions, Pricing, Navigations, Auth pages, Dashboard, and so on.
|
||||
</Text>
|
||||
<Flex
|
||||
align="center"
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
mb={{ md: '0px', lg: '30px' }}
|
||||
justifyContent={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Link href="/pricing" me={{ base: '0px', md: '14px' }}>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '210px' }}
|
||||
h="54px"
|
||||
>
|
||||
Get started with PRO
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/pricing">
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="setup"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '190px' }}
|
||||
h="54px"
|
||||
>
|
||||
See pricing Plans
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Image
|
||||
alt=" "
|
||||
src={image.src}
|
||||
w={{ base: '100%', lg: '415px', xl: '575px' }}
|
||||
mt={{ base: '20px', md: '50px', lg: '0px' }}
|
||||
/>
|
||||
</Flex>
|
||||
</InnerContent>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
129
boilerplate-chakra-pro-main/components/landing/feature-two.tsx
Normal file
129
boilerplate-chakra-pro-main/components/landing/feature-two.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import InnerContent from '@/components/layout/innerContent';
|
||||
import image from '@/public/img/features/feature-two.png';
|
||||
import {
|
||||
Flex,
|
||||
Link,
|
||||
Button,
|
||||
Icon,
|
||||
Image,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { MdChevronRight } from 'react-icons/md';
|
||||
|
||||
export default function FeatureOne() {
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
const textColorSecondary = useColorModeValue('gray.600', 'white');
|
||||
return (
|
||||
<Flex
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
pb={{ base: '100px', md: '140px', lg: '140px' }}
|
||||
overflow="hidden"
|
||||
bgSize="cover"
|
||||
position="relative"
|
||||
>
|
||||
<InnerContent px={{ base: '20px', md: '40px', xl: '0px' }}>
|
||||
<Flex
|
||||
align={'center'}
|
||||
direction={{ base: 'column-reverse', lg: 'row' }}
|
||||
maxW="100%"
|
||||
justifyContent="space-between"
|
||||
columnGap="90px"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Image
|
||||
alt=" "
|
||||
src={image.src}
|
||||
w={{ base: '100%', lg: '415px', xl: '575px' }}
|
||||
mt={{ base: '20px', md: '50px', lg: '0px' }}
|
||||
/>
|
||||
<Flex
|
||||
direction="column"
|
||||
my="auto"
|
||||
maxW="100%"
|
||||
alignItems={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
bg="linear-gradient(89deg, #3D1DFF 9.03%, #6147FF 10.23%, #D451FF 20.91%, #EC458D 30.02%, #FFCA8B 44.68%)"
|
||||
bgClip="text"
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
mb="10px"
|
||||
>
|
||||
EXCLUSIVE PRO FEATURE
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
fontWeight="800"
|
||||
color={textColor}
|
||||
fontSize={{ base: '30px', md: '40px', xl: '42px' }}
|
||||
lineHeight={{ base: '40px', md: '50px', lg: '52px' }}
|
||||
mb="20px"
|
||||
w={{ base: '100%', md: '70%', lg: '100%' }}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
maxW={{ base: '100%', md: 'unset' }}
|
||||
>
|
||||
Advanced Platform for your Startup Web App
|
||||
</Text>
|
||||
<Text
|
||||
color={textColorSecondary}
|
||||
textAlign={{ base: 'center', lg: 'left' }}
|
||||
fontSize={{ base: 'sm', md: 'md', xl: 'md' }}
|
||||
w={{ base: '100%', md: '80%', lg: '100%' }}
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
mb="30px"
|
||||
>
|
||||
Horizon UI Boilerplate comes with a premium pack that includes all
|
||||
the necessary resources to launch your startup, like the fully
|
||||
coded web app pages, landing, database, payments and so on.
|
||||
</Text>
|
||||
<Flex
|
||||
align="center"
|
||||
direction={{ base: 'column', md: 'row' }}
|
||||
mb={{ md: '0px', lg: '30px' }}
|
||||
justifyContent={{ base: 'center', lg: 'unset' }}
|
||||
>
|
||||
<Link href="/pricing" me={{ base: '0px', md: '14px' }}>
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '210px' }}
|
||||
h="54px"
|
||||
>
|
||||
Get started now
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/pricing">
|
||||
<Button
|
||||
py="20px"
|
||||
px="16px"
|
||||
fontSize="sm"
|
||||
variant="setup"
|
||||
borderRadius="45px"
|
||||
mb={{ base: '20px', md: '0px' }}
|
||||
w={{ base: '335px', md: '190px' }}
|
||||
h="54px"
|
||||
>
|
||||
Try it for Free
|
||||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</InnerContent>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
294
boilerplate-chakra-pro-main/components/landing/first-section.tsx
Normal file
294
boilerplate-chakra-pro-main/components/landing/first-section.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
import { HeroBg } from '@/components/icons/HeroBg';
|
||||
import dashboard from '@/public/img/first-section/dashboard-world-greatest-section.png';
|
||||
import left from '@/public/img/first-section/left-image-worlds-greatest.png';
|
||||
import right from '@/public/img/first-section/right-image-worlds-greatest.png';
|
||||
import nextjs from '@/public/img/hero/nextjs.png';
|
||||
import openai from '@/public/img/hero/openai.png';
|
||||
import stripe from '@/public/img/hero/stripe.png';
|
||||
import supabase from '@/public/img/hero/supabase.png';
|
||||
import chakra from '@/public/img/hero/chakra.png';
|
||||
import userauth from '@/public/img/hero/user-auth.png';
|
||||
import {
|
||||
Box,
|
||||
Icon,
|
||||
Flex,
|
||||
Image,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
SimpleGrid,
|
||||
} from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
|
||||
export default function FirstSection() {
|
||||
const brandColorPrice = useColorModeValue('brand.500', 'white');
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
return (
|
||||
<Flex
|
||||
zIndex="2"
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
bgSize="cover"
|
||||
position="relative"
|
||||
pt={{ base: '90px', md: '100px', xl: '100px' }}
|
||||
>
|
||||
<SimpleGrid
|
||||
columns={{ base: 1, md: 3, xl: 6 }}
|
||||
w="100%"
|
||||
gap="16px"
|
||||
maxW="1170px"
|
||||
mx="auto"
|
||||
mb="86px"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={nextjs.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="nextjs logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
NextJS 14
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={stripe.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="stripe logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
Stripe
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={supabase.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="supabase logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
Supabase
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={chakra.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="chakra ui logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
Chakra UI
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={openai.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="openai logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
AI Integration
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
justify="center"
|
||||
border="1px solid"
|
||||
borderColor="secondaryGray.400"
|
||||
borderRadius="14px"
|
||||
py="39px"
|
||||
>
|
||||
<Image
|
||||
borderRadius="12px"
|
||||
mb="20px"
|
||||
src={userauth.src}
|
||||
w="60px"
|
||||
h="60px"
|
||||
alt="auth0 logo"
|
||||
/>
|
||||
<Text fontWeight="bold" color={textColor}>
|
||||
User Auth
|
||||
</Text>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
<Flex
|
||||
direction="column"
|
||||
px={{ base: '20px', md: '40px', xl: '0px' }}
|
||||
maxW="unset"
|
||||
>
|
||||
<Flex direction="column" width="stretch">
|
||||
<Flex
|
||||
direction="column"
|
||||
mx="auto"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
textAlign={{ base: 'center', lg: 'center' }}
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
color={brandColorPrice}
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
BEST AI NEXTJS BOILERPLATE
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
textAlign={{ base: 'center' }}
|
||||
color={textColor}
|
||||
fontWeight="800"
|
||||
fontSize={{ base: '30px', md: '48px', lg: '48px', xl: '58px' }}
|
||||
lineHeight={{ base: '38px', md: '60px', lg: '60px', xl: '70px' }}
|
||||
mb={{ base: '20px', md: '30px' }}
|
||||
w={{ base: '100%', md: '80%', lg: '60%', xl: '50%' }}
|
||||
mx="auto"
|
||||
>
|
||||
Your All-in-One <br />
|
||||
Startup Boilerplate
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontSize={{ base: 'sm', md: 'md', xl: 'lg' }}
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
w={{
|
||||
base: '100%',
|
||||
md: '80%',
|
||||
lg: '80%',
|
||||
xl: '56%',
|
||||
'2xl': '54%',
|
||||
}}
|
||||
>
|
||||
Tap into the power of Artificial Intelligence for your startup
|
||||
needs with Horizon UI Boilerplate, the most complex NextJS
|
||||
boilerplate to launch your web app project in just a few moments.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
position={'relative'}
|
||||
justifyContent="center"
|
||||
mt={{ base: '16px', md: '10px', lg: '40px' }}
|
||||
maxW={{ base: '335px', md: '1170px' }}
|
||||
mx="auto"
|
||||
>
|
||||
<Icon
|
||||
as={HeroBg}
|
||||
position="absolute"
|
||||
mx="auto"
|
||||
w={{
|
||||
base: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
xl: '1800px',
|
||||
}}
|
||||
h={{
|
||||
base: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
xl: '820px',
|
||||
}}
|
||||
left="50%"
|
||||
transform="translate(-50%,0px)"
|
||||
top={{
|
||||
base: '-130px',
|
||||
md: '-90px',
|
||||
lg: '-100px',
|
||||
xl: '-80px',
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src={dashboard.src}
|
||||
zIndex={'1'}
|
||||
alt=""
|
||||
maxH="max-content"
|
||||
w="100%"
|
||||
maxW={{ base: '335px', md: '1170px' }}
|
||||
borderRadius="8px"
|
||||
boxShadow="0px 26.83487px 155.64224px -46.15597px #CBD5E0"
|
||||
/>
|
||||
<Image
|
||||
zIndex={'1'}
|
||||
src={left.src}
|
||||
alt=""
|
||||
position={'absolute'}
|
||||
w={{ base: '62px', md: '122px', xl: '224px' }}
|
||||
left={{ base: '1px', md: '5px', lg: '10px', xl: '-20px' }}
|
||||
top={{ base: '33px', md: '75px', lg: '36px', xl: '45px' }}
|
||||
boxShadow="0px 10.1683px 61.0098px rgba(0, 0, 0, 0.05)"
|
||||
borderRadius="8px"
|
||||
/>
|
||||
<Image
|
||||
src={right.src}
|
||||
alt=""
|
||||
position="absolute"
|
||||
right={{ base: '-16px', md: '-30px', lg: '-80px', xl: '-53px' }}
|
||||
top={{ base: '48px', md: '105px', lg: '44px', xl: '98px' }}
|
||||
w={{ base: '286px', md: '592px', lg: '806px', xl: '1026px' }}
|
||||
borderRadius="8px"
|
||||
zIndex={'1'}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
183
boilerplate-chakra-pro-main/components/landing/hero.tsx
Normal file
183
boilerplate-chakra-pro-main/components/landing/hero.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import imageLeft from '@/public/img/hero/left-image.png';
|
||||
import imageRight from '@/public/img/hero/right-image.png';
|
||||
import { Button, Image, Icon, Flex, Link, Text } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { IoIosStar } from 'react-icons/io';
|
||||
import { MdChevronRight } from 'react-icons/md';
|
||||
|
||||
export default function hero() {
|
||||
return (
|
||||
<Flex
|
||||
mx="auto"
|
||||
mt={{ base: '90px', lg: '114px' }}
|
||||
w="96vw"
|
||||
h={{
|
||||
base: '560px',
|
||||
md: '580px',
|
||||
lg: '580px',
|
||||
xl: '620px',
|
||||
'2xl': '84vh',
|
||||
}}
|
||||
overflow="hidden"
|
||||
alignItems="center"
|
||||
alignContent="center"
|
||||
position={'relative'}
|
||||
maxW="100%"
|
||||
direction={{ base: 'column' }}
|
||||
bg="var(--linear-3, radial-gradient(98.96% 75.83% at 50% 0%, #948FE8 0%, #363285 22.92%, #110D5B 42.71%, #050327 88.54%))"
|
||||
borderRadius={{ base: '20px', md: '30px' }}
|
||||
>
|
||||
<Flex h="100%" w="100%">
|
||||
<Flex
|
||||
maxW="100%"
|
||||
h="100%"
|
||||
direction="row"
|
||||
width="stretch"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
alignContent="center"
|
||||
mb={{ base: '0px', md: '30px' }}
|
||||
>
|
||||
<Image
|
||||
position="absolute"
|
||||
left="0"
|
||||
display={{ base: 'none', xl: 'unset' }}
|
||||
src={imageLeft.src}
|
||||
alt=" "
|
||||
w={{ base: '90%', md: '100%', lg: '30%', xl: '30%' }}
|
||||
/>
|
||||
<Flex direction="column" mx="auto" textAlign="center">
|
||||
<Text
|
||||
as="h1"
|
||||
color="white"
|
||||
zIndex="100"
|
||||
fontSize={{
|
||||
base: '32px',
|
||||
md: '44px',
|
||||
lg: '44px',
|
||||
xl: '44px',
|
||||
'2xl': '58px',
|
||||
}}
|
||||
lineHeight={{
|
||||
base: '40px',
|
||||
md: '54px',
|
||||
lg: '54px',
|
||||
xl: '54px',
|
||||
'2xl': '68px',
|
||||
}}
|
||||
w={{
|
||||
base: '90%',
|
||||
md: '80%',
|
||||
lg: '60%',
|
||||
xl: '50%',
|
||||
'2xl': '50%',
|
||||
'3xl': '50%',
|
||||
}}
|
||||
alignSelf="center"
|
||||
mb={{ base: '16px', md: '20px' }}
|
||||
fontWeight="700"
|
||||
>
|
||||
Launch your startup project 10X faster in a few moments
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
mb={{ base: '30px', md: '30px' }}
|
||||
color={'white'}
|
||||
alignSelf="center"
|
||||
fontSize={{ base: 'sm', md: 'md', '2xl': 'md' }}
|
||||
lineHeight={{ base: '24px', md: '30px' }}
|
||||
letterSpacing="0px"
|
||||
fontWeight="500"
|
||||
w={{
|
||||
base: '91%',
|
||||
md: '82%',
|
||||
lg: '62%',
|
||||
xl: '44%',
|
||||
'2xl': '41%',
|
||||
'3xl': '41%',
|
||||
}}
|
||||
>
|
||||
Create a professional website for your startup in no time with
|
||||
Horizon UI Boilerplate. Our comprehensive template will help you
|
||||
launch your project 10X faster, leaving you more time to focus on
|
||||
your business.
|
||||
</Text>
|
||||
<Link
|
||||
w={{ base: '300px', md: '340px' }}
|
||||
alignSelf="center"
|
||||
href="/dashboard/signin"
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
py="24px"
|
||||
bg="linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important"
|
||||
px="24px"
|
||||
fontSize="md"
|
||||
borderRadius="45px"
|
||||
w={{ base: '300px', md: '340px' }}
|
||||
h="70px"
|
||||
>
|
||||
Go to dashboard
|
||||
<Icon
|
||||
as={MdChevronRight}
|
||||
color="white"
|
||||
mt="4px"
|
||||
ms="2px"
|
||||
h="16px"
|
||||
w="16px"
|
||||
/>
|
||||
</Button>
|
||||
</Link>
|
||||
<Flex
|
||||
align="center"
|
||||
direction="column"
|
||||
justifyContent={{ base: 'center', lg: 'center' }}
|
||||
>
|
||||
{' '}
|
||||
<Text
|
||||
as="h3"
|
||||
mt={{ base: '20px', md: '20px' }}
|
||||
mb="10px"
|
||||
color="white"
|
||||
alignSelf="center"
|
||||
fontSize="md"
|
||||
letterSpacing="0px"
|
||||
fontWeight={'500'}
|
||||
>
|
||||
Used by 80,000+ users monthly
|
||||
</Text>
|
||||
<Flex
|
||||
justify={{ base: 'center', md: 'start' }}
|
||||
alignItems="center"
|
||||
>
|
||||
<Icon as={IoIosStar} w="22px" h="22px" color="#F6AD55" />
|
||||
<Icon as={IoIosStar} w="22px" h="22px" color="#F6AD55" />
|
||||
<Icon as={IoIosStar} w="22px" h="22px" color="#F6AD55" />
|
||||
<Icon as={IoIosStar} w="22px" h="22px" color="#F6AD55" />
|
||||
<Icon
|
||||
as={IoIosStar}
|
||||
w="22px"
|
||||
h="22px"
|
||||
color="orange.300"
|
||||
me="8px"
|
||||
/>
|
||||
<Text color="white" mt="2px" fontWeight="bold" fontSize="lg">
|
||||
4.9
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Image
|
||||
position="absolute"
|
||||
right="0"
|
||||
display={{ base: 'none', xl: 'unset' }}
|
||||
src={imageRight.src}
|
||||
alt=" "
|
||||
w={{ base: '90%', md: '100%', lg: '30%', xl: '30%' }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
141
boilerplate-chakra-pro-main/components/landing/index.tsx
Normal file
141
boilerplate-chakra-pro-main/components/landing/index.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
/*eslint-disable*/
|
||||
'use client';
|
||||
|
||||
import { FooterWebsite } from '@/components/footer/FooterWebsite';
|
||||
import Faq from '@/components/landing/faq';
|
||||
import FeatureOne from '@/components/landing/feature-one';
|
||||
import FeatureThree from '@/components/landing/feature-three';
|
||||
import FeatureTwo from '@/components/landing/feature-two';
|
||||
import FirstSection from '@/components/landing/first-section';
|
||||
import Hero from '@/components/landing/hero';
|
||||
import SecondSection from '@/components/landing/second-section';
|
||||
import NavbarFixed from '@/components/navbar/NavbarFixed';
|
||||
import { Database } from '@/types_db';
|
||||
import { Button, Flex, Input, Text } from '@chakra-ui/react';
|
||||
|
||||
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
|
||||
type Product = Database['public']['Tables']['products']['Row'];
|
||||
type Price = Database['public']['Tables']['prices']['Row'];
|
||||
interface ProductWithPrices extends Product {
|
||||
prices: Price[];
|
||||
}
|
||||
interface PriceWithProduct extends Price {
|
||||
products: Product | null;
|
||||
}
|
||||
interface SubscriptionWithProduct extends Subscription {
|
||||
prices: PriceWithProduct | null;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<NavbarFixed />
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
h="100%"
|
||||
minH="100vh"
|
||||
overflow="hidden"
|
||||
position="relative"
|
||||
>
|
||||
<Flex
|
||||
w="100%"
|
||||
direction="column"
|
||||
pb={{ base: '0px', md: '80px', lg: '80px', xl: '80px' }}
|
||||
position="relative"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Hero />
|
||||
<FirstSection />
|
||||
<SecondSection />
|
||||
<FeatureOne />
|
||||
<FeatureTwo />
|
||||
<FeatureThree />
|
||||
<Faq />
|
||||
<Flex
|
||||
direction={'column'}
|
||||
maxW="100%"
|
||||
mx="auto"
|
||||
mb={{ base: '60px', md: '60px' }}
|
||||
>
|
||||
<Text
|
||||
color="navy.700"
|
||||
fontWeight={'800'}
|
||||
fontSize="30px"
|
||||
mb="20px"
|
||||
textAlign={'center'}
|
||||
>
|
||||
Join our newsletter
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight={'500'}
|
||||
fontSize={{ base: '15px', md: 'lg' }}
|
||||
color="gray.600"
|
||||
px={{ base: '10px', md: '0px' }}
|
||||
mb="30px"
|
||||
textAlign={'center'}
|
||||
>
|
||||
By subscribing, you'll be the first to know about the latest news
|
||||
and updates.
|
||||
</Text>
|
||||
<form
|
||||
id="form-fbcaaaec-e795-4419-b112-06934fd0051d"
|
||||
action="https://api.encharge.io/v1/forms/fbcaaaec-e795-4419-b112-06934fd0051d/submission/plain"
|
||||
method="POST"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap'
|
||||
}}
|
||||
>
|
||||
<div className="sc-jzJRlG kfekry">
|
||||
<div className="encharge-form-group sc-jTzLTM frRvjZ form-group">
|
||||
<Input
|
||||
variant="main"
|
||||
placeholder="Enter your email*"
|
||||
me="14px"
|
||||
h="100%"
|
||||
isRequired={true}
|
||||
w={{ base: '96%', md: '420px' }}
|
||||
maxW="100%"
|
||||
fontWeight="500"
|
||||
_placeholder={{
|
||||
color: 'gray.600',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
borderRadius="70px"
|
||||
mb="0px !important"
|
||||
type="email"
|
||||
id="31b6ea2a-d9c7-4b42-9a01-7677838f07e9"
|
||||
name="email"
|
||||
className="encharge-form-input sc-kAzzGY kTMZCx form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sc-cSHVUG ebRkVm">
|
||||
<Button
|
||||
py="20px"
|
||||
px="40px"
|
||||
fontSize="sm"
|
||||
fontWeight={'600'}
|
||||
variant="primary"
|
||||
borderRadius="45px"
|
||||
bg="linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important"
|
||||
w={{ base: '100%', md: '150px' }}
|
||||
h="58px"
|
||||
type="submit"
|
||||
className="encharge-form-submit-button sc-gZMcBi ejYzxT btn btn-primary"
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<FooterWebsite />
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
// eslint-disabled
|
||||
|
||||
import { Icon, Flex, Text, useColorModeValue } from '@chakra-ui/react';
|
||||
import React from 'react';
|
||||
import { MdChevronRight } from 'react-icons/md';
|
||||
|
||||
export default function SecondSection() {
|
||||
const brandColorPrice = useColorModeValue('brand.500', 'white');
|
||||
const textColor = useColorModeValue('#120F43', 'white');
|
||||
return (
|
||||
<Flex
|
||||
id="features"
|
||||
zIndex="2"
|
||||
w="100%"
|
||||
direction={{ base: 'column' }}
|
||||
bgSize="cover"
|
||||
alignItems="center"
|
||||
position="relative"
|
||||
pt={{ base: '90px', md: '100px', xl: '140px' }}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
px={{ base: '0px', md: '40px', xl: '0px' }}
|
||||
maxW="1170px"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Flex direction="column" width="stretch">
|
||||
<Flex
|
||||
direction="column"
|
||||
mx="auto"
|
||||
alignItems="center"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
textAlign={{ base: 'center', lg: 'center' }}
|
||||
fontWeight="700"
|
||||
letterSpacing="2px"
|
||||
color={brandColorPrice}
|
||||
fontSize={{ base: 'xs', md: 'md' }}
|
||||
w="100%"
|
||||
mb="10px"
|
||||
>
|
||||
HOW IT WORKS
|
||||
</Text>
|
||||
<Text
|
||||
as="h2"
|
||||
textAlign={{ base: 'center' }}
|
||||
color={textColor}
|
||||
fontWeight="800"
|
||||
fontSize={{ base: '30px', md: '48px', lg: '48px', xl: '58px' }}
|
||||
lineHeight={{ base: '38px', md: '60px', lg: '60px', xl: '70px' }}
|
||||
mb={{ base: '20px', md: '30px' }}
|
||||
mx="auto"
|
||||
>
|
||||
How it works?
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
w={{ base: '86%', md: '76%', lg: '100%' }}
|
||||
pt={{ base: '40px', md: '60px', xl: '60px' }}
|
||||
maxW="100%"
|
||||
flexDirection={{ base: 'column', lg: 'row' }}
|
||||
align={'center'}
|
||||
justify="center"
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
me={{ base: '0px', lg: '32px' }}
|
||||
mb={{ base: '50px', lg: '0px' }}
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
color="navy.700"
|
||||
fontWeight={'800'}
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
fontSize="20px"
|
||||
mb="12px"
|
||||
>
|
||||
Step 1: This is an example
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize={{ base: '15px', md: 'md' }}
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
lineHeight={{ base: '28px', md: '30px' }}
|
||||
w="98%"
|
||||
>
|
||||
This is where your first step paragraph goes. For the moment, this
|
||||
is just an example to see what it will look like.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
bg="white"
|
||||
boxShadow={'0px 10.83px 28px -2px rgba(203, 213, 224, 0.79)'}
|
||||
borderRadius="50px"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
me={{ base: '0px', lg: '32px' }}
|
||||
minW="38px"
|
||||
minH="38px"
|
||||
>
|
||||
<Icon
|
||||
w="23px"
|
||||
h="23px"
|
||||
color="#7B5AFF"
|
||||
bg="transparent"
|
||||
as={MdChevronRight}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
me={{ base: '0px', lg: '20px' }}
|
||||
mb={{ base: '50px', lg: '0px' }}
|
||||
>
|
||||
<Text
|
||||
as="h3"
|
||||
color="navy.700"
|
||||
fontWeight={'800'}
|
||||
fontSize="20px"
|
||||
mb="12px"
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
>
|
||||
Step 2: This is another example
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize={{ base: '15px', md: 'md' }}
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
lineHeight={{ base: '28px', md: '30px' }}
|
||||
w="98%"
|
||||
>
|
||||
This is where your second step paragraph goes. For the moment,
|
||||
this is just an example to see what it will look like.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
bg="white"
|
||||
boxShadow={'0px 10.83px 28px -2px rgba(203, 213, 224, 0.79)'}
|
||||
borderRadius="50px"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
me={{ base: '0px', lg: '32px' }}
|
||||
minW="38px"
|
||||
minH="38px"
|
||||
>
|
||||
<Icon
|
||||
w="23px"
|
||||
h="23px"
|
||||
color="#7B5AFF"
|
||||
bg="transparent"
|
||||
as={MdChevronRight}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
as="h3"
|
||||
color="navy.700"
|
||||
fontWeight={'800'}
|
||||
fontSize="20px"
|
||||
mb="12px"
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
>
|
||||
Step 3: This is an example too
|
||||
</Text>
|
||||
<Text
|
||||
color="gray.600"
|
||||
fontWeight={'500'}
|
||||
fontSize={{ base: '15px', md: 'md' }}
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
lineHeight={{ base: '28px', md: '30px' }}
|
||||
>
|
||||
This is where your third step paragraph goes. For the moment, this
|
||||
is just an example to see what it will look like.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user