feat(root): update homepage designs to match Figma for v3

Update homepage designs to match Figma for v3

. #963

src/assets/svg/index.ts

@@ -4,3 +4,5 @@ export { default as MI5Logo } from "./mi5-logo.svg";
 export { default as SISLogo } from "./sis-logo.svg";
 export { default as ICDSLogo } from "./icds-logo.svg";
 export { default as StackBlitzLogo } from "./stackblitz-logo.svg";
+export { default as DesignImage } from "./designers-image.svg";
+export { default as DevImage } from "./developers-image.svg";

src/config.js

@@ -68,28 +68,24 @@ module.exports = {
         {
           path: "/accessibility/",
           title: "Accessibility",
-          icon: "AccessibilityIcon",
           description:
             "Design, build and test apps and services that work equitably for everyone.",
         },
         {
           path: "/styles",
           title: "Styles",
-          icon: "StyleOutlinedIcon",
           description:
             "Create experiences that empower time after time, across diverse touchpoints.",
         },
         {
           path: "/components",
           title: "Components",
-          icon: "ExtensionOutlinedIcon",
           description:
             "Rapidly build apps that work robustly across tech stacks and platforms.",
         },
         {
           path: "/patterns",
           title: "Patterns",
-          icon: "DashboardOutlinedIcon",
           description:
             "Lower learning curves and create super users with intuitive, extendable patterns.",
         },
@@ -103,34 +99,36 @@ module.exports = {
         "To find out more, delve into our story on how we support people and organisations develop valuable apps and services accessible for everyone.",
       ],
       link: "/get-started/a-design-system",
-      linkText: "Read the story of our Design System",
+      buttonText: "More info",
+    },
+    design: {
+      title: "For Designers",
+      content: [
+        "Create beautiful, cohesive experiences using the ICDS UI kits. Built in Figma, the ICDS UI kits contain design assets that map to the code libraries. That means a seamless hand-off from design to development, at any moment.",
+      ],
+      button: [
+        { href: "", text: "Our libraries", variant: "primary" },
+        { href: "", text: "Design principles", variant: "secondary" },
+      ],
+    },
+    develop: {
+      title: "For Developers",
+      content: [
+        "Install and use the UI Kit component library. Use React or web components to quickly build accessible interfaces. Web components can be used without a framework.",
+      ],
+      button: [
+        { href: "", text: "Our libraries", variant: "primary" },
+        { href: "", text: "UI Kit", variant: "secondary" },
+      ],
     },
     contribute: {
-      title: "Contribute",
+      title: "Contribute to ICDS",
       content: [
         "The Design System is primarily built for the large numbers of apps and services we have.",
         "While most of the work is undertaken by our Engineering teams, we've open sourced our Design System for the world to see, use and contribute to (which we think is very cool).",
       ],
       link: "/community",
-      linkText: "Learn how to contribute",
-    },
-    resources: {
-      title: "Resources",
-      content: [],
-      cards: [
-        {
-          path: "/get-started/install-components",
-          title: "Install the UI Kit components",
-          description:
-            "Install and use the UI Kit component library. Use React or web components to quickly build accessible interfaces.",
-        },
-        {
-          path: "/get-started/figma",
-          title: "Figma UI Kit",
-          description:
-            "Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and digital products.",
-        },
-      ],
+      buttonText: "Learn more",
     },
   },
 

src/templates/Homepage/index.css

@@ -1,48 +1,42 @@
 .cards-container {
   margin: 0;
   display: grid;
-  grid-gap: var(--ic-space-lg);
+  grid-gap: var(--ic-space-md);
   list-style: none;
 }
 
 .explore-cards {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.explore-cards ic-card,
-.resources-cards ic-card {
-  height: 100%;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.explore-cards div.icon {
-  height: auto;
+.design-div {
   width: auto;
 }
 
-.explore-cards div.card {
-  height: auto;
+.dev-image {
+  padding-right: calc(2 * var(--ic-space-xxl));
+  margin-left: 0;
 }
 
-.explore-cards div.card-header {
-  width: fit-content;
+.homepage-button-container {
+  display: flex;
+  gap: var(--ic-space-xs);
 }
 
-.resources-cards {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.display-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .divider {
   padding: 0;
   margin: 0;
   border: none;
-  height: 1;
+  height: var(--ic-space-1px);
   background-color: var(--ic-architectural-300);
 }
 
-.card-icon {
-  color: var(--ic-action-default);
-}
-
 .ic-typography[data-class="text-content"] {
   max-width: 54rem;
 }
@@ -83,8 +77,9 @@
     grid-template-columns: auto;
   }
 
-  .resources-cards {
-    grid-template-columns: auto;
+  .design-image,
+  .dev-image {
+    display: none;
   }
 
   .homepage {
@@ -104,24 +99,50 @@
   .section {
     margin: var(--ic-space-lg) 0;
   }
-}
 
-@media screen and (min-width: 577px) and (max-width: 992px) {
-  .explore-cards {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .design-image {
+    width: 312px;
+    height: 200px;
+  }
+
+  .dev-image {
+    width: 280px;
+    height: 232px;
+    padding-right: var(--ic-space-lg);
+  }
+
+  .with-background-image {
+    height: 350px;
+    width: 400px;
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 992px) {
   .homepage {
     padding-bottom: calc(var(--ic-space-lg) + var(--ic-space-xxs));
   }
+
+  .design-image {
+    width: 468px;
+    height: 300px;
+  }
+
+  .dev-image {
+    width: 468px;
+    height: 388px;
+    padding-right: var(--ic-space-xxl);
+  }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1200px) {
   .section {
     margin: var(--ic-space-xl) 0;
   }
+
+  .with-background-image {
+    height: 400px;
+    width: 550px;
+  }
 }
 
 @media screen and (min-width: 993px) and (max-width: 1200px) {
@@ -138,4 +159,19 @@
   .section {
     margin: calc(var(--ic-space-xl) + var(--ic-space-xs)) 0;
   }
+
+  .with-background-image {
+    height: 400px;
+    width: 550px;
+  }
+
+  .design-div {
+    max-width: 370px;
+  }
+}
+
+@media screen and (min-width: 1350px) {
+  .dev-image {
+    margin-left: calc(-2 * var(--ic-space-xxl));
+  }
 }