new video for homepage

src/components/Hero.js

@@ -3,21 +3,17 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 import heroBcg from "../assets/hero-bcg.jpg";
 import Fade from "react-reveal/Fade";
-
+import test from "../assets/video/test.mp4";
 const Hero = () => {
   return (
     <Wrapper className="section-center">
-
       <Fade left>
         <article className="content">
-          <h1>
-            Lựa chọn chất liệu phù hợp <br />
-            cho ngôi nhà của bạn
-          </h1>
+          <h1>Thanh Thanh Phương</h1>
           <p>
-            Thanh Thanh Phương chuyên phân phối và cung cấp các loại gạch ốp
-            tường cùng sơn tường không những mang lại không gian sạch sẽ mà còn
-            toát lên sự sang trọng, hiện đại trong từng góc cạnh.
+            một trong số nhà phân phối số 1 Khu vực miền Nam chuyên phân phối và
+            cung cấp vlxd & trang trí nội, ngoại thất, thiết bị vệ sinh cho các
+            công trình xây dựng lớn và những công trình dân dụng.
           </p>
           {/* <Link to="/products" className="btn hero-btn">
             xem thêm
@@ -26,8 +22,17 @@ const Hero = () => {
       </Fade>
       <Fade right>
         <article className="img-container">
-          <img src={heroBcg} alt="main hero" className="main-img" />
-
+          {/* <img src={test} alt="main hero" className="main-img" /> */}
+          <video
+            autoPlay
+            loop
+            muted
+            playsInline
+            id="myVideo"
+            className="main-img"
+          >
+            <source src={test} type="video/mp4" />
+          </video>
         </article>
       </Fade>
     </Wrapper>

src/components/Hero1.js

@@ -0,0 +1,114 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import heroBcg from "../assets/hero-bcg.jpg";
+import Fade from "react-reveal/Fade";
+import test from "../assets/video/test.mp4";
+const Hero1 = () => {
+  return (
+    <Wrapper className="section-center">
+      <video autoPlay loop muted playsInline id="myVideo">
+        <source src={test} type="video/mp4" />
+      </video>
+      <Fade left>
+        <article className="content">
+          <h1>
+           Thanh Thanh Phương
+          </h1>
+          <p>
+            một trong số nhà phân phối số 1 Khu vực miền Nam chuyên
+            phân phối và cung cấp vlxd & trang trí nội, ngoại thất, thiết bị vệ
+            sinh cho các công trình xây dựng lớn và những công trình dân dụng.
+
+
+            Thanh Thanh Phương chuyên phân phối và cung cấp các loại gạch ốp
+            tường cùng sơn tường không những mang lại không gian sạch sẽ mà còn
+            toát lên sự sang trọng, hiện đại trong từng góc cạnh.
+          </p>
+        </article>
+      </Fade>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  min-height: 60vh;
+  display: grid;
+  align-items:center;
+  place-items: center;
+  .img-container {
+    display: none;
+  }
+
+  #myVideo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: calc(100vh - 5rem);
+    max-width: val(--max-width: 1800px;);
+    z-index: -100;
+  }
+  footer {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+  footer p {
+    margin-bottom: 0;
+    font-weight: 400;
+    text-align: center;
+    color: var(--clr-primary-5);
+    letter-spacing: var(--spacing);
+    font-size: 2rem;
+  }
+
+  .content {
+    text-align: center;
+  }
+  p {
+    line-height: 2;
+    max-width: 45em;
+    margin-bottom: 2rem;
+    color: var(--clr-grey-1);
+    font-size: 1rem;
+  }
+  @media (min-width: 992px) {
+    height: calc(100vh - 5rem);
+    grid-template-columns: 1fr;
+
+    h1 {
+      margin-bottom: 2rem;
+    }
+    p {
+      font-size: 1.25rem;
+    }
+
+    mark {
+      background-color: var(--clr-grey-9);
+    }
+    .hero-btn {
+      padding: 0.75rem 1.5rem;
+      font-size: 1rem;
+    }
+    .img-container {
+      display: block;
+      position: relative;
+    }
+    .main-img {
+      width: 100%;
+      position: relative;
+
+      display: block;
+      object-fit: cover;
+      transition: var(--transition);
+      overflow: hidden;
+    }
+    .main-img:hover {
+      transform: scale(1.05);
+    }
+  }
+`;
+
+export default Hero1;

src/components/Hero3.js

@@ -14,7 +14,7 @@ const Hero3 = () => {
       </Fade>
       <Fade right>
         <article className="content">
-          <h1>Cảm giác ấm cúng</h1>
+          <h2>Cảm giác ấm cúng</h2>
           <p>
             Thanh Thanh Phương chia sẻ cách thiết kế và đồ nội thất để tạo nên
             một không gian ấm cúng và trọn vẹn khi những người thân yêu trong

src/components/Navbar.js

@@ -44,7 +44,8 @@ const NavContainer = styled.nav`
   display: flex;
   align-items: center;
   justify-content: center;
-
+  z-index: 100;
+  background-color:white;
   .nav-center {
     width: 90vw;
     margin: 0 auto;

src/components/index.js

@@ -4,6 +4,7 @@ import CartButtons from './CartButtons'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
 import Hero from './Hero'
+import Hero1 from "./Hero1";
 import Hero2 from "./Hero2";
 import Hero3 from "./Hero3";
 import Services from './Services'
@@ -28,6 +29,7 @@ export {
   Footer,
   Sidebar,
   Hero,
+  Hero1,
   Hero2,
   Hero3,
   Services,

src/pages/HomePage.js

@@ -2,6 +2,7 @@ import React from 'react'
 import {
   FeaturedProducts,
   Hero,
+  Hero1,
   Services,
   Hero2,
   Hero3,
@@ -11,6 +12,7 @@ import {
 const HomePage = () => {
   return (
     <main>
+      {/* <Hero1 /> */}
       <Hero />
       <Hero3 />
       <Hero2 />

src/pages/LandingPage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import test from "../assets/video/test.mp4";
 import styled from "styled-components";
-
+import { Link } from "react-router-dom";
 const LandingPage = () => {
   return (
     <PageWrapper>
@@ -10,16 +10,19 @@ const LandingPage = () => {
           <source src={test} type="video/mp4" />
         </video>
 
-        <h1 className="titleLanding">
-          Hãy thiết kế <br />
-          ngôi nhà của bạn
-        </h1>
+        <h3 className="titleLanding">
+          Thiết kế ngôi nhà <br></br> của bạn cùng
+          <br /> Thanh Thanh Phương
+        </h3>
         <p>
           Thanh Thanh Phương là{" "}
           <mark>một trong số nhà phân phối số 1 khu vực miền Nam</mark>. Chúng
           tôi chuyên phân phối và cung cấp vật liệu xây dựng, trang trí nội và
           ngoại thất.
         </p>
+        <Link to="/products" className="btn hero-btn">
+            xem thêm
+        </Link>
       </main>
     </PageWrapper>
   );
@@ -35,6 +38,7 @@ const PageWrapper = styled.div`
     left: 30%;
     color: var(--clr-white);
   }
+ 
   #myVideo {
     position: fixed;
     right: 0;