video element

frontEnd/src/pages/Catalogue.css

@@ -6,6 +6,7 @@
 
 .head{
     display: flex;
+    max-height: 80px;
     flex-direction: row;
     row-gap: 3rem;
     justify-content: space-around;
@@ -36,14 +37,46 @@ ul li {
 
 .rightSideMenuOptions ul li {
     margin-left: 1rem; /* Adjust the value as needed */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    align-items: center;
 }
+.rightSideMenuOptions {
+display: flex;
+flex-direction: row;
+justify-content: space-around;
 
+align-items: center;
+}
 
 
+.lognet{
+    height:6rem;
 
+    width:9rem;
+}
 
+.trailer{
+    position: relative;
+
+
+    overflow: hidden;
+    height: 500px;
+}
 
+.trail{
+
+    width: 100%;
+    height: 500px;
+}
 
+.tit{
+    display: flex;
+    flex-direction: row;
+
+}
 
 
 

frontEnd/src/pages/Catalogue.js

@@ -1,6 +1,7 @@
 
 import React from "react";
 import "./Catalogue.css"
+import logo from '../LogoIcons&Images/Logos-Readability-Netflix-logo.png';
 
 function Catalogue(){
 
@@ -10,6 +11,11 @@ function Catalogue(){
 
 
         <div className="head">
+        <div className="log">
+        <a href="/Catalogue">
+            <img className="lognet" src={logo} ></img>
+            </a>
+        </div>
 
         <div className="menu">
         <ul>
@@ -64,11 +70,54 @@ function Catalogue(){
 
         </div>
 
+
+        <div className="mainContainer">
+
+        <div className="trailer"> 
+
+        {/* <video src= "blob:https://www.netflix.com/0f4bfbd4-50f3-469c-aefc-ed74a2c6f3c6" ></video> */}
+        <iframe 
+        className="trail"
+
+                src="https://www.youtube.com/embed/bV0RAcuG2Ao?autoplay=1" // Replace VIDEO_ID with the actual ID of the YouTube video
+                title="YouTube video player" 
+                frameborder="0" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                allowfullscreen
+            ></iframe>
+
+
+
+        </div>
+        <div className="rows">
+        <h2 className="tit">
+            <a className="tit">
+            <div>Name of the title</div>
+            <div>Explore all</div>
+
+            </a>
+        </h2>
+        <div className="rowContainer">
+            reuivrew
+        </div>
+
+
+        </div>
+
+
+
+        </div>
+
 
 
 
         </div>
     )
 }
 
-export default Catalogue;
+export default Catalogue;
+
+
+
+
+

frontEnd/src/pages/SignupPages/Signup.js

@@ -7,8 +7,17 @@ import TV from './TV.js';
 import WatchEverywhere from './WatchEverywhere.js';
 import KidsProfile from './KidsProfile.js';
 import DownloadOffline from './DownloadOffline.js';
+import { useNavigate } from "react-router-dom";
 
 function Signup(){
+
+    let navigate=useNavigate();
+
+    function navi(){
+        navigate("/SignIn")
+    }
+
+
 return (
     <>
     <div className="app-container">
@@ -25,7 +34,7 @@ return (
                </form>
             </div>
             <div>
-            <button type="button" className="btn btn-primary" style={{  'padding':'0.75rem 1.5rem','background':'rgb(229, 9, 20)','border': 'thick','font-size': '17px','font-weight': '500',borderRadius:'3px'}}>Get started</button>
+            <button type="button" onClick={navi} className="btn btn-primary" style={{  'padding':'0.75rem 1.5rem','background':'rgb(229, 9, 20)','border': 'thick','font-size': '17px','font-weight': '500',borderRadius:'3px'}}>Get started</button>
             </div>
         </div>
     </div>