Merge pull request #5225 from iArchitSharma/mod

AWS page hero image size and transition update

src/components/RelatedPicks/index.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Container, Wrapper, CardWrapper, CardImageContainer, Image, CardTitle } from "./style";
+
+import { Link } from "gatsby";
+
+const Card = ({ title, imgSrc, redirectLink }) => {
+  return (
+    <>
+      <Link to={redirectLink}>
+        <CardWrapper>
+          <CardImageContainer>
+            <Image src={imgSrc} alt="gcp architecture diagram" />
+          </CardImageContainer>
+          <CardTitle>{title}</CardTitle>
+        </CardWrapper>
+      </Link>
+    </>
+  );
+};
+
+const RelatedPicks = ({ content }) => {
+
+  return (
+    <>
+      <Container>
+        <h2>You may also like</h2>
+        <Wrapper>
+          {
+            content.map(item => (
+              <Card key={item.id} title={item.title} imgSrc={item.imgSrc} redirectLink={item.redirectLink}/>
+            ))
+          }
+        </Wrapper>
+      </Container>
+    </>
+  );
+};
+
+export default RelatedPicks;

src/components/RelatedPicks/style.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const Container = styled("div")`
+    max-width: 1170px;
+    margin: 0 auto;
+    padding: 0 1rem;
+`;
+
+export const Wrapper = styled("div")`
+    padding: 2rem 0;
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+`;
+
+export const CardWrapper = styled("div")`
+    max-width: 365px;
+    background: ${props => props.theme.grey212121ToLinear2};
+    border-radius: 0.25rem;
+    box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.green00D3A9ToGreyE6E6E6};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    &:hover {
+        box-shadow: 0px 0px 5px ${props => props.theme.whiteToGreen3C494F};
+    }
+`;
+export const CardImageContainer = styled("div")``;
+export const Image = styled("img")``;
+export const CardTitle = styled("h4")`
+    text-align: center;
+    padding: 2rem 1rem;
+`;

src/sections/AWS-Diagram/diagram.js

@@ -6,6 +6,9 @@ import TemplateDark from "../../assets/images/AWS-Diagram/templates-dark.svg";
 import TemplateLight from "../../assets/images/AWS-Diagram/templates.svg";
 import InfrastructureDark from "../../assets/images/AWS-Diagram/infrastructure-dark.svg";
 import InfrastructureLight from "../../assets/images/AWS-Diagram/infrastructure-light.svg";
+import RelatedPicks from "../../components/RelatedPicks";
+import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg";
+import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg";
 
 const DiagramWrapper = styled.div`
   min-height: fit-content;
@@ -128,6 +131,14 @@ const DiagramWrapper = styled.div`
 const Aws = () => {
 
   const { isDark } = useStyledDarkMode();
+  const content = [
+    {
+      id: 1,
+      title: "GCP architecture diagram",
+      redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram",
+      imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight,
+    }
+  ];
 
   return (
     <DiagramWrapper>
@@ -139,27 +150,27 @@ const Aws = () => {
             </div>
           </Col>
           <Col md={6} className="diagram-detail">
-            <h1 className="heading">AWS architectural diagrams tailored to meet any requirement</h1>
+            <h2 className="heading">AWS architectural diagrams tailored to meet any requirement</h2>
             <b className="sub-heading">Extensive AWS Icon Library </b>
             <p className="caption">
-            Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date.
+              Utilize a vast and continually expanding collection of AWS icons for creating globally comprehensible diagrams that are authentic and up-to-date.
             </p>
             <b className="sub-heading">Cost-Effective Solutions </b>
             <p className="caption">
-            AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions.
+              AWS architecture diagrams offer economic benefits by presenting the entire system in one diagram, allowing the team to identify bottlenecks and their respective solutions.
             </p>
           </Col>
         </Row>
         <Row className="catalog">
           <Col md={6} className="diagram-detail">
-            <h1 className="heading">Designing AWS diagrams is effortless</h1>
+            <h2 className="heading">Designing AWS diagrams is effortless</h2>
             <b className="sub-heading">Quick-start templates </b>
             <p className="caption">
-            Get started quickly with our ready-to-use templates. Effortlessly create your AWS architecture diagrams using these professional templates. They are fully customizable and available for free download.
+              Get started quickly with our ready-to-use templates. Effortlessly create your AWS architecture diagrams using these professional templates. They are fully customizable and available for free download.
             </p>
             <b className="sub-heading">User-friendly editor </b>
             <p className="caption">
-            Create AWS diagrams effortlessly with an intuitive layout and interface. Benefit from intelligent auto-adjustment, drag-and-drop functionality, and a comprehensive toolkit for quick diagram creation in minutes.
+              Create AWS diagrams effortlessly with an intuitive layout and interface. Benefit from intelligent auto-adjustment, drag-and-drop functionality, and a comprehensive toolkit for quick diagram creation in minutes.
             </p>
           </Col>
           <Col md={6} className="diagram-image">
@@ -168,6 +179,7 @@ const Aws = () => {
             </div>
           </Col>
         </Row>
+        <RelatedPicks content={content} />
       </Container>
     </DiagramWrapper>
   );

src/sections/AWS-Diagram/header.js

@@ -7,82 +7,105 @@ import AWSCardLight from "../../assets/images/AWS-Diagram/aws.svg";
 import Button from "../../reusecore/Button";
 
 const CatalogHeaderWrapper = styled.div`
-  .cloud-native-catalog.header {
-    min-height: 40rem;
-    background: ${({ theme }) => theme.linearToGreen};
+.cloud-native-catalog.header {
+  background: ${({ theme }) => theme.linearToGreen};
+  padding: 6rem 1rem;
+  display: flex;
+  align-items: center;
+  align-content: space-between;
+  flex-direction: column;
+  justify-content: center;
+  .header__detail {
     display: flex;
-    align-items: center;
-    align-content: space-between;
     flex-direction: column;
+  }
+  .header__title {
+    color: ${(props) => props.theme.primaryColor};
+    padding-right: 80px;
+    margin-bottom: 20px;
+  }
+  .header__title_description {
+    color: ${(props) => props.theme.tertiaryColor};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    font-weight: 400;
+    font-size: 1.438rem;
+    line-height: 2rem;
+    padding-right: 80px;
+    margin-bottom: 30px;
+  }
+  .catalog {
+    display: flex;
     justify-content: center;
-    overflow: hidden;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  @media screen and (max-width: 992px) {
+    padding-bottom: 100px;
+    .catalog {
+      margin: 50px 0 0 0;
+    }
+    .col.catalog {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 50px 0;
     .header__detail {
       display: flex;
       flex-direction: column;
     }
     .header__title {
-      color: ${(props) => props.theme.primaryColor};
-      padding-right: 80px;
-      margin-bottom: 20px;
+      padding-right: 0;
+      text-align: center;
+      margin-bottom: 10px;
     }
     .header__title_description {
-      color: ${(props) => props.theme.tertiaryColor};
-      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-      font-weight: 400;
-      font-size: 1.438rem;
-      line-height: 2rem;
-      padding-right: 80px;
-      margin-bottom: 30px;
+      padding-right: 0;
+      text-align: center;
+      margin-bottom: 20px;
     }
-    .catalog {
+    .header__button_section {
       display: flex;
       justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    img {
-      width: 100%;
-      max-width: 100%;
-      height: auto;
-      transform-origin: center; /* Set the transform origin to the center */
-      transform: translateZ(-50px) scale(1.1); /* Adjust translateZ and scale values for the desired parallax effect */
-      transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
     }
+  }
+}
+.col.catalog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    &:hover img {
-      transform: translateZ(0) scale(1); /* Adjust values for hover effect */
-    }
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.3s ease-in-out;
+  }
 
-    @media screen and (max-width: 992px) {
-      padding-bottom: 100px;
-      .catalog {
-        margin: 50px 0 0 0;
-      }
+  &:hover {
+    img {
+      transform: scale(1.2); 
     }
+  }
+}
 
-    @media screen and (max-width: 768px) {
-      padding: 50px 0;
-      .header__detail {
-        display: flex;
-        flex-direction: column;
-      }
-      .header__title {
-        padding-right: 0;
-        text-align: center;
-        margin-bottom: 10px;
-      }
-      .header__title_description {
-        padding-right: 0;
-        text-align: center;
-        margin-bottom: 20px;
-      }
-      .header__button_section {
-        display: flex;
-        justify-content: center;
-      }
+@media screen and (min-width: 1300px) {
+  .col.catalog {
+  img{
+    transform: scale(1.2);
+  }
+  &:hover {
+    img {
+      transform: scale(1.3); 
     }
   }
+}
+}
 `;
 
 const Header = () => {

src/sections/AWS-Diagram/index.js

@@ -1,12 +1,24 @@
 import React from "react";
-import Header from "./header";
+import FeatureHero from "../FeatureHero";
+// import Header from "./header";
 import Reviews from "../Pricing/review-slider";
 import Diagram from "./diagram";
+import AWSDark from "../../assets/images/AWS-Diagram/aws.svg";
+import AWSLight from "../../assets/images/AWS-Diagram/aws-light.svg";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
 const AwsDiagramPage = () => {
+  const { isDark } = useStyledDarkMode();
+
+  let data = {
+    heading: "AWS Architecture Diagram Tool",
+    sub_heading: "Create AWS diagrams easily with predefined templates and symbols designed for professionals.",
+    image: isDark ? AWSDark : AWSLight
+  };
   return (
     <>
-      <Header />
+      <FeatureHero data={data} />
+      {/* <Header /> */}
       <Diagram />
       <Reviews />
     </>

src/sections/FeatureHero/featureHero.style.js

@@ -8,7 +8,10 @@ const FeatureHeroWrapper = styled.div`
     padding: 100px 0 70px;
 
     .section-title {
-      text-align: left;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
     }
 
     .whiteboard-image{
@@ -22,15 +25,16 @@ const FeatureHeroWrapper = styled.div`
 
     #whiteboard-svg {
       transition: transform 0.3s ease-out;
-      transform-origin: top center;
+      transform-origin: bottom center;
+      transform: rotateX(12deg);
     }
 
     .whiteboard-heading {
       color: ${props => props.theme.whiteToBlack} !important;
       text-align: center;
       font-size: 4rem;
       font-weight: 600;
-      max-width: 768px;
+      max-width: 965px;
       margin: 0 auto;
       padding: 0 1rem;
     }
@@ -60,7 +64,7 @@ const FeatureHeroWrapper = styled.div`
     text-align: center;
     font-size: 1.75rem;
     line-height: 2.4rem;
-    max-width: 600px;
+    max-width: 965px;
     margin: 1rem auto;
     padding: 0 1rem
   }
@@ -82,7 +86,7 @@ const FeatureHeroWrapper = styled.div`
     }
 
     .whiteboard-heading{
-      font-size: 2rem !important;
+      font-size: 2.5rem !important;
     }
 
     .whiteboard-text {