@salesforcedevs/mrkt-components 0.0.0-alpha.0

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;
+}