casestudy;

frontend/src/components/shared/TechNuggets.jsx

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

frontend/src/pages/CaseStudyBI.jsx

 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
+import Wrapper from '../layout/Wrapper';
+import TechNuggets from '../components/shared/TechNuggets';
+import {motion} from 'framer-motion';
+
+const numbers = [
+  {
+    value: 7,
+    static: '+',
+    title: 'Team Members'
+  },
+  {
+    value: 100,
+    static: '+',
+    title: 'Users'
+  },
+  {
+    value: 100,
+    static: '+',
+    title: 'Transactions per Year'
+  }
+]
 
 const _data = {
   heading: {
     subheading: 'Case Study',
-    heading: 'BI Healthcare Solution',
+    heading: 'Bi Healthcare Solution',
     imgUrl:
       'https://lh3.googleusercontent.com/QkLcHNOGmWIB2t3fwZd69ZwJpHOYcTTAPmPs4zbjErDbp9nXbTw0vhktPCuCM2EWZUU=w2400',
     paragraph:
         </div>
       </section>
 
+      <Wrapper padding={' py-90p'}>
+      <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' }}
+        >
+          {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>
+      </Wrapper>
+
       {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
+      <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">
           <div className="w-full md:w-1/2">
             <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>
       {/* Technologies Section */}
       <section
         id="technologies"
-        className="flex flex-col items-center justify-center mt-16"
+        className="flex flex-col 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="my-8 flex flex-col justify-center w-full max-w-custom m-auto px-8 xl:px-0">
           <div className="w-full">
             <h3 className="h3-heading">Technologies</h3>
           </div>
-          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
-          </div>
+          <TechNuggets tech={['.Net','Power BI','Power Automate','MSSQL','Data Factory']}/>
         </div>
       </section>
 

frontend/src/pages/CaseStudyCentralized.jsx

 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
+import Wrapper from '../layout/Wrapper';
+import {motion} from 'framer-motion';
+import TechNuggets from '../components/shared/TechNuggets';
+
+const numbers = [
+  {
+    value: 6,
+    static: '+',
+    title: 'Team Members',
+  },
+  {
+    value: 18,
+    static: '+',
+    title: 'Months Project Duration',
+  },
+  {
+    value: '9m',
+    static: '+',
+    title: 'Transactions per Year',
+  },
+];
 
 const _data = {
   heading: {
   challanges: {
     heading: 'Challanges',
     paragraph:
-      "Some of them didn't even have open API-s, some of them required an extra set of rules, and some of them were still in development. This made integration difficult and time-consuming. However, we were eventually able to overcome these challenges and provide our users with a seamless experience.",
+      'Some of them didn\'t even have open API-s, some of them required an extra set of rules, and some of them were still in development. This made integration difficult and time-consuming. However, we were eventually able to overcome these challenges and provide our users with a seamless experience.',
   },
 
   solution: {
 
   return (
     <PageLayout>
-    <div className="bg-baby-blue dark:bg-dg-primary-1700 w-full pt-20 md:pt-24">
-      {/* Heading Section */}
-      <section
+      <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 relative bg-cover bg-[url('https://lh4.googleusercontent.com/P93dPcW2bzA11uz2IhXYmSfEUQRzXjmeIH0HXv88s-dUmHQdtPtNonxeR-h0wqoPeMU=w2400')] bg-no-repeat"}
+        className={'flex flex-col items-center justify-center m-auto py-16 md:py-32 relative bg-cover bg-[url(\'https://lh4.googleusercontent.com/P93dPcW2bzA11uz2IhXYmSfEUQRzXjmeIH0HXv88s-dUmHQdtPtNonxeR-h0wqoPeMU=w2400\')] bg-no-repeat'}
       >
-        <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
-          <div className="w-full">
-            <h6 className="subheading">{_data.heading.subheading}</h6>
-            <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
-            <p className="paragraph mt-4">{_data.heading.paragraph}</p>
-          </div>
-        </div>
-      </section>
-
-      {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
-        <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">
-          <div className="w-full md:w-1/2">
-            <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>
-            <p className="paragraph mt-4">{_data.about.paragraph}</p>
+          <div className="my-8 flex flex-col md:flex-row justify-start items-center w-full max-w-custom px-8 xl:px-0">
+            <div className="w-full">
+              <h6 className="subheading">{_data.heading.subheading}</h6>
+              <h1 className="heading text-dg-secondary mt-2">{_data.heading.heading}</h1>
+              <p className="paragraph mt-4">{_data.heading.paragraph}</p>
+            </div>
           </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>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.country_heading}
-              </h5>
-              <p className="mt-4">{_data.about.country_name}</p>
+        </section>
+
+        {/* <Wrapper  padding={' py-90p'}>
+      <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' }}
+        >
+          {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>
-            <div className="float-left md:float-right text-left md:text-right">
-              <h5 className="text-teal-600 font-semibold">
-                {_data.about.industry_heading}
-              </h5>
-              <p className="mt-4">{_data.about.industry_name}</p>
+          ))}
+        </motion.section>
+      </Wrapper> */}
+
+        {/* About the Client Section */}
+        <section id="client" className="flex flex-col items-center justify-center mt-16">
+          <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">
+            <div className="w-full md:w-1/2">
+              <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>
+              <p className="paragraph mt-4">{_data.about.paragraph}</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>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h5 className="text-teal-600 font-semibold">
+                  {_data.about.country_heading}
+                </h5>
+                <p className="mt-4">{_data.about.country_name}</p>
+              </div>
+              <div className="float-left md:float-right text-left md:text-right">
+                <h5 className="text-teal-600 font-semibold">
+                  {_data.about.industry_heading}
+                </h5>
+                <p className="mt-4">{_data.about.industry_name}</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-
-      {/* Domain Section */}
-      <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.domain.heading}</h3>
-            <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+        </section>
+
+        {/* Domain Section */}
+        <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.domain.heading}</h3>
+              <p className="paragraph mt-4">{_data.domain.paragraph}</p>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Challanges, Solution Section */}
-      <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">
-            <div>
-              <h3 className="h3-heading">{_data.challanges.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.challanges.paragraph}
-              </p>
-            </div>
-            <div className="mt-8">
-              <h3 className="h3-heading">{_data.solution.heading}</h3>
-              <p className="text-sm text-dark-gray dark:text-white mt-4">
-                {_data.solution.paragraph}
-              </p>
+          <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">
+              <div>
+                <h3 className="h3-heading">{_data.challanges.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.challanges.paragraph}
+                </p>
+              </div>
+              <div className="mt-8">
+                <h3 className="h3-heading">{_data.solution.heading}</h3>
+                <p className="text-sm text-dark-gray dark:text-white mt-4">
+                  {_data.solution.paragraph}
+                </p>
+              </div>
             </div>
-          </div>
-          <img
+            <img
             src={_data.solution.imgUrl}
             alt="Case Study main image"
             className="text-center w-full md:w-1/2"
           />
-        </div>
-      </section>
-
-      {/* Results Section */}
-      <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.results.heading}</h3>
-            <ul className="list-disc paragraph mt-2 pl-8">
-              {_data.results.list.map(item => (
-                <li key={item.id}>{item.text}</li>
+          </div>
+        </section>
+
+        {/* Results Section */}
+        <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.results.heading}</h3>
+              <ul className="list-disc paragraph mt-2 pl-8">
+                {_data.results.list.map(item => (
+                  <li key={item.id}>{item.text}</li>
               ))}
-            </ul>
+              </ul>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Technologies Section */}
-      <section
+        {/* Technologies Section */}
+        <section
         id="technologies"
-        className="flex flex-col items-center justify-center mt-16"
+        className="flex flex-col items-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">Technologies</h3>
-          </div>
-          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
+          <div className="my-8 flex flex-col items-center w-full max-w-custom m-auto px-8 xl:px-0">
+            <div className="w-full">
+              <h3 className="h3-heading">Technologies</h3>
+            </div>
+            <TechNuggets tech={['.Net']}/>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* CTA Section */}
-      <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
+        {/* CTA Section */}
+        <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="Let's Work Together!"
             text="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."
             btn1="More Projects"
             link1={'/portfolio'}
             link2={'/contact'}
           />
-        </div>
-      </section>
-    </div>
+          </div>
+        </section>
+      </div>
     </PageLayout>
   );
 }

frontend/src/pages/CaseStudyFinantial.jsx

 import angular from './../assets/icons/caseStudy/angular.svg';
 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import { useEffect } from 'react';
+import {motion} from 'framer-motion';
+import Wrapper from '../layout/Wrapper';
+import TechNuggets from '../components/shared/TechNuggets';
+const numbers = [
+  {
+    value: 5,
+    static: '+',
+    title: 'Team Members'
+  },
+  {
+    value: 3,
+    static: '+',
+    title: 'Years Project Duration'
+  },
+  {
+    value: '1,6m',
+    static: '+',
+    title: 'Transactions per Year'
+  }
+]
 
 const _data = {
   heading: {
         </div>
       </section>
 
+      <Wrapper padding={' py-90p'}>
+      <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' }}
+        >
+          {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>
+      </Wrapper>
+
       {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
+      <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">
           <div className="w-full md:w-1/2">
             <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>
           <div className="w-full">
             <h3 className="h3-heading">Technologies</h3>
           </div>
-          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
-          </div>
+          <TechNuggets tech={['.Net','Angular','MSSQL']}/>
         </div>
       </section>
 

frontend/src/pages/CaseStudyResource.jsx

 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import dataFactory from './../assets/icons/caseStudy/data-factory.svg';
 import { useEffect } from 'react';
+import {motion} from 'framer-motion';
+import Wrapper from '../layout/Wrapper';
+
+const numbers = [
+  {
+    value: 6,
+    static: '+',
+    title: 'Team Members'
+  },
+  {
+    value: 6,
+    static: '+',
+    title: 'Months Project duration'
+  },
+]
 
 const _data = {
   heading: {
         </div>
       </section>
 
+      <Wrapper  padding={' py-90p'}>
+      <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' }}
+        >
+          {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>
+      </Wrapper>
+
       {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
+      <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">
           <div className="w-full md:w-1/2">
             <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>

frontend/src/pages/CaseStudyStrata.jsx

 import react from './../assets/icons/caseStudy/react-native.svg';
 import mssql from './../assets/icons/caseStudy/MSSQL.svg';
 import { useEffect } from 'react';
+import {motion} from 'framer-motion';
+import Wrapper from '../layout/Wrapper';
+
+const numbers = [
+  {
+    value: 5,
+    static: '+',
+    title: 'Team Members'
+  },
+  {
+    value: '3',
+    static: '+',
+    title: 'Years Project duration'
+  },
+  {
+    value: '1,6m',
+    static: '+',
+    title: 'Transactions per Year'
+  }
+]
 
 const _data = {
   heading: {
         </div>
       </section>
 
+      {/* <Wrapper  padding={' py-90p'}>
+      <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' }}
+        >
+          {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>
+      </Wrapper> */}
+
       {/* About the Client Section */}
       <section id="client" className="flex flex-col items-center justify-center mt-16">
         <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">

frontend/src/pages/CaseStudyTicketing.jsx

 import ActionCard from '../components/shared/ActionCard';
 import PageLayout from '../layout/PageLayout';
-
+import Wrapper from '../layout/Wrapper';
 import net from './../assets/icons/caseStudy/net.svg';
 import angular from './../assets/icons/caseStudy/angular.svg';
 import java from './../assets/icons/caseStudy/java.svg';
 import raspberry from './../assets/icons/caseStudy/raspberrypi.svg';
 import ionic from './../assets/icons/caseStudy/ionic.svg';
 import { useEffect } from 'react';
+import {motion} from 'framer-motion';
+import TechNuggets from '../components/shared/TechNuggets';
+const numbers = [
+  {
+    value: 10,
+    static: '+',
+    title: 'Projects'
+  },
+  {
+    value: 10,
+    static: '+',
+    title: 'Years Project Duration'
+  },
+  {
+    value: '1,5m',
+    static: '+',
+    title: 'Transactions per Year'
+  }
+]
 
 const _data = {
   heading: {
         </div>
       </section>
 
+      <Wrapper  padding={' py-90p'}>
+      <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>
+      </Wrapper>
+
       {/* About the Client Section */}
-      <section id="client" className="flex flex-col items-center justify-center mt-16">
+      <section id="client" className="flex flex-col items-start 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">
           <div className="w-full md:w-1/2">
             <h3 className="h3-heading text-teal-600">{_data.about.heading}</h3>
           <div className="w-full">
             <h3 className="h3-heading">Technologies</h3>
           </div>
-          <div className="grid grid-cols-4 justify-center justify-items-center gap-8 xl:flex xl:flex-row items-center xl:justify-start xl:gap-16 w-full mt-8">
-            {_data.technologies.map(technology => (
-              <img
-                key={technology.id}
-                src={technology.link}
-                alt="Technology's image"
-                className="w-12 md:w-16 lg:w-20"
-              />
-            ))}
-          </div>
+         <TechNuggets tech={['.Net','Angular','Java','MSSQL','Ionic','Raspberry PI']}/>
         </div>
       </section>