add about and our team page

src/App.css

@@ -25,6 +25,7 @@ body {
 
 body {
   background-color: #FFFFFF;
+  background-image: url("./Assets/backgroundImage.webp");
 }
 
 nav {
@@ -107,10 +108,9 @@ nav {
 }
 
 .primary-text {
-  font-size: clamp(1rem, 3vw, 1.5rem);
   max-width: 500px;
   color: #6a6a6a;
-  margin: 1.5rem 0rem;
+  margin: 0.6rem 0rem;
 }
 
 .secondary-button {
@@ -139,22 +139,19 @@ nav {
 }
 
 .about-section-container {
-  margin-top: 20rem;
+  margin-top: 35rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.about-background-image-container {
-  position: absolute;
-  left: -150px;
-  z-index: -2;
-}
+
 
 .about-section-image-container {
   flex: 0.9;
   margin-right: 1rem;
+  margin: rem;
 }
 
 .about-section-text-container {
@@ -167,7 +164,6 @@ nav {
 .primary-subheading {
   font-weight: 700;
   color: #fe9e0d;
-  font-size: 1.15rem;
 }
 
 .about-buttons-container {

src/App.js

@@ -2,17 +2,19 @@ import "./App.css";
 import { Outlet } from "react-router-dom";
 import Footer from "./Components/Footer.js";
 import Navbar from "./Components/Navbar.js";
+import backgroundImg from "./Assets/backgroundImage.webp"
 
 function App() {
   return (
     <>
-     <div className="App flex flex-col">
-      <Navbar/>
-
-      <Outlet />
-
-      <Footer />
-    </div>
+      <div 
+      className="App flex flex-col">
+        <Navbar />
+
+        <Outlet />
+
+        <Footer />
+      </div>
     </>
   );
 }

src/Components/About.js

@@ -1,33 +1,38 @@
 import React from "react";
-import AboutBackground from "../Assets/about-background.png";
-import AboutBackgroundImage from "../Assets/about-background-image.png";
 import { BsFillPlayCircleFill } from "react-icons/bs";
+import video from "../Assets/aboutvid.mp4";
+import { Link } from "react-router-dom";
 
 const About = () => {
   return (
-    <div className="about-section-container mt-96 " id="about">
-      <div className="about-background-image-container">
-        <img src={AboutBackground} alt="" />
-      </div>
-      <div className="about-section-image-container">
-        <img src={AboutBackgroundImage} alt="" />
+    <div className="about-section-container gap-0" id="about">
+      <div className="w-7/12 flex pl-32 rounded-lg">
+        <video
+          className=" w-10/12 h-fit justify-center rounded-lg"
+          src={video}
+          autoPlay
+          muted
+          loop
+        />
       </div>
       <div className="about-section-text-container">
         <p className="primary-subheading">About</p>
-        <h1 className="primary-heading">Event budget Planner</h1>
+        <h1 className="primary-heading">EventPlanner</h1>
         <p className="primary-text">
-          The Budget Event Planner is a web application designed to help users
-          plan their events within a specified budget and time frame.
+          To enhance the Tri-Valley's official website and boost local business
+          tourism, our mission is to address existing technology limitations by
+          integrating Generative AI or LLM agents for streamlined trip
+          management.
         </p>
         <p className="primary-text">
-          The application allows users to input their budget and the duration of
-          their event in days. Based on these inputs, the application generates
-          a customized event plan that optimizes the allocation of the budget
-          across various aspects of the event, such as venue, food,
-          transportation, and activities.
+          By adding an Events tab and offering one-click access to diverse
+          events, we aim to increase tourism by up to 16.7%, injecting vitality
+          into the local economy and supporting businesses.
         </p>
         <div className="about-buttons-container">
-          <button className="secondary-button">Learn More</button>
+          <Link to="/events">
+            <button className="secondary-button">Go to Events</button>
+          </Link>
           <button className="watch-video-button">
             <BsFillPlayCircleFill /> Watch Video
           </button>