sick lake
code : pages/index.js :
import Link from "next/link";
import Image from "next/image";
import { Flex, Box, Text, Button } from "@chakra-ui/react";
const Banner = ({
purpose,
title1,
title2,
desc1,
desc2,
linkName,
buttonText,
imageUrl,
}) => {
<Flex flexWrap='wrap' justifyContent='center' alignItems='center' m='10'>
<Image src={imageUrl} width={500} height={300} alt='banner' />
<Box p='5'>
<Text color='grey.500' fontSize='sm' fontWeight='medium'>
{purpose}
</Text>
<Text fontSize='3xl' fontWeight='bold'>
{title1} <br /> {title2}
</Text>
<Text fontSize='lg' paddingTop='3' paddingBottom='3' color='grey.700'>
{desc1} <br /> {desc2}
</Text>
<Button fontSize='xl' bg='blue.300' color='white'>
<Link href={linkName}>{buttonText}</Link>
</Button>
</Box>
</Flex>;
};
export default function Home() {
return (
<div>
<h1>ZORAIZ</h1>
<Banner
purpose='Rent a Home'
title1='Rental for '
title2='Everyone'
desc1='Explore Apartment, Villas, Homes'
desc2='and more'
buttonText='Explore Renting'
linkName='/search?purpose=for-rent'
imageUrl='https://aniportalimages.s3.amazonaws.com/media/details/Realests-sgs10202110082256222021110916533020211110052110.jpg'
/>
<Banner
purpose='BUY A HOME'
title1='Find, Buy & Own Your'
title2='Dream Home'
desc1='Explore Apartment, Villas, Homes'
desc2='and more'
buttonText='Explore Buying'
linkName='/search?purpose=for-sale'
imageUrl='https://www.adobe.com/content/dam/cc/us/en/creativecloud/photography/discover/real-estate-photography/real-estate-photography_P1_900x420.jpg.img.jpg'
/>
</div>
);
}
small pewter
