Create a HeroSection for the landing page

frontend/src/Components/Pages/Landing-Page/LandingHeader.jsx

@@ -3,7 +3,30 @@ import React from "react";
 const Header = () => {
   return (
     <div className="w-full h-full text-cyan-50 text-2xl text-center">
-      Header Section
+
+  <main>
+    <div class="container">
+      <img src="meeting.png" alt=""/>
+      <div class="hero-text">
+     <h1>CONNECT</h1>
+        <h1> COLLABORATE </h1>
+        <h1>START <span>CONFERENCE</span></h1>
+        <p>START YOUR NEXT VIDEO CALL WITH A SINGLE CLICK.
+          NO DOWNLOAD, PLUG-IN, OR LOGIN IS REQUIRED.
+          JUST GET STRAIGHT TO TALKING, MESSAGING, AND
+          SHARING YOUR SCREEN.
+        </p>
+        <button>SIGN IN</button>
+        <button>SIGN UP</button>
+      </div>
+
+    </div>
+  </main>
+<div class="meet"> <h1>Your Code Here</h1>
+<input type="text" placeholder="Enter code"/>
+<button>Join Now🔄</button>
+</div>
+
     </div>
   );
 };

frontend/src/Pages/Landing-Page.jsx

@@ -10,7 +10,7 @@ export const LandingPage = () => {
   return (
     <div>
       <LandingHeader />
-      <JoinRoom />
+   <JoinRoom />
       <MeetingCards />
       <Feature />
       <OurTeam />

frontend/src/index.css

@@ -1,3 +1,203 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  margin: auto;
+}
+.hero-text span{
+  background-color: #007bff;
+  border-radius: 10px;
+}
+
+.hero-text h1 {
+  font-size: 50px;
+  font-weight: bold;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  text-align: left;
+  margin-left: 40px;
+}
+
+.hero-text p {
+  text-align: left;
+  font-weight: bold;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  margin-left: 40px;
+}
+
+.hero-text button {
+  margin-right: 80px;
+}
+input{
+  border-radius:20px ;
+  height: 70px;
+  background-color: rgb(32, 30, 30);
+  border: 2px solid;
+  text-align: left;
+  padding-left: 20px;
+  margin-top: 10px;
+}
+.meet{
+  display: flex;
+  margin: 20px;
+  padding: 40px;
+}
+.meet h1{
+  padding-left: 10px;
+  padding-right: 20px;
+  padding-top: 20px;
+  font-size: 30px;
+  font-weight: bold;
+}
+.meet button{
+  height: 70px;
+ margin-bottom: 20px;
+  border-radius: 20px;
+}
+
+/* For screens larger than 1600px (large computer screens) */
+@media (min-width: 1600px) {
+  .container {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  .container img {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+  }
+
+  .hero-text {
+    width: 80%;
+    margin-top: 200px;
+  }
+
+  .hero-text h1 {
+    font-size: 50px;
+  }
+}
+
+/* For screens between 768px and 1024px (laptop) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .container img {
+    max-height: 400px;
+  }
+
+  .hero-text {
+    margin-top: 150px;
+  }
+
+  .hero-text h1 {
+    font-size: 50px;
+  }
+
+}
+
+/* For screens between 480px and 767px (mobile) */
+@media (min-width: 480px) and (max-width: 767px) {
+  .container img {
+    max-height: 300px;
+  }
+
+  .hero-text {
+    margin-top: 100px;
+  }
+
+.div {
+   .h2{
+    font-size: 20px;
+   }
+}
+  .hero-text h1 {
+    font-size: 35px;
+  }
+.meet h1{
+  padding-left:1px;
+
+
+}
+  input{
+    border-radius:20px ;
+    height: 70px;
+    background-color: rgb(32, 30, 30);
+    border: 2px solid;
+    text-align: left;
+    padding-left: 5px;
+    margin-top: 10px;
+    width: 150px;
+  }
+
+  .meet button{
+    height: 70px;
+   margin-bottom: 10px;
+   padding: 10px;
+  font-size: 15px;
+    border-radius: 20px;
+  }
+}
+
+/* For screens up to 479px (small mobile) */
+@media (max-width: 479px) {
+  .container img {
+    max-height: 250px;
+  }
+
+  .hero-text {
+    margin-top: 80px;
+  }
+  .div {
+    .h2{
+     font-size: 15px;
+    }
+}
+  .hero-text h1 {
+    font-size: 30px;
+  }
+  .container h1,p,button,img{
+    text-align: center;
+  }
+
+
+}
+
+/* General styling */
+.div {
+  background-color: rgb(52, 51, 51);
+  border-radius: 15px;
+  margin-right: 90px;
+  margin-left: 90px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+}
+
+button {
+  padding: 10px 20px;
+  margin: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.text-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+p {
+  color: #666;
+  font-size: 16px;
+}

frontend/vite.config.js

@@ -4,4 +4,8 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+
+  server: {
+    open: true
+  }
 })