diff options
Diffstat (limited to 'src/components/ProductPageArcadeBanner.svelte')
| -rw-r--r-- | src/components/ProductPageArcadeBanner.svelte | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/src/components/ProductPageArcadeBanner.svelte b/src/components/ProductPageArcadeBanner.svelte new file mode 100644 index 0000000..154c115 --- /dev/null +++ b/src/components/ProductPageArcadeBanner.svelte @@ -0,0 +1,188 @@ +<script lang="ts"> + import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg'; + import { getI18n } from '~/stores/i18n'; + + const i18n = getI18n(); +</script> + +<aside> + <div class="arcade-banner"> + <div class="metadata-container"> + <div class="logo-container"> + <AppleArcadeLogo /> + </div> + + <h2> + {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineOne')} + <br /> + {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineTwo')} + {$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineThree')} + </h2> + + <a href="https://www.apple.com/apple-arcade/" target="_blank"> + <span> + {$i18n.t( + 'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionText', + )} + </span> + {$i18n.t( + 'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionDisclaimerMark', + )} + </a> + </div> + </div> +</aside> + +<style lang="scss"> + @use '@amp/web-shared-styles/app/core/globalvars' as *; + @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config'; + @use 'ac-sasskit/core/locale' as *; + @use 'ac-sasskit/modules/viewportcontent/core' as *; + @use 'amp/stylekit/core/viewports' as *; + + .logo-container { + width: 62px; + margin-bottom: 10px; + line-height: 0; + + @media (--range-xsmall-only) { + width: 48px; + margin-bottom: 8px; + } + } + + .logo-container :global(path) { + color: var(--systemPrimary-onDark); + } + + .metadata-container { + display: flex; + flex-direction: column; + justify-content: center; + width: 60%; + height: 100%; + padding: 0 20px; + + @media (--range-xsmall-only) { + align-items: flex-start; + justify-content: center; + } + } + + h2 { + margin-bottom: 10px; + font: var(--title-1-emphasized); + + @media (--range-xsmall-only) { + margin-bottom: 8px; + font: var(--title-3-emphasized); + } + } + + a { + display: flex; + font: var(--title-3-emphasized); + + @media (--range-xsmall-only) { + font: var(--body-emphasized); + } + } + + a::after { + content: '↗'; + font-weight: normal; + margin-inline-start: 4px; + } + + a:hover { + text-decoration: none; + } + + a:hover span { + text-decoration: underline; + } + + aside { + width: 100%; + max-width: calc(viewport-content-for(xlarge)); + height: 152px; + margin: 0 auto 32px; + padding: 0 var(--bodyGutter); + + @media (--range-xsmall-only) { + max-width: 100%; + padding: 0; + } + } + + .arcade-banner { + width: 100%; + height: 100%; + color: var(--systemPrimary-onDark); + border-radius: var(--global-border-radius-medium); + background: #000; + background-repeat: no-repeat; + background-position: right; + background-size: contain; + + @media (prefers-color-scheme: dark) { + border: 1px solid var(--systemQuaternary-onDark); + } + + @media (--range-xsmall-only) { + border-radius: 0; + background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png'); + background-size: cover; + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png'); + background-position: left; + } + + @media (resolution >= 192dpi) { + background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png'); + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png'); + background-position: left; + } + } + } + + @media (--range-small-only) { + background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png'); + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png'); + background-position: left; + } + + @media (resolution >= 192dpi) { + background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png'); + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png'); + background-position: left; + } + } + } + + @media (--range-medium-up) { + background-image: url('/assets/images/arcade/upsell/banner-980@1x_LTR.png'); + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-980@1x_RTL.png'); + background-position: left; + } + + @media (resolution >= 192dpi) { + background-image: url('/assets/images/arcade/upsell/banner-980@2x_LTR.png'); + + @include rtl { + background-image: url('/assets/images/arcade/upsell/banner-980@2x_RTL.png'); + background-position: left; + } + } + } + } +</style> |