├── README.md
├── public
├── _redirects
├── robots.txt
├── favicon.ico
├── favicon1.ico
├── manifest.json
└── index.html
├── src
├── images
│ ├── logo1.png
│ ├── UniQue.jpg
│ ├── room-1.jpeg
│ ├── room-10.jpeg
│ ├── room-11.jpeg
│ ├── room-12.jpeg
│ ├── room-2.jpeg
│ ├── room-3.jpeg
│ ├── room-4.jpeg
│ ├── room-5.jpeg
│ ├── room-6.jpeg
│ ├── room-7.jpeg
│ ├── room-8.jpeg
│ ├── room-9.jpeg
│ ├── details-1.jpeg
│ ├── details-2.jpeg
│ ├── details-3.jpeg
│ ├── details-4.jpeg
│ ├── defaultBcg.jpeg
│ ├── images
│ │ ├── UniQue.jpg
│ │ ├── hero-bcg.jpeg
│ │ ├── product-1.jpeg
│ │ ├── product-2.jpeg
│ │ ├── product-3.jpeg
│ │ ├── product-4.jpeg
│ │ ├── product-5.jpeg
│ │ ├── product-6.jpeg
│ │ ├── product-7.jpeg
│ │ └── product-8.jpeg
│ └── gif
│ │ ├── loading-arrow.gif
│ │ └── loading-gear.gif
├── Contentful.js
├── components
│ ├── Title.js
│ ├── Hero.js
│ ├── Banner.js
│ ├── Loading.js
│ ├── StyledHero.js
│ ├── Footer.js
│ ├── ProductList.js
│ ├── Services.js
│ ├── FeaturedProducts.js
│ ├── Product.js
│ ├── ProductContainer.js
│ ├── GalleryHome.jsx
│ ├── Navbar.js
│ ├── Gallery.jsx
│ └── ProductFilter.js
├── setupTests.js
├── App.test.js
├── index.css
├── pages
│ ├── Error.js
│ ├── Products.js
│ ├── Gallery.jsx
│ ├── Home.js
│ ├── SingleProduct.js
│ └── Contact.js
├── index.js
├── App.js
├── context.js
├── serviceWorker.js
├── App.css
└── data.js
├── netlify.toml
├── .gitignore
└── package.json
/README.md:
--------------------------------------------------------------------------------
1 | ## React Furniture Shop
2 |
--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/favicon1.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/public/favicon1.ico
--------------------------------------------------------------------------------
/src/images/logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/logo1.png
--------------------------------------------------------------------------------
/src/images/UniQue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/UniQue.jpg
--------------------------------------------------------------------------------
/src/images/room-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-1.jpeg
--------------------------------------------------------------------------------
/src/images/room-10.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-10.jpeg
--------------------------------------------------------------------------------
/src/images/room-11.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-11.jpeg
--------------------------------------------------------------------------------
/src/images/room-12.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-12.jpeg
--------------------------------------------------------------------------------
/src/images/room-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-2.jpeg
--------------------------------------------------------------------------------
/src/images/room-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-3.jpeg
--------------------------------------------------------------------------------
/src/images/room-4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-4.jpeg
--------------------------------------------------------------------------------
/src/images/room-5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-5.jpeg
--------------------------------------------------------------------------------
/src/images/room-6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-6.jpeg
--------------------------------------------------------------------------------
/src/images/room-7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-7.jpeg
--------------------------------------------------------------------------------
/src/images/room-8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-8.jpeg
--------------------------------------------------------------------------------
/src/images/room-9.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/room-9.jpeg
--------------------------------------------------------------------------------
/src/images/details-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/details-1.jpeg
--------------------------------------------------------------------------------
/src/images/details-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/details-2.jpeg
--------------------------------------------------------------------------------
/src/images/details-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/details-3.jpeg
--------------------------------------------------------------------------------
/src/images/details-4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/details-4.jpeg
--------------------------------------------------------------------------------
/src/images/defaultBcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/defaultBcg.jpeg
--------------------------------------------------------------------------------
/src/images/images/UniQue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/UniQue.jpg
--------------------------------------------------------------------------------
/src/images/gif/loading-arrow.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/gif/loading-arrow.gif
--------------------------------------------------------------------------------
/src/images/gif/loading-gear.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/gif/loading-gear.gif
--------------------------------------------------------------------------------
/src/images/images/hero-bcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/hero-bcg.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-1.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-2.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-3.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-4.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-5.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-6.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-7.jpeg
--------------------------------------------------------------------------------
/src/images/images/product-8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pokemon918/React-Furniture-Shop/HEAD/src/images/images/product-8.jpeg
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run build"
3 | publish = "/build"
4 | base = "/"
5 |
6 | [[redirects]]
7 | from = "/*"
8 | to = "/index.html"
9 | status = 200
--------------------------------------------------------------------------------
/src/Contentful.js:
--------------------------------------------------------------------------------
1 | import { createClient } from 'contentful';
2 |
3 | export default createClient({
4 | space: process.env.REACT_APP_API_SPACE,
5 | accessToken: process.env.REACT_APP_ACCESS_TOKEN
6 | })
--------------------------------------------------------------------------------
/src/components/Title.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Title({title}) {
4 | return (
5 |
9 | )
10 | }
11 |
12 | export default Title
13 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Hero = ({children, hero}) => {
4 | return (
5 |
8 | )
9 | }
10 |
11 | Hero.defaultProps = {
12 | hero: 'defaultHero'
13 | }
14 |
15 | export default Hero
16 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/src/components/Banner.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Banner = ({children, title, subtitle}) => {
4 | return (
5 |
6 |
{title}
7 |
8 |
{subtitle}
9 | {children}
10 |
11 | )
12 | }
13 |
14 | export default Banner
15 |
--------------------------------------------------------------------------------
/src/components/Loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import LoadingGif from '../images/gif/loading-arrow.gif'
3 |
4 | const Loading = () => {
5 | return (
6 |
7 |
products data loading...
8 |

9 |
10 | )
11 | }
12 |
13 | export default Loading
14 |
--------------------------------------------------------------------------------
/src/components/StyledHero.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | // import defaultImg from '../images/room-1.jpeg'
3 |
4 | const StyledHero = styled.header`
5 | min-height: 60vh;
6 | background: url(${props => props.img}) center/cover no-repeat;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | `
11 | export default StyledHero;
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/.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 | # production
12 | /build
13 | .env.development
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {Link} from 'react-router-dom'
3 |
4 | const Footer = () => {
5 | return (
6 |
12 | )
13 | }
14 |
15 | export default Footer;
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Furniture Shop",
4 | "icons": [
5 | {
6 | "src": "favicon1.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "type": "image/png",
12 | "sizes": "192x192"
13 | },
14 | {
15 | "type": "image/png",
16 | "sizes": "512x512"
17 | }
18 | ],
19 | "start_url": ".",
20 | "display": "standalone",
21 | "theme_color": "#000000",
22 | "background_color": "#ffffff"
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/Error.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Hero from '../components/Hero'
3 | import Banner from '../components/Banner'
4 | import Footer from '../components/Footer'
5 | import { Link } from 'react-router-dom'
6 |
7 | const Error = () => {
8 | return (
9 | <>
10 |
11 |
12 | Return Home
13 |
14 |
15 |
16 | >
17 | )
18 | }
19 |
20 | export default Error
21 |
--------------------------------------------------------------------------------
/src/components/ProductList.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Product from './Product'
3 |
4 | const ProductList = ({ products }) => {
5 | if (products.length === 0) {
6 | return (
7 |
8 |
unfortunately no product matched your search parameters.
9 |
10 | )
11 | }
12 | return (
13 |
14 |
15 | {products.map(item => {
16 | return
17 | })}
18 |
19 |
20 | )
21 | }
22 |
23 | export default ProductList
24 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | // import './index.css';
4 | import { BrowserRouter as Router } from 'react-router-dom'
5 | import App from './App';
6 | import * as serviceWorker from './serviceWorker';
7 | import { ProductProvider } from './context'
8 |
9 | ReactDOM.render(
10 |
11 |
12 |
13 |
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 | // If you want your app to work offline and load faster, you can change
21 | // unregister() to register() below. Note this comes with some pitfalls.
22 | // Learn more about service workers: https://bit.ly/CRA-PWA
23 | serviceWorker.unregister();
24 |
--------------------------------------------------------------------------------
/src/components/Services.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import Title from './Title'
4 |
5 | export default class Services extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 | {this.props.services.map((item, index) => (
12 |
13 | {item.icon}
14 | {item.title}
15 | {item.info}
16 |
17 | ))}
18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/Products.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import Hero from '../components/Hero'
3 | import Banner from '../components/Banner'
4 | import { Link } from 'react-router-dom'
5 | import ProductContainer from '../components/ProductContainer'
6 | import Footer from '../components/Footer'
7 |
8 | const Products = () => {
9 |
10 | useEffect(() => {
11 | window.scrollTo(0, 0)
12 | });
13 |
14 | return (
15 | <>
16 |
17 |
18 | Contact Us
19 |
20 |
21 |
22 |
23 | >
24 | )
25 | }
26 |
27 | export default Products
28 |
--------------------------------------------------------------------------------
/src/pages/Gallery.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import Hero from '../components/Hero'
3 | import Banner from '../components/Banner'
4 | import GalleryComponent from '../components/Gallery'
5 | import Footer from '../components/Footer'
6 | import { Link } from 'react-router-dom'
7 |
8 | const Gallery = () => {
9 |
10 | useEffect(() => {
11 | window.scrollTo(0, 0)
12 | });
13 |
14 | return (
15 | <>
16 |
17 |
18 | Our Products
19 |
20 |
21 |
22 |
23 |
24 | >
25 | )
26 | }
27 |
28 | export default Gallery
29 |
--------------------------------------------------------------------------------
/src/components/FeaturedProducts.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import {ProductContext} from '../context'
3 | import Loading from './Loading'
4 | import Product from './Product'
5 | import Title from './Title'
6 |
7 | export default class FeaturedProducts extends Component {
8 | static contextType = ProductContext;
9 | render() {
10 | let { loading, featuredProducts: products } = this.context;
11 | products = products.map(product => {
12 | return
13 | })
14 | return (
15 |
16 |
17 |
18 | {loading ? : products}
19 |
20 |
21 | )
22 | }
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "furniture-shop",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "contentful": "^7.14.4",
10 | "react": "^16.13.1",
11 | "react-dom": "^16.13.1",
12 | "react-icons": "^3.10.0",
13 | "react-router-dom": "^5.2.0",
14 | "react-scripts": "3.4.1",
15 | "styled-components": "^5.1.1"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": "react-app"
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/Product.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import defaultImg from '../images/room-1.jpeg'
4 | import PropTypes from 'prop-types'
5 |
6 | const Product = ({product}) => {
7 | const { name, slug, images, price } = product;
8 | return (
9 |
10 |
11 |

12 |
13 |
₹{price}
14 |
per piece
15 |
16 |
20 | Features
21 |
22 |
23 | {name}
24 |
25 | )
26 | }
27 |
28 | export default Product
29 |
30 | Product.propTypes = {
31 | product: PropTypes.shape({
32 | name: PropTypes.string.isRequired,
33 | slug: PropTypes.string.isRequired,
34 | images: PropTypes.arrayOf(PropTypes.string).isRequired,
35 | price: PropTypes.number.isRequired
36 | })
37 | }
38 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import Home from './pages/Home';
4 | import Products from './pages/Products';
5 | import SingleProduct from './pages/SingleProduct';
6 | import Gallery from './pages/Gallery'
7 | import Contact from './pages/Contact'
8 | import Error from './pages/Error';
9 | import Navbar from './components/Navbar'
10 | import { Route, Switch } from 'react-router-dom'
11 |
12 | // const url = (address) => {
13 | // window.location.href = address;
14 | // }
15 |
16 | export const App = () => {
17 | return (
18 | <>
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {
27 | window.location.href = 'https://chat.whatsapp.com/';
28 | }} />
29 | {
30 | window.location.href = 'https://www.instagram.com/';
31 | }} />
32 | {
33 | window.location.href = 'https://www.facebook.com/';
34 | }} />
35 | {
36 | window.location.href = 'https://g.page/furniture?share';
37 | }} />
38 |
39 |
40 | >
41 | )
42 | }
43 |
44 | export default App;
--------------------------------------------------------------------------------
/src/components/ProductContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ProductsFilter from './ProductFilter'
3 | import ProductsList from './ProductList'
4 | import { withProductConsumer } from '../context';
5 | import Loading from './Loading'
6 |
7 | // With Higher order component -- getting state from hoc
8 |
9 | const ProductContainer = ({context}) => {
10 | const { loading, sortedProducts, products } = context;
11 | if (loading) {
12 | return
13 | }
14 | return (
15 | <>
16 |
17 |
18 | >
19 | )
20 | }
21 |
22 | export default withProductConsumer(ProductContainer);
23 |
24 |
25 |
26 |
27 |
28 | // With ProductConsumer rendering
29 |
30 | // const ProductContainer = () => {
31 | // return (
32 | //
33 | // {
34 | // (value) => {
35 | // const { loading, sortedProducts, products } = value;
36 | // if (loading) {
37 | // return
38 | // }
39 | // return (
40 | //
41 | // hello from products container
42 | //
43 | //
44 | //
45 | // )
46 | // }
47 | // }
48 | //
49 | // )
50 | // }
51 |
52 | // export default ProductContainer
53 |
--------------------------------------------------------------------------------
/src/components/GalleryHome.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Title from './Title'
3 | import { Link } from 'react-router-dom';
4 |
5 | import img2 from "../images/room-1.jpeg";
6 | import img4 from "../images/room-2.jpeg";
7 | import img5 from "../images/room-3.jpeg";
8 | import img7 from "../images/images/product-5.jpeg";
9 | import img8 from "../images/images/product-6.jpeg";
10 | import img9 from "../images/images/product-7.jpeg";
11 |
12 | const GalleryHome = () => {
13 | return (
14 | <>
15 |
16 |
17 |
18 |
19 | -
20 |
21 |
22 |
23 |
24 | -
25 |
26 |
27 |
28 |
29 | -
30 |
31 |
32 |
33 |
34 |
35 |
36 | -
37 |
38 |
39 |
40 |
41 | -
42 |
43 |
44 |
45 |
46 | -
47 |
48 |
49 |
50 |
51 |
52 |
53 |
57 | Explore
58 |
59 |
60 |
61 | >
62 | )
63 | }
64 |
65 | export default GalleryHome;
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import logo from '../images/UniQue.jpg'
3 | import { FaAlignRight } from 'react-icons/fa'
4 | import { Link } from 'react-router-dom'
5 |
6 | export class Navbar extends Component {
7 | state = {
8 | isOpen:false
9 | }
10 | handleToggle = () => {
11 | this.setState({ isOpen: !this.state.isOpen });
12 | }
13 | render() {
14 | return (
15 |
45 | )
46 | }
47 | }
48 |
49 | export default Navbar
50 |
--------------------------------------------------------------------------------
/src/components/Gallery.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Title from './Title'
3 | import img1 from "../images/room-1.jpeg";
4 | import img2 from "../images/room-2.jpeg";
5 | import img3 from "../images/room-3.jpeg";
6 | import img4 from "../images/images/product-5.jpeg";
7 | import img5 from "../images/images/product-6.jpeg";
8 | import img6 from "../images/images/product-7.jpeg";
9 | import img7 from "../images/images/product-8.jpeg";
10 | import img10 from "../images/room-8.jpeg";
11 | import img9 from "../images/room-8.jpeg";
12 |
13 | const Gallery = () => {
14 | return (
15 | <>
16 |
17 |
18 |
19 | -
20 |
21 |
22 |
23 |
24 | -
25 |
26 |
27 |
28 |
29 | -
30 |
31 |
32 |
33 |
34 |
35 |
36 | -
37 |
38 |
39 |
40 |
41 | -
42 |
43 |
44 |
45 |
46 | -
47 |
48 |
49 |
50 |
51 |
52 |
53 | -
54 |
55 |
56 |
57 |
58 | -
59 |
60 |
61 |
62 |
63 | -
64 |
65 |
66 |
67 |
68 |
69 |
70 | >
71 | )
72 | }
73 |
74 | export default Gallery;
--------------------------------------------------------------------------------
/src/components/ProductFilter.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { ProductContext } from '../context';
3 | import Title from './Title'
4 |
5 | // get all unique values
6 | const getUnique = (items, value) => {
7 | return [...new Set(items.map(item => item[value]))];
8 | };
9 | const ProductFilter = ({products}) => {
10 | const context = useContext(ProductContext)
11 | const { handleChange, type, price, minPrice, maxPrice } = context;
12 |
13 | let types = getUnique(products, "type");
14 | // for all
15 | types = ["all", ...types];
16 | // map to jsx
17 | types = types.map((item, index) => (
18 |
19 | ))
20 |
21 | return (
22 |
53 | )
54 | }
55 |
56 | export default ProductFilter
57 |
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Hero from '../components/Hero'
3 | import Banner from '../components/Banner'
4 | import GalleryHome from '../components/GalleryHome'
5 | import Footer from '../components/Footer'
6 | import { Link } from 'react-router-dom'
7 | import Services from '../components/Services'
8 | import FeaturedProducts from '../components/FeaturedProducts'
9 | import { FaRegCommentDots } from 'react-icons/fa';
10 | import { GrConnect } from "react-icons/gr";
11 | import { FcSupport } from 'react-icons/fc'
12 | import { AiFillHeart } from 'react-icons/ai';
13 |
14 | const services = [
15 | {
16 | icon: ,
17 | title: "Support",
18 | info: "We Support our customers at every step from the point they connect with us."
19 | }, {
20 | icon: ,
21 | title: "We Care for you",
22 | info: "We provide best products to our customers."
23 | }, {
24 | icon: ,
25 | title: "Connect with Us",
26 | info: "We Welcome you to connect with us through various social media networks."
27 | }
28 | , {
29 | icon: ,
30 | title: "Give Feedback",
31 | info: "We would love to recieve your valuable feedback which will help us improve."
32 | }
33 | ]
34 |
35 |
36 | const Home = () => {
37 | return (
38 | <>
39 |
40 |
43 |
47 | Our Products
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | >
56 | )
57 | }
58 |
59 | export default Home
60 |
--------------------------------------------------------------------------------
/src/pages/SingleProduct.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import defaultBcg from '../images/room-1.jpeg'
3 | // import Hero from '../components/Hero'
4 | import Banner from '../components/Banner'
5 | import {Link} from 'react-router-dom'
6 | import {ProductContext} from '../context'
7 | import StyledHero from '../components/StyledHero'
8 | import Footer from '../components/Footer'
9 |
10 | export class SingleProduct extends Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | slug: this.props.match.params.slug,
15 | defaultBcg
16 | }
17 | }
18 |
19 | componentDidMount() {
20 | window.scrollTo(0, 0);
21 | }
22 |
23 | static contextType = ProductContext;
24 |
25 | render() {
26 | const { getProduct } = this.context;
27 | const product = getProduct(this.state.slug)
28 | if(!product) {
29 | return (
30 |
31 |
no such product can be found...
32 |
33 | back to Products
34 |
35 |
36 | )
37 | }
38 |
39 | const { name, description, price, images } = product;
40 | const [mainImg, ...defaultImg] = images
41 | return (
42 | <>
43 |
44 |
45 |
46 | back to products
47 |
48 |
49 |
50 |
51 |
52 | {defaultImg.map((item, index) => (
53 |

54 | ))}
55 |
56 |
57 |
58 | details
59 | {description}
60 |
61 |
62 | info
63 | price : ₹{price}
64 |
65 |
66 |
67 |
68 | >
69 | )
70 | }
71 | }
72 |
73 | export default SingleProduct
74 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Furniture Shop
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
45 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/src/pages/Contact.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import Footer from '../components/Footer'
3 | import Hero from '../components/Hero'
4 | import Banner from '../components/Banner'
5 | import Services from '../components/Services'
6 | import { Link } from 'react-router-dom'
7 | import { IoMdCall, IoIosMail } from "react-icons/io";
8 | import { GoLocation } from "react-icons/go";
9 | import { FaWhatsapp, FaInstagram, FaFacebookF, FaRegAddressBook } from "react-icons/fa";
10 |
11 |
12 |
13 | const services = [
14 | {
15 | icon: ,
16 | title: "Call At",
17 | info: "XXXXXXXXXX"
18 | }, {
19 | icon: ,
20 | title: "Mail Us At",
21 | info: "example@email.com"
22 | }, {
23 | icon: ,
24 | title: "Join WhatsApp Group",
25 | info: Join
26 | }, {
27 | icon: ,
28 | title: "Instagram",
29 | info: Follow
30 | }
31 | , {
32 | icon: ,
33 | title: "Facebook",
34 | info: Follow
35 | }, {
36 | icon: ,
37 | title: "Address",
38 | info: "Street 1010, somewhere"
39 | }, {
40 | icon: ,
41 | title: "Find Us",
42 | info: Locate
43 | }
44 | ]
45 |
46 | const opening = [
47 | {
48 | icon: "Mon",
49 | title: "10am - 10pm",
50 | info: ""
51 | }, {
52 | icon: "Tue",
53 | title: "10am - 10pm",
54 | info: ""
55 | }, {
56 | icon: "Wed",
57 | title: "10am - 10pm",
58 | info: ""
59 | }, {
60 | icon: "Thurs",
61 | title: "10am - 10pm",
62 | info: ""
63 | }
64 | , {
65 | icon: "Fri",
66 | title: "10am - 10pm",
67 | info: ""
68 | }, {
69 | icon: "Sat",
70 | title: "10am - 10pm",
71 | info: ""
72 | }, {
73 | icon: "Sun",
74 | title: "10am - 10pm",
75 | info: ""
76 | }
77 | ]
78 |
79 | const Contact = () => {
80 |
81 | useEffect(() => {
82 | window.scrollTo(0, 0)
83 | });
84 |
85 | return (
86 | <>
87 |
88 |
89 | Back to Home
90 |
91 |
92 |
93 |
94 |
95 |
96 | >
97 | )
98 | }
99 |
100 | export default Contact
101 |
--------------------------------------------------------------------------------
/src/context.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import items from './data'
3 | import Client from './Contentful'
4 |
5 | const ProductContext = React.createContext();
6 |
7 | export default class ProductProvider extends Component {
8 | state = {
9 | products: [],
10 | sortedProducts: [],
11 | featuredProducts: [],
12 | loading: true,
13 | type: 'all',
14 | price: 0,
15 | minPrice: 0,
16 | maxPrice: 0
17 | }
18 |
19 | getData = async () => {
20 | try {
21 | let response = await Client.getEntries({
22 | content_type: "uniqueFurniture",
23 | // order: 'sys.createdAt'
24 | order: '-fields.price'
25 | })
26 | let products = this.formatData(response.items)
27 | let featuredProducts = products.filter(product => product.featured === true)
28 | let maxPrice = Math.max(...products.map(item => item.price))
29 |
30 | this.setState({
31 | products,
32 | featuredProducts,
33 | sortedProducts: products,
34 | loading: false,
35 | price: maxPrice,
36 | maxPrice
37 | })
38 | } catch (error) {
39 | console.log(error)
40 | }
41 | }
42 |
43 | componentDidMount() {
44 | // -----contentful data-------------
45 | // this.getData();
46 |
47 | // -------Local data-------------
48 | let products = this.formatData(items)
49 | let featuredProducts = products.filter(product => product.featured === true)
50 | let maxPrice = Math.max(...products.map(item => item.price))
51 |
52 | this.setState({
53 | products,
54 | featuredProducts,
55 | sortedProducts: products,
56 | loading: false,
57 | price: maxPrice,
58 | maxPrice
59 | })
60 | }
61 |
62 | formatData(items) {
63 | let tempItems = items.map(item => {
64 | let id = item.sys.id
65 | let images = item.fields.images.map(image => image.fields.file.url)
66 |
67 | let products = { ...item.fields, images, id };
68 | return products
69 | })
70 | return tempItems
71 | }
72 |
73 | getProduct = (slug) => {
74 | let tempItems = [...this.state.products];
75 | const product = tempItems.find((product) => product.slug === slug);
76 | return product;
77 | }
78 |
79 | handleChange = (event) => {
80 | const target = event.target;
81 | const value = target.value;
82 | const name = target.name;
83 |
84 | this.setState(
85 | {
86 | [name]: value
87 | },
88 | this.filterProducts
89 | );
90 | }
91 |
92 | filterProducts = () => {
93 | let { products, type, price } = this.state;
94 |
95 | let tempProducts = [...products]
96 | price = parseInt(price)
97 | // filter by type
98 | if (type !== 'all') {
99 | tempProducts = tempProducts.filter(product => product.type === type)
100 | }
101 |
102 | // filter by price
103 | tempProducts = tempProducts.filter(product => product.price <= price)
104 | this.setState({
105 | sortedProducts: tempProducts
106 | })
107 | }
108 |
109 | render() {
110 | return (
111 |
118 | {this.props.children}
119 |
120 | )
121 | }
122 | }
123 |
124 | const ProductConsumer = ProductContext.Consumer;
125 |
126 | // Higher Order Component -- Providing props and value as context to component
127 | export function withProductConsumer(Component) {
128 | return function ConsumerWrapper(props) {
129 | return (
130 |
131 | {value => }
132 |
133 | )
134 | }
135 | }
136 |
137 |
138 | export { ProductConsumer, ProductContext, ProductProvider};
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | html {
7 | -webkit-background-size: cover;
8 | -moz-background-size: cover;
9 | -o-background-size: cover;
10 | background-size: cover;
11 | }
12 | :root {
13 | --primaryColor: #af9a7d;
14 | --mainWhite: #fff;
15 | --offWhite: #f7f7f7;
16 | --mainBlack: #222;
17 | --mainGrey: #ececec;
18 | --darkGrey: #cfcfcf;
19 | --mainTransition: all 0.3s linear;
20 | --mainSpacing: 3px;
21 | --lightShadow: 2px 5px 3px 0px rgba(0, 0, 0, 0.5);
22 | --darkShadow: 4px 10px 5px 0px rgba(0, 0, 0, 0.5);
23 | }
24 | /* globals */
25 | body {
26 | padding-top: 66px;
27 | color: var(--mainBlack);
28 | background: var(--mainWhite);
29 | font-family: Verdana, Geneva, Tahoma, sans-serif;
30 | line-height: 1.4;
31 | }
32 | h1 {
33 | font-size: 3em;
34 | line-height: 1;
35 | margin-bottom: 0.5em;
36 | }
37 | h2 {
38 | font-size: 2em;
39 | margin-bottom: 0.75em;
40 | }
41 | h3 {
42 | font-size: 1.5em;
43 | line-height: 1;
44 | margin-bottom: 1em;
45 | }
46 | h4 {
47 | font-size: 1.2em;
48 | line-height: 1.25;
49 | margin-bottom: 1.25em;
50 | }
51 | h5 {
52 | font-size: 1em;
53 | font-weight: bold;
54 | margin-bottom: 1.5em;
55 | }
56 | h6 {
57 | font-size: 1em;
58 | font-weight: bold;
59 | margin-bottom: 1.5em;
60 | }
61 |
62 | .btn-primary {
63 | display: inline-block;
64 | text-decoration: none;
65 | letter-spacing: var(--mainSpacing);
66 | color: var(--mainBlack);
67 | background: var(--primaryColor);
68 | padding: 0.4rem 0.9rem;
69 | border: 3px solid var(--primaryColor);
70 | transition: var(--mainTransition);
71 | text-transform: uppercase;
72 | cursor: pointer;
73 | }
74 | .btn-primary:hover {
75 | background: transparent;
76 | color: var(--primaryColor);
77 | }
78 | .loading {
79 | text-transform: capitalize;
80 | text-align: center;
81 | margin-top: 3rem;
82 | }
83 | .error {
84 | text-align: center;
85 | text-transform: uppercase;
86 | margin: 2rem 0;
87 | }
88 | .empty-search {
89 | text-align: center;
90 | text-transform: capitalize;
91 | margin: 2rem 0;
92 | padding: 1rem;
93 | letter-spacing: var(--mainSpacing);
94 | }
95 | /* end of globals */
96 | /* Navbar */
97 | .navbar {
98 | position: fixed;
99 | top: 0;
100 | left: 0;
101 | width: 100%;
102 | padding: 0.75rem 2rem;
103 | background: var(--offWhite);
104 | z-index: 1;
105 | }
106 | .nav-header {
107 | display: flex;
108 | justify-content: space-between;
109 | }
110 | .nav-btn {
111 | background: transparent;
112 | border: none;
113 | cursor: pointer;
114 | outline: none;
115 | }
116 | .nav-icon {
117 | font-size: 1.5rem;
118 | color: var(--primaryColor);
119 | }
120 | .nav-links {
121 | height: 0;
122 | overflow: hidden;
123 | transition: var(--mainTransition);
124 | list-style-type: none;
125 | vertical-align: center;
126 | }
127 | .nav-links a {
128 | display: block;
129 | text-decoration: none;
130 | padding: 1rem 0;
131 | color: var(--mainBlack);
132 | transition: var(--mainTransition);
133 | text-align: center;
134 | font-size: 1rem;
135 | font-weight: 600;
136 | letter-spacing: var(--mainSpacing);
137 | }
138 | .nav-links a:hover {
139 | color: var(--primaryColor);
140 | }
141 |
142 | .show-nav {
143 | height: 210px;
144 | }
145 | @media screen and (min-width: 768px) {
146 | .nav-btn {
147 | display: none;
148 | }
149 | .nav-center {
150 | max-width: 1170px;
151 | margin: 0 auto;
152 | display: flex;
153 | }
154 | .nav-links {
155 | height: auto;
156 | display: flex;
157 | margin-left: 4rem;
158 | }
159 | .nav-links a {
160 | margin: 0 1rem;
161 | padding: 0.5rem 0;
162 | }
163 | }
164 | /* end of navbar */
165 | /* Hero */
166 | .defaultHero,
167 | .roomsHero,
168 | .galleryHero {
169 | min-height: calc(100vh - 66px);
170 | background: url("./images/defaultBcg.jpeg") center/cover no-repeat;
171 | display: flex;
172 | align-items: center;
173 | justify-content: center;
174 | }
175 | .roomsHero {
176 | background: url("./images/images/product-3.jpeg") center/cover no-repeat;
177 | min-height: 70vh;
178 | }
179 | .galleryHero {
180 | background: url("./images/images/product-2.jpeg") center/cover no-repeat;
181 | min-height: 70vh;
182 | }
183 | /* End of Hero */
184 | /* Banner */
185 | .banner {
186 | display: inline-block;
187 | background: rgba(0, 0, 0, 0.5);
188 | color: var(--mainWhite);
189 | padding: 2rem 1rem;
190 | text-align: center;
191 | text-transform: capitalize;
192 | letter-spacing: var(--mainSpacing);
193 | }
194 | .banner h1 {
195 | font-size: 2.5rem;
196 | }
197 | .banner div {
198 | width: 10rem;
199 | height: 5px;
200 | background: var(--primaryColor);
201 | margin: 1.7rem auto;
202 | }
203 | .banner p {
204 | font-size: 1.2rem;
205 | margin-bottom: 2rem;
206 | }
207 | @media screen and (min-width: 576px) {
208 | .banner {
209 | padding: 2rem 3rem;
210 | }
211 | .banner h1 {
212 | font-size: 3rem;
213 | }
214 | }
215 | @media screen and (min-width: 992px) {
216 | .banner {
217 | padding: 2rem 6rem;
218 | }
219 | .banner h1 {
220 | font-size: 4rem;
221 | }
222 | }
223 | /* End of Banner */
224 | /* Title */
225 | .section-title {
226 | text-align: center;
227 | margin-bottom: 4rem;
228 | }
229 | .section-title h4 {
230 | font-size: 2rem;
231 | letter-spacing: var(--mainSpacing);
232 | text-transform: capitalize;
233 | margin-bottom: 1rem;
234 | }
235 | .section-title div {
236 | width: 5rem;
237 | height: 5px;
238 | margin: 0 auto;
239 | background: var(--primaryColor);
240 | }
241 | /* end of Title */
242 |
243 | /* services */
244 | .services {
245 | padding: 5rem 0;
246 | }
247 | .services {
248 | background: var(--darkGrey);
249 | text-align: center;
250 | }
251 | .services-center {
252 | width: 90vw;
253 | margin: 0 auto;
254 | display: grid;
255 | grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
256 | grid-row-gap: 2rem;
257 | grid-column-gap: 50px;
258 | }
259 | .service span {
260 | display: inline-block;
261 | color: var(--primaryColor);
262 | font-size: 2.5rem;
263 | margin-bottom: 1.5rem;
264 | }
265 | .services h6 {
266 | letter-spacing: var(--mainSpacing);
267 | }
268 | .services p {
269 | width: 80%;
270 | margin: 0 auto;
271 | }
272 | @media screen and (min-width: 992px) {
273 | .services-center {
274 | width: 95vw;
275 | max-width: 1170px;
276 | }
277 | }
278 |
279 | @media screen and (min-width: 1200px) {
280 | .services p {
281 | width: 100%;
282 | }
283 | }
284 | /*end of services */
285 | /* featured rooms */
286 |
287 | .featured-rooms {
288 | background-color: var(--mainGrey);
289 | padding: 5rem 0;
290 | }
291 | .featured-rooms-center {
292 | width: 80vw;
293 | margin: 0 auto;
294 | display: grid;
295 | grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
296 | grid-row-gap: 2rem;
297 | grid-column-gap: 40px;
298 | }
299 | @media screen and (min-width: 776px) {
300 | .featured-rooms-center {
301 | width: 90vw;
302 | grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
303 | }
304 | }
305 | @media screen and (min-width: 992px) {
306 | .featured-rooms-center {
307 | width: 95vw;
308 | max-width: 1170px;
309 | }
310 | }
311 | /* end pf featured rooms */
312 | /* room */
313 | .room {
314 | box-shadow: var(--lightShadow);
315 | transition: var(--mainTransition);
316 | }
317 | .room:hover {
318 | box-shadow: var(--darkShadow);
319 | }
320 |
321 | .img-container {
322 | position: relative;
323 | }
324 | .img-container img {
325 | width: 100%;
326 | display: block;
327 | transition: var(--mainTransition);
328 | }
329 | .price-top {
330 | position: absolute;
331 | top: 0;
332 | left: 0;
333 | background: rgba(0, 0, 0, 0.8);
334 | color: var(--mainWhite);
335 | padding: 0.3rem 0.6rem 0.5rem;
336 | border-bottom-right-radius: 1rem;
337 | font-size: 0.5rem;
338 | text-align: center;
339 | transition: var(--mainTransition);
340 | }
341 | .price-top h6 {
342 | margin-bottom: 0;
343 | font-size: 0.9rem;
344 | font-weight: 300;
345 | letter-spacing: var(--mainSpacing);
346 | }
347 | .room-link {
348 | position: absolute;
349 | top: 50%;
350 | left: 50%;
351 | transform: scale(0);
352 | transition: all 0.3s linear;
353 | }
354 | .img-container:hover {
355 | background: rgba(0, 0, 0, 0.8);
356 | }
357 | .img-container:hover img {
358 | opacity: 0.3;
359 | }
360 | .img-container:hover .price-top {
361 | opacity: 0;
362 | }
363 | .img-container:hover .room-link {
364 | transform: translate(-50%, -50%) scale(1);
365 | }
366 | .room-info {
367 | background: var(--darkGrey);
368 | text-transform: capitalize;
369 | padding: 0.5rem 0;
370 | text-align: center;
371 | font-weight: 700;
372 | letter-spacing: var(--mainSpacing);
373 | }
374 | /* end of room */
375 | /* single room*/
376 |
377 | .single-room {
378 | padding: 5rem 0 0 0;
379 | }
380 | .single-room-images {
381 | width: 80vw;
382 | margin: 0 auto;
383 | display: grid;
384 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
385 | grid-row-gap: 2rem;
386 | grid-column-gap: 50px;
387 | }
388 | .single-room-images img {
389 | width: 100%;
390 | display: block;
391 | }
392 | .single-room-info {
393 | width: 80vw;
394 | display: grid;
395 | grid-template-columns: 1fr;
396 | margin: 2rem auto;
397 | }
398 | .desc,
399 | .info {
400 | margin: 1rem 0;
401 | }
402 | .desc h3 {
403 | text-transform: capitalize;
404 | letter-spacing: var(--mainSpacing);
405 | }
406 | .desc p {
407 | line-height: 1.5;
408 | }
409 | .info h3,
410 | .info h6 {
411 | text-transform: capitalize;
412 | letter-spacing: var(--mainSpacing);
413 | }
414 |
415 | .info h6 {
416 | font-weight: 300;
417 | }
418 | .room-extras {
419 | width: 80vw;
420 | margin: 0 auto 3rem auto;
421 | }
422 | .room-extras h6 {
423 | text-transform: capitalize;
424 | letter-spacing: var(--mainSpacing);
425 | }
426 | .extras {
427 | list-style-type: none;
428 | display: grid;
429 | grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
430 | grid-column-gap: 2rem;
431 | grid-row-gap: 1rem;
432 | }
433 | @media screen and (min-width: 992px) {
434 | .single-room-images,
435 | .single-room-info,
436 | .room-extras {
437 | width: 95vw;
438 | max-width: 1170px;
439 | }
440 | .single-room-info {
441 | display: grid;
442 | grid-template-columns: 1fr 1fr;
443 | grid-column-gap: 2rem;
444 | }
445 | .info {
446 | padding-left: 3rem;
447 | }
448 | }
449 | /* end of single room*/
450 | /* roomlist */
451 | .roomslist {
452 | padding: 5rem 0;
453 | }
454 | .roomslist-center {
455 | width: 80vw;
456 | margin: 0 auto;
457 | display: grid;
458 | grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
459 | grid-row-gap: 2rem;
460 | grid-column-gap: 30px;
461 | }
462 |
463 | @media screen and (min-width: 776px) {
464 | .roomslist-center {
465 | width: 90vw;
466 | }
467 | }
468 | @media screen and (min-width: 992px) {
469 | .roomslist-center {
470 | width: 95vw;
471 | max-width: 1170px;
472 | }
473 | }
474 | /* end of roomlist */
475 | /* rooms fitler*/
476 | .filter-container {
477 | padding: 5rem 0;
478 | }
479 | .filter-form {
480 | width: 60vw;
481 | margin: 0 auto;
482 | display: grid;
483 | grid-template-columns: repeat(auto-fit, minmax(202px, 1fr));
484 | grid-row-gap: 2rem;
485 | grid-column-gap: 40px;
486 | }
487 | .form-group {
488 | text-transform: capitalize;
489 | }
490 | .form-group label {
491 | display: block;
492 | letter-spacing: var(--mainSpacing);
493 | margin-bottom: 0.5rem;
494 | }
495 | .form-control {
496 | width: 100%;
497 | background: transparent;
498 | font-size: 1rem;
499 | }
500 | .size-inputs {
501 | display: flex;
502 | }
503 | .size-input {
504 | width: 40%;
505 | padding: 0.2rem;
506 | border: 1px solid var(--mainBlack);
507 | border-radius: 0.3rem;
508 | margin-right: 0.3rem;
509 | }
510 | .single-extra label {
511 | display: inline-block;
512 | font-size: 0.8rem;
513 | margin-left: 0.5rem;
514 | }
515 | @media screen and (min-width: 776px) {
516 | .filter-form {
517 | width: 70vw;
518 | }
519 | }
520 | @media screen and (min-width: 992px) {
521 | .filter-form {
522 | width: 95vw;
523 | max-width: 1170px;
524 | }
525 | }
526 | /* end of rooms fitler*/
527 | /*Footer*/
528 | footer {
529 | background: var(--mainBlack);
530 | color: darkGrey;
531 | display: flex;
532 | flex-direction: column;
533 | justify-content: center;
534 | align-items: center;
535 | text-align: center;
536 | min-height: 230px;
537 | }
538 |
539 | footer p {
540 | margin-top: 0.7rem;
541 | }
542 |
543 | /*Gallery*/
544 | .section-meals {
545 | padding: 0;
546 | }
547 |
548 | .meals-showcase {
549 | list-style: none;
550 | width: 100%;
551 | }
552 |
553 | .meals-showcase li {
554 | display: block;
555 | float: left;
556 | width: 33.33%;
557 | }
558 |
559 | .meal-photo {
560 | width: 100%;
561 | height: 260px;
562 | margin: 0;
563 | overflow: hidden;
564 | background-color: #000;
565 | }
566 |
567 | .meal-photo img {
568 | opacity: 0.88;
569 | width: 100%;
570 | height: auto;
571 | -webkit-transform: scale(1.15);
572 | -ms-transform: scale(1.15);
573 | transform: scale(1.15);
574 | -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
575 | transition: transform 0.5s, opacity 0.5s;
576 | }
577 |
578 | .meal-photo img:hover {
579 | opacity: 1;
580 | -webkit-transform: scale(1.03);
581 | -ms-transform: scale(1.03);
582 | transform: scale(1.03);
583 | }
584 |
585 | .clearfix {zoom: 1;}
586 | .clearfix:after {
587 | content: '.';
588 | clear: both;
589 | display: block;
590 | height: 0;
591 | visibility: hidden;
592 | }
593 |
594 | @media screen and (max-width: 1076px) {
595 | .meals-showcase li {
596 | margin-left: 0.25%;
597 | width: 99.5%;
598 | }
599 | .meal-photo {
600 | height: 200px;
601 | }
602 | }
603 |
604 | .gallerybtn {
605 | position: relative;
606 | left: 50%;
607 | transform: translate(-50%, -50%);
608 | }
609 |
610 |
--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
1 | import room1 from "./images/details-1.jpeg";
2 | import room2 from "./images/details-2.jpeg";
3 | import room3 from "./images/details-3.jpeg";
4 | import room4 from "./images/details-4.jpeg";
5 | import img1 from "./images/room-1.jpeg";
6 | import img2 from "./images/room-2.jpeg";
7 | import img3 from "./images/room-3.jpeg";
8 | import img4 from "./images/images/product-5.jpeg";
9 | import img5 from "./images/images/product-6.jpeg";
10 | import img6 from "./images/images/product-7.jpeg";
11 | import img7 from "./images/images/product-8.jpeg";
12 | import img8 from "./images/room-8.jpeg";
13 | import img9 from "./images/room-9.jpeg";
14 | import img10 from "./images/room-10.jpeg";
15 | import img11 from "./images/room-11.jpeg";
16 | import img12 from "./images/room-12.jpeg";
17 |
18 | export default [
19 | {
20 | sys: {
21 | id: "1"
22 | },
23 | fields: {
24 | name: "Single Panel Bed",
25 | slug: "single-panel-bed",
26 | type: "bed",
27 | price: 1000,
28 | size: 200,
29 | capacity: 1,
30 | pets: false,
31 | breakfast: false,
32 | featured: false,
33 | description:
34 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
35 | extras: [
36 | "Plush pillows and breathable bed linens",
37 | "Soft, oversized bath towels",
38 | "Full-sized, pH-balanced toiletries",
39 | "Complimentary refreshments",
40 | "Adequate safety/security",
41 | "Internet",
42 | "Comfortable beds"
43 | ],
44 | images: [
45 | {
46 | fields: {
47 | file: {
48 | url: img1
49 | }
50 | }
51 | },
52 | {
53 | fields: {
54 | file: {
55 | url: room2
56 | }
57 | }
58 | },
59 | {
60 | fields: {
61 | file: {
62 | url: room3
63 | }
64 | }
65 | },
66 | {
67 | fields: {
68 | file: {
69 | url: room4
70 | }
71 | }
72 | }
73 | ]
74 | }
75 | },
76 | {
77 | sys: {
78 | id: "2"
79 | },
80 | fields: {
81 | name: "Twin Panel Bed",
82 | slug: "twin-panel-bed",
83 | type: "bed",
84 | price: 1500,
85 | size: 250,
86 | capacity: 1,
87 | pets: false,
88 | breakfast: false,
89 | featured: false,
90 | description:
91 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
92 | extras: [
93 | "Plush pillows and breathable bed linens",
94 | "Soft, oversized bath towels",
95 | "Full-sized, pH-balanced toiletries",
96 | "Complimentary refreshments",
97 | "Adequate safety/security",
98 | "Internet",
99 | "Comfortable beds"
100 | ],
101 | images: [
102 | {
103 | fields: {
104 | file: {
105 | url: img2
106 | }
107 | }
108 | },
109 | {
110 | fields: {
111 | file: {
112 | url: room2
113 | }
114 | }
115 | },
116 | {
117 | fields: {
118 | file: {
119 | url: room3
120 | }
121 | }
122 | },
123 | {
124 | fields: {
125 | file: {
126 | url: room4
127 | }
128 | }
129 | }
130 | ]
131 | }
132 | },
133 | {
134 | sys: {
135 | id: "3"
136 | },
137 | fields: {
138 | name: "Queen Panel Bed",
139 | slug: "queen-panel-bed",
140 | type: "bed",
141 | price: 2500,
142 | size: 300,
143 | capacity: 1,
144 | pets: true,
145 | breakfast: false,
146 | featured: false,
147 | description:
148 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
149 | extras: [
150 | "Plush pillows and breathable bed linens",
151 | "Soft, oversized bath towels",
152 | "Full-sized, pH-balanced toiletries",
153 | "Complimentary refreshments",
154 | "Adequate safety/security",
155 | "Internet",
156 | "Comfortable beds"
157 | ],
158 | images: [
159 | {
160 | fields: {
161 | file: {
162 | url: img3
163 | }
164 | }
165 | },
166 | {
167 | fields: {
168 | file: {
169 | url: room2
170 | }
171 | }
172 | },
173 | {
174 | fields: {
175 | file: {
176 | url: room3
177 | }
178 | }
179 | },
180 | {
181 | fields: {
182 | file: {
183 | url: room4
184 | }
185 | }
186 | }
187 | ]
188 | }
189 | },
190 | {
191 | sys: {
192 | id: "4"
193 | },
194 | fields: {
195 | name: "Fridge",
196 | slug: "fridge",
197 | type: "fridge",
198 | price: 3000,
199 | size: 400,
200 | capacity: 1,
201 | pets: true,
202 | breakfast: true,
203 | featured: false,
204 | description:
205 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
206 | extras: [
207 | "Plush pillows and breathable bed linens",
208 | "Soft, oversized bath towels",
209 | "Full-sized, pH-balanced toiletries",
210 | "Complimentary refreshments",
211 | "Adequate safety/security",
212 | "Internet",
213 | "Comfortable beds"
214 | ],
215 | images: [
216 | {
217 | fields: {
218 | file: {
219 | url: img4
220 | }
221 | }
222 | },
223 | {
224 | fields: {
225 | file: {
226 | url: room2
227 | }
228 | }
229 | },
230 | {
231 | fields: {
232 | file: {
233 | url: room3
234 | }
235 | }
236 | },
237 | {
238 | fields: {
239 | file: {
240 | url: room4
241 | }
242 | }
243 | }
244 | ]
245 | }
246 | },
247 | {
248 | sys: {
249 | id: "5"
250 | },
251 | fields: {
252 | name: "Dresser",
253 | slug: "dresser",
254 | type: "dresser",
255 | price: 2000,
256 | size: 300,
257 | capacity: 2,
258 | pets: false,
259 | breakfast: false,
260 | featured: false,
261 | description:
262 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
263 | extras: [
264 | "Plush pillows and breathable bed linens",
265 | "Soft, oversized bath towels",
266 | "Full-sized, pH-balanced toiletries",
267 | "Complimentary refreshments",
268 | "Adequate safety/security",
269 | "Internet",
270 | "Comfortable beds"
271 | ],
272 | images: [
273 | {
274 | fields: {
275 | file: {
276 | url: img5
277 | }
278 | }
279 | },
280 | {
281 | fields: {
282 | file: {
283 | url: room2
284 | }
285 | }
286 | },
287 | {
288 | fields: {
289 | file: {
290 | url: room3
291 | }
292 | }
293 | },
294 | {
295 | fields: {
296 | file: {
297 | url: room4
298 | }
299 | }
300 | }
301 | ]
302 | }
303 | },
304 | {
305 | sys: {
306 | id: "6"
307 | },
308 | fields: {
309 | name: "Couch",
310 | slug: "couch",
311 | type: "couch",
312 | price: 2500,
313 | size: 350,
314 | capacity: 2,
315 | pets: false,
316 | breakfast: false,
317 | featured: false,
318 | description:
319 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
320 | extras: [
321 | "Plush pillows and breathable bed linens",
322 | "Soft, oversized bath towels",
323 | "Full-sized, pH-balanced toiletries",
324 | "Complimentary refreshments",
325 | "Adequate safety/security",
326 | "Internet",
327 | "Comfortable beds"
328 | ],
329 | images: [
330 | {
331 | fields: {
332 | file: {
333 | url: img6
334 | }
335 | }
336 | },
337 | {
338 | fields: {
339 | file: {
340 | url: room2
341 | }
342 | }
343 | },
344 | {
345 | fields: {
346 | file: {
347 | url: room3
348 | }
349 | }
350 | },
351 | {
352 | fields: {
353 | file: {
354 | url: room4
355 | }
356 | }
357 | }
358 | ]
359 | }
360 | },
361 | {
362 | sys: {
363 | id: "7"
364 | },
365 | fields: {
366 | name: "Table",
367 | slug: "table",
368 | type: "table",
369 | price: 3000,
370 | size: 400,
371 | capacity: 2,
372 | pets: true,
373 | breakfast: false,
374 | featured: false,
375 | description:
376 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
377 | extras: [
378 | "Plush pillows and breathable bed linens",
379 | "Soft, oversized bath towels",
380 | "Full-sized, pH-balanced toiletries",
381 | "Complimentary refreshments",
382 | "Adequate safety/security",
383 | "Internet",
384 | "Comfortable beds"
385 | ],
386 | images: [
387 | {
388 | fields: {
389 | file: {
390 | url: img7
391 | }
392 | }
393 | },
394 | {
395 | fields: {
396 | file: {
397 | url: room2
398 | }
399 | }
400 | },
401 | {
402 | fields: {
403 | file: {
404 | url: room3
405 | }
406 | }
407 | },
408 | {
409 | fields: {
410 | file: {
411 | url: room4
412 | }
413 | }
414 | }
415 | ]
416 | }
417 | },
418 | {
419 | sys: {
420 | id: "8"
421 | },
422 | fields: {
423 | name: "double Bed",
424 | slug: "double-bed",
425 | type: "bed",
426 | price: 4000,
427 | size: 500,
428 | capacity: 2,
429 | pets: true,
430 | breakfast: true,
431 | featured: true,
432 | description:
433 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
434 | extras: [
435 | "Plush pillows and breathable bed linens",
436 | "Soft, oversized bath towels",
437 | "Full-sized, pH-balanced toiletries",
438 | "Complimentary refreshments",
439 | "Adequate safety/security",
440 | "Internet",
441 | "Comfortable beds"
442 | ],
443 | images: [
444 | {
445 | fields: {
446 | file: {
447 | url: img8
448 | }
449 | }
450 | },
451 | {
452 | fields: {
453 | file: {
454 | url: room2
455 | }
456 | }
457 | },
458 | {
459 | fields: {
460 | file: {
461 | url: room3
462 | }
463 | }
464 | },
465 | {
466 | fields: {
467 | file: {
468 | url: room4
469 | }
470 | }
471 | }
472 | ]
473 | }
474 | },
475 | {
476 | sys: {
477 | id: "9"
478 | },
479 | fields: {
480 | name: "King Panel Bed",
481 | slug: "king-panel-bed",
482 | type: "bed",
483 | price: 3000,
484 | size: 500,
485 | capacity: 3,
486 | pets: false,
487 | breakfast: false,
488 | featured: false,
489 | description:
490 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
491 | extras: [
492 | "Plush pillows and breathable bed linens",
493 | "Soft, oversized bath towels",
494 | "Full-sized, pH-balanced toiletries",
495 | "Complimentary refreshments",
496 | "Adequate safety/security",
497 | "Internet",
498 | "Comfortable beds"
499 | ],
500 | images: [
501 | {
502 | fields: {
503 | file: {
504 | url: img9
505 | }
506 | }
507 | },
508 | {
509 | fields: {
510 | file: {
511 | url: room2
512 | }
513 | }
514 | },
515 | {
516 | fields: {
517 | file: {
518 | url: room3
519 | }
520 | }
521 | },
522 | {
523 | fields: {
524 | file: {
525 | url: room4
526 | }
527 | }
528 | }
529 | ]
530 | }
531 | },
532 | {
533 | sys: {
534 | id: "10"
535 | },
536 | fields: {
537 | name: "family basic Bed",
538 | slug: "family-basic-bed",
539 | type: "bed",
540 | price: 3500,
541 | size: 550,
542 | capacity: 4,
543 | pets: false,
544 | breakfast: false,
545 | featured: false,
546 | description:
547 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
548 | extras: [
549 | "Plush pillows and breathable bed linens",
550 | "Soft, oversized bath towels",
551 | "Full-sized, pH-balanced toiletries",
552 | "Complimentary refreshments",
553 | "Adequate safety/security",
554 | "Internet",
555 | "Comfortable beds"
556 | ],
557 | images: [
558 | {
559 | fields: {
560 | file: {
561 | url: img10
562 | }
563 | }
564 | },
565 | {
566 | fields: {
567 | file: {
568 | url: room2
569 | }
570 | }
571 | },
572 | {
573 | fields: {
574 | file: {
575 | url: room3
576 | }
577 | }
578 | },
579 | {
580 | fields: {
581 | file: {
582 | url: room4
583 | }
584 | }
585 | }
586 | ]
587 | }
588 | },
589 | {
590 | sys: {
591 | id: "11"
592 | },
593 | fields: {
594 | name: "family standard",
595 | slug: "family-standard",
596 | type: "bed",
597 | price: 4000,
598 | size: 600,
599 | capacity: 5,
600 | pets: true,
601 | breakfast: false,
602 | featured: false,
603 | description:
604 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
605 | extras: [
606 | "Plush pillows and breathable bed linens",
607 | "Soft, oversized bath towels",
608 | "Full-sized, pH-balanced toiletries",
609 | "Complimentary refreshments",
610 | "Adequate safety/security",
611 | "Internet",
612 | "Comfortable beds"
613 | ],
614 | images: [
615 | {
616 | fields: {
617 | file: {
618 | url: img11
619 | }
620 | }
621 | },
622 | {
623 | fields: {
624 | file: {
625 | url: room2
626 | }
627 | }
628 | },
629 | {
630 | fields: {
631 | file: {
632 | url: room3
633 | }
634 | }
635 | },
636 | {
637 | fields: {
638 | file: {
639 | url: room4
640 | }
641 | }
642 | }
643 | ]
644 | }
645 | },
646 | {
647 | sys: {
648 | id: "12"
649 | },
650 | fields: {
651 | name: "family deluxe Bed",
652 | slug: "family-deluxe-bed",
653 | type: "bed",
654 | price: 5000,
655 | size: 700,
656 | capacity: 6,
657 | pets: true,
658 | breakfast: true,
659 | featured: true,
660 | description:
661 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
662 | extras: [
663 | "Plush pillows and breathable bed linens",
664 | "Soft, oversized bath towels",
665 | "Full-sized, pH-balanced toiletries",
666 | "Complimentary refreshments",
667 | "Adequate safety/security",
668 | "Internet",
669 | "Comfortable beds"
670 | ],
671 | images: [
672 | {
673 | fields: {
674 | file: {
675 | url: img12
676 | }
677 | }
678 | },
679 | {
680 | fields: {
681 | file: {
682 | url: room2
683 | }
684 | }
685 | },
686 | {
687 | fields: {
688 | file: {
689 | url: room3
690 | }
691 | }
692 | },
693 | {
694 | fields: {
695 | file: {
696 | url: room4
697 | }
698 | }
699 | }
700 | ]
701 | }
702 | },
703 | {
704 | sys: {
705 | id: "13"
706 | },
707 | fields: {
708 | name: "presidential bed",
709 | slug: "presidential-bed",
710 | type: "bed",
711 | price: 6000,
712 | size: 1000,
713 | capacity: 10,
714 | pets: true,
715 | breakfast: true,
716 | featured: true,
717 | description:
718 | "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
719 | extras: [
720 | "Plush pillows and breathable bed linens",
721 | "Soft, oversized bath towels",
722 | "Full-sized, pH-balanced toiletries",
723 | "Complimentary refreshments",
724 | "Adequate safety/security",
725 | "Internet",
726 | "Comfortable beds"
727 | ],
728 | images: [
729 | {
730 | fields: {
731 | file: {
732 | url: room1
733 | }
734 | }
735 | },
736 | {
737 | fields: {
738 | file: {
739 | url: room2
740 | }
741 | }
742 | },
743 | {
744 | fields: {
745 | file: {
746 | url: room3
747 | }
748 | }
749 | },
750 | {
751 | fields: {
752 | file: {
753 | url: room4
754 | }
755 | }
756 | }
757 | ]
758 | }
759 | }
760 | ];
761 |
--------------------------------------------------------------------------------