first commit

components/video/FacnyVideoThree.jsx

@@ -0,0 +1,54 @@
+'use client'
+import Image from "next/image";
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+
+const FacnyVideoThree = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="7e90gBu4pas"
+        onClose={() => setOpen(false)}
+      />
+
+      <div className="row align-items-center">
+        <div
+          className="col-lg-6"
+          data-aos="fade-right"
+          data-aos-duration="1200"
+        >
+          <div className="text-wrapper pe-5">
+            <h6>SHARE CoNTENT</h6>
+            <h3 className="title">Share content all platform.</h3>
+            <p>
+              Upload, edit, and share files with a team in a single place.
+              Secure, backed up, and cross-device - now, work can happen from
+              anywhere.
+            </p>
+            <div
+              className="d-flex align-items-center video-button  order-sm-last "
+              onClick={() => setOpen(true)}
+            >
+              <i className="fa fa-caret-right" aria-hidden="true"></i>
+              <span>WATCH VIDEO</span>
+            </div>
+          </div>
+          {/* /.text-wrapper */}
+        </div>
+        <div
+          className="col-lg-6 col-md-8 m-auto"
+          data-aos="fade-left"
+          data-aos-duration="1200"
+        >
+          <Image width={492} height={505} style={{height:'fit-content'}}     src="/images/media/img_83.png" alt="media" className="m-auto" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FacnyVideoThree;

components/video/FacnyVideoTwo.jsx

@@ -0,0 +1,53 @@
+'use client'
+
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import Image from "next/image";
+const FacnyVideoTwo = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="mcvqOUtcAJg"
+        onClose={() => setOpen(false)}
+      />
+
+      <div className="row align-items-center">
+        <div
+          className="col-lg-6 order-lg-last"
+          data-aos="fade-left"
+          data-aos-duration="1200"
+        >
+          <div className="text-wrapper ps-5">
+            <h6>SUPPORTED</h6>
+            <h3 className="title">Import & Export all format.</h3>
+            <p>
+              Go paperless. Back up important documents to all your devices, and
+              keep the information not the clutter.
+            </p>
+            <div
+              className="d-flex align-items-center video-button  order-sm-last"
+              onClick={() => setOpen(true)}
+            >
+              <i className="fa fa-caret-right" aria-hidden="true"></i>
+              <span>WATCH VIDEO</span>
+            </div>
+          </div>
+          {/* /.text-wrapper */}
+        </div>
+        <div
+          className="col-lg-6 col-md-8 m-auto order-lg-first"
+          data-aos="fade-right"
+          data-aos-duration="1200"
+        >
+          <Image width={500} height={500} style={{height:'fit-content'}}     src="/images/media/img_82.png" alt="media" className="m-auto" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FacnyVideoTwo;

components/video/FancyVideoFive.jsx

@@ -0,0 +1,56 @@
+'use client'
+
+import Image from "next/image";
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+
+const FancyVideoFive = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="7e90gBu4pas"
+        onClose={() => setOpen(false)}
+      />
+      <div className="row align-items-center">
+        <div className="col-lg-6 col-md-12 order-lg-last">
+          <div className="text-wrapper pt-0">
+            <div className="title-style-two mb-35 md-mb-20">
+              <h2>
+                <span>
+                  Service we offer is{" "}
+                  <Image  width="448" height="48" src="/images/shape/line-shape-5.svg" alt="icon" />
+                </span>
+                specifically designed to meet your needs.
+              </h2>
+            </div>
+            {/* <!-- /.title-style-two --> */}
+            <p>
+              With Benefits from deski Pro, Earn rewards & Score discounts on
+              purchases* Foryourself and your customers.
+            </p>
+          </div>
+        </div>
+        {/* End .col */}
+
+        <div className="col-lg-6 col-md-12 order-lg-first">
+          <div className="video-box">
+            <Image width={490} height={470} style={{height:'fit-content'}}     className="w-100" src="/images/media/img_110.png" alt="media" />
+            <div
+              onClick={() => setOpen(true)}
+              className="fancybox video-button d-flex align-items-center justify-content-center"
+            >
+              <Image  width="27" height="33"  src="/images/icon/170.svg" alt="icon" />
+            </div>
+          </div>
+          {/* <!-- /.video-box --> */}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FancyVideoFive;

components/video/FancyVideoFour.jsx

@@ -0,0 +1,31 @@
+'use client'
+
+
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import Image from "next/image";
+const FancyVideoFour = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="7e90gBu4pas"
+        onClose={() => setOpen(false)}
+      />
+      <div className="video-meta position-relative" data-aos="fade-up">
+        <Image width={1320} height={660} style={{height:'fit-content'}}     src="/images/media/img_107.png" alt="group of people" />
+        <div
+          className="fancybox video-icon d-flex align-items-center justify-content-center"
+          onClick={() => setOpen(true)}
+        >
+          <Image  width="57" height="57" src="/images/icon/148.svg" alt="icon" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FancyVideoFour;

components/video/FancyVideoOne.jsx

@@ -0,0 +1,29 @@
+'use client'
+
+
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import Image from "next/image";
+const FancyVideoOne = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="qnwTVQlxs4g"
+        onClose={() => setOpen(false)}
+      />
+      <Image width={1171} height={640} style={{height:'fit-content'}}     src="/images/media/img_65.png" alt="media" className="main-img" />
+      <div
+        className="fancybox video-button d-flex align-items-center"
+        onClick={() => setOpen(true)}
+      >
+        <Image  width="67" height="67" src="/images/icon/66.svg" alt="icon" />
+      </div>
+    </>
+  );
+};
+
+export default FancyVideoOne;

components/video/FancyVideoSix.jsx

@@ -0,0 +1,29 @@
+'use client'
+
+
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import Image from "next/image";
+const FancyVideoSix = () => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId="qnwTVQlxs4g"
+        onClose={() => setOpen(false)}
+      />
+      <Image width={1170} height={600} style={{width:'100%',height:'fit-content'}}     src="/images/media/img_111.png" alt="media" className="main-img" />
+      <div
+        className="ancybox video-button d-flex align-items-center justify-content-center"
+        onClick={() => setOpen(true)}
+      >
+        <Image  width="27" height="33"  src="/images/icon/170.svg" alt="icon" />
+      </div>
+    </>
+  );
+};
+
+export default FancyVideoSix;

components/video/VideoGallery.jsx

@@ -0,0 +1,107 @@
+'use client'
+
+
+import React, { useState } from "react";
+import ModalVideo from "react-modal-video";
+import Image from "next/image";
+const VideoGalleryContent = [
+  {
+    img: "img_84",
+    text1: "Promoty",
+    text2: "your Event",
+    animationDelay: "",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_85",
+    text1: "Social Media",
+    text2: "Promotion",
+    animationDelay: "50",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_86",
+    text1: "Youtube Creator",
+    text2: "Intro",
+    animationDelay: "100",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_87",
+    text1: "Dancing",
+    text2: "eople adv",
+    animationDelay: "150",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_88",
+    text1: "Cartoon for",
+    text2: "children",
+    animationDelay: "50",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_89",
+    text1: "Music",
+    text2: "Learning",
+    animationDelay: "100",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_90",
+    text1: "Greeting",
+    text2: "intro",
+    animationDelay: "150",
+    videoId:'qnwTVQlxs4g'
+  },
+  {
+    img: "img_91",
+    text1: "Work",
+    text2: "From Home",
+    animationDelay: "200",
+    videoId:'qnwTVQlxs4g'
+  },
+];
+
+const VideoGallery = () => {
+  const [isOpen, setOpen] = useState(false);
+  const [videoId, setVideoId] = useState('qnwTVQlxs4g')
+  return (
+    <div className="row justify-content-center">
+      <ModalVideo
+        channel="youtube"
+        autoplay
+        isOpen={isOpen}
+        videoId={videoId}
+        onClose={() => setOpen(false)}
+      />
+      {VideoGalleryContent.map((val, i) => (
+        <div
+          className="col-xl-3 col-lg-4 col-sm-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          data-aos-delay={val.animationDelay}
+          key={i}
+        >
+          <div className="block-style-twentyOne" onClick={()=>setVideoId(val.videoId)}  >
+            <Image width={330} height={230} style={{width:'100%',height:'fit-content'}}     src={`/images/media/${val.img}.png`} alt="image" className="w-100" />
+            <div className="d-flex align-items-center justify-content-center flex-column video-button">
+              <span>
+                {val.text1} <br /> {val.text2}
+              </span>
+              <span
+                className="icon d-flex align-items-center justify-content-center"
+                onClick={() => setOpen(true)}
+              >
+                <Image  width="13" height="17" src="/images/icon/118.svg" alt="image" />
+              </span>
+            </div>
+          </div>
+          {/* /.block-style-twentyOne */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default VideoGallery;