commit 7ff06231931280397aa3b857733de5d8df0972c2 Author: yusmardianto Date: Mon Nov 22 09:29:17 2021 +0700 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bda9914 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build +/out + +# misc +.env +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +package-lock.json + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# package +/dist +/.next \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..bf8569b --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# Redux example + +This example shows how to integrate Redux in Next.js. + +Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use Redux that also works with Next.js's universal rendering approach. + +In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color (black) than the client one (grey). + +The trick here for supporting universal Redux is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`. + +All components have access to the Redux store using `useSelector`, `useDispatch` or `connect` from `react-redux`. + +On the server side every request initializes a new store, because otherwise different user data can be mixed up. On the client side the same store is used, even between page changes. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux&project-name=with-redux&repository-name=with-redux) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-redux with-redux-app +# or +yarn create next-app --example with-redux with-redux-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/components/Accomodation/Superior.js b/components/Accomodation/Superior.js new file mode 100644 index 0000000..92d4639 --- /dev/null +++ b/components/Accomodation/Superior.js @@ -0,0 +1,161 @@ +import React from 'react'; +import * as Icon from 'react-feather'; +import Link from 'next/link'; +import SliderImage from 'react-zoom-slider'; + +const data = [ + { + image: 'https://origin.pegipegi.com/jalan/images/pict1L/Y2/Y996372/Y996372001.jpg', + text: 'img1' + }, + { + image: 'https://pix10.agoda.net/hotelImages/602/6025213/6025213_18111511050069716941.jpg?s=1024x768', + text: 'img2' + }, + { + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf-p3S-ls6H91EnKbEf3T9SO2Sz8Hh9BjpIA&usqp=CAU', + text: 'img3' + }, + { + image: 'https://origin.pegipegi.com/jalan/images/pict1L/Y2/Y996372/Y996372001.jpg', + text: 'img4' + }, + { + image: 'https://pix10.agoda.net/hotelImages/602/6025213/6025213_18111511050069716941.jpg?s=1024x768', + text: 'img5' + }, + { + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf-p3S-ls6H91EnKbEf3T9SO2Sz8Hh9BjpIA&usqp=CAU', + text: 'img6' + }, +]; + +const SuperiorRoom = () => { + return ( + <> +
+
+
+
+
+
+ +
+ +
+
+ +
+ +

Room Description

+ +

Quuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quia non numquam eius modi tempora incidunt ut labore et dolore magnam dolor sit amet, consectetur adipisicing.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

+ +

Quuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quia non numquam eius modi tempora incidunt ut labore et dolore magnam dolor sit amet, consectetur adipisicing.


+ + {/*

Gallery

+
    +
  • +
    + image +
    +
    • + +
  • +
    + image +
    +
    • + +
  • +
    + image +
    +
    • +
*/} + +

Fasilitas

+ +
    +
  • Free Wifi
    • +
  • Telpon
    • +
  • Breakfas
    • +
+
+ + {/*
+ +
*/} +
+
+ +
+
+
+

Booking Room


+

Rp.400.000,- / Night



+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ +
+
+

+
+
+ Book Now! +
+
+
+
+
+
+
+
+
+ + ) +} + + +export default SuperiorRoom; \ No newline at end of file diff --git a/components/Blog/BlogSidebar.js b/components/Blog/BlogSidebar.js new file mode 100644 index 0000000..91c2d17 --- /dev/null +++ b/components/Blog/BlogSidebar.js @@ -0,0 +1,108 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; + +const BlogSidebar = () => { + return ( +
+
+
+ + +
+
+ +
+

Popular Posts

+ + + + + + +
+ +
+

Categories

+ + +
+ +
+

Tags

+ +
+ IT (3) + Spacle (3) + Games (2) + Fashion (2) + Travel (1) + Smart (1) + Marketing (1) + Tips (2) +
+
+
+ ) +} + +export default BlogSidebar; \ No newline at end of file diff --git a/components/Common/BlogPost.js b/components/Common/BlogPost.js new file mode 100644 index 0000000..f84c258 --- /dev/null +++ b/components/Common/BlogPost.js @@ -0,0 +1,123 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; + +const BlogPost = () => { + return ( +
+
+
+

The News from Our Blog

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+
+ + + image + + + +
+ March 15, 2021 +
+
+ +
+

+ + The Security Risks of Changing Package Owners + +

+ + + By Admin + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.

+ + + Read More + +
+
+
+ +
+
+
+ + + image + + + +
+ March 17, 2021 +
+
+ +
+

+ + Tips to Protecting Your Business and Family + +

+ + + By Smith + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.

+ + + Read More + +
+
+
+ +
+
+
+ + + image + + + +
+ March 19, 2021 +
+
+ +
+

+ + Protect Your Workplace from Cyber Attacks + +

+ + + By John + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.

+ + + Read More + +
+
+
+
+
+
+ ) +} + +export default BlogPost; \ No newline at end of file diff --git a/components/Common/BlogPostStyleThree.js b/components/Common/BlogPostStyleThree.js new file mode 100644 index 0000000..da75d66 --- /dev/null +++ b/components/Common/BlogPostStyleThree.js @@ -0,0 +1,132 @@ +import React from 'react'; +import Link from 'next/link'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); + +const options = { + loop: true, + nav: false, + dots: true, + autoplayHoverPause: true, + autoplay: true, + smartSpeed: 1000, + autoplayTimeout: 5000, + margin: 30, + responsive: { + 0: { + items: 1, + }, + 768: { + items: 2, + }, + 992: { + items: 3, + } + } +}; + +const BlogPostStyleThree = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+
+

Our Recent News

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + {display ? +
+
+ + image + +
+ +
+
    +
  • By Admin
    • +
  • 20 February 2020
    • +
+

+ + The security risks of changing package owners + +

+
+
+ +
+
+ + image + +
+ +
+
    +
  • By Admin
    • +
  • 21 February 2020
    • +
+

+ + Tips to Protecting Your Business and Family + +

+
+
+ +
+
+ + image + +
+ +
+
    +
  • By Admin
    • +
  • 22 February 2020
    • +
+

+ + Protect Your Workplace from Cyber Attacks + +

+
+
+ +
+
+ + image + +
+ +
+
    +
  • By Admin
    • +
  • 22 February 2020
    • +
+

+ + Four New WordPress.com Color Schemes + +

+
+
+ : ''} +
+
+ ) +} + +export default BlogPostStyleThree; \ No newline at end of file diff --git a/components/Common/BlogPostStyleTwo.js b/components/Common/BlogPostStyleTwo.js new file mode 100644 index 0000000..dd357b4 --- /dev/null +++ b/components/Common/BlogPostStyleTwo.js @@ -0,0 +1,140 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; + +const BlogPostStyleTwo = () => { + return ( +
+
+
+ News +

The News from Our Blog

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+
+ + + image + + +
+ +
+
    +
  • + Admin +
    • +
  • August 15, 2021
    • +
+ +

+ + The security risks of changing package owners + +

+ + + + Read More + + +
+
+
+ +
+
+
+ + + image + + +
+ +
+
    +
  • + Admin +
    • +
  • August 15, 2021
    • +
+ +

+ + Tips to Protecting Your Business and Family + +

+ + + + Read More + + +
+
+
+ +
+
+
+ + + image + + +
+ +
+
    +
  • + Admin +
    • +
  • August 15, 2021
    • +
+

+ + Protect Your Workplace from Cyber Attacks + +

+ + + + Read More + + +
+
+
+
+
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default BlogPostStyleTwo; \ No newline at end of file diff --git a/components/Common/CTA.js b/components/Common/CTA.js new file mode 100644 index 0000000..141e612 --- /dev/null +++ b/components/Common/CTA.js @@ -0,0 +1,35 @@ +import React from 'react'; +import Link from 'next/link'; + +const CTA = () => { + return ( +
+
+
+
+
+

Sign up for web hosting today!

+
+
+ +
+
+
+ Starting at only +

$4.75/mo*

+
+ +
+ + Get Started + +
+
+
+
+
+
+ ); +} + +export default CTA; diff --git a/components/Common/CTAStyleTwo.js b/components/Common/CTAStyleTwo.js new file mode 100644 index 0000000..70f87bc --- /dev/null +++ b/components/Common/CTAStyleTwo.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Link from 'next/link'; + +const CTAStyleTwo = () => { + return ( +
+
+
+

Do you have any projects?

+ + + Contact Us + +
+
+
+ ); +} + +export default CTAStyleTwo; \ No newline at end of file diff --git a/components/Common/Feedback.js b/components/Common/Feedback.js new file mode 100644 index 0000000..de4aa56 --- /dev/null +++ b/components/Common/Feedback.js @@ -0,0 +1,228 @@ +import React from 'react'; +import Slider from "react-slick"; +import * as Icon from 'react-feather'; + +const NextArrow = (props) => { + const { onClick } = props; + return ( + + ); +} + +const PrevArrow = (props) => { + const { onClick } = props; + return ( + + ); +} + +class Feedback extends React.Component { + state = { + imagesSlider: null, + thumbnailsSlider: null, + oldSlide: 0, + activeSlide: 0, + activeSlide2: 0 + }; + + componentDidMount() { + this.setState({ + imagesSlider: this.slider1, + thumbnailsSlider: this.slider2 + }); + } + + renderSliderFullContent = () => { + return DEFAULT_PROPS.map(({name,profession,image,content}) => { + return ( +
+
+
+
+ image +
+ +

{name}

+ {profession} +

{content}

+
+
+
+ ) + }) + } + + renderSliderImages = () => { + return DEFAULT_PROPS.map(({name, image}) => { + return ( +
+
+
+ client +
+
+
+ ) + }) + } + + render() { + const sliderSettings1 = { + speed: 100, + slidesToShow: 1, + slidesToScroll: 1, + cssEase: 'linear', + fade: true, + autoplay: true, + draggable: true, + asNavFor: this.state.thumbnailsSlider, + draggable: false, + arrows: false, + nextArrow: false, + prevArrow: false + } + + const sliderSettings2 = { + speed: 300, + slidesToShow: 5, + slidesToScroll: 1, + cssEase: 'linear', + autoplay: true, + centerMode: true, + draggable: false, + focusOnSelect: true, + asNavFor: this.state.imagesSlider, + nextArrow: , + prevArrow: , + beforeChange: (current, next) => this.setState({ oldSlide: current, activeSlide: next }), + afterChange: current => this.setState({ activeSlide2: current }) + } + + return ( +
+
+
+

What users Saying

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+ (this.slider1 = slider)} + {...sliderSettings1} + > + { + this.renderSliderFullContent() + } + +
+
+ +
+
+ (this.slider2 = slider)} + {...sliderSettings2} + > + { + this.renderSliderImages() + } + +
+
+ +
+ +
+ +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); + } +} + +const DEFAULT_PROPS = [ + { + name: 'David Gale', + profession: 'Web Developer', + image: '/images/client-image/client2.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Matt Damon', + profession: 'Software Engineer', + image: '/images/client-image/client4.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Nicky Parsons', + profession: 'Fictional Character', + image: '/images/client-image/client1.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Jason Momoa', + profession: 'American Actor', + image: '/images/client-image/client5.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Gennady Korotkevich', + profession: 'Sport Programmer', + image: '/images/client-image/client3.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Petr Mitrichev', + profession: 'Russian Programmer', + image: '/images/client-image/client3.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Reid W. Barton', + profession: 'Mathematics', + image: '/images/client-image/client2.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + }, + { + name: 'Lisa Sauermann', + profession: 'Mathematician', + image: '/images/client-image/client1.jpg', + content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + } +]; + +export default Feedback; diff --git a/components/Common/FeedbackStyleFive.js b/components/Common/FeedbackStyleFive.js new file mode 100644 index 0000000..b48e524 --- /dev/null +++ b/components/Common/FeedbackStyleFive.js @@ -0,0 +1,50 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); + +const options = { + loop: false, + nav: false, + smartSpeed: 1000, + autoplayTimeout: 5000, + dots: true, + autoplayHoverPause: true, + autoplay: true, + items: 1, +}; + +const FeedbackStyleFive = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+ {display ? +
+ image +

Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.

+
+ +
+ image +

Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.

+
+ +
+ image +

Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.

+
+ : ''} +
+
+ ) +} + +export default FeedbackStyleFive; \ No newline at end of file diff --git a/components/Common/FeedbackStyleFour.js b/components/Common/FeedbackStyleFour.js new file mode 100644 index 0000000..adfe210 --- /dev/null +++ b/components/Common/FeedbackStyleFour.js @@ -0,0 +1,112 @@ +import React from 'react'; +import OwlCarousel from 'react-owl-carousel3'; +import * as Icon from 'react-feather'; + +const options = { + loop: false, + nav: false, + dots: true, + autoplay: true, + smartSpeed: 1000, + autoplayTimeout: 5000, + items: 1, + animateOut: 'fadeOut', +} + +const FeedbackStyleFour = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+
+

Our Clients Feedback

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + {display ? +
+
+ image +

Sarah Taylor

+ CEO at Envato +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ + + + + +
+
+ +
+
+ image +

Steven Smith

+ CEO at Envato +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ + + + + +
+
+ +
+
+ image +

James Eva

+ CEO at Envato +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ + + + + +
+
+ : ''} +
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default FeedbackStyleFour; \ No newline at end of file diff --git a/components/Common/FeedbackStyleThree.js b/components/Common/FeedbackStyleThree.js new file mode 100644 index 0000000..9892bf2 --- /dev/null +++ b/components/Common/FeedbackStyleThree.js @@ -0,0 +1,120 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); +import * as Icon from 'react-feather'; + +const options = { + loop: false, + nav: false, + dots: true, + autoplay: true, + smartSpeed: 1000, + autoplayTimeout: 5000, + items: 1, + animateOut: 'fadeOut', +} + +const FeedbackStyleThree = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+
+ Testimonials +

Our Clients Feedback

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + {display ? +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ image + +
+ + + + + +
+ +

Sarah Taylor

+ CEO at Envato +
+
+ +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ image + +
+ + + + + +
+ +

Steven Smith

+ CEO at Envato +
+
+ +
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!

+ +
+ image + +
+ + + + + +
+ +

James Eva

+ CEO at Envato +
+
+ : ''} +
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default FeedbackStyleThree; \ No newline at end of file diff --git a/components/Common/FeedbackStyleTwo.js b/components/Common/FeedbackStyleTwo.js new file mode 100644 index 0000000..4020afd --- /dev/null +++ b/components/Common/FeedbackStyleTwo.js @@ -0,0 +1,116 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); + +const options = { + loop: false, + nav: false, + dots: true, + autoplay: true, + smartSpeed: 1000, + autoplayTimeout: 5000, + items: 1, +} + +const FeedbackStyleTwo = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + return ( +
+
+
+

What users Saying

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + {display ? +
+
+
+ image +
+ +
+

Steve Lucy

+ Lead Developer at Envato +
+
+ +

Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+ image +
+ +
+

David Luiz

+ Lead Developer at Envato +
+
+ +

Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+ image +
+ +
+

Marta Smith

+ Lead Developer at Envato +
+
+ +

Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ : ''} +
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default FeedbackStyleTwo; diff --git a/components/Common/FunFactsArea.js b/components/Common/FunFactsArea.js new file mode 100644 index 0000000..0288959 --- /dev/null +++ b/components/Common/FunFactsArea.js @@ -0,0 +1,61 @@ +import React from 'react'; +import Link from 'next/link'; + +const FunFactsArea = () => { + return ( +
+
+
+

We always try to understand users expectation

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+

180K

+

Downloaded

+
+
+ +
+
+

20K

+

Feedback

+
+
+ +
+
+

500+

+

Workers

+
+
+ +
+
+

70+

+

Contributors

+
+
+
+ +
+

Have any question about us?

+

Don't hesitate to contact us

+ + + Contact Us + +
+ +
+ map +
+
+
+ ) +} + +export default FunFactsArea; \ No newline at end of file diff --git a/components/Common/Newsletter.js b/components/Common/Newsletter.js new file mode 100644 index 0000000..4b9885d --- /dev/null +++ b/components/Common/Newsletter.js @@ -0,0 +1,46 @@ +import React from 'react'; + +const Newsletter = () => { + return ( +
+
+
+
+
+ image +
+
+ +
+
+

Start your free trial

+ +
+ + +
+ +

Test out the Machine Learning features for 14 days, no credit card required.

+
+
+
+
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default Newsletter; \ No newline at end of file diff --git a/components/Common/NewsletterStyleTwo.js b/components/Common/NewsletterStyleTwo.js new file mode 100644 index 0000000..4483394 --- /dev/null +++ b/components/Common/NewsletterStyleTwo.js @@ -0,0 +1,32 @@ +import React from 'react'; + +const NewsletterStyleTwo = () => { + return ( +
+
+
+
+
+ image +
+
+ +
+
+

Start your free trial

+ +
+ + +
+ +

Test out the Big Data Analytics features for 14 days, no credit card required.

+
+
+
+
+
+ ) +} + +export default NewsletterStyleTwo; \ No newline at end of file diff --git a/components/Common/PageBanner.js b/components/Common/PageBanner.js new file mode 100644 index 0000000..d43b32f --- /dev/null +++ b/components/Common/PageBanner.js @@ -0,0 +1,43 @@ +import React from 'react'; + +const PageBanner = ({pageTitle}) => { + return ( +
+
+
+
+

{pageTitle}

+
+
+
+ + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ); +} + +export default PageBanner; \ No newline at end of file diff --git a/components/Common/Partner.js b/components/Common/Partner.js new file mode 100644 index 0000000..8cc407c --- /dev/null +++ b/components/Common/Partner.js @@ -0,0 +1,200 @@ +import React from 'react' +import Link from 'next/link' + +const Partner = () => { + return ( + <> +
+
+

Ready to talk?

+

Our team is here to answer your question about StartP

+ + + Contact Us + + + + + Or, get started now with a free trial + + +
+
+ +
+
+
More that 1.5 million businesses and organizations use StartP
+ +
+
+
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+ +
+ + + partner + partner + + +
+
+
+
+
+ + ) + +} + +export default Partner; \ No newline at end of file diff --git a/components/Common/PartnerStyleTwo.js b/components/Common/PartnerStyleTwo.js new file mode 100644 index 0000000..a230bcc --- /dev/null +++ b/components/Common/PartnerStyleTwo.js @@ -0,0 +1,93 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); + +const options = { + loop: true, + nav: false, + dots: false, + autoplay: true, + smartSpeed: 1000, + autoplayTimeout: 5000, + responsive: { + 0:{ + items:2, + }, + 768:{ + items:4, + }, + 1200:{ + items:6, + } + } +} + +const PartnerStyleTwo = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+ {display ? + + + + + + + + + + + + + + : ''} +
+
+ ); +} + +export default PartnerStyleTwo; diff --git a/components/Common/RecentWorks.js b/components/Common/RecentWorks.js new file mode 100644 index 0000000..9587bfa --- /dev/null +++ b/components/Common/RecentWorks.js @@ -0,0 +1,152 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); + +const options = { + items: 4, + loop: true, + nav: false, + autoplay: true, + margin:30, + dots: false, + responsive: { + 0: { + items: 1 + }, + 768: { + items: 2 + }, + 1200: { + items: 3 + }, + 1500: { + items: 4 + } + } +} + +const RecentWorks = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+
+

Our Recent Works

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ + {display ? +
+ image + + + + + +
+

+ + Incredible infrastructure + +

+

Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+ +
+ image + + + + + +
+

+ + Email Notifications + +

+

Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+ +
+ image + + + + + +
+

+ + Best Analytics Audits + +

+

Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+ +
+ image + + + + + +
+

+ + Simple Dashboard + +

+

Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+ +
+ image + + + + + +
+

+ Information Retrieval +

+

Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

+
+
+ : ''} + + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ shape +
+
+ shape +
+
+ ) +} + +export default RecentWorks; diff --git a/components/Common/Team.js b/components/Common/Team.js new file mode 100644 index 0000000..d08bf42 --- /dev/null +++ b/components/Common/Team.js @@ -0,0 +1,446 @@ +import React from 'react'; +import dynamic from 'next/dynamic'; +const OwlCarousel = dynamic(import('react-owl-carousel3')); +import * as Icon from 'react-feather'; +import Link from 'next/link' + +const options = { + items: 5, + loop: true, + nav: false, + dots: true, + margin: 30, + autoplay: false, + smartSpeed: 1000, + responsive: { + 0: { + items: 1 + }, + 768: { + items: 2 + }, + 1200: { + items: 4 + }, + 1500: { + items: 5 + } + } +} + +const Team = () => { + const [display, setDisplay] = React.useState(false); + + React.useEffect(() => { + setDisplay(true); + }, []) + + return ( +
+
+
+

Our Awesome Team

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ + {display ? +
+
+ image +
+ +
+
+

Josh Buttler

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Alex Maxwel

+ Marketing Manager +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Janny Cotller

+ Web Developer +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Jason Statham

+ UX/UI Designer +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Corey Anderson

+ Project Manager +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Josh Buttler

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Alex Maxwel

+ Marketing Manager +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Janny Cotller

+ Web Developer +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Jason Statham

+ UX/UI Designer +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ +
+
+ image +
+ +
+
+

Corey Anderson

+ Project Manager +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+ : ''} +
+ ) +} + +export default Team; \ No newline at end of file diff --git a/components/Common/TeamStyleTwo.js b/components/Common/TeamStyleTwo.js new file mode 100644 index 0000000..b763916 --- /dev/null +++ b/components/Common/TeamStyleTwo.js @@ -0,0 +1,185 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; + +const TeamStyleTwo = () => { + return ( +
+
+
+

Our Awesome Team

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+
+
+ image +
+ +
+
+

Josh Buttler

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+
+ +
+
+
+ image +
+ +
+
+

Alex Maxwel

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+
+ +
+
+
+ image +
+ +
+
+

Janny Cotller

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+
+ +
+
+
+ image +
+ +
+
+

Jason Statham

+ CEO & Founder +
+ +
    +
  • + + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+ +

Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.

+
+
+
+
+
+
+ ) +} + +export default TeamStyleTwo; \ No newline at end of file diff --git a/components/ContactUs/ContactForm.js b/components/ContactUs/ContactForm.js new file mode 100644 index 0000000..f761c69 --- /dev/null +++ b/components/ContactUs/ContactForm.js @@ -0,0 +1,170 @@ +import React, { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import axios from 'axios'; +import Swal from 'sweetalert2' +import withReactContent from 'sweetalert2-react-content' +const MySwal = withReactContent(Swal) +import baseUrl from '../../utils/baseUrl'; + +const alertContent = () => { + MySwal.fire({ + title: 'Congratulations!', + text: 'Your message was successfully send and will back to you soon', + icon: 'success', + timer: 2000, + timerProgressBar: true, + showConfirmButton: false, + }) +} + +// Form initial state +const INITIAL_STATE = { + name: "", + email: "", + number: "", + subject: "", + text: "" +}; + +const ContactForm = () => { + + const [contact, setContact] = useState(INITIAL_STATE); + const { register, handleSubmit, errors } = useForm(); + + const handleChange = e => { + const { name, value } = e.target; + setContact(prevState => ({ ...prevState, [name]: value })); + console.log(contact) + } + + const onSubmit = async e => { + // e.preventDefault(); + try { + const url = `${baseUrl}/api/contact`; + const { name, email, number, subject, text } = contact; + const payload = { name, email, number, subject, text }; + await axios.post(url, payload); + console.log(url); + setContact(INITIAL_STATE); + alertContent(); + } catch (error) { + console.log(error) + } + }; + + return ( +
+
+
+

Get In Touch With Us

+
+

Anything On your Mind. We’ll Be Glad To Assist You!

+
+ +
+
+ image +
+ +
+
+
+
+
+ +
+ {errors.name && 'Name is required.'} +
+
+
+ +
+
+ +
+ {errors.email && 'Email is required.'} +
+
+
+ +
+
+ +
+ {errors.number && 'Number is required.'} +
+
+
+ +
+
+ +
+ {errors.subject && 'Subject is required.'} +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+ + +
+ ) +} + +export default ProductsDetailsTabs; \ No newline at end of file diff --git a/components/Shop/QuickViewModal.js b/components/Shop/QuickViewModal.js new file mode 100644 index 0000000..d2ceaa0 --- /dev/null +++ b/components/Shop/QuickViewModal.js @@ -0,0 +1,58 @@ +import React from 'react'; +import * as Icon from 'react-feather'; + +const QuickViewModal = () => { + return ( +
+
+
+ + +
+
+
+ image +
+
+ +
+
+

Wood Pencil

+ +
+ $200.00 $191.00 +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+
+
+ + + + + + + +
+
+ + +
+ +
+ Category: Pencil + Tag: Prints +
+
+
+
+
+
+
+ ) +} + +export default QuickViewModal; \ No newline at end of file diff --git a/components/_App/Footer.js b/components/_App/Footer.js new file mode 100644 index 0000000..b82b465 --- /dev/null +++ b/components/_App/Footer.js @@ -0,0 +1,157 @@ +import React from 'react'; +import Link from 'next/link'; +import * as Icon from 'react-feather'; + +const Footer = () => { + + const currentYear = new Date().getFullYear(); + + return ( +
+
+
+
+
+
+ + + logo + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

+
+
+ +
+
+

Menu

+ +
+
+ +
+
+

Support

+ +
+
+ +
+
+

Address

+ + +
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+
+ +
+
+

Copyright © {currentYear} Catania Hotel. All rights reserved by

+
+
+
+
+ + map + + {/* Shape Images */} +
+ shape +
+
+ shape +
+
+ ) + +} + +export default Footer; \ No newline at end of file diff --git a/components/_App/GoTop.js b/components/_App/GoTop.js new file mode 100644 index 0000000..bf27b93 --- /dev/null +++ b/components/_App/GoTop.js @@ -0,0 +1,45 @@ +import React from 'react'; +import * as Icon from 'react-feather'; + +const GoTop = ({scrollStepInPx, delayInMs}) => { + + const [thePosition, setThePosition] = React.useState(false); + const timeoutRef = React.useRef(null); + + React.useEffect(() => { + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + setThePosition(true) + } else { + setThePosition(false); + } + }); + }, []) + + const onScrollStep = () => { + if (window.pageYOffset === 0){ + clearInterval(timeoutRef.current); + } + window.scroll(0, window.pageYOffset - scrollStepInPx); + } + + const scrollToTop = () => { + timeoutRef.current = setInterval(onScrollStep, delayInMs); + } + + const renderGoTopIcon = () => { + return ( +
+ +
+ ) + } + + return ( + + {renderGoTopIcon()} + + ) +} + +export default GoTop; \ No newline at end of file diff --git a/components/_App/Layout.js b/components/_App/Layout.js new file mode 100644 index 0000000..e85bc6e --- /dev/null +++ b/components/_App/Layout.js @@ -0,0 +1,20 @@ +import React from 'react' +import Head from "next/head" +import GoTop from './GoTop' + +const Layout = ({ children }) => { + return( + <> + + + + Catania Hotel & Rooms + + {children} + + + + ) +} + +export default Layout \ No newline at end of file diff --git a/components/_App/Navbar.js b/components/_App/Navbar.js new file mode 100644 index 0000000..1d99094 --- /dev/null +++ b/components/_App/Navbar.js @@ -0,0 +1,429 @@ +import React from "react" +import Link from '@/utils/ActiveLink' +import * as Icon from 'react-feather' +import { useSelector } from 'react-redux' + +const Navbar = () => { + const cart = useSelector((state) => state.cart) + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default Navbar; \ No newline at end of file diff --git a/components/_App/NavbarHome.js b/components/_App/NavbarHome.js new file mode 100644 index 0000000..e0f14e6 --- /dev/null +++ b/components/_App/NavbarHome.js @@ -0,0 +1,134 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleTwo = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleTwo; \ No newline at end of file diff --git a/components/_App/NavbarStyleFive.js b/components/_App/NavbarStyleFive.js new file mode 100644 index 0000000..9370d45 --- /dev/null +++ b/components/_App/NavbarStyleFive.js @@ -0,0 +1,428 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleFive = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleFive; \ No newline at end of file diff --git a/components/_App/NavbarStyleFour.js b/components/_App/NavbarStyleFour.js new file mode 100644 index 0000000..0c183ed --- /dev/null +++ b/components/_App/NavbarStyleFour.js @@ -0,0 +1,435 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleFour = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleFour; \ No newline at end of file diff --git a/components/_App/NavbarStyleSix.js b/components/_App/NavbarStyleSix.js new file mode 100644 index 0000000..4f5f70f --- /dev/null +++ b/components/_App/NavbarStyleSix.js @@ -0,0 +1,439 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleSix = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleSix; \ No newline at end of file diff --git a/components/_App/NavbarStyleThree.js b/components/_App/NavbarStyleThree.js new file mode 100644 index 0000000..a8fe1a0 --- /dev/null +++ b/components/_App/NavbarStyleThree.js @@ -0,0 +1,439 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleThree = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleThree; \ No newline at end of file diff --git a/components/_App/NavbarStyleTwo.js b/components/_App/NavbarStyleTwo.js new file mode 100644 index 0000000..7dac161 --- /dev/null +++ b/components/_App/NavbarStyleTwo.js @@ -0,0 +1,439 @@ +import React, { useState } from "react"; +import Link from '@/utils/ActiveLink'; +import * as Icon from 'react-feather'; + +const NavbarStyleTwo = () => { + const [menu, setMenu] = React.useState(true) + + const toggleNavbar = () => { + setMenu(!menu) + } + + React.useEffect(() => { + let elementId = document.getElementById("header"); + document.addEventListener("scroll", () => { + if (window.scrollY > 170) { + elementId.classList.add("is-sticky"); + } else { + elementId.classList.remove("is-sticky"); + } + }); + window.scrollTo(0, 0); + }) + + const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show'; + const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right'; + + return ( + + ); +} + +export default NavbarStyleTwo; \ No newline at end of file diff --git a/config/apollo-config.js b/config/apollo-config.js new file mode 100644 index 0000000..191e2ac --- /dev/null +++ b/config/apollo-config.js @@ -0,0 +1,6 @@ +// Apollo Value Configuration +const ApolloConfig = { + graphql_uri: process.env.API_GRAPHQL_URI, +}; + +export default ApolloConfig; diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..f7ba0e8 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/utils/*": ["utils/*"], + "@/public/*": ["public/*"] + } + } +} \ No newline at end of file diff --git a/lib/apollo.js b/lib/apollo.js new file mode 100644 index 0000000..e5de7aa --- /dev/null +++ b/lib/apollo.js @@ -0,0 +1,80 @@ +import { + ApolloClient, + InMemoryCache, + gql, + useQuery, + createHttpLink, +} from "@apollo/client"; +import ApolloConfig from "../config/apollo-config"; +import fetch from "cross-fetch"; + +function errorHandler(object) { + return object.graphQLErrors.length != 0 + ? object.graphQLErrors[0].message + : object.networkError && object.networkError.result + ? object.networkError.result.errors.join(" ; ") + : object.networkError + ? object.networkError[Object.keys(object.networkError)[0]].toString() + : "Fetch failed"; +} + +function initApollo(token) { + const httpLink = createHttpLink({ + uri: ApolloConfig.graphql_uri, + fetch: fetch, + headers: + token != "" + ? { + Authorization: `Bearer ${token}`, + } + : null, + }); + return new ApolloClient({ + ssrMode: false, + cache: new InMemoryCache({ + addTypename: false, + }), + link: httpLink, + }); +} + +async function query(query, token = "", variables = {}, cache = false) { + const client = initApollo(token); + var res; + try { + var sql = await client.query({ + query: gql` + ${query} + `, + variables: variables, + fetchPolicy: cache ? "cache-first" : "no-cache", + }); + res = { STATUS: 1, DATA: sql.data }; + } catch (e) { + res = { STATUS: 0, DATA: errorHandler(e) }; + } + return res; +} + +async function mutation(mutation, token = "", variables = {}) { + const client = initApollo(token); + var res; + try { + var sql = await client.mutate({ + mutation: gql` + ${mutation} + `, + variables: variables, + }); + res = { STATUS: 1, DATA: sql.data }; + } catch (e) { + console.log(e.networkError.result); + res = { STATUS: 0, DATA: errorHandler(e) }; + } + return res; +} + +module.exports = { + query: query, + mutation: mutation, +}; diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..2c36da9 --- /dev/null +++ b/next.config.js @@ -0,0 +1,12 @@ +const path = require('path') + +module.exports = { + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, + trailingSlash: true, + i18n: { + locales: ['en', 'ar'], + defaultLocale: 'en', + }, +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..98969b9 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "startp", + "version": "3.2.0", + "description": "StartP - React Next IT Startups & Digital Services Template", + "main": "index.js", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "author": "EnvyTheme.com", + "dependencies": { + "animate.css": "^4.1.1", + "axios": "^0.21.1", + "next": "^10.0.7", + "nodemailer": "^6.5.0", + "nodemailer-sendgrid-transport": "^0.2.0", + "react": "^17.0.1", + "react-accessible-accordion": "^3.3.4", + "react-dom": "^17.0.1", + "react-feather": "^2.0.9", + "react-hook-form": "^6.15.4", + "react-masonry-component": "^6.2.1", + "react-owl-carousel3": "^2.2.5", + "react-redux": "^7.1.0", + "react-slick": "^0.28.0", + "react-tabs": "^3.2.0", + "react-toast-notifications": "^2.4.3", + "react-zoom-slider": "^0.1.0", + "redux": "^3.6.0", + "redux-devtools-extension": "^2.13.2", + "sass": "^1.32.7", + "sweetalert2": "^10.15.5", + "sweetalert2-react-content": "^3.3.1" + }, + "license": "MIT" +} diff --git a/pages/404.js b/pages/404.js new file mode 100644 index 0000000..2ac42fe --- /dev/null +++ b/pages/404.js @@ -0,0 +1,28 @@ +import React from 'react' +import Link from 'next/link' + +const Custom404 = () => { + return ( +
+
+
+
+
+
+

Oops!

+
+

404 - Page not found

+

The page you are looking for might have been removed had its name changed or is temporarily unavailable.

+ + + Go to Homepage + +
+
+
+
+
+ ) +} + +export default Custom404 \ No newline at end of file diff --git a/pages/Accomodation/Superior.js b/pages/Accomodation/Superior.js new file mode 100644 index 0000000..d6b8648 --- /dev/null +++ b/pages/Accomodation/Superior.js @@ -0,0 +1,22 @@ +import React from 'react'; +import Navbar from "@/components/_App/NavbarHome"; +import Footer from "@/components/_App/Footer"; +import PageBanner from '@/components/Common/PageBanner'; + +import SuperiorContent from '@/components/Accomodation/Superior'; + +const BlogDetails = () => { + return ( + <> + + + + + + +