github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Homepage links update

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent ec1725e312
commit c097017520
6 changed files with 61 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      components/dimmed-more.tsx
  2. 46
      components/footer.tsx
  3. 11
      components/global-header.tsx
  4. 20
      components/updates-banner.tsx
  5. 3
      content/site.json
  6. 9
      pages/index.tsx

5
components/dimmed-more.tsx
Unescape View File

@ -2,10 +2,11 @@ import { Box, Link, Text } from '@chakra-ui/react';
type DimmedMoreProps = {
text: string;
href: string;
};
export function DimmedMore(props: DimmedMoreProps) {
const { text } = props;
const { text, href } = props;
return (
<Box position='relative' textAlign='center' bottom='20px'>
@ -25,7 +26,7 @@ export function DimmedMore(props: DimmedMoreProps) {
bg='green.600'
color='white'
p='7px 20px'
href={'#'}
href={href}
fontWeight={800}
fontSize='11px'
textTransform='uppercase'

46
components/footer.tsx
Unescape View File

@ -1,25 +1,33 @@
import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
import siteConfig from '../content/site.json';
function NavigationLinks() {
return (
<>
<Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
<Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link _hover={{ color: 'white' }} href='#'>About</Link>
<Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
<Link _hover={{ color: 'white' }} href='/roadmaps'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='/guides'>Guides</Link>
<Link _hover={{ color: 'white' }} href='/watch'>Videos</Link>
<Link _hover={{ color: 'white' }} href='/podcasts'>Podcasts</Link>
<Link _hover={{ color: 'white' }} href='/about'>About</Link>
<Link _hover={{ color: 'white' }} href={siteConfig.url.youtube} target='_blank'>YouTube</Link>
</Stack>
<Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link>
<Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/roadmaps'>Roadmaps</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/guides'>Guides</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/watch'>Videos</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/podcasts'>Podcasts</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/thanks'>Thanks</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }}
href='/about'>About</Link>
<Link py='7px' _hover={{ color: 'white' }} target='_blank'
href={siteConfig.url.youtube}>YouTube</Link>
</Stack>
</>
);
@ -40,7 +48,8 @@ export function Footer() {
</Link>
<Text as='span' mx='7px'>by</Text>
<Link bg='blue.500' px='6px' py='2px' rounded='4px' color='white' fontWeight={600} fontSize='13px'
_hover={{ textDecoration: 'none', bg: 'blue.600' }} href='/'>@kamranahmedse</Link>
_hover={{ textDecoration: 'none', bg: 'blue.600' }} href={siteConfig.url.twitter}
target='_blank'>@kamranahmedse</Link>
</Flex>
<Text my='15px' fontSize='14px' color='gray.500'>Community created roadmaps, articles, resources and
@ -48,9 +57,12 @@ export function Footer() {
<Text fontSize='14px' color='gray.500'>
<Text as='span' mr='10px'>&copy; roadmap.sh</Text>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>FAQs</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Terms</Link>&middot;
<Link _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400' mx='10px'>Privacy</Link>
<Link href='/about' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
mx='10px'>FAQs</Link>&middot;
<Link href='/terms' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
mx='10px'>Terms</Link>&middot;
<Link href='/privacy' _hover={{ textDecoration: 'none', color: 'white' }} color='gray.400'
mx='10px'>Privacy</Link>
</Text>
</Box>
</Container>

11
components/global-header.tsx
Unescape View File

@ -42,7 +42,7 @@ function DesktopMenuLinks() {
<Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
_hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
fontWeight={500} href={'#'}>Subscribe</Link>
fontWeight={500} href={'/signup'}>Subscribe</Link>
</Stack>
);
}
@ -59,13 +59,14 @@ function MobileMenuLinks() {
cursor='pointer'
/>
<MenuList py={'4px'} rounded='3px' minWidth='150px'>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
<MenuItem href={'/roadmaps'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Roadmaps</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
<MenuItem href={'/guides'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Guides</MenuItem>
<MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
<MenuItem href={'/watch'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
color='gray.600'>Videos</MenuItem>
<MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
<MenuItem href='/signup' as={Link} py='4px' borderColor='gray.100' fontSize='13px'
color='gray.600'>Subscribe</MenuItem>
</MenuList>
</Menu>
);

20
components/updates-banner.tsx
Unescape View File

@ -1,8 +1,10 @@
import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react';
import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
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} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left'
bg='gray.800'>
<Container maxW='container.md'>
<Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
Informed</Heading>
@ -12,15 +14,21 @@ export function UpdatesBanner() {
<Flex flexDirection={['column', 'column', 'row']}>
<Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} variant='outline' borderWidth={2}
colorScheme='green' _hover={{ color: 'green.200' }}>
<Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
variant='outline' borderWidth={2}
colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
Subscribe to Updates
</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
</Box>
<Box>
<Button width={['full', 'auto']} fontSize={['14px', '14px', '16px']} colorScheme='yellow'>Updates & Paid
Content</Button>
<Button as={Link}
href={siteConfig.url.sponsor}
target='_blank'
width={['full', 'auto']}
fontSize={['14px', '14px', '16px']}
_hover={{ textDecoration: 'none', bg: 'yellow.500' }}
colorScheme='yellow'>Updates & Paid Content</Button>
<Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
fontWeight={600}>5$
per month</Text></Text>

3
content/site.json
Unescape View File

@ -9,7 +9,10 @@
"logoSquare": "/brand-square.png",
"url": {
"web": "https://roadmap.sh",
"twitter": "https://twitter.com/kamranahmedse",
"youtube": "https://youtube.com/theroadmap?sub_confirmation=1",
"repo": "https://github.com/kamranahmedse/roadmap.sh",
"sponsor": "https://github.com/sponsors/kamranahmedse",
"repoData": "https://github.com/kamranahmedse/roadmap.sh/tree/master/content",
"addGuide": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/guide.md",
"addRoadmap": "https://github.com/kamranahmedse/roadmap.sh/tree/master/contributing/roadmap.md",

9
pages/index.tsx
Unescape View File

@ -11,6 +11,7 @@ import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
import { getAllGuides, GuideType } from '../lib/guide';
import { getAllVideos, VideoType } from '../lib/video';
import siteConfig from '../content/site.json';
type HomeProps = {
roadmaps: RoadmapType[];
@ -34,7 +35,9 @@ export default function Home(props: HomeProps) {
to help guide the developers in picking up the path and guide their learnings.
</Text>
<Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={'#'}
<Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
href={siteConfig.url.youtube}
target='_blank'
fontWeight={600}>YouTube
channel</Link> which we hope you are going to love.</Text>
</Box>
@ -68,7 +71,7 @@ export default function Home(props: HomeProps) {
subtitle={guide.formattedUpdatedAt}
/>
))}
<DimmedMore text='View all Guides' />
<DimmedMore href={'/guides'} text='View all Guides' />
</LinksList>
</Container>
</Box>
@ -99,7 +102,7 @@ export default function Home(props: HomeProps) {
}
/>
))}
<DimmedMore text={'View all Videos'} />
<DimmedMore href='/watch' text={'View all Videos'} />
</LinksList>
</Container>
</Box>

Write Preview
Loading…
Cancel
Save