home headings

frontend/src/components/PortfolioSection.jsx

@@ -34,13 +34,13 @@ const _data = {
   ],
 };
 
-function PortfolioSection() {
+function PortfolioSection({heading,cta}) {
   const linkTo = useNavigate();
 
   return (
     <Wrapper padding={' py-90p'} bg>
       <div className="py-32p">
-        <PageTitle left heading={'Case Studies'} subheading={'our Work'} />
+        <PageTitle left heading={heading.title} subheading={heading.subtitle} />
       </div>
 
       <div className="flex flex-col lg:flex-row justify-center items-center lg:justify-between gap-8">
@@ -52,7 +52,7 @@ function PortfolioSection() {
           >
             <img src={item.imgUrl} alt={item.alt} className={'mb-12'}></img>
             <h3 className="h3-heading">{item.title}</h3>
-            <button className="btn text-dg-secondary mt-4">Read More</button>
+            <button className="btn text-dg-secondary mt-4">{cta}</button>
           </a>
         ))}
       </div>

frontend/src/components/ProcessSection.jsx

@@ -1,68 +1,65 @@
-import React, { useEffect, useState } from 'react'
-import PageTitle from './shared/PageTitle'
-import {ReactComponent as ProcessSvg} from './../assets/images/Process.svg';
+import React, { useEffect, useState } from 'react';
+import PageTitle from './shared/PageTitle';
+import { ReactComponent as ProcessSvg } from './../assets/images/Process.svg';
 import Wrapper from '../layout/Wrapper';
 import { useNavigate } from 'react-router-dom';
 import ProcessSlider from './ProcessSlider';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import useWindowSize from '../hooks/useWindowSize';
 
-
 const _data = {
-    heading: "How We Do It",
-    subheading: "Our process",
-    imgUrl: "",
-    btn: "check it out"
-}
+  heading: 'How We Do It',
+  subheading: 'Our process',
+  imgUrl: '',
+  btn: 'check it out',
+};
 
-const ProcessSection = () => {
+const api_url = process.env.REACT_APP_API_URL;
 
+const ProcessSection = ({ image, imageAlt, heading, btn, mobileImages }) => {
   const [isMobile, setIsMobile] = useState(false);
 
   const windowInfo = useWindowSize();
 
   useEffect(() => {
     //console.log(windowInfo.width);
-    if (windowInfo.width < 1000) 
-    setIsMobile(true);
-    else
-    setIsMobile(false);
-  },[windowInfo]);
+    if (windowInfo.width < 1000) setIsMobile(true);
+    else setIsMobile(false);
+  }, [windowInfo]);
 
   const link = useNavigate();
 
   return (
-    <Wrapper padding={" py-90p"} hideOverflow>
-        
-        <div className='w-full'>
-        <PageTitle heading={_data.heading} subheading={_data.subheading} color left />
-        </div>
-        
-        
-        <div className="relative mx-auto my-32p md:my-90p">
-          {!isMobile ? (
-             <div className='w-full' draggable >
-                <ProcessSvg className='' />
-            </div> 
-          ) :
-          (
-            <div className='' >
-            <ProcessSlider/>
-        </div>
-          )
-        }
-           
-           
+    <Wrapper padding={' py-90p'} hideOverflow>
+      <div className="w-full">
+        {heading ? (
+          <PageTitle
+            heading={heading.title}
+            subheading={heading.subtitle}
+            color
+            left
+          />
+        ) : null}
+      </div>
+
+      <div className="relative mx-auto my-32p md:my-90p">
+        {!isMobile ? (
+          <div className="w-full">
+            {image ? <img src={api_url + image.data.attributes.url} alt={image.data.attributes.alternativeText}></img> : null}
           </div>
-          <div className='flex justify-center w-full'>
-              <button className="btn-secondary" onClick={()=>link('/process')}>{_data.btn}</button>
+        ) : (
+          <div className="">
+            <ProcessSlider images={mobileImages.data} />
           </div>
-        
-        
-    
+        )}
+      </div>
+      <div className="flex justify-center w-full">
+        <button className="btn-secondary" onClick={() => link('/process')}>
+          {btn}
+        </button>
+      </div>
     </Wrapper>
-    
-  )
-}
+  );
+};
 
-export default ProcessSection
+export default ProcessSection;

frontend/src/components/ProcessSlider.jsx

@@ -4,11 +4,11 @@ import FacelessSlider from './shared/FacelessSlider/FacelessSlider'
 import ProcessSliderWrapper from './shared/ProcessSliderWrapper'
 import ProcessFacelessSlider from './shared/ProcessFacelessSlider'
 
-const ProcessSlider = props => {
+const ProcessSlider = ({images}) => {
   return (
     <>  
         <ProcessSliderWrapper>
-            <ProcessFacelessSlider/>
+            <ProcessFacelessSlider images={images}/>
         </ProcessSliderWrapper>
         
     </>

frontend/src/components/TechStack.jsx

@@ -9,17 +9,17 @@ const _data = {
     paragraph: "And many more..."
 }
 
-function TechStack() {
+function TechStack({heading, btn}) {
   return (
     <Wrapper bg padding={" py-90p"}>
         <div className='flex flex-col gap-90p justify-center items-center'>
             <div className='w-full'>
-                <PageTitle heading={_data.heading} subheading={_data.subheading} left />
+                <PageTitle heading={heading.title} subheading={heading.subtitle} left />
             </div>
             <div className='w-full'>
                 <StackWrapper />    
             </div> 
-            <p className='paragraph'>{_data.paragraph}</p>
+            <p className='paragraph'>{btn}</p>
         </div>
         
     </Wrapper>

frontend/src/components/WhySection.jsx

@@ -61,7 +61,7 @@ const WhySection = ({ heading,cards,p1,p2 }) => {
 
         <motion.section
           id="why_us"
-          className=" flex flex-col items-center relative pt-164p pb-240p"
+          className=" flex flex-col items-center relative pt-64p lg:pt-164p pb-[144px]"
         >
           <div className="flex flex-col justify-center items-center gap-90p">
             <div className="max-w-[780px]">
@@ -81,8 +81,8 @@ const WhySection = ({ heading,cards,p1,p2 }) => {
                 transition={{ delay: 0, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                  image={cards.Card1.Icon.data.attributes.url}
-                  alt={cards.Card1.Icon.data.attributes.alternativeText}
+                  image={cards.Card1.Image.data.attributes.url}
+                  alt={cards.Card1.Image.data.attributes.alternativeText}
                   heading={cards.Card1.Title}
                   paragraph={cards.Card1.paragraph}
                 />
@@ -94,10 +94,10 @@ const WhySection = ({ heading,cards,p1,p2 }) => {
                 transition={{ delay: 0.27, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                  image={_data.card_mid.imgUrl}
-                  alt={_data.card_mid.alt}
-                  heading={_data.card_mid.heading}
-                  paragraph={_data.card_mid.paragraph}
+                  image={cards.Card2.Image.data.attributes.url}
+                  alt={cards.Card2.Image.data.attributes.alternativeText}
+                  heading={cards.Card2.Title}
+                  paragraph={cards.Card2.paragraph}
                 />
               </motion.div>
               {/* Card - right */}
@@ -107,10 +107,10 @@ const WhySection = ({ heading,cards,p1,p2 }) => {
                 transition={{ delay: 0.54, default: { duration: 0.45 } }}
               >
                 <WhyUsCard
-                  image={_data.card_right.imgUrl}
-                  alt={_data.card_right.alt}
-                  heading={_data.card_right.heading}
-                  paragraph={_data.card_right.paragraph}
+                  image={cards.Card3.Image.data.attributes.url}
+                  alt={cards.Card3.Image.data.attributes.alternativeText}
+                  heading={cards.Card3.Title}
+                  paragraph={cards.Card3.paragraph}
                 />
               </motion.div>
             </div>

frontend/src/components/shared/PageHeading.jsx

@@ -3,8 +3,10 @@ import propTypes from 'prop-types';
 export default function PageHeading(props) {
   return (
     <div className="flex flex-col gap-8p items-center justify-center">
-      <h2 className="subheading">{props.subheading}</h2>
-      <h3 className="heading text-center">{props.heading}</h3>
+      <div className="mb-32p lg:mb-64p flex flex-col gap-8p items-center justify-center">
+          <h2 className="subheading">{props.subheading}</h2>
+          <h3 className="heading text-center">{props.heading}</h3>
+      </div>
       <div className="flex flex-col gap-16p">
         <p className="paragraph text-start">{props.paragraph1}</p>
         <p className="paragraph text-start">{props.paragraph2}</p>

frontend/src/components/shared/ProcessFacelessSlider.jsx

@@ -7,9 +7,11 @@ import ProcessSvgPart1 from './../../assets/ProcessPart1.svg';
 import ProcessSvgPart2 from './../../assets/ProcessPart2.svg';
 import ProcessSvgPart3 from './../../assets/ProcessPart3.svg';
 
-const slides = [ProcessSvgPart1, ProcessSvgPart2, ProcessSvgPart3];
+const api_url = process.env.REACT_APP_API_URL;
 
-const ProcessFacelessSlider = props => {
+const ProcessFacelessSlider = ({images}) => {
+
+  const slides = [images[0].attributes,images[1].attributes, images[2].attributes];
   return (
     <SliderProvider slidesToShow={1} scrollSnap dragScroll>
       <div className={''}>
@@ -25,8 +27,8 @@ const ProcessFacelessSlider = props => {
           {slides.map((slide, index) => (
             <Slide key={index} index={index} className={'h-full'}>
               <img
-                src={slide}
-                alt={`step ${index + 1}`}
+                src={api_url + slide.url}
+                alt={slide.alternativeText}
                 className={'h-full mx-auto'}
               ></img>
             </Slide>

frontend/src/pages/Home.jsx

@@ -35,46 +35,68 @@ import ReactHelmet from '../components/shared/ReactHelmet';
 import { strapiApiBuilder } from '../utils/strapiApiBuilder';
 
 const api_url = process.env.REACT_APP_API_URL;
-const fieldArray = [
-  'landing',
-  'why',
-  'why.heading',
-  'why.card_left.icon',
-  'why.card_mid.icon',
-  'why.card_right.icon',
-  'landing.heading',
+// const fieldArray = [
+//   'landing',
+//   'why',
+//   'why.heading',
+//   'why.card_left.icon',
+//   'why.card_mid.icon',
+//   'why.card_right.icon',
+//   'landing.heading',
+//   'SEO',
+//   'SEO.metaSocial',
+//   'SEO.metaImage',
+//   'SEO.metaSocial.image',
+// ];
+
+
+const strapiPopulate = [
+  'Heading',
+  'Heading.subtitle',
+  'Heading.title',
+  'WhyUsHeading',
+  'Cards',
+  'Cards.Card1',
+  'Cards.Card1.Image',
+  'Cards.Card2',
+  'Cards.Card2.Image',
+  'Cards.Card3',
+  'Cards.Card3.Image',
+  'HeroNumbers',
+  'HeroNumbers.number',
+  'ProcessHeading',
+  'ProcessImage',
+  'TechStackHeading',
+  'ProcessMobileImg',
+  'ProcessMobileImg.Image',
+  'CaseStudies',
+  'BusinessInquiry',
+  'BusinessInquiry.image',
+  'ApplyPosition',
+  'ApplyPosition.image',
+  'Map',
   'SEO',
   'SEO.metaSocial',
   'SEO.metaImage',
   'SEO.metaSocial.image',
 ];
 
-
-// const strapiPopulate = [
-//   'Heading',
-//   'Heading.subtitle',
-//   'Heading.title',
-//   'WhyUsHeading',
-//   'Cards',
-//   'Cards.Card1',
-//   'Cards.Card1.Icon',
-//   'Cards.Card2',
-//   'Cards.Card2.Icon',
-//   'Cards.Card3',
-//   'Cards.Card3.Icon',
-//   'HeroNumbers',
-//   'HeroNumbers.number',
-// ];
+const stringBuilder = () => {
+  let stringQuery = '';
+  strapiPopulate.map((item, index) => {
+    if (index !== 0) stringQuery += '&';
+    stringQuery += `populate=${item}`;
+  });
+  return stringQuery;
+};
 
 export default function Home({ forwardedRef }) {
   const [cnt, setCnt] = useState('');
-  const [landingData, setLandingData] = useState(null);
-  const [cardData, setCardData] = useState(null);
 
   const [contactRef, setRef] = useState(forwardedRef);
 
   const [{ data, isLoading, isError }, doFetch] = useDataApi(
-    `${api_url}/api/w-home-page?${stringBuilder(fieldArray)}`,
+    `${api_url}/api/w-home-page?${stringBuilder()}`,
   );
   const [contactElement, setContactElement] = useState(0);
 
@@ -86,28 +108,8 @@ export default function Home({ forwardedRef }) {
 
   useEffect(() => {
     console.log(data);
-    setLandingData(data?.Heading);
   }, [data]);
 
-  // useEffect(() => {
-  //   var vid = document.getElementById('animation');
-  //   vid.playbackRate = 2;
-  //   axios
-  //     .get(
-  //       `${api_url}/api/homepage?populate[0]=landing&populate[1]=why&populate[2]=why.heading&populate[3]=why.card_left.icon&populate[4]=why.card_mid.icon&populate[5]=why.card_right.icon&populate[6]=why.card_left.icon&populate[7]=why.card_mid.icon&populate[8]=why.card_right.icon&populate[9]=landing.heading`,
-  //       // api/homepage?&populate[0]=why&populate[1]=why.heading&populate[2]=why.card_left.icon&populate[3]=why.card_mid.icon&populate[4]=why.card_right.icon&populate[5]=why.card_left.icon&populate[6]=why.card_mid.icon&populate[7]=why.card_right.icon
-  //     )
-  //     .then(res => {
-  //       setCnt(res.data.data.attributes);
-  //       //console.log(res)
-  //       setIsLoaded(true);
-  //     })
-  //     .catch(err => {
-  //       console.log(err);
-  //       setIsLoaded(false);
-  //     });
-  // }, []);
-
   useEffect(() => {
     const url = window.location.pathname;
     const h = window.document.body.offsetHeight;
@@ -141,32 +143,48 @@ export default function Home({ forwardedRef }) {
     </Tab.Group> */}
 
           {/* Landing Section */}
-          <Landing data={cnt.landing.heading} />
+          {data ?
+           <Landing heading={data.Heading} numbers={data.HeroNumbers.number} paragraph={data.paragraph} button={data.button} />
+           : null
+          }
+          
 
           {/* Why Us Section */}
-          <WhySection data={cnt.why} />
+          {data ?
+             <WhySection heading={data.WhyUsHeading} p1={data.WhyUsParagraph1} p2={data.WhyUsParagraph2} cards={data.Cards} /> 
+           : null
+          }
+          
 
           {/* Our Services Section */}
           {/* <ServicesHome /> */}
 
           {/* Our Process Section */}
-          <ProcessSection />
+          
+          {data ?
+             <ProcessSection heading={data.ProcessHeading} btn={data.ProcessCTA} image={data.ProcessImage} mobileImages={data.ProcessMobileImg.Image} />
+           : null
+          }
 
           {/* Our Process Section */}
-          <TechStack />
+          {data ?
+             <TechStack heading={data.TechStackHeading} btn={data.TechStackCTA} />
+           : null
+          }
+          
 
           {/* Testimonials Section*/}
-          <Testimonials />
-
-          {/* Social Networks Section */}
-          {/* <section
-          id="socials"
-          className="h-fit bg-white dark:bg-dg-primary-1700 flex flex-col items-center px-4"
-        >
-          <SocialNetworks />
-        </section> */}
-
-          <PortfolioSection />
+          {data ?
+             <Testimonials />
+           : null
+          }
+
+          {/* Portfolio Section*/}
+          
+          {data ?
+             <PortfolioSection heading={data.CaseStudies} cta={data.CtaForCaseStudiesCards} />
+           : null
+          }
 
           {/* Contact Section */}
           <section id="contact" className="" ref={forwardedRef}>