minor changes

Signed-off-by: Modern-artist <[email protected]>

Author: Modern-artist

src/assets/images/products/MesheryRange.svg

@@ -5,8 +5,8 @@ import FeatureDetails from "./collapsible-details";
 import Button from "../../reusecore/Button";
 import darkbgSvg from "../../assets/images/products/circle_dark.svg";
 import lightbgSvg from "../../assets/images/products/circle_light.svg";
-import product_hero_img from "../../assets/images/products/MesheryRange.svg";
-import product_hero_img_light from "../../assets/images/products/mesheryRangeLight.svg";
+import product_hero_img from "../../assets/images/products/MesheryRangeDark.svg";
+import product_hero_img_light from "../../assets/images/products/MesheryRange.svg";
 import desktop from "../../assets/images/products/fluent_desktop-mac.png";
 import codicon from "../../assets/images/products/codicon_extensions.svg";
 import mesheryLogo from "../../assets/images/products/meshery-logo-light.svg";
@@ -162,13 +162,16 @@ const CardsData = [
     title: "Meshmap",
     icon: [codicon, desktop],
     text: "GitOps-infused cloud native visual designer for Kubernetes and cloud native applications. MeshMap works with your Kubernetes clusters so that you design and manage your infrastructure and applications between members of your team.",
+    //as there is no soluton page.
+    url: "/cloud-native-management/meshmap"
   },
   {
     id: 2,
     logo: mesheryLogo,
     title: "Meshery",
     icon: [desktop],
     text: "A cloud native management plane that enables the operation and management of Kubernetes, any service mesh, and their workloads. it enables operators to deploy WebAssembly filters to Envoy-based data planes.",
+    url: "https://meshery.io/"
   },
 ];
 
@@ -229,7 +232,9 @@ const index = () => {
                     </div>
                     <div className="text">{card.text}</div>
                     <div className="card_bottom">
-                      <div className="learn">Learn more</div>
+                      {/* <Link className="learn" > */}
+                      <a className="learn" href={card.url}>Learn more</a>
+                      {/* </Link> */}
                       <div className="btns">
                         <Button button secondary className="banner-btn two" title="Subscribe" alt=""/>
                       </div>
@@ -249,7 +254,7 @@ const index = () => {
               <p className="paraInfo">
                 Embrace the future of technology and embark on a transformative journey with our comprehensive range of products prepared to meet your needs. Elevate, Innovate, and conquer the cloud with us today!
               </p>
-              <Button button secondary className="banner-btn two" title="Explore" alt=""/>
+              <Button button secondary className="banner-btn two" title="Open Playground" alt=""/>
             </div>
           </div>
           <div className="headers bot_gap">

src/assets/images/products/productHero.svg renamed to src/assets/images/products/MesheryRangeDark.svg

@@ -325,13 +325,13 @@ const PricingWrapper = styled.section`
     color: ${(props) => props.theme.whiteToBlack};
     margin: 2rem 0;
   }
+  .btn {
+      display: flex;
+      gap: 40px;
+      flex-direction: row;
+    }
   .btn Button {
-    color: black;
     font-size: 18px;
-    font-weight: 700;
-    margin: 1rem;
-    margin-left: 0;
-    width: 100px;
   }
   .hoverCard {
     margin-top: 1rem;
@@ -388,16 +388,13 @@ height: 100%;
 
   .card_head {
     display: flex;
+    align-items: center;
+    margin-bottom: 20px;
     position: relative;
   }
-  .card_head .logo {
-    padding: 1rem;
-    padding-left: 0;
-    padding-top: 0;
-  }
+
   .card_head .title {
-    padding: 1rem;
-    padding-top: 0;
+    padding-left: 1rem;
     font-size: 32px;
     font-weight: 700;
   }
@@ -417,6 +414,7 @@ height: 100%;
     margin:0;
   }
   .card_bottom .learn {
+    font-size: 1rem;
     margin-bottom: 10px;
     text-decoration: underline;
     text-decoration-color: ${(props) => props.theme.secondaryColor};
@@ -425,9 +423,9 @@ height: 100%;
     color: ${(props) => props.theme.whiteToBlack};
   }
   .btns Button {
-    margin: 20px 10px;
-    color: ${(props) => props.theme.whiteToBlack};
-    font-weight: 700;
+    margin: 20px 0px;
+    /* color: ${(props) => props.theme.whiteToBlack}; */
+    /* font-weight: 700; */
     font-size: 20px;
     margin-bottom:0;
   }
@@ -460,6 +458,7 @@ height: 100%;
     .product_hero_text {
       text-align: center;
       margin: 2rem;
+      margin-top: 4rem;
     }
     .product_hero_text h1 {
       justify-content: center;
@@ -473,6 +472,9 @@ height: 100%;
       justify-content: center;
       margin: auto;
     }
+    .btn {
+      justify-content: center;
+    }
 
     .card_head {
       align-items: flex-start;
@@ -535,13 +537,12 @@ height: 100%;
       margin-top: 10px;
     }
     .btn {
-      display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .product_hero_text {
-      margin: 1rem;
+      margin: 4rem 1rem;
     }
     .product_cards .card {
       width: 320px;