change about contact

src/app/components/About/About.css

@@ -4,14 +4,14 @@
 
 .about-container {
   width: 70%;
-  height: 60%;
+  height: 70%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 20px;
-  background: #1e1e1e;
-  border-radius: 30px;
+  background: #1e1e1e36;
+  backdrop-filter: blur(10px);
 }
 .about-title-container {
   width: 20%;
@@ -28,8 +28,8 @@
     #fd95ff 283.83deg,
     #2c1b77 463.3deg
   ); */
-  background-color: #1e1e1e;
-  border-radius: 30px;
+  background-color: transparent;
+
   text-align: center;
 }
 
@@ -57,18 +57,18 @@
   overflow: hidden;
   background: conic-gradient(
     from 127.56deg at 128.67% 74.06%,
-    #fd95ff -76.17deg,
-    #2c1b77 103.3deg,
-    #fd95ff 283.83deg,
-    #2c1b77 463.3deg
+    #fd95ffd3 -76.17deg,
+    #3821a2c8 103.3deg,
+    #f798f9d7 283.83deg,
+    #2c1b77b7 463.3deg
   );
-  border-radius: 30px;
+  backdrop-filter: blur(10px);
   font-size: 1.3rem;
   transition: background 0.5s ease-in-out;
 }
 
 .title {
-  font-size: 2rem;
+  font-size: 2.3rem;
   font-weight: 700;
   margin: 1rem 0;
 }
@@ -86,7 +86,7 @@
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 768px) {
   .about-container {
     width: 100%;
     height: 100%;

src/app/components/Contact/ContactCard.css

@@ -1,81 +1,78 @@
 .card-container {
-    height: 450px;
-    width: 350px;
-    background: rgba(30, 30, 58, 0.452);
-    box-shadow: 0 8px 32px 0 rgba(51, 56, 133, 0.459);
-    /* backdrop-filter: blur(10.5px); */
-    /* -webkit-backdrop-filter: blur(10.5px); */
-    border-radius: 30px;
-    border: 1.5px solid #fff;
-    display: flex;
-    justify-content: center;
-    gap: 60px;
-    flex-direction: column;
-    align-items: center;
-    transition: 0.3s ease-in-out;
+  height: 400px;
+  width: 350px;
+  background: rgba(26, 26, 43, 0.37);
+  /* box-shadow: 0 8px 32px 0 rgba(51, 56, 133, 0.459); */
+  /* backdrop-filter: blur(10.5px); */
+  /* -webkit-backdrop-filter: blur(10.5px); */
+backdrop-filter: blur(10.5px);
+  border: 1.5px solid #ffffffc7;
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-direction: column;
+  align-items: center;
+  transition: 0.3s ease-in-out;
 }
 
 .card-container:hover {
-    border-radius: 30px;
-    box-shadow: 5px 8px 10px 0 rgba(31, 38, 135, 0.37);
-    scale: 1.01;
+  scale: 1.01;
 }
 
 .logoimg {
-    height: 170px;
-    width: 170px;
-    overflow: visible;
-    background-size: cover;
-    clip-path: circle(50%);
-    image-rendering: crisp-edges;
+  height: 170px;
+  width: 170px;
+  overflow: visible;
+  background-size: cover;
+  clip-path: circle(50%);
+  image-rendering: crisp-edges;
 }
 
 .logowrapper {
-    margin-top: 20px;
-    box-shadow: 0px 0px 70px #ffffff73;
-    border-radius: 50%;
-    transition: 0.3s ease-in-out;
+  margin-top: 20px;
+
+  border-radius: 50%;
+  transition: 0.3s ease-in-out;
 }
 
 .text-field {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin: 0;
 }
 
 .text-field h2 {
-    font-size: 27px;
+  font-size: 27px;
 }
 
 .text-field p {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 
 .socials {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    width: 70%;
-    font-size: 25px;
-    opacity: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 70%;
+  font-size: 25px;
+  opacity: 0;
 }
 
 .socials a {
-    color: #ffffff;
-    opacity: 0.8;
+  color: #ffffff;
+  opacity: 0.8;
 }
 
 .socials a:hover {
-    color: #ffffff;
-    opacity: 1;
-    scale: 1.05;
-    text-decoration: none;
+  color: #ffffff;
+  opacity: 1;
+  scale: 1.05;
+  text-decoration: none;
 }
 
-.card-container:hover .logowrapper{
-    box-shadow: 0px 0px 90px #ffffff73;
+.card-container:hover .logowrapper {
+  box-shadow: 0px 0px 20px #ffffff3e;
 }
-

src/app/components/Contact/ContactCard.jsx

@@ -46,9 +46,8 @@ const ContactCard = ({details}) => {
     <>
       <motion.div
         className="card-container"
-        variants={cardVariants}
-        initial="hidden"              
-        whileInView="visible"         
+        variants={cardVariants}            
+
         exit="exit"           
         viewport={{ once: false }}    
         onMouseEnter={() => setIsHovered(true)}  

src/app/components/Contact/ContactPage.jsx

@@ -67,8 +67,8 @@ export default function Contact (){
     return (
         <>
         <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
-            <h1 className="text-center mt-10 text-4xl">Contact <span className="text-violet-500">Us</span></h1>
-            <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r from-[#ffffff] to-[#00ffff] bg-clip-text text-transparent text-[18px]" >We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.</p>
+            <h1 className="text-center mt-10 text-4xl">Contact Us</h1>
+            <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r  bg-clip-text text-white text-[18px]" >We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.</p>
             <div className="flex flex-wrap justify-center flex-row items-center  h-fit w-[80vw] gap-[120px] align-middle">
 
                 {contactDetails.map((cd, index) => (

src/app/components/Intro.jsx

@@ -0,0 +1,25 @@
+
+import React from "react";
+
+
+const Intro = () => {
+  return (
+    <div className="container max-w-full md:max-w-[70%] relative m-auto flex flex-col max-h-screen text-our_white pt-10 pb-14  gap-[20px] max-sm:scale-90 z-10">
+      <div className="flex flex-col  gap-[42px]">
+        <div className="w-[100px] h-[5px] bg-gradient-to-r from-blue-500 to-purple-500"></div>
+        <p
+          data-aos="fade-up"
+          data-aos-duration="1100"
+          className="tracking-wide text-[28px] font-[500] max-lg:text-[28px] max-md:text-[28px] w-full text-left max-w-[90w] lg:max-w-[60vw] text"
+        >
+          Hack for Tomorrow is a vibrant hackathon that empowers young
+          innovators to create impactful solutions. Join us to collaborate,
+          learn, and showcase your skills in a dynamic, tech-driven environment.
+        </p>
+      </div>
+    </div>
+  );
+
+};
+
+export default Intro;

src/app/components/WhyParticipate/InfoCard.jsx

@@ -2,12 +2,13 @@ const InfoCard = ({
   title,
   text,
   gradient = "from-[#3b48f9] to-[#a73ffa]",
+  color="text-white"
 }) => {
   return (
     <div className="flex  justify-center items-center ">
       <div className="flex flex-col gap-2 w-96">
         <div className={`py-10 px-8 bg-gradient-to-r ${gradient}`}>
-          <h3 className="text-3xl font-[500] tracking-wide text-black">
+          <h3 className={`text-3xl font-[500] tracking-wide ${color}`}>
             {title}
           </h3>
         </div>

src/app/components/WhyParticipate/WhyParticipate.jsx

@@ -11,26 +11,31 @@ const WhyParticipate = () => {
       title: "Build and Learn",
       text: "Dive into intense coding sessions, tackle real-world problems, and enhance your skills. Hackathons provide a unique opportunity to learn new technologies and apply them in innovative projects.",
       gradient: "from-[#3b48f9] to-[#a73ffa]",
+      color: "text-white",
     },
     {
       title: "Network",
       text: "Connect with  industry professionals, and potential employers. Hackathons are a melting pot of talent, offering invaluable networking opportunities that can shape your career.",
       gradient: "from-[#5f72be] to-[#06e1ae]",
+      color: "text-white",
     },
     {
       title: "Mentor Support",
       text: "Gain insights and guidance from experienced mentors. They'll be there to help you overcome challenges, refine your ideas, and maximize your learning experience throughout the hackathon.",
       gradient: "from-[#5bd8fa] to-[#00f982]",
+      color: "text-black",
     },
     {
       title: "Goodies and Swag",
       text: "Take home cool branded merchandise and tech gadgets. Hackathons often provide participants with exclusive swag, giving you lasting mementos of your innovative journey.",
       gradient: "from-[#5f72be] to-[#06e1ae]",
+      color: "text-white",
     },
     {
       title: "Cash Prizes",
       text: "Compete for substantial cash rewards and other prizes. Hack for Tommorow offers significant prize pools, giving you the chance to fund your projects or kickstart your entrepreneurial dreams.",
       gradient: "from-[#3b48f9] to-[#a73ffa]",
+      color: "text-white",
     },
   ];
   const cardWidth = 350; // Adjust this value based on your desired card width
@@ -87,6 +92,7 @@ const WhyParticipate = () => {
                   title={card.title}
                   text={card.text}
                   gradient={card.gradient}
+                  color={card.color}
                 />
               </div>
             </div>

src/app/page.js

@@ -10,6 +10,7 @@ import AccordionImageGallery from "./components/ImageGallery";
 import WhyParticipate from "./components/WhyParticipate/WhyParticipate";
 import FAQ from "./components/FAQ/FAQ";
 import Contact from "./components/Contact/ContactPage";
+import Intro from "./components/Intro";
 
 export default function Home() {
   return (
@@ -19,7 +20,7 @@ export default function Home() {
       {/* <CountdownTimer
         targetDate={new Date("December 21, 2024 09:30:00").getTime()}
       /> */}
-
+      <Intro />
       <About />
       <WhyParticipate />
       <Highlights />