Redesign homepage
This commit is contained in:
@ -33,7 +33,7 @@ function NavigationLinks() {
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
|
||||
<Box bg='brand.hero' p={['25px 0', '25px 0', '40px 0']}>
|
||||
<Container maxW='container.md'>
|
||||
<NavigationLinks />
|
||||
|
||||
|
@ -72,7 +72,7 @@ function MobileMenuLinks() {
|
||||
top={0}
|
||||
bg='gray.900'
|
||||
spacing='12px'
|
||||
zIndex={1}
|
||||
zIndex={999}
|
||||
>
|
||||
<Link href='/roadmaps'>Roadmaps</Link>
|
||||
<Link href='/guides'>Guides</Link>
|
||||
@ -86,9 +86,15 @@ function MobileMenuLinks() {
|
||||
);
|
||||
}
|
||||
|
||||
export function GlobalHeader() {
|
||||
type GlobalHeaderProps = {
|
||||
variant?: 'transparent' | 'solid'
|
||||
};
|
||||
|
||||
export function GlobalHeader(props: GlobalHeaderProps) {
|
||||
const { variant = 'solid' } = props;
|
||||
|
||||
return (
|
||||
<Box bg='gray.900' p='20px 0'>
|
||||
<Box bg={variant === 'solid' ? 'gray.900' : 'transparent'} p='20px 0'>
|
||||
<Container maxW='container.md'>
|
||||
<Flex justifyContent='space-between' alignItems='center'>
|
||||
<Box>
|
||||
|
@ -2,7 +2,7 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
|
||||
|
||||
export function OpensourceBanner() {
|
||||
return (
|
||||
<Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
|
||||
<Box bg='white' borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['60px', '60px', '90px']} textAlign='center'>
|
||||
<Container maxW='container.md'>
|
||||
<Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
|
||||
<Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,
|
||||
|
16
components/page-wrapper.tsx
Normal file
16
components/page-wrapper.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
|
||||
type PageWrapperProps = {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function PageWrapper(props: PageWrapperProps) {
|
||||
const { children } = props;
|
||||
|
||||
return (
|
||||
<Box bgColor='brand.hero' bgImage='url(/bg.png)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
|
||||
{ children }
|
||||
</Box>
|
||||
);
|
||||
}
|
@ -31,10 +31,11 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
|
||||
<Box
|
||||
as={Link}
|
||||
href={url}
|
||||
_hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
|
||||
_hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
|
||||
flex={1}
|
||||
shadow='2xl'
|
||||
bg={bgColorList[colorIndex] ?? bgColorList[0]}
|
||||
className={'home-roadmap-item'}
|
||||
bg={'rgba(255,255,255,.05)'}
|
||||
color='white'
|
||||
p='15px'
|
||||
rounded='10px'
|
||||
@ -60,9 +61,9 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
|
||||
bottom={0}
|
||||
rounded='10px'
|
||||
>
|
||||
<Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
|
||||
<Text color='white' bg='purple.700' zIndex={1} fontWeight={600} p={'5px 10px'}
|
||||
rounded='10px'>Upcoming</Text>
|
||||
<Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
|
||||
<Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.3} />
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
|
@ -3,8 +3,11 @@ import siteConfig from '../content/site.json';
|
||||
|
||||
export function UpdatesBanner() {
|
||||
return (
|
||||
<Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
|
||||
bg='gray.800'>
|
||||
<Box borderTopWidth={1}
|
||||
pt={['40px', '40px', '70px']}
|
||||
pb={['40px', '45px', '80px']}
|
||||
textAlign='left'
|
||||
bg='brand.footer'>
|
||||
<Container maxW='container.md'>
|
||||
<Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
|
||||
Informed</Heading>
|
||||
|
Reference in New Issue
Block a user