testemonials done, add pictures

frontend/src/api/TestimonialsDataLayer.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { strapiApiBuilder } from '../utils/strapiApiBuilder';
+import useFetchCollections from '../hooks/useFetchCollections';
+import Animation_Diligent from '../assets/animation_diligent.webm';
+import Testimonials from '../components/Testimonials';
+
+const api_url = process.env.REACT_APP_API_URL;
+
+const strapiPopulate = ['Image'];
+
+const TestimonialsDataLayer = () => {
+  const strapi = strapiApiBuilder('testemonials', strapiPopulate, '');
+  const [wideArray,setWideArray] = useState([]);
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
+  useEffect(() => {
+    if (!isLoading) {
+        let finalArray = [];
+        data && data.map((item,index,array) => {
+            if ( index % 2 === 0) {
+                const temp = [array[index], array[index+1]];
+                finalArray.push(temp);
+                
+            } else if (array.length === index) {
+                const temp = array[index]
+                finalArray.push(temp);
+            }
+        })
+        setWideArray(finalArray);
+    }
+    
+  },[data]);
+
+  console.log(wideArray);
+
+  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">
+        <video id="animation" width="540" height="540" autoPlay muted loop>
+          <source src={Animation_Diligent} type="video/webm" />
+          Loading...
+        </video>
+      </div>
+    );
+  }
+
+
+  return (
+     <Testimonials data={data} wideArray={wideArray} />
+  );
+};
+
+export default TestimonialsDataLayer;

frontend/src/components/Testimonials.jsx

@@ -2,53 +2,17 @@ import React, { Fragment, useEffect } from 'react';
 import useScreenDimensions from '../hooks/useScreenDimensions';
 import Wrapper from '../layout/Wrapper';
 import FMCarousel from './shared/FMCarousel';
-import HorizontalScroller from './shared/HorizontalScroller';
-import PageHeading from './shared/PageHeading';
 import PageTitle from './shared/PageTitle';
 import TestimonialCard from './shared/TestimonialCard';
-import Boza from './../assets/boza.jpg';
-import Peter from './../assets/peter1.png';
-import Nick from './../assets/nick.jpg';
-import ns from './../assets/ns.png';
+
+const api_url = process.env.REACT_APP_API_URL;
 
 const _data = {
   heading: 'What Our Clients Said',
   subheading: 'Testimonials',
-  cards: [
-    {
-      clientName: 'Peter Custer',
-      paragraph:
-        "Diligent is a highly valuable resource in GBI's arsenal. Reliable, versatile and skilled. They are a true representation of their company name - following through the entire process of any task we challenged them with, meeting, and exceeding, expectations regardless of the project environment.",
-      clientRole: 'CTO @ Gold Bullion International',
-      clientImg: Peter,
-      alt: 'Peter Custer - CTO @ Gold Bullion International',
-    },
-    {
-      clientName: 'Božidar Ignjatović',
-      paragraph:
-        "Diligent team is my old and reliable partner. We've been working together for more than a decade. They are highly skilled professionals for any assigned job. Do not hesitate if you need support, Diligent brings additional value. They are not only tech team, they'll be partners to your business as they were for ours!",
-      clientRole: 'BadinSoft Co-Founder, CEO',
-      clientImg: Boza,
-      alt: 'Božidar Ignjatović - BadinSoft Co-Founder, CEO',
-    },
-    {
-      clientName: 'Niš Ekspres',
-      paragraph: `Our industry is susceptible, requiring the Information System to be reliable and flexible. Diligent helped us to build and integrate several parts of the existing Information System with multiple integration points and enabled fieldwork. Be assured that you can always count on the highest performance from Diligent, "around-the-clock" support and have a partner to your business.`,
-      clientRole: '',
-      clientImg: ns,
-      alt: 'Niš Ekspres',
-    },
-    {
-      clientName: 'Nick Pericle',
-      paragraph: `We've partnered with the team at  Diligent Software for 3 years. We've built over a dozen apps together, and each time we're impressed by Diligent's dedicated approach, and end result. We consider Diligent Software a trusted partner - the trust we share, the flexibility, and the quality we get are just what we need. I can't recommend Diligent enough as a partner.`,
-      clientRole: 'VP of Operations @ Profit Optics',
-      clientImg: Nick,
-      alt: 'Nick',
-    },
-  ],
 };
 
-export default function Testimonials({ noTitle }) {
+export default function Testimonials({ data, noTitle, wideArray }) {
   const screenSize = useScreenDimensions();
 
   return (
@@ -63,73 +27,51 @@ export default function Testimonials({ noTitle }) {
         <div className="relative w-full h-[500px] overflow-hidden">
           {screenSize.width > 1000 ? (
             <FMCarousel>
-              <div className="flex">
-                <TestimonialCard
-                  clientName={_data.cards[0].clientName}
-                  clientRole={_data.cards[0].clientRole}
-                  clientImg={_data.cards[0].clientImg}
-                  imageAlt={_data.cards[0].alt}
-                  paragraph={_data.cards[0].paragraph}
-                />
-                <TestimonialCard
-                  clientName={_data.cards[1].clientName}
-                  clientRole={_data.cards[1].clientRole}
-                  clientImg={_data.cards[1].clientImg}
-                  imageAlt={_data.cards[1].alt}
-                  paragraph={_data.cards[1].paragraph}
-                />
-              </div>
-              <div className="flex">
-                <TestimonialCard
-                  clientName={_data.cards[2].clientName}
-                  clientRole={_data.cards[2].clientRole}
-                  clientImg={_data.cards[2].clientImg}
-                  imageAlt={_data.cards[2].alt}
-                  paragraph={_data.cards[2].paragraph}
-                />
-                <TestimonialCard
-                  clientName={_data.cards[3].clientName}
-                  clientRole={_data.cards[3].clientRole}
-                  clientImg={_data.cards[3].clientImg}
-                  imageAlt={_data.cards[3].alt}
-                  paragraph={_data.cards[3].paragraph}
-                />
-              </div>
-              {/* 
-                    <TestimonialCard/>
-                    <TestimonialCard/>
-                    */}
+              {wideArray &&
+                wideArray.length > 0 &&
+                wideArray.map((item, index) => (
+                  <div className="flex" key={index}>
+                    {typeof item[0] !== 'undefined' && (
+                      <Fragment>
+                        <TestimonialCard
+                          name={item[0].attributes.Name}
+                          role={item[0].attributes.Role}
+                          company={item[0].attributes.Company}
+                          img={api_url + item[0].attributes.Image.data?.attributes.url}
+                          paragraph={item[0].attributes.Quote}
+                        />
+                      </Fragment>
+                    )}
+
+                    {typeof item[1] !== 'undefined' && (
+                      <Fragment>
+                        <TestimonialCard
+                          name={item[1].attributes.Name}
+                          role={item[1].attributes.Role}
+                          company={item[1].attributes.Company}
+                          img={api_url + item[1].attributes.Image.data?.attributes.url}
+                          paragraph={item[1].attributes.Quote}
+                        />
+                      </Fragment>
+                    )}
+                  </div>
+                ))}
             </FMCarousel>
           ) : (
             <FMCarousel>
-              <TestimonialCard
-                clientName={_data.cards[0].clientName}
-                clientRole={_data.cards[0].clientRole}
-                clientImg={_data.cards[0].clientImg}
-                imageAlt={_data.cards[0].alt}
-                paragraph={_data.cards[0].paragraph}
-              />
-              <TestimonialCard
-                clientName={_data.cards[1].clientName}
-                clientRole={_data.cards[1].clientRole}
-                clientImg={_data.cards[1].clientImg}
-                imageAlt={_data.cards[1].alt}
-                paragraph={_data.cards[1].paragraph}
-              />
-              <TestimonialCard
-                clientName={_data.cards[2].clientName}
-                clientRole={_data.cards[2].clientRole}
-                clientImg={_data.cards[2].clientImg}
-                imageAlt={_data.cards[2].alt}
-                paragraph={_data.cards[2].paragraph}
-              />
-              <TestimonialCard
-                clientName={_data.cards[3].clientName}
-                clientRole={_data.cards[3].clientRole}
-                clientImg={_data.cards[3].clientImg}
-                imageAlt={_data.cards[3].alt}
-                paragraph={_data.cards[3].paragraph}
-              />
+              {data &&
+                data.length > 0 &&
+                data.map((item, index) => (
+                  <Fragment key={index}>
+                    <TestimonialCard
+                      name={item.attributes.Name}
+                      role={item.attributes.Role}
+                      company={item.attributes.Company}
+                      img={api_url + item.attributes.Image.data?.attributes.url}
+                      paragraph={item.attributes.Quote}
+                    />
+                  </Fragment>
+                ))}
             </FMCarousel>
           )}
         </div>

frontend/src/pages/Home.jsx

@@ -34,6 +34,7 @@ import useAnalytics from '../hooks/useAnalytics';
 import ReactHelmet from '../components/shared/ReactHelmet';
 import { UIContext } from './../context/index';
 import { strapiApiBuilder } from './../utils/strapiApiBuilder';
+import TestimonialsDataLayer from '../api/TestimonialsDataLayer';
 
 const api_url = process.env.REACT_APP_API_URL;
 
@@ -137,7 +138,7 @@ export default function Home({ forwardedRef }) {
           ) : null}
 
           {/* Testimonials Section*/}
-          {data ? <Testimonials /> : null}
+          {data ? <TestimonialsDataLayer /> : null}
 
           {/* Portfolio Section*/}