Header
import * as React from 'react';
import {
Container,
Box,
Text,
Flex,
Spacer,
Heading,
Menu,
Link,
MenuItem,
MenuDivider,
MenuButton,
IconButton,
MenuList,
HStack,
Button,
useDisclosure,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { MdAdd } from 'react-icons/md';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineArrowRight } from 'react-icons/ai';
import { FiSun } from 'react-icons/fi';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
const Header = () => {
const { onOpen } = useDisclosure();
return (
<Container maxW="7xl" p={10}>
<Flex mb={'30px'} align="center">
<HStack>
<Link href="#">
<Box p="2">
<motion.div whileHover={{ scale: 1.1 }}>
<Heading
as="h1"
fontSize={{ base: '2xl', sm: '3xl' }}
bgGradient="linear(to-l, #7928CA,#FF0080)"
bgClip="text"
_focus={{ boxShadow: 'none', outline: 'none' }}
_hover={{
textDecoration: 'none',
bgGradient: 'linear(to-r, red.500, yellow.500)'
}}
>
Notebook App
</Heading>
</motion.div>
</Box>
</Link>
</HStack>
<Spacer />
<Box>
<HStack>
<HStack d={['none', 'none', 'block']}>
<Button
leftIcon={<MdAdd />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: 'linear(to-r, red.500, yellow.500)' }}
variant="solid"
size="sm"
rounded="md"
>
Add new note
</Button>
<Button
leftIcon={<AiOutlineArrowRight />}
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{ bgGradient: 'linear(to-r, red.500, yellow.500)' }}
variant="solid"
size="sm"
rounded="md"
>
Open source
</Button>
</HStack>
<Box d={['block', 'block', 'none']}>
<Menu>
<MenuButton
as={IconButton}
aria-label="Options"
icon={<GiHamburgerMenu />}
transition="all 0.2s"
size="md"
color="white"
variant="outline"
bg={useColorModeValue('gray.400', 'gray.800')}
_hover={{ bg: 'auto' }}
_focus={{ boxShadow: 'outline' }}
/>
<MenuList fontSize="sm" zIndex={5}>
<MenuItem icon={<MdAdd />} onClick={onOpen}>
{' '}
<Text textShadow="1px 1px #9c1786">Add new note</Text>
</MenuItem>
<MenuDivider />
<MenuItem icon={<AiOutlineArrowRight />}>
{' '}
<Text textShadow="1px 1px #9c1786">Open source repositories</Text>
</MenuItem>
</MenuList>
</Menu>
</Box>
<IconButton aria-label="Color Switcher" icon={<FiSun />} />
</HStack>
</Box>
</Flex>
</Container>
);
};
export default Header;
Hero Section
import * as React from 'react';
import { Container, Heading, Text, SlideFade } from '@chakra-ui/react';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
export default function HeroSection() {
return (
<Container maxW="5xl" py={24} mx="auto">
<SlideFade in={true} offsetY="50vh">
<motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Heading
fontWeight={600}
fontSize={{ base: '2xl', sm: '4xl', md: '6xl' }}
lineHeight={'110%'}
textAlign="center"
>
<Text textShadow="1px 1px #9c1786">Make notes for </Text>
<Text
as={'span'}
color={'green.400'}
bgGradient="linear(to-r, green.200, pink.500)"
bgClip="text"
>
your daily work
</Text>
</Heading>
</motion.div>
</SlideFade>
</Container>
);
}
Note Card
import * as React from 'react';
import { Container, Box, SimpleGrid } from '@chakra-ui/react';
import Card from './card';
const notes = [
{
id: '1',
title: 'Hey 👋',
body: `I'm dummy note here. Try to update me. Click me to see my remaining part. You can also delete me 😔. But I'll be here again by reopening the app link 😃.`
},
{
id: '2',
title: 'Notes 2',
body: `Hey I'm note 2`
}
];
const NotesList = () => {
return (
<Container maxW="7xl" p={10}>
<Box minH="50vh">
<SimpleGrid
columns={[1, 2, 2, 3]}
mt="40px"
gridGap="10px"
position="relative"
overflow="hidden"
>
{notes.map((note) => (
<Card note={note} key={note.id} />
))}
</SimpleGrid>
</Box>
</Container>
);
};
export default NotesList;
import * as React from 'react';
import {
Box,
Stack,
Heading,
Text,
Flex,
Center,
Fade,
Icon,
HStack,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
// Here we have used react-icons package for the icons
import { AiOutlineDelete } from 'react-icons/ai';
import { BiEdit } from 'react-icons/bi';
interface NoteProps {
id: string;
title: string;
body: string;
}
interface Note {
note: NoteProps;
}
const Card = ({ note }: Note) => {
const bg = useColorModeValue('white', '#2f3244');
return (
<Fade in={true}>
<motion.div whileHover={{ y: -10 }} layoutId={note.id}>
<Center py={2} px={2} key={note.id}>
<Box
maxH="400px"
w="100%"
boxShadow="md"
rounded="md"
p={6}
overflow="hidden"
cursor="pointer"
bg={bg}
role="group"
>
<Stack>
<Flex
_groupHover={{ justifyContent: 'space-between' }}
justifyContent="center"
align="center"
>
<Box>
<Text
color="green.500"
textTransform="uppercase"
fontWeight={800}
fontSize="sm"
letterSpacing={1.1}
>
Note
</Text>
</Box>
<Box _groupHover={{ display: 'block' }} display="none">
<HStack spacing="2">
<Icon
color="green.500"
_hover={{ color: 'green.600' }}
_groupHover={{ display: 'block' }}
as={BiEdit}
w={4}
h={4}
/>
<Icon
color="green.500"
_hover={{ color: '#ca364a' }}
_groupHover={{ display: 'block' }}
as={AiOutlineDelete}
w={4}
h={4}
/>
</HStack>
</Box>
</Flex>
<Heading fontSize="xl" fontFamily="body" textTransform="capitalize" noOfLines={2}>
{note.title}
</Heading>
<Text color="gray.500" fontSize="md" noOfLines={{ base: 3, md: 4 }}>
{note.body}
</Text>
</Stack>
</Box>
</Center>
</motion.div>
</Fade>
);
};
export default Card;
Note Form
import * as React from 'react';
import {
Container,
Button,
FormControl,
FormLabel,
Input,
Textarea,
VStack,
Box,
useColorModeValue
} from '@chakra-ui/react';
const NoteForm = () => {
return (
<Container maxW={'2xl'} py={10} mx="auto">
<VStack
spacing={2}
border="1px solid"
borderColor={useColorModeValue('gray.100', 'gray.700')}
p={5}
rounded="lg"
shadow="md"
>
<Box width="100%">
<FormControl isRequired>
<FormLabel>Title</FormLabel>
<Input name="title" placeholder="Title" />
</FormControl>
<FormControl size="lg" mt={4} isRequired>
<FormLabel>Body</FormLabel>
<Textarea name="body" placeholder="Body" size="md" borderRadius="5px" />
</FormControl>
</Box>
<Box w="100%" textAlign="end">
<Button type="submit" colorScheme="blue" rounded="md">
Save
</Button>
</Box>
</VStack>
</Container>
);
};
export default NoteForm;
Footer
import * as React from 'react';
import {
Container,
Box,
Link as ChakraLink,
SimpleGrid,
Stack,
Text,
Popover,
PopoverTrigger,
Portal,
PopoverContent,
PopoverArrow,
PopoverCloseButton,
PopoverBody
} from '@chakra-ui/react';
import { siteConfig } from './site-config';
import FooterSignup from './signup';
import { ExternalFooterLink, InternalFooterLink, ExternalSocialLink } from './links';
// Here we have used react-icons package for the icons
import { FaGithub, FaDev, FaLinkedin, FaQuora, FaTwitter } from 'react-icons/fa';
const Footer = () => {
return (
<Container maxW="7xl" p={10}>
<SimpleGrid
flexDirection="column-reverse"
gridTemplateColumns={['1fr', '1fr', '1fr 1fr', '1fr 1fr']}
borderTopWidth={2}
mt="30px"
borderTopColor="gray.900"
pt="20px"
>
<Box d={['block', 'block', 'none', 'none']} mb="30px">
<FooterSignup />
</Box>
<Box>
<SimpleGrid columns={[1, 1, 2, 2]}>
<Stack mb={['10px', '10px', 0, 0]}>
<Text as="span">
<ExternalFooterLink href="#" text="Contact us" />
</Text>
<Text as="span">
<ExternalFooterLink href="#" text="Contribute" />
</Text>
<Text as="span">
<InternalFooterLink href="#" text="Open source projects" />
</Text>
</Stack>
<Stack>
<Text as="span">
<Popover placement="top">
<PopoverTrigger>
<Text
as="span"
_focus={{ outline: 'none', boxShadow: 'none' }}
fontWeight={500}
color="gray.500"
cursor="pointer"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
Social Accounts
</Text>
</PopoverTrigger>
<Portal>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverBody>
<Stack
as="footer"
isInline
spacing={[1, 2]}
justifyContent="center"
alignItems="center"
>
<ExternalSocialLink
href={siteConfig.author.github}
icon={<FaGithub />}
type="gray"
label="Github Account"
/>
<ExternalSocialLink
href={siteConfig.author.dev}
icon={<FaDev />}
type="gray"
label="Dev Account"
/>
<ExternalSocialLink
href={siteConfig.author.linkedin}
icon={<FaLinkedin />}
type="linkedin"
label="LinkedIn Account"
/>
<ExternalSocialLink
href={siteConfig.author.twitter}
icon={<FaTwitter />}
type="twitter"
label="Twitter Account"
/>
<ExternalSocialLink
href={siteConfig.author.quora}
icon={<FaQuora />}
type="red"
label="Quora Account"
/>
</Stack>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
</Text>
<Text as="span">
<ExternalFooterLink href="#" text="Sponsor" />
</Text>
<Text as="span">
<ExternalFooterLink href="#" isExternal={false} text="FAQs" />
</Text>
</Stack>
</SimpleGrid>
<Text mt="20px" color="gray.500">
Made with 🧡 by{' '}
<ChakraLink
_focus={{ boxShadow: 'none', outline: 'none' }}
target="_blank"
href={siteConfig.author.github}
fontWeight={600}
color="gray.400"
bgClip="text"
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{
bgGradient: 'linear(to-r, red.500, yellow.500)'
}}
>
Muhammad Ahmad
</ChakraLink>{' '}
</Text>
</Box>
<Box d={['none', 'none', 'block', 'block']}>
<FooterSignup />
</Box>
</SimpleGrid>
</Container>
);
};
export default Footer;
import * as React from 'react';
import { Link as ChakraLink, IconButton } from '@chakra-ui/react';
type ExternalFooterLinkProps = {
href: string;
text: string;
isExternal?: boolean;
};
export const ExternalFooterLink = (props: ExternalFooterLinkProps) => {
const { href, text, isExternal = true } = props;
return (
<ChakraLink
_focus={{ outline: 'none', boxShadow: 'none' }}
href={href}
target={isExternal ? '_blank' : '_self'}
fontWeight={500}
color="gray.500"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
{text}
</ChakraLink>
);
};
type InternalFooterLinkProps = {
href: string;
text: string;
};
export const InternalFooterLink = (props: InternalFooterLinkProps) => {
const { href, text } = props;
return (
<a>
<ChakraLink
_focus={{ outline: 'none', boxShadow: 'none' }}
as="span"
fontWeight={500}
color="gray.500"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
{text}
</ChakraLink>
</a>
);
};
const iconProps = {
variant: 'ghost',
size: 'lg',
isRound: true
};
type ExternalSocialLinkProps = {
href: string;
label: string;
isExternal?: boolean;
type: string;
icon: any;
};
export const ExternalSocialLink = (props: ExternalSocialLinkProps) => {
const { href, label, icon, type, isExternal = true } = props;
return (
<IconButton
as={ChakraLink}
href={href}
target={isExternal ? '_blank' : '_self'}
aria-label={label}
icon={icon}
colorScheme={type}
{...iconProps}
/>
);
};
import * as React from 'react';
import { Box, Button, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
export default function FooterSignup() {
return (
<>
<Heading fontSize="24px" mb="15px" className="yellow-gradient-color">
Be the first to know
</Heading>
<Text color="gray.400" mb="15px">
Get notified about the upcoming sessions, news, articles, jobs, and opensource projects.
</Text>
<form action="#">
<Box position="relative">
<Input
type="email"
isRequired
name="entry.1808449400"
px="25px"
height="50px"
rounded="50px"
bg={useColorModeValue('gray.900', 'gray.600')}
_placeholder={{ color: 'gray.300' }}
placeholder="Enter your email"
_focus={{ outline: 0 }}
color="gray.100"
borderWidth={0}
/>
<Button
type="submit"
height="50px"
color="gray.100"
_hover={{ bg: 'yellow.400', color: 'gray.900' }}
position="absolute"
top="0"
right="0"
bg="gray.700"
rounded="50px"
px="25px"
>
Subscribe
</Button>
</Box>
</form>
</>
);
}
const baseUrl = 'https://github.com/MA-Ahmad/notebook';
export const siteConfig = {
copyright: `Copyright © ${new Date().getFullYear()} Muhammad Ahmad. All Rights Reserved.`,
author: {
name: 'Muhammad Ahmad',
github: 'https://github.com/MA-Ahmad',
twitter: 'https://twitter.com/muhammad_ahmaad',
linkedin: 'https://linkedin.com/in/muhammad-ahmad20',
quora: 'https://www.quora.com/profile/Muhammad-Ahmad-66',
dev: 'https://dev.to/m_ahmad',
email: 'muhammad.ahmad8043@gmail.com'
},
repo: {
url: baseUrl,
issuesUrl: `${baseUrl}/issues/new`
}
};
