Merge pull request #5224 from layer5io/ritiksaxena124/new-section

[Section]New section for AWS and GCP on hompage

Author: ritiksaxena124

src/components/Features/index.js

@@ -93,7 +93,15 @@ const Features = (props) => {
       <ContentWrapper>
         <h2>{props.title}</h2>
         <p className="text">{props.desc}</p>
-        <Link to={props.redirectLink}>Learn more &rarr;</Link>
+        {props.redirectLink ? <Link to={props.redirectLink}>Learn more &rarr;</Link>
+          : (<div className="small-card-container">
+            {props.redirectLinkWithImage.map((item) => (
+              <Link key={item.text} className="small-card" to={item.redirect}>
+                <img src={item.image} width={40} />
+                <span>{item.text}</span>
+              </Link>
+            ))}
+          </div>)}
       </ContentWrapper>
       {props.animationOne ? (
         <ImageWrapper ref={containerRef}>
@@ -117,7 +125,7 @@ const Features = (props) => {
           >
             <img src={getPerson(props.cursor * 2 + 1)} alt="" />
           </SvgRandomWrapper>
-          <Link to={props.redirectLink}>
+          <Link to={props.redirectLink ? props.redirectLink : props.redirectLinkWithImage[0].redirect}>
             <img src={props.imgLink} alt="image" />
           </Link>
         </ImageWrapper>
@@ -143,7 +151,7 @@ const Features = (props) => {
           >
             <img src={getPerson(props.cursor * 2 + 1)} alt="" />
           </SvgRandomWrapper>
-          <Link to={props.redirectLink}>
+          <Link to={props.redirectLink ? props.redirectLink : props.redirectLinkWithImage[0].redirect}>
             <img src={props.imgLink} alt="image" />
           </Link>
         </ImageWrapperTwo>

src/components/Features/style.js

@@ -38,6 +38,30 @@ export const Container = styled.div`
     animation-timing-function: ease-in-out;
     -webkit-animation-timing-function: ease-in-out;
   }
+  .small-card-container {
+    display: flex;
+    gap: 1rem;
+  }
+  .small-card {
+    padding: 0.75rem 1.25rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    width: fit-content;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: ${(props) => props.theme.text};
+    border: 2px solid ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
+    &:hover {
+      background-color: ${(props) => props.theme.whiteZeroEightToBlackZeroEight};
+    }
+
+    @media screen and (max-width: 500px) {
+      flex-direction: column;
+      justify-content: center;
+      text-align: center;
+    }
+  }
 `;
 export const SvgRandomWrapper = styled.div`
   position: absolute;