feat:add new early access page for .net

components/Common/PageHero/index.jsx

@@ -14,55 +14,55 @@ const PageHero = ({
 }) => {
   const handleMainClick = useCallback(() => {
     analytics.event({
-      action: mainButton.eventName,
-      params: mainButton.eventParams,
+      action: mainButton?.eventName,
+      params: mainButton?.eventParams,
     });
-  }, [mainButton.eventName, mainButton.eventParams]);
+  }, [mainButton]);
 
   const handleSecondaryClick = useCallback(() => {
     analytics.event({
-      action: secondaryButton.eventName,
-      params: secondaryButton.eventParams,
+      action: secondaryButton?.eventName,
+      params: secondaryButton?.eventParams,
     });
-  }, [secondaryButton.eventName, secondaryButton.eventParams]);
+  }, [secondaryButton]);
   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="relative w-full flex flex-col laptop:flex-row items-center  justify-between  laptop:h-[calc(100vh-90px)] text-center min-h-[600px] gap-8">
         <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">
+          <div className=" flex flex-col gap-2 text-center laptop:text-left mt-12 laptop:mt-0 max-w-[500px] laptop:max-w-[none]">
+            <h1 className="text-4xl desktop:text-5xl font-bold ">{title}</h1>
+            <h2 className="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]">
+            <div className="text-base desktop:text-lg text-white  !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}
-            />
+            {mainButton && (
+              <PrimaryButton
+                text={mainButton.text}
+                backgroundColor="purpleBright"
+                hoverBackgroundColor="purpleBrightHover"
+                isLink={true}
+                onClick={handleMainClick}
+                href={mainButton.href}
+                delayLinkMs={300}
+              />
+            )}
+            {secondaryButton && (
+              <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 className="relative items-center justify-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex medium:!max-w-[46%]">
+          <div className="">{imageNode}</div>
         </div>
       </div>
     </>

components/Sections/DotNetEarlyAccess/Form/index.jsx

@@ -0,0 +1,84 @@
+import HubSpotForm from '../../../Common/HubSpotForm';
+
+const Form = () => {
+  const onChangeHandler = (e) => {
+    const styles = getComputedStyle(e.target, null),
+      rows = parseInt(e.target.getAttribute('rows')) || 2,
+      lines = parseInt(styles.getPropertyValue('line-height')) * rows,
+      padding = parseInt(styles.getPropertyValue('padding-top')) * 2,
+      border = parseInt(styles.getPropertyValue('border-width')) * 4;
+
+    e.target.style.height = lines + padding + border + 'px';
+    e.target.style.height = e.target.scrollHeight + 'px';
+  };
+
+  return (
+    <HubSpotForm
+      hubSpotPortalId="25691669"
+      hubSpotFormId="176d9837-cfed-481d-9750-423ca002f622"
+      pageName=".NET early access"
+      formName="dotnetEarlyAccessForm"
+      successMessage="Congratulations! We appreciate your interest and will be in touch soon with further instructions."
+    >
+      <div className="block relative w-full !mt-6">
+        <div className="font-semibold text-sm leading-[22px] max-laptop:text-[16px]">
+          Your Details:
+        </div>
+      </div>
+      <div className="relative laptop:w-[calc(50%-8px)] my-2">
+        <input
+          required
+          type="text"
+          name="firstname"
+          placeholder="First Name"
+          className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite"
+        />
+      </div>
+      <div className="relative laptop:w-[calc(50%-8px)] my-2">
+        <input
+          required
+          type="text"
+          name="lastname"
+          placeholder="Last Name"
+          className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite"
+        />
+      </div>
+      <div className="relative laptop:w-[calc(50%-8px)] my-2">
+        <input
+          required
+          type="email"
+          name="email"
+          placeholder="Email"
+          className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite"
+        />
+      </div>
+      <div className="relative laptop:w-[calc(50%-8px)] my-2">
+        <input
+          required
+          type="text"
+          name="company"
+          placeholder="Company"
+          className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite"
+        />
+      </div>
+      <div className="block relative w-full !mt-6">
+        <span className="font-semibold text-sm leading-[22px] max-laptop:text-[16px]">
+          We would like to hear more about your use case:
+        </span>
+        <div className="flex justify-between mt-2 w-full">
+          <label className="w-full mt-1 mb-0">
+            <textarea
+              rows="4"
+              onChange={onChangeHandler}
+              name="dot_net_use_case"
+              placeholder="Use case"
+              className="w-full leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-light-blue py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray hover:border-purple border-lite"
+            ></textarea>
+          </label>
+        </div>
+      </div>
+    </HubSpotForm>
+  );
+};
+
+export default Form;

components/Sections/DotNetEarlyAccess/Hero/index.jsx

@@ -0,0 +1,36 @@
+import Form from '../Form';
+import PageHero from '../../../Common/PageHero';
+import dotnetLogo from '../../../../public/images/dotnet/dotnet_logo.svg';
+import Image from 'next/image';
+
+const Hero = () => {
+  return (
+    <>
+      <PageHero
+        title={'Unlock Next-Level .NET Backend Development'}
+        subTitle={
+          'Join our exclusive early-access program for production-ready services in .NET'
+        }
+        subText={`We are bringing the speed, reliability, and scalability that's already trusted by 
+        tens of thousands of Node.js developers, to your .NET projects. 
+        Seamlessly integrate with your existing workflow and accelerate your development by 30X. 
+        Say ‘Goodbye’ to time-consuming tasks and ‘Hello’ to a new era of efficiency with our highly 
+        anticipated .NET backend capabilities.`}
+        //
+        imageNode={
+          <div className="relative p-[50px]  text-left">
+            <Form />
+            <div
+              className="absolute w-[100px] h-[100px] rounded-[8px] overflow-hidden flex items-center justify-center text-center
+            right-0 top-[20px] z-20 rotate-12"
+            >
+              <Image src={dotnetLogo} alt={'.net logo'} />
+            </div>
+          </div>
+        }
+      />
+    </>
+  );
+};
+
+export default Hero;

components/Sections/Enterprise/Features/index.jsx

@@ -0,0 +1,140 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import enterprise1 from '../../../../public/images/enterprise/enterprise-1.png';
+import enterprise2 from '../../../../public/images/enterprise/enterprise-2.png';
+import enterprise3 from '../../../../public/images/enterprise/enterprise-3.png';
+import enterprise4 from '../../../../public/images/enterprise/enterprise-4.png';
+
+const features = [
+  {
+    image: enterprise1,
+    title: 'All-in-One Platform',
+    customClasses: '!pb-8',
+    secondaryBtn: {
+      title: 'Learn More',
+      href: 'https://docs.amplication.com/',
+    },
+    content:
+      '<p>Amplication Enterprise makes the most of any use case from data-driven applications to complex workflows. Our platform automates the creation of any backend foundations with all standards built-in, so your developers can focus on creating custom solutions for your business.</p>',
+  },
+  {
+    image: enterprise2,
+    title: 'Unparalleled Efficiency and Speed',
+    customClasses: '!pt-8',
+    secondaryBtn: {
+      title: 'Book a Demo',
+      href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+      target: '_blank',
+    },
+    content:
+      '<p>Amplication Enterprise allows you to build, manage and scale applications at the speed of light. With our platform you can create applications faster and with fewer resources. Generate all the necessary foundations for your service in a few clicks and tailor applications to your unique needs.</p>',
+    buttons: [],
+  },
+  {
+    image: enterprise3,
+    title: 'Secure, Reliable Solutions',
+    customClasses: '!pb-6',
+    primaryBtn: {
+      title: 'Contact Sales',
+      href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+      target: '_blank',
+    },
+    secondaryBtn: {
+      title: 'Start Now',
+      href: 'https://app.amplication.com/login',
+    },
+    content:
+      '<p>Amplication Enterprise includes built-in security measures that ensure the safety of your data and applications. Our platform offers Authentication and Authorization options, combined with regular audits, and ongoing vulnerability assessments, so you can rest assured that your applications will run smoothly and reliably.</p>',
+  },
+  {
+    image: enterprise4,
+    title: 'Seamless Integration and Scale',
+    customClasses: '!pb-8',
+    primaryBtn: {
+      title: 'Contact Sales',
+      href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+      target: '_blank',
+    },
+    secondaryBtn: {
+      title: 'Start Now',
+      href: 'https://app.amplication.com/login',
+    },
+    content:
+      '<p>Amplication Enterprise is designed to grow with your business. Our platform integrates seamlessly with your existing CI/CD pipelines, enabling you to easily scale with increased business demand.</p>',
+  },
+];
+
+const Features = () => {
+  return features.map((feature, i) => {
+    return (
+      <section
+        className={
+          'features-page-feature !py-10 desktop:!py-24 ' +
+          (feature.customClasses ?? '')
+        }
+        key={i}
+      >
+        <div className="w-full max-w-container m-container p-container laptop:max-w-container-desktop laptop:m-container-desktop laptop:p-container-desktop">
+          <div
+            className={
+              (i % 2 !== 0 ? 'flex-row-reverse ' : '') +
+              'row d-flex justify-content-between align-items-center feature-page-card py-0 laptop:py-6'
+            }
+          >
+            <div
+              className={
+                (i % 2 !== 0 ? 'desktop:!px-9 ' : '') +
+                'col-sm-12 col-md-6 pb-0 desktop:pt-8 pr-3'
+              }
+            >
+              <div className="!text-[24px] desktop:!text-[32px] !leading-[36px] desktop:!leading-[48px] font-semibold pb-2">
+                {feature.title}
+              </div>
+              <div
+                className="text-sm desktop:text-lg text-white desktop:!leading-[27px] max-w-[600px]"
+                dangerouslySetInnerHTML={{ __html: feature.content }}
+              ></div>
+              <div className="buttons-wrapper d-flex tablet:align-items-center justify-content-start mt-4">
+                {feature.primaryBtn && (
+                  <Link href={feature.primaryBtn.href} passHref={true}>
+                    <a
+                      className="btn btn-primary btn-sm !h-[34px] mb-2 mr-6 w-full !font-normal !text-sm !max-w-[140px]"
+                      target={feature.primaryBtn.target ?? '_self'}
+                    >
+                      {feature.primaryBtn.title}
+                    </a>
+                  </Link>
+                )}
+                {feature.secondaryBtn && (
+                  <Link href={feature.secondaryBtn.href ?? ''} passHref={true}>
+                    <a
+                      className="btn btn-outline-light btn-sm !h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px]"
+                      target={feature.secondaryBtn.target ?? '_self'}
+                    >
+                      {feature.secondaryBtn.title}
+                    </a>
+                  </Link>
+                )}
+              </div>
+            </div>
+            <div
+              className="col-sm-12 col-md-6 desktop:left-4 desktop:top-6 feature-image"
+              data-aos="fade-up-left"
+            >
+              {feature.image && (
+                <Image
+                  className="max-w-[710px] !visible"
+                  src={feature.image}
+                  alt={feature.title}
+                  objectFit={'cover'}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  });
+};
+
+export default Features;