diff --git a/components/ExploreCard.jsx b/components/ExploreCard.jsx
index adc255e..b87b7ac 100644
--- a/components/ExploreCard.jsx
+++ b/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>
diff --git a/components/Footer.jsx b/components/Footer.jsx
index fd0c098..3f09f22 100644
--- a/components/Footer.jsx
+++ b/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">
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 8ad4b94..21ded68 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -12,11 +12,15 @@ 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" />
@@ -24,4 +28,5 @@ const Navbar = () => (
   </motion.nav>
 );
 
+
 export default Navbar;
diff --git a/components/NewFeatures.jsx b/components/NewFeatures.jsx
index 893f91c..386655f 100644
--- a/components/NewFeatures.jsx
+++ b/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>
 );
 
diff --git a/constants/index.js b/constants/index.js
index 382b0d6..ec1c010 100644
--- a/constants/index.js
+++ b/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',
diff --git a/public/disc.jpeg b/public/disc.jpeg
new file mode 100644
index 0000000..a65dd34
Binary files /dev/null and b/public/disc.jpeg differ
diff --git a/public/discord.png b/public/discord.png
new file mode 100644
index 0000000..c28d458
Binary files /dev/null and b/public/discord.png differ
diff --git a/public/git.png b/public/git.png
new file mode 100644
index 0000000..e1d0c03
Binary files /dev/null and b/public/git.png differ
diff --git a/public/github.png b/public/github.png
new file mode 100644
index 0000000..3c3922d
Binary files /dev/null and b/public/github.png differ
diff --git a/public/scai.jpeg b/public/scai.jpeg
new file mode 100644
index 0000000..1072665
Binary files /dev/null and b/public/scai.jpeg differ
diff --git a/sections/About.jsx b/sections/About.jsx
index 5d2576b..2724fa1 100644
--- a/sections/About.jsx
+++ b/sections/About.jsx
@@ -17,7 +17,7 @@ const About = () => (
       className={`${styles.innerWidth} mx-auto ${styles.flexCenter} flex-col`}
     >
       <TypingText
-        title="| About Metadroid"
+        title="| About SCAI"
         textStyles="text-center"
       />
 
@@ -25,7 +25,9 @@ const About = () => (
         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
diff --git a/sections/Explore.jsx b/sections/Explore.jsx
index 2542758..7810ea9 100644
--- a/sections/Explore.jsx
+++ b/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) => (
diff --git a/sections/Feedback.jsx b/sections/Feedback.jsx
index 5544e75..d0bd6bd 100644
--- a/sections/Feedback.jsx
+++ b/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>
diff --git a/sections/GetStarted.jsx b/sections/GetStarted.jsx
index bf2eb4c..4cbd766 100644
--- a/sections/GetStarted.jsx
+++ b/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
diff --git a/sections/Hero.jsx b/sections/Hero.jsx
index 9bd5860..5513d54 100644
--- a/sections/Hero.jsx
+++ b/sections/Hero.jsx
@@ -1,60 +1,158 @@
+// 'use client';
+
+// import { motion } from 'framer-motion';
+// import styles from '../styles';
+// import { slideIn, staggerContainer, textVariant } from '../utils/motion';
+
+// const Hero = () => (
+//   <section className={`${styles.yPaddings} sm:pl-16 pl-6`}>
+//     <motion.div
+//       variants={staggerContainer}
+//       initial="hidden"
+//       whileInView="show"
+//       viewport={{ once: false, amount: 0.25 }}
+//       className={`${styles.innerWidth2} mx-auto flex flex-col`}
+//     >
+//       <div className="relative z-10 flex flex-col items-center justify-center">
+//         <motion.h1
+//           variants={textVariant(1.1)}
+//           className={styles.heroHeading}
+//         >
+//           SCAI
+//         </motion.h1>
+//         <motion.div
+//           variants={textVariant(1.2)}
+//           className="flex flex-row items-center justify-center"
+//         >
+//           <h1 className={styles.heroHeading}> Ma</h1>
+//           <div className={styles.heroDText} />
+//           <h1 className={styles.heroHeading}> Ness</h1>
+//         </motion.div>
+//       </div>
+
+//       <motion.div
+//         variants={slideIn('right', 'tween', 0.2, 1)}
+//         className="relative w-full lg:-mt-[30px] md:-mt-[18px] -mt-[15px]  2xl:pl-[280px]"
+//       >
+//         <div className="absolute w-full h-[300px] hero-gradient rounded-tl-[140px] z-[0] sm:-top-[20px] -top-[10px]" />
+//         <img
+//           src="/cover.png"
+//           alt="cover"
+//           className="w-full sm:h-[500px] h-[350px] object-cover rounded-tl-[140px] z-10 relative"
+//         />
+
+//         <a href="#explore">
+//           <div className="w-full flex justify-end sm:-mt-[70px] -mt-[50px] pr-[40px] relative z-10 2xl:-ml-[100px]">
+//             <motion.img
+//               src="/stamp.png"
+//               alt="stamp"
+//               className="sm:w-[155px] w-[100px] sm:h-[155px] h-[100px] object-contain "
+//               animate={{ rotate: 360 }}
+//               transition={{ repeat: Infinity, duration: 7, repeatType: 'loop' }}
+//             />
+//           </div>
+//         </a>
+//       </motion.div>
+//     </motion.div>
+//   </section>
+// );
+
+// export default Hero;
 'use client';
 
+import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import styles from '../styles';
 import { slideIn, staggerContainer, textVariant } from '../utils/motion';
 
-const Hero = () => (
-  <section className={`${styles.yPaddings} sm:pl-16 pl-6`}>
-    <motion.div
-      variants={staggerContainer}
-      initial="hidden"
-      whileInView="show"
-      viewport={{ once: false, amount: 0.25 }}
-      className={`${styles.innerWidth2} mx-auto flex flex-col`}
-    >
-      <div className="relative z-10 flex flex-col items-center justify-center">
-        <motion.h1
-          variants={textVariant(1.1)}
-          className={styles.heroHeading}
-        >
-          SCAI
-        </motion.h1>
-        <motion.div
-          variants={textVariant(1.2)}
-          className="flex flex-row items-center justify-center"
-        >
-          <h1 className={styles.heroHeading}> Ma</h1>
-          <div className={styles.heroDText} />
-          <h1 className={styles.heroHeading}> Ness</h1>
-        </motion.div>
-      </div>
+const Hero = () => {
+  const [isMounted, setIsMounted] = useState(false);
 
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <section className={`${styles.yPaddings} sm:pl-16 pl-6`}>
       <motion.div
-        variants={slideIn('right', 'tween', 0.2, 1)}
-        className="relative w-full lg:-mt-[30px] md:-mt-[18px] -mt-[15px]  2xl:pl-[280px]"
+        variants={staggerContainer}
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: false, amount: 0.25 }}
+        className={`${styles.innerWidth2} mx-auto flex flex-col`}
       >
-        <div className="absolute w-full h-[300px] hero-gradient rounded-tl-[140px] z-[0] sm:-top-[20px] -top-[10px]" />
-        <img
-          src="/cover.png"
-          alt="cover"
-          className="w-full sm:h-[500px] h-[350px] object-cover rounded-tl-[140px] z-10 relative"
-        />
-
-        <a href="#explore">
-          <div className="w-full flex justify-end sm:-mt-[70px] -mt-[50px] pr-[40px] relative z-10 2xl:-ml-[100px]">
-            <motion.img
-              src="/stamp.png"
-              alt="stamp"
-              className="sm:w-[155px] w-[100px] sm:h-[155px] h-[100px] object-contain "
-              animate={{ rotate: 360 }}
-              transition={{ repeat: Infinity, duration: 7, repeatType: 'loop' }}
-            />
-          </div>
-        </a>
+        <div className="relative z-10 flex flex-col items-center justify-center">
+          <motion.h1
+            variants={textVariant(1.1)}
+            className={styles.heroHeadingLarge}
+          >
+            SCAI
+          </motion.h1>
+
+          <motion.div
+            variants={textVariant(1.2)}
+            className="flex flex-row items-center justify-center"
+          >
+            <h1 className={styles.heroHeading}> Ma</h1>
+            <div className={styles.heroDText} />
+            <h1 className={styles.heroHeading}> Ness</h1>
+          </motion.div>
+        </div>
+
+        <motion.div
+          variants={slideIn('right', 'tween', 0.2, 1)}
+          className="relative w-full lg:-mt-[30px] md:-mt-[18px] -mt-[15px] 2xl:pl-[280px]"
+        >
+          <div className="absolute w-full h-[300px] hero-gradient rounded-tl-[140px] z-[0] sm:-top-[20px] -top-[10px]" />
+          <img
+            src="/cover.png"
+            alt="cover"
+            className="w-full sm:h-[500px] h-[350px] object-cover rounded-tl-[140px] z-10 relative"
+          />
+
+          <a href="#explore">
+            <div className="w-full flex justify-between sm:-mt-[70px] -mt-[50px] pr-[40px] relative z-10 2xl:-ml-[100px]">
+              <div className="flex items-center gap-4">
+                <a href="https://discord.com/invite/ZZrgf9XsD4" target="_blank" rel="noopener noreferrer">
+                  <img
+                    src="/disc.jpeg"
+                    alt="Discord"
+                    className="w-10 h-10 object-contain rounded-lg shadow-md"
+                  />
+                </a>
+                <a href="https://www.instagram.com/scai_uta?igsh=MTgxamljaGxmOWoxeQ==" target="_blank" rel="noopener noreferrer">
+                  <img
+                    src="/instagram.svg"
+                    alt="Instagram"
+                    className="w-10 h-10 object-contain"
+                  />
+                </a>
+                <a href="https://github.com/SCAI-UTA" target="_blank" rel="noopener noreferrer">
+                  <img
+                    src="/github.png"
+                    alt="Github"
+                    className="w-10 h-10 object-contain rounded-lg shadow-md"
+                  />
+                </a>
+              </div>
+
+              <motion.img
+                src="/scai.jpeg"
+                alt="stamp"
+                className="sm:w-[155px] w-[100px] sm:h-[155px] h-[100px] object-contain rounded-full"
+                animate={{ rotate: 360 }}
+                transition={{ repeat: Infinity, duration: 7, repeatType: 'loop' }}
+              />
+            </div>
+          </a>
+        </motion.div>
       </motion.div>
-    </motion.div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default Hero;
diff --git a/sections/Insights.jsx b/sections/Insights.jsx
index 9a11b35..5a70a90 100644
--- a/sections/Insights.jsx
+++ b/sections/Insights.jsx
@@ -17,7 +17,7 @@ const Insights = () => (
       className={`${styles.innerWidth} mx-auto flex flex-col`}
     >
       <TypingText title="| Insight" textStyles="text-center" />
-      <TitleText title="Insights about metaverse" textStyles="text-center" />
+      <TitleText title="Insights about SCAI" textStyles="text-center" />
 
       <div className="mt-[50px] flex flex-col gap-[30px]">
         {insights.map((insight, i) => (
diff --git a/sections/WhatsNew.jsx b/sections/WhatsNew.jsx
index 5659877..a095a76 100644
--- a/sections/WhatsNew.jsx
+++ b/sections/WhatsNew.jsx
@@ -21,7 +21,7 @@ const WhatsNew = () => (
         className="flex-[0.95] flex justify-center flex-col"
       >
         <TypingText title="| Whats new?" />
-        <TitleText title={<>What's new about MetaDroid?</>} />
+        <TitleText title={<>What's new about SCAI?</>} />
         <div className="mt-[48px] flex flex-wrap justify-between gap-[24px]">
           {newFeatures.map((feature) => (
             <NewFeatures key={feature.title} {...feature} />
diff --git a/sections/World.jsx b/sections/World.jsx
index 6af8de2..320d402 100644
--- a/sections/World.jsx
+++ b/sections/World.jsx
@@ -18,7 +18,8 @@ const World = () => (
       <TitleText
         title={(
           <>
-            Track friends around you and invite them to play together in the same world
+            {/* Track friends around you and invite them to play together in the same world */}
+            Together, We'll Connect and Advance AI
           </>
         )}
         textStyles="text-center"
diff --git a/styles/globals.css b/styles/globals.css
index f5b4060..72b4901 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -105,3 +105,8 @@
   background: #65c4fa;
   filter: blur(150px);
 }
+
+.feature-date {
+  font-size: 6px;
+  color: #969696;
+}
diff --git a/styles/index.js b/styles/index.js
index 2959d1c..b6d3718 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -1,24 +1,29 @@
 const styles = {
-  innerWidth: '2xl:max-w-[1280px] w-full',
-  innerWidth2: '2xl:max-w-[2200px] w-full',
-  interWidth: 'lg:w-[80%] w-[100%]',
-
-  paddings: 'sm:p-16 xs:p-8 px-6 py-12',
-  yPaddings: 'sm:py-16 xs:py-8 py-12',
-  xPaddings: 'sm:px-16 px-6',
-  topPaddings: 'sm:pt-16 xs:pt-8 pt-12',
-  bottomPaddings: 'sm:pb-16 xs:pb-8 pb-12',
-
-  flexCenter: 'flex justify-center items-center',
-  flexStart: 'flex justify-start items-start',
-  flexEnd: 'flex justify-end',
-  navPadding: 'pt-[98px]',
-
-  // hero section
-  heroHeading:
-      'font-bold lg:text-[114px] md:text-[100px] sm:text-[60px] text-[44px] lg:leading-[158.4px] md:leading-[114.4px] sm:leading-[74.4px] leading-[64.4px] uppercase text-white',
-  heroDText:
-      'md:w-[212px] sm:w-[80px] w-[60px] md:h-[90px] sm:h-[48px] h-[38px] md:border-[18px] sm:border-[8px] rounded-r-[50px] border-white sm:mx-2 mx-[6px]',
-};
-
-export default styles;
+    innerWidth: '2xl:max-w-[1280px] w-full',
+    innerWidth2: '2xl:max-w-[2200px] w-full',
+    interWidth: 'lg:w-[80%] w-[100%]',
+  
+    paddings: 'sm:p-16 xs:p-8 px-6 py-12',
+    yPaddings: 'sm:py-16 xs:py-8 py-12',
+    xPaddings: 'sm:px-16 px-6',
+    topPaddings: 'sm:pt-16 xs:pt-8 pt-12',
+    bottomPaddings: 'sm:pb-16 xs:pb-8 pb-12',
+  
+    flexCenter: 'flex justify-center items-center',
+    flexStart: 'flex justify-start items-start',
+    flexEnd: 'flex justify-end',
+    navPadding: 'pt-[98px]',
+  
+    // hero section
+    
+    heroHeading:
+        'font-bold lg:text-[114px] md:text-[100px] sm:text-[60px] text-[44px] lg:leading-[158.4px] md:leading-[114.4px] sm:leading-[74.4px] leading-[64.4px] uppercase text-white',
+    heroDText:
+        'md:w-[212px] sm:w-[80px] w-[60px] md:h-[90px] sm:h-[48px] h-[38px] md:border-[18px] sm:border-[8px] rounded-r-[50px] border-white sm:mx-2 mx-[6px]',
+    heroHeadingLarge:
+        'font-bold lg:text-[154px] md:text-[140px] sm:text-[100px] text-[84px] lg:leading-[198.4px] md:leading-[154.4px] sm:leading-[114.4px] leading-[104.4px] uppercase text-white',
+  };
+  
+  
+  export default styles;
+  
\ No newline at end of file