case studies pages, bg image not working

frontend/src/App.js

 const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
 const ArticlePage = lazy(() => import('./pages/ArticlePage'));
+const CaseStudyPage = lazy(() => import('./pages/CaseStudyPage'));
 
 // Navigation Links
 const links = routes.filter(item => item.nav === true);
           <Route exact path="/" element={<Home forwardedRef={forwardedRef} />} />
           <Route exact path="/workwithus" element={<WorkWithUs />} />
           <Route exact path="/portfolio" element={<Portfolio />} />
+          <Route exact path="/case-studies/:id" element={<CaseStudyPage />} />
           <Route exact path="/process" element={<ProcessPage />} />
           <Route exact path="/careers" element={<Careers />}/>
           <Route exact path="/culture" element={<Culture />}/>

frontend/src/api/PortfolioDataLayer.jsx

 const api_url = process.env.REACT_APP_API_URL;
 
 const strapiPopulate = [
+  'Slug',
   'Heading',
   'Heading.paragraphs',
-  'Stat',
-  'AboutClient.paragraph',
-  'Country',
-  'Indrustry',
-  'Domain.paragraph',
-  'Challanges.paragraph',
-  'Solution.paragraph',
-  'Results.paragraph',
-  'CaseStudyImage',
-  'Technologies.Tech',
-  'WorkTogether',
   'BackgroundImage',
-  'SEO',
-  'SEO.metaSocial',
-  'SEO.metaImage',
-  'SEO.metaSocial.image',
 ];
 
 const PortfolioDataLayer = () => {
 
   const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
 
-  console.log(data);
-
   if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">

frontend/src/components/CardsGrid.jsx

           // <PortfolioCard key={index} title={item.attributes.heading} img={api_url + item.attributes.img.data.attributes.formats.small.url} isLarge={item.attributes.IsLarge} />
           <PortfolioCard
             key={index}
-            title={item.attributes.Heading.title}
+            title={item.title}
             alt={item.alt}
             isLarge={false}
             link={item.link}

frontend/src/components/shared/PortfolioCardNew.jsx

-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const api_url = process.env.REACT_APP_API_URL;
   const linkTo = useNavigate();
 
   return (
-    <a className={'card box my-2 flex- flex-col items-center'} href={data.link}>
-      <img src={api_url + data.CaseStudyImage.data.attributes.url} alt={data.CaseStudyImage.data.attributes.alternativeText} className={'mb-12 mx-auto self-center'}></img>
-      <h3 className="h3-heading">{data.Heading.title}</h3>
-      <button className="btn text-dg-secondary mt-4">Read More</button>
-    </a>
+    <Fragment>
+      {data && (
+        <a className={'card box my-2 flex- flex-col items-center'} href={`/case-studies/${data.Slug}`}>
+          {data.BackgroundImage.data && (
+            <img
+              src={api_url + data.BackgroundImage.data.attributes?.url}
+              alt={data.BackgroundImage.data.attributes?.alternativeText}
+              className={'mb-12 mx-auto self-center'}
+            ></img>
+          )}
+
+          <h3 className="h3-heading">{data.Heading.title}</h3>
+          <button className="btn text-dg-secondary mt-4">Read More</button>
+        </a>
+      )}
+    </Fragment>
   );
 };
 
-export default PortfolioCardNew;
+export default PortfolioCardNew;

frontend/src/components/shared/TechNuggets.jsx

 import React from 'react';
 
-const TechNuggets = ({ tech }) => {
+const TechNuggets = ({ data }) => {
     return (
       <div className="flex gap-2 mt-2 flex-wrap">
-        {tech.map((item, index) => (
-          <div className="px-4 py-1 text-white text-p whitespace-nowrap font-medium bg-[#9FA2DD] rounded-lg" key={index}>{item}</div>
+        {data.map((item, index) => (
+          <div className="px-4 py-1 text-white text-p whitespace-nowrap font-medium bg-[#9FA2DD] rounded-lg" key={index}>{item.text}</div>
             ))}
       </div>
     );

frontend/src/hooks/useFetchCollections.js

-import axios from "axios";
-import React, { useEffect, useReducer, useState } from "react";
-
-
+import axios from 'axios';
+import React, { useEffect, useReducer, useState } from 'react';
 
 const dataFetchReducer = (state, action) => {
   switch (action.type) {
       return {
         ...state,
         isLoading: true,
-        isError: false
+        isError: false,
       };
     case 'FETCH_SUCCESS':
       return {
   }
 };
 
-
 const useFetchCollections = (initialUrl, initialData) => {
   const [url, setUrl] = useState(initialUrl);
 
     isError: false,
     data: initialData,
   });
-    //getData
-    useEffect(() => {
-        const fetchData = async () => {
-          dispatch({ type: 'FETCH_INIT' });
-    
-          try {
-            const result = await axios(url);
-    
-            dispatch({ type: 'FETCH_SUCCESS', payload: result.data.data });
-          } catch (error) {
-            dispatch({ type: 'FETCH_FAILURE' });
-          }
-        };
-    
-        fetchData();
-      }, [url]);
-  
+
+  //getData
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: 'FETCH_INIT' });
+
+      try {
+        const result = await axios(url);
+
+        dispatch({ type: 'FETCH_SUCCESS', payload: result.data.data });
+      } catch (error) {
+        dispatch({ type: 'FETCH_FAILURE' });
+      }
+    };
+
+    fetchData();
+  }, [url]);
 
   useEffect(() => {
     let didCancel = false;
   return [state, setUrl];
 };
 
-export default useFetchCollections
+export default useFetchCollections;

frontend/src/layout/IrregularPortfolioGrid.jsx

 
 const IrregularPortfolioGrid = ({children}) => {
   return (
-    <div>{children}</div>
+    <div className='grid overflow-visible grid-cols-1 md:grid-cols-2 lg:grid-cols-3 auto-rows-auto gap-8'>{children}</div>
   )
 }
 

frontend/src/pages/CaseStudyPage.jsx

+import React, { useEffect } from 'react';
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Wrapper from '../layout/Wrapper';
+
+import PageLayout from '../layout/PageLayout';
+
+import '../App.css';
+import '../styles/ck-editor.css';
+import useAnalytics from './../hooks/useAnalytics';
+import { strapiApiBuilder } from './../utils/strapiApiBuilder';
+import ReactHelmet from './../components/shared/ReactHelmet';
+
+import { useLocation } from 'react-router-dom';
+import useFetchCollections from './../hooks/useFetchCollections';
+import ActionCard from '../components/shared/ActionCard';
+import TechNuggets from '../components/shared/TechNuggets';
+import { motion } from 'framer-motion';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = [
+  'Slug',
+  'Heading.paragraphs',
+  'Stat',
+  'AboutClient.paragraph',
+  'Country',
+  'Industry',
+  'Domain.paragraph',
+  'Challanges.paragraph',
+  'Solution.paragraph',
+  'Results.paragraph',
+  'CaseStudyImage',
+  'Techonologies.Tech',
+  'WorkTogether',
+  'BackgroundImage',
+  'SEO',
+  'SEO.metaSocial',
+  'SEO.metaImage',
+  'SEO.metaSocial.image',
+];
+
+export default function CaseStudyPage() {
+  const slug = useLocation();
+
+  const helperString = slug.pathname.split('/').pop();
+
+  const strapi = strapiApiBuilder(
+    'case-studies',
+    strapiPopulate,
+    `&filters[Slug][$eq]=${helperString}`,
+  );
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+  console.log(data);
+
+  useAnalytics('');
+
+  useEffect(() => {
+    document.title = '';
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  } else {
+    return (
+      <PageLayout>
+        {data && data[0].attributes.SEO && data[0].attributes.SEO.length > 0 && (
+          <ReactHelmet seo={data[0].attributes.SEO} />
+        )}
+        {data && data.length > 0 && (
+          <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
+            {/* Heading Section */}
+            <section
+              id="heading"
+              className={
+                `flex flex-col items-center justify-center m-auto py-16 md:py-32 bg-cover bg-[url('${api_url + data[0].attributes.BackgroundImage.data?.attributes.url}')]`
+              }
+            >
+              <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
+                {data[0].attributes.Heading && (
+                  <div className="w-full">
+                    <h6 className="subheading">{data[0].attributes.Heading.subtitle}</h6>
+                    <h1 className="heading text-dg-secondary mt-2">
+                      {data[0].attributes.Heading.title}
+                    </h1>
+                    {data[0].attributes.Heading.paragraphs &&
+                      data[0].attributes.Heading.paragraphs.length > 0 &&
+                      data[0].attributes.Heading.paragraphs.map((item, index) => (
+                        <p key={index} className="paragraph mt-4">
+                          {item.ParagraphElement}
+                        </p>
+                      ))}
+                  </div>
+                )}
+              </div>
+            </section>
+
+            <Wrapper padding={' py-90p'}>
+              {data[0].attributes.Stat && data[0].attributes.Stat > 0 && (
+                <motion.section
+                  id="status-numbers"
+                  className="flex flex-col md:flex-row items-start justify-between w-full gap-90p px-90p"
+                  initial={{ y: 60, opacity: 0 }}
+                  whileInView={{ y: 0, opacity: 1 }}
+                  transition={{ duration: 0.5, ease: 'easeOut' }}
+                >
+                  {data[0].attributes.Stat.map((item, i) => (
+                    <div key={i} className="flex flex-col">
+                      <h2 className="display-number text-center">{item.value}+</h2>
+                      <h3 className="number-title text-center">{item.title}</h3>
+                    </div>
+                  ))}
+                </motion.section>
+              )}
+            </Wrapper>
+
+            {/* About the Client Section */}
+
+            <section id="client" className="flex flex-col items-center justify-center">
+              <div className="my-8 flex flex-col md:flex-row justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
+                {data[0].attributes.AboutClient && (
+                  <div className="w-full md:w-1/2">
+                    <h3 className="h3-heading text-teal-600">
+                      {data[0].attributes.AboutClient.title}
+                    </h3>
+                    {data[0].attributes.AboutClient.paragraph &&
+                      data[0].attributes.AboutClient.paragraph.length > 0 &&
+                      data[0].attributes.AboutClient.paragraph.map((item, index) => (
+                        <p key={index} className="paragraph mt-4">
+                          {item.ParagraphElement}
+                        </p>
+                      ))}
+                  </div>
+                )}
+                <div className="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-16 mt-8 md:mt-0">
+                  <div className="hidden md:inline-block"></div>
+                  {data[0].attributes.Country && (
+                    <div className="float-left md:float-right text-left md:text-right">
+                      <h4 className="text-teal-600 font-semibold">
+                        {data[0].attributes.Country.title}
+                      </h4>
+                      <p className="mt-4">{data[0].attributes.Country.info}</p>
+                    </div>
+                  )}
+                  {data[0].attributes.Industry && (
+                    <div className="float-left md:float-right text-left md:text-right">
+                      <h4 className="text-teal-600 font-semibold">
+                        {data[0].attributes.Industry.title}
+                      </h4>
+                      <p className="mt-4">{data[0].attributes.Industry.info}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </section>
+
+            {/* Domain Section */}
+            {data[0].attributes.Domain && (
+              <section
+                id="domain"
+                className="flex flex-col items-center justify-center mt-16"
+              >
+                <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+                  <div className="w-full">
+                    <h3 className="h3-heading">{data[0].attributes.Domain.title}</h3>
+                    {data[0].attributes.Domain.paragraph &&
+                      data[0].attributes.Domain.paragraph.length > 0 &&
+                      data[0].attributes.Domain.paragraph.map((item, index) => (
+                        <p key={index} className="paragraph mt-4">
+                          {item.ParagraphElement}
+                        </p>
+                      ))}
+                  </div>
+                </div>
+              </section>
+            )}
+
+            {/* Challanges, Solution Section */}
+            <section
+              id="challanges_solution"
+              className="flex flex-col items-center justify-center mt-16"
+            >
+              <div className="my-8 flex flex-col md:flex-row justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+                <div className="w-full md:w-1/2 md:pr-16">
+                  {data[0].attributes.Challanges && (
+                    <div>
+                      <h3 className="h3-heading">
+                        {data[0].attributes.Challanges.title}
+                      </h3>
+                      {data[0].attributes.Challanges.paragraph &&
+                        data[0].attributes.Challanges.paragraph.length > 0 &&
+                        data[0].attributes.Challanges.paragraph.map((item, index) => (
+                          <p key={index} className="paragraph mt-4">
+                            {item.ParagraphElement}
+                          </p>
+                        ))}
+                    </div>
+                  )}
+
+                  {data[0].attributes.Solution && (
+                    <div className="mt-8">
+                      <h3 className="h3-heading">{data[0].attributes.Solution.title}</h3>
+                      {data[0].attributes.Solution.paragraph &&
+                        data[0].attributes.Solution.paragraph.length > 0 &&
+                        data[0].attributes.Solution.paragraph.map((item, index) => (
+                          <p key={index} className="paragraph mt-4">
+                            {item.ParagraphElement}
+                          </p>
+                        ))}
+                    </div>
+                  )}
+                </div>
+                {data[0].attributes.CaseStudyImage.data && (
+                  <img
+                    src={api_url + data[0].attributes.CaseStudyImage.data.attributes.url}
+                    alt={
+                      data[0].attributes.CaseStudyImage.data.attributes.alternativeText
+                    }
+                    className="text-center w-full md:w-1/2"
+                  />
+                )}
+              </div>
+            </section>
+
+            {/* Results Section */}
+            {data[0].attributes.Results && (
+              <section
+                id="results"
+                className="flex flex-col items-center justify-center mt-16"
+              >
+                <div className="my-8 flex flex-col justify-center items-center w-full max-w-custom m-auto px-8 xl:px-0">
+                  <div className="w-full">
+                    <h3 className="h3-heading text-dg-secondary">
+                      {data[0].attributes.Results.title}
+                    </h3>
+                    <ul className="list-disc paragraph mt-2 pl-8">
+                      {data[0].attributes.Results.paragraph &&
+                        data[0].attributes.Results.paragraph.length > 0 &&
+                        data[0].attributes.Results.paragraph.map((item, index) => (
+                          <li key={index}>{item.ParagraphElement}</li>
+                        ))}
+                    </ul>
+                  </div>
+                </div>
+              </section>
+            )}
+
+            {/* Technologies Section */}
+            {data[0].attributes.Techonologies && (
+              <section id="technologies" className="flex flex-col justify-center mt-16">
+                <div className="my-8 flex flex-col w-full max-w-custom m-auto px-8 xl:px-0">
+                  <div className="w-full">
+                    <h3 className="h3-heading">
+                      {data[0].attributes.Techonologies.title}
+                    </h3>
+                  </div>
+                  {data[0].attributes.Techonologies.Tech && (
+                    <TechNuggets data={data[0].attributes.Techonologies.Tech} />
+                  )}
+                </div>
+              </section>
+            )}
+
+            {/* CTA Section */}
+            {data[0].attributes.WorkTogether && (
+              <section
+                id="cta"
+                className="flex flex-col items-center justify-center mt-16"
+              >
+                <div className="px-8 mt-8 mb-32 w-full max-w-custom">
+                  <ActionCard
+                    title={data[0].attributes.WorkTogether.title}
+                    text={data[0].attributes.WorkTogether.paragraph}
+                    btn1={data[0].attributes.WorkTogether.ButtonPrimary}
+                    btn2={data[0].attributes.WorkTogether.ButtonSecondary}
+                    link1={'/portfolio'}
+                    link2={'/contact'}
+                  />
+                </div>
+              </section>
+            )}
+          </div>
+        )}
+      </PageLayout>
+    );
+  }
+}

frontend/src/pages/Portfolio.jsx

         </Wrapper>
         <Wrapper>
           <PortfolioDataLayer/>
-          <CardsGrid data={_data.cards} />
         </Wrapper>
       </div>
     </PageLayout>