Update Home page (#474)

* feat:update hp hero * fix black-60 * fix black-80 * feat:update logos and facts * style:update facts * style: limit height of page hero * feat: support full width item * feat:update steps component * chore:remove developers page * feat: update hp * update apos * update hp sub title * update hp sub title * update hp get list * style:update classes * style:update classes * feat:jovu product page (#475) * feat:jovu product page * update CTA * update images * update images * update images * remove topbar * update meta description with .NET * update images and content * style:fix alignment * replace png with svg
amplication · May 14, 2024 · 99a3c8b · 99a3c8b
1 parent 1c7c76c
commit 99a3c8b
Show file tree

Hide file tree

Showing 80 changed files with 750 additions and 1,035 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["Amplication", "HUBSPOT", "Microservices"]
+  "cSpell.words": ["Amplication", "HUBSPOT", "jovu", "Microservices"]
 }
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 </h1>
 
 <p align="center">
-  <i align="center">Instantly generate production-ready Node.js backend apps 🚀</i>
+  <i align="center">Instantly generate production-ready .NET and Node.js backend apps 🚀</i>
 </p>
 
 <h4 align="center">
@@ -39,13 +39,13 @@
 
 ## Introduction
 
-`Amplication` is a robust, open-source development platform crafted to revolutionize the creation of scalable and secure Node.js applications. We eliminate repetitive coding tasks and deliver production-ready infrastructure code, meticulously tailored to your specifications and adhering to industry best practices.
+`Amplication` is a robust, open-source development platform crafted to revolutionize the creation of scalable and secure .NET and Node.js applications. We eliminate repetitive coding tasks and deliver production-ready infrastructure code, meticulously tailored to your specifications and adhering to industry best practices.
 
 Our user-friendly interface fosters seamless integration of APIs, data models, databases, authentication, and authorization. Built on a flexible, plugin-based architecture, Amplication allows effortless customization of the code and offers a diverse range of integrations.
 
 With a strong focus on collaboration, Amplication streamlines team-oriented development, making it an ideal choice for groups of all sizes, from startups to large enterprises. Our platform enables you to concentrate on your business logic, while we handle the heavy lifting.
 
-Experience the fastest way to develop Node.js applications with Amplication.
+Experience the fastest way to develop .NET and Node.js applications with Amplication.
 
 ## Getting Started
 

diff --git a/components/Common/CardsList/index.jsx b/components/Common/CardsList/index.jsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import icon1 from '../../../public/images/icons/icon-1.svg';
 import PropTypes from 'prop-types';
 
-const CardsList = ({ title, subTitle, cards, customClasses }) => {
+const CardsList = ({ cards, customClasses }) => {
   return (
     <div
       className={`w-full grid grid-cols-1 tablet:grid-cols-2 gap-4 p-4 ${customClasses}`}
@@ -30,8 +30,6 @@ const CardsList = ({ title, subTitle, cards, customClasses }) => {
 };
 
 CardsList.propTypes = {
-  title: PropTypes.string,
-  subTitle: PropTypes.string,
   cards: PropTypes.arrayOf({
     title: PropTypes.string,
     subTitle: PropTypes.string,
@@ -49,8 +47,6 @@ const items = [
 ];
 
 CardsList.defaultProps = {
-  title: '',
-  subTitle: '',
   cards: items,
   customClasses: '',
 };

diff --git a/components/Common/GitHubStarsButton/index.jsx b/components/Common/GitHubStarsButton/index.jsx
@@ -25,7 +25,7 @@ const GitHubStarsButton = ({ className }) => {
       isLink={true}
       onClick={handleStarUsClick}
       href="https://github.com/amplication/amplication"
-      className={`hover:!bg-dark-black-70 text-[13px] h-[40px] whitespace-nowrap !px-4 border border-1 border-white rounded ${className}`}
+      className={`hover:!bg-dark-black-60 text-[13px] h-[40px] whitespace-nowrap !px-4 border border-1 border-white rounded ${className}`}
       delayLinkMs={300}
     />
   );

diff --git a/components/Common/PageHero/index.jsx b/components/Common/PageHero/index.jsx
@@ -3,6 +3,9 @@ import { useCallback } from 'react';
 import * as analytics from '../../../lib/analytics';
 import OutlineButton from '../../Common/Button/button-outline';
 import PrimaryButton from '../../Common/Button/button-primary';
+import Image from 'next/image';
+import nodejs from '../../../public/images/icons/nodejs.svg';
+import dotnet from '../../../public/images/icons/dotnet.svg';
 
 const PageHero = ({
   title,
@@ -11,6 +14,7 @@ const PageHero = ({
   mainButton,
   secondaryButton,
   imageNode,
+  showTechStack = false,
 }) => {
   const handleMainClick = useCallback(() => {
     analytics.event({
@@ -27,8 +31,8 @@ const PageHero = ({
   }, [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] gap-8">
-        <div className="laptop:!max-w-[50%]">
+      <div className="relative w-full flex flex-col laptop:flex-row items-center  justify-between  laptop:h-[calc(100vh-90px)] max-h-[1000px] text-center min-h-[600px] gap-8">
+        <div className="laptop:!max-w-[45%]">
           <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">
@@ -38,7 +42,7 @@ const PageHero = ({
               {subText}
             </div>
           </div>
-          <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-4 gap-4">
+          <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-6 gap-4">
             {mainButton && (
               <PrimaryButton
                 text={mainButton.text}
@@ -58,8 +62,20 @@ const PageHero = ({
               />
             )}
           </div>
+          {showTechStack && (
+            <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-4 gap-4">
+              <span className="text-lg font-bold">Supported Technologies:</span>
+
+              <div>
+                <Image src={dotnet} alt={'.NET'} />
+              </div>
+              <div>
+                <Image src={nodejs} alt={'Node.js'} />
+              </div>
+            </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="relative flex items-center max-w-[600px] mb-8 w-full laptop:min-h-[600px] laptop:!max-w-[51%] laptop:mb-0 ">
           <div className="">{imageNode}</div>
         </div>
       </div>
@@ -84,6 +100,7 @@ PageHero.propTypes = {
     eventParams: PropTypes.object,
   }),
   imageNode: PropTypes.node,
+  showTechStack: PropTypes.bool,
 };
 
 export default PageHero;
diff --git a/components/Common/PageSection/index.jsx b/components/Common/PageSection/index.jsx
@@ -5,16 +5,17 @@ const PageSection = ({
   className,
   innerClassName,
   alternate,
+  light,
   addMargins,
   ...rest
 }) => {
   return (
     <>
       <section
         {...rest}
-        className={`${className} ${alternate && '!bg-light-blue'} ${
-          addMargins && 'py-5 laptop:py-12'
-        }`}
+        className={`${className} ${
+          light ? '!bg-dark-black-80' : alternate && '!bg-light-blue'
+        } ${addMargins && 'py-5 laptop:py-12'}`}
       >
         <div
           className={`${innerClassName} w-full max-w-container m-container p-container laptop:max-w-container-desktop laptop:m-container-desktop laptop:p-container-desktop`}
@@ -31,13 +32,15 @@ PageSection.propTypes = {
   className: PropTypes.string,
   innerClassName: PropTypes.string,
   alternate: PropTypes.bool,
+  light: PropTypes.bool,
   addMargins: PropTypes.bool,
 };
 
 PageSection.defaultProps = {
   className: '',
   innerClassName: '',
   addMargins: false,
+  light: false,
 };
 
 export default PageSection;
diff --git a/components/Common/SOC2/index.jsx b/components/Common/SOC2/index.jsx
@@ -10,14 +10,16 @@ const Soc2Banner = ({ title, subTitle }) => {
     'Amplication is SOC-2 certified. We meet the highest standards for data security, availability, processing, integrity, confidentiality, and privacy.';
 
   return (
-    <div className="d-flex align-items-center py-3 max-medium:flex-col max-medium:text-center">
-      <div className="max-medium:pb-8">
-        <h2 className="roadmap-heading m-0 pt-1">{title || defaultTitle}</h2>
+    <div className="flex items-center py-12 flex-col text-center justify-around desktop:flex-row desktop:text-left gap-12">
+      <div className=" max-w-[800px]">
+        <h2 className="mx-auto text-3xl !font-semibold ">
+          {title || defaultTitle}
+        </h2>
         <div>{subTitle || defaultSubTitle}</div>
       </div>
-      <div className="ml-auto w-full large:max-w-[35%] d-flex justify-center align-items-center">
+      <div className=" flex justify-center items-center">
         <Image src={soc2Logo} alt={'SOC2 Logo'} />
-        <div className="text-center d-flex align-items-center flex-column pl-4">
+        <div className="text-center flex items-center flex-col pl-4">
           <span className="text-[32px] !font-semibold leading-[48px] whitespace-nowrap">
             SOC 2 Type II
           </span>

diff --git a/components/Common/SubscribeForm/index.jsx b/components/Common/SubscribeForm/index.jsx
@@ -83,7 +83,7 @@ const SubscribeForm = ({ isCompactView }) => {
   let loaderClasses =
     'w-full h-full absolute l-0 t-0 rounded-2xl transition-all opacity-50 pointer-events-none';
   loaderClasses += formIsSending
-    ? ' bg-purple-light z-10 pointer-events-auto'
+    ? ' bg-dark-black-80 z-10 pointer-events-auto'
     : '';
 
   let containerClasses =
@@ -123,7 +123,7 @@ const SubscribeForm = ({ isCompactView }) => {
 
   return (
     <div
-      className={`w-full rounded-2xl bg-purple-light bg-no-repeat bg-right-top laptop:min-h-[208px] transition-all bg-form-pattern-1-mobile ${
+      className={`w-full rounded-2xl bg-dark-black-80 bg-no-repeat bg-right-top laptop:min-h-[208px] transition-all bg-form-pattern-1-mobile ${
         isCompactView
           ? ''
           : 'laptop:bg-form-pattern-1-desktop laptop:bg-[length:auto_100%]'

diff --git a/components/Common/WidePanelWithImage/index.jsx b/components/Common/WidePanelWithImage/index.jsx
@@ -13,20 +13,31 @@ const WidePanelWithImage = ({
   content,
   children,
   alternate,
+  fullWidth,
 }) => {
   return (
     <div
-      className={`w-full grid grid-cols-1 tablet:grid-cols-2 gap-8 tablet:gap-16 content-center item-center py-8 ${customClasses}`}
+      className={`w-full grid grid-cols-1 ${
+        fullWidth
+          ? 'max-w-[1100px] m-auto gap-4'
+          : 'tablet:grid-cols-2 gap-8 tablet:gap-16'
+      }    content-center item-center py-8 ${customClasses}`}
     >
       <div
-        className={`flex flex-col items-start text-left tablet:text-left tablet:items-start justify-center ${
-          alternate && 'order-1 tablet:order-2'
-        }`}
+        className={`flex flex-col  ${
+          fullWidth
+            ? 'text-center tablet:text-center items-center justify-center'
+            : 'text-left tablet:text-left items-start '
+        }   justify-center ${alternate && 'order-1 tablet:order-2'}`}
       >
         <div className="!text-[24px] desktop:!text-[32px] !leading-[36px] desktop:!leading-[48px] font-semibold pb-2">
           {title}
         </div>
-        <div className="text-sm desktop:text-lg text-white desktop:!leading-[27px] max-w-[600px]">
+        <div
+          className={`text-sm desktop:text-base text-white  ${
+            fullWidth ? 'max-w-[750px]' : 'max-w-[600px]'
+          }`}
+        >
           {content}
         </div>
         {children}
@@ -49,15 +60,8 @@ const WidePanelWithImage = ({
           )}
         </div>
       </div>
-      <div className="order-1" data-aos="fade-up-left">
-        {image && (
-          <Image
-            className="max-w-[710px] !visible"
-            src={image}
-            alt={title}
-            objectFit={'cover'}
-          />
-        )}
+      <div className={`order-1 ${fullWidth && 'flex items-center'}`}>
+        {image && <Image src={image} alt={title} objectFit={'cover'} />}
       </div>
     </div>
   );
@@ -78,6 +82,7 @@ WidePanelWithImage.propTypes = {
   },
   content: PropTypes.string,
   alternate: PropTypes.bool,
+  fullWidth: PropTypes.bool,
 };
 
 WidePanelWithImage.defaultProps = {
@@ -88,6 +93,7 @@ WidePanelWithImage.defaultProps = {
   secondaryBtn: undefined,
   content: '',
   alternate: false,
+  fullWidth: false,
 };
 
 export default WidePanelWithImage;
diff --git a/components/CustomerStories/CustomerStoryCard/Tag/index.jsx b/components/CustomerStories/CustomerStoryCard/Tag/index.jsx
@@ -10,7 +10,7 @@ const Tag = ({ tag, className }) => {
       }
     >
       <span
-        className="py-1 px-2 bg-dark-black-70 rounded-full font-normal text-[10px] flex items-center justify-center min-w-[50px]"
+        className="py-1 px-2 bg-dark-black-60 rounded-full font-normal text-[10px] flex items-center justify-center min-w-[50px]"
         key={tag.slug}
       >
         {tag}

diff --git a/components/CustomerStories/CustomerStoryCard/index.jsx b/components/CustomerStories/CustomerStoryCard/index.jsx
@@ -29,7 +29,7 @@ const CustomerStoryCard = (props) => {
         >
           <div
             className={
-              'overflow-hidden border border-solid border-dark-black-70 hover:border-lite hover:bg-purple-light rounded-lg p-8 hover:shadow-hover-card'
+              'overflow-hidden border border-solid border-dark-black-70 hover:border-lite hover:bg-dark-black-80 rounded-lg p-8 hover:shadow-hover-card'
             }
           >
             <div className="overflow-hidden flex flex-row justify-between items-start	">

diff --git a/components/CustomerStories/index.jsx b/components/CustomerStories/index.jsx
@@ -98,7 +98,7 @@ laptop:max-w-container-desktop-blog laptop:m-container-desktop laptop:p-containe
               <a
                 onClick={() => setLoader(true)}
                 className={
-                  'w-[118px] inline-block py-2 px-4 rounded transition-all duration-300 text-center text-white bg-dark-black-70 hover:bg-purple' +
+                  'w-[118px] inline-block py-2 px-4 rounded transition-all duration-300 text-center text-white bg-dark-black-60 hover:bg-purple' +
                   (loader ? ' loader' : '')
                 }
               >

diff --git a/components/Header/Menu/index.jsx b/components/Header/Menu/index.jsx
@@ -254,7 +254,7 @@ const InnerMenuItem = ({ item, onMenuItemClick, isMobileMenu }) => {
         className={`nav-link-inner ${asPath === item.url ? 'active' : ''} `}
       >
         <div className="flex flex-row items-center justify-start gap-3 ">
-          <div className="w-[32px] h-[32px] min-w-[32px] flex items-center justify-center bg-dark-black-70 !rounded">
+          <div className="w-[32px] h-[32px] min-w-[32px] flex items-center justify-center bg-dark-black-60 !rounded">
             <Image
               className=""
               width={32}

diff --git a/components/Header/Menu/menu-items.js b/components/Header/Menu/menu-items.js
@@ -17,6 +17,7 @@ import IconStories from '../../../public/menu/icon-stories.svg';
 import IconEventDriven from '../../../public/menu/icon-event-driven.svg';
 import IconGettingStarted from '../../../public/menu/icon-getting-started.svg';
 import IconSyncWithGit from '../../../public/menu/icon-sync-with-git.svg';
+import IconBackend from '../../../public/menu/icon-backend.svg';
 
 
 import IconBlog from '../../../public/menu/icon-blog.svg';
@@ -26,25 +27,25 @@ import IconDocs from '../../../public/menu/icon-docs.svg';
 import IconGithub from '../../../public/menu/icon-github.svg';
 
 const PRODUCTS_ITEMS_1 = [
+    {
+        title: 'Jovu',
+        image: IconBackend,
+        url: '/jovu--production-ready-ai-code-generation',
+        description: 'From idea to production in minutes',
+    },
     {
         title: 'Build new services',
         image: IconBuildNew,
         url: '/build-new-services',
         description: 'Production-ready backend with .NET or Node.js',
     },
-
-    {
-        title: 'Modernize applications',
-        image: IconModernize,
-        url: '/application-modernization',
-        description: 'Transform and migrate legacy systems',
-    },
     {
         title: 'Build APIs on existing DB',
         image: IconAPI,
         url: '/build-api-on-existing-db',
         description: 'Head start development using existing DB',
     },
+
 ];
 
 const PRODUCTS_ITEMS_2 = [
@@ -54,19 +55,19 @@ const PRODUCTS_ITEMS_2 = [
         url: '/break-the-monolith',
         description: 'Shift to microservices seamlessly',
     },
-
+    {
+        title: 'Modernize applications',
+        image: IconModernize,
+        url: '/application-modernization',
+        description: 'Transform and migrate legacy systems',
+    },
     {
         title: 'Plugins',
         image: IconPlugins,
         url: '/plugins',
         description: 'Extend and customize your services',
     },
-    {
-        title: 'Build with .NET',
-        image: IconDotNet,
-        url: '/dot-net-early-access',
-        description: 'Enterprise-grade .NET backend services',
-    },
+
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ const Tag = ({ tag, className }) => { @@
           }
         >
           <span
-            className="py-1 px-2 bg-dark-black-70 rounded-full font-normal text-[10px] flex items-center justify-center min-w-[50px]"
+            className="py-1 px-2 bg-dark-black-60 rounded-full font-normal text-[10px] flex items-center justify-center min-w-[50px]"
             key={tag.slug}
           >
             {tag}
@@ Expand Down @@