project launch

FathyMuhamed · Apr 25, 2022 · 7718afe · 7718afe
1 parent a514435
commit 7718afe
Show file tree

Hide file tree

Showing 20 changed files with 6,727 additions and 2,489 deletions.
diff --git a/README.md b/README.md
@@ -1,34 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# ProHouse
+Find Your Best Smart Real Estate.
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/components/Banner.jsx b/components/Banner.jsx
@@ -0,0 +1,22 @@
+import { Flex, Box, Text, Button } from '@chakra-ui/react';
+import Link from 'next/link';
+import Image from 'next/image';
+
+const Banner = ({ purpose, imgUrl, title1, title2, desc1, desc2, linkName, buttonText }) => (
+    <Flex flexWrap="wrap" justifyContent="center" alignItems="center" m="10">
+        <Image src={imgUrl} alt={purpose} width={500} height={500} />
+        <Box p={5}>
+            <Text color="gray.500" fontSize="sm" fontWeight="medium">{purpose}</Text>
+            <Text fontSize="3xl" fontWeight="bold">{title1}<br /> {title2}</Text>
+            <Text color="gray.700" fontSize="lg" paddingY={3}>{desc1} <br /> {desc2}</Text>
+            <Button fontSize="lg" color="white" bg="blue.300" bgGradient='linear(to-r,  #005c97, #363795)'
+                        fontWeight='extrabold'>
+                <Link href={linkName}>
+                    {buttonText}
+                </Link>
+            </Button>
+        </Box>
+    </Flex>
+)
+
+export default Banner;
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -0,0 +1,10 @@
+import { Box } from '@chakra-ui/layout';
+
+export default function Footer() {
+    return (
+        <Box textAlign="center" p={5} borderTop="1px" fontSize="lg" color="gray.600" borderColor="gray.100">2022 LocalEstate,Inc</Box>
+    )
+}
+
+
+
diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Box } from '@chakra-ui/react';
+import Head from 'next/head';
+import NavBar from './NavBar';
+import Footer from './Footer';
+
+export default function Layout({ children }) {
+    return (
+        <>
+            <Head>
+                <title>ProHouse</title>
+            </Head>
+            <Box maxWidth='1280px' m='auto'>
+                <NavBar />
+                <main>{children}</main>
+                <Footer />
+            </Box>
+        </>
+    )
+}
diff --git a/components/NavBar.jsx b/components/NavBar.jsx
@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { Flex } from '@chakra-ui/layout';
+import { Box, Spacer, Menu, MenuButton, MenuItem, IconButton, MenuList, Heading, Text } from '@chakra-ui/react';
+import { FcMenu, FcHome, FcAbout } from 'react-icons/fc'
+import { BsSearch } from 'react-icons/bs'
+import { FiKey } from 'react-icons/fi'
+
+function NavBar() {
+    return (
+        <Flex p="2" borderBottom="1px" borderColor="gray.100">
+            <Box fontSize="3xl" fontWeight="bold" color="blue.400" cursor="pointer" >
+                <Link href="/" paddingLef="2" passHref >
+                    <Text bgGradient='linear(to-l, blue.200, blue.600)'
+                        bgClip='text'
+                        fontSize='3xl'
+                        fontWeight='extrabold'>ProHouse</Text>
+                </Link>
+            </Box>
+            <Spacer />
+            <Box>
+                <Menu>
+                    <MenuButton as={IconButton} icon={<FcMenu />} variant="outlined" color="red.400" />
+                    <MenuList>
+                        <Link href="/" passHref>
+                            <MenuItem icon={<FcHome />}>Home</MenuItem>
+                        </Link>
+                        <Link href="/search" passHref>
+                            <MenuItem icon={<BsSearch />}>search</MenuItem>
+                        </Link>
+                        <Link href="/search?purpose=for-sale" passHref>
+                            <MenuItem icon={<FcAbout />}>Buy property</MenuItem>
+                        </Link>
+                        <Link href="/search?purpose=for-rent" passHref>
+                            <MenuItem icon={<FiKey />}>Rent property </MenuItem>
+                        </Link>
+                    </MenuList>
+                </Menu>
+            </Box>
+        </Flex>
+    )
+}
+
+export default NavBar
+
diff --git a/components/Property.jsx b/components/Property.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import Link from 'next/link';
+import Image from 'next/image';
+import { Box, Flex, Text } from '@chakra-ui/layout';
+import { Avatar } from '@chakra-ui/avatar';
+import { FaBed, FaBath } from 'react-icons/fa';
+import { BsGridFill } from 'react-icons/bs';
+import { GoVerified } from 'react-icons/go';
+import millify from 'millify'
+
+function Property({ property: { coverPhoto, price, rentFrequency, rooms, title, baths, area, agency, isVerified, externalID } }) {
+
+  return (
+    <Link href={`/property/${externalID}`} passHref>
+      <Flex flexWrap='wrap'  w='420px' p='5' paddingTop='0px' cursor='pointer' >
+        <Box>
+          <Image src={coverPhoto ? coverPhoto.url : DefaultImage} alt={area} width={400} height={260} />
+        </Box>
+        <Box w='full'>
+          <Flex paddingTop='2' alignItems='center' justifyContent='space-between'>
+            <Flex alignItems='center'>
+              <Box paddingRight='3' color='green.400'>{isVerified && <GoVerified />}</Box>
+              <Text fontWeight='bold' fontSize='lg'>AED {millify(price)}{rentFrequency && `/${rentFrequency}`}</Text>
+            </Flex>
+            <Box>
+              <Avatar size='sm' src={agency?.logo?.url}></Avatar>
+            </Box>
+          </Flex>
+          <Flex alignItems='center' p='1' justifyContent='space-between' w='250px' color='blue.400'>
+            {rooms}
+            <FaBed /> | {baths} <FaBath /> | {millify(area)} sqft <BsGridFill />
+          </Flex>
+          <Text fontSize='lg'>
+            {title.length > 30 ? title.substring(0, 30) + '...' : title}
+          </Text>
+        </Box>
+      </Flex>
+    </Link>
+  )
+}
+
+export default Property
diff --git a/components/SearchFilters.jsx b/components/SearchFilters.jsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+import { useRouter } from 'next/router';
+import { Flex, Box, Select } from '@chakra-ui/react';
+import { filterData, getFilterValues } from './../utils/filterdata';
+export default function SearchFilters() {
+    const [filters, setFilters] = useState(filterData)
+    const searchProprties = (filterValues) => {
+
+    }
+    return (
+        <Flex flexWrap="wrap" justifyContent="center" bg="gray.100" p={4}  >
+            {
+                filters.map(filter => (
+                    <Box key={filter.queryName}   >
+                        <Select
+                        w="fit-content"
+                        p="2"
+                        placeholder={filter.placeholder}
+                            onChange={(e) => searchProprties({ [filter.queryName]: e.target.value })}
+                        >
+
+                        </Select>
+                    </Box>
+                ))
+            }
+        </Flex>
+    )
+}
+
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['bayut-production.s3.eu-central-1.amazonaws.com']
+  }
 }
 
 module.exports = nextConfig