Merge pull request #25 from pablosaenzar/Solution-Guides-Two-Solution…

…-Guides Product Documentation and two solution guides
device42 · Aug 2, 2023 · dc0adda · dc0adda
2 parents b28c5d0 + 16429e9
commit dc0adda
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 28 deletions.
diff --git a/src/components/data/dummy-data.js b/src/components/data/dummy-data.js
@@ -56,24 +56,8 @@ const solutionGuideData = [
     whiteIcon: "assets/icons/white/jsm-integration-icon.svg",
     link: "/",
   },
-  {
-    title: "Software License Management",
-    icon: "assets/icons/purple/slm-icon.svg",
-    whiteIcon: "assets/icons/white/slm-icon.svg",
-    link: "/",
-  },
-  {
-    title: "Cloud Management",
-    icon: "assets/icons/purple/cloud-mgmt-icon.svg",
-    whiteIcon: "assets/icons/white/cloud-mgmt-icon.svg",
-    link: "/",
-  },
-  {
-    title: "ADM",
-    icon: "assets/icons/purple/adm-icon.svg",
-    whiteIcon: "assets/icons/white/adm-icon.svg",
-    link: "/",
-  },
+
+
   {
     title: "Advanced Reporting/DOQL",
     icon: "assets/icons/purple/advanced-reporting-icon.svg",

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -40,10 +40,10 @@ export default function Home() {
               ))}
             </div>
           </div>
-          <div className={styles.cardContainer}>
+          <div className={styles.cardContainerSolution}>
             <h2>Solution Guides</h2>
 
-            <div className={styles.cardsContainer}>
+            <div className={styles.cardsContainerSolution}>
               {solutionGuideData.map((card, idx) => (
                 <ContentCard key={idx} {...card} />
               ))}

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -3,6 +3,8 @@
  * and scoped locally.
  */
 
+
+
 .mainSection {
   display: flex;
   flex-flow: column nowrap;
@@ -76,7 +78,7 @@
   background-color: rgba(0, 0, 0, 0.4);
 }
 .helpSection h2 {
-  font-weight: 500;
+  font-weight: 600;
   font-size: 1.8rem;
   line-height: 2rem;
   margin-bottom: 1rem;
@@ -86,10 +88,10 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between; 
   margin: 1.6rem 0;
-  width: 100%;
-  padding: 0 46px;
+  width: 80%;
+  padding: 0 46px 30px;
 }
 .cardContainer {
   background-color: white;
@@ -99,28 +101,50 @@
   text-align: center;
 }
 
+.cardContainerSolution{
+  background-color: white;
+    width: 48%;
+    border: 1px solid #200264;
+    padding: 24px;
+    text-align: center;
+
+}
+
 [data-theme="dark"] .cardContainer {
   border: 1px solid white;
   background-color: rgba(0, 0, 0, 0.4);
 }
+
+[data-theme="dark"] .cardContainerSolution {
+  border: 1px solid white;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.cardsContainerSolution {
+  display: grid;
+  grid-template-columns: 2fr 2fr;
+  grid-gap: 1rem;
+}
 .cardsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 1rem;
 }
 .cardContainer h2 {
-  font-weight: 500;
+  font-weight: 600;
   font-size: 1.6rem;
   line-height: 2rem;
   margin-bottom: 1.9rem;
-  color: black;
+  color: #1E0068;
 }
 .solutionsGuidesSeeMore {
+
   display: flex;
   justify-content: center;
   align-items: center;
-  color: black;
-  grid-column: 2 / span 3;
+  /*color: black;8*/
+  color: transparent !important;
+  /*grid-column: 2 / span 3;*/
   font-size: 1.3rem;
   min-height: 102px;
 }
@@ -129,16 +153,32 @@
   color: white;
 }
 
+[data-theme="dark"] .solutionsGuidesSeeMore {
+  color: transparent;
+}
+
 @media screen and (max-width: 768px) {
   .contentCard {
     grid-template-columns: 1fr;
   }
+
+  .productsSection {
+    width: 100%;
+  }
 }
 
 @media only screen and (max-width: 1100px) and (max-width: 1200px) {
   .cardsContainer {
     grid-template-columns: 1fr 1fr;
   }
+
+  .cardsContainerSolution {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .cardsContainerSolution {
+    grid-template-columns: 1fr 1fr;
+  }
   .solutionsGuidesSeeMore {
     grid-column: 1 / span 2;
   }
@@ -151,11 +191,16 @@
     margin-bottom: 24px;
   }
 
+  .cardContainerSolution {
+    width: 100%;
+    margin-bottom: 24px;
+  }
   .cardsContainer_src-pages-index-module{
     display: block;
   }
 
   .productsSection {
     flex-direction: column;
+    width: 100%;
   }
 }