Merge pull request #637 from dpc-sdp/feature/docs-marketing-copy

docs(docs): 📝 update about information

.vscode/extensions.json

@@ -10,6 +10,7 @@
     "editorconfig.editorconfig",
     "stylelint.vscode-stylelint",
     "alexkrechik.cucumberautocomplete",
-    "circleci.circleci"
+    "circleci.circleci",
+    "nuxt.mdc"
   ]
 }

.vscode/settings.json

@@ -31,6 +31,9 @@
   "cSpell.words": [
     "colour",
     "composables",
+    "customisation",
+    "customising",
+    "familiarise",
     "formkit",
     "jsonapi",
     "maxlength",

docs/app.config.ts

@@ -9,7 +9,7 @@ export default defineAppConfig({
       neutralFooter: false
     },
     framework: {
-      title: 'Ripple Layer Development Guide',
+      title: 'Ripple Framework',
       color: 'var(--rpl-clr-dark)',
       neutralFooter: true
     }

docs/components/content/DocsIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+interface Props {
+  name: string
+  size?: 'xs' | 's' | 'm' | 'l'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'xs'
+})
+</script>
+
+<template>
+  <RplIcon :name="name" colour="default" :size="size" />
+</template>

docs/content/1.index.md

@@ -5,13 +5,13 @@ icon: carbon:home
 layout: home
 primaryCTA: 
   title: For Designers
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
+  description: Information for designers using Ripple to create brand Victoria compliant digital experiences.
   image: 
     src: /assets/img/for-designers.png
   url: /design-system/design/getting-started
 secondaryCTA: 
   title: For Developers
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
+  description: How to get started implementing Ripple UI components in digital products.
   image:
     src: /assets/img/for-developers.png
   url: /design-system/develop/getting-started
@@ -20,25 +20,30 @@ modulesCTA:
   description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
   url: /framework
 quickLink1: 
-  title: Who should use it
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: About Ripple
+  description: Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.
+  url: /design-system/about/what-is-ripple
 quickLink2: 
-  title: How it works
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: Who should use it
+  description: Ripple is built by government for government to deliver services Victorians trust and rely on.
+  url: /design-system/about/whos-it-for
 quickLink3: 
-  title: Getting help
-  description: Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.
-  url: /
+  title: Design principles
+  description: The guiding principles that are the foundation of the Ripple Design System.
+  url: /design-system/design/our-design-principles
+
+framework:
+  title: Ripple framework
+  description: Ripple framework contains the tools for building SDP sites using Ripple design system components.
+  url: /framework
 # whatsNew: 
 #   title: What's new
 #   description: Ripple release information text
 #   links:
 #     - 
-#       text: 'This link goes somewhere'
+#       text: 'Ripple 2.0 changelog'
 #       url: '#first'
 #     - 
-#       text: 'As does this one'
+#       text: 'Ripple 2.0 Figma changelog'
 #       url: '#second'
 ---

docs/content/design-system/1.about/1.what-is-ripple.md

@@ -1,7 +1,66 @@
 ---
-title: What is ripple
-description: Page description
+title: About Ripple
+description: The design system for brand Victoria digital products
 layout: page
 ---
 
-## Content goes here
+Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.
+
+Developed by the Single Digital Presence (SDP) team within the Department of Government Services,
+Ripple strives to:
+
+- make it easier for citizens to find, understand and use government information
+- ensure users can easily navigate sites regardless of technical ability, location or device
+- allow designers and developers to create consistent Brand Victoria digital products
+- increase the speed of delivery for digital products and services
+
+Over 50 government websites use Ripple to date, including our main vic.gov.au platform. These sites attract the visitation of millions of views per month.
+
+
+![Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au](/assets/img/sites.png){.docs-center-img}
+
+
+## Why use Ripple?
+
+### We solve the hard problems so you don’t have to
+
+We have spent the past 5 years refining Ripple based on user feedback to ensure it...
+
+- meets the publishing needs of government users, and
+- makes it easier for citizens to interact with government services
+
+Ripple users can be confident their site meets the highest industry standards and best practices for:
+
+- accessibility
+- SEO
+- security
+- performance
+
+### Promotes efficiency and reuse across government
+
+Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.
+
+It provides a set of standards to manage design at scale, to...
+
+- reduce redundancy
+- create a shared language
+- provide visual consistency
+
+Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.
+
+### By government, for government
+
+The Ripple design system has been made open source by to foster collaboration across government. By making the system open source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.
+
+
+## Who can use Ripple?
+
+Ripple is open to all departments or agencies that use Victorian Government branding.
+
+See [Who's it for](2.whos-it-for.md) for more information on who Ripple is for.
+
+## How do I find out more?
+
+If you are a Victorian Government department or agency wanting to use Ripple in a brand Victoria digital product (or a vendor supporting them), please visit [https://www.vic.gov.au/work-sdp](https://www.vic.gov.au/work-sdp) or contact digital@dpc.vic.gov.au
+
+To find out more about the Single Digital Presence program please see [https://www.vic.gov.au/single-digital-presence](https://www.vic.gov.au/single-digital-presence).

docs/content/design-system/1.about/2.whos-it-for.md

@@ -0,0 +1,13 @@
+---
+title: Who's it for?
+description: Built by government for government.
+layout: page
+---
+
+Ripple is built to help deliver websites to deliver government information to Victorian citizens. It is primarily used by Victorian government departments and agencies through the [SDP program](https://www.vic.gov.au/single-digital-presence). 
+
+Ripple is designed to make it easy to communicate government information in a clear, concise and accessible manner for all Victorians. It is solely used to represent the Victorian government brand in digital products and services.
+
+> Ripple is intended for Victorian government branded products only, and should only be used to produce approved Victorian government branded communications.
+
+As the system is intended to be modular, it is possible to opt into various parts of the system. For example projects not on SDP can adopt the design into their own digital products, either by building their own components, referencing our styles or importing our components. See the [Usage page](../3.develop/3.usage.md) for more information. If you are site using or wanting to use Ripple in a non SDP project please get in [touch with us](3.getting-support.md) to see how we can support your project.

docs/content/design-system/1.about/3.getting-support.md

@@ -0,0 +1,26 @@
+---
+title: Support
+description: How to get help
+layout: page
+---
+
+
+The [Ripple design system](https://www.vic.gov.au/ripple-design-system) is maintained by the [Single Digital Presence (SDP)](https://www.vic.gov.au/single-digital-presence) team at the Victorian Department of Government Services.  
+
+You can reach out to us via the following channels:
+
+### For technical and project support
+
+- join the discussion on [GitHub](https://github.com/dpc-sdp/ripple-framework/discussions)
+- log a request through our [helpdesk](https://digital-vic.atlassian.net/servicedesk/customer/portals)
+- sign up to the [SDP Slack](vic-sdp.slack.com) (Open to projects with an MoU for application support)
+
+## Design enquiries
+
+Email: design@dpc.vic.gov.au
+
+## General enquiries
+
+Email: digital@dpc.vic.gov.au
+
+

docs/content/design-system/2.design/1.getting-started.md

@@ -4,7 +4,7 @@ description:
 layout: page
 ---
 
-Ripple is the design system for the Victorian Government’s digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.
+Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.
 
 The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.
 

docs/content/design-system/2.design/2.our-design-principles.md

@@ -17,7 +17,7 @@ The Ripple Design System uses these principles when making design decisions.
 
 ### Inclusive.
 
-- A11y is top priority
+- Accessibility is top priority
 - Collaborative in design
 - Transparent documentation
 - Friendly, helpful and trustworthy

docs/content/design-system/2.design/3.design-tokens.md

@@ -95,4 +95,4 @@ Design tokens prevent or reduce the need to find and replace thousands of instan
 
 ## For developers
 
-Design tokens in Ripple are implemented as CSS variables. E.g. `--rpl-clr-primary: #0052C2`. Theming is achieved by overriding or adjusting the value of these CSS variables.
+For information for developers using tokens to theme Ripple components see the [theming guide](../3.develop/2.theming.md)