🌟Improved About Us Section

src/Components/About/About.css

@@ -1,125 +1,118 @@
 .about {
-  margin: 100px auto;
-  justify-items: center;
-  justify-content: space-between;
-  width: 90%;
-  padding: 20px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 1);
+  padding: 50px 20px;
+  background: linear-gradient(135deg, #44b2fb, #4c5eff);
+  color: #333;
+  transition: background 0.3s ease, color 0.3s ease;
 }
 
-.about-left {
-  flex-basis: 40%;
-  position: relative;
-  width: 250px;
-  margin: 0 10px;
+.about.dark {
+  background: linear-gradient(to bottom right, #263238, #37474f);
+  color: #fff;
 }
 
-#dark.about-heading {
-  color: white;
+.about-content {
+  max-width: 1200px;
+  width: 100%;
 }
 
-.about-right {
-  flex-basis: 56%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.about-heading-container {
   text-align: center;
+  margin-bottom: 30px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.about-img {
-  width: 100%;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: transform 0.5s ease-in-out;
-  /* Ensuring smooth transition */
-  display: block;
+.about-heading {
+  font-size: 2.9rem;
+  margin-bottom: 10px;
+  color: #ffffff;
+  text-shadow: 1px 1px 2px rgb(4, 45, 193), 0 0 1em rgb(0, 221, 255), 0 0 0.2em rgb(0, 221, 255);
 }
 
-.about-img:hover {
-  transform: scale(0.8);
-  /* Zoom out effect on hover */
-  z-index: 2;
-}
+.about-subtitle {
+  font-size: 1.5rem;
+  color: #ffffff;
+  /* text-shadow: 1px 1px 2px rgb(55, 0, 255), 0 0 1em rgb(0, 81, 255), 0 0 0.2em rgb(0, 17, 255); */
+  text-shadow: 1px 1px 2px rgb(0, 12, 147), 0 0 1em rgb(0, 221, 255), 0 0 0.2em rgb(0, 221, 255);
+
 
-.about h3 {
-  font-weight: 600;
-  font-size: 16px;
 }
 
-.about h2 {
-  font-weight: 600;
-  font-size: 35px;
-  margin: 10px 0;
-  max-width: 400px;
-  text-align: center;
-  text-decoration: underline;
-  /* This line adds an underline */
+.about-sections {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
 }
 
-.about p {
-  margin-bottom: 15px;
+.about-section {
+  flex: 1 1 30%;
+  background-color: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-.lightbox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1;
+.about-section:hover {
+  transform: translateY(-10px);
+  background-color: #e4f6ff;
+  box-shadow: 0 2px 8px rgb(5, 129, 143);
+
 }
 
-.lightbox-img {
-  max-width: 80%;
-  max-height: 80%;
-  margin: 20px;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+.about-section h3 {
+  font-size: 1.8rem;
+  color: #0277bd;
+  margin-bottom: 15px;
+  transition: color 0.3s ease, text-decoration 0.4s ease;
 }
 
-.close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 24px;
-  cursor: pointer;
+.about-section:hover h3 {
+  color: #021ebd;
+  text-decoration: underline;
+
 }
 
-@media (max-width: 600px) {
-  .about {
-    flex-direction: column;
-    align-items: center;
-  }
+.about-section:hover p {
+  color: #1c526b;
+}
+.about-section p {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #455a64;
+}
 
-  #heading {
-    display: flex;
-    justify-content: center;
-  }
+.about-img {
+  width: 100%;
+  height: auto;
+  margin-top: 20px;
+  border-radius: 8px;
+  transition: transform 0.3s ease;
+}
 
-  .about-left,
-  .about-right {
-    flex-basis: 100%;
-    margin-bottom: 30px;
-    flex-direction: column;
-  }
+.about-section:hover .about-img {
+  transform: scale(1.05);
+}
 
-  .about-img {
-    border-radius: 15px;
-  }
+.about-mission,
+.about-commitment,
+.about-community {
+  animation: fadeIn 1s ease-in-out;
+}
 
-  .about h2 {
-    font-size: 28px;
-    text-align: start;
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
   }
-
-  .about p {
-    text-align: center;
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
-}
+}

src/Components/About/About.jsx

@@ -1,42 +1,92 @@
-import React from 'react';
+import React from "react";
+import communityGif from '../../assets/about-community.gif';
+import missionImg from '../../assets/about-ourmission.jpg';
+import thirdGif from '../../assets/about-third.gif';
 import "./About.css";
-import about_img from "../../assets/about1.jpg";
-import { useSelector } from 'react-redux';
-
+import { useSelector } from "react-redux";
 
 const About = () => {
   const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
+
   return (
-    <div className="about" id="about">
-      <div className="about-left">
-        <img src={about_img} alt="About Image" className="about-img" data-aos="slide-right" />
-      </div>
-      <div className="about-right" id="heading" data-aos="slide-left">
-        <h2 className={`about-heading ${theme}`}>Bridging the gap between ideas and investments</h2>
-        <div className="about-right-div2">
-          <p>
-            At StartConnectHub, our mission is to create a thriving ecosystem
-            where entrepreneurs and investors can come together to turn ideas
-            into reality. We understand the challenges that startups face, from
-            securing funding to navigating the complexities of the business
-            world. With our platform, entrepreneurs can bring their visions to
-            life and take their businesses to new heights.
-          </p>
-          <p>
-            Our commitment to fostering innovation and collaboration drives
-            everything we do. We believe that by providing the right resources
-            and support, we can empower individuals to pursue their passions and
-            create lasting change. Whether you're an entrepreneur with a
-            groundbreaking idea or an investor looking for the next big
-            opportunity, StartConnectHub is here to help you succeed. Join us
-            and become part of a community that's dedicated to shaping the
-            future of entrepreneurship.
+    <div className={`about ${theme}`} id="about">
+      <div className="about-content">
+        <div className="about-heading-container" data-aos="fade-up">
+          <h2 className="about-heading">About StarConnect</h2>
+          <p className="about-subtitle">
+            Bridging the gap between ideas and investments
           </p>
         </div>
+
+        <div className="about-sections">
+          <div className="about-section" data-aos="fade-right">
+            <div className="about-image-container">
+              <img
+                /*src="src/assets/about-ourmission.jpg"*/
+                src={missionImg}
+                alt="Mission"
+                className="about-img"
+              />
+            </div>
+            <div className="about-text-container">
+              <h3>Our Mission</h3>
+              <p>
+                At StartConnectHub, our mission is to create a thriving ecosystem
+                where entrepreneurs and investors can come together to turn ideas
+                into reality. We understand the challenges that startups face,
+                from securing funding to navigating the complexities of the
+                business world. With our platform, entrepreneurs can bring their
+                visions to life and take their businesses to new heights.
+              </p>
+            </div>
+          </div>
+
+          <div className="about-section" data-aos="fade-left">
+          <div className="about-image-container">
+              <img
+                /*src="src/assets/about-community.gif"*/
+                src={communityGif}
+                alt="Commitment"
+                className="about-img"
+              />
+            </div>
+            <div className="about-text-container">
+              <h3>Our Commitment</h3>
+              <p>
+                Our commitment to fostering innovation and collaboration drives
+                everything we do. We believe that by providing the right resources
+                and support, we can empower individuals to pursue their passions
+                and create lasting change. Whether you're an entrepreneur with a
+                groundbreaking idea or an investor looking for the next big
+                opportunity, StartConnectHub is here to help you succeed.
+              </p>
+            </div>
+          </div>
+
+          <div className="about-section" data-aos="fade-up">
+            <div className="about-image-container">
+              <img
+              /*src="src/assets/about-third.gif"*/
+                src={thirdGif}
+                alt="Community"
+                className="about-img"
+              />
+            </div>
+            <br />
+            <div className="about-text-container">
+              <h3>Join Our Community</h3>
+              <p>
+                Join us and become part of a community that's dedicated to shaping
+                the future of entrepreneurship. Together, we can bridge the gap
+                between ideas and investments and create a brighter future for
+                innovation.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 
 export default About;
-

src/Components/About/about.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+function App() {
+  useEffect(() => {
+    AOS.init({ duration: 1000 });
+  }, []);
+
+  return (
+    <div>
+
+    </div>
+  );
+}
+
+export default App;