From c5d582a34b595d6c1bbabbff97b00e848e272cbc Mon Sep 17 00:00:00 2001
From: yuval-hazaz <hazaz.yuval@gmail.com>
Date: Wed, 24 Apr 2024 17:59:53 +0300
Subject: [PATCH] feat:description items stripe

---
 components/Common/Button/index.jsx            |  6 +-
 components/Common/DescriptionStripe/index.jsx | 88 +++++++++++++++++++
 .../ModernizationValues/index.jsx             | 29 +-----
 .../ModernizationValues2/index.jsx            | 80 ++++-------------
 4 files changed, 110 insertions(+), 93 deletions(-)
 create mode 100644 components/Common/DescriptionStripe/index.jsx

diff --git a/components/Common/Button/index.jsx b/components/Common/Button/index.jsx
index 3052e2da..bd632004 100644
--- a/components/Common/Button/index.jsx
+++ b/components/Common/Button/index.jsx
@@ -5,9 +5,9 @@ import { useCallback } from 'react';
 
 // Background Colors
 const ButtonColorsConfig = {
-  purpleDark: 'bg-purple-dark hover:bg-purple-bright-hover',
-  purpleBright: 'bg-purple-bright',
-  purpleBrightHover: 'hover:bg-purple-bright-hover',
+  purpleDark: '!bg-purple-dark !hover:bg-purple-bright-hover',
+  purpleBright: '!bg-purple-bright',
+  purpleBrightHover: '!hover:bg-purple-bright-hover',
   transparent: 'bg-transparent hover:bg-purple-bright-hover',
 };
 
diff --git a/components/Common/DescriptionStripe/index.jsx b/components/Common/DescriptionStripe/index.jsx
new file mode 100644
index 00000000..ec589789
--- /dev/null
+++ b/components/Common/DescriptionStripe/index.jsx
@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import Image from 'next/image';
+import * as analytics from '../../../lib/analytics';
+import PrimaryButton from '../Button/button-primary';
+import PropTypes from 'prop-types';
+
+const DescriptionStripe = ({ items, ctaItem }) => {
+  const handleCtaClick = useCallback(() => {
+    analytics.event({
+      action: ctaItem.buttonEvent.action,
+      params: ctaItem.buttonEvent.params,
+    });
+  }, [ctaItem]);
+
+  return (
+    <>
+      <div>
+        <div className="flex gap-10 flex-row flex-wrap justify-around items-start ">
+          {items.map((item, index) => {
+            return (
+              <div
+                className=" flex  flex-column items-center  text-center! max-w-[350px]"
+                key={index}
+              >
+                <div className="flex min-w-[60px] max-w-[60px] h-[60px]">
+                  <Image src={item.image} alt={item.title} />
+                </div>
+
+                <div className=" text-lg text-white leading-[25px] !font-semibold !max-w-full !mt-[.75rem] pb-2">
+                  {item.title}
+                </div>
+                <div className=" text-sm text-center text-white font-regular ">
+                  {item.content}
+                </div>
+              </div>
+            );
+          })}
+          {ctaItem && (
+            <div className="gap-6 py-10 px-5 flex bg-dark-black-100 border rounded-xl border-dark-black-70 flex-col items-center  text-center! max-w-[350px]">
+              <div>
+                <div className=" text-lg text-center  text-white leading-[25px] !font-semibold !max-w-full !mt-[.75rem] pb-2">
+                  {ctaItem.title}
+                </div>
+                <div className=" text-sm text-center text-white font-regular ">
+                  {ctaItem.content}
+                </div>
+              </div>
+              <PrimaryButton
+                text={ctaItem.buttonTitle}
+                isLink={true}
+                onClick={handleCtaClick}
+                href={ctaItem.buttonLink}
+                target="_blank"
+                delayLinkMs={300}
+              ></PrimaryButton>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+DescriptionStripe.propTypes = {
+  items: PropTypes.arrayOf({
+    image: PropTypes.node,
+    title: PropTypes.string,
+    content: PropTypes.string,
+  }),
+
+  ctaItem: PropTypes.shape({
+    title: PropTypes.string,
+    content: PropTypes.string,
+    buttonLink: PropTypes.string,
+    buttonTitle: PropTypes.string,
+    buttonEvent: PropTypes.shape({
+      action: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  }),
+};
+
+DescriptionStripe.defaultProps = {
+  items: [],
+  ctaItem: undefined,
+};
+
+export default DescriptionStripe;
diff --git a/components/Sections/Modernization/ModernizationValues/index.jsx b/components/Sections/Modernization/ModernizationValues/index.jsx
index fc9b5c89..bd3ede25 100644
--- a/components/Sections/Modernization/ModernizationValues/index.jsx
+++ b/components/Sections/Modernization/ModernizationValues/index.jsx
@@ -2,6 +2,7 @@ import Image from 'next/image';
 import Feature1 from '../../../../public/images/modernization/faster.svg';
 import Feature2 from '../../../../public/images/modernization/save-cost.svg';
 import Feature3 from '../../../../public/images/modernization/flexible.svg';
+import DescriptionStripe from '../../../Common/DescriptionStripe';
 
 const items = [
   {
@@ -24,33 +25,7 @@ const items = [
   },
 ];
 const ModernizationValues = () => {
-  return (
-    <>
-      <div>
-        <div className="flex gap-10 flex-row flex-wrap justify-content-around align-items-start ">
-          {items.map((item, index) => {
-            return (
-              <div
-                className=" flex  flex-column align-items-center  text-center! max-w-[350px]"
-                key={index}
-              >
-                <div className="flex min-w-[60px] max-w-[60px] h-[60px]">
-                  <Image src={item.image} alt={item.title} />
-                </div>
-
-                <div className=" text-lg text-white leading-[25px] !font-semibold !max-w-full !mt-[.75rem] pb-2">
-                  {item.title}
-                </div>
-                <div className=" text-sm text-center text-white font-regular ">
-                  {item.content}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </>
-  );
+  return <DescriptionStripe items={items} />;
 };
 
 export default ModernizationValues;
diff --git a/components/Sections/Modernization/ModernizationValues2/index.jsx b/components/Sections/Modernization/ModernizationValues2/index.jsx
index 7777686e..6bb347a0 100644
--- a/components/Sections/Modernization/ModernizationValues2/index.jsx
+++ b/components/Sections/Modernization/ModernizationValues2/index.jsx
@@ -1,9 +1,6 @@
-import { useCallback } from 'react';
-import Image from 'next/image';
-import Feature1 from '../../../../public/images/modernization/production-ready.svg';
 import Feature2 from '../../../../public/images/modernization/graph.svg';
-import * as analytics from '../../../../lib/analytics';
-import Link from 'next/link';
+import Feature1 from '../../../../public/images/modernization/production-ready.svg';
+import DescriptionStripe from '../../../Common/DescriptionStripe';
 
 const items = [
   {
@@ -19,66 +16,23 @@ const items = [
       'Deliver robust and future-proof applications. Amplication-generated code is error-free, based on best practices and built-in standards, ensuring optimal performance.',
   },
 ];
-const ModernizationValues2 = () => {
-  const handleBookDemoClick = useCallback(() => {
-    analytics.event({
-      action: 'bookDemoClicked',
-      params: {
-        buttonLocation: 'application-modernization',
-      },
-    });
-  }, []);
 
-  return (
-    <>
-      <div>
-        <div className="flex gap-10 flex-row flex-wrap justify-content-around align-items-start ">
-          {items.map((item, index) => {
-            return (
-              <div
-                className=" flex  flex-column align-items-center  text-center! max-w-[350px]"
-                key={index}
-              >
-                <div className="flex min-w-[60px] max-w-[60px] h-[60px]">
-                  <Image src={item.image} alt={item.title} />
-                </div>
+const ctaItem = {
+  title: 'Revolutionize Your Legacy Services Today',
+  content:
+    'Learn how Amplication can help modernize your legacy systems and fast-track your digital transformation.',
+  buttonTitle: 'Book a Demo',
+  buttonLink: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+  buttonEvent: {
+    action: 'bookDemoClicked',
+    params: {
+      buttonLocation: 'application-modernization',
+    },
+  },
+};
 
-                <div className=" text-lg text-white leading-[25px] !font-semibold !max-w-full !mt-[.75rem] pb-2">
-                  {item.title}
-                </div>
-                <div className=" text-sm text-center text-white font-regular ">
-                  {item.content}
-                </div>
-              </div>
-            );
-          })}
-          <div className="gap-6 py-10 px-5 flex bg-dark-black-100 border rounded-xl border-dark-black-70 flex-column align-items-center  text-center! max-w-[350px]">
-            <div>
-              <div className=" text-lg text-center  text-white leading-[25px] !font-semibold !max-w-full !mt-[.75rem] pb-2">
-                Revolutionize Your Legacy Services Today
-              </div>
-              <div className=" text-sm text-center text-white font-regular ">
-                Learn how Amplication can help modernize your legacy systems and
-                fast-track your digital transformation.
-              </div>
-            </div>
-            <Link
-              href={process.env.NEXT_PUBLIC_BOOK_MEETING_URL}
-              passHref={true}
-            >
-              <a
-                target="_blank"
-                onClick={handleBookDemoClick}
-                className="btn btn-primary btn-sm !h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px]"
-              >
-                Book a Demo
-              </a>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </>
-  );
+const ModernizationValues2 = () => {
+  return <DescriptionStripe items={items} ctaItem={ctaItem} />;
 };
 
 export default ModernizationValues2;