├── .eslintrc.json ├── public ├── favicon.ico ├── images │ ├── 03.png │ ├── logo.png │ ├── Header.png │ ├── banner.png │ ├── jour │ │ ├── 01.png │ │ ├── Layer1.png │ │ ├── Layer2.png │ │ ├── Layer3.png │ │ ├── Layer4.png │ │ └── Layer5.png │ ├── article │ │ ├── 02.png │ │ ├── 02.avif │ │ └── user.svg │ ├── feature │ │ └── 03.png │ ├── popular │ │ ├── 01.png │ │ ├── Layer 654.png │ │ └── Layer 661.png │ ├── search │ │ ├── 01.avif │ │ ├── 02.avif │ │ ├── 03.avif │ │ ├── 04.avif │ │ ├── 05.avif │ │ ├── 06.avif │ │ ├── checked.svg │ │ └── arrow-right.svg │ ├── villa │ │ ├── 01.png │ │ └── 02.png │ ├── product │ │ ├── 01.avif │ │ ├── 02.avif │ │ ├── user.png │ │ └── location.png │ ├── search-img.avif │ ├── offPlan │ │ ├── Layer1.png │ │ ├── Layer2.png │ │ ├── Layer3.png │ │ ├── Layer4.png │ │ └── Layer5.png │ ├── contact │ │ ├── facebook.svg │ │ ├── location-dot-solid.svg │ │ ├── arrow-right-long-solid.svg │ │ ├── envelope-solid.svg │ │ ├── phone-solid.svg │ │ ├── twitter.svg │ │ ├── whatsapp.svg │ │ └── instagram.svg │ ├── angle-down-solid.svg │ ├── angle-right.svg │ ├── arrow-left.svg │ ├── arrow-right-solid.svg │ ├── facebook.svg │ ├── sortby.svg │ ├── filter.svg │ ├── linkedin.svg │ ├── menu.svg │ └── arrow-right-45.svg ├── fonts │ └── MYRIADPRO-REGULAR.OTF ├── vercel.svg ├── thirteen.svg └── next.svg ├── assets ├── images │ ├── 40.jpg │ ├── lion.jpg │ ├── Header.png │ ├── Layer1.png │ ├── Layer2.png │ ├── Layer3.png │ ├── Layer4.png │ ├── Layer5.png │ ├── Layer 41.png │ ├── Layer 42.png │ ├── Layer 43.png │ ├── Layer 57.png │ ├── Layer 654.png │ └── Layer 661.png └── fonts │ └── Cormorant_Garamond │ ├── CormorantGaramond-Bold.ttf │ ├── CormorantGaramond-Italic.ttf │ ├── CormorantGaramond-Light.ttf │ ├── CormorantGaramond-Medium.ttf │ ├── CormorantGaramond-Regular.ttf │ ├── CormorantGaramond-SemiBold.ttf │ ├── CormorantGaramond-BoldItalic.ttf │ ├── CormorantGaramond-LightItalic.ttf │ ├── CormorantGaramond-MediumItalic.ttf │ ├── CormorantGaramond-SemiBoldItalic.ttf │ └── OFL.txt ├── jsconfig.json ├── postcss.config.js ├── pages ├── api │ └── hello.js ├── _document.js ├── _app.js ├── article │ └── RelatedPost.js ├── product │ └── index.js ├── home │ └── index.js ├── index.js └── contact │ └── index.js ├── components ├── border │ └── BorderBottom.js ├── font │ └── font.js ├── typegraphy │ ├── Text16.js │ ├── Text24.js │ ├── Text30.js │ ├── index.js │ ├── Text36.js │ ├── BlogDescription.js │ ├── Text14.js │ └── Text18.js ├── home │ ├── index.js │ ├── OurJournals.js │ ├── PopularAreas.js │ ├── Subscribe.js │ ├── OffPlanProperties.js │ ├── FeaturedApartments.js │ ├── FeaturedVillas.js │ ├── DowntownDubai.js │ └── Header.js ├── product │ ├── Title.js │ ├── SimilarProperty.js │ ├── Description.js │ ├── Features.js │ └── ListingAgent.js ├── card │ ├── InputBox.js │ ├── InputFilterBox.js │ └── ImageCard.js ├── footer │ ├── footer.item.js │ └── Footer.js ├── popup │ ├── OneSelect.js │ ├── MultipleSelect.js │ ├── Modal.js │ ├── PropertyModal.js │ ├── SortByModal.js │ ├── MultipleSelectOption.js │ └── PriceModal.js ├── popular │ └── PopularArea.js ├── feature │ ├── FeaturedVilla.js │ └── FeatureApart.js ├── plan │ └── Off-plan.js ├── pagination │ └── index.js ├── header │ ├── MenuItem.js │ ├── Header.item.js │ ├── Header.js │ ├── MobileHeader.item.js │ └── Navbar.js ├── staybil │ └── StaylBiling.js ├── dropdown │ ├── DropDownBox.js │ └── Dropdown.js ├── blog │ └── JournalItem.js ├── carousel │ ├── BlogCarousel.js │ ├── CarouselArray.js │ ├── Carousel.js │ └── SimilarCarousel.js ├── Journal │ └── Journal.js └── search │ └── SearchBar.js ├── next.config.js ├── .gitignore ├── versel.json ├── package.json ├── README.md ├── tailwind.config.js ├── contexts └── StateContext.js ├── themes └── index.js └── styles └── globals.css /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/favicon.ico -------------------------------------------------------------------------------- /assets/images/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/40.jpg -------------------------------------------------------------------------------- /public/images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/03.png -------------------------------------------------------------------------------- /assets/images/lion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/lion.jpg -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/logo.png -------------------------------------------------------------------------------- /assets/images/Header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Header.png -------------------------------------------------------------------------------- /assets/images/Layer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer1.png -------------------------------------------------------------------------------- /assets/images/Layer2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer2.png -------------------------------------------------------------------------------- /assets/images/Layer3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer3.png -------------------------------------------------------------------------------- /assets/images/Layer4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer4.png -------------------------------------------------------------------------------- /assets/images/Layer5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer5.png -------------------------------------------------------------------------------- /public/images/Header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/Header.png -------------------------------------------------------------------------------- /public/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/banner.png -------------------------------------------------------------------------------- /public/images/jour/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/01.png -------------------------------------------------------------------------------- /assets/images/Layer 41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 41.png -------------------------------------------------------------------------------- /assets/images/Layer 42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 42.png -------------------------------------------------------------------------------- /assets/images/Layer 43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 43.png -------------------------------------------------------------------------------- /assets/images/Layer 57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 57.png -------------------------------------------------------------------------------- /assets/images/Layer 654.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 654.png -------------------------------------------------------------------------------- /assets/images/Layer 661.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/images/Layer 661.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/images/article/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/article/02.png -------------------------------------------------------------------------------- /public/images/feature/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/feature/03.png -------------------------------------------------------------------------------- /public/images/popular/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/popular/01.png -------------------------------------------------------------------------------- /public/images/search/01.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/01.avif -------------------------------------------------------------------------------- /public/images/search/02.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/02.avif -------------------------------------------------------------------------------- /public/images/search/03.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/03.avif -------------------------------------------------------------------------------- /public/images/search/04.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/04.avif -------------------------------------------------------------------------------- /public/images/search/05.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/05.avif -------------------------------------------------------------------------------- /public/images/search/06.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search/06.avif -------------------------------------------------------------------------------- /public/images/villa/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/villa/01.png -------------------------------------------------------------------------------- /public/images/villa/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/villa/02.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/images/article/02.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/article/02.avif -------------------------------------------------------------------------------- /public/images/jour/Layer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/Layer1.png -------------------------------------------------------------------------------- /public/images/jour/Layer2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/Layer2.png -------------------------------------------------------------------------------- /public/images/jour/Layer3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/Layer3.png -------------------------------------------------------------------------------- /public/images/jour/Layer4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/Layer4.png -------------------------------------------------------------------------------- /public/images/jour/Layer5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/jour/Layer5.png -------------------------------------------------------------------------------- /public/images/product/01.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/product/01.avif -------------------------------------------------------------------------------- /public/images/product/02.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/product/02.avif -------------------------------------------------------------------------------- /public/images/product/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/product/user.png -------------------------------------------------------------------------------- /public/images/search-img.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/search-img.avif -------------------------------------------------------------------------------- /public/images/offPlan/Layer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/offPlan/Layer1.png -------------------------------------------------------------------------------- /public/images/offPlan/Layer2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/offPlan/Layer2.png -------------------------------------------------------------------------------- /public/images/offPlan/Layer3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/offPlan/Layer3.png -------------------------------------------------------------------------------- /public/images/offPlan/Layer4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/offPlan/Layer4.png -------------------------------------------------------------------------------- /public/images/offPlan/Layer5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/offPlan/Layer5.png -------------------------------------------------------------------------------- /public/fonts/MYRIADPRO-REGULAR.OTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/fonts/MYRIADPRO-REGULAR.OTF -------------------------------------------------------------------------------- /public/images/popular/Layer 654.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/popular/Layer 654.png -------------------------------------------------------------------------------- /public/images/popular/Layer 661.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/popular/Layer 661.png -------------------------------------------------------------------------------- /public/images/product/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/public/images/product/location.png -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-Medium.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spider-yamet/next_frontend/main/assets/fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /components/border/BorderBottom.js: -------------------------------------------------------------------------------- 1 | const BorderBottom = ({color}) => { 2 | return ( 3 |
4 | ); 5 | } 6 | 7 | export default BorderBottom; -------------------------------------------------------------------------------- /components/font/font.js: -------------------------------------------------------------------------------- 1 | import { Roboto } from "next/font/google"; 2 | 3 | export const roboto =Roboto({ 4 | subsets: ['latin'], 5 | display: 'swap', 6 | weight:['100', '300', '400', '500', '700', '900'] 7 | }) -------------------------------------------------------------------------------- /public/images/article/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/typegraphy/Text16.js: -------------------------------------------------------------------------------- 1 | const Text16 = ({color, text, weight}) => { 2 | return ( 3 |
4 | {text} 5 |
6 | ); 7 | } 8 | 9 | export default Text16; -------------------------------------------------------------------------------- /components/typegraphy/Text24.js: -------------------------------------------------------------------------------- 1 | const Text24 = ({color, text,weight}) => { 2 | return ( 3 |
4 | {text} 5 |
6 | ); 7 | } 8 | 9 | export default Text24; -------------------------------------------------------------------------------- /components/typegraphy/Text30.js: -------------------------------------------------------------------------------- 1 | const Text30 = ({text}) => { 2 | return ( 3 | 4 | {text} 5 | 6 | ); 7 | } 8 | 9 | export default Text30; -------------------------------------------------------------------------------- /components/typegraphy/index.js: -------------------------------------------------------------------------------- 1 | export {default as Text14} from './Text14'; 2 | export {default as Text16} from './Text16'; 3 | export {default as Text18} from './Text18'; 4 | export {default as Text24} from './Text24'; 5 | export {default as Text36} from './Text36'; 6 | -------------------------------------------------------------------------------- /components/typegraphy/Text36.js: -------------------------------------------------------------------------------- 1 | const Text36 = ({color,text,weight}) => { 2 | return ( 3 |
4 | {text} 5 |
6 | ); 7 | } 8 | 9 | export default Text36; -------------------------------------------------------------------------------- /components/home/index.js: -------------------------------------------------------------------------------- 1 | export * from './Header' 2 | export * from './FeaturedApartments' 3 | export * from './PopularAreas' 4 | export * from './DowntownDubai' 5 | export * from './FeaturedVillas' 6 | export * from './OffPlanProperties' 7 | export * from './OurJournals' 8 | export * from './Subscribe' -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /components/product/Title.js: -------------------------------------------------------------------------------- 1 | import { roboto } from "../font/font"; 2 | const ProductTitle = ({text}) => { 3 | return ( 4 | 5 | {text} 6 | 7 | ); 8 | } 9 | 10 | export default ProductTitle; -------------------------------------------------------------------------------- /components/typegraphy/BlogDescription.js: -------------------------------------------------------------------------------- 1 | const BlogDescription = ( 2 | {description} 3 | ) => { 4 | return ( 5 | 6 | {description} 7 | 8 | ); 9 | } 10 | 11 | export default BlogDescription; -------------------------------------------------------------------------------- /components/typegraphy/Text14.js: -------------------------------------------------------------------------------- 1 | import { roboto } from "../font/font"; 2 | 3 | const Text14 = ({color, text, weight,position}) => { 4 | return ( 5 |
6 | {text} 7 |
8 | ); 9 | } 10 | 11 | export default Text14; -------------------------------------------------------------------------------- /public/images/contact/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/contact/location-dot-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/contact/arrow-right-long-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/typegraphy/Text18.js: -------------------------------------------------------------------------------- 1 | import { roboto } from "../font/font"; 2 | 3 | const Text18 = ({color, text, weight,position}) => { 4 | return ( 5 |
6 | {text} 7 |
8 | ); 9 | } 10 | 11 | export default Text18; -------------------------------------------------------------------------------- /public/images/angle-down-solid.svg: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | formats: ['image/avif', 'image/webp'], 5 | }, 6 | reactStrictMode: true, 7 | eslint: { 8 | // Warning: This allows production builds to successfully complete even if 9 | // your project has ESLint errors. 10 | 11 | ignoreDuringBuilds: true, 12 | }, 13 | distDir: '.next', 14 | } 15 | 16 | module.exports = nextConfig 17 | -------------------------------------------------------------------------------- /public/images/contact/envelope-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/search/checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/angle-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/card/InputBox.js: -------------------------------------------------------------------------------- 1 | const InputBox = ({placeholder,value, setValue}) => { 2 | return ( 3 | setValue(e.target.value)} 7 | placeholder={placeholder} 8 | className="bg-transparent border-x border-y border-solid border-[#bbbbbb] outline-none py-2 px-5 text-lg text-[#898989] font-sans w-full" 9 | /> 10 | ); 11 | } 12 | 13 | export default InputBox; -------------------------------------------------------------------------------- /public/images/arrow-right-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/contact/phone-solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /public/images/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/search/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/card/InputFilterBox.js: -------------------------------------------------------------------------------- 1 | const InputFilterBox = ({placeholder,value, setValue, type}) => { 2 | return ( 3 | setValue(e.target.value)} 7 | placeholder={placeholder} 8 | className="bg-transparent border-2 border-solid border-customGray-400 outline-none py-2 px-5 text-sm leading-6 text-[#373737] font-normal font-sans rounded-[10px] w-full" 9 | /> 10 | ); 11 | } 12 | 13 | export default InputFilterBox; -------------------------------------------------------------------------------- /public/images/sortby.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/filter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/product/SimilarProperty.js: -------------------------------------------------------------------------------- 1 | import SimilarCarousel from "../carousel/SimilarCarousel"; 2 | import ProductTitle from "./Title"; 3 | 4 | const SimilarProperty = () => { 5 | const data =Array(4).fill(""); 6 | return ( 7 |
8 |
9 | 10 |
11 | 12 |
13 | ); 14 | } 15 | 16 | export default SimilarProperty; -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/contact/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/arrow-right-45.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import { ThemeProvider } from '@mui/material' 3 | import Header from '@/components/header/Header' 4 | import { StateProvider } from '@/contexts/StateContext'; 5 | import theme from '@/themes' 6 | 7 | import '@/styles/globals.css' 8 | 9 | export default function App({ Component, pageProps }) { 10 | return ( 11 | 12 | 13 |
14 | 15 | 16 | 17 | Board 18 | 19 | 20 | 21 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /components/footer/footer.item.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | label:"LIFE STYLES", 4 | children:[ 5 | { 6 | path:"#", 7 | label:"Beachfront" 8 | }, 9 | { 10 | path:"#", 11 | label:"Downtown Living" 12 | }, 13 | { 14 | path:"#", 15 | label:"Golf Estates" 16 | }, 17 | { 18 | path:"#", 19 | label:"Luxury Penthouses" 20 | }, 21 | { 22 | path:"#", 23 | label:"Residential Communities" 24 | }, 25 | { 26 | path:"#", 27 | label:"Waterfront Properties" 28 | }, 29 | ] 30 | } 31 | ] -------------------------------------------------------------------------------- /versel.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "board", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.8", 13 | "@emotion/styled": "^11.10.8", 14 | "@headlessui/react": "^1.6.0", 15 | "@mui/icons-material": "^5.11.16", 16 | "@mui/material": "^5.12.2", 17 | "eslint": "8.37.0", 18 | "eslint-config-next": "13.2.4", 19 | "next": "13.2.4", 20 | "react": "18.2.0", 21 | "react-dom": "18.2.0", 22 | "react-slick": "^0.29.0", 23 | "react-slider": "^2.0.4", 24 | "slick-carousel": "^1.8.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^10.4.14", 28 | "postcss": "^8.4.21", 29 | "tailwindcss": "^3.3.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "board", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "^11.10.8", 13 | "@emotion/styled": "^11.10.8", 14 | "@headlessui/react": "^1.6.0", 15 | "@mui/icons-material": "^5.11.16", 16 | "@mui/material": "^5.12.2", 17 | "eslint": "8.37.0", 18 | "eslint-config-next": "13.2.4", 19 | "next": "13.2.4", 20 | "react": "18.2.0", 21 | "react-dom": "18.2.0", 22 | "react-slick": "^0.29.0", 23 | "react-slider": "^2.0.4", 24 | "slick-carousel": "^1.8.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^10.4.14", 28 | "postcss": "^8.4.21", 29 | "tailwindcss": "^3.3.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/images/contact/whatsapp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/popup/OneSelect.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { GeneralTitle } from "./FilterModal"; 3 | 4 | const OneSelect = ({ data, title, setShow }) => { 5 | const handleFilterProperty = () => { 6 | setShow(true) 7 | }; 8 | return ( 9 |
10 |
11 | 12 | 18 |
19 | 20 |
21 | ); 22 | } 23 | 24 | export default OneSelect; -------------------------------------------------------------------------------- /components/popular/PopularArea.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Text16, Text24, Text36 } from "../typegraphy"; 3 | import BorderBottom from "../border/BorderBottom"; 4 | import ImageCard from "../card/ImageCard"; 5 | 6 | const PopularArea = () => { 7 | const data =[ 8 | { 9 | img:"/images/popular/01.png", 10 | title:"Business B", 11 | more:"Learn More" 12 | }, 13 | { 14 | img:"/images/popular/01.png", 15 | title:"Seaside Hil", 16 | more:"Learn More" 17 | }, 18 | { 19 | img:"/images/popular/01.png", 20 | title:"AVA at Plam Jumeir", 21 | more:"Learn More" 22 | } 23 | ] 24 | return ( 25 |
26 | 27 | 28 | 29 |
30 | ); 31 | } 32 | 33 | export default PopularArea; -------------------------------------------------------------------------------- /public/images/contact/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/feature/FeaturedVilla.js: -------------------------------------------------------------------------------- 1 | import BorderBottom from "../border/BorderBottom"; 2 | import DCarousel from "../carousel/3dCarousel"; 3 | import { Text36 } from "../typegraphy"; 4 | 5 | const FeaturedVilla = () => { 6 | const data =[ 7 | { 8 | id:1, 9 | img:"/images/villa/01.png" 10 | }, 11 | { 12 | id:2, 13 | img:"/images/villa/01.png" 14 | }, 15 | { 16 | id:3, 17 | img:"/images/villa/01.png" 18 | }, 19 | { 20 | id:4, 21 | img:"/images/villa/01.png" 22 | } 23 | ] 24 | return ( 25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 | 33 |
34 | ); 35 | } 36 | 37 | export default FeaturedVilla; -------------------------------------------------------------------------------- /components/plan/Off-plan.js: -------------------------------------------------------------------------------- 1 | import BorderBottom from "../border/BorderBottom"; 2 | import ImageCard from "../card/ImageCard"; 3 | import { Text36 } from "../typegraphy"; 4 | 5 | const OffPlan = () => { 6 | const data =[ 7 | { 8 | img:"/images/popular/01.png", 9 | title:"Business B", 10 | more:"Learn More" 11 | }, 12 | { 13 | img:"/images/popular/01.png", 14 | title:"Seaside Hil", 15 | more:"Learn More" 16 | }, 17 | { 18 | img:"/images/popular/01.png", 19 | title:"AVA at Plam Jumeir", 20 | more:"Learn More" 21 | } 22 | ] 23 | return ( 24 |
25 | 30 | 31 |
32 | 33 |
34 | 35 |
36 | ); 37 | } 38 | 39 | export default OffPlan; -------------------------------------------------------------------------------- /components/pagination/index.js: -------------------------------------------------------------------------------- 1 | export const paginate = (items, pageNumber, pageSize) => { 2 | const startIndex = (pageNumber - 1) * pageSize; 3 | return items.slice(startIndex, startIndex + pageSize); 4 | }; 5 | const Pagination = ({items, pageSize, currentPage, onPageChange,title}) => { 6 | const pagesCount = Math.ceil(items / pageSize); 7 | if (pagesCount === 1) return null; 8 | const pages = Array.from({ length: pagesCount }, (_, i) => i + 1); 9 | return ( 10 |
11 | { 12 | pages.map((page)=>( 13 | onPageChange(page)} 16 | className={` cursor-pointer text-base font-normal font-sans ${title==="search"?`text-white ${page===currentPage?'bg-[#0e0f12] border-x border-y border-solid border-white px-3 py-1':''}`:`text-black ${page===currentPage?'bg-[#f8f8f8] border-x border-y border-solid border-black px-3 py-1':''}`}`}> 17 | {page} 18 | 19 | )) 20 | } 21 |
22 | ); 23 | } 24 | 25 | export default Pagination; -------------------------------------------------------------------------------- /components/header/MenuItem.js: -------------------------------------------------------------------------------- 1 | import downSvg from "@/public/images/angle-down-solid.svg" 2 | import Image from 'next/image'; 3 | import { useRouter } from "next/router"; 4 | const MenuItems = ({ item, close, handleShowChildren 5 | }) => { 6 | const router = useRouter(); 7 | const handleRoute = (path) => { 8 | router.push(path); 9 | close() 10 | } 11 | return ( 12 |
13 | { 14 | item.map((items, index) => ( 15 |
handleShowChildren(items.children) : () => handleRoute(items.path)} 19 | > 20 |
21 | 22 | {items.label} 23 | 24 | 25 |
26 | {items.children && 27 | arrow} 33 |
34 | )) 35 | } 36 | 37 |
38 | ); 39 | } 40 | 41 | export default MenuItems; -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/staybil/StaylBiling.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Text18,Text36 } from "../typegraphy"; 3 | import { roboto } from "../font/font"; 4 | import ArrowRight from "@/public/images/angle-right.svg" 5 | const StayBiling = () => { 6 | return ( 7 |
8 |
9 | 10 | 11 |
12 |
13 | 18 |
19 | arrow 20 |
21 |
22 |
23 | ); 24 | } 25 | 26 | export default StayBiling; -------------------------------------------------------------------------------- /components/card/ImageCard.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { Text16, Text24 } from "../typegraphy"; 3 | 4 | const ImageCard = ({ data, section }) => { 5 | return ( 6 |
7 | { 8 | data.map((item, index) => ( 9 |
17 |
18 | 19 | 23 |
24 | 25 |
26 | )) 27 | } 28 |
29 | ); 30 | } 31 | 32 | export default ImageCard; -------------------------------------------------------------------------------- /components/header/Header.item.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | path:'/home', 4 | label:'Home', 5 | children:[ 6 | 7 | ] 8 | }, 9 | { 10 | path:'/buy', 11 | label:'Buy', 12 | children:[ 13 | { 14 | path:"/", 15 | label:"Apartments" 16 | }, 17 | ] 18 | }, 19 | { 20 | path:'/sell', 21 | label:'Sell', 22 | children:[ 23 | { 24 | path:"/", 25 | label:"Apartments" 26 | }, 27 | ] 28 | }, 29 | { 30 | path:'/product', 31 | label:'Rent', 32 | children:[ 33 | { 34 | path:"/", 35 | label:"Apartments" 36 | }, 37 | { 38 | path:"/", 39 | label:"Villa" 40 | }, 41 | { 42 | path:"/", 43 | label:"Penthouse" 44 | }, 45 | { 46 | path:"/", 47 | label:"Town house copy" 48 | }, 49 | { 50 | path:"/", 51 | label:"Plot" 52 | }, 53 | { 54 | path:"/", 55 | label:"Loft & Duplex" 56 | }, 57 | { 58 | path:"/", 59 | label:"Office" 60 | }, 61 | ] 62 | }, 63 | { 64 | path:'/property', 65 | label:'Properties', 66 | children:[] 67 | } 68 | ] -------------------------------------------------------------------------------- /components/dropdown/DropDownBox.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react' 2 | import { Listbox, Transition } from '@headlessui/react' 3 | import Image from 'next/image'; 4 | import downSvg from "@/public/images/angle-down-solid.svg" 5 | 6 | import { roboto } from '../font/font'; 7 | export function MyListbox({data, value,className,setSelected}) { 8 | 9 | return ( 10 |
11 | 12 |
13 | {value.title} 14 | arrow 15 |
16 | 17 | 23 | 24 | {data.map((person,index) => ( 25 | 31 | {person.title} 32 | 33 | ))} 34 | 35 | 36 | 37 | 38 |
39 | 40 | ) 41 | } -------------------------------------------------------------------------------- /components/popup/MultipleSelect.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { GeneralTitle } from "./FilterModal"; 3 | import { useEffect, useState } from "react"; 4 | 5 | const MultipleSelect = ({data, title,setShow}) => { 6 | const [option, setOption]= useState(data[0]); 7 | useEffect(()=>{ 8 | let temp =[...data]; 9 | const filterData = temp.filter((item)=>item.selected===true); 10 | console.log(filterData); 11 | if(filterData.length>1){ 12 | setOption({ 13 | label:"Custom" 14 | }) 15 | } 16 | if(filterData.length===1){ 17 | setOption(filterData[0]) 18 | } 19 | if(filterData.length===temp.length){ 20 | setOption({ 21 | label:"All" 22 | }) 23 | } 24 | },[data]) 25 | const handleFilterProperty = () => { 26 | setShow(true) 27 | }; 28 | return ( 29 |
30 | 31 | 37 |
38 | ); 39 | } 40 | 41 | export default MultipleSelect; -------------------------------------------------------------------------------- /components/blog/JournalItem.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const JournalItem = ({ item }) => { 4 | return ( 5 | 6 | 7 | blog 8 |
9 | 10 | Top 5 apartments in Downtown Dubai 11 | 12 | 13 | Here are the most beautiful apartments & penthouses that are ready to move in 14 | 15 |
16 |
17 | 18 | PORTFOLIO 19 | 20 | 21 | 22 | 23 | 24 | 4 MIN. READ 25 | 26 |
27 | 28 | APR 14TH, 2023 29 | 30 |
31 | 32 |
33 | 34 | ); 35 | } 36 | 37 | export default JournalItem; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 18 | 19 | [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`. 20 | 21 | 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. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | 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. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /components/home/OurJournals.js: -------------------------------------------------------------------------------- 1 | import { Box, Typography } from "@mui/material" 2 | 3 | import image1 from '../../assets/images/Layer1.png' 4 | import image2 from '../../assets/images/Layer2.png' 5 | import image3 from '../../assets/images/Layer3.png' 6 | import image4 from '../../assets/images/Layer4.png' 7 | import image5 from '../../assets/images/Layer5.png' 8 | import SimilarCarousel from "../carousel/SimilarCarousel" 9 | 10 | const propertyItems1= [ 11 | { img: '/images/offPlan/Layer1.png', 12 | title: 'The Escape: Cap Karoso', 13 | details: 'We take a look at Cap Karoso in Sumba, Indonesia.', 14 | portfolio: 'PORTFOLIO 4 MIN Read', 15 | date: 'APR 14TH, 2023' 16 | }, 17 | { img: '/images/offPlan/Layer2.png', 18 | title: 'The Escape: Cap Karoso', 19 | details: 'We take a look at Cap Karoso in Sumba, Indonesia.', 20 | portfolio: 'PORTFOLIO 4 MIN Read', 21 | date: 'APR 14TH, 2023' 22 | }, 23 | { img: '/images/offPlan/Layer3.png', 24 | title: 'The Escape: Cap Karoso', 25 | details: 'We take a look at Cap Karoso in Sumba, Indonesia.', 26 | portfolio: 'PORTFOLIO 4 MIN Read', 27 | date: 'APR 14TH, 2023' 28 | }, 29 | { img: '/images/offPlan/Layer4.png', 30 | title: 'The Escape: Cap Karoso', 31 | details: 'We take a look at Cap Karoso in Sumba, Indonesia.', 32 | portfolio: 'PORTFOLIO 4 MIN Read', 33 | date: 'APR 14TH, 2023' 34 | }, 35 | { img: '/images/offPlan/Layer5.png', 36 | title: 'The Escape: Cap Karoso', 37 | details: 'We take a look at Cap Karoso in Sumba, Indonesia.', 38 | portfolio: 'PORTFOLIO 4 MIN Read', 39 | date: 'APR 14TH, 2023' 40 | }, 41 | ] 42 | 43 | export const OurJournals = () => { 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 | ) 51 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const colors = require('tailwindcss/colors'); 3 | const defaultTheme = require('tailwindcss/defaultTheme') 4 | 5 | module.exports = { 6 | content: [ 7 | "./app/**/*.{js,ts,jsx,tsx}", 8 | "./pages/**/*.{js,ts,jsx,tsx}", 9 | "./components/**/*.{js,ts,jsx,tsx}", 10 | 11 | // Or if using `src` directory: 12 | "./src/**/*.{js,ts,jsx,tsx}", 13 | ], 14 | theme: { 15 | borderRadius: { 16 | 'none': '0', 17 | 'sm': '0.125rem', 18 | DEFAULT: '0.25rem', 19 | DEFAULT: '4px', 20 | 'md': '0.375rem', 21 | 'lg': '0.5rem', 22 | 'xl': '0.75rem', 23 | '2xl': '1rem', 24 | '3xl': '1.5rem', 25 | '4xl': '1.875rem', 26 | '5xl': '2.5rem', 27 | 'full': '9999px', 28 | 'large': '12px', 29 | }, 30 | letterSpacing:{ 31 | wider:'0.125em', 32 | widest:'0.3125em' 33 | }, 34 | colors:{ 35 | ...colors, 36 | 'gray':{ 37 | 200:'#101010', 38 | 300:'#3e4048', 39 | 500:"#a1a1a1", 40 | 600:"#AFAFAF", 41 | 700:"#757575", 42 | 800:'#7e7e7e', 43 | 900:'#3e3e3e' 44 | }, 45 | 'gras':{ 46 | 400:'#181718', 47 | 500:'#4d4c4d', 48 | 600:'#212121', 49 | 800:'#171717' 50 | }, 51 | 'customGray':{ 52 | 200:'#6f6f6f', 53 | 300:'#2f2f32', 54 | 400:'#c4c4c4', 55 | 500:'#696969', 56 | 600:'#454545', 57 | 700:'#61656d', 58 | 800:' #f7f8fa', 59 | 900:'#eaeaec' 60 | }, 61 | 'customBlack':{ 62 | 400:'#909090', 63 | } 64 | }, 65 | extend: { 66 | fontFamily:{ 67 | CormorantGaramond:['Cormorant Garamond, serif'], 68 | sans:['Poppins',...defaultTheme.fontFamily.sans], 69 | myraidPro:['MYRIADPRO'], 70 | }, 71 | zIndex: { 72 | '100': '100', 73 | } 74 | 75 | }, 76 | }, 77 | plugins: [], 78 | } -------------------------------------------------------------------------------- /contexts/StateContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useReducer } from "react" 2 | const initialState ={ 3 | isOpen:false, 4 | isSortOpen:false, 5 | isFilterOpen:false, 6 | isSortPcOpen:false 7 | } 8 | export const StateContext = createContext({}) 9 | export const StateProvider =({children})=>{ 10 | const reducer =(state, action)=>{ 11 | switch(action.type){ 12 | case 'ShowAdvancedModal': 13 | return { 14 | ...state, 15 | isOpen:!state.isOpen, 16 | } 17 | case 'HideAdvancedModal': 18 | return { 19 | ...state, 20 | isOpen:false, 21 | } 22 | case 'ShowSortModal': 23 | return { 24 | ...state, 25 | isSortOpen:!state.isSortOpen, 26 | } 27 | case 'HideSortModal': 28 | return { 29 | ...state, 30 | isSortOpen:false, 31 | } 32 | case 'ShowFilterModal': 33 | return { 34 | ...state, 35 | isFilterOpen:!state.isFilterOpen, 36 | } 37 | case 'HideFilterModal': 38 | return { 39 | ...state, 40 | isFilterOpen:false, 41 | } 42 | case 'ShowSortPcModal': 43 | return { 44 | ...state, 45 | isSortPcOpen:true 46 | } 47 | case 'HideSortPcModal': 48 | return { 49 | ...state, 50 | isSortPcOpen:false, 51 | } 52 | } 53 | 54 | } 55 | const [state, dispatch] = useReducer(reducer, initialState); 56 | return ( 57 | 58 | {children} 59 | 60 | ) 61 | } -------------------------------------------------------------------------------- /pages/article/RelatedPost.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | 3 | const RelatedPost = () => { 4 | const post = Array(3).fill(""); 5 | return ( 6 |
7 | 8 | Related Posts 9 | 10 |
11 | { 12 | post.map((item, i) => ( 13 |
14 | related-post 15 | 16 | Design House: A Glamorous Dubai Hills Villa 17 | 18 |
19 | 20 | popular areas 21 | 22 | 23 | 24 | april 19, 2023 25 | 26 |
27 |
28 | )) 29 | } 30 |
31 |
32 | ); 33 | } 34 | 35 | export default RelatedPost; -------------------------------------------------------------------------------- /components/home/PopularAreas.js: -------------------------------------------------------------------------------- 1 | import { Box, Grid, Typography } from "@mui/material" 2 | import DCarousel from '../carousel/3dCarousel' 3 | 4 | const data =[ 5 | { 6 | id:1, 7 | img:"/images/popular/Layer 654.png", 8 | text1: 'DOWNTOWN DUBAI', 9 | text2: 'PENTHOUSE' 10 | }, 11 | { 12 | id:2, 13 | img:"/images/popular/Layer 661.png", 14 | text1: 'DOWNTOWN DUBAI', text2: 'PENTHOUSE' 15 | }, 16 | { 17 | id:3, 18 | img:"/images/popular/Layer 654.png", 19 | text1: 'DOWNTOWN DUBAI', text2: 'PENTHOUSE' 20 | }, 21 | { 22 | id:4, 23 | img:"/images/popular/Layer 661.png", 24 | text1: 'DOWNTOWN DUBAI', text2: 'PENTHOUSE' 25 | } 26 | ] 27 | 28 | export const PopularAreas = () => { 29 | 30 | return ( 31 | 35 | 36 | 37 | 38 | Popular Areas 41 | As well as being positioned on one of the exclusive Fronds of Palm Jumeirah. 44 | It now features the architectural talents of Chakib Richani, att from the Tabari Gallery and a host of unique touches including Flos lighting and furniture from Minotti, Poltrona Frau, Bocci and Giorgetti. 47 | 48 | 49 | 52 | 53 | 54 | 55 | 56 | ) 57 | } 58 | 59 | -------------------------------------------------------------------------------- /components/popup/Modal.js: -------------------------------------------------------------------------------- 1 | import { Dialog, Transition } from '@headlessui/react' 2 | import { Fragment } from 'react' 3 | const ModalComponent = ({ children, className,wrapperClass, isOpen, closeModal }) => { 4 | return ( 5 | <> 6 | 7 | 8 | 17 |
18 | 19 | 20 |
21 |
22 | 30 | 31 | {children} 32 | 33 |
34 | {/* */} 35 |
36 | 37 | 38 |
39 | 40 |
41 |
42 | 43 | 44 | ); 45 | } 46 | 47 | export default ModalComponent; -------------------------------------------------------------------------------- /components/dropdown/Dropdown.js: -------------------------------------------------------------------------------- 1 | import { Menu, Transition } from '@headlessui/react' 2 | import { Fragment, useEffect, useRef, useState } from 'react'; 3 | import downSvg from "@/public/images/angle-down-solid.svg" 4 | import Image from 'next/image'; 5 | const CustomDropDown = ({ color,font, title, data }) => { 6 | return ( 7 | 8 |
9 | 10 | {title} 11 | arrow 12 | 13 |
14 | 23 | 24 |
25 | { 26 | data.map((item, index) => ( 27 | 28 | {({ active }) => ( 29 | 36 | )} 37 | 38 | )) 39 | } 40 | 41 |
42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | 49 | export default CustomDropDown; -------------------------------------------------------------------------------- /components/home/Subscribe.js: -------------------------------------------------------------------------------- 1 | 2 | import { Box, Button, Typography, OutlinedInput, Grid } from "@mui/material"; 3 | import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; 4 | 5 | import { palette } from "@/themes"; 6 | 7 | export const Subscribe = () => { 8 | return ( 9 | 13 | 14 | 15 | 20 | Stay Blingy! 24 | 30 | Subscribe to our news letter and get latest market prices 31 | 32 | 33 | 34 | 35 | 40 | 49 | 58 | 59 | 60 | 61 | 62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /components/carousel/BlogCarousel.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from "react"; 2 | import Slider from "react-slick"; 3 | const BlogCarousel = ({data}) => { 4 | const settings = { 5 | dots: true, 6 | infinite: true, 7 | speed: 500, 8 | slidesToShow: 1, 9 | slidesToScroll: 1, 10 | dotsClass: "button__bar slick-dots", 11 | arrows: false, 12 | }; 13 | return ( 14 |
15 | 16 | { 17 | data.map((item,index)=>( 18 |
22 |
26 |
27 |
28 |
29 | 30 | About 67% of the approximately 830 UHNWIs identified that are based in the city treat Dubai as their primary residence, while the remaining 33% choose Dubai as a secondary home. 31 | 32 | 33 | Dubai dominates as top choice 34 | for UHNW primary residents 35 | 36 | 39 |
40 |
41 | )) 42 | } 43 | 44 |
45 | ); 46 | } 47 | 48 | export default BlogCarousel; -------------------------------------------------------------------------------- /components/popup/PropertyModal.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const PropertyModal = ({data, sort, setSort}) => { 4 | const sortData = [ 5 | { 6 | label: "All", 7 | selected: true 8 | }, 9 | { 10 | label: "Villa", 11 | selected: false 12 | }, 13 | { 14 | label: "Apartment", 15 | selected: false 16 | }, 17 | { 18 | label: "Townhouse", 19 | selected: false 20 | }, 21 | { 22 | label: "Penthouse", 23 | selected: false 24 | }, 25 | { 26 | label: "Office Spaces", 27 | selected: false 28 | }, 29 | { 30 | label: "Loft & Duplex", 31 | selected: false 32 | }, 33 | { 34 | label: "Plot", 35 | selected: false 36 | }, 37 | ] 38 | const handleChange =(e, item)=>{ 39 | const { checked, value } = e.target; 40 | setSort(value); 41 | close() 42 | } 43 | return ( 44 |
45 | { 46 | data.map((item, index) => ( 47 |
48 | 49 | {item.label} 50 | 51 | handleChange(e,item)} 56 | className="w-4 h-4 bg-black border-x border-y border-solid rounded-full border-gray-300 checked:border-x checked:border-solid checked:border-red checked:rouned-full appearance-none checked:before:w-2.5 checked:before:h-2.5 checked:before:left-1/2 checked:before:-translate-x-1/2 checked:before:top-1/2 checked:before:-translate-y-1/2 checked:border-white checked:before:bg-white relative before:absolute before:rounded-full" 57 | /> 58 | 59 |
60 | )) 61 | } 62 | 63 |
64 | ); 65 | } 66 | 67 | export default PropertyModal; -------------------------------------------------------------------------------- /themes/index.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles' 2 | 3 | const createTypographySystem = () => { 4 | return { 5 | body1: { 6 | fontSize: 18, 7 | fontStyle: 'normal', 8 | textTransform: 'initial', 9 | fontWeight: 400, 10 | }, 11 | body2: { 12 | fontSize: '16px', 13 | fontWeight: 400, 14 | color: '#c9c9c9 !important', 15 | }, 16 | h1: { 17 | fontSize: 62, 18 | fontWeight: 500, 19 | }, 20 | h2: { 21 | fontSize: 42, 22 | fontWeight: 600, 23 | }, 24 | h3: { 25 | fontSize: 18, 26 | fontWeight: 600, 27 | }, 28 | h4: { 29 | fontSize: 16, 30 | fontWeight: 400, 31 | }, 32 | h5: { 33 | fontSize: 15, 34 | }, 35 | h6: { 36 | fontSize: 14, 37 | } 38 | } 39 | } 40 | 41 | const createPaletteSystem = () => ({ 42 | common: { 43 | black: '#000', 44 | white: '#FFFFFF', 45 | }, 46 | primary: { 47 | dark: '#513F01 !important', 48 | light: '#CA9F02', 49 | main: '#FFFFFF', 50 | }, 51 | secondary: { 52 | main: '#3ffefd', 53 | }, 54 | text: { 55 | disabled: '#596673', 56 | primary: '#090A0C', 57 | secondary: '#596673', 58 | }, 59 | }) 60 | const theme = createTheme({ 61 | components: { 62 | MuiButton: { 63 | styleOverrides: { 64 | root: { 65 | '&:hover': { 66 | backgroundColor: 'black', 67 | }, 68 | background: 'black !important', 69 | color: 'white', 70 | borderRadius: '0px !important', 71 | textTransform: 'initial', 72 | fontSize: 16, 73 | }, 74 | }, 75 | variants: [ 76 | { 77 | props: { variant: 'contained'}, 78 | style: { 79 | 80 | }, 81 | }, 82 | { 83 | props: { variant: 'outlined'}, 84 | style: { 85 | '&:hover': { 86 | color: 'white', 87 | }, 88 | }, 89 | }, 90 | ], 91 | }, 92 | MuiTypography: { 93 | styleOverrides: { 94 | root: { 95 | fontFamily: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', 96 | color: 'white' 97 | }, 98 | }, 99 | }, 100 | MuiGrid: { 101 | styleOverrides: { 102 | root: { 103 | marginLeft: '0px !important', 104 | }, 105 | }, 106 | }, 107 | }, 108 | palette: createPaletteSystem(), 109 | spacing: 4, 110 | typography: createTypographySystem(), 111 | }) 112 | 113 | export default theme 114 | export const palette = theme.palette 115 | -------------------------------------------------------------------------------- /components/popup/SortByModal.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ModalComponent from "./Modal"; 3 | 4 | const SortByModal = ({ isOpen, close }) => { 5 | const sortData = [ 6 | { 7 | label: "Recommended", 8 | selected: true 9 | }, 10 | { 11 | label: "Latest", 12 | selected: false 13 | }, 14 | { 15 | label: "Price (Highest to Lowest)", 16 | selected: false 17 | }, 18 | { 19 | label: "Price (Lowest to Highest)", 20 | selected: false 21 | }, 22 | { 23 | label: "Most viewed", 24 | selected: false 25 | }, 26 | { 27 | label: "Most popular", 28 | selected: false 29 | }, 30 | ] 31 | const [sort, setSort] = useState("Recommended"); 32 | const handleChange =(e, item)=>{ 33 | const { checked, value } = e.target; 34 | setSort(value); 35 | close() 36 | } 37 | return ( 38 | 44 |
45 | 46 | Sort by 47 | 48 |
49 | { 50 | sortData.map((item, index) => ( 51 |
52 | 53 | {item.label} 54 | 55 | handleChange(e,item)} 60 | className="w-4 h-4 bg-white border-x border-y border-solid rounded-full border-black checked:border-x checked:border-solid checked:border-red checked:rouned-full appearance-none checked:before:w-2.5 checked:before:h-2.5 checked:before:left-1/2 checked:before:-translate-x-1/2 checked:before:top-1/2 checked:before:-translate-y-1/2 checked:before:bg-black relative before:absolute before:rounded-full" 61 | /> 62 | 63 |
64 | )) 65 | } 66 | 67 |
68 |
69 | 70 | 71 | ); 72 | } 73 | 74 | export default SortByModal; -------------------------------------------------------------------------------- /components/popup/MultipleSelectOption.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import { GeneralTitle } from "./FilterModal"; 3 | const MultipleSelectOption = ({ data, setData, setShow, selected, title }) => { 4 | const handleSelect = (item) => { 5 | if (title === "feature") { 6 | const temp = [...data]; 7 | setData( 8 | temp.map((items) => items.id === item.id ? { ...items, selected: !items.selected } : items) 9 | ) 10 | } else { 11 | setData(item); 12 | setShow(false) 13 | } 14 | 15 | } 16 | const handleSelectAll = () => { 17 | if (title === "feature") { 18 | const temp = [...data]; 19 | temp.map((item)=>item.selected=true); 20 | setData([...temp]) 21 | } else{ 22 | setData({ 23 | selected: false, 24 | label: "All" 25 | }); 26 | setShow(false) 27 | } 28 | 29 | } 30 | return (
31 |
32 | back-icon setShow(false)} 38 | /> 39 | 40 |
41 |
42 |
43 | {data.map((item, index) => ( 44 |
handleSelect(item)} 46 | key={index}> 47 |
48 | 49 | {title !== "feature" ? 50 | {selected.label === item.label ? ( 51 | back-icon 57 | ) : null} 58 | : 59 | { 60 | item.selected && back-icon 66 | }} 67 | 68 |
69 |
70 | ))} 71 | 72 |
73 | 74 | 75 | 80 |
); 81 | } 82 | 83 | export default MultipleSelectOption; -------------------------------------------------------------------------------- /components/home/OffPlanProperties.js: -------------------------------------------------------------------------------- 1 | import { Box, Typography } from "@mui/material" 2 | import SimilarCarousel from "../carousel/SimilarCarousel" 3 | 4 | import image1 from '../../assets/images/Layer1.png' 5 | import image2 from '../../assets/images/Layer2.png' 6 | import image3 from '../../assets/images/Layer3.png' 7 | import image4 from '../../assets/images/Layer4.png' 8 | import image5 from '../../assets/images/Layer5.png' 9 | 10 | const propertyItems = [ 11 | { url: image1, text: 'DOWNtown Dubai Penthouse' }, 12 | { url: image2, text: 'DOWNtown Dubai Penthouse' }, 13 | { url: image3, text: 'DOWNtown Dubai Penthouse' }, 14 | { url: image4, text: 'DOWNtown Dubai Penthouse' }, 15 | { url: image5, text: 'DOWNtown Dubai Penthouse' }, 16 | ] 17 | 18 | const propertyItems1 = [ 19 | { img: '/images/offPlan/Layer1.png', text: 'DOWNtown Dubai Penthouse' }, 20 | { img: '/images/offPlan/Layer2.png', text: 'DOWNtown Dubai Penthouse' }, 21 | { img: '/images/offPlan/Layer3.png', text: 'DOWNtown Dubai Penthouse' }, 22 | { img: '/images/offPlan/Layer4.png', text: 'DOWNtown Dubai Penthouse' }, 23 | { img: '/images/offPlan/Layer5.png', text: 'DOWNtown Dubai Penthouse' }, 24 | ] 25 | 26 | export const OffPlanProperties = () => { 27 | return ( 28 | 29 | 34 | Off-Plan Projects 35 | 36 | 41 | { 42 | propertyItems.map((item, i) => ( 43 | 55 | 60 | 70 | {item.text} 71 | 72 | 73 | )) 74 | } 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | ) 83 | } -------------------------------------------------------------------------------- /components/home/FeaturedApartments.js: -------------------------------------------------------------------------------- 1 | import { Box, Grid, Typography } from "@mui/material" 2 | 3 | import CarouselArray from '../carousel/CarouselArray' 4 | 5 | const featuredApartments = [ 6 | { 7 | items: [ 8 | { img: "/images/villa/02.png" }, 9 | { img: "/images/villa/02.png" }, 10 | { img: "/images/villa/02.png" }, 11 | { img: "/images/villa/02.png" }, 12 | ], 13 | title: 'DOWNTOWN DUBAI PENTHOUSE', 14 | details: 'PENTHOUSE - 3 BED - 13,00 SQ.FT', 15 | AED: '144,220,00', 16 | }, 17 | { 18 | items: [ 19 | { img: "/images/villa/02.png" }, 20 | { img: "/images/villa/02.png" }, 21 | { img: "/images/villa/02.png" }, 22 | { img: "/images/villa/02.png" }, 23 | ], 24 | title: 'DOWNTOWN DUBAI PENTHOUSE', 25 | details: 'PENTHOUSE - 3 BED - 13,00 SQ.FT', 26 | AED: '144,220,00', 27 | }, 28 | { 29 | items: [ 30 | { img: "/images/villa/02.png" }, 31 | { img: "/images/villa/02.png" }, 32 | { img: "/images/villa/02.png" }, 33 | { img: "/images/villa/02.png" }, 34 | ], 35 | title: 'DOWNTOWN DUBAI PENTHOUSE', 36 | details: 'PENTHOUSE - 3 BED - 13,00 SQ.FT', 37 | AED: '144,220,00', 38 | }, 39 | { 40 | items: [ 41 | { img: "/images/villa/02.png" }, 42 | { img: "/images/villa/02.png" }, 43 | { img: "/images/villa/02.png" }, 44 | { img: "/images/villa/02.png" }, 45 | ], 46 | title: 'DOWNTOWN DUBAI PENTHOUSE', 47 | details: 'PENTHOUSE - 3 BED - 13,00 SQ.FT', 48 | AED: '144,220,00', 49 | }, 50 | { 51 | items: [ 52 | { img: "/images/villa/02.png" }, 53 | { img: "/images/villa/02.png" }, 54 | { img: "/images/villa/02.png" }, 55 | { img: "/images/villa/02.png" }, 56 | ], 57 | title: 'DOWNTOWN DUBAI PENTHOUSE', 58 | details: 'PENTHOUSE - 3 BED - 13,00 SQ.FT', 59 | AED: '144,220,00', 60 | }, 61 | ] 62 | 63 | export const FeaturedApartments = () => { 64 | return ( 65 | 69 | 70 | 71 | Featured Apartments 76 | 77 | 78 | 79 | Dilatations International realty is excited to present the listing for this bespoke 4-bedroom Garden Homes villa on Frond N, Plam Jumeirah, 82 | As well as being positioned on one of the exclusive Fronds of Plam Jumeirah, this exceptional Garden Homes villa has been expettly designed and fully customised to crete a dram luxury property. 85 | 86 | 87 | 88 | 89 | 90 | ) 91 | } -------------------------------------------------------------------------------- /components/product/Description.js: -------------------------------------------------------------------------------- 1 | import ProductTitle from "./Title"; 2 | 3 | const Description = () => { 4 | const data = [ 5 | { 6 | id: 1, 7 | title: "Developer", 8 | name: "GAMBRIN PROPERTIES" 9 | }, 10 | { 11 | id: 2, 12 | title: "Building", 13 | name: "Rigel" 14 | }, 15 | { 16 | id: 3, 17 | title: "RERA", 18 | name: "30495" 19 | }, 20 | { 21 | id: 4, 22 | title: "Lifestyle", 23 | name: "Waterfront Properties" 24 | }, 25 | { 26 | id: 5, 27 | title: "Reference", 28 | name: "6E203-203D" 29 | } 30 | ] 31 | return ( 32 |
33 | 34 |
35 |
36 | 37 | Luxhabitat Sotheby’s International Realty is pleased to present this modern 6-bedroom villa in Emirates Hills. This independently situated villa is a spacious and contemporary luxury property available for rent that will appeal to those with large families or who want plenty of room for guests or entertaining. The villa has a well designed layout with separate formal living area and a combined dining and family room. The gourmet kitchen is also generously proportioned with built-in Siemens appliances. There are six bedrooms in the villa, two of which are on the ground floor so they are perfect for guests or as accessibility rooms. 38 | 39 | 42 |
43 |
44 |
45 | { 46 | data.map((item, index) => ( 47 |
48 | 49 | {item.title}: 50 | 51 | 52 | {item.name} 53 | 54 |
55 | )) 56 | } 57 |
58 |
59 |
60 | 61 |
62 | ); 63 | } 64 | 65 | export default Description; -------------------------------------------------------------------------------- /components/home/FeaturedVillas.js: -------------------------------------------------------------------------------- 1 | import { Box, Grid, Typography } from "@mui/material" 2 | 3 | import CarouselArray from '../carousel/CarouselArray' 4 | 5 | const featuredApartments = [ 6 | { 7 | items: [ 8 | { img: "/images/villa/02.png" }, 9 | { img: "/images/villa/02.png" }, 10 | { img: "/images/villa/02.png" }, 11 | { img: "/images/villa/02.png" }, 12 | ], 13 | title: 'DOWNTOWN DUBAI PENTHOUSE', 14 | details: 'PENTHOUSE 3 BED 13,00 SQ.FT READY', 15 | AED: '144,220,00', 16 | }, 17 | { 18 | items: [ 19 | { img: "/images/villa/02.png" }, 20 | { img: "/images/villa/02.png" }, 21 | { img: "/images/villa/02.png" }, 22 | { img: "/images/villa/02.png" }, 23 | ], 24 | title: 'DOWNTOWN DUBAI PENTHOUSE', 25 | details: 'PENTHOUSE 3 BED 13,00 SQ.FT READY', 26 | AED: '144,220,00', 27 | }, 28 | { 29 | items: [ 30 | { img: "/images/villa/02.png" }, 31 | { img: "/images/villa/02.png" }, 32 | { img: "/images/villa/02.png" }, 33 | { img: "/images/villa/02.png" }, 34 | ], 35 | title: 'DOWNTOWN DUBAI PENTHOUSE', 36 | details: 'PENTHOUSE 3 BED 13,00 SQ.FT READY', 37 | AED: '144,220,00', 38 | }, 39 | { 40 | items: [ 41 | { img: "/images/villa/02.png" }, 42 | { img: "/images/villa/02.png" }, 43 | { img: "/images/villa/02.png" }, 44 | { img: "/images/villa/02.png" }, 45 | ], 46 | title: 'DOWNTOWN DUBAI PENTHOUSE', 47 | details: 'PENTHOUSE 3 BED 13,00 SQ.FT READY', 48 | AED: '144,220,00', 49 | }, 50 | { 51 | items: [ 52 | { img: "/images/villa/02.png" }, 53 | { img: "/images/villa/02.png" }, 54 | { img: "/images/villa/02.png" }, 55 | { img: "/images/villa/02.png" }, 56 | ], 57 | title: 'DOWNTOWN DUBAI PENTHOUSE', 58 | details: 'PENTHOUSE 3 BED 13,00 SQ.FT READY', 59 | AED: '144,220,00', 60 | }, 61 | ] 62 | 63 | export const FeaturedVillas = () => { 64 | return ( 65 | 69 | 70 | 71 | Featured Apartments 76 | 77 | 78 | 79 | Dilatations International realty is excited to present the listing for this bespoke 4-bedroom Garden Homes villa on Frond N, Plam Jumeirah, 82 | As well as being positioned on one of the exclusive Fronds of Plam Jumeirah, this exceptional Garden Homes villa has been expettly designed and fully customised to crete a dram luxury property. 85 | 86 | 87 | 88 | 89 | 90 | ) 91 | } -------------------------------------------------------------------------------- /components/product/Features.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Text30 from "../typegraphy/Text30"; 3 | import ProductTitle from "./Title"; 4 | import { roboto } from "../font/font"; 5 | const FeaturesSection = () => { 6 | return ( 7 |
8 | 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 33 |
34 |
35 |
36 | map 42 |
43 | 44 |
45 | 46 | Atlantis The Royal Residences 47 | 48 | 49 | The Crescent Palm Jumeirah 50 | 51 |
52 |
53 |
54 | 55 |
56 |
57 | ); 58 | } 59 | 60 | export default FeaturesSection; -------------------------------------------------------------------------------- /pages/product/index.js: -------------------------------------------------------------------------------- 1 | import Description from "@/components/product/Description"; 2 | import FeaturesSection from "@/components/product/Features" 3 | import ListingAgent from "@/components/product/ListingAgent" 4 | import StayBiling from "@/components/staybil/StaylBiling"; 5 | import SimilarProperty from "@/components/product/SimilarProperty"; 6 | import BorderBottom from "@/components/border/BorderBottom"; 7 | const ProductPage = () => { 8 | return ( 9 |
10 |
11 |
12 |
13 | 14 | Downtown Dubai Penthouse 15 | 16 | 17 | Exclusive . Ready . Emirates Hills 18 | 19 |
20 | 23 | 26 |
27 |
28 | 29 |
30 |
31 | 32 | AED 2,600,000 33 | 34 | 35 | 6 beds 6 baths 13,000 sq. ft 36 | 37 |
38 | 41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 |
51 | 52 |
53 | ); 54 | } 55 | 56 | export default ProductPage; -------------------------------------------------------------------------------- /components/home/DowntownDubai.js: -------------------------------------------------------------------------------- 1 | import { palette } from "@/themes" 2 | import { Box, Button, Grid, Typography } from "@mui/material" 3 | import DCarousel from "../carousel/3dCarousel" 4 | import { useState } from "react" 5 | 6 | const data = [ 7 | { img: '/images/Header.png', concept: 651, number: '01' }, 8 | { img: '/images/03.png', concept: 216, number: 'PENTHOUSE' }, 9 | { img: '/images/Header.png', concept: 651, number: 'PENTHOUSE' }, 10 | { img: '/images/Header.png', concept: 621, number: 'PENTHOUSE' }, 11 | { img: '/images/Header.png', concept: 651, number: 'PENTHOUSE' }, 12 | ] 13 | 14 | const items = [ 15 | { title: 'SQ.FT', text: '13,000 SQ.FT' }, 16 | { title: 'PRICE', text: '144,220 AED' }, 17 | { title: 'BATHROOMS', text: '4 ROOMS' }, 18 | { title: 'BEDROOMS', text: '8 ROOMS' }, 19 | ] 20 | 21 | export const DowntownDubai = () => { 22 | const [ selectedBg, setSelectedBg ] = useState(0) 23 | 24 | return ( 25 | 39 | 43 | 44 | 45 | Modern Architecture 49 | 55 | DOWNTOWN DUBAI VILLA 56 | 57 | 67 | 71 | { 72 | items.map((item, i) => ( 73 | 74 | {item.title} 75 | {item.text} 78 | 79 | )) 80 | } 81 | 82 | 83 | 84 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | ) 98 | } -------------------------------------------------------------------------------- /components/feature/FeatureApart.js: -------------------------------------------------------------------------------- 1 | import BorderBottom from "../border/BorderBottom"; 2 | import Carousel from "../carousel/Carousel"; 3 | import { Text16,Text24,Text36 } from "../typegraphy"; 4 | 5 | 6 | const FeatureApart = () => { 7 | const data = [ 8 | { 9 | id: 1, 10 | children: [ 11 | { 12 | title: "Property", 13 | img: '/images/feature/03.png' 14 | }, 15 | { 16 | title: "Property", 17 | img: '/images/feature/03.png' 18 | }, 19 | { 20 | title: "Property", 21 | img: '/images/feature/03.png' 22 | } 23 | ], 24 | title: "Palm Jumeirah", 25 | description: 'Garden Homes', 26 | area: "15,500 sq. ft.", 27 | furniture: 'Villa | 5 beds' 28 | }, 29 | { 30 | id: 1, 31 | children: [ 32 | { 33 | title: "Villa", 34 | img: '/images/feature/03.png' 35 | }, 36 | { 37 | title: "Villa", 38 | img: '/images/feature/03.png' 39 | }, 40 | { 41 | title: "Villa", 42 | img: '/images/feature/03.png' 43 | } 44 | ], 45 | title: "Jumeirah", 46 | description: 'Umm Suqeim', 47 | area: "15,500 sq. ft.", 48 | furniture: 'Villa | 5 beds' 49 | }, 50 | { 51 | id: 1, 52 | children: [ 53 | { 54 | title: "Property", 55 | img: '/images/feature/03.png' 56 | }, 57 | { 58 | title: "Property", 59 | img: '/images/feature/03.png' 60 | }, 61 | { 62 | title: "Property", 63 | img: '/images/feature/03.png' 64 | } 65 | ], 66 | title: "Dubai Hills", 67 | description: 'Fairway Vistas', 68 | area: "13,862 sq. ft.", 69 | furniture: 'Villa | 5 beds' 70 | } 71 | ] 72 | return ( 73 |
74 | 75 |
76 | { 77 | data.map((items, index) => ( 78 |
82 | 83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 | 91 |
92 | 93 |
94 |
95 | )) 96 | } 97 |
98 | 99 |
100 | ); 101 | } 102 | 103 | export default FeatureApart; -------------------------------------------------------------------------------- /pages/home/index.js: -------------------------------------------------------------------------------- 1 | import { Box, Grid, Typography } from '@mui/material' 2 | import { palette } from '@/themes' 3 | import { 4 | Header, 5 | FeaturedApartments, 6 | PopularAreas, 7 | DowntownDubai, 8 | FeaturedVillas, 9 | OurJournals, 10 | OffPlanProperties, 11 | Subscribe, 12 | } from '../../components/home' 13 | import Footer from '@/components/footer/Footer' 14 | import { useState } from 'react' 15 | 16 | const villas = [ 17 | { text: "Editor's picks", value: "picks" }, 18 | { text: "New to market", value: "market" }, 19 | { text: "Price reductions", value: "price" }, 20 | ] 21 | 22 | export default function HomePage () { 23 | const [ properties, setProperties ] = useState('apartments') 24 | const [ villasStatus, setVillasStatus ] = useState(0); 25 | 26 | return ( 27 | 30 |
31 | 36 | Featured Properties 40 | 41 | setProperties('apartments')} 50 | >Apartments 51 | setProperties('popular')} 60 | >Popular Areas 61 | 62 | { properties === 'apartments' && } 63 | { properties === 'popular' && } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 75 | Featured Villas 79 | 80 | { 81 | villas.map((item, i) => ( 82 | setVillasStatus(i)} 93 | >{item.text} 94 | )) 95 | } 96 | 97 | 98 | 99 | 100 | 104 | Our Journals 108 | 109 | 110 | 111 | 112 | 113 |