From bce557cc2dc767628bed6aac87301a1be7c5431b Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Tue, 4 Nov 2025 05:03:50 +0800
Subject: init commit

---
 src/components/ProductPageArcadeFooter.svelte | 159 ++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/components/ProductPageArcadeFooter.svelte

(limited to 'src/components/ProductPageArcadeFooter.svelte')

diff --git a/src/components/ProductPageArcadeFooter.svelte b/src/components/ProductPageArcadeFooter.svelte
new file mode 100644
index 0000000..0cd9b65
--- /dev/null
+++ b/src/components/ProductPageArcadeFooter.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+    import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg';
+    import { getI18n } from '~/stores/i18n';
+
+    const i18n = getI18n();
+</script>
+
+<article>
+    <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')}
+            <br />
+            {$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>
+</article>
+
+<style lang="scss">
+    @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: 72px;
+        margin-bottom: 20px;
+        line-height: 0;
+
+        @media (--range-xsmall-only) {
+            width: 62px;
+            margin-bottom: 16px;
+        }
+    }
+
+    .logo-container :global(path) {
+        color: var(--systemPrimary-onDark);
+    }
+
+    .metadata-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 60%;
+        height: 100%;
+        padding: 40px;
+
+        @media (--range-xsmall-only) {
+            align-items: center;
+            justify-content: end;
+            width: unset;
+            text-align: center;
+        }
+    }
+
+    h2 {
+        margin-bottom: 20px;
+        font: var(--header-emphasized);
+        line-height: 54px;
+
+        @media (--range-xsmall-only) {
+            font: var(--title-1-emphasized);
+        }
+    }
+
+    a {
+        display: flex;
+        font: var(--title-3-emphasized);
+    }
+
+    a::after {
+        content: '↗';
+        font-weight: normal;
+        margin-inline-start: 4px;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+
+    a:hover span {
+        text-decoration: underline;
+    }
+
+    article {
+        flex-grow: 1;
+        width: 100%;
+        max-width: calc(viewport-content-for(xlarge) - var(--bodyGutter) * 2);
+        aspect-ratio: 2.55;
+        margin: 0 auto;
+        color: var(--systemPrimary-onDark);
+        background: #000;
+        background-size: cover;
+
+        @media (--range-xsmall-only) {
+            max-width: 338px;
+            aspect-ratio: 35/48;
+            border-radius: var(--global-border-radius-medium);
+            background-image: url('/assets/images/arcade/upsell/footer-280@1x.png');
+
+            @media (resolution >= 192dpi) {
+                background-image: url('/assets/images/arcade/upsell/footer-280@2x.png');
+            }
+        }
+
+        @media (--range-small-only) {
+            aspect-ratio: 173/96;
+            background-image: url('/assets/images/arcade/upsell/footer-692@1x_LTR.png');
+
+            @include rtl {
+                background-image: url('/assets/images/arcade/upsell/footer-692@1x_RTL.png');
+            }
+
+            @media (resolution >= 192dpi) {
+                background-image: url('/assets/images/arcade/upsell/footer-692@2x_LTR.png');
+
+                @include rtl {
+                    background-image: url('/assets/images/arcade/upsell/footer-692@2x_RTL.png');
+                }
+            }
+        }
+
+        @media (--range-medium-up) {
+            background-image: url('/assets/images/arcade/upsell/footer-980@1x_LTR.png');
+
+            @include rtl {
+                background-image: url('/assets/images/arcade/upsell/footer-980@1x_RTL.png');
+            }
+
+            @media (resolution >= 192dpi) {
+                background-image: url('/assets/images/arcade/upsell/footer-980@2x_LTR.png');
+
+                @include rtl {
+                    background-image: url('/assets/images/arcade/upsell/footer-980@2x_RTL.png');
+                }
+            }
+        }
+
+        @media (--range-xlarge-up) {
+            border-radius: var(--global-border-radius-medium);
+        }
+    }
+</style>
-- 
cgit v1.2.3