Responsiveness

frontend/src/components/CareerCardsTemplates/CardCareers2.jsx

@@ -25,7 +25,7 @@ export default function CardCareers2({ cards }) {
         {isComponentVisible ?
          <ExpandedCard card={expandedCard} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard}></ExpandedCard>
          :
-        <div className='flex flex-col md:flex-row justify-center w-full gap-8'>
+        <div className='flex flex-col md:flex-row justify-center items-center w-full gap-8'>
           {/* {
             cards.map((item, index) => (
               <CareerCard card={item} key={index} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />

frontend/src/pages/Careers.jsx

@@ -326,7 +326,7 @@ export default function Careers({ forwardedRef }) {
 
   return (
     <PageLayout>
-      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
+      <div className="bg-white dark:bg-dg-primary-1700 w-full md:pt-90p overflow-hidden">
         {/* Diligent Life */}
         <Wrapper padding={' py-90p'}>
           <PageTitle
@@ -335,14 +335,14 @@ export default function Careers({ forwardedRef }) {
             subheading={cntCareers.diligent_life.heading_section.subheading}
           />
 
-          <div className="my-20p">
+          <div className="mt-20p">
             <div>
               <p className="paragraph">
                 {cntCareers.diligent_life.heading_section.paragraph}
               </p>
-              <div className="w-full py-72p">
+              <div className="w-full py-48p lg:py-72p">
                 <iframe
-                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[960px] lg:h-[540px]"
+                  className="m-auto w-[300px] h-[220px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[450px] lg:w-[960px] lg:h-[540px]"
                   src={cntCareers.diligent_life.heading_section.link}
                   title="YouTube video player"
                   frameBorder="0"
@@ -353,11 +353,11 @@ export default function Careers({ forwardedRef }) {
             </div>
           </div>
 
-          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
-            <p className="paragraph w-full md:w-1/2 lg:w-3/4">
+          <div className="flex flex-col md:flex-row items-center justify-between lg:justify-center gap-8">
+            <p className="paragraph w-full lg:w-3/4">
               {cntCareers.diligent_life.CTO.cto_paragraph}
             </p>
-            <button className="btn-secondary" onClick={() => link('/diligentlife')}>
+            <button className="btn-secondary min-w-fit" onClick={() => link('/diligentlife')}>
               {cntCareers.diligent_life.CTO.cto_button}
             </button>
           </div>
@@ -396,7 +396,7 @@ export default function Careers({ forwardedRef }) {
               id="steps-image"
               src={ImgStep1}
               alt="Image not found"
-              className="absolute top-1/4 left-1/2 w-2/5 bg-fixed"
+              className="absolute top-1/4 left-3/5 sm:left-1/2 w-2/5 bg-fixed"
             />
 
             {cntCareers.selection_process.steps.map((item, index) => (
@@ -438,7 +438,7 @@ export default function Careers({ forwardedRef }) {
         </Wrapper>
 
         {/* Open Positions */}
-        <Wrapper padding={' py-90p'}>
+        <Wrapper padding={' pb-90p md:pt-90p'}>
           <div className="absolute hidden -ml-64 md:block">
             <OrbitOnScroll />
           </div>
@@ -455,13 +455,13 @@ export default function Careers({ forwardedRef }) {
         {/* Benefits Section */}
         <Wrapper bg padding={' py-90p'}>
           <section id="values" className="flex flex-row items-center justify-center">
-            <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto">
               <h2 className="heading text-dg-secondary">{cntCareers.benefits_heading.heading}</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
+              <div className="grid grid-cols-1 gap-16 w-full mt-8">
                 {cntCareers.benefits_card.map((item, index) => (
                   <CardValues
                     key={index}
-                    image={item.media}
+                    image={api_url + item.media.data.attributes.url}
                     heading={item.heading}
                     paragraph={item.paragraph}
                   />