Merge pull request #40 from DushanSenadheera/coming-soon

Coming soon

client/src/components/Home/ComingSoon.json

@@ -0,0 +1,30 @@
+[
+    {
+        "title": "JW 4",
+        "subtitle": "Keanu Reeves",
+        "url": "../src/assets/jw.jpg"
+    },
+    {
+        "title": "Transformers",
+        "subtitle": "Shia LaBeouf",
+        "url": "../src/assets/transformers.jpg"
+    },
+    {
+        "title": "Smile",
+        "subtitle": "Brad Pitt",
+        "url": "../src/assets/smile.jpg"
+    },
+    {
+        "title": "Top Gun Maverick",
+        "subtitle": "Tom Cruise",
+        "url": "../src/assets/tg.jpg"
+    },
+    {
+        "title": "Thor",
+        "subtitle": "Chris Hemsworth",
+        "url": "../src/assets/thor.jpg"
+    }
+
+
+
+]

client/src/components/Home/ComingSoon.jsx

@@ -0,0 +1,31 @@
+import './Home.css'; 
+import ComingSoon from "./ComingSoon.json"
+
+function Premirering () {
+  return (
+    <main>
+        <div className="premiering" id="explore">
+          <h3>Coming Soon</h3>
+          <a href="/description">
+          <div className="premiering-movies" >
+            {ComingSoon.map((movie) => (
+              <form action="" key={movie.id} >
+                <div className="movie">
+                  <input type="hidden" id="movieName" name="movieName" value={movie.title} />
+                  <img src={`${movie.url}`} alt="movie-poster" />
+                  <h4>{movie.title}</h4>
+                  <h5>{movie.subtitle}</h5>
+                  <br className="temp"/>
+                  {/* <input type="submit" value="See More..." className="hidden-btn" /> */}
+                </div>
+              </form>
+            ))}
+          </div>
+          </a>
+        </div>
+    </main>
+
+  )
+}
+
+export default Premirering 

client/src/components/Home/Home.css

@@ -207,7 +207,7 @@ main h4,p{
     justify-content: space-around;
     align-items: center;
     /* flex-wrap: wrap; */
-    margin-top: 40px;
+    /* margin-top: 0px; */
 }
 
 .movie img{

client/src/pages/Home.jsx

@@ -4,6 +4,7 @@ import ContactUs from '../components/Home/ContactUs'
 import Landing from '../components/Home/Landing'
 import Premirering from '../components/Home/Premirering '
 import Slideshow from '../components/Home/Slideshow'
+import ComingSoon from '../components/Home/ComingSoon'
 
 
 
@@ -23,7 +24,7 @@ function Home() {
         } */}
 
         <Premirering />
-        <br /><br />
+        <ComingSoon />
         <br />
         <br />
         <Slideshow />