Heroes
Split with image
import * as React from 'react';
import {
chakra,
Container,
Stack,
HStack,
Text,
useColorModeValue,
Button,
Image,
Skeleton,
Box,
Link,
Icon
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { GoChevronRight } from 'react-icons/go';
import { MdBolt } from 'react-icons/md';
const HeroSection = () => {
return (
<Container maxW="6xl" px={{ base: 6, md: 3 }} py={24}>
<Stack direction={{ base: 'column', md: 'row' }} justifyContent="center">
<Stack direction="column" spacing={6} justifyContent="center" maxW="480px">
<HStack
as={Link}
p={1}
rounded="full"
fontSize="sm"
w="max-content"
bg={useColorModeValue('gray.300', 'gray.700')}
>
<Box
py={1}
px={2}
lineHeight={1}
rounded="full"
color="white"
bgGradient="linear(to-l, #0ea5e9,#2563eb)"
>
What's new
</Box>
<HStack spacing={1} alignItems="center" justifyContent="center">
<Text lineHeight={1}>See our recent updates</Text>
<Icon as={GoChevronRight} w={4} h={4} />
</HStack>
</HStack>
<chakra.h1 fontSize="5xl" lineHeight={1} fontWeight="bold" textAlign="left">
Build products faster <br />
<chakra.span color="teal">in ChakraUI</chakra.span>
</chakra.h1>
<Text
fontSize="1.2rem"
textAlign="left"
lineHeight="1.375"
fontWeight="400"
color="gray.500"
>
TemplatesKart provides the best ChakraUI templates. Focus on your business, not on the
boilerplate.
</Text>
<HStack
spacing={{ base: 0, sm: 2 }}
mb={{ base: '3rem !important', sm: 0 }}
flexWrap="wrap"
>
<chakra.button
w={{ base: '100%', sm: 'auto' }}
h={12}
px={6}
color="white"
size="lg"
rounded="md"
mb={{ base: 2, sm: 0 }}
zIndex={5}
lineHeight={1}
bgGradient="linear(to-l, #0ea5e9,#2563eb)"
_hover={{ bgGradient: 'linear(to-l, #0ea5e9,#2563eb)', opacity: 0.9 }}
>
<chakra.span> Explore ComponentsKart </chakra.span>
<Icon as={MdBolt} h={4} w={4} ml={1} />
</chakra.button>
<Box
d="flex"
justifyContent="center"
bg={useColorModeValue('white', 'gray.800')}
w={{ base: '100%', sm: 'auto' }}
border="1px solid"
borderColor="gray.300"
p={3}
lineHeight={1.18}
rounded="md"
boxShadow="md"
as={Link}
zIndex={55555555}
>
Watch Video
</Box>
</HStack>
</Stack>
<Box ml={{ base: 0, md: 5 }} pos="relative">
<DottedBox />
<Image
w="100%"
h="100%"
minW={{ base: 'auto', md: '30rem' }}
objectFit="cover"
src={`https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&q=80&
fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80`}
rounded="md"
fallback={<Skeleton />}
/>
</Box>
</Stack>
</Container>
);
};
function DottedBox() {
return (
<Box position="absolute" left="-45px" top="-30px" height="full" maxW="700px" zIndex={-1}>
<svg
color={useColorModeValue('rgba(55,65,81, 0.1)', 'rgba(55,65,81, 0.7)')}
width="350"
height="420"
fill="none"
>
<defs>
<pattern
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
x="0"
y="0"
width="20"
height="20"
patternUnits="userSpaceOnUse"
>
<rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
</pattern>
</defs>
<rect width="404" height="404" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"></rect>
</svg>
</Box>
);
}
export default HeroSection;
Left align content
import { Fragment } from 'react';
import {
chakra,
Container,
Stack,
Text,
useColorModeValue,
Button,
Link,
Icon,
Flex,
Box
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub } from 'react-icons/fa';
const features = [
{
title: 'Free and open source',
detail: 'All components have MIT license, you can use in any project',
icon: (
<svg
aria-hidden="true"
role="img"
viewBox="0 0 24 24"
width="28"
height="28"
fill="currentColor"
>
<path
fillRule="evenodd"
d={`M12.75 2.75a.75.75 0 00-1.5 0V4.5H9.276a1.75 1.75 0 00-.985.303L6.596 5.957A.25.25 0 016.455
6H2.353a.75.75 0 100 1.5H3.93L.563 15.18a.762.762 0 00.21.88c.08.064.161.125.309.221.186.121.452.278.792.433.68.311
1.662.62 2.876.62a6.919 6.919 0 002.876-.62c.34-.155.606-.312.792-.433.15-.097.23-.158.31-.223a.75.75 0
00.209-.878L5.569 7.5h.886c.351 0 .694-.106.984-.303l1.696-1.154A.25.25 0 019.275 6h1.975v14.5H6.763a.75.75
0 000 1.5h10.474a.75.75 0 000-1.5H12.75V6h1.974c.05 0 .1.015.14.043l1.697 1.154c.29.197.633.303.984.303h.886l-3.368
7.68a.75.75 0 00.23.896c.012.009 0 0 .002 0a3.154 3.154 0 00.31.206c.185.112.45.256.79.4a7.343 7.343 0
002.855.568 7.343 7.343 0 002.856-.569c.338-.143.604-.287.79-.399a3.5 3.5 0 00.31-.206.75.75 0 00.23-.896L20.07
7.5h1.578a.75.75 0 000-1.5h-4.102a.25.25 0 01-.14-.043l-1.697-1.154a1.75 1.75 0 00-.984-.303H12.75V2.75zM2.193
15.198a5.418 5.418 0 002.557.635 5.418 5.418 0 002.557-.635L4.75 9.368l-2.557 5.83zm14.51-.024c.082.04.174.083.275.126.53.223
1.305.45 2.272.45a5.846 5.846 0 002.547-.576L19.25 9.367l-2.547 5.807z`}
></path>
</svg>
)
},
{
title: 'TypeScript based',
detail: 'Build type safe applications, all components and hooks export types',
icon: (
<svg
aria-hidden="true"
role="img"
viewBox="0 0 24 24"
width="28"
height="28"
fill="currentColor"
>
<path
fillRule="evenodd"
d={`M3 3a2 2 0 012-2h9.982a2 2 0 011.414.586l4.018 4.018A2 2 0 0121 7.018V21a2 2 0 01-2 2H4.75a.75.75
0 010-1.5H19a.5.5 0 00.5-.5V8.5h-4a2 2 0 01-2-2v-4H5a.5.5 0 00-.5.5v6.25a.75.75 0 01-1.5 0V3zm12-.5v4a.5.5
0 00.5.5h4a.5.5 0 00-.146-.336l-4.018-4.018A.5.5 0 0015 2.5z`}
></path>
<path
d={`M4.53 12.24a.75.75 0 01-.039 1.06l-2.639 2.45 2.64 2.45a.75.75 0 11-1.022 1.1l-3.23-3a.75.75 0
010-1.1l3.23-3a.75.75 0 011.06.04zm3.979 1.06a.75.75 0 111.02-1.1l3.231 3a.75.75 0 010 1.1l-3.23 3a.75.75
0 11-1.021-1.1l2.639-2.45-2.64-2.45z`}
></path>
</svg>
)
},
{
title: 'Easy to customize',
detail: 'Build type safe applications, all components and hooks export types',
icon: (
<svg
aria-hidden="true"
role="img"
viewBox="0 0 24 24"
width="28"
height="28"
fill="currentColor"
>
<path
fillRule="evenodd"
d={`M10.157 1.154a11.07 11.07 0 013.686 0 .75.75 0 01-.25 1.479 9.568 9.568 0 00-3.186 0 .75.75 0
01-.25-1.48zM6.68 3.205a.75.75 0 01-.177 1.046A9.558 9.558 0 004.25 6.503a.75.75 0 01-1.223-.87
11.058 11.058 0 012.606-2.605.75.75 0 011.046.177zm10.64 0a.75.75 0 011.046-.177 11.058 11.058 0
012.605 2.606.75.75 0 11-1.222.869 9.558 9.558 0 00-2.252-2.252.75.75 0 01-.177-1.046zM2.018
9.543a.75.75 0 01.615.864 9.568 9.568 0 000 3.186.75.75 0 01-1.48.25 11.07 11.07 0 010-3.686.75.75
0 01.865-.614zm19.964 0a.75.75 0 01.864.614 11.066 11.066 0 010 3.686.75.75 0 01-1.479-.25 9.56 9.56
0 000-3.186.75.75 0 01.615-.864zM3.205 17.32a.75.75 0 011.046.177 9.558 9.558 0 002.252 2.252.75.75
0 11-.87 1.223 11.058 11.058 0 01-2.605-2.606.75.75 0 01.177-1.046zm17.59 0a.75.75 0 01.176 1.046
11.057 11.057 0 01-2.605 2.605.75.75 0 11-.869-1.222 9.558 9.558 0 002.252-2.252.75.75 0 011.046-.177zM9.543
21.982a.75.75 0 01.864-.615 9.56 9.56 0 003.186 0 .75.75 0 01.25 1.48 11.066 11.066 0 01-3.686 0 .75.75 0 01-.614-.865z`}
></path>
</svg>
)
}
];
const HeroSection = () => {
return (
<Fragment>
<Container maxW="6xl" px={{ base: 6, md: 10 }} py={14}>
<Stack direction={{ base: 'column', md: 'row' }}>
<Stack direction="column" spacing={10} justifyContent="center">
<chakra.h1 fontSize="5xl" lineHeight={1} fontWeight="bold" textAlign="left">
Production-ready
<chakra.span bgGradient="linear(to-br, #228be6, #15aabf)" bgClip="text">
{' '}
Projects and Components{' '}
</chakra.span>{' '}
<br /> built on top of Chakra UI
</chakra.h1>
<Text
color={useColorModeValue('gray.500', 'gray.400')}
fontSize="lg"
textAlign="left"
fontWeight="400"
maxW="700px"
>
Build fully functional accessible web applications faster than ever – TemplatesKart
includes more than 80 customizable components and hooks to cover you in any situation
</Text>
<Stack
direction={{ base: 'column', md: 'row' }}
spacing={{ base: 5, md: 10 }}
flexWrap="wrap"
>
{features.map((feature, index) => (
<Stack key={index} direction={{ base: 'row', md: 'column' }} spacing={2}>
<Flex
p={3}
maxH="52px"
w="max-content"
color="white"
bgGradient="linear(to-br, #228be6, #15aabf)"
rounded="md"
>
{feature.icon}
</Flex>
<Stack direction="column" spacing={2}>
<Text fontSize="md" fontWeight="500">
{feature.title}
</Text>
<Text fontSize="sm" color="gray.400" maxW={{ base: '100%', md: '200px' }}>
{feature.detail}
</Text>
</Stack>
</Stack>
))}
</Stack>
<Stack
direction={{ base: 'column', sm: 'row' }}
spacing={{ base: 0, sm: 2 }}
flexWrap="wrap"
>
<chakra.button
h={12}
px={6}
bgGradient="linear(to-br, #228be6, #15aabf)"
color="white"
_hover={{ bgGradient: 'linear(to-br, #228be6, #228be6)' }}
variant="solid"
size="lg"
rounded="md"
fontWeight="bold"
mb={{ base: 2, sm: 0 }}
>
<chakra.span> Get started </chakra.span>
</chakra.button>
<Flex
border="1px solid"
borderColor="gray.700"
justifyContent="center"
p={3}
px={4}
lineHeight={1.18}
rounded="md"
boxShadow="md"
fontWeight="bold"
alignItems="center"
as={Link}
>
<Icon as={FaGithub} h={4} w={4} />
<chakra.span ml={1}> Github</chakra.span>
</Flex>
</Stack>
</Stack>
</Stack>
</Container>
<Box overflow="hidden">
<svg
fill={useColorModeValue('#f7fafc', '#171923')}
width="150%"
height="56px"
transform="scaleX(-1)"
filter="drop-shadow(10px 5px 5px rgba(0, 0, 0, 0.05))"
preserveAspectRatio="none"
viewBox="0 0 1200 120"
xmlns="http://www.w3.org/2000/svg"
>
<path
d={`M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73
250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34
3V0H0v27.35a600.21 600.21 0 00321.39 29.09z`}
></path>
</svg>
</Box>
</Fragment>
);
};
export default HeroSection;
With Background image
import * as React from 'react';
import {
chakra,
Stack,
HStack,
Text,
Box,
Flex,
Link,
Icon,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub } from 'react-icons/fa';
const HeroSection = () => {
return (
<Stack
p={{ base: 5, md: 10 }}
direction={{ base: 'column', md: 'row' }}
bgImage={{
base: 'none',
md: 'url(https://mantine.dev/static/banner-3aed73d88ba2f8fca5f19f43eb8df554.webp)'
}}
backgroundSize="480px"
backgroundPosition="center right"
backgroundRepeat="no-repeat"
minH={{ base: 'unset', md: '450px' }}
>
<Box
bgImage={{ base: 'none', md: 'linear-gradient(45deg, #e9ecef 25%, rgba(0, 0, 0, 0) 95%)' }}
position="absolute"
top="0"
bottom="0"
left="0"
right="0"
zIndex="0"
opacity="0.8"
></Box>
<Stack
pos="relative"
zIndex={1}
direction="column"
justifyContent="center"
spacing={6}
maxW="550px"
>
<chakra.h1
fontSize={{ base: '3xl', sm: '5xl' }}
lineHeight={1}
fontWeight="bold"
textAlign="left"
>
Explore TemplatesKart <br />
</chakra.h1>
<Text
fontSize="1.2rem"
textAlign="left"
lineHeight="1.375"
fontWeight="400"
color={useColorModeValue('gray.500', 'gray.700')}
>
TemplatesKart is a set of more than 100 responsive components built with chakraUI. All
components support dark/light color scheme and chakraUI theme customizations.
TemplatesKart is free for everyone.
</Text>
<HStack spacing={{ base: 0, sm: 2 }} flexWrap="wrap">
<chakra.button
h={10}
px={6}
color="white"
variant="solid"
fontSize="md"
rounded="md"
mb={{ base: 2, sm: 0 }}
zIndex={5}
lineHeight={1}
bg="blue.400"
_hover={{ bg: 'blue.600' }}
>
View Components
</chakra.button>
<Flex
as={Link}
justifyContent="center"
h={10}
px={6}
lineHeight={1.18}
rounded="md"
fontWeight="bold"
alignItems="center"
bg={useColorModeValue('gray.200', 'gray.600')}
_hover={{ bg: useColorModeValue('gray.200', 'gray.700') }}
>
<Icon as={FaGithub} h={4} w={4} />
<chakra.span ml={1}> Source code</chakra.span>
</Flex>
</HStack>
</Stack>
</Stack>
);
};
export default HeroSection;
With gradient cover
import { chakra, Link, Stack, Box, Button, useColorModeValue } from '@chakra-ui/react';
// Here we have used react-icons package for the icon
import { FaGithub } from 'react-icons/fa';
import { BsDiscord } from 'react-icons/bs';
const Index = () => {
return (
<Box pb={8}>
<Stack
pos="relative"
bgGradient={`linear(to-l, blue.500, blue.400 , cyan.400)`}
height="250px"
w="100%"
></Stack>
<Box maxW="3xl" p={4} isolation="isolate" zIndex={3} mt="-10rem" marginInline="auto">
<Box
boxShadow={useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.9)'
)}
bg={useColorModeValue('white', 'gray.800')}
p={{ base: 4, sm: 8 }}
overflow="hidden"
rounded="2xl"
>
<Stack pos="relative" zIndex={1} direction="column" spacing={5} textAlign="left">
<chakra.h1 fontSize="4xl" lineHeight={1.2} fontWeight="bold">
Explore TemplatesKart
</chakra.h1>
<chakra.h1 color="gray.400" fontSize="xl" maxW="600px" lineHeight={1.2}>
TemplatesKart is a set of more than 100 responsive components built with chakraUI. All
components support dark/light color scheme and chakraUI theme customizations.
TemplatesKart is free for everyone.
</chakra.h1>
<Stack direction={{ base: 'column', md: 'row' }} spacing={3}>
<chakra.button
h={10}
px={6}
color="white"
fontSize="md"
variant="solid"
rounded="md"
lineHeight={1}
bg="blue.400"
_hover={{ bg: 'blue.600' }}
>
View Components
</chakra.button>
<Button
leftIcon={<FaGithub />}
as={Link}
href="#"
rounded="md"
colorScheme="gray"
variant="solid"
>
Github Discussions
</Button>
<Button
leftIcon={<BsDiscord />}
as={Link}
href="#"
rounded="md"
color="white"
variant="solid"
colorScheme="purple"
_hover={{ bg: 'purple.600' }}
>
Discord community
</Button>
</Stack>
</Stack>
</Box>
</Box>
</Box>
);
};
export default Index;
Centered with logos
import * as React from 'react';
import { Container, Heading, Stack, HStack, Text, Button, Image } from '@chakra-ui/react';
const companiesImages = [
'https://images.unsplash.com/photo-1614680376593-902f74cf0d41?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
'https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
'https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
'https://images.unsplash.com/photo-1614680376408-81e91ffe3db7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
'https://images.unsplash.com/photo-1611162617263-4ec3060a058e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80'
];
const HeroSection = () => {
return (
<Container maxW="7xl" p={4}>
<Stack direction="column" spacing={6} alignItems="center" mt={8} mb={16}>
<Heading as="h1" fontSize="4xl" fontWeight="bold" textAlign="center" maxW="600px">
We're on a mission to make <br /> building UIs more accessible
</Heading>
<Text maxW="500px" fontSize="lg" textAlign="center" color="gray.500">
Our mission is to empower anyone to build UIs, faster. We're reducing the entry barrier,
making design skills accessible.
</Text>
<HStack spacing={5}>
<Button colorScheme="teal" variant="solid" rounded="md" size="lg">
Get Started
</Button>
</HStack>
</Stack>
<Stack spacing={5} alignItems="center" mb={8}>
<HStack
spacing={{ base: 0, md: 10 }}
justifyContent="center"
maxW={{ base: '500px', md: '100%' }}
flexWrap="wrap"
>
{companiesImages.map((img, index) => (
<Image
key={index}
src={img}
alt="company logo"
w={{ base: '8rem', md: '5rem' }}
p={{ base: 5, md: 0 }}
/>
))}
</HStack>
<Text maxW="500px" fontSize="md" textAlign="center" color="gray.500">
The world's best product teams trust us to deliver an unrivaled experience for both
developers and users.
</Text>
</Stack>
</Container>
);
};
export default HeroSection;
Simply Centered
import * as React from 'react';
import { Container, chakra, Stack, Text, Button, Box } from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub } from 'react-icons/fa';
const HeroSection = () => {
return (
<Container p={{ base: 8, sm: 14 }}>
<Stack direction="column" spacing={6} alignItems="center">
<Box py={2} px={3} bg="teal" w="max-content" color="white" rounded="md" fontSize="sm">
<Stack direction={{ base: 'column', sm: 'row' }}>
<Text fontWeight="bold">Ready, Set, Build! 🚀</Text>
<Text>Join the Hackathon!</Text>
</Stack>
</Box>
<chakra.h1
fontSize={{ base: '4xl', sm: '5xl' }}
fontWeight="bold"
textAlign="center"
maxW="600px"
>
Create accessible React apps{' '}
<chakra.span color="teal" bg="linear-gradient(transparent 50%, #83e9e7 50%)">
with speed
</chakra.span>
</chakra.h1>
<Text maxW="550px" fontSize="xl" textAlign="center" color="gray.500">
Chakra UI is a simple, modular and accessible component library that gives you the
building blocks you need to build your React applications.
</Text>
<Stack
direction={{ base: 'column', sm: 'row' }}
w={{ base: '100%', sm: 'auto' }}
spacing={5}
>
<Button
colorScheme="teal"
variant="outline"
rounded="md"
size="lg"
height="3.5rem"
fontSize="1.2rem"
>
Get Started
</Button>
<Button
leftIcon={<FaGithub />}
colorScheme="gray"
variant="outline"
rounded="md"
size="lg"
height="3.5rem"
fontSize="1.2rem"
>
Github
</Button>
</Stack>
</Stack>
</Container>
);
};
export default HeroSection;
Product Intro
import * as React from 'react';
import {
Container,
Heading,
Stack,
HStack,
Text,
useColorModeValue,
Button,
Image,
Skeleton,
Box,
Link
} from '@chakra-ui/react';
const ProductIntro = () => {
return (
<Container maxW="5xl" px={{ base: 6, md: 3 }} py={10}>
<Stack direction={{ base: 'column-reverse', md: 'row' }}>
<Stack direction="column" spacing={6}>
<Heading
as="h3"
size="lg"
fontWeight="bold"
textAlign="left"
maxW={{ base: '100%', md: '480px' }}
>
The only eCommerce platform you’ll ever need.
</Heading>
<Text
color={useColorModeValue('gray.700', 'gray.400')}
fontSize="1.2rem"
textAlign="left"
lineHeight="1.375"
fontWeight="300"
maxW={{ base: '100%', md: '470px' }}
>
Build, customize and scale your store with no limits or license fees. Abc is the free,
open-source eCommerce framework for digitally-native brands, fast-growing online
businesses and pragmatic developers.
</Text>
<HStack spacing={3}>
<Button colorScheme="teal" variant="solid" size="md" rounded="md" boxShadow="md">
Get Started
</Button>
<Box
border="1px solid"
borderColor="gray.300"
p={2}
px={4}
lineHeight={1.18}
rounded="md"
boxShadow="md"
as={Link}
>
Demo
</Box>
</HStack>
<HStack spacing={5}>
{['100% Free', 'Open Source'].map((text, index) => (
<HStack spacing={2} key={index}>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
>
<path
d="M6.97665 13.425C6.90165 13.425 6.82665 13.425 6.67665 13.425C6.30165 13.35 6.00165 13.125 5.85165 12.825L4.05165 10.2C3.90165 9.975 3.90165 9.6 4.20165 9.45C4.27665 9.375 4.42665 9.375 4.50165 9.375C4.65165 9.375 4.87665 9.45 4.95165 9.6L6.82665 12.225C6.90165 12.3 6.90165 12.3 6.97665 12.3C6.97665 12.3 6.97665 12.3 7.05165 12.3C7.12665 12.3 7.12665 12.3 7.20165 12.225C7.20165 12.225 7.27665 12.225 7.27665 12.15L13.2017 4.725C13.2767 4.575 13.5017 4.5 13.6517 4.5C13.8017 4.5 13.8767 4.575 14.0267 4.65C14.1767 4.725 14.2517 4.875 14.2517 5.025C14.2517 5.175 14.2517 5.325 14.1017 5.475L8.25165 12.9C8.17665 12.975 8.02665 13.125 7.95165 13.2C7.50165 13.35 7.27665 13.425 6.97665 13.425Z"
fill="#66C789"
></path>
<path
d="M9 18C4.05 18 0 13.95 0 9C0 4.05 4.05 0 9 0C13.95 0 18 4.05 18 9C18 13.95 13.95 18 9 18ZM9 1.125C4.65 1.125 1.125 4.65 1.125 9C1.125 13.35 4.65 16.875 9 16.875C13.35 16.875 16.875 13.35 16.875 9C16.875 4.65 13.35 1.125 9 1.125Z"
fill="#66C789"
></path>
</svg>
<Text fontSize="xs">{text}</Text>
</HStack>
))}
</HStack>
</Stack>
<Box ml={{ base: 0, md: 5 }}>
<Image
w="100%"
h="100%"
minW={{ base: 'auto', md: '30rem' }}
objectFit="cover"
src="https://images.unsplash.com/photo-1625948515291-69613efd103f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80"
rounded="md"
fallback={<Skeleton />}
/>
</Box>
</Stack>
</Container>
);
};
export default ProductIntro;
Show Info
import * as React from 'react';
import { Flex, Avatar, Box, Container } from '@chakra-ui/react';
import { MotionBox, MotionFlex } from './motion';
import Header from './header';
const ANIMATION_DURATION = 0.5;
const IntroSection = () => {
const color = 'blue.400';
return (
<Container maxW="5xl" p={{ base: 5, md: 12 }}>
<Flex direction={['column', 'column', 'row']}>
<MotionBox
opacity="0"
initial={{
translateX: -150,
opacity: 0
}}
animate={{
translateX: 0,
opacity: 1,
transition: {
duration: ANIMATION_DURATION
}
}}
m="auto"
mb={[16, 16, 'auto']}
>
<MotionBox whileHover={{ scale: 1.2 }} rounded="full" shadow="lg">
<Avatar
size="2xl"
showBorder={true}
borderColor={color}
src={'https://avatars2.githubusercontent.com/u/37842853?v=4'}
/>
</MotionBox>
</MotionBox>
<MotionFlex
position="relative"
ml={['auto', 'auto', 16]}
m={['auto', 'initial']}
w={['90%', '85%', '80%']}
maxW="800px"
opacity="0"
justifyContent="center"
direction="column"
initial={{
opacity: 0,
translateX: 150
}}
animate={{
opacity: 1,
translateX: 0,
transition: {
duration: ANIMATION_DURATION
}
}}
>
<Box position="relative">
<MotionBox whileHover={{ translateY: -5 }} width="max-content">
<Header underlineColor={color} mt={0} cursor="pointer" width="max-content">
Hey!
</Header>
</MotionBox>
</Box>
<Box as="h2" fontSize="2xl" fontWeight="400" textAlign="left">
My name is{' '}
<Box as="strong" fontWeight="600">
Ahmad
</Box>{' '}
and I'm a{' '}
<Box as="span" whiteSpace="nowrap">
Full Stack Developer and
</Box>{' '}
<Box as="span" whiteSpace="nowrap">
an open source lover
</Box>
from{' '}
<Box as="span" whiteSpace="nowrap">
Pakistan 🇵🇰
</Box>
</Box>
<Box as="h2" fontSize="2xl" fontWeight="400" mt={5} textAlign="left">
This is my digital garden, where I write about the things I'm working on and share
what I've learned. 😊
</Box>
</MotionFlex>
</Flex>
</Container>
);
};
export default IntroSection;
import { Box, BoxProps } from '@chakra-ui/react';
import { PropsWithChildren } from 'react';
interface HeaderProps extends BoxProps {
underlineColor: string;
}
const Header = ({ children, underlineColor, ...props }: PropsWithChildren<HeaderProps>) => (
<Box
as="h1"
mt={10}
mb={6}
fontSize="3xl"
lineHeight="shorter"
fontWeight="bold"
{...props}
textAlign="left"
>
<UnderlinedText color={underlineColor}>{children}</UnderlinedText>
</Box>
);
interface UnderlinedTextProps {
color: string;
h?: string;
zIndex?: number;
}
const UnderlinedText = (props: PropsWithChildren<UnderlinedTextProps>) => (
<Box as="span" display="inline-block" position="relative">
{props.children}
<Box
as="span"
display="block"
position="absolute"
bg={props.color || 'gray.200'}
w="100%"
h={props.h || '1px'}
bottom={-2}
/>
</Box>
);
export default Header;
import { Box, Flex, forwardRef } from '@chakra-ui/react';
import { motion, isValidMotionProp } from 'framer-motion';
export const MotionBox = motion(
forwardRef((props, ref) => {
const chakraProps = Object.fromEntries(
Object.entries(props).filter(([key]) => !isValidMotionProp(key))
);
return <Box ref={ref} {...chakraProps} />;
})
);
export const MotionFlex = motion(
forwardRef((props, ref) => {
const chakraProps = Object.fromEntries(
Object.entries(props).filter(([key]) => !isValidMotionProp(key))
);
return <Flex ref={ref} {...chakraProps} />;
})
);
With image cover
import { Box, Link, Heading, Flex, Text, Button } from '@chakra-ui/react';
const Header = () => {
return (
<Box
position="relative"
bgImage="url('/assets/images/projects/airbnb/airbnb-home.jpg')"
bgPosition="center"
bgRepeat="no-repeat"
bgSize="cover"
p={6}
>
<Link to="/">
<Heading as="h1" size="4xl">
<Box as="span" height="1px" width="1px" position="absolute" overflow="hidden">
AirBnb
</Box>
<svg
viewBox="0 0 1000 1000"
role="presentation"
aria-hidden="true"
focusable="false"
style={{
height: '32px',
width: '32px',
display: 'block',
fill: '#ffffff'
}}
>
<title>AirBnb</title>
<path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path>
</svg>
</Heading>
</Link>
<Box margin="0 auto" maxW="64rem" py={{ base: '1rem', lg: '8rem' }}>
<Heading as="h2" fontSize={{ base: '2.25rem', lg: '3rem' }} mb="4" color="#fff">
Book a trip. Host travels. All on Airbnb.
</Heading>
<Flex
justifyContent="start"
flexDirection={{ base: 'column', lg: 'row' }}
align-items="center"
maxWidth="42rem"
marginX={{ base: 'auto', lg: '0' }}
>
<Box
pr={{ base: 0, lg: 5 }}
width={{ base: '100%', lg: '50%' }}
mb={{ base: '1rem', lg: '0' }}
>
<Text mb="0.5rem" color="#fff">
Find places to stay and things to do
</Text>
<Button
as={Link}
bg="#fff"
color="#000000"
fontWeight="bold"
px="2.5rem"
py="1.5rem"
width="full"
border="2px solid #fff"
rounded="md"
_hover={{ bg: 'gray.300', textDecoration: 'none' }}
>
Explore
</Button>
</Box>
<Box pl={{ base: 0, lg: 5 }} width={{ base: '100%', lg: '50%' }}>
<Text mb="0.5rem" color="#fff">
Earn money from your extra space
</Text>
<Button
as={Link}
bg="transparent"
color="#fff"
fontWeight="bold"
px="2.5rem"
py="1.5rem"
width="full"
border="2px solid #fff"
rounded="md"
_hover={{ bg: 'gray.800', textDecoration: 'none' }}
>
Host
</Button>
</Box>
</Flex>
</Box>
</Box>
);
};
export default Header;
