Feat/idp integration

components/Header/Menu/menu-items.js

@@ -68,12 +68,6 @@ const PRODUCTS_ITEMS_1 = [
         url: '/build-api-on-existing-db',
         description: 'Head start development using existing DB',
     },
-    {
-        title: 'Break the monolith',
-        image: IconBTM,
-        url: '/break-the-monolith',
-        description: 'Shift to microservices seamlessly',
-    },
     {
         title: 'Modernize applications',
         image: IconModernize,

components/Sections/Enterprise/IntegrateWithIdp/index.jsx

@@ -0,0 +1,43 @@
+import Image from 'next/image';
+import PropTypes from 'prop-types';
+import WidePanelWithImage from '../../../Common/WidePanelWithImage';
+
+import ImgBackstage from '../../../../public/images/idp/backstage.svg';
+import ImgPort from '../../../../public/images/idp/port.svg';
+
+const TITLE = 'Seamlessly Integrate with Your Portal';
+const CONTENT = `Amplication can integrate with your internal developer portal, including
+        leading platforms like Backstage, Port
+        , and many others. Ensure smooth collaboration and a unified developer
+        experience by connecting Amplication to your developer's portal.`;
+
+const IntegrateWithIdp = ({ classes }) => {
+  return (
+    <>
+      <WidePanelWithImage
+        title={TITLE}
+        content={CONTENT}
+        fullWidth={true}
+        alternate={false}
+      />
+      <div className="flex flex-wrap items-center justify-center gap-12">
+        <div className="flex justify-center h-[50px] ">
+          <Image src={ImgBackstage} alt="Backstage" />
+        </div>
+        <div className="flex justify-center h-[50px] ">
+          <Image src={ImgPort} alt="Port" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+IntegrateWithIdp.propTypes = {
+  classes: PropTypes.string,
+};
+
+IntegrateWithIdp.defaultProps = {
+  classes: '',
+};
+
+export default IntegrateWithIdp;

pages/index.js

@@ -4,6 +4,7 @@ import Soc2Banner from '../components/Common/SOC2';
 import Facts from '../components/Sections/Enterprise/Facts';
 import HeroBlock from '../components/Sections/Enterprise/HeroBlock';
 import Slider from '../components/Sections/Enterprise/Slider';
+import IntegrateWithIdp from '../components/Sections/Enterprise/IntegrateWithIdp';
 import GetList from '../components/Sections/MainPage/GetList';
 import { MainLayout } from '../layouts';
 import CardsList from '../components/Common/CardsList';
@@ -14,6 +15,7 @@ import IconCollab from '../public/images/icons/icon-10.svg';
 
 
 
+
 import TestimonialsSlider from '../components/Sections/Enterprise/Testimonials/testimonials-slider';
 import Steps from '../components/Sections/MainPage/StepsPlatform';
 
@@ -70,9 +72,14 @@ const Home = () => {
         <PageSection light className={'py-5'} innerClassName={"flex-grow"}>
           <Slider />
         </PageSection>
-        {/* <PageSection className={"py-10"} alternate>
-          <Facts />
-        </PageSection> */}
+
+        <PageSection alternate className={'py-5 pb-10'} innerClassName={"flex-grow"}>
+          <IntegrateWithIdp />
+        </PageSection>
+
+
+
+
         <PageSection className={'py-5'} >
           <Steps />
         </PageSection>