Industries (#448)

* create pageHero and styled buttons

* create retail page

* hero responsive style

* add lottie animation for industry pages

components/Common/Button/button-outline.jsx

@@ -0,0 +1,14 @@
+import Button from '../Button';
+
+const OutlineButton = ({ className, ...props }) => {
+  return (
+    <Button
+      {...props}
+      className={`!h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px] text-black80 whitespace-nowrap border border-white hover:bg-light hover:text-dark-black-100 ${className}`}
+    />
+  );
+};
+
+OutlineButton.propTypes = Button.propTypes;
+
+export default OutlineButton;

components/Common/Button/button-primary.jsx

@@ -0,0 +1,14 @@
+import Button from '../Button';
+
+const PrimaryButton = ({ className, ...props }) => {
+  return (
+    <Button
+      {...props}
+      className={`!h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px] text-black80 whitespace-nowrap border border-purple-bright hover:bg-purple-bright-hover hover:border-purple-bright-hover ${className}`}
+    />
+  );
+};
+
+PrimaryButton.propTypes = Button.propTypes;
+
+export default PrimaryButton;

components/Common/PageHero/index.jsx

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+import * as analytics from '../../../lib/analytics';
+import OutlineButton from '../../Common/Button/button-outline';
+import PrimaryButton from '../../Common/Button/button-primary';
+
+const PageHero = ({
+  title,
+  subTitle,
+  subText,
+  mainButton,
+  secondaryButton,
+  imageNode,
+}) => {
+  const handleMainClick = useCallback(() => {
+    analytics.event({
+      action: mainButton.eventName,
+      params: mainButton.eventParams,
+    });
+  }, [mainButton.eventName, mainButton.eventParams]);
+
+  const handleSecondaryClick = useCallback(() => {
+    analytics.event({
+      action: secondaryButton.eventName,
+      params: secondaryButton.eventParams,
+    });
+  }, [secondaryButton.eventName, secondaryButton.eventParams]);
+  return (
+    <>
+      <div className="relative w-full flex flex-col laptop:flex-row items-center  justify-between  laptop:h-[calc(100vh-90px)] text-center min-h-[600px]">
+        <div className="laptop:!max-w-[50%]">
+          <div className="text-center laptop:text-left mt-12 laptop:mt-0 max-w-[500px] laptop:max-w-[none]">
+            <h1 className="text-2xl laptop:text-4xl desktop:text-5xl font-bold ">
+              {title}
+            </h1>
+            <h2 className="text-lg laptop:text-2xl desktop:text-3xl  font-semibold">
+              {subTitle}
+            </h2>
+            <div className="text-sm laptop:text-base large:text-lg text-white !mt-3 !mb-4 !max-w-[710px]">
+              {subText}
+            </div>
+          </div>
+          <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-2 gap-4">
+            <PrimaryButton
+              text={mainButton.text}
+              backgroundColor="purpleBright"
+              hoverBackgroundColor="purpleBrightHover"
+              isLink={true}
+              onClick={handleMainClick}
+              href={mainButton.href}
+              delayLinkMs={300}
+            />
+            <OutlineButton
+              text="Try Free"
+              isLink={true}
+              onClick={handleSecondaryClick}
+              href={'https://app.amplication.com/login'}
+              delayLinkMs={300}
+            />
+          </div>
+        </div>
+        <div className="relative items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex medium:!max-w-[46%]">
+          <div className="absolute laptop:my-auto w-[50vw] -left-16 max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center">
+            {imageNode}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+PageHero.propTypes = {
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  subText: PropTypes.string,
+  mainButton: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    eventName: PropTypes.string,
+    eventParams: PropTypes.object,
+  }),
+  secondaryButton: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    eventName: PropTypes.string,
+    eventParams: PropTypes.object,
+  }),
+  imageNode: PropTypes.node,
+};
+
+export default PageHero;

components/Sections/Industries/healthcare-hero.jsx

@@ -0,0 +1,36 @@
+import PageHero from '../../Common/PageHero';
+import Lottie from 'lottie-react';
+import { data } from '../../../lottie/healthcare';
+
+const RetailHero = () => {
+  return (
+    <>
+      <PageHero
+        title={'Modernize Your Healthcare Management with Amplication'}
+        subTitle={
+          'Streamline, optimize, and boost your healthcare operations with Amplication. '
+        }
+        subText={''}
+        mainButton={{
+          text: 'Book a Demo',
+          href: '/contact-us',
+          eventName: 'bookDemoClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        secondaryButton={{
+          text: 'Try Free',
+          href: 'https://app.amplication.com/login',
+          eventName: 'startNowClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        imageNode={<Lottie animationData={data} loop={true} />}
+      />
+    </>
+  );
+};
+
+export default RetailHero;

components/Sections/Industries/manufacturing-hero.jsx

@@ -0,0 +1,38 @@
+import PageHero from '../../Common/PageHero';
+import Lottie from 'lottie-react';
+import { data } from '../../../lottie/manufacturing';
+
+const RetailHero = () => {
+  return (
+    <>
+      <PageHero
+        title={
+          'Amplication for Manufacturing: Automate Your Path to Digital Transformation'
+        }
+        subTitle={
+          'Automate, optimize, and scale your manufacturing operations with tailor-made digital solutions.'
+        }
+        subText={''}
+        mainButton={{
+          text: 'Book a Demo',
+          href: '/contact-us',
+          eventName: 'bookDemoClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        secondaryButton={{
+          text: 'Try Free',
+          href: 'https://app.amplication.com/login',
+          eventName: 'startNowClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        imageNode={<Lottie animationData={data} loop={true} />}
+      />
+    </>
+  );
+};
+
+export default RetailHero;

components/Sections/Industries/retail-hero.jsx

@@ -0,0 +1,38 @@
+import PageHero from '../../Common/PageHero';
+import Lottie from 'lottie-react';
+import animationData from '../../../lottie/retail.json';
+
+const RetailHero = () => {
+  return (
+    <>
+      <PageHero
+        title={
+          "Amplication for Retail: Digital Solutions for Tomorrow's Retailers"
+        }
+        subTitle={
+          'Build tailor-made applications for your retail operations and leap ahead of the competition.'
+        }
+        subText={''}
+        mainButton={{
+          text: 'Book a Demo',
+          href: '/contact-us',
+          eventName: 'bookDemoClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        secondaryButton={{
+          text: 'Try Free',
+          href: 'https://app.amplication.com/login',
+          eventName: 'startNowClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        imageNode={<Lottie animationData={animationData} loop={true} />}
+      />
+    </>
+  );
+};
+
+export default RetailHero;