Added catalogue page, css tweaks

frontEnd/package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "16": "^0.0.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

frontEnd/src/App.js

@@ -3,6 +3,7 @@ import React from "react"
 import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import SignIn from "./pages/SignIn"
 import Browse from "./pages/Browse"
+import Catalogue from "./pages/Catalogue"
 
 function App(){
 return (
@@ -13,6 +14,9 @@ return (
         <Route path="/browse" exact element={<Browse/>}   /> 
         <Route path="/NetflixClone" exact element={<Signup/>}/>
         <Route path="/Raj" exact element={<Signup/>}/>
+        <Route path="/Catalogue" exact element={<Catalogue/>}/>
+
+
     </Routes>
    </Router>
 </>

frontEnd/src/index.css

@@ -1,3 +1,4 @@
 .root{
     background-color: black;
+    color: black;
 }

frontEnd/src/pages/Browse.js

@@ -4,7 +4,7 @@ import axios from "axios"
 
 
 function Browse(){
-    let navigate=useNavigate;
+    let navigate=useNavigate();
     let [data,setData]= useState("");
 
     async function getData(){
@@ -20,13 +20,19 @@ function Browse(){
 
     }
 
+    function Catalog(){
+
+        navigate('/Catalogue')
+    }
+
     return(
 
 
         <>
         <h1> Who's Watching</h1>
         <button onClick={getData}>Dataaa</button>
         <p>{data}</p>
+        <button onClick={Catalog}>Go To Catalogue</button>
 
 
 

frontEnd/src/pages/Catalogue.css

@@ -0,0 +1,54 @@
+.base2{
+
+    font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
+}
+
+
+.head{
+    display: flex;
+    flex-direction: row;
+    row-gap: 3rem;
+    justify-content: space-around;
+    background-color: black;
+    color:white
+
+}
+.menu{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+}
+ul{
+    display: flex;
+    flex-direction: row;
+
+    list-style-type: none;
+    row-gap: 3rem;
+
+
+}
+
+ul li {
+    margin-right: 1.5rem; /* Adjust the value as needed */
+}
+
+.rightSideMenuOptions ul li {
+    margin-left: 1rem; /* Adjust the value as needed */
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

frontEnd/src/pages/Catalogue.js

@@ -0,0 +1,74 @@
+
+import React from "react";
+import "./Catalogue.css"
+
+function Catalogue(){
+
+
+    return(
+        <div className="base2">
+
+
+        <div className="head">
+
+        <div className="menu">
+        <ul>
+        <li>
+        Home
+
+        </li>
+
+        <li>
+            TV Shows
+        </li>
+        <li>
+        Movies
+
+        </li>
+        <li>
+        New and Popular
+
+        </li>
+        <li>
+        My List
+
+        </li>
+        <li>
+        Browse By Languages
+
+        </li>
+
+        </ul>
+
+
+        </div>
+
+        <div className="rightSideMenuOptions">
+        <ul>
+            <li>
+                Search
+            </li>
+            <li>
+                Children
+            </li>
+            <li>
+                Notifications
+            </li>
+            <li>
+                Switch Profile
+            </li>
+        </ul>
+
+
+        </div>
+
+        </div>
+
+
+
+
+        </div>
+    )
+}
+
+export default Catalogue;

frontEnd/src/pages/SignIn.css

@@ -14,6 +14,7 @@
     justify-content: center;
     align-content: center;
     align-items: center;
+    font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
 }
 
 .redfont{
@@ -68,7 +69,7 @@ margin-left:43%;
 
 }
 
-.entLine{
+.entLine {
 
     display:flex;
     flex-direction: row;
@@ -103,10 +104,10 @@ margin-left:43%;
 
 /* // #f3f3f3; */
 
-.NewNetf{
+.NewNetf {
     margin-left: 14%;
     margin-right: 14%;
-    font-size: 13px;
+    font-size: 11px;
     font-family:Netflix Sans,Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif; ;
     color: #8c8c8c;
     font-size: 13px;

frontEnd/src/pages/SignupPages/KidsProfile.css

@@ -5,12 +5,12 @@
     padding-top: 5%;
 }
 
-h2{
+.textKidsProfile h2{
     font-size: 3rem;
     font-weight: 900;
 }
 
-p{
+.textKidsProfile p{
     font-size: 1.5rem;
     font-weight: 400;
 }

frontEnd/src/pages/SignupPages/TV.css

@@ -26,7 +26,7 @@ h2{
     color: white;
 }
 
-p{
+.tvText p{
     font-size: 1.5rem;
     font-weight: 400;
     margin: 1rem 0 0;