Feat/hp hero v2 (#466)

* fix:hero button * update main hero * style:hp * feat:update hero layout
amplication · Apr 15, 2024 · 589dbe2 · 589dbe2
1 parent c870f0a
commit 589dbe2
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 8 deletions.
diff --git a/components/Common/PageHero/index.jsx b/components/Common/PageHero/index.jsx
@@ -38,7 +38,7 @@ const PageHero = ({
               {subText}
             </div>
           </div>
-          <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-2 gap-4">
+          <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-4 gap-4">
             {mainButton && (
               <PrimaryButton
                 text={mainButton.text}

diff --git a/components/Common/PageHero/vertical-hero.jsx b/components/Common/PageHero/vertical-hero.jsx
@@ -0,0 +1,93 @@
+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 VerticalPageHero = ({
+  title,
+  subTitle,
+  subText,
+  mainButton,
+  secondaryButton,
+  imageNode,
+}) => {
+  const handleMainClick = useCallback(() => {
+    analytics.event({
+      action: mainButton?.eventName,
+      params: mainButton?.eventParams,
+    });
+  }, [mainButton]);
+
+  const handleSecondaryClick = useCallback(() => {
+    analytics.event({
+      action: secondaryButton?.eventName,
+      params: secondaryButton?.eventParams,
+    });
+  }, [secondaryButton]);
+  return (
+    <>
+      <div className="relative w-full flex flex-col items-center justify-between  text-center min-h-[600px] gap-8 ">
+        <div className="laptop:!max-w-[800px]">
+          <div className=" flex flex-col gap-2 text-center items-center mt-32 max-w-[500px] laptop:max-w-[none]">
+            <h1 className="text-4xl desktop:text-5xl font-semibold ">
+              {title}
+            </h1>
+            <h2 className="text-2xl desktop:text-3xl  font-semibold">
+              {subTitle}
+            </h2>
+            <div className="text-base desktop:text-lg text-white  !max-w-[710px]">
+              {subText}
+            </div>
+          </div>
+          <div className="flex items-center justify-center   mt-8 gap-4">
+            {mainButton && (
+              <PrimaryButton
+                text={mainButton.text}
+                backgroundColor="purpleBright"
+                hoverBackgroundColor="purpleBrightHover"
+                isLink={true}
+                onClick={handleMainClick}
+                href={mainButton.href}
+                delayLinkMs={300}
+              />
+            )}
+            {secondaryButton && (
+              <OutlineButton
+                text={secondaryButton.text}
+                isLink={true}
+                onClick={handleSecondaryClick}
+                href={secondaryButton.href}
+                delayLinkMs={300}
+              />
+            )}
+          </div>
+        </div>
+        <div className="relative flex items-center max-w-[600px] mb-8 w-full laptop:min-h-[600px] laptop:!max-w-[46%] laptop:mb-0 ">
+          <div className="">{imageNode}</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+VerticalPageHero.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  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 VerticalPageHero;
diff --git a/components/Sections/Enterprise/HeroBlock/index.jsx b/components/Sections/Enterprise/HeroBlock/index.jsx
@@ -25,16 +25,15 @@ const HeroBlock = () => {
   return (
     <>
       <PageHero
-        title={
+        title={<>The Fastest Way in the World to Build Backend Services.</>}
+        subTitle={null}
+        subText={
           <>
-            Generate Production&#8209;Ready <br /> Backend Services.
+            Automatically generate backend services with full ownership, no
+            vendor lock&#8209;in, and no blackboxing. Fully customizable and
+            production-ready.
           </>
         }
-        subTitle={'Reliably. Securely. Consistently.'}
-        subText={`Automatically generate backend services with the highest
-        standards, consistency and scalability. Accelerate your
-        development 20X. Never waste time on boilerplate and
-        repetitive coding again.`}
         mainButton={{
           text: ' Start Free',
           href: 'https://app.amplication.com',