hp:platform (#487)

components/Footer/index.jsx

@@ -18,7 +18,7 @@ const Footer = ({ compactView, hideBanner }) => {
               {!hideBanner && (
                 <div className=" bg-light-blue">
                   <StartNow
-                    title="Build faster, with no limits"
+                    title="Build smarter, better, faster"
                     description="Discover how Amplication Enterprise can help you build powerful, scalable, and secure applications tailored to your business needs."
                     linkPrimary={{
                       href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,

components/Sections/Enterprise/HeroBlock/index.jsx

@@ -11,23 +11,19 @@ const HeroBlock = () => {
         showTechStack={true}
         title={
           <div className="max-w-[480px] desktop:max-w-[680px]">
-            The Only{' '}
-            <span className="text-purple-bright">
-              Production-Ready AI-Powered
-            </span>{' '}
-            Code Generation
+            Automate and Standardize Your Backend Development
           </div>
         }
         subTitle={null}
         subText={
           <>
-            Build new services, extend existing applications or modernize legacy
-            systems with Amplication AI. Go from idea to production in minutes,
-            with code that is built to scale.
+            Quickly build, maintain, and scale backend services that embed your
+            company’s best practices and standards. Avoid fragmented workflows
+            and ensure your development teams follow the Golden Paths.
           </>
         }
         mainButton={{
-          text: 'Start Free',
+          text: 'Free Trial',
           href: 'https://app.amplication.com',
           eventName: 'startNowClicked',
           eventParams: {

components/Sections/Enterprise/Slider/index.jsx

@@ -12,7 +12,7 @@ const Slider = ({ classes }) => {
   return (
     <>
       <h2 className="text-2xl font-bold text-center">
-        Empowering developers from leading companies
+        Empowering teams from leading companies
       </h2>
       <div className="mt-6 flex flex-wrap items-center justify-evenly">
         <div className="flex justify-center w-[25%] tablet:w-[20%] laptop:w-[14.2857%]">

components/Sections/MainPage/StepsPlatform/index.jsx

@@ -0,0 +1,75 @@
+import ImageCodeOwnership from '../../../../public/images/product/image-code-ownership.png';
+import ImageGitProviders from '../../../../public/images/product/image-git-providers.svg';
+import ImagePlugins from '../../../../public/images/product/image-plugins.svg';
+import ImageProductOverview from '../../../../public/images/product/product-overview.svg';
+import WidePanelWithImage from '../../../Common/WidePanelWithImage';
+
+const features = [
+  {
+    title: 'Empower Your Platform Teams with Tailor-Made Backend Solutions',
+    image: ImageProductOverview,
+    secondaryBtn: {
+      title: 'Try Free',
+      href: 'https://app.amplication.com/',
+    },
+    fullWidth: true,
+    primaryBtn: undefined,
+    content:
+      'Amplication helps platform teams to take control of backend infrastructure with tailor-made live templates, built around organizational standards and best practices, AI-powered code generation and centralized service catalog, that evolve with your organization.',
+  },
+  {
+    title: 'Prepare with Live Templates ',
+    image: ImagePlugins,
+    secondaryBtn: {
+      title: 'View Plugins',
+      href: '/plugins',
+    },
+    primaryBtn: undefined,
+    content:
+      'Create your own live templates that embed your organization’s best practices and standards, to ensure consistency and compliance from the start. Developers can self-serve and follow clear Golden Paths, speeding up delivery without compromising on quality.',
+  },
+  {
+    title: 'Build with AI-powered Automation',
+    image: ImageCodeOwnership,
+    secondaryBtn: {
+      title: 'Learn More',
+      href: 'https://docs.amplication.com/',
+    },
+    primaryBtn: undefined,
+    content:
+      'Generate microservices and backend applications in no time from live templates, including APIs, data models, DTOs and more. Our AI does the heavy lifting so your developers can focus on business logic that drives your company forward.',
+  },
+  {
+    title: 'Maintain Continuously ',
+    image: ImageGitProviders,
+    secondaryBtn: {
+      title: 'Talk to Expert',
+      href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+    },
+    primaryBtn: undefined,
+    content:
+      'Keep your live applications always up-to-date with automated updates for packages, patches, and versioning. Minimize technical debt while maintaining the latest standards. No more maintenance of bespoke infrastructure code.',
+  },
+];
+
+const Steps = () => {
+  return (
+    <>
+      {features.map((feature, i) => (
+        <WidePanelWithImage
+          key={i}
+          image={feature.image}
+          title={feature.title}
+          content={feature.content}
+          primaryBtn={feature.primaryBtn}
+          secondaryBtn={feature.secondaryBtn}
+          customClasses={feature.customClasses}
+          fullWidth={feature.fullWidth}
+          alternate={i % 2 === 1}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Steps;

pages/index.js

@@ -6,9 +6,43 @@ import HeroBlock from '../components/Sections/Enterprise/HeroBlock';
 import Slider from '../components/Sections/Enterprise/Slider';
 import GetList from '../components/Sections/MainPage/GetList';
 import { MainLayout } from '../layouts';
+import CardsList from '../components/Common/CardsList';
+import IconDev from '../public/images/icons/icon-development.svg';
+import IconDeploy from '../public/images/icons/icon-deploy.svg';
+import IconCloud from '../public/images/icons/icon-cloud.svg';
+import IconCollab from '../public/images/icons/icon-10.svg';
+
+
 
 import TestimonialsSlider from '../components/Sections/Enterprise/Testimonials/testimonials-slider';
-import Steps from '../components/Sections/MainPage/Steps';
+import Steps from '../components/Sections/MainPage/StepsPlatform';
+
+const cards = [
+  {
+    title: 'Flexible yet standardized',
+    subTitle:
+      "Create tailored live templates with  your standards, ensuring consistency across development teams.",
+    icon: IconDev,
+  },
+  {
+    title: 'Fast and simple ',
+    subTitle:
+      "Build is hours not days. Automate foundational coding tasks so developers can focus on building new features. ",
+    icon: IconDeploy,
+  },
+  {
+    title: 'Always up-to-date',
+    subTitle: "Your applications stay current with automatic updates, aligning with the latest standards and technologies.",
+    icon: IconCloud,
+  },
+  {
+    title: 'Seamless Collaboration',
+    subTitle: "A unified platform where both platform engineers and developers collaborate seamlessly.",
+    icon: IconCollab,
+  },
+
+
+];
 
 const Home = () => {
   return (
@@ -38,20 +72,27 @@ const Home = () => {
         <PageSection light className={'py-5'} innerClassName={"flex-grow"}>
           <Slider />
         </PageSection>
-        <PageSection className={"py-10"} alternate>
+        {/* <PageSection className={"py-10"} alternate>
           <Facts />
-        </PageSection>
+        </PageSection> */}
         <PageSection className={'py-5'} >
           <Steps />
         </PageSection>
-        <PageSection  >
+        <PageSection alternate className={'py-5'}>
           <h2 className="my-12 mx-auto text-[32px] !font-semibold leading-[48px] tracking-normal text-center max-w-[960px]">
             What users are saying about Amplication?
           </h2>
           <TestimonialsSlider useSlider={false} totalItems={3} wrapperClassName={"laptop:!grid-cols-3"} />
         </PageSection>
-        <PageSection alternate className={"!py-20"} >
-          <GetList />
+        <PageSection className={"!py-20"} >
+          {/* <GetList /> */}
+          <h2 className="my-12 mx-auto text-[32px] !font-semibold leading-[48px] tracking-normal text-center max-w-[960px]">
+            Why Amplication
+          </h2>
+          <CardsList
+            cards={cards}
+            customClasses={'tablet:!grid-cols-1 laptop:!grid-cols-4'}
+          />
         </PageSection>
         <PageSection >
           <Soc2Banner />