1.3.2

cruip · Mar 28, 2023 · 7b9b0f4 · 7b9b0f4
1 parent 8bfc8c7
commit 7b9b0f4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG.md
 
+## [1.3.2] - 2023-03-28
+
+- Add self-hosted video
+
 ## [1.3.1] - 2023-02-13
 
 - Update dependencies

diff --git a/src/partials/HeroHome.jsx b/src/partials/HeroHome.jsx
@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Modal from '../utils/Modal';
 
 import HeroImage from '../images/hero-image.png';
 
 function HeroHome() {
-
   const [videoModalOpen, setVideoModalOpen] = useState(false);
+  const video = useRef(null);
+
+  useEffect(() => {
+    videoModalOpen ? video.current.play() : video.current.pause();
+  }, [videoModalOpen]);    
 
   return (
     <section className="relative">
-
       {/* Illustration behind hero content */}
       <div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none" aria-hidden="true">
         <svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
@@ -28,21 +31,27 @@ function HeroHome() {
       </div>
 
       <div className="max-w-6xl mx-auto px-4 sm:px-6">
-
         {/* Hero content */}
         <div className="pt-32 pb-12 md:pt-40 md:pb-20">
-
           {/* Section header */}
           <div className="text-center pb-12 md:pb-16">
-            <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">Make your website <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">wonderful</span></h1>
+            <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4" data-aos="zoom-y-out">
+              Make your website <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">wonderful</span>
+            </h1>
             <div className="max-w-3xl mx-auto">
-              <p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.</p>
+              <p className="text-xl text-gray-600 mb-8" data-aos="zoom-y-out" data-aos-delay="150">
+                Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.
+              </p>
               <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
                 <div>
-                  <a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Start free trial</a>
+                  <a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">
+                    Start free trial
+                  </a>
                 </div>
                 <div>
-                  <a className="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">Learn more</a>
+                  <a className="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">
+                    Learn more
+                  </a>
                 </div>
               </div>
             </div>
@@ -53,7 +62,14 @@ function HeroHome() {
             <div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
               <div className="flex flex-col justify-center">
                 <img className="mx-auto" src={HeroImage} width="768" height="432" alt="Hero" />
-                <svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                <svg
+                  className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto"
+                  width="768"
+                  height="432"
+                  viewBox="0 0 768 432"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
                   <defs>
                     <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
                       <stop stopColor="#FFF" offset="0%" />
@@ -82,8 +98,20 @@ function HeroHome() {
                   </g>
                 </svg>
               </div>
-              <button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={(e) => { e.preventDefault(); e.stopPropagation(); setVideoModalOpen(true); }} aria-controls="modal">
-                <svg className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <button
+                className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setVideoModalOpen(true);
+                }}
+                aria-controls="modal"
+              >
+                <svg
+                  className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 flex-shrink-0"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
                   <path d="M10 17l6-5-6-5z" />
                 </svg>
@@ -94,17 +122,17 @@ function HeroHome() {
             {/* Modal */}
             <Modal id="modal" ariaLabel="modal-headline" show={videoModalOpen} handleClose={() => setVideoModalOpen(false)}>
               <div className="relative pb-9/16">
-                <iframe className="absolute w-full h-full" src="https://player.vimeo.com/video/174002812" title="Video" allowFullScreen></iframe>
+                <video ref={video} className="absolute w-full h-full" width="1920" height="1080" loop autoPlay controls>
+                  <source src="../src/videos/video.mp4" type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
               </div>
             </Modal>
-
           </div>
-
         </div>
-
       </div>
     </section>
   );
 }
 
-export default HeroHome;
+export default HeroHome;
diff --git a/src/videos/video.mp4 b/src/videos/video.mp4