Merge pull request #43 from PSS2134/Priyansh

Changed Overall Suggest Page

src/App.js

@@ -3,6 +3,7 @@ import Home from './Components/Home';
 import About from './Components/About';
 import Suggestion from './Components/Suggestion';
 import Navbar from './Components/Navbar';
+import SuggestModal from "./Components/SuggestModal";
 
 import {
   BrowserRouter as Router,
@@ -31,12 +32,12 @@ function App() {
   return(
 
      <Router>
-      <Navbar togglemode={togglemode} mode={mode}/>
+      <Navbar togglemode={togglemode} mode={mode} />
       <Routes>
 
         <Route path="/about" element={<About />}></Route>
-        <Route path="/" element={<Home />}> </Route>
-        <Route path="/suggest" element={<Suggestion />}> </Route>
+        <Route path="/" element={<Home  />}> </Route>
+        <Route path="/suggest" element={<SuggestModal />}> </Route>
       </Routes>
   </Router>
 

src/Components/Home.jsx

@@ -7,10 +7,10 @@ import '../styles/styles.css';
 import hollywood from '../images/hollywood.png';
 import bollywood from '../images/bollywood.webp';
 import tollywood from '../images/tollywood.webp';
+import SuggestModal from "./SuggestModal";
 
 
-
-const Home = ( ) => {
+const Home = ({modal,closeModal} ) => {
 
   const carouselContainerStyle = {
     position: 'relative',
@@ -45,7 +45,7 @@ const Home = ( ) => {
     fontSize: '55px', // Increased font size
     fontWeight: '900',
   };
-
+  
     return (
       <>
 
@@ -71,7 +71,6 @@ const Home = ( ) => {
         <br />
       <MyTabs/>
 
-
       </>
     );
 

src/Components/Navbar.jsx

@@ -6,6 +6,7 @@ import '../styles/styles.css';
 import React, { useState } from "react";
 import { FaHome, FaInfoCircle,FaLightbulb } from 'react-icons/fa';
 import styled from 'styled-components';
+import SuggestModal from "./SuggestModal";
 
 const Button = styled.div`
   position: relative;
@@ -39,6 +40,8 @@ const Button = styled.div`
 export default function Navbar(props) {
 
   const [checked, setChecked] = useState(false);
+
+
   return (
 
 
@@ -62,6 +65,9 @@ export default function Navbar(props) {
                 <FaLightbulb /><div className="navtitles"> Suggest</div>
               </li>
             </Link>
+
+
+
           </ul>
         </div>
 
@@ -81,6 +87,9 @@ export default function Navbar(props) {
      </label>  */}
     </div> 
  </div>
+
+
+
 </div>
   );
 };

src/Components/SuggestModal.css

@@ -0,0 +1,101 @@
+.modal-div{
+    width: 60%;
+    display: block;
+    margin: 5vh auto;
+    background-color: blue;
+    font-family: "Montserrat";
+}
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
+
+.suggest-subheader{
+    text-align: center;
+    margin:4vh 0;
+    font-family: "Montserrat";
+    font-size: 2rem;
+    font-weight: 500;
+    color: black;
+}
+.input-box{
+   background-color:inherit;
+   border:none;
+   border-bottom:2px solid black;
+   border-radius:none;
+   font-size: 1.5rem;
+   border-color: blueviolet;
+   padding: 1px 5px;
+   width: 50%;
+
+}
+.input-box:focus{
+    outline: none;
+    border-color: rgb(14, 5, 138);
+}
+.input-header{
+    font-size: 1.25rem;
+    color: #7B66FF;
+    font-weight: 600;
+    font-family: "Montserrat";
+    margin-bottom: 0.5rem;
+}
+.suggest-textarea{
+      width: 80%;
+      margin: 1vh 0;
+      border-radius: 5px;
+      background-color: #F3F8FF;
+      border: 2px solid #7B66FF;
+      font-size: 1.5rem;
+      padding: 5px;
+}
+.suggest-textarea:focus{
+    border-color: rgb(14, 5, 138);
+}
+.suggest-btn{
+    display: block;
+    margin: auto;
+    padding: 1vh 4vh;
+    font-size: 1.5rem;
+    background-color: #7B66FF;
+    color: white;
+    border: none;
+    box-shadow:3px 3px 3px black ;
+    border-radius:5px ;
+    cursor: pointer;
+}
+.suggest-btn:active{
+    box-shadow: none;
+}
+.suggest-btn:hover{
+    background-color: #4833ce;
+}
+.banner-img-suggest{
+    width:40%;
+    border-radius:10px 0 0 10px;
+    max-height:fit-content;
+}
+.input-suggest-flexbox{
+    display: flex;
+}
+@media only screen and (max-width: 768px)
+{
+    .modal-box{
+        flex-direction: column;
+    }
+    *{
+        font-size: 70%;
+    }
+    .banner-img-suggest{
+        width: 100%;
+        height: 20vh;
+        display: none;
+    }
+    .input-suggest-flexbox{
+        flex-direction: column;
+    }
+    .modal-div{
+        width: 100%;
+    }
+    .suggest-textarea{
+        width: 100%;
+    }
+}
+

src/Components/SuggestModal.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import './SuggestModal.css'
+import banner from "./suggest_img.jpg"
+import cross from './cross.png'
+
+const SuggestModal = () => {
+  return (
+
+    <div className="modal-box" style={{"width":"68%", "margin":"3vh auto","boxShadow":"4px 4px 4px black","borderRadius":"10px","maxHeight":"fit-content","display":"flex","zIndex":'5'}}>
+   <img className="banner-img-suggest" src={banner} /> 
+
+         <div classname='modal-div' style={{"backgroundColor":"#F3F8FF",  "padding":"2vh" , "borderRadius":"0 10px 10px 0", "boxShadow":"4px 4px 4px black", "fontFamily":"Montserrat"}}>
+
+      <p className='suggest-subheader'>Suggest Movie/Webseries</p>
+      <div className='input-suggest-flexbox' >
+      <div style={{"margin":"3vh 4vh"}}>
+      <p className='input-header'>Name</p>
+        <input className='input-box' style={{"width":"100%"}} type="text" placeholder='John'/>
+
+      </div>
+
+      <div style={{"margin":"3vh 4vh"}}>
+      <p className='input-header'>Email</p>
+        <input className='input-box' style={{"width":"100%"}}  type="text" placeholder='[email protected]'/>
+
+      </div>
+      </div>
+      <div className='input-suggest-flexbox'>
+      <div style={{"margin":"3vh 4vh"}}>
+      <p className='input-header'>Movie Name</p>
+        <input className='input-box' style={{"width":"100%"}} type="text" placeholder='JohnWick'/>
+
+      </div>
+
+      <div style={{"margin":"3vh 4vh"}}>
+      <p className='input-header'>Genre</p>
+        <input className='input-box' style={{"width":"100%"}}  type="text" placeholder='Action'/>
+
+      </div>
+      </div>
+
+      <div style={{"margin":"4vh"}}>
+      <p className='input-header'>Additional Description</p>
+       <textarea className='suggest-textarea' cols="43" rows="3" placeholder=''/>
+
+      </div>
+      <button className='suggest-btn'>Submit</button>
+    </div>
+    </div>
+
+  )
+}
+
+export default SuggestModal

src/Components/Suggestion.css

@@ -1,5 +1,5 @@
 /* CONTACT FORM CSS */
-.contact-form{
+/* .contact-form{
     display: grid;
     height: fit-content;
     width: 60vw;
@@ -145,4 +145,4 @@
     justify-content: center;
     align-items: center;
     width:100%;
-  }
+  } */

src/styles/Suggestion.css

@@ -1,4 +1,4 @@
-/* CONTACT FORM CSS */
+/* CONTACT FORM CSS
 .contact-form{
     display: grid;
     height: fit-content;
@@ -145,4 +145,4 @@
     justify-content: center;
     align-items: center;
     width:100%;
-  }
+  } */