@salesforcedevs/mrkt-components 0.0.0

package/src/modules/mrkt/threeColListSection/threeColListSection.css

@@ -0,0 +1,102 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-three-col-list-section-padding-top: var(--padding-vertical);
+}
+
+.three-col-list-section {
+    width: 100%;
+    padding-top: var(--mrkt-c-three-col-list-section-padding-top);
+}
+
+.three-col-list-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+.item-grid-padding {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-xl) var(--dx-g-spacing-3xl);
+    justify-items: center;
+    width: 100%;
+    max-width: 1024px;
+}
+
+.item {
+    width: 100%;
+    max-width: 450px;
+    display: grid;
+    grid-template-areas:
+        "icon"
+        "title"
+        "subtitle";
+    grid-gap: var(--dx-g-spacing-sm);
+    justify-items: center;
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.title,
+.subtitle {
+    text-align: center;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.three-col-list-section.dark .title,
+.three-col-list-section.dark .subtitle {
+    color: white;
+}
+
+.img-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 2;
+    margin-top: var(--dx-g-spacing-3xl);
+    margin-bottom: -35px;
+}
+
+img {
+    width: 250px;
+    aspect-ratio: 25 / 14;
+}
+
+@media (max-width: 1024px) {
+    .img-container {
+        margin-bottom: -28px;
+    }
+
+    img {
+        width: 200px;
+    }
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/mrkt/threeColListSection/threeColListSection.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="three-col-list-section">
+        <div class="item-grid-padding">
+            <div class="item-grid">
+                <template for:each={items} for:item="item">
+                    <div class="item" key={item.title}>
+                        <dx-icon-badge
+                            symbol={item.iconSymbol}
+                            sprite={item.iconSprite}
+                            color={item.iconColor}
+                            background-color={item.iconBackgroundColor}
+                            background-size="large"
+                        ></dx-icon-badge>
+                        <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                        <span class="subtitle dx-text-body-2">
+                            {item.subtitle}
+                        </span>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class="img-container">
+            <img src="/assets/svg/mrkt-cta-section-img-left.svg" alt="" />
+            <img src="/assets/svg/mrkt-cta-section-img-right.svg" alt="" />
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/threeColListSection/threeColListSection.ts

@@ -0,0 +1,24 @@
+import { api, LightningElement } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+    iconSprite: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+};
+
+export default class ThreeColListSection extends LightningElement {
+    @api dark?: boolean;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+}

package/src/modules/mrkt/twoColListSection/twoColListSection.css

@@ -0,0 +1,65 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-list-section {
+    padding: var(--mrkt-c-two-col-list-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-list-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    display: flex;
+}
+
+.two-col-list-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
+    width: max-content;
+    margin: auto;
+}
+
+.item {
+    width: 100%;
+    max-width: 414px;
+    display: grid;
+    grid-template-areas:
+        "icon title"
+        "icon subtitle";
+    grid-template-columns: min-content auto;
+    grid-template-rows: min-content;
+    grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-mlg);
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.two-col-list-section.dark .title,
+.two-col-list-section.dark .subtitle {
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/mrkt/twoColListSection/twoColListSection.html

@@ -0,0 +1,19 @@
+<template>
+    <div class={className}>
+        <div class="item-grid">
+            <template for:each={items} for:item="item">
+                <div class="item" key={item.title}>
+                    <dx-icon-badge
+                        symbol={item.iconSymbol}
+                        sprite={item.iconSprite}
+                        color={item.iconColor}
+                        background-color={item.iconBackgroundColor}
+                        background-size="large"
+                    ></dx-icon-badge>
+                    <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                    <span class="subtitle dx-text-body-2">{item.subtitle}</span>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/twoColListSection/twoColListSection.ts

@@ -0,0 +1,29 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import { toJson } from "dxUtils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+    iconSprite: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+};
+
+export default class TwoColListSection extends LightningElement {
+    @api dark?: boolean;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+
+    private get className(): string {
+        return cx("two-col-list-section", this.dark && "dark");
+    }
+}

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css

@@ -0,0 +1,136 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 108px;
+    --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-panel-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--dx-g-indigo-vibrant-15);
+    width: 100%;
+    padding: var(--mrkt-c-two-col-list-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-list-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    overflow: hidden;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    padding-right: 80px;
+    width: 50%;
+    z-index: 1;
+}
+
+.text-container > * {
+    max-width: 500px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.subtitle,
+.title,
+.body {
+    color: white;
+}
+
+img {
+    position: absolute;
+}
+
+.graphic-1 {
+    width: 306px;
+    bottom: -32px;
+    left: -106px;
+    z-index: 0;
+}
+
+.graphic-2 {
+    width: 170px;
+    top: 15px;
+    left: calc(100% - 38px);
+    z-index: 1;
+}
+
+.graphic-3 {
+    width: 142px;
+    right: -38px;
+    bottom: -38px;
+    z-index: 0;
+}
+
+.graphic-swoop {
+    position: relative;
+    width: 100%;
+}
+
+@media (max-width: 1024px) {
+    :host {
+        --padding-vertical: var(--dx-g-spacing-3xl);
+    }
+
+    .title {
+        font-size: var(--dx-g-text-2xl);
+    }
+
+    .body {
+        font-size: var(--dx-g-text-sm);
+        line-height: 20px;
+    }
+
+    .text-container {
+        max-width: 440px;
+    }
+
+    .graphic-1 {
+        width: 220px;
+        left: -80px;
+        top: 30px;
+        z-index: 0;
+    }
+
+    .graphic-2,
+    .graphic-3 {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    .two-col-panel-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        padding-right: unset;
+        padding-bottom: 72px;
+    }
+
+    .graphic-1 {
+        display: none;
+    }
+}

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html

@@ -0,0 +1,33 @@
+<template>
+    <div class="two-col-panel-section">
+        <div class="text-container">
+            <span class="subtitle dx-text-label-4">{subtitle}</span>
+            <h2 class="title dx-text-heading-3">{title}</h2>
+            <p class="body dx-text-body-2">{body}</p>
+            <dx-button href={buttonHref}>{buttonText}</dx-button>
+        </div>
+        <div class="card-container">
+            <img
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1.svg"
+                alt=""
+            />
+            <img
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2.svg"
+                alt=""
+            />
+            <img
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3.svg"
+                alt=""
+            />
+            <slot></slot>
+        </div>
+    </div>
+    <img
+        class="graphic-swoop"
+        src="/assets/svg/mrkt-two-col-panel-section-swoop.svg"
+        alt=""
+    />
+</template>

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.ts

@@ -0,0 +1,9 @@
+import { api, LightningElement } from "lwc";
+
+export default class TwoColPanelSection extends LightningElement {
+    @api body!: string;
+    @api buttonHref!: string;
+    @api buttonText!: string;
+    @api subtitle!: string;
+    @api title!: string;
+}

package/src/modules/mrkt/twoColSection/twoColSection.css

@@ -0,0 +1,67 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-section-padding-bottom: var(--padding-vertical);
+}
+
+.two-col-section {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    padding: var(--mrkt-c-two-col-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+}
+
+.two-col-section.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+img {
+    width: 50%;
+    max-width: 400px;
+    flex-grow: 1;
+    margin-right: 60px;
+}
+
+.text-container {
+    flex-grow: 1;
+}
+
+h2 {
+    padding-bottom: var(--dx-g-spacing-smd);
+}
+
+.two-col-section.dark h2,
+.two-col-section.dark span {
+    color: white;
+}
+
+@media (max-width: 1024px) {
+    img {
+        margin-right: var(--dx-g-spacing-2xl);
+    }
+}
+
+@media (max-width: 768px) {
+    .two-col-section {
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+    }
+
+    img {
+        width: 100%;
+        margin: 0 auto 56px auto;
+    }
+}

package/src/modules/mrkt/twoColSection/twoColSection.html

@@ -0,0 +1,9 @@
+<template>
+    <div class={className}>
+        <img src={imgSrc} alt={imgAlt} />
+        <div class="text-container">
+            <h2 class="dx-text-heading-4">{title}</h2>
+            <span class="dx-text-body-2">{subtitle}</span>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/twoColSection/twoColSection.ts

@@ -0,0 +1,14 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+
+export default class TwoColSection extends LightningElement {
+    @api dark?: boolean;
+    @api subtitle!: string;
+    @api imgAlt!: string;
+    @api imgSrc!: string;
+    @api title!: string;
+
+    private get className(): string {
+        return cx("two-col-section", this.dark && "dark");
+    }
+}

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css

@@ -0,0 +1,76 @@
+@import "dxHelpers/reset";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    padding: 0 var(--dx-g-page-padding-horizontal) 20px
+        var(--dx-g-page-padding-horizontal);
+}
+
+.swoop-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 50%;
+}
+
+.swoop-background {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+    width: 100%;
+    height: 100%;
+}
+
+.swoop {
+    width: 100%;
+}
+
+.section-title {
+    margin-top: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-xl);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-4xl);
+    letter-spacing: -0.6px;
+    line-height: 56px;
+}
+
+.video {
+    box-shadow: var(--dx-g-box-shadow-md);
+    width: 74%;
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.section-title,
+.video {
+    z-index: 1;
+}
+
+@media screen and (max-width: 768px) {
+    .section-title {
+        margin-top: var(--dx-g-spacing-mlg);
+        margin-bottom: var(--dx-g-spacing-mlg);
+        font-size: var(--dx-g-text-3xl);
+    }
+
+    .video {
+        width: 90%;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .section-title {
+        font-size: 32px;
+    }
+
+    .swoop-container {
+        bottom: 0;
+    }
+
+    .swoop-background {
+        height: 120%;
+    }
+}

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.html

@@ -0,0 +1,22 @@
+<template>
+    <div class="container">
+        <div class="swoop-container">
+            <div class="swoop-background"></div>
+            <svg
+                class="swoop"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 1368 94"
+                fill="none"
+            >
+                <path
+                    d="M1368 0C1110 130 278 118 0 0H1368Z"
+                    fill="#EAF5FE"
+                ></path>
+            </svg>
+        </div>
+        <h2 class="section-title">{title}</h2>
+        <div class="video">
+            <dx-vimeo-player video-id={videoId}></dx-vimeo-player>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.ts

@@ -0,0 +1,6 @@
+import { LightningElement, api } from "lwc";
+
+export default class VideoPlayerSection extends LightningElement {
+    @api title!: string;
+    @api videoId!: number;
+}