hook for card

frontend/src/components/CardCareers2.jsx

 import propTypes from 'prop-types';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ReactComponent as BackTriangle } from '../assets/graphics/BackTriangle.svg';
 import Wrapper from '../layout/Wrapper';
 import ExpandedCard from './ExpandedCard';
 import TriangleButton from './shared/TriangleButton';
 import CareerCard from './CareerCard';
 import Grid from '../layout/Grid';
+import { ref } from 'yup';
+import useClickOutside from '../hooks/useClickOutside';
+import useComponentVisible from '../hooks/useClickOutside';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 
 
-export default function CardCareers2({cards}) {
-  const [expanded, setExpanded] = useState(false);
+export default function CardCareers2({ cards }) {
   const [expandedCard, setExpandedCard] = useState({});
 
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+
+
+
   return (
 
     <Wrapper>
-        {expanded ? 
-        <ExpandedCard card={expandedCard} setExpanded={setExpanded} setExpandedCard={setExpandedCard}></ExpandedCard>
-        : 
-          <div className='flex flex-row justify-center w-full'>
+      <div ref={ref}>
+        {isComponentVisible ?
+         <ExpandedCard card={expandedCard} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard}></ExpandedCard>
+         :
+        <div className='flex flex-row justify-center w-full'>
           {
-            cards.map((item,index) => (
-              <CareerCard card={item} key={index} setExpanded={setExpanded} setExpandedCard={setExpandedCard} />
+            cards.map((item, index) => (
+              <CareerCard card={item} key={index} setExpanded={setIsComponentVisible} setExpandedCard={setExpandedCard} />
             ))
           }
-          
-          </div>}
+
+        </div>
+}
+      </div>
+       
     </Wrapper>
   );
 }

frontend/src/components/ExpandedCard.jsx

 import { useNavigate } from 'react-router-dom';
 import net from './../assets/icons/net.svg';
 import { m } from 'framer-motion';
+import useClickOutside from '../hooks/useClickOutside';
 
 const _data = {
   requirements: [

frontend/src/components/Landing.jsx

 }
 const numbers = [
   {
-  value: 90,
-  static: '+',
-  title: 'Employees'
-},
-{
-  value: '20',
-  static: '+',
-  title: 'Projects'
-},
-{
-  value: '100',
-  static: '%',
-  title: 'Client-Retention'
-}
+    value: 90,
+    static: '+',
+    title: 'Employees'
+  },
+  {
+    value: '20',
+    static: '+',
+    title: 'Projects'
+  },
+  {
+    value: '100',
+    static: '%',
+    title: 'Client-Retention'
+  }
 ]
 
-const Landing = ({data}) => {
-    return (
-      <Wrapper>
-        <div className="flex flex-col gap-90p pb-164p">
+const Landing = ({ data }) => {
+  return (
+    <Wrapper>
+      <div className="flex flex-col gap-90p pb-164p">
         <motion.section
-        id="landing"
-        className="flex flex-col items-center justify-center"
-        initial={{ y: 60, opacity: 0 }}
-        whileInView={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, ease: 'easeOut' }}
+          id="landing"
+          className="flex flex-col items-center justify-center"
+          initial={{ y: 60, opacity: 0 }}
+          whileInView={{ y: 0, opacity: 1 }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+
+        >
 
-      >
-        
-        
-        {/* <img src={bg_home} alt="Diligent Software's Animation" width="700" /> */}
+
+          {/* <img src={bg_home} alt="Diligent Software's Animation" width="700" /> */}
 
           {/* <LandingSVG /> */}
-          <LandingSVGv2/>
-          <OpenDayBanner/>
-        <HiringWidget />
-        <div className="mb-16 -mt-12 md:mt-5 flex flex-col lg:flex-row justify-between items-center gap-90p">
-          <div className="flex flex-col gap-8p">
-            <h6 className="subheading">
-             {data.subheading}
-            </h6>
-            <h1 className="heading capitalize">
-              Software Solutions Tailored to each client
-            </h1>
-            <p className="paragraph">
+          <LandingSVGv2 />
+          <OpenDayBanner />
+          <HiringWidget />
+          <div className="mb-16 -mt-12 md:mt-5 flex flex-col lg:flex-row justify-between items-center gap-90p">
+            <div className="flex flex-col gap-8p">
+              <h6 className="subheading">
+                {data.subheading}
+              </h6>
+              <h1 className="heading">
+                Software Solutions Tailored to Each Client
+              </h1>
+              <p className="paragraph">
                 {data.paragraph}
-              
-            </p>
+
+              </p>
+            </div>
+            <a
+              href="#contact"
+              className="btn-primary px-64p py-20p w-full lg:w-max whitespace-nowrap"
+            >
+              {_data.cto}
+            </a>
           </div>
-          <a
-            href="#contact"
-            className="btn-primary px-64p py-20p w-full lg:w-max whitespace-nowrap"
-          >
-            {_data.cto}
-          </a>
-        </div>
-
-      </motion.section>
-      <motion.section
-      id="status-numbers"
-      className="flex flex-col md:flex-row items-center justify-between w-full gap-90p px-90p"
-      initial={{ y: 60, opacity: 0 }}
-      whileInView={{ y: 0, opacity: 1 }}
-      transition={{ duration: 0.5, ease: 'easeOut' }}
-      >
-        { numbers.map((item,i)=> (
-          <div key={i} className="flex flex-col">
-          <h2 className="display-number text-center">
-            {item.value}{item.static}
-          </h2>
-          <h3 className="number-title text-center">
-            {item.title}
-          </h3>
-        </div>
-        ))}
-
-        
-         
-          
-      
-
-      </motion.section>
-        </div>
-
-      </Wrapper>
-    )
+
+        </motion.section>
+        <motion.section
+          id="status-numbers"
+          className="flex flex-col md:flex-row items-center justify-between w-full gap-90p px-90p"
+          initial={{ y: 60, opacity: 0 }}
+          whileInView={{ y: 0, opacity: 1 }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        >
+          {numbers.map((item, i) => (
+            <div key={i} className="flex flex-col">
+              <h2 className="display-number text-center">
+                {item.value}{item.static}
+              </h2>
+              <h3 className="number-title text-center">
+                {item.title}
+              </h3>
+            </div>
+          ))}
+
+
+
+
+
+
+        </motion.section>
+      </div>
+
+    </Wrapper>
+  )
 }
 
 export default Landing;

frontend/src/components/PortfolioSection.jsx

     cards: [
         {
           id: 0,
-          title: 'BI Healthcare Solution System',
+          title: 'Bi Healthcare Solution System',
           imgUrl: 
           'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
           link: '/casestudybi',
         },
         {
           id: 2,
-          title: 'Ticketing System for passengers',
+          title: 'Ticketing System for Passengers',
           imgUrl:
           'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
           link: '/casestudyticketing',

frontend/src/components/Testimonials.jsx

 import ns from './../assets/ns.png';
 
 const _data = {
-    heading: "What our Clients Said",
+    heading: "What Our Clients Said",
     subheading: "Testimonials",
     cards: [
         {

frontend/src/components/WhySection.jsx

   },
   card_left: {
     imgUrl: why1,
-    heading: "Innovative solutions",
+    heading: "Innovative Solutions",
     paragraph: "Technology is just one aspect of our client relationships. Enthusiasts to the core, we bring innovative and real-life solutions to each client’s problems through a deep understanding of their market, approach, and vision.",
   },
   card_mid: {
   },
   card_right: {
     imgUrl: why3,
-    heading: "End-user engagement",
+    heading: "End-user Engagement",
     paragraph: "Our company helps clients to create a successful product. We focus on technical quality to ensure that products are up to standards and meet the needs of users. Innovation is key in developing products that are unique and valuable.",
   }
 

frontend/src/hooks/useClickOutside.js

+import { useState, useEffect, useRef } from 'react';
+
+export default function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+
+    const handleClickOutside = (event) => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            setIsComponentVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, []);
+
+    return { ref, isComponentVisible, setIsComponentVisible };
+}

frontend/src/pages/Careers.jsx

 // eslint-disable-next-line no-underscore-dangle
 const _data = {
   heading: {
-    heading: 'Join our team of Diligent Minds',
+    heading: 'Join Our Team of Diligent Minds',
     subheading: 'Careers',
   },
   job: {
     ],
   },
   life: {
-    heading: 'A culture that\'s serious about Work and Fun',
+    heading: 'A Culture That’s Serious About Work and Fun',
     subheading: 'Diligent life',
     italic: {
       heading: 'Life At diligent',
       paragraph: 'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
-      heading2: 'What it means to Work with us',
+      heading2: 'What It Means to Work With Us',
     },
     cards: [
       {
         id: 1,
-        title: 'Shape the future',
+        title: 'Shape the Future',
         paragraph: 'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
       },
       {
         id: 2,
-        title: 'Life-long Learning',
+        title: 'Life-Long Learning',
         paragraph: 'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
       },
       {
       },
       {
         id: 4,
-        title: 'Make The Impossible Better',
+        title: 'Make the Impossible Better',
         paragraph: 'If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We\'d love to learn more about you.',
       },
     ],
   },
   connect: {
-    heading: 'Connect and Grow with us',
+    heading: 'Connect and Grow With Us',
     paragraph: 'At Diligent, we are passionately proud of our culture and feel that everyone, including those who are not yet on the team, should have the opportunity to experience it. Because of this, we participate in Open Doors. Our coworkers are actively involved in the local tech communities. We take satisfaction in giving back as well, assisting college students or seasoned professionals who want to start a career in IT.',
     subtitle: 'Check out how we have fun together!',
     sliderImages: [
     ],
   },
   ActionCard: {
-    heading: 'Contact us and step up your career!',
+    heading: 'Contact Us and Step up Your Career!',
     paragraph: 'We are continuously on the lookout for talented people to grow our business.',
     paragraph2: 'Don\'t be shy - Apply!',
     primaryBtn: 'Apply',

frontend/src/pages/Portfolio.jsx

   cards: [
     {
       id: 0,
-      title: 'BI Healthcare Solution System',
+      title: 'Bi Healthcare Solution System',
       imgUrl: 
       'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
       link: '/casestudybi',
     },
     {
       id: 2,
-      title: 'Ticketing System for passengers',
+      title: 'Ticketing System for Passengers',
       imgUrl:
       'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
       link: '/casestudyticketing',

frontend/src/pages/ProcessPage.jsx

 
 const _data = {
   heading : {
-    heading : "How we do it?",
+    heading : "How We Do It?",
     subheading: "Our Process",
     paragraph: "We work with our clients to deliver the full software release lifecycle, from development to final rollout. We understand how important a good process is for success because our team members have deep backgrounds in product development. Our clients can rely on us for a complete software release solution that meets their needs and achieves their desired outcomes."
   },
   cards : [
     {
       id: "1",
-      title: "Figure it out",
+      title: "Figure It Out",
       subtitle: "After understanding the company's goals, we build a digital strategy.",
       paragraphs: [
         {
     },
     {
       id: "6",
-      title: "Maintain and improve",
+      title: "Maintain and Improve",
       subtitle: "Continually optimize and grow.",
       paragraphs: [
         {
 
   ],
   ActionCard : {
-    heading: "Let’s work together!",
+    heading: "Let’s Work Together!",
     paragraph: "Business Intelligence portal which enhouses series of web applications & reporting tools used for in-depth analysis on product pricing, money flow, resources, employees, etc. Applications provide administrative users overview, as well as detail look scaled down to individual product.",
     primaryBtn: "Contact Us",
     secondaryBtn: "Portfolio"

frontend/src/styles/text.css

 
 @layer components {
   .heading {
-    @apply font-primary text-dark-gray dark:text-white text-head-mobile md:text-head capitalize ;
+    @apply font-primary text-dark-gray dark:text-white text-head-mobile md:text-head;
   }
 
   .subheading {