Homepage edits (#2)

* Initial commit

* V1.0

---------

Co-authored-by: AashiGoyani <[email protected]>

components/ExploreCard.jsx

@@ -23,7 +23,7 @@ const ExploreCard = ({ id, imgUrl, title, index, active, handleClick }) => (
         <div className={`${styles.flexCenter} w-[60px] h-[60px] glassmorphism mb-[16px] rounded-[12px]`}>
           <img src="/headset.svg" alt="headset" className="w-1/2 h-1/2 object-cotain" />
         </div>
-        <p className="font-normal text-[16px] leading-[20.16px] text-white uppercase">Enter Metaverse</p>
+        <p className="font-normal text-[16px] leading-[20.16px] text-white uppercase">Enter Scai</p>
         <h2 className="mt-[24px] font-semibold sm:text-[32px] text-[24px] text-white">
           {title}
         </h2>

components/Footer.jsx

@@ -17,7 +17,7 @@ const Footer = () => (
     <div className={`${styles.innerWidth} mx-auto flex flex-col gap-8`}>
       <div className="flex items-center justify-between flex-wrap gap-5">
         <h4 className="font-bold md:text-[64px] text-[44px] text-white">
-          Enter the Metaverse
+          Enter the SCAI
         </h4>
         <button type="button" className="flex items-center h-fit py-4 px-6 bg-[#25618B] rounded-[32px] gap-[12px]">
           <img
@@ -26,7 +26,7 @@ const Footer = () => (
             className="w-[24px] h-[24px] object-contain"
           />
           <span className="font-normal text-[16px] text-white">
-            Enter Metaverse
+            SCAI
           </span>
         </button>
       </div>
@@ -36,10 +36,10 @@ const Footer = () => (
 
         <div className="flex items-center justify-between flex-wrap gap-4">
           <h4 className="font-extrabold text-[24px] text-white">
-            METADROID
+            SCAI
           </h4>
           <p className="font-normal text-[14px] text-white opacity-50">
-            Copyright © 2021 - 2022 Metadroid. All rights reserved.
+            Copyright © 2021 - 2022 SCAI. All rights reserved.
           </p>
 
           <div className="flex gap-4">

components/Navbar.jsx

@@ -12,16 +12,21 @@ const Navbar = () => (
     className={`${styles.xPaddings} py-8 relative`}
   >
     <div className="absolute w-[50%] inset-0 gradient-01" />
-    <div className={`${styles.innerWidth} mx-auto flex justify-between gap-8`}>
-      <img src="/search.svg" alt="search" className="w-[24px] h-[24px] object-contain" />
+    <div className={`${styles.innerWidth} mx-auto flex items-center justify-between gap-8`}>
+      <div className="flex items-center gap-4">
+        <img src="/scai.jpeg" alt="logo" className="w-[80px] h-[auto] rounded-lg shadow-md" />
 
-      <h2 className="font-extrabold test-[24px] text-white leading-[30px]">
-        METADROID
+        <img src="/search.svg" alt="search" className="w-[24px] h-[24px] object-contain" />
+      </div>
+
+      <h2 className="font-extrabold text-[24px] text-white leading-[30px]">
+        {/* Your brand name */}
       </h2>
 
       <img src="/menu.svg" alt="menu" className="w-[24px] h-[24px] object-contain" />
     </div>
   </motion.nav>
 );
 
+
 export default Navbar;

components/NewFeatures.jsx

@@ -1,12 +1,42 @@
+// import styles from '../styles';
+
+// const NewFeatures = ({ imgUrl, title, subtitle }) => (
+//   <div className="flex-1 flex-col sm:max-w-[250px] min-w-[210px]">
+//     <div className={`${styles.flexCenter} w-[70px] h-[70px] rounded-[24] bg-[#323f5d]`}>
+//       <img src={imgUrl} alt="icon" className="w-1/2 h-1/2 object-contain" />
+//     </div>
+//     <h2 className="mt-[26px] font-bold text-[24px] leading-[30px] text-white">{title}</h2>
+//     <p className="flex-1 mt-[16px] font-normal text-[18px] text-[#b0b0b0] leading-[32px]">{subtitle}</p>
+//   </div>
+// );
+
+// export default NewFeatures;
 import styles from '../styles';
 
-const NewFeatures = ({ imgUrl, title, subtitle }) => (
+const NewFeatures = ({ imgUrl, title,  date ,subtitle}) => (
   <div className="flex-1 flex-col sm:max-w-[250px] min-w-[210px]">
-    <div className={`${styles.flexCenter} w-[70px] h-[70px] rounded-[24] bg-[#323f5d]`}>
+    <div className={`${styles.flexCenter} w-[70px] h-[70px] rounded-[24px] bg-[#323f5d]`}>
       <img src={imgUrl} alt="icon" className="w-1/2 h-1/2 object-contain" />
     </div>
     <h2 className="mt-[26px] font-bold text-[24px] leading-[30px] text-white">{title}</h2>
+    <p className="mt-[10px] font-normal text-[14px] text-[#b0b0b0] leading-[24px]">{date}</p> {/* Added date */}
     <p className="flex-1 mt-[16px] font-normal text-[18px] text-[#b0b0b0] leading-[32px]">{subtitle}</p>
+
+  </div>
+);
+
+const FeaturesList = () => (
+  <div className="features-list">
+    {newFeatures.map((feature, index) => (
+      <FeatureItem
+        key={index}
+        imgUrl={feature.imgUrl}
+        title={feature.title}
+        date={feature.date} // Pass the date here
+        subtitle={feature.subtitle}
+
+      />
+    ))}
   </div>
 );
 

constants/index.js

@@ -27,17 +27,19 @@ export const exploreWorlds = [
 ];
 
 export const startingFeatures = [
-  'Find a world that suits you and you want to enter',
-  'Enter the world by reading precaution to be safe',
-  'No need to beat around the bush, just stay on the gas and have fun',
+  'Understand Basic of ML and master python programming',
+  'Explore data science and deep learning',
+  'Introduction to Generative AI',
+  'Engage in Hands on projects and challenges'
 ];
 
 export const newFeatures = [
   {
     imgUrl: '/vrpano.svg',
-    title: 'A new world',
+    title: 'Neural Networks Basics Workshop',
+    date: 'Sunday 06/23/24, 7:30 pm',
     subtitle:
-        'we have the latest update with new world for you to try never mind',
+        'This workshop aims to provide students with a fundamental understanding of neural networks, and we encourage all interested students to join us',
   },
   {
     imgUrl: '/headset.svg',

sections/About.jsx

@@ -17,15 +17,17 @@ const About = () => (
       className={`${styles.innerWidth} mx-auto ${styles.flexCenter} flex-col`}
     >
       <TypingText
-        title="| About Metadroid"
+        title="| About SCAI"
         textStyles="text-center"
       />
 
       <motion.p
         variants={fadeIn('up', 'tween', 0.2, 1)}
         className="mt-[8px] font-normal sm:text-[32px] text-[20px] text-center text-secondary-white"
       >
-        <span className="font-extrabold"> Metadroid </span> is a new thing in the future, where you can enjoy the virtual world by feeling like it's really real, you can feel what you feel in this metaverse world, because this is really the <span className="font-extrabold">madness of the metaverse</span> of today, using only <span className="font-extrabold">VR</span> devices you can easily explore the metaverse world you want, turn your dreams into reality. Let's <span className="font-extrabold">explore</span> the madness of the metaverse by scrolling down
+        <span className="font-extrabold"> SCAI </span> is a student led organization that works to increase the involvement of students in the parameter of Artificial Intelligence. As we all know, the use of AI is scaling up rapidly. It is only a matter of time that we start using AI in all fields. Therefore, SCAI is working to help students get started with AI development, arrange fun events to gather public interest and involvement. 
+
+
       </motion.p>
 
       <motion.img

sections/Explore.jsx

@@ -21,8 +21,8 @@ const Explore = () => {
         viewport={{ once: false, amount: 0.25 }}
         className={`${styles.innerWidth} mx-auto flex flex-col`}
       >
-        <TypingText title="| The World" textStyles="text-center" />
-        <TitleText title={<>Choose the world you want <br className="md:block hidden " />to Explore</>} textStyles="text-center" />
+        <TypingText title="| The Project" textStyles="text-center" />
+        <TitleText title={<>Choose the Project you want <br className="md:block hidden " />to Explore</>} textStyles="text-center" />
 
         <div className="mt-[50px] flex lg:flex-row flex-col min-h-[70vh] gap-5">
           {exploreWorlds.map((world, index) => (

sections/Feedback.jsx

@@ -19,8 +19,8 @@ const Feedback = () => (
       >
         <div className="feedback-gradient" />
         <div>
-          <h4 className="font-bold sm:text-[32px] text-[26px] sm:leading-[40px] leading-[36px] text-white">Vignesh</h4>
-          <p className="mt-[8px] font-normal sm:text-[18px] text-[12px] sm:leading-[22px] leading-[16px] text-white">Founder of MetaDroid</p>
+          <h4 className="font-bold sm:text-[32px] text-[26px] sm:leading-[40px] leading-[36px] text-white">Samarth</h4>
+          <p className="mt-[8px] font-normal sm:text-[18px] text-[12px] sm:leading-[22px] leading-[16px] text-white">President of Scai</p>
         </div>
         <p className="mt-[24px] font-normal sm:text-[24px] text-[18px] sm:leading-[45px] leading-[39px] text-white">
           “With the development of today's technology, metaverse is very useful for today's work, or can be called web 3.0. by using metaverse you can use it as anything”
@@ -36,7 +36,7 @@ const Feedback = () => (
           variants={zoomIn(0.4, 1)}
           className="lg:block hidden absolute -left-[10%] top-[3%]"
         >
-          <img src="/stamp.png" alt="stamp" className="md:w-[170px] w-[115px]  md:h-[170px] h-[115px] object-contain" />
+          <img src="/scai.jpeg" alt="stamp" className="md:w-[170px] w-[115px]  md:h-[170px] h-[115px] object-contain rounded-full" />
         </motion.div>
       </motion.div>
     </motion.div>

sections/GetStarted.jsx

@@ -26,8 +26,8 @@ const GetStarted = () => (
         variants={fadeIn('left', 'tween', 0.2, 1)}
         className="flex-[0.75] flex justify-center flex-col"
       >
-        <TypingText title="| How MetaDroid Works " />
-        <TitleText title={<> Get Started with just a few clicks </>} />
+        <TypingText title="| How AI Works " />
+        <TitleText title={<> Artificial Intelliigence Roadmap </>} />
         <div className="mt-[31px] flex flex-col max-w-[370px] gap-[24px]">
           {startingFeatures.map((features, index) => (
             <StartSteps