Develop

src/components/aboutComponents/AboutHero.jsx

@@ -7,37 +7,42 @@ import Loader from '../Loader';
 import { useSelector } from 'react-redux';
 
 const AboutHero = () => {
+
+const [image, setimage] = useState('')
+const [para, setpara] = useState('')
+const [heading, setheading] = useState('')
+
   let about = useSelector(
     state => state.about.aboutPage,
   );
 
+
+  useEffect(()=>{
+
+    if(about){
+    setimage(about.AboutHero.image)
+    setpara(about.AboutHero.paragraph)
+    setheading(about.AboutHero.Heading)
+    }
+
+  },[about])
   return !about ? (
     <Loader />
   ) : (
     <section className='bg-black w-full text-white'>
       <div className='about_hero relative w-full h-[90vh] bg-gradient-to-b from-white via-gray-700 to-black'>
         <img
           className='w-full h-full object-cover opacity-75 blur-[1.5px] object-top'
-          src={About_BG}
+          src={image}
           alt=''
         />
 
         <div className='txt w-full h-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center gap-5 max-[599px]:gap-6 flex-col pt-10 max-[599px]:pt-20'>
           <h1 className='w-1/2 max-[599px]:w-full text-center leading-tight text-[3.33vw] max-[599px]:text-[10vw] font-bold font-[Montserrat]'>
-            Let’s learn about new
-            Knowledge and abitlites
+            {heading}
           </h1>
           <p className='w-[58%] max-[599px]:w-[85%] text-[1.25vw] max-[599px]:text-[3.5vw] font-medium text-center font-[Poppins]'>
-            Welcome to [Institute Name],
-            an institution dedicated to
-            fostering innovation,
-            knowledge, and personal
-            growth. Our mission is to
-            shape tomorrow’s leaders by
-            offering exceptional
-            educational opportunities
-            and encouraging intellectual
-            exploration.
+            {para }
           </p>
           <div className='btns flex items-center gap-4 max-[599px]:mt-4'>
             <button className='bg-transparent text-[1vw] max-[599px]:text-[2.5vw] border-[1px] border-white px-3 py-2 rounded-md font-bold'>

src/components/homeComponents/Hero.jsx

@@ -32,7 +32,7 @@ const Hero = () => {
       setHeading(data.homeTitle);
       setParagraph(data.homeParagraph);
     }
-  }, []);
+  }, [hero]);
 
   return !hero ? (
     <Loader />
@@ -43,8 +43,9 @@ const Hero = () => {
         backgroundImage: `url(${image})`,
       }}
     >
+
       <div className='text w-full lg:w-1/2 h-full flex items-start justify-center lg:justify-center flex-col gap-3 absolute left-[3vw]'>
-        <h3 className=' max-[400px]:text-[8.5vw] text-[8vw] min-[768px]:text-5xl min-[768px]:w-[15ch] lg:text-[4vw] sm:font-bold md:text-[4vw] md:w-[15ch] lg:font-[700] leading-tight w-[25vh] lg:w-fit'>
+        <h3 className=' max-[400px]:text-[8.5vw] text-[8vw] min-[768px]:text-5xl min-[768px]:w-[15ch] lg:text-[4vw] font-bold md:text-[4vw] md:w-[15ch] lg:font-[700] leading-tight w-[25vh] lg:w-fit'>
           {heading}
         </h3>