diff --git a/build/spas.ts b/build/spas.ts index 62e52645f654..6d500d2877b6 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -25,7 +25,12 @@ import { } from "../libs/env/index.js"; import { isValidLocale } from "../libs/locale-utils/index.js"; import { DocFrontmatter, DocParent, NewsItem } from "../libs/types/document.js"; -import { getSlugByBlogPostUrl, makeTOC } from "./utils.js"; +import { + getSlugByBlogPostUrl, + injectLoadingLazyAttributes, + makeTOC, + postProcessExternalLinks, +} from "./utils.js"; import { findByURL } from "../content/document.js"; import { buildDocument } from "./index.js"; import { findPostBySlug } from "./blog.js"; @@ -309,6 +314,8 @@ export async function buildSPAs(options: { }; const [$] = await kumascript.render(url, {}, d); wrapTables($); + postProcessExternalLinks($); + injectLoadingLazyAttributes($); const [sections] = await extractSections($); const toc = makeTOC({ body: sections }); @@ -355,6 +362,7 @@ export async function buildSPAs(options: { OBSERVATORY_TITLE ); await buildStaticPages(path.join(GENERIC_CONTENT_ROOT, "community")); + await buildStaticPages(path.join(GENERIC_CONTENT_ROOT, "about")); } // Build all the home pages in all locales. diff --git a/client/src/about/_mixins.scss b/client/src/about/_mixins.scss new file mode 100644 index 000000000000..eb3522309b7e --- /dev/null +++ b/client/src/about/_mixins.scss @@ -0,0 +1,282 @@ +@use "../ui/vars" as *; +@use "../ui/atoms/button/mixins" as button; + +@mixin theme-setup { + .light & { + @content (light); + } + + .dark & { + @content (dark); + } + + // OS Default. + :root:not(.light):not(.dark) & { + @media (prefers-color-scheme: light) { + @content (light); + } + + @media (prefers-color-scheme: dark) { + @content (dark); + } + } +} + +@mixin layout { + h2, + h3, + p { + margin: 0; + } + + h2, + h3 { + color: var(--layout-text-primary); + + a { + color: unset; + text-decoration: none; + } + } + + a { + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + p + p { + margin-top: 1.5rem; + } + + section { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width); + padding-left: var(--gutter); + padding-right: var(--gutter); + width: 100%; + } + + h2 { + font-size: 2rem; + font-weight: 600; + margin-bottom: 1rem; + + @media (max-width: $screen-md) { + font-size: 1.375rem; + } + } +} + +@mixin header { + background: linear-gradient( + to top, + var(--header-next-section-bg, transparent) 0%, + var(--header-next-section-bg, transparent) + calc(var(--header-stats-height) / 2), + var(--header-bg) calc(var(--header-stats-height) / 2), + var(--header-bg) 100% + ); + + @media (max-width: $screen-md) { + padding-top: 1rem; + } + + section { + padding-top: 5rem; + + @media (max-width: $screen-md) { + padding-top: 0; + } + } + + h1 { + color: var(--header-text-primary); + font-size: 2.5rem; + margin-bottom: 1rem; + + @media (max-width: $screen-md) { + font-size: 2rem; + } + } + + p { + color: var(--header-text-secondary); + margin-bottom: 1.5rem; + } + + + section { + margin-top: 4.56rem; + + @media (max-width: $screen-md) { + margin-top: 2rem; + } + } +} + +@mixin stats { + background: var(--stats-bg); + border-radius: 0.5rem; + box-shadow: var(--stats-box-shadow); + color: var(--stats-text-primary); + display: flex; + gap: 1rem; + justify-content: space-around; + margin-top: 5em; + padding: 1rem; + position: relative; + text-align: center; + z-index: 2; + + @media (max-width: $screen-md) { + flex-wrap: wrap; + margin-top: 2rem; + } + + li { + align-items: baseline; + column-gap: 1rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + min-width: 7.75rem; + overflow-wrap: anywhere; + + @media (max-width: $screen-md) { + align-items: center; + flex: 1; + flex-direction: column; + justify-content: flex-start; + } + + strong { + align-items: center; + background: var(--stats-stat-bg); + border-radius: 50%; + color: var(--stats-stat-text); + display: inline-flex; + height: 3.75rem; + justify-content: center; + width: 3.75rem; + } + } +} + +@mixin section { + column-gap: min(5rem, 5vw); + display: grid; + grid-template-columns: 4fr 6fr; + + @media (max-width: $screen-md) { + display: block; + } + + > * { + min-width: 0; + } +} + +@mixin boxes { + display: grid; + gap: 2rem; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + + li { + align-items: center; + background: var(--boxes-bg); + border: 1px solid var(--boxes-border); + border-radius: 0.5rem; + box-shadow: var(--boxes-shadow); + display: flex; + flex-direction: column; + gap: 1.5rem; + justify-content: space-between; + padding: 1.5rem; + text-align: center; + + h3, + h4, + h5, + h6 { + align-self: stretch; + background: var(--boxes-header-bg); + border-radius: 0.5rem 0.5rem 0 0; + color: var(--boxes-header-color); + font-size: 1.25rem; + font-weight: 500; + margin: -1.5rem; + margin-bottom: 0; + padding: 1.5rem; + } + + p { + color: var(--boxes-main-color); + margin: 0; + } + } +} + +@mixin stairs { + --stairs-icon-size: 3.125rem; + --stairs-step-indent: 3.125rem; + --stairs-step-gap: 4rem; + + li { + --stairs-padding-left: calc(var(--stairs-step-indent) * var(--nth-child)); + align-items: center; + display: flex; + gap: 1rem; + padding-left: var(--stairs-padding-left); + position: relative; + + @media (max-width: $screen-md) { + --stairs-step-indent: 0; + --stairs-padding-left: var(--stairs-icon-size); + --stairs-step-gap: 1rem; + } + + &:not(:last-of-type) { + margin-bottom: var(--stairs-step-gap); + } + + &::before { + background: var(--stairs-color); + content: ""; + display: block; + flex-shrink: 0; + height: var(--stairs-icon-size); + margin-left: calc(-1 * var(--stairs-icon-size)); + mask-image: var(--stairs-icon); + mask-position: center; + mask-repeat: no-repeat; + mask-size: 80%; + width: var(--stairs-icon-size); + } + + &:not(:last-of-type)::after { + --height: calc(var(--stairs-step-gap) * 1.2); + background: linear-gradient(to bottom, var(--stairs-color), transparent); + bottom: calc(-1 * var(--height)); + content: ""; + display: block; + height: var(--height); + left: calc(var(--stairs-padding-left) - 50px); + mask: url("../assets/lines.svg"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + position: absolute; + width: calc(var(--stairs-icon-size) + var(--stairs-step-indent)); + } + } + + @for $i from 1 through 4 { + li:nth-child(#{$i}) { + --nth-child: #{$i}; + } + } +} diff --git a/client/src/about/custom-elements.js b/client/src/about/custom-elements.js new file mode 100644 index 000000000000..35df7bcbb4d9 --- /dev/null +++ b/client/src/about/custom-elements.js @@ -0,0 +1,76 @@ +import { LitElement } from "lit"; + +export class MDNImageHistory extends LitElement { + createRenderRoot() { + return this; + } + + firstUpdated() { + this.renderRoot.querySelectorAll("img").forEach((img) => { + const regex = /@([0-9]+(?:\.[0-9]+)?)(?=x\.[a-z]+$)/; + const match = img.src.match(regex); + if (match?.[1]) { + const baseRes = parseFloat(match[1]); + const dpis = [1, 2]; + img.srcset = dpis + .map( + (dpi) => `${img.src.replace(regex, `@${baseRes * dpi}`)} ${dpi}x` + ) + .join(", "); + } + }); + } +} + +customElements.define("mdn-image-history", MDNImageHistory); + +export class TeamMember extends LitElement { + _setID() { + const hx = this.querySelector("h4, h5"); + const panel = hx?.closest(".tabpanel"); + if (hx && panel) { + const id = `${panel.id.replace("-panel", "")}_${hx.id}`; + if (this.id !== id) { + this.id = id; + } + } + } + + /** @param {FocusEvent} ev */ + _focusin({ currentTarget }) { + if (currentTarget instanceof HTMLElement) { + window.history.pushState({}, "", `#${currentTarget.id}`); + this.scrollIntoView({ block: "nearest", inline: "nearest" }); + } + } + + /** @param {MouseEvent} ev */ + _mousedown(ev) { + if (ev.target instanceof HTMLAnchorElement) { + ev.preventDefault(); + } + } + + createRenderRoot() { + return this; + } + + connectedCallback() { + super.connectedCallback(); + this.tabIndex = 0; + this._setID(); + this.addEventListener("mousedown", this._mousedown); + this.addEventListener("focusin", this._focusin); + if (window.location.hash === `#${this.id}`) { + setTimeout(() => this.focus(), 0); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + this.removeEventListener("mousedown", this._mousedown); + this.removeEventListener("focusin", this._focusin); + } +} + +customElements.define("team-member", TeamMember); diff --git a/client/src/about/index.scss b/client/src/about/index.scss index 3388f85691c9..4b67acbc5f23 100644 --- a/client/src/about/index.scss +++ b/client/src/about/index.scss @@ -1,55 +1,820 @@ @use "../ui/vars" as *; +@use "../ui/mixins" as *; +@use "../about/mixins" as about; -.about { - width: 100%; +main.about-container { + --about-stats-height: 5.75rem; + --about-section-gap: 5rem; + --max-width: 74rem; + --inner-width: calc(min(var(--max-width), 100vw) - 2 * var(--gutter)); - .about-container { - margin: 0 auto; - max-width: 52rem; - padding: 0 1rem 2rem; + background: var(--about-bg-primary); + color: var(--about-color); - h1 { - margin-top: 3rem; + @media (max-width: $screen-md) { + --about-section-gap: 3rem; + } + + @include about.layout; + + @include about.theme-setup using ($mode) { + @if $mode == light { + --header-next-section-bg: #f2f2f5; + --header-text-primary: #000; + --header-text-secondary: #343434; + --header-bg: #fff; + --stats-bg: #fff; + --stats-box-shadow: 4px -2px 15px 0 rgba(179, 179, 179, 0.2), + 4px -4px 15px 0 rgba(179, 179, 179, 0.15); + --stats-text-primary: #000; + --stats-stat-bg: #d7f5dc; + --stats-stat-text: #007936; + --boxes-bg: #fff; + --boxes-border: none; + --boxes-shadow: -4px 4px 8px 0 rgba(179, 179, 179, 0.15), + 4px 4px 8px 0 rgba(179, 179, 179, 0.18); + --boxes-header-bg-1: #d5e8fb; + --boxes-header-color-1: inherit; + --boxes-header-bg-2: #fbe3d5; + --boxes-header-color-2: inherit; + --boxes-header-bg-3: #fbf7d5; + --boxes-header-color-3: inherit; + --boxes-header-bg-4: #fbd5d5; + --boxes-header-color-4: inherit; + --boxes-header-bg-5: #dfd5fb; + --boxes-header-color-5: inherit; + --boxes-main-color: #000; + --stairs-color: #007936; + --about-bg-primary: #fff; + --about-bg-secondary: #f2f2f5; + --about-join-us-bg: #f2f2f5; + --about-join-us-border: none; + --about-join-us-color: #343434; + --about-join-us-image: url("../assets/about/building.svg"); + --about-tablist-border: #858585; + --about-tablist-color: rgba(0, 0, 0, 0.6); + --about-tablist-active-border: #007936; + --about-tablist-active-color: #000; + --about-color: #000; + --about-heading-color: #000; + --about-core-values-bg: #fff; + --about-core-values-bg-secondary: #d7f5dc; + --about-core-values-color: #000; + --about-core-values-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2); + --about-team-title-color: #007936; + --about-team-bg: #fff; + --about-team-github-bg: rgba(255, 255, 255, 0.75); + --about-team-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2); + --about-team-color: #000; + --about-journey-line-color: #007936; + --about-journey-image-border: #fff; + --about-journey-shadow: 4px -4px 15px 0 rgba(179, 179, 179, 0.25), + 4px 4px 15px 0 rgba(179, 179, 179, 0.25); + --about-journey-dot: url("../assets/about/dot.svg"); + --about-global-impact-image: url("../assets/about/global-impact.svg"); } - @media (min-width: $screen-md) { - h1 { - font-size: 3.5rem; + @if $mode == dark { + --header-next-section-bg: #1b1b1b; + --header-text-primary: #fff; + --header-text-secondary: #b3b3b3; + --header-bg: #101010; + --stats-bg: #000; + --stats-box-shadow: 4px -2px 15px 0 rgba(38, 38, 38, 0.2), + 4px -4px 15px 0 rgba(38, 38, 38, 0.15); + --stats-text-primary: #b3b3b3; + --stats-stat-bg: #394035; + --stats-stat-text: #8ff295; + --boxes-bg: #000; + --boxes-border: #4e4e4e; + --boxes-shadow: none; + --boxes-header-bg-1: #141e34; + --boxes-header-color-1: #9bb6f2; + --boxes-header-bg-2: #321d13; + --boxes-header-color-2: #e3642a; + --boxes-header-bg-3: #343114; + --boxes-header-color-3: #d4c53b; + --boxes-header-bg-4: #341419; + --boxes-header-color-4: #f19ca1; + --boxes-header-bg-5: #1d1434; + --boxes-header-color-5: #bf94ec; + --boxes-main-color: #b3b3b3; + --stairs-color: #8ff295; + --about-bg-primary: #1b1b1b; + --about-bg-secondary: #1b1b1b; + --about-join-us-bg: #000; + --about-join-us-border: 1px solid #4e4e4e; + --about-join-us-color: #b3b3b3; + --about-join-us-image: url("../assets/about/building-dark.svg"); + --about-tablist-border: #858585; + --about-tablist-color: #b3b3b3; + --about-tablist-active-border: #8ff295; + --about-tablist-active-color: #fff; + --about-color: #b3b3b3; + --about-heading-color: #fff; + --about-core-values-bg: #000; + --about-core-values-bg-secondary: #007936; + --about-core-values-color: #fff; + --about-core-values-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2); + --about-team-title-color: #8ff295; + --about-team-bg: #000; + --about-team-github-bg: rgba(0, 0, 0, 0.7); + --about-team-shadow: 0 4px 15px 0 rgba(179, 179, 179, 0.2); + --about-team-color: #fff; + --about-journey-line-color: #8ff295; + --about-journey-image-border: #000; + --about-journey-shadow: 4px -4px 15px 0 rgba(179, 179, 179, 0.25), + 4px 4px 15px 0 rgba(179, 179, 179, 0.25); + --about-journey-dot: url("../assets/about/dot-dark.svg"); + --about-global-impact-image: url("../assets/about/global-impact-dark.svg"); + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--about-heading-color); + letter-spacing: 0; + } + + strong { + letter-spacing: 0; + } + + > header { + --header-stats-height: var(--about-stats-height); + @include about.header; + + h1 + p { + font-size: 2rem; + font-weight: 500; + line-height: 120%; + max-width: 43rem; + + @media (max-width: $screen-md) { + font-size: 1.25rem; } } - header { - align-items: center; - display: flex; - flex-direction: column; - gap: 1rem; - padding: 2rem 0; + ul { + @include about.stats; + } + } + + > section { + --center-padding: max( + calc((100vw - var(--max-width)) / 2 + var(--gutter)), + var(--gutter) + ); + @include about.section; - .headline { - font-family: var(--font-heading); - font-size: 1.313rem; - font-style: normal; - font-variation-settings: normal; - font-weight: normal; - line-height: 175%; - margin: 0; + &[aria-labelledby="who_we_are"] { + background: var(--about-bg-secondary); + margin: 0; + max-width: none; + padding: 4rem var(--center-padding); + } + + .tabs { + grid-column: 1 / -1; + padding-top: 2rem; + position: relative; + + .tablist-wrapper { + background: var(--about-bg-secondary); + margin: 0 calc(-1 * var(--center-padding)); + margin-bottom: 2rem; + padding: 0 var(--center-padding); + position: sticky; + top: var(--top-nav-height); + z-index: 2; + } + + .tablist { + border-bottom: 1px solid var(--about-tablist-border); + display: flex; + gap: 3rem; + overflow-x: auto; + + @media (max-width: $screen-md) { + margin-left: calc(-1 * var(--gutter)); + margin-right: calc(-1 * var(--gutter)); + padding: 0 var(--gutter); + } + + a { + color: var(--about-tablist-color); + flex-shrink: 0; + text-decoration: none; + } + + .active { + border-bottom: 2px solid var(--about-tablist-active-border); + color: var(--about-tablist-active-color); + } + } + + > .tabpanel:not(.active) { + display: none !important; } } - p { - font-size: 1rem; - font-weight: 350; - line-height: 175%; + #what_we_offer-panel { + ul { + @include about.boxes; + + @media (min-width: $screen-md) { + gap: 5rem; + } + + @media (min-width: $screen-lg) { + gap: 5rem 8.5rem; + } + + li { + justify-content: flex-start; + } + + @for $i from 1 through 5 { + li:nth-of-type(#{$i}) { + --boxes-header-bg: var(--boxes-header-bg-#{$i}); + --boxes-header-color: var(--boxes-header-color-#{$i}); + } + } + } } - h2 { - font-size: 1.3rem; + #our_journey-panel { + --image-inner-height: calc(720px * 0.45); + --image-border-size: 4px; + --image-height: calc( + var(--image-inner-height) + var(--image-border-size) * 2 + ); + --image-width: calc( + var(--image-inner-height) * 16 / 9 + var(--image-border-size) * 2 + ); + --dot-height: 3rem; + --separator-width: 10rem; + --list-width: calc( + var(--inner-width) - var(--separator-width) - var(--image-width) + ); + + @media (max-width: $screen-xl) { + --separator-width: 6rem; + } + + > p { + margin-bottom: 1rem; + } + + > ul { + border-right: var(--about-journey-line-color) dashed 0.0625rem; + margin-top: 3rem; + width: var(--list-width); + + @media (max-width: $screen-lg) { + border-left: var(--about-journey-line-color) dashed 0.0625rem; + border-right: none; + margin-left: 1rem; + width: auto; + } + + li { + margin: 8rem 0; + min-height: var(--image-height); + padding-right: 2rem; + position: relative; + + &:first-of-type { + margin-top: 2rem; + } + + &:last-of-type { + margin-bottom: 2rem; + } + + @media (max-width: $screen-lg) { + padding-left: 2rem; + } + + &::after { + // dot on vertical dashed line + background-image: var(--about-journey-dot); + background-position: center center; + background-repeat: no-repeat; + content: ""; + display: block; + height: var(--dot-height); + position: absolute; + right: calc(var(--dot-height) / -2); + top: calc(var(--dot-height) / -2); + width: var(--dot-height); + + @media (max-width: $screen-lg) { + --dot-height: 2rem; + left: calc(var(--dot-height) / -2); + right: auto; + } + } + + &:has([id="2017"], [id="20232024"]) { + min-height: 0; + } + } + + h4 { + font-size: 1.375rem; + font-weight: 600; + line-height: 1.5; + margin: 0; + position: relative; + text-decoration-line: underline; + top: -0.75em; + + @media (max-width: $screen-lg) { + font-size: 1.25rem; + margin-bottom: -0.75em; + } + + &::before { + // horizontal line to dot + background: var(--about-journey-line-color); + content: ""; + display: none; + height: 10px; + left: calc(100% + 2rem); + mask-image: url("../assets/about/line-dot.svg"); + mask-position: center right; + mask-repeat: no-repeat; + mask-size: cover; + position: absolute; + top: calc(0.75em - 5px); + width: calc(var(--separator-width) - var(--dot-height) / 2); + + @media (max-width: $screen-lg) { + content: none; + } + } + + ~ p:last-of-type > img { + // image + background-color: var(--about-journey-image-border); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + border: var(--image-border-size) solid + var(--about-journey-image-border); + box-shadow: var(--about-journey-shadow); + height: var(--image-height); + left: calc(var(--inner-width) - var(--image-width)); + max-width: var(--image-width); + position: absolute; + top: calc(var(--dot-height) / -2); + width: var(--image-width); + + @media (max-width: $screen-lg) { + aspect-ratio: 16 / 9; + box-sizing: content-box; + height: auto; + left: auto; + margin: 2rem auto; + max-height: var(--image-inner-height); + max-width: 100%; + position: relative; + top: auto; + width: auto; + } + } + + &[id="2005"] { + &::before, + ~ p:last-of-type::after { + display: block; + } + } + + &[id="2010"] { + &::before, + ~ p:last-of-type::after { + display: block; + } + } + + &[id="2020"] { + &::before, + ~ p:last-of-type::after { + display: block; + } + } + + &[id="2022"] { + &::before, + ~ p:last-of-type::after { + display: block; + } + } + } + } + + h4 { + font-size: 1.75rem; + font-weight: 600; + } + + mdn-image-history ul { + display: flex; + gap: 1rem; + margin-bottom: -1rem; + overflow-x: auto; + padding-bottom: 1rem; // space for scrollbar + + li { + flex-shrink: 0; + } + + img { + aspect-ratio: 16 / 9; + border: var(--image-border-size) solid + var(--about-journey-image-border); + box-sizing: content-box; + height: calc(720px / 4); + } + } } - .heading-break { - display: none; - @media (min-width: $screen-md) { - display: block; + #our_core_values-panel { + li { + border-radius: 0.5rem; + color: var(--about-core-values-color); + + h4 { + color: var(--about-core-values-color); + font-size: 1rem; + font-weight: 600; + letter-spacing: -0.03125rem; + margin: 0; + margin-bottom: 0.5rem; + } + + &:not(:last-of-type) { + background: var(--about-core-values-bg-secondary); + margin: 1rem auto; + padding: 2rem; + + h4 { + --icon-size: 45px; + align-items: center; + background-position: left center; + background-repeat: no-repeat; + background-size: var(--icon-size) var(--icon-size); + display: flex; + min-height: var(--icon-size); + padding-left: calc(var(--icon-size) + 1rem); + + &#accurate_and_reliable { + background-image: url("../assets/about/accurate-sm.svg"); + } + + &#collaborative_and_community-driven { + background-image: url("../assets/about/collaborative-sm.svg"); + } + + &#inclusive_and_dynamic { + background-image: url("../assets/about/inclusive-sm.svg"); + } + } + } + + &:last-of-type { + background: var(--about-core-values-bg); + margin-top: 2rem; + padding: 2rem; + } + + @media (min-width: $screen-lg) { + display: grid; + grid-auto-flow: dense; + grid-template-columns: [left-start] 40% [left-end right-start] 1fr [right-end]; + padding: 2rem; + + h4 { + font-size: 1.75rem; + margin: 0; + max-width: 70%; + } + + p { + margin-left: var(--gutter); + } + + &:not(:last-of-type) { + background: var(--about-core-values-bg); + margin: 0 auto; + + &:not(:first-of-type) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &:not(:nth-last-of-type(2)) { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + h4 { + --icon-size: 60px; + + align-self: center; + + &#accurate_and_reliable { + background-image: url("../assets/about/accurate.svg"); + } + + &#collaborative_and_community-driven { + background-image: url("../assets/about/collaborative.svg"); + } + + &#inclusive_and_dynamic { + background-image: url("../assets/about/inclusive.svg"); + } + } + + p { + background: var(--about-core-values-bg-secondary); + border-radius: 0.5rem; + padding: 2rem; + } + } + + &:nth-of-type(even):not(:last-of-type) { + h4 { + grid-column: right; + margin: 0 auto; + } + + p { + grid-column: left; + margin-left: 0; + margin-right: var(--gutter); + } + } + + &:last-of-type { + margin-top: 4rem; + } + } + } + } + + #our_team-panel, + #our_partners-panel > div { + --team-grid-gap: 2.5rem; + --team-card-padding: 1.5rem; + + display: grid; + gap: 0 var(--team-grid-gap); + grid-auto-flow: dense; + grid-template-columns: [full-start] 1fr 1fr 1fr [full-end]; + + @media (max-width: $screen-lg) { + --team-grid-gap: 2rem; + grid-template-columns: [full-start] 1fr 1fr [full-end]; + } + + > * { + margin: calc(var(--team-grid-gap) / 2) 0; + scroll-margin-top: calc( + var(--sticky-header-without-actions-height) + 1.5rem + 1rem + ); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + > h4, + p { + grid-column: full; + } + + h4, + h5 { + font-size: 1.75rem; + font-weight: 600; + text-transform: none; + + @media (max-width: $screen-md) { + font-size: 1rem; + } + } + + team-member { + align-content: start; + background: var(--about-team-bg); + border: 1px solid var(--about-team-bg); + box-shadow: var(--about-team-shadow); + color: var(--about-team-color); + cursor: pointer; + display: grid; + gap: 0; + grid-row: span 5; + grid-template-areas: + "name" + "title" + "picture" + "bio" + "."; + grid-template-rows: subgrid; + padding: calc(var(--team-card-padding) - 1px); + + @media (max-width: $screen-sm) { + grid-column: full; + } + + &:hover { + border-color: var(--text-inactive); + } + + h4, + h5 { + grid-area: name; + margin: 0; + margin-bottom: 0.5rem; + } + + ul { + display: contents; + } + + li:first-of-type { + color: var(--about-team-title-color); + font-weight: 600; + grid-area: title; + margin-bottom: 0.75rem; + } + + li:nth-of-type(2) { + grid-area: picture; + } + + li:nth-of-type(3):not(:last-of-type) { + align-self: end; + grid-area: picture; + } + + li:last-of-type { + grid-area: bio; + line-height: 1.75; + @include line-clamp(3, 1.75, var(--about-team-bg)); + } + + img { + aspect-ratio: 1; + margin-bottom: 0.75rem; + width: 100%; + } + + a[href^="https://github.com"] + { + background: var(--about-team-github-bg); + border-top-right-radius: 0.5rem; + color: var(--about-team-color); + margin-top: -2.9rem; + padding: 0.25rem 0.5rem; + padding-right: 0.7rem; + position: absolute; + + &::before { + background: var(--about-team-color); + content: ""; + display: inline-block; + height: 1.2em; + margin-bottom: 0.2em; + margin-right: 0.2em; + mask-image: url("../assets/icons/github-mark-small.svg"); + mask-repeat: no-repeat; + vertical-align: middle; + width: 1.2em; + } + } + + &:focus-within { + align-content: start; + cursor: unset; + display: grid; + gap: 0 var(--team-card-padding); + grid-column: span 2; + grid-template-areas: + "name name" + "title title" + "picture bio" + ". bio" + ". bio"; + grid-template-columns: + calc( + (100% - var(--team-grid-gap) - 2 * var(--team-card-padding)) / 2 + ) + 1fr; + + li:last-of-type { + max-height: unset; + + &::after { + display: none; + } + } + + @media (max-width: $screen-sm) { + grid-template-areas: + "name" + "title" + "picture" + "bio"; + grid-template-columns: 1fr; + + ul li:nth-of-type(3):not(:last-of-type) { + align-self: end; + grid-area: picture; + + a { + position: absolute; + } + } + } + } + } + } + + #our_partners-panel > div { + margin-top: 2.5rem; + } + + &[aria-labelledby="global_impact"] { + display: block; + margin: var(--about-section-gap) auto; + + @media (min-width: $screen-lg) { + .section-content { + background: var(--about-global-impact-image); + background-position: right; + background-repeat: no-repeat; + background-size: 20rem 100%; + padding-right: 30rem; + } + } + + ul { + margin-top: 1rem; + @include about.stairs; + + li:nth-child(1) { + --stairs-icon: url("../assets/about/education.svg"); + } + + li:nth-child(2) { + --stairs-icon: url("../assets/about/text-box-check-outline.svg"); + } + + li:nth-child(3) { + --stairs-icon: url("../assets/about/web-check.svg"); + } + + li:nth-child(4) { + --stairs-icon: url("../assets/about/handshake.svg"); + } + } + } + + &[aria-labelledby="join_us_in_building_a_better_web"] { + background: var(--about-join-us-image) var(--about-join-us-bg); + background-position: 1.5rem; + background-repeat: no-repeat; + background-size: 20rem calc(100% - 3rem); + border: var(--about-join-us-border); + border-radius: 0.5rem; + color: var(--about-join-us-color); + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: var(--about-section-gap); + max-width: calc(100% - 2 * var(--center-padding)); + padding: 4rem 1rem; + padding-left: min(30rem, 50%); + + @media (max-width: $screen-md) { + background-color: transparent; + background-position: center bottom; + background-size: 100% 10rem; + border: none; + padding: 1rem 0; + padding-bottom: 12rem; } } } diff --git a/client/src/about/index.tsx b/client/src/about/index.tsx index 760c7bc0d3d5..92055d8c82f2 100644 --- a/client/src/about/index.tsx +++ b/client/src/about/index.tsx @@ -1,74 +1,201 @@ -import { useLocale } from "../hooks"; -import { GetInvolved } from "../ui/molecules/get_involved"; +import { HydrationData } from "../../../libs/types/hydration"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { ProseSection } from "../../../libs/types/document"; +import useSWR from "swr"; +import { HTTPError } from "../document"; +import { WRITER_MODE } from "../env"; +import { Prose } from "../document/ingredients/prose"; + import "./index.scss"; +import "./custom-elements"; +import { useGleanClick } from "../telemetry/glean-context"; +import { ABOUT } from "../telemetry/constants"; + +export interface AboutSection extends ProseSection { + H3s?: AboutSection[]; +} + +export interface AboutDoc { + title: string; + sections: AboutSection[]; +} + +export function About(appProps: HydrationData<any, AboutDoc>) { + const doc = useAboutDoc(appProps); -export function About() { - const locale = useLocale(); return ( - <div className="about"> - <div className="about-container"> - <h1 className="mify">Build it better</h1> - <p> - MDN Web Docs is an open-source, collaborative project documenting Web - platform technologies, including{" "} - <a href={`/${locale}/docs/Web/CSS`}>CSS</a>,{" "} - <a href={`/${locale}/docs/Web/HTML`}>HTML</a>,{" "} - <a href={`/${locale}/docs/Web/JavaScript`}>JavaScript</a>, and{" "} - <a href={`/${locale}/docs/Web/API/`}>Web APIs</a>. We also provide an - extensive set of{" "} - <a href={`/${locale}/docs/Learn`}>learning resources</a> for beginning - developers and students. - </p> + <main id="content" className="about-container"> + <RenderAboutBody + doc={doc} + renderer={(section, i) => { + if (i === 0) { + return <Header section={section} key={section.value.id} />; + } else if (section.H3s) { + return <Tabs section={section} key={section.value.id} />; + } + return null; + }} + /> + </main> + ); +} + +export function useAboutDoc( + appProps?: HydrationData<any, AboutDoc> +): AboutDoc | undefined { + const { data } = useSWR<AboutDoc>( + "index.json", + async () => { + const url = new URL( + `${window.location.pathname.replace(/\/$/, "")}/index.json`, + window.location.origin + ).toString(); + const response = await fetch(url); + + if (!response.ok) { + switch (response.status) { + case 404: + throw new HTTPError(response.status, url, "Page not found"); + } + + const text = await response.text(); + throw new HTTPError(response.status, url, text); + } + + return (await response.json())?.hyData; + }, + { + fallbackData: appProps?.hyData, + revalidateOnFocus: WRITER_MODE, + revalidateOnMount: true, + } + ); + const doc: AboutDoc | undefined = data || appProps?.hyData || undefined; + return doc; +} + +function RenderAboutBody({ + doc, + renderer = () => null, +}: { + doc?: AboutDoc; + renderer?: (section: AboutSection, i: number) => null | JSX.Element; +}) { + const sections = Array.from(doc?.sections || []).reduce<AboutSection[]>( + (acc, curr) => { + if (curr.value.isH3) { + const prev = acc.at(-1); + if (prev) { + prev.H3s ? prev.H3s.push(curr) : (prev.H3s = [curr]); + } + } else { + acc.push(Object.assign({}, curr)); + } + return acc; + }, + [] + ); + return sections.map((section, i) => { + return ( + renderer(section, i) || ( + <Prose key={section.value.id} section={section.value} /> + ) + ); + }); +} + +export function Header({ section }: { section: AboutSection }) { + return section.value.content ? ( + <header> + <section + dangerouslySetInnerHTML={{ __html: section.value.content }} + ></section> + </header> + ) : null; +} + +function Tabs({ section }: { section: AboutSection }) { + const [activeTab, setActiveTab] = useState(0); + const tabs = useRef<HTMLDivElement>(null); + const gleanClick = useGleanClick(); + + const changeTab = useCallback( + (i: number) => { + const id = section.H3s?.[i].value.id; + if (id) { + setActiveTab(i); + if (tabs.current && tabs.current.getBoundingClientRect().top < 0) { + tabs.current.scrollIntoView({ block: "start", inline: "nearest" }); + } + gleanClick(`${ABOUT}: tab -> ${id}`); + } + }, + [section.H3s, gleanClick] + ); + + useEffect(() => { + const hash = document.location.hash.startsWith("#our_team") + ? "#our_team" + : document.location.hash.startsWith("#our_partners") || + document.location.hash === "#pab" || + document.location.hash === "#owd" + ? "#our_partners" + : document.location.hash; + const tab = section.H3s?.findIndex(({ value }) => `#${value.id}` === hash); + if (tab && tab > 0) { + setActiveTab(tab); + } + }, [section.H3s, changeTab]); - <header> - <span className="headline"> - <b> - MDN's mission is to{" "} - <u>provide a blueprint for a better internet</u> and empower a new - generation of developers and content creators to build it. - </b> - </span> - </header> - <p> - We're always striving to connect developers more seamlessly with the - tools and information they need to easily build projects on the{" "} - <a href="/">open Web</a>. Since our beginnings in 2005, Mozilla and - the community have amassed around 45,000 pages of free, open-source - content. - </p> - {/*<Testimonial />*/} - <h2 className="_ify"> - Independent and unbiased - across browsers and technologies - </h2> - <p> - This guiding principle has made MDN Web Docs the go-to repository of - independent information for developers, regardless of brand, browser - or platform. We are an open community of devs, writers, and other - technologists building resources for a better Web, with over 17 - million monthly MDN users from all over the world. Anyone can - contribute, and each of the 45,000 individuals who have done so over - the past decades has strengthened and improved the resource. We also - receive content contributions from our partners, including Microsoft, - Google, Samsung, Igalia, W3C and others. Together we continue to drive - innovation on the Web and serve the common good. - </p> - <h2 className="_ify">Accurate and vetted for quality</h2> - <p> - Through our GitHub documentation repository, contributors can make - changes, submit pull requests, have their contributions reviewed and - then merged with existing content. Through{" "} - <a - href="https://mdn-contributor-docs.mozilla.org/" - target="_blank" - rel="nofollow noreferrer" - > - this workflow - </a> - , we welcome the vast knowledge and experience of our developer - community while maintaining a high level of quality, accurate content. - </p> - </div> - <GetInvolved /> - </div> + return ( + section.value.id && + section.value.content && ( + <section aria-labelledby={section.value.id}> + <h2 id={section.value.id}>{section.value.title}</h2> + <div + className="section-content" + dangerouslySetInnerHTML={{ __html: section.value.content }} + /> + {section.H3s && ( + <div className="tabs" ref={tabs}> + <div className="tablist-wrapper"> + <div className="tablist" role="tablist"> + {section.H3s?.map( + ({ value }, i) => + value.id && + value.content && ( + <a + key={value.id} + id={`${value.id}-tab`} + href={`#${value.id}`} + className={i === activeTab ? "active" : ""} + role="tab" + aria-selected={i === activeTab ? "true" : "false"} + aria-controls={`${value.id}-panel`} + onClick={() => changeTab(i)} + > + {value.title} + </a> + ) + )} + </div> + </div> + {section.H3s?.map( + ({ value }, i) => + value.id && + value.content && ( + <div + key={value.id} + id={`${value.id}-panel`} + className={`tabpanel ${i === activeTab ? "active" : ""}`} + role="tabpanel" + dangerouslySetInnerHTML={{ __html: value.content }} + /> + ) + )} + </div> + )} + </section> + ) ); } diff --git a/client/src/about/testimonial/index.scss b/client/src/about/testimonial/index.scss deleted file mode 100644 index 2a245a2bb3e9..000000000000 --- a/client/src/about/testimonial/index.scss +++ /dev/null @@ -1,64 +0,0 @@ -@use "../../ui/vars" as *; - -.testimonial { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 2rem 0; - width: 100%; - - @media (min-width: $screen-md) { - flex-direction: row; - } - - iframe { - height: 50vw; - padding: 0; - - @media (min-width: $screen-md) { - height: initial; - width: 48%; - } - } - - .testimonial-copy { - margin: 0 auto; - max-width: 18rem; - text-align: center; - - @media (min-width: $screen-md) { - margin: initial; - text-align: initial; - } - - img { - margin: 0 auto; - - @media (min-width: $screen-md) { - margin: initial; - } - } - - p { - font-size: 18px; - line-height: 120%; - } - - .author-name, - .author-title { - display: block; - /* MDN UI / Body / M */ - font-size: 13px; - line-height: 1.2; - } - } - - .quotation-mark { - background-color: var(--icon-primary); - height: 10px; - margin-left: 4px; - mask-image: url("./quote.svg"); - mask-size: cover; - width: 10px; - } -} diff --git a/client/src/about/testimonial/index.tsx b/client/src/about/testimonial/index.tsx deleted file mode 100644 index 9d0695f0ee92..000000000000 --- a/client/src/about/testimonial/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import "./index.scss"; -import { ReactComponent as Quote } from "./quote.svg"; - -export function Testimonial() { - return ( - <div className="testimonial"> - <iframe - className="testimonal-frame" - src="https://www.youtube-nocookie.com/embed/gIXw-3H48yU" - title="YouTube video player" - frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen - ></iframe> - <div className="testimonial-copy"> - <Quote /> - <p> - Condimentum donec quam odio viverra erat mi mae-cenas odio. Tempus - arcu tincidunt tortor placerat tempor pharetra. - </p> - <span className="author-name"> - <b>First Name</b> - </span> - <span className="author-title">Title goes here</span> - </div> - </div> - ); -} diff --git a/client/src/about/testimonial/quote.svg b/client/src/about/testimonial/quote.svg deleted file mode 100644 index 19dcfe170995..000000000000 --- a/client/src/about/testimonial/quote.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M8.48438 12.2812V8.88281C8.48438 7.10156 8.69531 5.64062 9.11719 4.5C9.55469 3.35938 10.2891 2.39062 11.3203 1.59375C12.3516 0.796875 13.5234 0.265625 14.8359 0V2.71875C13.9141 3.25 13.3906 3.96094 13.2656 4.85156H14.8359V12.2812H8.48438ZM0 12.2812V8.88281C0 7.10156 0.210938 5.64062 0.632812 4.5C1.07031 3.35938 1.80469 2.39062 2.83594 1.59375C3.88281 0.796875 5.05469 0.265625 6.35156 0V2.71875C5.42969 3.25 4.90625 3.96094 4.78125 4.85156H6.35156V12.2812H0Z" fill="var(--text-primary)"/> -</svg> diff --git a/client/src/app.scss b/client/src/app.scss index eb5427c31dbf..6281566b0080 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -157,7 +157,6 @@ main { min-height: 80vh; } -.about-container, .main-page-content { a { &:link, diff --git a/client/src/app.tsx b/client/src/app.tsx index 001c73bba834..e452d6c89a3f 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -322,7 +322,7 @@ export function App(appProps: HydrationData) { path="/about/*" element={ <StandardLayout> - <About /> + <About {...appProps} /> </StandardLayout> } /> diff --git a/client/src/assets/about/accurate-sm.svg b/client/src/assets/about/accurate-sm.svg new file mode 100644 index 000000000000..1bfb970504aa --- /dev/null +++ b/client/src/assets/about/accurate-sm.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 45 46"><ellipse cx="32.264" cy="13.979" fill="#fff" rx="12.736" ry="13.479"/><path fill="#007936" d="m26.917 42.923-4.42-4.202 1.864-1.624 2.555 2.227 5.77-5.028 1.864 1.975zm2.008-28.234c1.768 0 3.214 1.26 3.214 2.8v13.082a11 11 0 0 0-3.214-.477V17.49H20.89v11.204l-4.017-3.151-4.017 3.15V17.49H9.642v22.408h9.77a7.7 7.7 0 0 0 1.157 2.801H9.642c-1.768 0-3.214-1.26-3.214-2.801V17.49c0-1.54 1.446-2.801 3.214-2.801z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/accurate.svg b/client/src/assets/about/accurate.svg new file mode 100644 index 000000000000..a8fc0113c5ea --- /dev/null +++ b/client/src/assets/about/accurate.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 74 73"><ellipse cx="51.432" cy="22.222" fill="#D7F5DC" rx="22.568" ry="22.222"/><path fill="#007936" d="m39.781 68.63-6.531-7.125 2.755-2.755 3.776 3.776L48.307 54l2.755 3.349zm2.969-47.88a4.764 4.764 0 0 1 4.75 4.75v22.182a14.4 14.4 0 0 0-4.75-.807V25.5H30.875v19l-5.937-5.344L19 44.5v-19h-4.75v38h14.44a14.2 14.2 0 0 0 1.71 4.75H14.25A4.764 4.764 0 0 1 9.5 63.5v-38a4.764 4.764 0 0 1 4.75-4.75z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/building-dark.svg b/client/src/assets/about/building-dark.svg new file mode 100644 index 000000000000..76e77083c4d1 --- /dev/null +++ b/client/src/assets/about/building-dark.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 383 233"><rect width="206.101" height="148.585" x="96.658" y="80.863" fill="#005A26" rx="8"/><rect width="205.101" height="147.585" x="105.048" y="74.287" fill="#1B1B1B" stroke="#8FF295" rx="7.5"/><path fill="#8FF295" stroke="#8FF295" d="M105.048 81.787a7.5 7.5 0 0 1 7.5-7.5h190.101a7.5 7.5 0 0 1 7.5 7.5v9.694H105.048z"/><circle cx="117.686" cy="84.327" r="3.922" fill="#005A26"/><circle cx="131.414" cy="84.327" r="3.922" fill="#005A26"/><circle cx="145.141" cy="84.327" r="3.922" fill="#005A26"/><path fill="#fff" d="M121.608 115.86a8 8 0 0 1 8-8h158.537a8 8 0 0 1 8 8v45.774a8 8 0 0 1-8 8H129.608a8 8 0 0 1-8-8z"/><path fill="#8FF295" stroke="#DFF7E3" d="M249.995 152.289c-1.023-4.014 1.391-8.136 5.392-9.208l45.393-12.158a7.393 7.393 0 0 1 9.098 5.327l5.516 21.64c1.023 4.013-1.391 8.136-5.392 9.207l-45.393 12.158a7.39 7.39 0 0 1-9.098-5.327z"/><path fill="#000" d="M269.826 157.813c-.311.059-.502.086-.502.086s.191-.038.502-.086m22.471-4.801c1.319-.294 3.013-1.657 3.013-1.657s-1.781.686-3.013 1.657"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M275.972 149.5s-2.771.071-3.907 1.047c-2.007 1.725 3.813 3.078 2.424 5.142-1.098 1.632-5.165 2.21-5.165 2.21s3.109-.622 4.705-.019c2.547.963-.333 5.219 2.527 5.529 1.512.163 3.907-1.047 3.907-1.047m5.38-15.091s3.348-3.895 3.803-1.432l1.166 6.307c.455 2.462 4.498-.791 4.498-.791s-3.186 1.227-3.982 2.721c-1.053 1.976 3.641 3.265 1.832 4.887-1.109.995-3.907 1.046-3.907 1.046"/><circle cx="280.63" cy="155.011" r="1.017" fill="#000" stroke="#000" transform="rotate(-14.99 280.63 155.011)"/><circle cx="286.849" cy="152.819" r=".511" fill="#000" stroke="#000" transform="rotate(-14.99 286.849 152.819)"/><path fill="#fff" d="M121.31 180.93a3.033 3.033 0 0 1 3.032-3.033h72.826a3.032 3.032 0 0 1 0 6.065h-72.826a3.03 3.03 0 0 1-3.032-3.032m0 14.151a3.03 3.03 0 0 1 3.032-3.032h72.826a3.032 3.032 0 0 1 0 6.065h-72.826a3.033 3.033 0 0 1-3.032-3.033"/><path fill="#8FF295" d="M110.962 131.452a7.9 7.9 0 0 1-5.645-2.383 8.22 8.22 0 0 1-2.338-5.754c0-2.158.841-4.227 2.338-5.753a7.9 7.9 0 0 1 5.645-2.383 7.9 7.9 0 0 1 5.646 2.383 8.22 8.22 0 0 1 2.338 5.753 8.22 8.22 0 0 1-2.338 5.754 7.9 7.9 0 0 1-5.646 2.383m16.948-5.882c.092-.744.16-1.487.16-2.255s-.068-1.534-.16-2.324l4.813-3.79c.434-.349.548-.976.274-1.488l-4.562-8.044c-.274-.511-.889-.72-1.391-.511l-5.68 2.325c-1.186-.907-2.418-1.697-3.855-2.278l-.844-6.161a1.16 1.16 0 0 0-1.141-.977H106.4a1.16 1.16 0 0 0-1.14.977l-.844 6.161c-1.437.581-2.669 1.371-3.855 2.278l-5.68-2.325a1.11 1.11 0 0 0-1.391.511l-4.562 8.044a1.16 1.16 0 0 0 .273 1.488l4.813 3.79c-.09.79-.16 1.557-.16 2.324 0 .768.07 1.511.16 2.255l-4.813 3.86a1.16 1.16 0 0 0-.273 1.487l4.562 8.044c.273.512.89.698 1.391.512l5.68-2.348c1.186.93 2.418 1.72 3.855 2.301l.844 6.161c.091.558.57.976 1.14.976h9.124c.571 0 1.05-.418 1.141-.976l.844-6.161c1.437-.604 2.669-1.371 3.855-2.301l5.68 2.348c.502.186 1.117 0 1.391-.512l4.562-8.044c.274-.511.16-1.139-.274-1.487z"/><path fill="#005A26" stroke="#8FF295" d="m130.371 127.531-.034.277.218.174 4.812 3.859c.232.186.314.544.149.857l-4.559 8.038-.006.011a.636.636 0 0 1-.769.281l-5.67-2.344-.27-.111-.23.18c-1.157.907-2.351 1.649-3.74 2.234l-.263.11-.038.283-.843 6.153a.66.66 0 0 1-.646.552h-9.125a.66.66 0 0 1-.646-.552l-.843-6.153-.039-.287-.269-.109c-1.381-.558-2.572-1.321-3.734-2.231l-.229-.18-.27.111-5.67 2.344a.64.64 0 0 1-.77-.281l-.005-.011-4.562-8.044-.003-.004a.66.66 0 0 1 .155-.847l4.812-3.859.218-.174-.034-.277a18 18 0 0 1-.156-2.194c0-.739.066-1.484.156-2.268l.032-.277-.22-.173-4.808-3.786-.002-.001a.66.66 0 0 1-.153-.846l.003-.005 4.562-8.043.006-.011a.61.61 0 0 1 .758-.286l.003.001 5.68 2.325.265.109.228-.174c1.164-.891 2.357-1.654 3.738-2.212l.269-.109.039-.287.843-6.154a.66.66 0 0 1 .646-.551h9.125a.66.66 0 0 1 .646.551l.843 6.154.039.287.269.109c1.381.558 2.574 1.321 3.738 2.212l.228.174.265-.109 5.68-2.325.003-.001a.61.61 0 0 1 .758.286l.006.011 4.559 8.037c.165.313.083.67-.147.857l-.002.001-4.809 3.786-.219.173.032.277c.09.784.156 1.529.156 2.268s-.066 1.459-.156 2.194Zm-22.454 3.91a8.4 8.4 0 0 0 6.002 2.533 8.4 8.4 0 0 0 6.003-2.533 8.72 8.72 0 0 0 2.481-6.104 8.72 8.72 0 0 0-2.481-6.104 8.4 8.4 0 0 0-6.003-2.533 8.4 8.4 0 0 0-6.002 2.533 8.72 8.72 0 0 0-2.481 6.104c0 2.287.891 4.483 2.481 6.104Z"/><path stroke="#000" d="M113.916 135.945c5.984 0 10.855-4.738 10.855-10.608s-4.871-10.608-10.855-10.608c-5.983 0-10.854 4.738-10.854 10.608s4.871 10.608 10.854 10.608Z"/><path fill="#E48E7A" d="m50.629 106.946.573-2.5h3.39l.305 2.5h2.744s-2.84 4.482-4.268 3.75c-1.43-.732-3.145-3.018-4.574-3.75z"/><path fill="#F9CFA6" fill-rule="evenodd" d="m38.825 141.748-.182 5.719c10.512 3.726 28.172 1.644 28.477-1.765l.191-6.079-1.663-13.594c.371 2.767 2.156 13.475 7.543 13.594 4.559.1 9.146-7.439 9.146-7.439l4.878-13.051-6.707-7.188-4.878 9.632-3.049-5.569s-2.443-3.415-4.573-5.313c-1.712-1.525-5.793-2.812-5.793-2.812l-4.268-.939s-.915 1.25-2.744 2.501c-1.12.764-1.83.625-1.83.625a149 149 0 0 1-2.307-1.628l-2.57-1.499s-4.308-.086-6.517.679c-2.725.943-4.125 1.65-6.585 3.369-4.083 2.853-7.274 10.586-7.274 10.586l-1.642 5.583-1.459 8.345s.324.962 1.46 1.703c.154.101.361.245.613.42 1.599 1.113 4.998 3.481 8.302 4.005 1.029.164 2.372.159 3.431.115m-1.619-14.384c-.653 1.651-.92 4.471-.92 4.471l3.888.684.014-9.632s-2.202 2.508-2.982 4.477" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" d="m50.021 134.134-.034 6.25s7.35 2.5 8.266 2.187c.915-.312.304-.312.304-.312m2.134-6.25s.916.312-.304.625c-1.22.312-5.488.312-5.488.312m6.707 1.25s.61.313-.304.625c-.915.313-6.098-.312-6.098-.312m5.183 1.562s.61.625-.61.625-4.878-.937-4.878-.937m-1.223-5s1.202-.65 1.83-1.25c.556-.534 1.219-1.563 1.219-1.563"/><path fill="#E48E7A" d="M50.021 134.133s7.505-4.288 6.403-1.875c-.238.521-.714.997-1.22 1.391-.87.676-1.83 1.109-1.83 1.109l7.013.938s1.22.625 0 .938-5.488.312-5.488.312l6.403.938s.914.625 0 .937c-.915.313-6.098-.312-6.098-.312l4.878.937s.915 1.25-.305 1.25-4.878-.937-4.878-.937l3.659 1.875s.61.625-.305.937-8.266-2.187-8.266-2.187z"/><path stroke="#000" stroke-linecap="round" stroke-width=".5" d="m81.056 112.166 4.559 5.468s7.262-4.335 7.846-5.261.062-.466.062-.466m-2.144-6.35s.982-.452.137.703c-.846 1.156-4.499 4.368-4.499 4.368m6.535-4.099s.72-.223.136.703-5.417 4.353-5.417 4.353m5.429-2.716s.919.015-.125.934c-1.044.918-4.77 2.96-4.77 2.96"/><path fill="#E48E7A" d="M81.728 112.885s-2.06-8.227-.515-6.029c1.326 1.885 2.342 2.395 2.89 2.52l.456.024 6.028-4.037s1.804-.481 1.048.671c-.757 1.151-4.131 4.381-4.131 4.381l5.686-4.16s1.14-.235.624.685c-.515.921-5.029 4.386-5.029 4.386l4.481-3.006s1.556.221.591 1.144c-.964.924-4.48 3.006-4.48 3.006l4.14-1.398s.9-.004.384.916c-.516.921-8.208 5.58-8.208 5.58z"/><path fill="#005A26" d="M75.582 186.458c-.682-15.605-9.4-39.81-9.4-39.81s.873 2.796-12.831 2.796c-13.704.001-14.608-2.498-14.608-2.498s.29 17.994-.619 29.866c-1.254 16.394-7.613 41.383-7.613 41.383h18.881l7.004-46.362 4.568 14.625-6.09 31.737h17.358s3.894-19.284 3.35-31.737"/><path fill="#E48E7A" d="M59.959 97.031c-1.917 5.642-1.948 6.322-6.827 8.203-4.356-1.539-6.272-2.051-6.795-8.55 1.394-6.496 5.264-9.349 9.21-9.349 2.439 1.197 6.033 3.576 4.412 9.696"/><path fill="#ECAFA3" d="M70.104 219.933c-.904-1.389-.603-1.736-.603-1.736H64.38s.194 1.926 0 3.125c-.184 1.139-.756 1.632-.904 2.778-.104.805-.417 1.427 0 2.083.374.59 1.506.695 1.506.695h10.544v-3.472s-4.519-2.084-5.422-3.473m8.134 7.639v-3.125s.996.261 1.506.695c.682.581 1.205 2.083 1.205 2.083z"/><path fill="#83BB9E" d="M78.14 224.135s-.718-.444-1.22-.625c-.572-.207-1.524-.313-1.524-.313v4.688h2.744z"/><path fill="#83BB9E" d="m80.579 226.323.304.625-18.597-.313s-.305.747-.305 1.25.305 1.25.305 1.25h18.902s.235-.361.305-.625c.094-.353.085-.581 0-.937-.14-.593-.914-1.25-.914-1.25"/><path stroke="#000" stroke-width=".5" d="M62.287 226.635h13.11v-3.125"/><path fill="#ECAFA3" d="M41.614 221.322c-.915-1.25-.305-3.125-.305-3.125H35.82s-.414 1.108-.61 2.188c-.186 1.025 0 2.187-2.134 3.75-.581.425-.727 1.909-.305 2.5.379.53 1.524.625 1.524.625l11.89.312v-3.437s-3.658-1.563-4.572-2.813m6.098 6.563v-2.813s1.009.235 1.525.625c.69.524 1.22 1.875 1.22 1.875z"/><path fill="#83BB9E" d="M47.652 224.76s1.112.494.61.313c-.238-.086-.563-.947-1.22-1.25a10 10 0 0 0-1.895-.625v5h2.743z"/><path fill="#83BB9E" d="m49.782 226.635.305.625-18.055-.312s-.305.747-.305 1.25.305 1.25.305 1.25h18.903s.235-.362.305-.625c.094-.353.084-.582 0-.938-.141-.593-1.458-1.25-1.458-1.25"/><path stroke="#000" stroke-width=".5" d="M32.034 226.948h13.11v-3.125"/><path fill="#003D18" stroke="#000" d="m61.16 91.01-5.578-4.083h-4.78l-8.766 4.084-10.358 13.476-17.53 1.634L1 111.021l8.367 11.026h14.74l16.336-6.534 15.139-13.885z"/><path fill="url(#a)" d="M305.258 118.36c.593-.073.472-.299 1.065-.372l2.436.186 2.435.186s-.009-.126 2.367 0c3.199.169 5.017.435 8.199 0 1.734-.237 3.188.001 3.796.001s.607-.001 0 .56c-.608.56-2.311.274-3.796.373-3.197.215-8.199 0-8.199 0l-6.832-.373s-2.064-.488-1.471-.561"/><path fill="url(#b)" d="M327.483 118.01c.583-.073.465-.299 1.048-.372l4.791.372s-.009-.126 2.328 0c3.147.169 4.935.435 8.065 0 1.705-.237 3.136.001 3.733.001s.597-.001 0 .56c-.597.56-2.273.274-3.733.373-3.145.215-8.065 0-8.065 0l-6.72-.373s-2.03-.488-1.447-.561"/><path fill="#924A3B" d="m304.469 48.235-9.575.95 9.043 3.607z"/><path fill="#E48E7A" d="M307.565 13.275c-1.627 5.015-1.923 5.623-6.066 7.294-3.698-1.368-5.326-1.823-5.77-7.598 1.184-5.774 4.875-8.026 8.225-8.026 2.071 1.064 4.617 2.804 3.611 8.33"/><path fill="#E48E7A" d="m297.623 18.577 6.668.35s-.855 3.681 2.223 4.557-.149 11.918-.149 11.918l-15.24-7.565s2.124-5.905 4.275-6.105c1.881-.175 2.223-3.155 2.223-3.155"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" d="M300.021 16.01c1.384 1.045 2.214 1.35 3.847 1.064m-1.774-1.673h1.775l-.148-3.495c.231-.237.391-.516.592-.76.25-.304.333-.324.592-.456.621-.315 1.775 0 1.775 0l.296.76m-8.285-.152s.685-.468 1.183-.608c.669-.187 1.128-.252 1.776 0 .464.182 1.035.76 1.035.76m-4.142 7.598s1.572 1.464 2.811 1.52c.645.03 1.627-.304 1.627-.304"/><ellipse cx="305.345" cy="12.515" fill="#0F0F0F" rx=".444" ry=".456"/><ellipse cx="301.492" cy="12.222" fill="#0F0F0F" rx=".444" ry=".456"/><ellipse cx="296.07" cy="12.695" fill="#E48E7A" rx="1.368" ry="2.454"/><path fill="#003D18" fill-rule="evenodd" d="M300.782 1.309c-.732-1.146-2.362-1.631-3.94-1.084-1.817.63-2.878 2.386-2.371 3.924.173.525.506.956.941 1.271a8.56 8.56 0 0 0-.952 3.877c.001.693.013 1.586.303 1.701.53 0 .872-.115 1.165-.318l.039.008s.437 3.221-.301 5.26q-.064.175-.12.34c-.169.488-.317.918-.635 1.362-.621.868-2.415 2.012-2.415 2.012s1.556-.102 2.113-.31c1.1-.41 1.513-1.213 1.962-2.32.165-.407.302-1.084.302-1.084V12.7c0-.487.604-1.083.604-1.083l.592-2.88q.167-.123.346-.249l4.371-2.476c.488-.171.943-.272 1.335-.272.602 0 1 .629 1.369 1.214.197.312.386.61.594.796.456.408.843.846 1.17 1.238q.178.215.333.408h.001l.186.229c.085.367.114.93-.006 1.798-.327 2.362-.302 3.249-.302 3.249s.428-.732.73-1.197c.256-.393.204-2.593.182-3.256.26.104.372-.28.372-1.538a7.7 7.7 0 0 0-.528-2.803c.888-.261 1.599-.87 1.882-1.728.507-1.538-.554-3.295-2.371-3.924-1.692-.586-3.442.013-4.084 1.341a7 7 0 0 0-2.063-.312q-.408 0-.804.055" clip-rule="evenodd"/><path fill="#E48E7A" d="m303.935 4.07.473 1.25.402.852-1.026-.571.375-.28z"/><path fill="#F9CFA6" d="m287.866 43.571-.538-5.172-1.839 2.3h1.66l-.403 3.067-.573 2.366-7.523 3.68s-1.838 1.05-2.907.35c-1.065-.697-1.368-1.603-1.368-1.603l1.368-7.86 1.539-5.258s2.992-7.285 6.82-9.972c2.307-1.619 3.62-2.285 6.175-3.173 2.071-.72 5.471-1.227 5.471-1.227l3.049 2s1.283 1.581 1.792 2.77c1.203 2.805 0 7.845 0 7.845s1.559-4.313 1.874-5.57c.296-1.187.814-5.046.814-5.046l1.533-.772 4.023.403s3.233 1.149 4.838 2.586c1.998 1.788 3.585 5.91 3.585 5.91h-10.932l-1.971 16.994-7.7.721c-.528.05-.625.78-.129.966l7.291 2.746 10.215-.185-.179 5.727c-.287 3.21-16.846 5.172-26.702 1.662l.358-11.267V45.43z"/><path fill="#E48E7A" d="M274.798 50.042c-1.954-3.132 1.208-9.438 1.208-9.438s2.301-.237 3.773-.156c1.549.086 3.925.62 3.925.62l3.774-1.083.302-.928c.452-1.391 1.358-1.856 1.358-1.856s.604-2.09 1.51-2.321c.905-.23.905.257.905 1.392 0 1.392-.754 2.321-.754 2.321l3.32-.774s2.645-1.237 1.963 2.785c-.683 4.023-.906 3.869-.906 3.869s-3.774 1.237-5.132 1.237c-1.359 0-1.307-.28-1.307-.28l-10.92 5.075s-2.278.725-3.019-.463"/><path stroke="#000" stroke-linecap="round" stroke-width=".5" d="M290.615 45.606s3.907-.257 4.617-1.227c.513-.701 1.026-4.557 1.026-4.557s.168-1.29-.342-1.752c-.364-.33-1.197-.35-1.197-.35l-3.933.876.684-1.403s.559-1.514 0-2.103c-.168-.177-.513-.175-.513-.175"/><path fill="#E5E5E5" d="M307.545 100.285s2.393-.247 3.731-.152c1.306.093 3.108.605 3.108.605l-.466 3.617-6.373 3.468zm22.909-.757s2.082-.553 3.419-.457c1.307.094 3.42.913 3.42.913l-.311 4.099-6.528 3.039z"/><path fill="#7C6063" d="M308.046 105.94v2.011s.236-1.484.906-2.011c.356-.281.714-.167 1.057-.464.324-.282.282-.644.603-.929.299-.265.526-.353.906-.464.567-.166.931-.118 1.51 0 .365.075.905.309.905.309s.538.498.302.619c-.105.054-.302 0-.302 0s-.538-.245-.905-.309c-.407-.071-.755-.001-1.057 0s-.382.104-.453.309c-.039.114 0 .31 0 .31v.464l-1.208.464-.754.928-1.359 1.702-.302.465v.153l.151 1.857s.151.619.755.619 1.057-.31 1.057-.31l3.622.31 4.076 1.856s2.868.465 3.321.465-1.661-.774-1.661-.774v-.928h2.868v.619h1.057l.453-.31s.741-.25 1.207-.155c.66.136 1.045.475 1.359 1.083.359.695.225 1.261 0 2.012-.26.866-1.359 1.857-1.359 1.857l-4.83 1.237h-4.075l-8.605-.928-2.113-.619v-3.249s.604-.774 1.359-.464c.754.309 3.142 2.202 5.736 3.713l7.245.619 4.076-1.393v-1.237l-2.264.928h-3.17v-.309l-4.831-2.785s-1.056-.465-1.509-.31c-.437.149-.367.674-.755.928-.695.457-2.113 0-2.113 0s-.674-.224-1.057-.464a6 6 0 0 1-.604-.464v-3.404l-.301-.772v-2.476z"/><path fill="#FFF8F8" d="m305.178 114.139 1.812-5.57.301.929v3.404l3.321 1.083s.755-1.393 1.359-1.393.836.26 1.358.464c2.05.803 4.831 2.94 4.831 2.94.302.464 1.85.326 3.019.155.978-.144 1.509-.619 2.415-.774s1.509.31 0 1.238c-1.51.928-2.408 1.223-4.076 1.547-2.852.554-4.654.205-7.396-.774-2.626-.937-6.038-3.868-6.038-3.868z"/><path fill="#F2DDD0" d="M311.369 108.568s-1.208-.154-2.114-.154 1.057-2.166 1.057-2.166 1.208-.618 1.661-.464c.453.155 4.679 3.713 4.679 3.713s.604.535 1.057.309c.488-.244.151-1.082.453-1.082s2.565 1.548 2.113 2.166c-.453.618-4.227.464-4.981 0-.755-.464-3.925-2.322-3.925-2.322"/><path fill="#C9624B" d="M311.522 110.116s-3.019-.929-3.321-1.083c-.302-.155-.452 1.237-.452 1.237 1.061.665 1.509 1.393 2.717 1.702 1.207.31 1.699.537 2.566.155.466-.205.697-.454.905-.928.17-.386 0-1.238 0-1.238l-1.66-.928s.213.71 0 .928-.755.155-.755.155"/><path fill="#7C6063" d="m330.537 107.022-.453-1.548-.755 1.857.755.928 1.509-1.856 2.717-1.393-3.019.464zm-2.868 5.415.302.619-.302-.774 3.924 4.178 3.774 1.083s3.689.937 6.038.619c1.021-.139 1.628-.186 2.566-.619.701-.324 1.661-1.083 1.661-1.083l-.302-1.702-2.415.928s-2.114-.155-2.567-.464c-.452-.31-4.226-3.095-4.981-3.249-.755-.155-3.774.464-3.774.464l-1.811-.464v-1.702h.302l.453.773 1.509-.464 3.321.464 5.434 2.785 3.17.31-2.566-.774-.302-.928h1.812l1.962.928s1.399-.424 2.113 0c.47.28.686.574.906 1.083.31.718.284 1.282 0 2.012-.443 1.136-2.566 1.702-2.566 1.702s-3.853.644-6.34.619c-4.763-.049-11.925-2.631-11.925-2.631v-2.011z"/><path stroke="#7C6063" d="m327.971 113.056-.302-.619-.604 1.702v2.011s7.162 2.582 11.925 2.631c2.487.025 6.34-.619 6.34-.619s2.123-.566 2.566-1.702c.284-.73.31-1.294 0-2.012-.22-.509-.436-.803-.906-1.083-.714-.424-2.113 0-2.113 0l-1.962-.928h-1.812l.302.928 2.566.774-3.17-.31-5.434-2.785-3.321-.464-1.509.464-.453-.773h-.302v1.702l1.811.464s3.019-.619 3.774-.464 4.529 2.939 4.981 3.249c.453.309 2.567.464 2.567.464l2.415-.928.302 1.702s-.96.759-1.661 1.083c-.938.433-1.545.48-2.566.619-2.349.318-6.038-.619-6.038-.619l-3.774-1.083m-3.622-3.404 3.622 3.404m-3.622-3.404-.302-.774 3.924 4.178m-1.509-10.986.453 1.548.754-1.548 3.019-.464-2.717 1.393-1.509 1.856-.755-.928z"/><path fill="#393765" d="M318.312 108.569c-.151-.464-2.264-2.785-3.019-3.095-.755-.309-2.835.619-2.717.774s.453.309.453.309 1.556-.864 2.264-.309c.133.104.453.309.302.309s-2.139.344-1.962.465l.453.309c.176.121 2.264-.309 2.264-.309l.453.618-1.963.465s.151.619.453.464 1.812-.464 1.812-.464l.754 1.392s.604-.464.453-.928m22.498-.401c-.151-.465-2.265-2.785-3.019-3.095-.755-.309-2.992.247-2.873.401s.608.682.608.682 1.556-.865 2.265-.309c.132.104.759.309.301.309-.457 0-2.294.126-2.118.247s.432.406.609.527 2.259-.063 2.259-.063l.151.154-1.962.31s.458.991.76.837c.301-.155 1.504-.373 1.504-.373l.755 1.392s.91-.555.76-1.019"/><path fill="#FFF8F8" d="m327.827 113.057 1.661-6.035.603 1.238-.302 3.714 1.963.464s1.358-.31 1.962-.31 1.138-.204 1.661 0c2.049.803 4.83 3.095 4.83 3.095.302.464 1.645.551 2.717.464.985-.08.604 0 2.415-.774 1.812-.773.302 1.548.302 1.548s-1.048.778-1.811 1.083c-.949.377-2.566.464-2.566.464s-5.259.05-8.001-.929c-2.626-.937-5.434-4.022-5.434-4.022"/><path fill="#C9624B" d="M333.711 109.2s-3.019-.929-3.321-1.084c-.302-.154-.452 1.238-.452 1.238 1.061.665 1.509 1.393 2.717 1.702 1.207.31 1.699.537 2.566.155.466-.205.697-.454.905-.928.17-.386 0-1.238 0-1.238l-1.66-.928s.212.71 0 .928c-.213.218-.755.155-.755.155"/><path fill="#F2DDD0" d="M333.702 108.149s-1.16-.172-2.03-.172 1.015-2.421 1.015-2.421 1.16-.691 1.595-.518 4.406 3.84 4.406 3.84.667.907 1.102.654c.469-.272.145-1.209.435-1.209s2.464 1.729 2.029 2.42-4.058.519-4.783 0a436 436 0 0 0-3.769-2.594"/><path stroke="#000" stroke-width=".5" d="M295.579 21.245s2.184.767 3.248 1.752c1.508 1.395 1.967 2.697 2.394 4.732.48 2.284-.513 5.96-.513 5.96l1.539-4.207"/><path fill="#E48E7A" d="m307.545 100.287.342-7.712c3.27 1.244 4.974 1.23 7.865.876l-1.368 7.361c-2.966-.595-4.422-.671-6.839-.525m22.915.175-1.025-8.237c3.269 1.244 5.829-.173 8.72-.526l-.855 9.289c-2.967-.596-4.422-.672-6.84-.526"/><path fill="#005A26" d="M288.605 66.977c-.933-2.39-.897-6.904-.897-6.904 15.154 4.05 26.492-.773 25.836-2.725l12.2 3.997s6.818 2.362 9.329 5.632c2.056 2.677 2.333 8.358 2.333 8.358l1.255 16.352s-2.514 1.512-4.305 1.635c-2.19.15-5.383-1.635-5.383-1.635l-.897-11.81-1.256-5.996-9.688-1.817s1.615 11.628-.538 19.623c-.543 2.013-2.976 1.866-5.024 1.635-1.806-.204-4.127-.727-4.127-2.18v-17.26s-11.327 2.045-15.788-2.363c-1.516-1.498-2.272-2.547-3.05-4.542"/><path fill="#9E9E9E" d="M306.236 31.608c.06-.51.496-.893 1.01-.885l27.92.439a1 1 0 0 1 .978 1.114l-2.372 20.516h-8.568l-1.428-4.658s-.893-.56-.893 0c0 .559.536 3.726.536 3.726h-.357l-1.428-5.962s-.347-.305-.536-.186c-.133.083-.178.372-.178.372s-.011-.223-.179-.372c-.211-.19-.461-.123-.714 0-.51.246 0 1.49 0 1.49s-.357-.186-.714 0c-.357.187-.178 1.49-.178 1.49h-.536v3.913l-14.815.187z"/><path fill="#E48E7A" d="M318.359 52.539s-.194-.026-.314 0c-.538.114 0 1.353 0 1.353l1.568.601 1.882.752h2.508l2.352-2.556-.94-.15-1.412-4.36s-1.097-1.052-1.097-.3c0 .75.47 3.758.47 3.758h-.313l-1.324-5.714s-.171-.706-.684-.356c-.114.078-.171.526-.171.35 0-.175.14-.293-.33-.444-.47-.15-.72.119-.941.451-.303.457.245 1.22.245 1.22s-.198-.18-.513 0c-.525.303-.342 1.578-.342 1.578s-.644-.542-.644.059z"/><path fill="#005A26" d="m343.07 230.714-14.609-41.078-1.461-3.043 9.739-.507L343.07 181c14.262 13.864 39.93 34.5 39.93 34.5s-9.449 12.152-18.017 15.214c-8.095 2.893-21.913 0-21.913 0"/><path fill="#8FF295" d="m338.798 230.918-14.709-39.712-1.47-2.942 9.805-.49 9.806-5.883L379 216.21s-9.514 11.748-18.14 14.708c-8.149 2.796-22.062 0-22.062 0"/><path fill="#E48E7A" d="M323.499 188.892s-16.528-17.424-17.89-19.791c-1.361-2.368 11.259 6.528 11.259 6.528s-12.494-12.815-11.141-15.178c.434-.758 4.539 2.688 8.264 6.058-4.601-4.436-10.072-10.028-9.99-11.466.102-1.802-.352-2.169 1.815-2.623 1.877-.394 12.639 12.458 15.746 16.358-3-4.05-12.999-17.891-12.777-18.359 1.195-2.527 3.461-.122 3.461-.122l18.99 18.804 1.736-1.669s-3.348-5.421-5.051-8.381c-1.702-2.96 4.42-1.105 4.42-1.105s5.774 6.575 7.736 11.916c1.752 4.769 2.212 11.293 2.212 11.293l-.124.829-9.734 5.598z"/><path fill="#FCB7A0" d="M322.706 188.621s-16.879-17.6-18.24-19.968c-1.362-2.367 11.566 6.729 11.566 6.729s-12.424-12.703-11.188-14.999c.519-.962 7.285 5.187 11.315 8.98-4.62-4.467-13.003-12.825-12.95-14.592.054-1.773-.044-1.777 2.02-2.172 1.776-.339 12.014 12.156 15.088 16.088-3.021-4.136-12.842-17.902-12.642-18.357 1.082-2.461 3.311-.035 3.311-.035l18.639 19.005 1.622-1.603s-3.339-5.426-5.041-8.386 4.203-.982 4.203-.982 5.689 6.625 7.699 11.939c1.794 4.744 2.395 11.187 2.395 11.187l-.099.815-9.18 5.279z"/><defs><linearGradient id="a" x1="315.581" x2="315.581" y1="117.988" y2="119.39" gradientUnits="userSpaceOnUse"><stop stop-color="#6B6B6B"/><stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="337.637" x2="337.637" y1="117.638" y2="119.04" gradientUnits="userSpaceOnUse"><stop stop-color="#6B6B6B"/><stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/></linearGradient></defs></svg> \ No newline at end of file diff --git a/client/src/assets/about/building.svg b/client/src/assets/about/building.svg new file mode 100644 index 000000000000..848d7e6395b6 --- /dev/null +++ b/client/src/assets/about/building.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 383 233"><rect width="206.101" height="148.585" x="96.658" y="80.863" fill="#DFF7E3" rx="8"/><rect width="205.101" height="147.585" x="105.048" y="74.287" fill="#CAD2CE" stroke="#007936" rx="7.5"/><path fill="#007936" stroke="#007936" d="M105.048 81.787a7.5 7.5 0 0 1 7.5-7.5h190.101a7.5 7.5 0 0 1 7.5 7.5v9.694H105.048z"/><circle cx="117.686" cy="84.327" r="3.922" fill="#DFF7E3"/><circle cx="131.414" cy="84.327" r="3.922" fill="#DFF7E3"/><circle cx="145.141" cy="84.327" r="3.922" fill="#DFF7E3"/><path fill="#fff" d="M121.608 115.86a8 8 0 0 1 8-8h158.537a8 8 0 0 1 8 8v45.774a8 8 0 0 1-8 8H129.608a8 8 0 0 1-8-8z"/><path fill="#007936" stroke="#DFF7E3" d="M249.995 152.289c-1.023-4.014 1.391-8.136 5.392-9.208l45.393-12.158a7.393 7.393 0 0 1 9.098 5.327l5.516 21.64c1.023 4.013-1.391 8.136-5.392 9.207l-45.393 12.158a7.39 7.39 0 0 1-9.098-5.327z"/><path fill="#fff" d="M269.826 157.813c-.311.059-.502.086-.502.086s.191-.038.502-.086m22.471-4.801c1.319-.294 3.013-1.657 3.013-1.657s-1.781.686-3.013 1.657"/><path stroke="#DFF7E3" stroke-linecap="round" stroke-linejoin="round" d="M275.972 149.5s-2.771.071-3.907 1.047c-2.007 1.725 3.813 3.078 2.424 5.142-1.098 1.632-5.165 2.21-5.165 2.21s3.109-.622 4.705-.019c2.547.963-.333 5.219 2.527 5.529 1.512.163 3.907-1.047 3.907-1.047m5.38-15.091s3.348-3.895 3.803-1.432l1.166 6.307c.455 2.462 4.498-.791 4.498-.791s-3.186 1.227-3.982 2.721c-1.053 1.976 3.641 3.265 1.832 4.887-1.109.995-3.907 1.046-3.907 1.046"/><circle cx="280.63" cy="155.011" r="1.017" stroke="#DFF7E3" transform="rotate(-14.99 280.63 155.011)"/><circle cx="286.849" cy="152.819" r=".511" stroke="#DFF7E3" transform="rotate(-14.99 286.849 152.819)"/><path fill="#fff" d="M121.31 180.93a3.033 3.033 0 0 1 3.032-3.033h72.826a3.032 3.032 0 0 1 0 6.065h-72.826a3.03 3.03 0 0 1-3.032-3.032m0 14.151a3.03 3.03 0 0 1 3.032-3.032h72.826a3.032 3.032 0 0 1 0 6.065h-72.826a3.033 3.033 0 0 1-3.032-3.033"/><path fill="#007936" d="M110.962 131.452a7.9 7.9 0 0 1-5.645-2.383 8.22 8.22 0 0 1-2.338-5.754c0-2.158.841-4.227 2.338-5.753a7.9 7.9 0 0 1 5.645-2.383 7.9 7.9 0 0 1 5.646 2.383 8.22 8.22 0 0 1 2.338 5.753 8.22 8.22 0 0 1-2.338 5.754 7.9 7.9 0 0 1-5.646 2.383m16.948-5.882c.092-.744.16-1.487.16-2.255s-.068-1.534-.16-2.324l4.813-3.79c.434-.349.548-.976.274-1.488l-4.562-8.044c-.274-.511-.889-.72-1.391-.511l-5.68 2.325c-1.186-.907-2.418-1.697-3.855-2.278l-.844-6.161a1.16 1.16 0 0 0-1.141-.977H106.4a1.16 1.16 0 0 0-1.14.977l-.844 6.161c-1.437.581-2.669 1.371-3.855 2.278l-5.68-2.325a1.11 1.11 0 0 0-1.391.511l-4.562 8.044a1.16 1.16 0 0 0 .273 1.488l4.813 3.79c-.09.79-.16 1.557-.16 2.324 0 .768.07 1.511.16 2.255l-4.813 3.86a1.16 1.16 0 0 0-.273 1.487l4.562 8.044c.273.512.89.698 1.391.512l5.68-2.348c1.186.93 2.418 1.72 3.855 2.301l.844 6.161c.091.558.57.976 1.14.976h9.124c.571 0 1.05-.418 1.141-.976l.844-6.161c1.437-.604 2.669-1.371 3.855-2.301l5.68 2.348c.502.186 1.117 0 1.391-.512l4.562-8.044c.274-.511.16-1.139-.274-1.487z"/><path fill="#DFF7E3" stroke="#007936" d="m130.371 127.531-.034.277.218.174 4.812 3.859c.232.186.314.544.149.857l-4.559 8.038-.006.011a.636.636 0 0 1-.769.281l-5.67-2.344-.27-.111-.23.18c-1.157.907-2.351 1.649-3.74 2.234l-.263.11-.038.283-.843 6.153a.66.66 0 0 1-.646.552h-9.125a.66.66 0 0 1-.646-.552l-.843-6.153-.039-.287-.269-.109c-1.381-.558-2.572-1.321-3.734-2.231l-.229-.18-.27.111-5.67 2.344a.64.64 0 0 1-.77-.281l-.005-.011-4.562-8.044-.003-.004a.66.66 0 0 1 .155-.847l4.812-3.859.218-.174-.034-.277a18 18 0 0 1-.156-2.194c0-.739.066-1.484.156-2.268l.032-.277-.22-.173-4.808-3.786-.002-.001a.66.66 0 0 1-.153-.846l.003-.005 4.562-8.043.006-.011a.61.61 0 0 1 .758-.286l.003.001 5.68 2.325.265.109.228-.174c1.164-.891 2.357-1.654 3.738-2.212l.269-.109.039-.287.843-6.154a.66.66 0 0 1 .646-.551h9.125a.66.66 0 0 1 .646.551l.843 6.154.039.287.269.109c1.381.558 2.574 1.321 3.738 2.212l.228.174.265-.109 5.68-2.325.003-.001a.61.61 0 0 1 .758.286l.006.011 4.559 8.037c.165.313.083.67-.147.857l-.002.001-4.809 3.786-.219.173.032.277c.09.784.156 1.529.156 2.268s-.066 1.459-.156 2.194Zm-22.454 3.91a8.4 8.4 0 0 0 6.002 2.533 8.4 8.4 0 0 0 6.003-2.533 8.72 8.72 0 0 0 2.481-6.104 8.72 8.72 0 0 0-2.481-6.104 8.4 8.4 0 0 0-6.003-2.533 8.4 8.4 0 0 0-6.002 2.533 8.72 8.72 0 0 0-2.481 6.104c0 2.287.891 4.483 2.481 6.104Z"/><path stroke="#fff" d="M113.916 135.945c5.984 0 10.855-4.738 10.855-10.608s-4.871-10.608-10.855-10.608c-5.983 0-10.854 4.738-10.854 10.608s4.871 10.608 10.854 10.608Z"/><path fill="#F4D4B8" d="m50.629 106.946.573-2.5h3.39l.305 2.5h2.744s-2.84 4.482-4.268 3.75c-1.43-.732-3.145-3.018-4.574-3.75z"/><path fill="#F9CFA6" fill-rule="evenodd" d="m38.825 141.748-.182 5.719c10.512 3.726 28.172 1.644 28.477-1.765l.191-6.079-1.663-13.594c.371 2.767 2.156 13.475 7.543 13.594 4.559.1 9.146-7.439 9.146-7.439l4.878-13.051-6.707-7.188-4.878 9.632-3.049-5.569s-2.443-3.415-4.573-5.313c-1.712-1.525-5.793-2.812-5.793-2.812l-4.268-.939s-.915 1.25-2.744 2.501c-1.12.764-1.83.625-1.83.625a149 149 0 0 1-2.307-1.628l-2.57-1.499s-4.308-.086-6.517.679c-2.725.943-4.125 1.65-6.585 3.369-4.083 2.853-7.274 10.586-7.274 10.586l-1.642 5.583-1.459 8.345s.324.962 1.46 1.703c.154.101.361.245.613.42 1.599 1.113 4.998 3.481 8.302 4.005 1.029.164 2.372.159 3.431.115m-1.619-14.384c-.653 1.651-.92 4.471-.92 4.471l3.888.684.014-9.632s-2.202 2.508-2.982 4.477" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" d="m50.021 134.134-.034 6.25s7.35 2.5 8.266 2.187c.915-.312.304-.312.304-.312m2.134-6.25s.916.312-.304.625c-1.22.312-5.488.312-5.488.312m6.707 1.25s.61.313-.304.625c-.915.313-6.098-.312-6.098-.312m5.183 1.562s.61.625-.61.625-4.878-.937-4.878-.937m-1.223-5s1.202-.65 1.83-1.25c.556-.534 1.219-1.563 1.219-1.563"/><path fill="#ECAFA3" d="M50.021 134.133s7.505-4.288 6.403-1.875c-.238.521-.714.997-1.22 1.391-.87.676-1.83 1.109-1.83 1.109l7.013.938s1.22.625 0 .938-5.488.312-5.488.312l6.403.938s.914.625 0 .937c-.915.313-6.098-.312-6.098-.312l4.878.937s.915 1.25-.305 1.25-4.878-.937-4.878-.937l3.659 1.875s.61.625-.305.937-8.266-2.187-8.266-2.187z"/><path stroke="#000" stroke-linecap="round" stroke-width=".5" d="m81.056 112.166 4.559 5.468s7.262-4.335 7.846-5.261.062-.466.062-.466m-2.144-6.35s.982-.452.137.703c-.846 1.156-4.499 4.368-4.499 4.368m6.535-4.099s.72-.223.136.703-5.417 4.353-5.417 4.353m5.429-2.716s.919.015-.125.934c-1.044.918-4.77 2.96-4.77 2.96"/><path fill="#ECAFA3" d="M81.728 112.885s-2.06-8.227-.515-6.029c1.326 1.885 2.342 2.395 2.89 2.52l.456.024 6.028-4.037s1.804-.481 1.048.671c-.757 1.151-4.131 4.381-4.131 4.381l5.686-4.16s1.14-.235.624.685c-.515.921-5.029 4.386-5.029 4.386l4.481-3.006s1.556.221.591 1.144c-.964.924-4.48 3.006-4.48 3.006l4.14-1.398s.9-.004.384.916c-.516.921-8.208 5.58-8.208 5.58z"/><path fill="#005A26" d="M75.582 186.458c-.682-15.605-9.4-39.81-9.4-39.81s.873 2.796-12.831 2.796c-13.704.001-14.608-2.498-14.608-2.498s.29 17.994-.619 29.866c-1.254 16.394-7.613 41.383-7.613 41.383h18.881l7.004-46.362 4.568 14.625-6.09 31.737h17.358s3.894-19.284 3.35-31.737"/><path fill="#ECAFA3" d="M59.959 97.031c-1.917 5.642-1.948 6.322-6.827 8.203-4.356-1.539-6.272-2.051-6.795-8.55 1.394-6.496 5.264-9.349 9.21-9.349 2.439 1.197 6.033 3.576 4.412 9.696m10.145 122.902c-.904-1.389-.603-1.736-.603-1.736H64.38s.194 1.926 0 3.125c-.184 1.139-.756 1.632-.904 2.778-.104.805-.417 1.427 0 2.083.374.59 1.506.695 1.506.695h10.544v-3.472s-4.519-2.084-5.422-3.473m8.134 7.639v-3.125s.996.261 1.506.695c.682.581 1.205 2.083 1.205 2.083z"/><path fill="#83BB9E" d="M78.14 224.135s-.718-.444-1.22-.625c-.572-.207-1.524-.313-1.524-.313v4.688h2.744z"/><path fill="#83BB9E" d="m80.579 226.323.304.625-18.597-.313s-.305.747-.305 1.25.305 1.25.305 1.25h18.902s.235-.361.305-.625c.094-.353.085-.581 0-.937-.14-.593-.914-1.25-.914-1.25"/><path stroke="#000" stroke-width=".5" d="M62.287 226.635h13.11v-3.125"/><path fill="#ECAFA3" d="M41.614 221.322c-.915-1.25-.305-3.125-.305-3.125H35.82s-.414 1.108-.61 2.188c-.186 1.025 0 2.187-2.134 3.75-.581.425-.727 1.909-.305 2.5.379.53 1.524.625 1.524.625l11.89.312v-3.437s-3.658-1.563-4.572-2.813m6.098 6.563v-2.813s1.009.235 1.525.625c.69.524 1.22 1.875 1.22 1.875z"/><path fill="#83BB9E" d="M47.652 224.76s1.112.494.61.313c-.238-.086-.563-.947-1.22-1.25a10 10 0 0 0-1.895-.625v5h2.743z"/><path fill="#83BB9E" d="m49.782 226.635.305.625-18.055-.312s-.305.747-.305 1.25.305 1.25.305 1.25h18.903s.235-.362.305-.625c.094-.353.084-.582 0-.938-.141-.593-1.458-1.25-1.458-1.25"/><path stroke="#000" stroke-width=".5" d="M32.034 226.948h13.11v-3.125"/><path fill="#003D18" stroke="#000" d="m61.16 91.01-5.578-4.083h-4.78l-8.766 4.084-10.358 13.476-17.53 1.634L1 111.021l8.367 11.026h14.74l16.336-6.534 15.139-13.885z"/><path fill="url(#a)" d="M305.258 118.36c.593-.073.472-.299 1.065-.372l2.436.186 2.435.186s-.009-.126 2.367 0c3.199.169 5.017.435 8.199 0 1.734-.237 3.188.001 3.796.001s.607-.001 0 .56c-.608.56-2.311.274-3.796.373-3.197.215-8.199 0-8.199 0l-6.832-.373s-2.064-.488-1.471-.561"/><path fill="url(#b)" d="M327.483 118.01c.583-.073.465-.299 1.048-.372l4.791.372s-.009-.126 2.328 0c3.147.169 4.935.435 8.065 0 1.705-.237 3.136.001 3.733.001s.597-.001 0 .56c-.597.56-2.273.274-3.733.373-3.145.215-8.065 0-8.065 0l-6.72-.373s-2.03-.488-1.447-.561"/><path fill="#924A3B" d="m304.469 48.235-9.575.95 9.043 3.607z"/><path fill="#ECAFA3" d="M307.565 13.275c-1.627 5.015-1.923 5.623-6.066 7.294-3.698-1.368-5.326-1.823-5.77-7.598 1.184-5.774 4.875-8.026 8.225-8.026 2.071 1.064 4.617 2.804 3.611 8.33"/><path fill="#ECAFA3" d="m297.623 18.577 6.668.35s-.855 3.681 2.223 4.557-.149 11.918-.149 11.918l-15.24-7.565s2.124-5.905 4.275-6.105c1.881-.175 2.223-3.155 2.223-3.155"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" d="M300.021 16.01c1.384 1.045 2.214 1.35 3.847 1.064m-1.774-1.673h1.775l-.148-3.495c.231-.237.391-.516.592-.76.25-.304.333-.324.592-.456.621-.315 1.775 0 1.775 0l.296.76m-8.285-.152s.685-.468 1.183-.608c.669-.187 1.128-.252 1.776 0 .464.182 1.035.76 1.035.76m-4.142 7.598s1.572 1.464 2.811 1.52c.645.03 1.627-.304 1.627-.304"/><ellipse cx="305.345" cy="12.515" fill="#0F0F0F" rx=".444" ry=".456"/><ellipse cx="301.492" cy="12.222" fill="#0F0F0F" rx=".444" ry=".456"/><ellipse cx="296.07" cy="12.695" fill="#ECAFA3" rx="1.368" ry="2.454"/><path fill="#003D18" fill-rule="evenodd" d="M300.782 1.309c-.732-1.146-2.362-1.631-3.94-1.084-1.817.63-2.878 2.386-2.371 3.924.173.525.506.956.941 1.271a8.56 8.56 0 0 0-.952 3.877c.001.693.013 1.586.303 1.701.53 0 .872-.115 1.165-.318l.039.008s.437 3.221-.301 5.26q-.064.175-.12.34c-.169.488-.317.918-.635 1.362-.621.868-2.415 2.012-2.415 2.012s1.556-.102 2.113-.31c1.1-.41 1.513-1.213 1.962-2.32.165-.407.302-1.084.302-1.084V12.7c0-.487.604-1.083.604-1.083l.592-2.88q.167-.123.346-.249l4.371-2.476c.488-.171.943-.272 1.335-.272.602 0 1 .629 1.369 1.214.197.312.386.61.594.796.456.408.843.846 1.17 1.238q.178.215.333.408h.001l.186.229c.085.367.114.93-.006 1.798-.327 2.362-.302 3.249-.302 3.249s.428-.732.73-1.197c.256-.393.204-2.593.182-3.256.26.104.372-.28.372-1.538a7.7 7.7 0 0 0-.528-2.803c.888-.261 1.599-.87 1.882-1.728.507-1.538-.554-3.295-2.371-3.924-1.692-.586-3.442.013-4.084 1.341a7 7 0 0 0-2.063-.312q-.408 0-.804.055" clip-rule="evenodd"/><path fill="#ECAFA3" d="m303.935 4.07.473 1.25.402.852-1.026-.571.375-.28z"/><path fill="#F9CFA6" d="m287.866 43.571-.538-5.172-1.839 2.3h1.66l-.403 3.067-.573 2.366-7.523 3.68s-1.838 1.05-2.907.35c-1.065-.697-1.368-1.603-1.368-1.603l1.368-7.86 1.539-5.258s2.992-7.285 6.82-9.972c2.307-1.619 3.62-2.285 6.175-3.173 2.071-.72 5.471-1.227 5.471-1.227l3.049 2s1.283 1.581 1.792 2.77c1.203 2.805 0 7.845 0 7.845s1.559-4.313 1.874-5.57c.296-1.187.814-5.046.814-5.046l1.533-.772 4.023.403s3.233 1.149 4.838 2.586c1.998 1.788 3.585 5.91 3.585 5.91h-10.932l-1.971 16.994-7.7.721c-.528.05-.625.78-.129.966l7.291 2.746 10.215-.185-.179 5.727c-.287 3.21-16.846 5.172-26.702 1.662l.358-11.267V45.43z"/><path fill="#ECAFA3" d="M274.798 50.042c-1.954-3.132 1.208-9.438 1.208-9.438s2.301-.237 3.773-.156c1.549.086 3.925.62 3.925.62l3.774-1.083.302-.928c.452-1.391 1.358-1.856 1.358-1.856s.604-2.09 1.51-2.321c.905-.23.905.257.905 1.392 0 1.392-.754 2.321-.754 2.321l3.32-.774s2.645-1.237 1.963 2.785c-.683 4.023-.906 3.869-.906 3.869s-3.774 1.237-5.132 1.237c-1.359 0-1.307-.28-1.307-.28l-10.92 5.075s-2.278.725-3.019-.463"/><path stroke="#000" stroke-linecap="round" stroke-width=".5" d="M290.615 45.606s3.907-.257 4.617-1.227c.513-.701 1.026-4.557 1.026-4.557s.168-1.29-.342-1.752c-.364-.33-1.197-.35-1.197-.35l-3.933.876.684-1.403s.559-1.514 0-2.103c-.168-.177-.513-.175-.513-.175"/><path fill="#E5E5E5" d="M307.545 100.285s2.393-.247 3.731-.152c1.306.093 3.108.605 3.108.605l-.466 3.617-6.373 3.468zm22.909-.757s2.082-.553 3.419-.457c1.307.094 3.42.913 3.42.913l-.311 4.099-6.528 3.039z"/><path fill="#7C6063" d="M308.046 105.94v2.011s.236-1.484.906-2.011c.356-.281.714-.167 1.057-.464.324-.282.282-.644.603-.929.299-.265.526-.353.906-.464.567-.166.931-.118 1.51 0 .365.075.905.309.905.309s.538.498.302.619c-.105.054-.302 0-.302 0s-.538-.245-.905-.309c-.407-.071-.755-.001-1.057 0s-.382.104-.453.309c-.039.114 0 .31 0 .31v.464l-1.208.464-.754.928-1.359 1.702-.302.465v.153l.151 1.857s.151.619.755.619 1.057-.31 1.057-.31l3.622.31 4.076 1.856s2.868.465 3.321.465-1.661-.774-1.661-.774v-.928h2.868v.619h1.057l.453-.31s.741-.25 1.207-.155c.66.136 1.045.475 1.359 1.083.359.695.225 1.261 0 2.012-.26.866-1.359 1.857-1.359 1.857l-4.83 1.237h-4.075l-8.605-.928-2.113-.619v-3.249s.604-.774 1.359-.464c.754.309 3.142 2.202 5.736 3.713l7.245.619 4.076-1.393v-1.237l-2.264.928h-3.17v-.309l-4.831-2.785s-1.056-.465-1.509-.31c-.437.149-.367.674-.755.928-.695.457-2.113 0-2.113 0s-.674-.224-1.057-.464a6 6 0 0 1-.604-.464v-3.404l-.301-.772v-2.476z"/><path fill="#FFF8F8" d="m305.178 114.139 1.812-5.57.301.929v3.404l3.321 1.083s.755-1.393 1.359-1.393.836.26 1.358.464c2.05.803 4.831 2.94 4.831 2.94.302.464 1.85.326 3.019.155.978-.144 1.509-.619 2.415-.774s1.509.31 0 1.238c-1.51.928-2.408 1.223-4.076 1.547-2.852.554-4.654.205-7.396-.774-2.626-.937-6.038-3.868-6.038-3.868z"/><path fill="#F2DDD0" d="M311.369 108.568s-1.208-.154-2.114-.154 1.057-2.166 1.057-2.166 1.208-.618 1.661-.464c.453.155 4.679 3.713 4.679 3.713s.604.535 1.057.309c.488-.244.151-1.082.453-1.082s2.565 1.548 2.113 2.166c-.453.618-4.227.464-4.981 0-.755-.464-3.925-2.322-3.925-2.322"/><path fill="#C9624B" d="M311.522 110.116s-3.019-.929-3.321-1.083c-.302-.155-.452 1.237-.452 1.237 1.061.665 1.509 1.393 2.717 1.702 1.207.31 1.699.537 2.566.155.466-.205.697-.454.905-.928.17-.386 0-1.238 0-1.238l-1.66-.928s.213.71 0 .928-.755.155-.755.155"/><path fill="#7C6063" d="m330.537 107.022-.453-1.548-.755 1.857.755.928 1.509-1.856 2.717-1.393-3.019.464zm-2.868 5.415.302.619-.302-.774 3.924 4.178 3.774 1.083s3.689.937 6.038.619c1.021-.139 1.628-.186 2.566-.619.701-.324 1.661-1.083 1.661-1.083l-.302-1.702-2.415.928s-2.114-.155-2.567-.464c-.452-.31-4.226-3.095-4.981-3.249-.755-.155-3.774.464-3.774.464l-1.811-.464v-1.702h.302l.453.773 1.509-.464 3.321.464 5.434 2.785 3.17.31-2.566-.774-.302-.928h1.812l1.962.928s1.399-.424 2.113 0c.47.28.686.574.906 1.083.31.718.284 1.282 0 2.012-.443 1.136-2.566 1.702-2.566 1.702s-3.853.644-6.34.619c-4.763-.049-11.925-2.631-11.925-2.631v-2.011z"/><path stroke="#7C6063" d="m327.971 113.056-.302-.619-.604 1.702v2.011s7.162 2.582 11.925 2.631c2.487.025 6.34-.619 6.34-.619s2.123-.566 2.566-1.702c.284-.73.31-1.294 0-2.012-.22-.509-.436-.803-.906-1.083-.714-.424-2.113 0-2.113 0l-1.962-.928h-1.812l.302.928 2.566.774-3.17-.31-5.434-2.785-3.321-.464-1.509.464-.453-.773h-.302v1.702l1.811.464s3.019-.619 3.774-.464 4.529 2.939 4.981 3.249c.453.309 2.567.464 2.567.464l2.415-.928.302 1.702s-.96.759-1.661 1.083c-.938.433-1.545.48-2.566.619-2.349.318-6.038-.619-6.038-.619l-3.774-1.083m-3.622-3.404 3.622 3.404m-3.622-3.404-.302-.774 3.924 4.178m-1.509-10.986.453 1.548.754-1.548 3.019-.464-2.717 1.393-1.509 1.856-.755-.928z"/><path fill="#393765" d="M318.312 108.569c-.151-.464-2.264-2.785-3.019-3.095-.755-.309-2.835.619-2.717.774s.453.309.453.309 1.556-.864 2.264-.309c.133.104.453.309.302.309s-2.139.344-1.962.465l.453.309c.176.121 2.264-.309 2.264-.309l.453.618-1.963.465s.151.619.453.464 1.812-.464 1.812-.464l.754 1.392s.604-.464.453-.928m22.498-.401c-.151-.465-2.265-2.785-3.019-3.095-.755-.309-2.992.247-2.873.401s.608.682.608.682 1.556-.865 2.265-.309c.132.104.759.309.301.309-.457 0-2.294.126-2.118.247s.432.406.609.527 2.259-.063 2.259-.063l.151.154-1.962.31s.458.991.76.837c.301-.155 1.504-.373 1.504-.373l.755 1.392s.91-.555.76-1.019"/><path fill="#FFF8F8" d="m327.827 113.057 1.661-6.035.603 1.238-.302 3.714 1.963.464s1.358-.31 1.962-.31 1.138-.204 1.661 0c2.049.803 4.83 3.095 4.83 3.095.302.464 1.645.551 2.717.464.985-.08.604 0 2.415-.774 1.812-.773.302 1.548.302 1.548s-1.048.778-1.811 1.083c-.949.377-2.566.464-2.566.464s-5.259.05-8.001-.929c-2.626-.937-5.434-4.022-5.434-4.022"/><path fill="#C9624B" d="M333.711 109.2s-3.019-.929-3.321-1.084c-.302-.154-.452 1.238-.452 1.238 1.061.665 1.509 1.393 2.717 1.702 1.207.31 1.699.537 2.566.155.466-.205.697-.454.905-.928.17-.386 0-1.238 0-1.238l-1.66-.928s.212.71 0 .928c-.213.218-.755.155-.755.155"/><path fill="#F2DDD0" d="M333.702 108.149s-1.16-.172-2.03-.172 1.015-2.421 1.015-2.421 1.16-.691 1.595-.518 4.406 3.84 4.406 3.84.667.907 1.102.654c.469-.272.145-1.209.435-1.209s2.464 1.729 2.029 2.42-4.058.519-4.783 0a436 436 0 0 0-3.769-2.594"/><path stroke="#000" stroke-width=".5" d="M295.579 21.245s2.184.767 3.248 1.752c1.508 1.395 1.967 2.697 2.394 4.732.48 2.284-.513 5.96-.513 5.96l1.539-4.207"/><path fill="#ECAFA3" d="m307.545 100.287.342-7.712c3.27 1.244 4.974 1.23 7.865.876l-1.368 7.361c-2.966-.595-4.422-.671-6.839-.525m22.915.175-1.025-8.237c3.269 1.244 5.829-.173 8.72-.526l-.855 9.289c-2.967-.596-4.422-.672-6.84-.526"/><path fill="#005A26" stroke="#DFF7E3" d="m287.837 59.59-.624-.167-.005.646.5.004-.5-.004v.206a38 38 0 0 0 .1 2.391c.108 1.431.336 3.223.831 4.493.808 2.07 1.606 3.176 3.165 4.716 1.202 1.188 2.84 1.917 4.577 2.357 1.741.442 3.617.601 5.335.621a38 38 0 0 0 5.727-.386V91.14c0 1.05.849 1.666 1.693 2.02.873.366 1.962.554 2.878.658 1.017.115 2.211.22 3.23.017.517-.103 1.017-.29 1.434-.62.424-.335.736-.796.898-1.4 1.097-4.07 1.229-9.035 1.094-12.956a80 80 0 0 0-.457-6.178l8.686 1.629 1.181 5.636.895 11.777.02.268.234.131.244-.436-.244.436h.001l.003.002.008.004.029.017.111.059q.144.077.404.206c.342.17.822.394 1.373.614 1.081.43 2.517.878 3.732.796.992-.068 2.139-.511 3-.909a19 19 0 0 0 1.409-.727l.04-.023.048-.028.023-.013.007-.004.001-.002h.001l-.258-.428.258.428.265-.16-.024-.307-1.255-16.343v-.002l-.001-.012-.003-.05-.013-.192a28 28 0 0 0-.386-2.98c-.328-1.765-.927-3.957-2.032-5.397-1.332-1.733-3.757-3.183-5.782-4.185a38 38 0 0 0-3.699-1.586l-.06-.021-.015-.006-.005-.001h-.001l-.164.472.163-.473-.008-.002-12.2-3.997-.947-.31.318.944.001.012q0 .013-.014.057a.9.9 0 0 1-.187.283c-.223.25-.617.551-1.196.87-1.151.632-2.929 1.277-5.219 1.742-4.573.928-11.118 1.123-18.618-.881Z"/><path fill="#00210A" d="M306.236 31.608c.06-.51.496-.893 1.01-.885l27.92.439a1 1 0 0 1 .978 1.114l-2.372 20.516h-8.568l-1.428-4.658s-.893-.56-.893 0c0 .559.536 3.726.536 3.726h-.357l-1.428-5.962s-.347-.305-.536-.186c-.133.083-.178.372-.178.372s-.011-.223-.179-.372c-.211-.19-.461-.123-.714 0-.51.246 0 1.49 0 1.49s-.357-.186-.714 0c-.357.187-.178 1.49-.178 1.49h-.536v3.913l-14.815.187z"/><path fill="#F5CAC1" d="M318.359 52.539s-.194-.026-.314 0c-.538.114 0 1.353 0 1.353l1.568.601 1.882.752h2.508l2.352-2.556-.94-.15-1.412-4.36s-1.097-1.052-1.097-.3c0 .75.47 3.758.47 3.758h-.313l-1.324-5.714s-.171-.706-.684-.356c-.114.078-.171.526-.171.35 0-.175.14-.293-.33-.444-.47-.15-.72.119-.941.451-.303.457.245 1.22.245 1.22s-.198-.18-.513 0c-.525.303-.342 1.578-.342 1.578s-.644-.542-.644.059z"/><path fill="#99D5A3" d="m343.07 230.714-14.609-41.078-1.461-3.043 9.739-.507L343.07 181c14.262 13.864 39.93 34.5 39.93 34.5s-9.449 12.152-18.017 15.214c-8.095 2.893-21.913 0-21.913 0"/><path fill="#DFF7E3" d="m338.798 230.918-14.709-39.712-1.47-2.942 9.805-.49 9.806-5.883L379 216.21s-9.514 11.748-18.14 14.708c-8.149 2.796-22.062 0-22.062 0"/><path fill="#E5A38C" d="M323.499 188.892s-16.528-17.424-17.89-19.791c-1.361-2.368 11.259 6.528 11.259 6.528s-12.494-12.815-11.141-15.178c.434-.758 4.539 2.688 8.264 6.058-4.601-4.436-10.072-10.028-9.99-11.466.102-1.802-.352-2.169 1.815-2.623 1.877-.394 12.639 12.458 15.746 16.358-3-4.05-12.999-17.891-12.777-18.359 1.195-2.527 3.461-.122 3.461-.122l18.99 18.804 1.736-1.669s-3.348-5.421-5.051-8.381c-1.702-2.96 4.42-1.105 4.42-1.105s5.774 6.575 7.736 11.916c1.752 4.769 2.212 11.293 2.212 11.293l-.124.829-9.734 5.598z"/><path fill="#F5CAC1" d="M322.853 188.537s-17.026-17.516-18.387-19.883 11.734 6.633 11.734 6.633-12.536-12.64-11.244-14.968c.542-.976 7.378 5.134 11.448 8.903-4.664-4.441-13.125-12.754-13.049-14.534.077-1.787-.022-1.79 2.091-2.213 1.819-.364 12.123 12.093 15.215 16.015-3.035-4.128-12.897-17.871-12.687-18.331 1.136-2.493 3.383-.077 3.383-.077l18.807 18.908 1.677-1.634s-3.343-5.424-5.046-8.384c-1.702-2.96 4.307-1.041 4.307-1.041s5.73 6.601 7.717 11.928c1.774 4.757 2.307 11.238 2.307 11.238l-.111.822-9.446 5.432z"/><defs><linearGradient id="a" x1="315.581" x2="315.581" y1="117.988" y2="119.39" gradientUnits="userSpaceOnUse"><stop stop-color="#6B6B6B"/><stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="337.637" x2="337.637" y1="117.638" y2="119.04" gradientUnits="userSpaceOnUse"><stop stop-color="#6B6B6B"/><stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/></linearGradient></defs></svg> \ No newline at end of file diff --git a/client/src/assets/about/collaborative-sm.svg b/client/src/assets/about/collaborative-sm.svg new file mode 100644 index 000000000000..09cbf91b4ea6 --- /dev/null +++ b/client/src/assets/about/collaborative-sm.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 45 46"><circle cx="30.094" cy="13.156" r="12.656" fill="#fff"/><path fill="#007936" d="M20.476 16.25a6.05 6.05 0 0 1 4.223 1.706 5.75 5.75 0 0 1 1.749 4.118c0 1.545-.63 3.026-1.75 4.119a6.05 6.05 0 0 1-4.222 1.705 6.05 6.05 0 0 1-4.223-1.705 5.75 5.75 0 0 1-1.75-4.119c0-1.545.63-3.026 1.75-4.118a6.05 6.05 0 0 1 4.223-1.706M8.532 20.41c.955 0 1.842.25 2.61.7a9.05 9.05 0 0 0 1.928 6.589 5.13 5.13 0 0 1-4.538 2.695 5.2 5.2 0 0 1-3.62-1.462 4.93 4.93 0 0 1-1.5-3.53 4.93 4.93 0 0 1 1.5-3.53 5.2 5.2 0 0 1 3.62-1.462m23.888 0c1.358 0 2.66.526 3.62 1.462a4.93 4.93 0 0 1 1.5 3.53 4.93 4.93 0 0 1-1.5 3.53 5.2 5.2 0 0 1-3.62 1.463 5.13 5.13 0 0 1-4.539-2.696 9.05 9.05 0 0 0 1.928-6.59 5.14 5.14 0 0 1 2.611-.699M9.385 37.467c0-3.445 4.965-6.24 11.09-6.24 6.127 0 11.092 2.795 11.092 6.24v2.912H9.385zM0 40.379v-2.496c0-2.313 3.225-4.26 7.593-4.826-1.007 1.132-1.62 2.696-1.62 4.41v2.912zm40.952 0H34.98v-2.912c0-1.714-.615-3.278-1.621-4.41 4.368.566 7.593 2.513 7.593 4.826z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/collaborative.svg b/client/src/assets/about/collaborative.svg new file mode 100644 index 000000000000..56b62cce0fd3 --- /dev/null +++ b/client/src/assets/about/collaborative.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80"><ellipse cx="57.432" cy="22.222" fill="#D7F5DC" rx="22.568" ry="22.222"/><path fill="#007936" d="M36.402 28a10.75 10.75 0 0 1 7.507 3.033 10.23 10.23 0 0 1 3.11 7.321c0 2.746-1.119 5.38-3.11 7.322a10.76 10.76 0 0 1-7.507 3.032c-2.816 0-5.517-1.09-7.508-3.032a10.23 10.23 0 0 1-3.11-7.322c0-2.746 1.119-5.38 3.11-7.321A10.76 10.76 0 0 1 36.402 28m-21.235 7.396c1.699 0 3.276.444 4.641 1.242-.454 4.23.82 8.432 3.428 11.715-1.516 2.84-4.55 4.793-8.069 4.793a9.22 9.22 0 0 1-6.435-2.6 8.77 8.77 0 0 1-2.665-6.275c0-2.354.959-4.611 2.665-6.276a9.22 9.22 0 0 1 6.435-2.6m42.469 0a9.22 9.22 0 0 1 6.435 2.6 8.77 8.77 0 0 1 2.665 6.275 8.77 8.77 0 0 1-2.665 6.275 9.22 9.22 0 0 1-6.435 2.6c-3.52 0-6.553-1.953-8.07-4.793 2.61-3.283 3.884-7.484 3.428-11.715a9.13 9.13 0 0 1 4.642-1.242M16.684 65.719c0-6.124 8.827-11.094 19.717-11.094s19.718 4.97 19.718 11.094v5.177H16.684zM0 70.896v-4.438c0-4.112 5.733-7.573 13.499-8.579-1.79 2.012-2.882 4.793-2.882 7.84v5.177zm72.803 0H62.186v-5.177c0-3.047-1.092-5.828-2.882-7.84 7.766 1.006 13.499 4.467 13.499 8.58z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/dot-dark.svg b/client/src/assets/about/dot-dark.svg new file mode 100644 index 000000000000..15aed46ddf1a --- /dev/null +++ b/client/src/assets/about/dot-dark.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.04 50.702"><path fill="none" stroke="#fff" d="M25 50.202C11.462 50.202.5 39.069.5 25.351S11.463.5 25 .5s24.5 11.133 24.5 24.851S38.537 50.202 25 50.202z"/><path fill="#fff" stroke="#8FF295" d="M25.019 38.027c-6.916 0-12.51-5.681-12.51-12.676s5.595-12.675 12.51-12.675 12.51 5.681 12.51 12.675-5.595 12.676-12.51 12.676z"/><path fill="#8FF295" stroke="#8FF295" d="M25.018 33.968c-4.705 0-8.507-3.864-8.507-8.617 0-4.752 3.802-8.617 8.507-8.617s8.507 3.865 8.507 8.617-3.802 8.617-8.507 8.617z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/dot.svg b/client/src/assets/about/dot.svg new file mode 100644 index 000000000000..9af28548b671 --- /dev/null +++ b/client/src/assets/about/dot.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.04 50.702"><path fill="none" stroke="#fff" d="M25 50.202C11.462 50.202.5 39.069.5 25.351S11.463.5 25 .5s24.5 11.133 24.5 24.851S38.537 50.202 25 50.202z"/><path fill="#fff" stroke="#007936" d="M25.019 38.027c-6.916 0-12.51-5.681-12.51-12.676s5.595-12.675 12.51-12.675 12.51 5.681 12.51 12.675-5.595 12.676-12.51 12.676z"/><path fill="#007936" stroke="#007936" d="M25.018 33.968c-4.705 0-8.507-3.864-8.507-8.617 0-4.752 3.802-8.617 8.507-8.617s8.507 3.865 8.507 8.617-3.802 8.617-8.507 8.617z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/education.svg b/client/src/assets/about/education.svg new file mode 100644 index 000000000000..8d4393d8497a --- /dev/null +++ b/client/src/assets/about/education.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 50 50"><path fill="#007936" d="M39.889 23.611v-12.5l-5.861 2.945c.194.833.305 1.694.305 2.61 0 6.14-4.972 11.112-11.11 11.112-6.14 0-11.112-4.972-11.112-11.111 0-.917.111-1.778.306-2.611l-8.64-4.334L23.223 0l19.445 9.722v13.89zm-16.667-4.167-5.555-2.777c0 3.055 2.5 5.555 5.555 5.555 3.056 0 5.556-2.5 5.556-5.555zm7.64-9.944-7.195-3.667-7.473 3.806 7.223 3.667zm-7.64 21.056c7.417 0 22.222 3.694 22.222 11.11V50H1v-8.333c0-7.417 14.806-11.111 22.222-11.111m0 5.277c-8.333 0-16.944 4.056-16.944 5.834v3.055h33.889v-3.055c0-1.778-8.695-5.834-16.945-5.834"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/global-impact-dark.svg b/client/src/assets/about/global-impact-dark.svg new file mode 100644 index 000000000000..f51d35856b88 --- /dev/null +++ b/client/src/assets/about/global-impact-dark.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 294 537"><ellipse cx="149.38" cy="521.65" fill="#8FF295" rx="51.63" ry="14.642"/><g fill-rule="evenodd" clip-rule="evenodd"><path fill="#DC8173" d="M106.027 417.26c-.092-.361-2.97-11.608-5.79-18.446-6.09-14.769-22.136-33.777-22.136-33.777s-1.898-7.858 0-12.883c2.048-5.422 11.45-3.134 11.45-3.134l28.751 19.848 28.242-22.286 41.219-26.116s5.929-3.125 8.141 0c.928 1.311 1.527 4.179 1.527 4.179s8.545-7.134 14.503-6.616c2.862.249 7.124 2.437 7.124 2.437s6.001 3.122 7.633 7.661c1.851 5.148-1.018 14.625-1.018 14.625s2.641 4.323 2.799 7.66c.265 5.619-6.361 11.491-6.361 11.491l-33.637 47.74.11-.01s2.796 30.482 3.568 50.118c.954 24.294 0 62.299 0 62.299s-26.114 7.717-43.596 7.59c-17.092-.125-42.529-7.59-42.529-7.59z"/><path fill="#EFA697" d="M105.576 403.518c1.956 4.066 3.493 7.263 3.653 13.752.214 8.735 0 105.795 0 105.795s23.85 6.843 40.514 7.02c17.192.183 42.168-7.02 42.168-7.02s1.145-33.769.978-55.413c-.172-22.273-1.927-56.998-1.927-56.998l34.348-48.749s6.626-5.873 6.361-11.491c-.158-3.338-2.799-7.661-2.799-7.661s2.869-9.477 1.018-14.625c-1.632-4.539-7.633-7.66-7.633-7.66s-9.159-1.406-12.744-.7c-2.084.411-9.209 6.217-17.538 13.543 3.471-4.828 5.341-9.276 4.123-12.531-1.367-3.65-8.335.695-8.335.695l-38.02 25.108-28.242 22.286-31.615-19.806s-5.192-1.47-8.585 3.092c-3.477 4.673-.542 12.437-.542 12.437s16.587 19.454 22.677 34.223c.737 1.787 1.464 3.297 2.14 4.703"/><g fill="#FCB7A0"><path d="M117.461 418.339c-.002 1.233-.005 2.729.039 4.661.198 8.735 0 102 0 102s18.084 4.823 33.5 5c15.903.183 41.796-6.5 41.796-6.5s.155-28.525 0-50.168c-.159-22.273-1.783-56.998-1.783-56.998L204.5 391.5s25.245-36.881 25-42.5c-.146-3.337-3-5-3-5s3.212-8.352 1.5-13.5c-1.51-4.539-8-6.5-8-6.5s-2.5-3.49-9.5-2.001c-2.944.627-15.443 10.561-26.291 19.545 5.541-5.711 10.378-12.268 10.791-18.044.275-3.852-7.5.5-7.5.5L150 349.5l-25.5 21.218L98 353.5s-7.36-1.968-10.5 2.593C84.284 360.766 86 364 86 364s23.773 28.732 29.406 43.5c2.065 5.413 2.063 6.499 2.055 10.839"/><path d="M117.461 418.339c-.002 1.233-.005 2.729.039 4.661.198 8.735 0 102 0 102s18.084 4.823 33.5 5c15.903.183 41.796-6.5 41.796-6.5s.155-28.525 0-50.168c-.159-22.273-1.783-56.998-1.783-56.998L204.5 391.5s25.245-36.881 25-42.5c-.146-3.337-3-5-3-5s3.212-8.352 1.5-13.5c-1.51-4.539-8-6.5-8-6.5s-2.5-3.49-9.5-2.001c-2.944.627-15.443 10.561-26.291 19.545 5.541-5.711 10.378-12.268 10.791-18.044.275-3.852-7.5.5-7.5.5L150 349.5l-25.5 21.218L98 353.5s-7.36-1.968-10.5 2.593C84.284 360.766 86 364 86 364s23.773 28.732 29.406 43.5c2.065 5.413 2.063 6.499 2.055 10.839"/><path d="M117.461 418.339c-.002 1.233-.005 2.729.039 4.661.198 8.735 0 102 0 102s18.084 4.823 33.5 5c15.903.183 41.796-6.5 41.796-6.5s.155-28.525 0-50.168c-.159-22.273-1.783-56.998-1.783-56.998L204.5 391.5s25.245-36.881 25-42.5c-.146-3.337-3-5-3-5s3.212-8.352 1.5-13.5c-1.51-4.539-8-6.5-8-6.5s-2.5-3.49-9.5-2.001c-2.944.627-15.443 10.561-26.291 19.545 5.541-5.711 10.378-12.268 10.791-18.044.275-3.852-7.5.5-7.5.5L150 349.5l-25.5 21.218L98 353.5s-7.36-1.968-10.5 2.593C84.284 360.766 86 364 86 364s23.773 28.732 29.406 43.5c2.065 5.413 2.063 6.499 2.055 10.839"/></g></g><path stroke="#DC8173" stroke-width="2" d="M169.82 356.88h-12.181m12.181 0c6.09 1.736 8.175 4.747 12.181 8.677m-12.181-8.677 26.987-28.991m27.186-6.065s-12.502 11.661-14.105 12.843c-14.575 10.745-15.244 17.336-27.887 30.89 4.756 2.982 6.141 4.654 10.898 7.636m36.227-29.849s-8.339-1.042-36.227 29.849c4.483 9.372 1.608 14.925 1.608 14.925"/><ellipse cx="153.21" cy="170.4" fill="#8FF295" rx="127.21" ry="122.21"/><path fill="#005A26" d="M68.62 161.965c-3.206-1.857-12.65 4.706-16.298 5.449-60.767 12.373 51.257-40.319 21.068-56.99-.673-.372-1.038-1.363-1.754-1.643-3.216-1.261-19.024 12.87-16.537.081.09-.456.025-.999-.197-1.407-11.064-20.306-25.055 34.399-25.09 34.536-.001.004 0-.004 0 0-.034.139-16.582 66.936 25.292 77.186 9.478 2.32 19.84 28.624 24.507 41.883.69 1.962 3.67 1.771 4.083-.268.982-4.832 2.181-10.534 2.816-12.814 1.308-4.692-1.312-7.764 0-12.455 2.408-8.603 12.944-8.052 16.3-16.346 3.201-7.913 1.619-13.316 2.385-21.795.722-7.99 4.462-12.884 1.193-20.238-2.777-6.247-7.448-13.415-13.914-10.898-3.164 1.232-3.917.142-7.156 1.168-5.853 1.854-4.19-5.705-10.336-5.449-3.677.153-3.193 1.834-6.361 0m116.106 96.755c-8.567 4.93.513 15.966 2.094 17.78.152.174.326.307.537.404 2.95 1.355 26.585 10.732 57.134-20.591 15.775-16.176 17.945-20.722 18.241-21.613.04-.119.058-.224.089-.345.657-2.552 8.483-34.174-6.202-36.252-3.528-.5-11.107 4.505-16.862 9.264-4.782 3.954-9.75 14.842-16.05 15.427-6.011.558-5.446 8.478-11.378 10.342-5.59 1.756-7.852-.846-12.247 2.641-3.732 2.96-9.869.671-14.65 2.018-9.01 2.539-7.452 6.46-7.094 6.783 3.175 2.86.763 2.004 2.111 4.857.807 1.707 2.669 1.404 2.023 3.391-.655 2.012 4.535 4.581 2.254 5.894M123.719 83.105c4.963 1.428 8.848-18.567 9.171-20.28.017-.087.036-.157.057-.243.319-1.262 2.113-11.46-24.479-7.122-9.27 1.513-23.41 10.814-25.16 11.982q-.18.12-.327.278c-1.436 1.529-12.76 13.77-9.505 16.196 1.372 1.023 3.264 2.582 7.365 2.604 3.406.018 11.205-4.164 12.788-1.275 1.51 2.757 6.377-2.442 8.692-.535 2.182 1.797.984 4.576 4.022 4.685 2.58.091 2.326 4.677 4.095 6.31 3.333 3.078 5.496-.156 5.63-.54 1.184-3.412 1.112-1.636 2.644-4.1.917-1.474.367-2.247 1.74-3.145 1.39-.909 2.002-5.179 3.267-4.815"/><ellipse cx="103.17" cy="28.612" fill="#005A26" rx="17.173" ry="15.612"/><path fill="#8FF295" d="M101.514 11.804c10.372-1.79 20.297 5.014 22.126 15.168 2.198 12.205-9.366 32.08-12.087 36.54a.942.942 0 0 1-1.409.243c-4.115-3.28-21.926-18.084-24.124-30.288-1.829-10.155 5.121-19.872 15.494-21.663m.758 31.714a1 1 0 0 0 1.386-.24L116.93 24.54a1 1 0 0 0-.253-1.4l-2.778-1.919a1 1 0 0 0-1.386.24L102.322 35.86a1 1 0 0 1-1.387.24l-4.92-3.408a1 1 0 0 0-1.386.238l-1.94 2.733a1 1 0 0 0 .252 1.4z"/><g clip-path="url(#a)"><ellipse cx="24.018" cy="136.77" fill="#005A26" rx="9.891" ry="8.992"/><path fill="#8FF295" d="M16.927 128.036c4.834-3.588 11.747-2.657 15.412 2.075 4.202 5.425 3.861 17.651 3.651 21.359a.946.946 0 0 1-1.162.862c-3.704-.802-15.82-3.782-20.021-9.207-3.665-4.733-2.714-11.501 2.12-15.089m8.474 15.995a1 1 0 0 0 1.137-.845l1.654-12.187a1 1 0 0 0-.866-1.116l-1.09-.151a1 1 0 0 0-1.136.845l-1.24 9.151a1 1 0 0 1-1.138.845l-2.569-.359a1 1 0 0 0-1.137.844l-.146 1.068a1 1 0 0 0 .864 1.117z"/></g><path fill="#005A26" d="M251.59 91.024c-6.374-12.172-38.972-29.125-40.39-29.858-.045-.023-.062-.034-.107-.059-.914-.508-12.377-6.242-31.653 13.6-7.026 7.23 2.566 21.982-6.842 22.003-33.962.078-35.212 4.164-54.457 14.472-23.355 12.51 5.083 43.976 9.303 43.967 9.003-.021 13.523-7.817 17.95 22.147.458 3.097 23.357-13.133 22.545-15.622-2.031-6.224-6.911-19.059 4.588-35.825 10.094-14.717 15.767 8.528 31.904 5.766 5.098-.873-7.787.032 1.659-8.956 4.921-4.683 32.265-2.657 31.931-5.523-.2-1.715 2.34-18.149 3.731-19.084 6.968-4.687 10.442-5.875 9.838-7.029"/><g clip-path="url(#b)"><ellipse cx="9.415" cy="10.002" fill="#005A26" rx="9.415" ry="10.002" transform="matrix(.97915 .214 -.2218 .9727 230.44 54)"/><path fill="#8FF295" d="M242.274 52.47c6.073 2.372 9.042 9.139 6.618 15.084-2.802 6.874-14.696 13.422-18.2 15.231a.942.942 0 0 1-1.338-.522c-1.269-3.674-5.291-16.44-2.489-23.314 2.424-5.946 9.336-8.852 15.409-6.48M231.94 69.107a1 1 0 0 0 1.313.513l12.557-5.348a1 1 0 0 0 .535-1.314l-.526-1.211a1 1 0 0 0-1.313-.512l-9.482 4.04a1 1 0 0 1-1.313-.513l-1.161-2.681a1 1 0 0 0-1.313-.514l-1.233.524a1 1 0 0 0-.536 1.314z"/></g><path fill="#8FF295" d="M94.615 153.278c3.07 0 5.566 2.444 5.566 5.449 0 3.172-3.355 7.518-4.855 9.303a.92.92 0 0 1-1.421 0c-1.5-1.785-4.855-6.131-4.855-9.303 0-3.005 2.496-5.449 5.565-5.449m-1.919 8.647a1 1 0 0 0 1.406-.001l3.926-3.879a.781.781 0 1 0-1.099-1.111l-2.827 2.795a1 1 0 0 1-1.406 0l-.394-.39a.781.781 0 1 0-1.099 1.112zm97.716 62.416c3.069 0 5.566 2.444 5.566 5.449 0 3.172-3.355 7.518-4.855 9.303a.92.92 0 0 1-1.421 0c-1.501-1.785-4.855-6.131-4.855-9.303 0-3.005 2.496-5.449 5.565-5.449m-1.919 8.647a1 1 0 0 0 1.405-.001l3.926-3.879a.781.781 0 1 0-1.098-1.111l-2.827 2.795a1 1 0 0 1-1.406 0l-.394-.39a.781.781 0 1 0-1.099 1.112z"/><ellipse cx="9.68" cy="8.937" fill="#005A26" rx="9.68" ry="8.937" transform="matrix(.81306 .58276 -.59867 .80056 218.76 241.49)"/><path fill="#8FF295" d="M220.83 243.292c5.981-.098 10.929 4.585 11.029 10.441.115 6.713-7.431 16.248-9.805 19.078a.946.946 0 0 1-1.437.023c-2.469-2.75-10.337-12.032-10.452-18.745-.1-5.856 4.684-10.699 10.665-10.797m-2.774 17.561a1 1 0 0 0 1.406-.024l8.548-8.733a1 1 0 0 0-.025-1.424l-.758-.722a1 1 0 0 0-1.405.024l-6.433 6.577a1 1 0 0 1-1.406.023l-1.833-1.753a1 1 0 0 0-1.405.023l-.732.746a1 1 0 0 0 .023 1.424z"/><defs><clipPath id="a"><path fill="#fff" d="m0 136.74 30.055-22.309 22.787 29.424-30.055 22.31z"/></clipPath><clipPath id="b"><path fill="#fff" d="m224.65 42.012 37.76 14.753-15.068 36.968-37.76-14.753z"/></clipPath></defs></svg> \ No newline at end of file diff --git a/client/src/assets/about/global-impact.svg b/client/src/assets/about/global-impact.svg new file mode 100644 index 000000000000..96c6848942b1 --- /dev/null +++ b/client/src/assets/about/global-impact.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 294 537"><ellipse cx="149.376" cy="521.651" fill="#007936" rx="51.63" ry="14.642"/><path fill="#DC8173" fill-rule="evenodd" d="M106.027 417.26c-.092-.361-2.97-11.608-5.79-18.446-6.09-14.769-22.136-33.777-22.136-33.777s-1.898-7.858 0-12.883c2.048-5.422 11.45-3.134 11.45-3.134l28.751 19.848 28.242-22.286 41.219-26.116s5.929-3.125 8.141 0c.928 1.311 1.527 4.179 1.527 4.179s8.545-7.134 14.503-6.616c2.862.249 7.124 2.437 7.124 2.437s6.001 3.122 7.633 7.661c1.851 5.148-1.018 14.625-1.018 14.625s2.641 4.323 2.799 7.66c.265 5.619-6.361 11.491-6.361 11.491l-33.637 47.74.11-.01s2.796 30.482 3.568 50.118c.954 24.294 0 62.299 0 62.299s-26.114 7.717-43.596 7.59c-17.092-.125-42.529-7.59-42.529-7.59z" clip-rule="evenodd"/><path fill="#FCB7A0" fill-rule="evenodd" d="M105.576 403.517c1.956 4.066 3.493 7.263 3.653 13.752.214 8.735 0 105.795 0 105.795s23.85 6.843 40.514 7.02c17.192.183 42.168-7.02 42.168-7.02s1.145-33.769.978-55.413c-.172-22.273-1.927-56.998-1.927-56.998l34.348-48.749s6.626-5.873 6.361-11.491c-.158-3.338-2.799-7.661-2.799-7.661s2.869-9.477 1.018-14.625c-1.632-4.539-7.633-7.66-7.633-7.66s-9.159-1.406-12.744-.7c-2.084.411-9.209 6.217-17.538 13.543 3.471-4.828 5.341-9.276 4.123-12.531-1.367-3.65-8.335.695-8.335.695l-38.02 25.108-28.242 22.286-31.615-19.806s-5.192-1.47-8.585 3.092c-3.477 4.673-.542 12.437-.542 12.437s16.587 19.454 22.677 34.223c.737 1.787 1.464 3.297 2.14 4.703" clip-rule="evenodd"/><path fill="#FCB7A0" fill-rule="evenodd" d="M105.576 403.517c1.956 4.066 3.493 7.263 3.653 13.752.214 8.735 0 105.795 0 105.795s23.85 6.843 40.514 7.02c17.192.183 42.168-7.02 42.168-7.02s1.145-33.769.978-55.413c-.172-22.273-1.927-56.998-1.927-56.998l34.348-48.749s6.626-5.873 6.361-11.491c-.158-3.338-2.799-7.661-2.799-7.661s2.869-9.477 1.018-14.625c-1.632-4.539-7.633-7.66-7.633-7.66s-9.159-1.406-12.744-.7c-2.084.411-9.209 6.217-17.538 13.543 3.471-4.828 5.341-9.276 4.123-12.531-1.367-3.65-8.335.695-8.335.695l-38.02 25.108-28.242 22.286-31.615-19.806s-5.192-1.47-8.585 3.092c-3.477 4.673-.542 12.437-.542 12.437s16.587 19.454 22.677 34.223c.737 1.787 1.464 3.297 2.14 4.703" clip-rule="evenodd"/><path fill="#FCB7A0" fill-rule="evenodd" d="M105.576 403.517c1.956 4.066 3.493 7.263 3.653 13.752.214 8.735 0 105.795 0 105.795s23.85 6.843 40.514 7.02c17.192.183 42.168-7.02 42.168-7.02s1.145-33.769.978-55.413c-.172-22.273-1.927-56.998-1.927-56.998l34.348-48.749s6.626-5.873 6.361-11.491c-.158-3.338-2.799-7.661-2.799-7.661s2.869-9.477 1.018-14.625c-1.632-4.539-7.633-7.66-7.633-7.66s-9.159-1.406-12.744-.7c-2.084.411-9.209 6.217-17.538 13.543 3.471-4.828 5.341-9.276 4.123-12.531-1.367-3.65-8.335.695-8.335.695l-38.02 25.108-28.242 22.286-31.615-19.806s-5.192-1.47-8.585 3.092c-3.477 4.673-.542 12.437-.542 12.437s16.587 19.454 22.677 34.223c.737 1.787 1.464 3.297 2.14 4.703" clip-rule="evenodd"/><path stroke="#DC8173" stroke-width="2" d="M169.818 356.875h-12.181m12.181 0c6.09 1.736 8.175 4.747 12.181 8.677m-12.181-8.677 26.987-28.991m27.186-6.065s-12.502 11.661-14.105 12.843c-14.575 10.745-15.244 17.336-27.887 30.89m0 0c4.756 2.982 6.141 4.654 10.898 7.636m36.227-29.849s-8.339-1.042-36.227 29.849m0 0c4.483 9.372 1.608 14.925 1.608 14.925"/><path stroke="#fff" stroke-width="3" d="M153.037 304.214c76.961 0 139.466-59.668 139.466-133.412S229.998 37.391 153.037 37.391 13.57 97.058 13.57 170.802s62.506 133.412 139.467 133.412Z"/><ellipse cx="153.213" cy="170.402" fill="#007936" rx="127.213" ry="122.209"/><path fill="#DFF7E3" d="M68.62 161.965c-3.206-1.857-12.65 4.706-16.298 5.449-60.767 12.373 51.257-40.319 21.068-56.99-.673-.372-1.038-1.363-1.754-1.643-3.216-1.261-19.024 12.87-16.537.081.09-.456.025-.999-.197-1.407-11.064-20.306-25.055 34.399-25.09 34.536-.001.004 0-.004 0 0-.034.139-16.582 66.936 25.292 77.186 9.478 2.32 19.84 28.624 24.507 41.883.69 1.962 3.67 1.771 4.083-.268.982-4.832 2.181-10.534 2.816-12.814 1.308-4.692-1.312-7.764 0-12.455 2.408-8.603 12.944-8.052 16.3-16.346 3.201-7.913 1.619-13.316 2.385-21.795.722-7.99 4.462-12.884 1.193-20.238-2.777-6.247-7.448-13.415-13.914-10.898-3.164 1.232-3.917.142-7.156 1.168-5.853 1.854-4.19-5.705-10.336-5.449-3.677.153-3.193 1.834-6.361 0m116.106 96.755c-8.567 4.93.513 15.966 2.094 17.78.152.174.326.307.537.404 2.95 1.355 26.585 10.732 57.134-20.591 15.775-16.176 17.945-20.722 18.241-21.613.04-.119.058-.224.089-.345.657-2.552 8.483-34.174-6.202-36.252-3.528-.5-11.107 4.505-16.862 9.264-4.782 3.954-9.75 14.842-16.05 15.427-6.011.558-5.446 8.478-11.378 10.342-5.59 1.756-7.852-.846-12.247 2.641-3.732 2.96-9.869.671-14.65 2.018-9.01 2.539-7.452 6.46-7.094 6.783 3.175 2.86.763 2.004 2.111 4.857.807 1.707 2.669 1.404 2.023 3.391-.655 2.012 4.535 4.581 2.254 5.894M123.719 83.105c4.963 1.428 8.848-18.567 9.171-20.28.017-.087.036-.157.057-.243.319-1.262 2.113-11.46-24.479-7.122-9.27 1.513-23.41 10.814-25.16 11.982q-.18.12-.327.278c-1.436 1.529-12.76 13.77-9.505 16.196 1.372 1.023 3.264 2.582 7.365 2.604 3.406.018 11.205-4.164 12.788-1.275 1.51 2.757 6.377-2.442 8.692-.535 2.182 1.797.984 4.576 4.022 4.685 2.58.091 2.326 4.677 4.095 6.31 3.333 3.078 5.496-.156 5.63-.54 1.184-3.412 1.112-1.636 2.644-4.1.917-1.474.367-2.247 1.74-3.145 1.39-.909 2.002-5.179 3.267-4.815"/><ellipse cx="106.716" cy="26.196" fill="#fff" rx="17.173" ry="15.612"/><path fill="#007936" d="M101.514 11.804c10.372-1.79 20.297 5.014 22.126 15.168 2.198 12.205-9.366 32.08-12.087 36.54a.942.942 0 0 1-1.409.243c-4.115-3.28-21.926-18.084-24.124-30.288-1.829-10.155 5.121-19.872 15.494-21.663m.758 31.714a1 1 0 0 0 1.386-.24L116.93 24.54a1 1 0 0 0-.253-1.4l-2.778-1.919a1 1 0 0 0-1.386.24L102.322 35.86a1 1 0 0 1-1.387.24l-4.92-3.408a1 1 0 0 0-1.386.238l-1.94 2.733a1 1 0 0 0 .252 1.4z"/><g clip-path="url(#a)"><ellipse cx="24.018" cy="136.767" fill="#fff" rx="9.891" ry="8.992"/><path fill="#007936" d="M16.927 128.036c4.834-3.588 11.747-2.657 15.412 2.075 4.202 5.425 3.861 17.651 3.651 21.359a.946.946 0 0 1-1.162.862c-3.704-.802-15.82-3.782-20.021-9.207-3.665-4.733-2.714-11.501 2.12-15.089m8.474 15.995a1 1 0 0 0 1.137-.845l1.654-12.187a1 1 0 0 0-.866-1.116l-1.09-.151a1 1 0 0 0-1.136.845l-1.24 9.151a1 1 0 0 1-1.138.845l-2.569-.359a1 1 0 0 0-1.137.844l-.146 1.068a1 1 0 0 0 .864 1.117z"/></g><path fill="#DFF7E3" d="M251.59 91.024c-6.374-12.172-38.972-29.125-40.39-29.858-.045-.023-.062-.034-.107-.059-.914-.508-12.377-6.242-31.653 13.6-7.026 7.23 2.566 21.982-6.842 22.003-33.962.078-35.212 4.164-54.457 14.472-23.355 12.51 5.083 43.976 9.303 43.967 9.003-.021 13.523-7.817 17.95 22.147.458 3.097 23.357-13.133 22.545-15.622-2.031-6.224-6.911-19.059 4.588-35.825 10.094-14.717 15.767 8.528 31.904 5.766 5.098-.873-7.787.032 1.659-8.956 4.921-4.683 32.265-2.657 31.931-5.523-.2-1.715 2.34-18.149 3.731-19.084 6.968-4.687 10.442-5.875 9.838-7.029"/><g clip-path="url(#b)"><ellipse cx="10.024" cy="9.173" fill="#fff" rx="10.024" ry="9.173" transform="matrix(.97915 .214 -.2218 .9727 229.637 56.787)"/><path fill="#007936" d="M242.274 52.47c6.073 2.372 9.042 9.139 6.618 15.084-2.802 6.874-14.696 13.422-18.2 15.231a.942.942 0 0 1-1.338-.522c-1.269-3.674-5.291-16.44-2.489-23.314 2.424-5.946 9.336-8.852 15.409-6.48M231.94 69.107a1 1 0 0 0 1.313.513l12.557-5.348a1 1 0 0 0 .535-1.314l-.526-1.211a1 1 0 0 0-1.313-.512l-9.482 4.04a1 1 0 0 1-1.313-.513l-1.161-2.681a1 1 0 0 0-1.313-.514l-1.233.524a1 1 0 0 0-.536 1.314z"/></g><path fill="#007936" d="M94.615 153.278c3.07 0 5.566 2.444 5.566 5.449 0 3.172-3.355 7.518-4.855 9.303a.92.92 0 0 1-1.421 0c-1.5-1.785-4.855-6.131-4.855-9.303 0-3.005 2.496-5.449 5.565-5.449m-1.919 8.647a1 1 0 0 0 1.406-.001l3.926-3.879a.781.781 0 1 0-1.099-1.111l-2.827 2.795a1 1 0 0 1-1.406 0l-.394-.39a.781.781 0 1 0-1.099 1.112zm97.716 62.416c3.069 0 5.566 2.444 5.566 5.449 0 3.172-3.355 7.518-4.855 9.303a.92.92 0 0 1-1.421 0c-1.501-1.785-4.855-6.131-4.855-9.303 0-3.005 2.496-5.449 5.565-5.449m-1.919 8.647a1 1 0 0 0 1.405-.001l3.926-3.879a.781.781 0 1 0-1.098-1.111l-2.827 2.795a1 1 0 0 1-1.406 0l-.394-.39a.781.781 0 1 0-1.099 1.112z"/><ellipse cx="9.68" cy="8.937" fill="#fff" rx="9.68" ry="8.937" transform="matrix(.81306 .58276 -.59867 .80056 218.758 241.488)"/><path fill="#007936" d="M220.83 243.292c5.981-.098 10.929 4.585 11.029 10.441.115 6.713-7.431 16.248-9.805 19.078a.946.946 0 0 1-1.437.023c-2.469-2.75-10.337-12.032-10.452-18.745-.1-5.856 4.684-10.699 10.665-10.797m-2.774 17.561a1 1 0 0 0 1.406-.024l8.548-8.733a1 1 0 0 0-.025-1.424l-.758-.722a1 1 0 0 0-1.405.024l-6.433 6.577a1 1 0 0 1-1.406.023l-1.833-1.753a1 1 0 0 0-1.405.023l-.732.746a1 1 0 0 0 .023 1.424z"/><defs><clipPath id="a"><path fill="#fff" d="m0 136.738 30.055-22.309 22.787 29.424-30.055 22.31z"/></clipPath><clipPath id="b"><path fill="#fff" d="m224.648 42.012 37.76 14.753-15.068 36.968-37.76-14.753z"/></clipPath></defs></svg> \ No newline at end of file diff --git a/client/src/assets/about/handshake.svg b/client/src/assets/about/handshake.svg new file mode 100644 index 000000000000..680d0ee30401 --- /dev/null +++ b/client/src/assets/about/handshake.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 51 50"><path fill="#007936" d="M23.85 12.5h6.25l6.855-6.875a2.08 2.08 0 0 1 2.958 0l5.375 5.396a2.083 2.083 0 0 1 0 2.937l-4.771 4.792H23.85v4.167a2.083 2.083 0 0 1-4.166 0v-6.25A4.167 4.167 0 0 1 23.85 12.5m-12.5 10.417v8.333l-4.77 4.77a2.083 2.083 0 0 0 0 2.938l5.374 5.396a2.08 2.08 0 0 0 2.959 0l8.937-8.937h8.334a2.083 2.083 0 0 0 2.083-2.084V31.25h2.083a2.083 2.083 0 0 0 2.084-2.083v-2.084h2.083A2.083 2.083 0 0 0 42.6 25v-2.083H28.017V25a4.167 4.167 0 0 1-4.167 4.167h-4.166A4.167 4.167 0 0 1 15.517 25v-6.25z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/inclusive-sm.svg b/client/src/assets/about/inclusive-sm.svg new file mode 100644 index 000000000000..d85a3e471d74 --- /dev/null +++ b/client/src/assets/about/inclusive-sm.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 45 46"><ellipse cx="32.554" cy="13" fill="#fff" rx="12.447" ry="12.5"/><path fill="#007936" d="M33.512 33.833q1.44 0 2.43 1 .988 1 .972 2.334l-13.455 5-11.73-3.334v-15h3.268l12.181 4.484q1.308.516 1.307 1.866 0 .784-.57 1.367-.57.584-1.44.617h-4.692l-2.932-1.117-.553 1.567 3.485 1.216zm-6.702-22.95q1.776-2.05 4.524-2.05 2.28 0 3.854 1.667 1.575 1.666 1.675 3.833 0 1.717-1.675 4.1-1.676 2.384-3.301 3.984t-5.077 4.75q-3.486-3.15-5.128-4.75t-3.3-3.984-1.626-4.1q0-2.266 1.625-3.833t3.921-1.667q2.682 0 4.508 2.05M1.649 23.833h6.73v18.334h-6.73z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/inclusive.svg b/client/src/assets/about/inclusive.svg new file mode 100644 index 000000000000..db690b38296d --- /dev/null +++ b/client/src/assets/about/inclusive.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80"><ellipse cx="57.872" cy="22.222" fill="#D7F5DC" rx="22.127" ry="22.222"/><path fill="#007936" d="M59.577 59.259q2.561 0 4.32 1.778 1.756 1.778 1.727 4.148l-23.92 8.889-20.852-5.926V41.48h5.809l21.656 7.97q2.323.92 2.323 3.319 0 1.392-1.013 2.43-1.013 1.036-2.561 1.096h-8.34l-5.214-1.985-.983 2.785 6.196 2.163zm-11.916-40.8q3.157-3.645 8.043-3.644 4.051 0 6.852 2.962 2.8 2.964 2.978 6.815 0 3.052-2.978 7.29-2.979 4.236-5.869 7.08t-9.026 8.445q-6.196-5.6-9.115-8.444t-5.868-7.082-2.89-7.289q0-4.03 2.89-6.815 2.89-2.784 6.97-2.963 4.767 0 8.013 3.645M2.932 41.48h11.964v32.593H2.932z"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/line-dot.svg b/client/src/assets/about/line-dot.svg new file mode 100644 index 000000000000..894138b85160 --- /dev/null +++ b/client/src/assets/about/line-dot.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 10"><path stroke="#000" d="M0 5h995"/><circle cx="995" cy="5" r="5"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/sparkle.svg b/client/src/assets/about/sparkle.svg new file mode 100644 index 000000000000..87bdd6cb9b55 --- /dev/null +++ b/client/src/assets/about/sparkle.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 33"><path stroke="#007936" stroke-linecap="round" stroke-width="4" d="M6.073 14.164v-12M19 17.73l8.485-8.486m-5.137 19.994 11.998-.188"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/text-box-check-outline.svg b/client/src/assets/about/text-box-check-outline.svg new file mode 100644 index 000000000000..af670b7d9c92 --- /dev/null +++ b/client/src/assets/about/text-box-check-outline.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 51 50"><path fill="#007936" d="m35.432 43.75-5.729-6.25 2.417-2.417 3.312 3.313 7.48-7.48 2.416 2.938M26.682 43.75h-16.25a4.15 4.15 0 0 1-4.166-4.167V10.417a4.15 4.15 0 0 1 4.166-4.167H39.6a4.15 4.15 0 0 1 4.167 4.167v16.25a12.5 12.5 0 0 0-4.167-1.5v-14.75H10.432v29.166h14.75c.25 1.5.771 2.896 1.5 4.167m-1.666-8.333H14.599V31.25h10.417m5.583-4.167h-16v-4.166h20.833v2.25c-1.77.291-3.396.958-4.833 1.916m4.833-8.333H14.6v-4.167h20.833"/></svg> \ No newline at end of file diff --git a/client/src/assets/about/web-check.svg b/client/src/assets/about/web-check.svg new file mode 100644 index 000000000000..2d5f0e3c2e0e --- /dev/null +++ b/client/src/assets/about/web-check.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 51 50"><path fill="#007936" d="M35.203 25c0-1.417-.125-2.792-.292-4.167h7.042c.333 1.334.542 2.73.542 4.167 0 .77-.063 1.52-.167 2.25a11.9 11.9 0 0 1 4 1.333c.208-1.166.333-2.354.333-3.583 0-11.458-9.375-20.833-20.833-20.833-11.52 0-20.833 9.375-20.833 20.833s9.375 20.833 20.833 20.833a20.3 20.3 0 0 0 3.583-.333 12.3 12.3 0 0 1-1.5-5.917c0-.604.063-1.187.146-1.77-.666 1.312-1.396 2.583-2.229 3.77-1.73-2.5-3.125-5.27-3.98-8.25h7.75a12.4 12.4 0 0 1 5.397-5c.125-1.104.208-2.208.208-3.333M25.828 8.396c1.73 2.5 3.125 5.291 3.98 8.27h-7.96c.855-2.979 2.25-5.77 3.98-8.27M9.703 29.166c-.333-1.333-.542-2.729-.542-4.166s.209-2.834.542-4.167h7.042c-.167 1.375-.292 2.75-.292 4.167s.125 2.791.292 4.166zm1.708 4.167h6.084c.729 2.604 1.666 5.104 2.916 7.417a16.68 16.68 0 0 1-9-7.417m6.084-16.666H11.41a16.5 16.5 0 0 1 9-7.417c-1.25 2.312-2.187 4.812-2.916 7.416m13.208 12.5h-9.75A27.6 27.6 0 0 1 20.62 25c0-1.417.125-2.813.333-4.167h9.75c.188 1.354.333 2.75.333 4.167s-.146 2.791-.333 4.166m.52-19.917a16.64 16.64 0 0 1 9.022 7.416h-6.146c-.667-2.604-1.625-5.104-2.875-7.416m16.48 26.687-9.896 9.896-5.729-6.25 2.417-2.416 3.312 3.312 7.48-7.48z"/></svg> \ No newline at end of file diff --git a/client/src/assets/lines.svg b/client/src/assets/lines.svg new file mode 100644 index 000000000000..20189e58c466 --- /dev/null +++ b/client/src/assets/lines.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 75"><path fill="none" stroke="#000" stroke-dasharray="4, 4" stroke-width="2" d="M1 0v35h47v40"/></svg> \ No newline at end of file diff --git a/client/src/community/index.scss b/client/src/community/index.scss index e82e3e6b4645..e73d9749105f 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -1,5 +1,6 @@ @use "../ui/vars" as *; @use "../ui/atoms/button/mixins" as button; +@use "../about/mixins" as about; @mixin light-theme { --community-bg-primary: #fcfcfc; @@ -76,71 +77,22 @@ main.community-container { --community-stats-height: 5.75rem; --community-section-gap: 5rem; --max-width: 74rem; - --negative-space: calc( - max(0px, 100vw - var(--max-width)) * -0.5 - var(--gutter) - ); + --layout-text-primary: var(--community-text-primary); background: var(--community-bg-secondary); color: var(--community-text-secondary); - h2, - h3, - p { - margin: 0; - } - - h2, - h3 { - color: var(--community-text-primary); - - a { - color: unset; - text-decoration: none; - } - } - - a { - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - p + p { - margin-top: 1.5rem; - } - - section { - margin-left: auto; - margin-right: auto; - max-width: var(--max-width); - padding-left: var(--gutter); - padding-right: var(--gutter); - width: 100%; - } - - h2 { - font-size: 2rem; - font-weight: 600; - margin-bottom: 1rem; - - @media (max-width: $screen-md) { - font-size: 1.375rem; - } - } + @include about.layout; > header { - background: linear-gradient( - to top, - transparent 0%, - transparent calc(var(--community-stats-height) / 2), - var(--community-bg-primary) calc(var(--community-stats-height) / 2), - var(--community-bg-primary) 100% - ); + --header-text-primary: var(--community-text-primary); + --header-text-secondary: var(--community-header-text); + --header-stats-height: var(--community-stats-height); + --header-bg: var(--community-bg-primary); + + @include about.header; @media (max-width: $screen-md) { - padding-top: 1rem; text-align: center; } @@ -150,7 +102,6 @@ main.community-container { right; background-repeat: no-repeat; background-size: 50%; - padding-top: var(--community-section-gap); @media (max-width: $screen-md) { background-position: top center; @@ -159,21 +110,6 @@ main.community-container { } } - h1 { - color: var(--community-text-primary); - font-size: 2.5rem; - margin-bottom: 1rem; - - @media (max-width: $screen-md) { - font-size: 2rem; - } - } - - p { - color: var(--community-header-text); - margin-bottom: 1.5rem; - } - ul:first-of-type { display: flex; flex-wrap: wrap; @@ -194,73 +130,24 @@ main.community-container { } ul:last-of-type { - background: var(--community-card-bg); - border-radius: 0.5rem; - box-shadow: var(--community-box-shadow); - color: var(--community-text-primary); - display: flex; - gap: 1rem; - justify-content: space-around; - margin-top: var(--community-section-gap); - padding: 1rem; - - @media (max-width: $screen-md) { - flex-wrap: wrap; - margin-top: 2rem; - } - - li { - align-items: baseline; - column-gap: 1rem; - display: flex; - flex-wrap: wrap; - justify-content: center; - min-width: 7.75rem; - overflow-wrap: anywhere; - - @media (max-width: $screen-md) { - align-items: center; - flex: 1; - flex-direction: column; - justify-content: flex-start; - } - - strong { - align-items: center; - background: var(--community-header-stats-bg); - border-radius: 50%; - color: var(--community-text-success); - display: inline-flex; - height: 3.75rem; - justify-content: center; - width: 3.75rem; - } - } - } - } + --stats-bg: var(--community-card-bg); + --stats-box-shadow: var(--community-box-shadow); + --stats-text-primary: var(--community-text-primary); + --stats-stat-bg: var(--community-header-stats-bg); + --stats-stat-text: var(--community-text-success); - > header + section { - margin-top: 4.56rem; - - @media (max-width: $screen-md) { - margin-top: 2rem; + @include about.stats; } } > section { --community-circle-height: 57rem; - column-gap: min(5rem, 5vw); - display: grid; - grid-template-columns: 4fr 6fr; + + @include about.section; @media (max-width: $screen-md) { /* stylelint-disable-next-line length-zero-no-unit */ --community-circle-height: 0rem; - display: block; - } - - > * { - min-width: 0; } &[aria-labelledby="meet_our_contributors"] { @@ -492,6 +379,7 @@ main.community-container { &[aria-labelledby="join_us_in_shaping_a_better_web"] { display: block; + margin-bottom: var(--community-section-gap); margin-top: var(--community-section-gap); p { @@ -499,43 +387,16 @@ main.community-container { } ul { - display: grid; - gap: 2rem; - grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - margin-bottom: var(--community-section-gap); - } + --boxes-bg: var(--community-card-bg); + --boxes-border: var(--community-card-border); + --boxes-shadow: var(--community-box-shadow); + --boxes-header-bg: var(--community-card-header-bg); - li { - align-items: center; - background: var(--community-card-bg); - border: 1px solid var(--community-card-border); - border-radius: 0.5rem; - box-shadow: var(--community-box-shadow); - display: flex; - flex-direction: column; - gap: 1.5rem; - justify-content: space-between; - padding: 1.5rem; - text-align: center; - - h3 { - align-self: stretch; - background: var(--community-card-header-bg); - border-radius: 0.5rem 0.5rem 0 0; - font-size: 1.25rem; - font-weight: 500; - margin: -1.5rem; - margin-bottom: 0; - padding: 1.5rem; - } - - p { - margin: 0; - } + @include about.boxes; + } - a { - @include button.primary; - } + li a { + @include button.primary; } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 26b9e6526f81..e2290d123a52 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,21 +1,14 @@ import "./index.scss"; import { HydrationData } from "../../../libs/types/hydration"; -import { useEffect, useMemo } from "react"; -import { Section } from "../../../libs/types/document"; +import { useEffect } from "react"; import useSWR, { SWRConfig } from "swr"; -import { HTTPError } from "../document"; -import { WRITER_MODE } from "../env"; import { Prose } from "../document/ingredients/prose"; import { SWRLocalStorageCache } from "../utils"; import { useIsServer } from "../hooks"; +import { AboutDoc, AboutSection, Header, useAboutDoc } from "../about"; -interface CommunityDoc { - title: string; - sections: Section[]; -} - -export function Community(appProps: HydrationData<any, CommunityDoc>) { - const doc = useCommunityDoc(appProps); +export function Community(appProps: HydrationData<any, AboutDoc>) { + const doc = useAboutDoc(appProps); useEffect(() => { import("./contributor-list"); @@ -25,18 +18,12 @@ export function Community(appProps: HydrationData<any, CommunityDoc>) { <SWRConfig value={{ provider: () => new SWRLocalStorageCache("community") }} > - <main className="community-container"> + <main id="content" className="community-container"> <RenderCommunityBody doc={doc} renderer={(section, i) => { if (i === 0) { - return ( - <Header - section={section} - key={section.value.id} - h1={doc?.title} - /> - ); + return <Header section={section} key={section.value.id} />; } else if (section.value.id === "help_us_fix_open_issues") { return <Issues section={section} key={section.value.id} />; } @@ -48,46 +35,12 @@ export function Community(appProps: HydrationData<any, CommunityDoc>) { ); } -function useCommunityDoc( - appProps?: HydrationData<any, CommunityDoc> -): CommunityDoc | undefined { - const { data } = useSWR<CommunityDoc>( - "index.json", - async () => { - const url = new URL( - `${window.location.pathname.replace(/\/$/, "")}/index.json`, - window.location.origin - ).toString(); - const response = await fetch(url); - - if (!response.ok) { - switch (response.status) { - case 404: - throw new HTTPError(response.status, url, "Page not found"); - } - - const text = await response.text(); - throw new HTTPError(response.status, url, text); - } - - return (await response.json())?.hyData; - }, - { - fallbackData: appProps?.hyData, - revalidateOnFocus: WRITER_MODE, - revalidateOnMount: true, - } - ); - const doc: CommunityDoc | undefined = data || appProps?.hyData || undefined; - return doc; -} - function RenderCommunityBody({ doc, renderer = () => null, }: { - doc?: CommunityDoc; - renderer?: (section: Section, i: number) => null | JSX.Element; + doc?: AboutDoc; + renderer?: (section: AboutSection, i: number) => null | JSX.Element; }) { return doc?.sections.map((section, i) => { return ( @@ -98,23 +51,7 @@ function RenderCommunityBody({ }); } -function Header({ section, h1 }: { section: any; h1?: string }) { - const html = useMemo( - () => ({ __html: section.value?.content }), - [section.value?.content] - ); - return ( - <header className="landing-header"> - <section dangerouslySetInnerHTML={html}></section> - </header> - ); -} - -function Issues({ section }: { section: any }) { - const html = useMemo( - () => ({ __html: section.value?.content }), - [section.value?.content] - ); +function Issues({ section }: { section: AboutSection }) { const isServer = useIsServer(); const LABELS = ["good first issue", "accepting PR"]; const { data } = useSWR( @@ -134,10 +71,13 @@ function Issues({ section }: { section: any }) { revalidateOnFocus: false, } ); - return ( + return section.value.id && section.value.content ? ( <section aria-labelledby={section.value.id}> <h2 id={section.value.id}>{section.value.title}</h2> - <div className="section-content" dangerouslySetInnerHTML={html}></div> + <div + className="section-content" + dangerouslySetInnerHTML={{ __html: section.value.content }} + ></div> <div className="issues-table"> <table> <thead> @@ -184,5 +124,5 @@ function Issues({ section }: { section: any }) { </table> </div> </section> - ); + ) : null; } diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts index 1f6735dd726a..c2942fe6f269 100644 --- a/client/src/telemetry/constants.ts +++ b/client/src/telemetry/constants.ts @@ -29,6 +29,7 @@ export const SETTINGS = "settings"; export const OBSERVATORY = "observatory"; export const CURRICULUM = "curriculum"; export const BCD_TABLE = "bcd"; +export const ABOUT = "about"; export const A11Y_MENU = "a11y_menu"; diff --git a/libs/constants/index.js b/libs/constants/index.js index 8b0da8d3aea8..7dda3d74fac1 100644 --- a/libs/constants/index.js +++ b/libs/constants/index.js @@ -164,6 +164,7 @@ export const CSP_DIRECTIVES = { // Shared assets. "https://mdn.github.io/shared-assets/", + "https://mdn.dev/", // GA4. "https://*.google-analytics.com",