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,35 +99,42 @@ 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: "Read our story",
     },
-    contribute: {
-      title: "Contribute",
+    design: {
+      title: "For designers",
       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).",
+        "Whether you're building a new interface or refining an existing one, our Figma UI Kit, principles and documentation enable you to create intuitive, consistent and accessible designs with ease.",
+      ],
+      button: [
+        { href: "", text: "Explore design", variant: "primary" },
+        { href: "", text: "Read our design principles", variant: "secondary" },
       ],
-      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.",
-        },
+    develop: {
+      title: "For developers",
+      content: [
+        "Our development UI Kit is built with Stencil.js to ensure seamless integration across React, Vue, Angular and other frameworks.",
+        "With a focus on accessibility and ease of use, these components equip developers to create responsive and inclusive experiences.",
+      ],
+      button: [
+        { href: "", text: "Explore development", variant: "primary" },
         {
-          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.",
+          href: "",
+          text: "Learn how we test components",
+          variant: "secondary",
         },
       ],
     },
+    contribute: {
+      title: "Contribute to our community",
+      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",
+      buttonText: "Find out more",
+    },
   },
 
   // manualPageGroups: Will prevent Gatsby creating pages and routes automatically

src/templates/Homepage/index.css

@@ -1,48 +1,48 @@
 .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));
+ic-card-horizontal {
+  --card-max-width: 568px;
 }
 
-.explore-cards ic-card,
-.resources-cards ic-card {
-  height: 100%;
+.explore-cards {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.explore-cards div.icon {
-  height: auto;
-  width: auto;
+.dev-image {
+  padding-right: calc(2 * var(--ic-space-xxl));
+  margin-left: 0;
 }
 
-.explore-cards div.card {
-  height: auto;
+.design-image {
+  padding-left: calc(var(--ic-space-xxl));
+  margin-right: 0;
 }
 
-.explore-cards div.card-header {
-  width: fit-content;
+.homepage-button-container {
+  display: flex;
+  gap: var(--ic-space-xs);
+  flex-direction: column;
 }
 
-.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 +83,9 @@
     grid-template-columns: auto;
   }
 
-  .resources-cards {
-    grid-template-columns: auto;
+  .design-image,
+  .dev-image {
+    display: none;
   }
 
   .homepage {
@@ -104,24 +105,52 @@
   .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;
+    padding-left: var(--ic-space-lg);
+  }
+
+  .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;
+    padding-left: var(--ic-space-xxl);
+  }
+
+  .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 +167,23 @@
   .section {
     margin: calc(var(--ic-space-xl) + var(--ic-space-xs)) 0;
   }
+
+  .with-background-image {
+    height: 400px;
+    width: 550px;
+  }
+}
+
+@media screen and (min-width: 1350px) {
+  .dev-image {
+    margin-left: calc(-2 * var(--ic-space-xxl));
+  }
+
+  .design-image {
+    margin-right: calc(-2 * var(--ic-space-xxl));
+  }
+
+  .homepage-button-container {
+    flex-direction: row;
+  }
 }