diff --git a/src/assets/png/accessibility.png b/src/assets/png/accessibility.png new file mode 100644 index 000000000..24cdaed9d Binary files /dev/null and b/src/assets/png/accessibility.png differ diff --git a/src/assets/png/components.png b/src/assets/png/components.png new file mode 100644 index 000000000..66699c9aa Binary files /dev/null and b/src/assets/png/components.png differ diff --git a/src/assets/png/patterns.png b/src/assets/png/patterns.png new file mode 100644 index 000000000..6439a0317 Binary files /dev/null and b/src/assets/png/patterns.png differ diff --git a/src/assets/png/styles.png b/src/assets/png/styles.png new file mode 100644 index 000000000..a08d71a37 Binary files /dev/null and b/src/assets/png/styles.png differ diff --git a/src/assets/svg/designers-image.svg b/src/assets/svg/designers-image.svg new file mode 100644 index 000000000..be47d6a23 --- /dev/null +++ b/src/assets/svg/designers-image.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/developers-image.svg b/src/assets/svg/developers-image.svg new file mode 100644 index 000000000..deb228f12 --- /dev/null +++ b/src/assets/svg/developers-image.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 479e15915..876870efb 100644 --- a/src/assets/svg/index.ts +++ b/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"; diff --git a/src/config.js b/src/config.js index 5106b4c0f..1fcaac677 100644 --- a/src/config.js +++ b/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 empowers 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 empower 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: "Our community", + }, }, // manualPageGroups: Will prevent Gatsby creating pages and routes automatically diff --git a/src/templates/Homepage/index.css b/src/templates/Homepage/index.css index 2d5eff1c4..379679223 100644 --- a/src/templates/Homepage/index.css +++ b/src/templates/Homepage/index.css @@ -1,48 +1,43 @@ .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); + 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 +78,13 @@ grid-template-columns: auto; } - .resources-cards { - grid-template-columns: auto; + .design-image, + .dev-image { + display: none; + } + + .homepage-button-container { + flex-direction: row; } .homepage { @@ -104,11 +104,21 @@ .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; } } @@ -116,12 +126,28 @@ .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 +164,29 @@ .section { margin: calc(var(--ic-space-xl) + var(--ic-space-xs)) 0; } + + .with-background-image { + height: 400px; + width: 550px; + } + + .design-div { + max-width: 500px; + margin-left: 90px; + } +} + +@media screen and (min-width: 1350px) { + .dev-image { + margin-left: calc(-2 * var(--ic-space-xxl)); + } + + .design-div { + max-width: 500px; + margin-left: 130px; + } + + .homepage-button-container { + flex-direction: row; + } } diff --git a/src/templates/Homepage/index.tsx b/src/templates/Homepage/index.tsx index 0a3e3a040..210481842 100644 --- a/src/templates/Homepage/index.tsx +++ b/src/templates/Homepage/index.tsx @@ -2,16 +2,18 @@ import React from "react"; import clsx from "clsx"; import { Link as GatsbyLink, withPrefix } from "gatsby"; import Icon from "@mdi/react"; -import { - mdiHumanHandsup, - mdiPaletteSwatch, - mdiPuzzle, - mdiViewDashboard, - mdiArrowRight, -} from "@mdi/js"; -import icdsHero from "../../../static/icds-hero.jpg"; +import { mdiArrowRight } from "@mdi/js"; +import { IcButtonVariants } from "@ukic/web-components"; +import icdsHero from "../../../static/icds-hero.png"; +import backgroundImage from "../../../static/background-image.png"; +import accessibility from "../../assets/png/accessibility.png"; +import components from "../../assets/png/components.png"; +import patterns from "../../assets/png/patterns.png"; +import styles from "../../assets/png/styles.png"; +import { DesignImage, DevImage } from "../../assets/svg"; import "./index.css"; +import { useViewportWidth } from "../../utils/helpers"; const { homepage } = require("../../config"); @@ -19,35 +21,56 @@ interface homepageCardItem { description: string; path: string; title: string; - icon: string; } const Homepage: React.FC = () => { - const renderIcon = (icon: string) => { - switch (icon) { - case "AccessibilityIcon": + const renderImage = (image: string) => { + const viewportWidth = useViewportWidth(); + const isSmallViewport: boolean = viewportWidth < 577; + switch (image) { + case "Accessibility": return ( - - - + !isSmallViewport && ( + An accessibility icon + ) ); - case "StyleOutlinedIcon": + case "Styles": return ( - - - + !isSmallViewport && ( + A h1, h2 and h3 element + ) ); - case "ExtensionOutlinedIcon": + case "Components": return ( - - - + !isSmallViewport && ( + A diamond shape split into four sections + ) ); - case "DashboardOutlinedIcon": + case "Patterns": return ( - - - + !isSmallViewport && ( + A collection of elements on a page + ) ); default: return null; @@ -61,6 +84,7 @@ const Homepage: React.FC = () => { subheading={homepage.hero.text} aligned="center" background-image={icdsHero} + disable-background-parallax="true" > @@ -75,14 +99,14 @@ const Homepage: React.FC = () => { - +
    {homepage.cards.content && homepage.cards.content.map((item: homepageCardItem) => (
  • - + { >

    {item.title}

     - {renderIcon(item.icon)} -     + +

    {item.description}

    +     + {renderImage(item.title)} +
    • ))}
- + +
{homepage.about.title} @@ -113,66 +145,125 @@ const Homepage: React.FC = () => { {text} ))} - - - {homepage.about.linkText}. - - + + {homepage.about.buttonText} +
-
- -

{homepage.contribute.title}

- - {homepage.contribute.content.map((text: string, index: number) => ( - - {text} + +
+ +
+ + {homepage.design.title} - ))} - - - {homepage.contribute.linkText}. - - + {homepage.design.content.map((text: string, index: number) => ( + + {text} + + ))} +
+ {homepage.design.button.map( + (button: { + href: string; + text: string; + variant: IcButtonVariants; + }) => ( + + {button.text} + + ) + )} +
+
+ +
+
+
+ -
- - {homepage.resources.title} - - {homepage.resources.content.map((text: string[], index: number) => ( - - {text} + + +
+
+ +
+
+ + {homepage.develop.title} - ))} -
    - {homepage.resources.cards && - homepage.resources.cards.map((item: homepageCardItem) => ( -
  • - - - -
    • - ))} -
+ {homepage.develop.content.map((text: string, index: number) => ( + + {text} + + ))} +
+ {homepage.develop.button.map( + (button: { + href: string; + text: string; + variant: IcButtonVariants; + }) => ( + + {button.text} + + ) + )} +
+
+ + + +
+ +
+ +

{homepage.contribute.title}

+ + {homepage.contribute.content.map((text: string, index: number) => ( + + {text} + + ))} + + {homepage.contribute.buttonText} + +
+ +
); }; diff --git a/src/types/wc.d.ts b/src/types/wc.d.ts index 20dc541c7..fdb0eb149 100644 --- a/src/types/wc.d.ts +++ b/src/types/wc.d.ts @@ -2,6 +2,7 @@ // This is a workaround to include type-safe stencil web components // with TSX https://github.com/ionic-team/stencil/issues/1636 import { JSX as LocalJSX } from "@ukic/web-components"; +import { JSX as LocalCanaryJSX } from "@ukic/canary-web-components"; import { DetailedHTMLProps, HTMLAttributes } from "react"; type StencilProps = { @@ -14,8 +15,9 @@ type ReactProps = { type StencilToReact< T = LocalJSX.IntrinsicElements, - U = HTMLElementTagNameMap -> = StencilProps & ReactProps; + U = HTMLElementTagNameMap, + V = LocalCanaryJSX.IntrinsicElements +> = StencilProps & ReactProps & StencilProps; declare global { // eslint-disable-next-line @typescript-eslint/no-namespace diff --git a/static/background-image.png b/static/background-image.png new file mode 100644 index 000000000..4ccc153d1 Binary files /dev/null and b/static/background-image.png differ diff --git a/static/icds-hero.jpg b/static/icds-hero.jpg deleted file mode 100644 index 7f170d24b..000000000 Binary files a/static/icds-hero.jpg and /dev/null differ diff --git a/static/icds-hero.png b/static/icds-hero.png new file mode 100644 index 000000000..a7dc1a903 Binary files /dev/null and b/static/icds-hero.png differ