From 29f77da7b876a006bc421d75fdb5ec7913e330e4 Mon Sep 17 00:00:00 2001
From: Mraveux <matheo.raveux@gmail.com>
Date: Sat, 12 Oct 2024 17:36:54 +0200
Subject: [PATCH 1/5] PrestakingWelcome: implement designer feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The prestaking welcome page now behave like an “instagram story” or something the like.
---
 src/components/StepProgressBar.vue            |  36 +-
 .../prestaking/PrestakingWelcomePage.vue      | 751 ++++++++++++------
 types/images.d.ts                             |   4 +
 3 files changed, 543 insertions(+), 248 deletions(-)
 create mode 100644 types/images.d.ts

diff --git a/src/components/StepProgressBar.vue b/src/components/StepProgressBar.vue
index 85aacd8be..b05519945 100644
--- a/src/components/StepProgressBar.vue
+++ b/src/components/StepProgressBar.vue
@@ -22,26 +22,26 @@ export default defineComponent({
             type: Number,
             required: true,
         },
+        shouldAnimate: {
+            type: Boolean,
+            default: true,
+        },
     },
-    setup(props) {
-        const animationProgress = ref(0);
+    setup(props, { emit }) {
+        const animationProgress = ref(100); // Start with full progress
         const isFirstStepAnimated = ref(false);
-        const ANIMATION_DURATION = 1500; // 1500ms = 1.5s
+        const ANIMATION_DURATION = 5000; // 5000ms = 5s (adjust as needed)
 
         const getFillWidth = computed(() => (step: number) => {
             if (props.currentStep > step) return '100%';
             if (props.currentStep === step) {
-                // Apply easing function to the animation progress
-                const easedProgress = easeOutCubic(animationProgress.value / 100) * 100;
-                return `${easedProgress}%`;
+                return props.shouldAnimate ? `${animationProgress.value}%` : '100%';
             }
             return '0%';
         });
 
-        // Easing function: easeOutCubic
-        const easeOutCubic = (t: number): number => 1 - (1 - t) ** 3;
-
         let animationFrame: number;
+        let animationStartTime: number | null = null;
 
         const animateStep = (timestamp: number) => {
             if (!animationStartTime) {
@@ -51,26 +51,30 @@ export default defineComponent({
             const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
             animationProgress.value = progress * 100;
 
-            if (progress < 1) {
+            if (progress < 1 && props.shouldAnimate) {
                 animationFrame = requestAnimationFrame(animateStep);
             } else {
                 isFirstStepAnimated.value = true;
+                emit('stepCompleted');
             }
         };
 
-        let animationStartTime: number | null = null;
-
         const startAnimation = () => {
-            animationStartTime = null;
-            cancelAnimationFrame(animationFrame);
-            animationFrame = requestAnimationFrame(animateStep);
+            if (props.shouldAnimate) {
+                animationStartTime = null;
+                cancelAnimationFrame(animationFrame);
+                animationProgress.value = 0; // Reset progress before starting animation
+                animationFrame = requestAnimationFrame(animateStep);
+            } else {
+                animationProgress.value = 100; // Set to full progress immediately
+            }
         };
 
         watch(() => props.currentStep, (newStep, oldStep) => {
             if (newStep > oldStep || (newStep === 1 && !isFirstStepAnimated.value)) {
                 startAnimation();
             } else if (newStep < oldStep) {
-                animationProgress.value = 0;
+                animationProgress.value = 100; // Set to full progress when going back
             }
         });
 
diff --git a/src/components/prestaking/PrestakingWelcomePage.vue b/src/components/prestaking/PrestakingWelcomePage.vue
index 037ebd669..304bfc8f3 100644
--- a/src/components/prestaking/PrestakingWelcomePage.vue
+++ b/src/components/prestaking/PrestakingWelcomePage.vue
@@ -1,132 +1,290 @@
 <template>
-    <div class="prestaking-welcome-page flex-column">
-        <StepProgressBar :currentStep="currentStep" />
-
-        <transition name="fade" mode="out-in">
-            <!-- Step 1 -->
-            <div v-if="currentStep === 1" key="step1">
-                <PageHeader>
-                    <template #default>
-                        {{ $t('Pre-stake your NIM!') }} <br/>
-                        {{ $t('1000 NIM = 1 Giveaway point') }}
-                    </template>
-                    <template #more>
-                        <p class="nq-text">
-                            {{ $t('Collect points for the big giveaway and get a shiny Identicon upgrade \
-                                – the more the better.') }}
-                        </p>
-                    </template>
-                </PageHeader>
-                <PageBody>
-                    <div class="content flex-column">
-                        <div class="cards">
-                            <div class="card">
-                                <img src="../../assets/prestaking/cards/bronze.png" alt="Guardian">
+    <div class="prestaking-welcome-page flex-column"
+         @touchstart="handleTouchStart"
+         @touchmove="handleTouchMove"
+         @touchend="handleTouchEnd">
+        <StepProgressBar
+            :currentStep="currentStep"
+            :shouldAnimate="shouldAnimate"
+            @stepCompleted="onStepCompleted"
+        />
+
+        <!-- Navigation arrows -->
+        <div v-if="currentStep > 1" class="arrow-area left-arrow" @click.stop="handleArrowClick('prev')">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M15 18L9 12L15 6"
+                    stroke="white"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                />
+            </svg>
+        </div>
+        <div v-if="currentStep < 3" class="arrow-area right-arrow" @click.stop="handleArrowClick('next')">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M9 18L15 12L9 6"
+                    stroke="white"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                />
+            </svg>
+        </div>
+
+        <div class="content-wrapper" ref="contentWrapper">
+            <transition duration="300" name="fade" mode="out-in" @enter="onTransitionEnter">
+                <div :key="currentStep" class="step-content" ref="stepContent">
+                    <!-- Step 1: Introduction -->
+                    <div v-if="currentStep === 1">
+                        <PageHeader>
+                            <template #default>
+                                {{ $t('Pre-stake your NIM!') }} <br/>
+                                {{ $t('1000 NIM = 1 Giveaway point') }}
+                            </template>
+                            <template #more>
+                                <p class="nq-text">
+                                    {{ $t('Collect points for the big giveaway and get a shiny Identicon upgrade – \
+                                    the more the better.') }}
+                                </p>
+                            </template>
+                        </PageHeader>
+                        <PageBody>
+                            <div class="content flex-column">
+                                <div class="cards">
+                                    <div class="card" v-for="(card, index) in cards" :key="index">
+                                        <div class="card-placeholder" :class="{ 'loaded': card.loaded }">
+                                            <img :src="card.src" :alt="card.alt" @load="onImageLoad(index)">
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="card">
-                                <img src="../../assets/prestaking/cards/silver.png" alt="Protector">
-                            </div>
-                            <div class="card">
-                                <img src="../../assets/prestaking/cards/gold.png" alt="Hero">
-                            </div>
-                        </div>
-                        <button class="nq-button light-blue next-button" @click="nextStep">
-                            {{ $t('Let\'s go!') }}
-                        </button>
+                        </PageBody>
                     </div>
-                </PageBody>
-            </div>
-
-            <!-- Step 2 -->
-            <div v-if="currentStep === 2" key="step2">
-                <PageHeader>
-                    <template #default>
-                        {{ $t('Stake early to get more points!') }}
-                    </template>
-                    <template #more>
-                        <p class="nq-text">
-                            {{ $t('Pre-stake as early as possible to earn more points.') }}
-                        </p>
-                    </template>
-                </PageHeader>
-                <PageBody>
-                    <div class="content flex-column">
-                        <div class="icon-container">
-                            <img src="../../assets/prestaking/step-2-icon.svg" alt="Hourglass icon"/>
-                            <div class="icon-label">{{ $t('EARLY BIRD MULTIPLIERS') }}</div>
-                        </div>
-                        <div class="multipliers">
-                            <div class="multiplier-card">
-                                <div class="multiplier">{{ $t('3x') }}</div>
-                                <div class="period">{{ $t('First week') }}</div>
-                            </div>
-                            <div class="multiplier-card">
-                                <div class="multiplier">{{ $t('2x') }}</div>
-                                <div class="period">{{ $t('Second week') }}</div>
+
+                    <!-- Step 2: Early Bird Multipliers -->
+                    <div v-if="currentStep === 2">
+                        <PageHeader>
+                            <template #default>
+                                {{ $t('Stake early to get more points!') }}
+                            </template>
+                            <template #more>
+                                <p class="nq-text">
+                                    {{ $t('Pre-stake as early as possible to earn more points.') }}
+                                </p>
+                            </template>
+                        </PageHeader>
+                        <PageBody>
+                            <div class="content flex-column">
+                                <div class="icon-container">
+                                    <img src="../../assets/prestaking/step-2-icon.svg" alt="Hourglass icon"/>
+                                    <div class="icon-label">{{ $t('EARLY BIRD MULTIPLIERS') }}</div>
+                                </div>
+                                <div class="multipliers">
+                                    <div class="multiplier-card">
+                                        <div class="multiplier">{{ $t('3x') }}</div>
+                                        <div class="period">{{ $t('First week') }}</div>
+                                    </div>
+                                    <div class="multiplier-card">
+                                        <div class="multiplier">{{ $t('2x') }}</div>
+                                        <div class="period">{{ $t('Second week') }}</div>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <button class="nq-button light-blue next-button" @click="nextStep">
-                            {{ $t('Let\'s go!') }}
-                        </button>
+                        </PageBody>
                     </div>
-                </PageBody>
-            </div>
-
-            <!-- Step 3 -->
-            <div v-if="currentStep === 3" key="step3">
-                <PageHeader>
-                    <template #default>
-                        {{ $t('Go for small validator pools to earn even more points!') }}
-                    </template>
-                    <template #more>
-                        <p class="nq-text">
-                            {{ $t('Spreading the pre-staked NIM across validators helps decentralization.\
-                            Choose an underdog for another bonus.') }}
-                        </p>
-                    </template>
-                </PageHeader>
-                <PageBody>
-                    <div class="content flex-column">
-                        <div class="icon-container">
-                            <img src="../../assets/prestaking/step-3-icon.svg" alt="Hourglass icon"/>
-                            <div class="icon-label">{{ $t('UNDERDOG MULTIPLIERS') }}</div>
-                        </div>
-                        <div class="multipliers">
-                            <div class="multiplier-card step-3">
-                                <div class="multiplier">{{ $t('5x') }}</div>
-                                <div class="period">{{ $t('Small validators') }}</div>
+
+                    <!-- Step 3: Underdog Multipliers -->
+                    <div v-if="currentStep === 3">
+                        <PageHeader>
+                            <template #default>
+                                {{ $t('Go for small validator pools to earn even more points!') }}
+                            </template>
+                            <template #more>
+                                <p class="nq-text">
+                                    {{ $t('Spreading the pre-staked NIM across validators helps decentralization.\
+                                    Choose an underdog for another bonus.') }}
+                                </p>
+                            </template>
+                        </PageHeader>
+                        <PageBody>
+                            <div class="content flex-column">
+                                <div class="icon-container">
+                                    <img src="../../assets/prestaking/step-3-icon.svg" alt="Hourglass icon"/>
+                                    <div class="icon-label">{{ $t('UNDERDOG MULTIPLIERS') }}</div>
+                                </div>
+                                <div class="multipliers">
+                                    <div class="multiplier-card step-3">
+                                        <div class="multiplier">{{ $t('5x') }}</div>
+                                        <div class="period">{{ $t('Small validators') }}</div>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                        <button class="nq-button light-blue next-button" @click="nextStep">
-                            {{ $t('Let\'s go!') }}
-                        </button>
+                        </PageBody>
                     </div>
-                </PageBody>
-            </div>
-        </transition>
+                </div>
+            </transition>
+        </div>
+
+        <button class="nq-button light-blue next-button"
+                @click="emitNext"
+                :disabled="!hasReachedStep3"
+                :class="{ 'disabled': !hasReachedStep3 }">
+            {{ $t('Let\'s go!') }}
+        </button>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref, reactive, computed, onMounted, watch } from '@vue/composition-api';
 import { PageHeader, PageBody } from '@nimiq/vue-components';
 import StepProgressBar from '../StepProgressBar.vue';
 
+import bronzeCard from '../../assets/prestaking/cards/bronze.png';
+import silverCard from '../../assets/prestaking/cards/silver.png';
+import goldCard from '../../assets/prestaking/cards/gold.png';
+
 export default defineComponent({
-    setup(props, { emit }) {
+    setup(props, { emit, root }) {
         const currentStep = ref(1);
+        const maxReachedStep = ref(1);
+        const shouldAnimate = ref(true);
+        const lastNavigationTime = ref(0);
+        const navigationCooldown = 300; // ms
+
+        const touchStartX = ref(0);
+        const touchEndX = ref(0);
+        const isArrowClick = ref(false);
+
+        const hasReachedStep3 = computed(() => maxReachedStep.value >= 3);
+
+        const cards = reactive([
+            { src: bronzeCard, alt: 'Guardian', loaded: false },
+            { src: silverCard, alt: 'Protector', loaded: false },
+            { src: goldCard, alt: 'Hero', loaded: false },
+        ]);
+
+        const contentWrapper = ref<HTMLElement | null>(null);
+        const stepContent = ref<HTMLElement | null>(null);
+
+        const forceReflow = (el: HTMLElement): number => el.offsetHeight;
 
-        const nextStep = () => {
-            if (currentStep.value < 3) {
-                currentStep.value++;
+        const onTransitionEnter = (el: HTMLElement, done: () => void) => {
+            if (contentWrapper.value) {
+                const prevHeight = contentWrapper.value.offsetHeight;
+                contentWrapper.value.style.height = 'auto';
+                const newHeight = el.offsetHeight;
+                contentWrapper.value.style.height = `${prevHeight}px`;
+
+                // Force a reflow
+                forceReflow(el);
+
+                contentWrapper.value.style.height = `${newHeight}px`;
+
+                setTimeout(done, 300);
             } else {
+                done();
+            }
+        };
+
+        const updateContainerHeight = () => {
+            if (contentWrapper.value && stepContent.value) {
+                contentWrapper.value.style.height = `${stepContent.value.offsetHeight}px`;
+            }
+        };
+
+        onMounted(() => {
+            updateContainerHeight();
+        });
+
+        watch(currentStep, () => {
+            root.$nextTick(updateContainerHeight);
+        });
+
+        // Handle navigation between steps
+        const navigate = (direction: 'next' | 'prev') => {
+            const currentTime = Date.now();
+            if (currentTime - lastNavigationTime.value > navigationCooldown) {
+                if (direction === 'next' && currentStep.value < 3) {
+                    currentStep.value++;
+                    maxReachedStep.value = Math.max(maxReachedStep.value, currentStep.value);
+                    shouldAnimate.value = true;
+                } else if (direction === 'prev' && currentStep.value > 1) {
+                    currentStep.value--;
+                    shouldAnimate.value = false;
+                }
+                lastNavigationTime.value = currentTime;
+            }
+        };
+
+        const onStepCompleted = () => {
+            if (shouldAnimate.value) {
+                navigate('next');
+            }
+        };
+
+        const emitNext = () => {
+            if (hasReachedStep3.value) {
                 emit('next');
             }
         };
 
+        const onImageLoad = (index: number) => {
+            cards[index].loaded = true;
+        };
+
+        // Touch event handlers for swipe navigation
+        const handleTouchStart = (e: TouchEvent) => {
+            if (!isArrowClick.value) {
+                touchStartX.value = e.touches[0].clientX;
+            }
+        };
+
+        const handleTouchMove = (e: TouchEvent) => {
+            if (!isArrowClick.value) {
+                touchEndX.value = e.touches[0].clientX;
+            }
+        };
+
+        const handleTouchEnd = () => {
+            if (!isArrowClick.value) {
+                const swipeThreshold = 50; // Minimum distance to trigger swipe
+                const swipeDistance = touchEndX.value - touchStartX.value;
+
+                if (Math.abs(swipeDistance) > swipeThreshold) {
+                    navigate(swipeDistance > 0 ? 'prev' : 'next');
+                }
+            }
+
+            // Reset touch values
+            touchStartX.value = 0;
+            touchEndX.value = 0;
+            isArrowClick.value = false;
+        };
+
+        // Handle arrow click navigation
+        const handleArrowClick = (direction: 'next' | 'prev') => {
+            isArrowClick.value = true;
+            navigate(direction);
+        };
+
         return {
             currentStep,
-            nextStep,
+            shouldAnimate,
+            navigate,
+            emitNext,
+            onStepCompleted,
+            cards,
+            onImageLoad,
+            hasReachedStep3,
+            handleTouchStart,
+            handleTouchMove,
+            handleTouchEnd,
+            handleArrowClick,
+            contentWrapper,
+            stepContent,
+            onTransitionEnter,
         };
     },
     components: {
@@ -138,158 +296,287 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-    @import '../../scss/variables.scss';
-    @import '../../scss/functions.scss';
-
-    .modal ::v-deep .close-button {
-        display: none;
+@import '../../scss/variables.scss';
+@import '../../scss/functions.scss';
+
+.modal ::v-deep .close-button {
+    display: none;
+}
+
+.prestaking-welcome-page {
+    position: relative;
+    width: 62rem;
+    color: white;
+    background-color: nimiq-blue(1);
+    background-image: url('../../assets/prestaking/background.png');
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 100% auto;
+    border-radius: 0.75rem;
+    flex-grow: 1;
+    touch-action: pan-y;
+
+    transition: height 0.45s ease;
+    overflow: hidden;
+}
+
+.page-header {
+    padding: 5.5rem 0 7rem;
+}
+
+.page-body {
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    overflow: unset;
+
+    .content {
+        height: 100%;
+        justify-content: space-between;
+        align-items: center;
+        overflow: hidden;
     }
+}
 
-    .prestaking-welcome-page {
-        flex-grow: 1;
-        background: url('../../assets/prestaking/background.png') no-repeat bottom center;
-        background-size: 100% auto;
-        background-color: nimiq-blue(1);
-        border-radius: 0.75rem;
-        position: relative;
-        color: white;
-        width: 62rem;
-    }
+.next-button {
+    width: 40.875rem;
+    margin: 0 auto 5.375rem;
+    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 
-    .page-header {
-        padding-top: 5.5rem; // 32px from progress bar. (which has height 4px & top pos 8px)
-        padding-bottom: 7rem;
+    &.disabled {
+        color: rgba(255, 255, 255, 0.7);
+        background-color: rgba(31, 35, 72, 0.5);
+        opacity: 0.6;
+        cursor: not-allowed;
+        pointer-events: none;
     }
-
-    .page-body {
-        padding: 0;
-        margin: 0;
-        flex-grow: 1;
-        overflow: unset;
-
-        .content {
-            justify-content: space-between;
-            align-items: center;
-            height: 100%;
-            overflow: hidden; // Hide overflow on the container
-        }
-
-        .next-button {
-            width: 40.875rem;
-            margin: 0;
-            margin-bottom: 5.375rem;
-        }
+}
+
+.nq-text {
+    margin: 1.25rem 0 0;
+    padding: 0 1rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.icon-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 2rem;
+
+    img {
+        width: auto;
+        height: 150px;
+        margin-bottom: 2rem;
     }
 
-    .nq-text {
-        margin: 1.25rem 0 0;
-        padding: 0rem 1rem;
+    .icon-label {
+        font-size: 1.5rem;
+        font-weight: 600;
         color: rgba(255, 255, 255, 0.6);
+        text-transform: uppercase;
+    }
+}
+
+.cards {
+    display: flex;
+    width: 115%;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 5rem;
+
+    .card {
+        width: 33.33%;
+        flex: 0 0 auto;
+    }
+}
+
+.card-placeholder {
+    position: relative;
+    width: 100%;
+    padding-bottom: 140%;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    overflow: hidden;
+
+    img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        opacity: 0;
+        transition: opacity 0.3s ease;
     }
 
-    .icon-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-bottom: 2rem;
-
-        img {
-            height: 150px;
-            width: auto;
-            margin-bottom: 2rem;
-        }
+    &.loaded img {
+        opacity: 1;
+    }
+}
+
+.multipliers {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 8.375rem;
+}
+
+.multiplier-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 162px;
+    height: 80px;
+    padding: 2.5rem;
+    border: 1.5px solid rgba(255, 255, 255, 0.4);
+    border-radius: 1rem;
+    background-color: rgba(255, 255, 255, 0.05);
+    background-image:
+        radial-gradient(101.48% 101.48% at 50% 100%, rgba(31, 35, 72, 0) 0%, rgba(31, 35, 72, 0.15) 100%),
+        radial-gradient(83.64% 49.88% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+    background-blend-mode: color-dodge;
+
+    &.step-3 {
+        width: 210px;
+    }
+}
+
+.multiplier {
+    padding: 1rem;
+    margin-right: 1.5rem;
+    font-size: 2rem;
+    font-weight: 600;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+}
+
+.period {
+    font-size: 2rem;
+    line-height: 1.25;
+    opacity: 0.6;
+}
+
+@media (max-width: $mobileBreakpoint) {
+    .prestaking-welcome-page {
+        width: 100%;
+        margin-top: -.5rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+.fade-enter-to,
+.fade-leave {
+    opacity: 1;
+    transform: scale(1);
+}
+
+// Arrow navigation styles
+.arrow-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 40%;
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    z-index: 10;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+
+    &:hover, &:active, &:focus {
+        opacity: 1;
+    }
 
-        .icon-label {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.6);
-            text-transform: uppercase;
-            // letter-spacing: 0.0625rem;
-        }
+    svg {
+        position: absolute;
+        width: 2rem;
+        height: 2rem;
+        z-index: 11;
     }
 
-    .cards {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 1.5rem; // 12px
-        margin-bottom: 5rem;
-        width: 115%;
+    @media (max-width: $mobileBreakpoint) {
+        opacity: 0.4;
+        -webkit-tap-highlight-color: transparent;
 
-        .card {
-            flex: 0 0 auto;
-            width: 33.33%; // Each card takes up a third of the container width
+        &:hover, &:active, &:focus {
+            opacity: 0.4;
+        }
 
-            img {
-                width: 100%;
-                height: auto;
-            }
+        svg {
+            width: 2.25rem;
+            height: 2.25rem;
         }
     }
-
-    .multipliers {
-        display: flex;
-        justify-content: center;
-        gap: 1.5rem; // 12px
-        margin-bottom: 8.375rem;
+}
+
+@mixin arrow-background($direction) {
+    background: linear-gradient(
+        to #{$direction},
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0) 100%
+    );
+
+    @media (max-width: $mobileBreakpoint) {
+        background: linear-gradient(
+            to #{$direction},
+            rgba(255, 255, 255, 0.1) 0%,
+            rgba(255, 255, 255, 0.05) 1rem,
+            rgba(255, 255, 255, 0) 2rem
+        );
     }
+}
 
-    .multiplier-card {
-        border-radius: 1rem;
-        padding: 2.5rem;
+.left-arrow {
+    left: 0;
+    justify-content: flex-start;
+    @include arrow-background(right);
 
-        width: 162px;
-        height: 80px;
+    svg {
+        left: 1rem;
 
-        &.step-3 {
-            width: 210px;
+        @media (max-width: $mobileBreakpoint) {
+            left: 0.5rem;
         }
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        // figma
-        border: 1.5px solid rgba(255, 255, 255, 0.4);
-        background-blend-mode: color-dodge;
-        background: radial-gradient(101.48% 101.48% at 50% 100%, rgba(31, 35, 72, 0) 0%, rgba(31, 35, 72, 0.15) 100%);
-        background: radial-gradient(83.64% 49.88% at 50% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
-        background-color: rgba(255, 255, 255, 0.05);
-        // border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
-        //     radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
     }
+}
 
-    .multiplier {
-        font-size: 2rem;
-        font-weight: 600;
-        padding: 1rem;
-        margin-right: 1.5rem;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        border-radius: 50%;
-    }
+.right-arrow {
+    right: 0;
+    justify-content: flex-end;
+    @include arrow-background(left);
 
-    .period {
-        font-size: 2rem;
-        line-height: 1.25;
-        opacity: 0.6;
-    }
+    svg {
+        right: 1rem;
 
-    @media (max-width: $mobileBreakpoint) { // Full mobile breakpoint
-        .prestaking-welcome-page {
-            width: 100%;
-            margin-top: -.5rem;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+        @media (max-width: $mobileBreakpoint) {
+            right: 0.5rem;
         }
     }
-
-    .fade-enter-active,
-    .fade-leave-active {
-        transition: opacity 450ms ease;
-    }
-
-    .fade-enter,
-    .fade-leave-to {
-        opacity: 0;
-    }
+}
+
+.content-wrapper {
+    width: 100%;
+    transition: height 0.3s ease;
+    overflow: hidden;
+}
+
+.step-content {
+    width: 100%;
+    // transition: opacity 0.3s ease, transform 0.3s ease;
+}
 </style>
diff --git a/types/images.d.ts b/types/images.d.ts
new file mode 100644
index 000000000..36ea77aff
--- /dev/null
+++ b/types/images.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+}

From ffa6208f65f312b6fee4a4fd582fad5c3da5e1b5 Mon Sep 17 00:00:00 2001
From: Mraveux <matheo.raveux@gmail.com>
Date: Fri, 18 Oct 2024 18:17:50 +0200
Subject: [PATCH 2/5] =?UTF-8?q?make=20disabled=20=E2=80=9Clet=E2=80=99s=20?=
 =?UTF-8?q?go=E2=80=9D=20button=20stand=20out=20more?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/prestaking/PrestakingWelcomePage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/prestaking/PrestakingWelcomePage.vue b/src/components/prestaking/PrestakingWelcomePage.vue
index 304bfc8f3..06ab14b8a 100644
--- a/src/components/prestaking/PrestakingWelcomePage.vue
+++ b/src/components/prestaking/PrestakingWelcomePage.vue
@@ -344,8 +344,8 @@ export default defineComponent({
     transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 
     &.disabled {
-        color: rgba(255, 255, 255, 0.7);
-        background-color: rgba(31, 35, 72, 0.5);
+        color: white;
+        background-color: rgba(255, 255, 255, 0.1);
         opacity: 0.6;
         cursor: not-allowed;
         pointer-events: none;

From d7e301a402e38dd38abb7a64f122f98bcdded09d Mon Sep 17 00:00:00 2001
From: Mraveux <matheo.raveux@gmail.com>
Date: Fri, 18 Oct 2024 18:51:47 +0200
Subject: [PATCH 3/5] StepProgressBar: allow to pause the progress bar

---
 src/components/StepProgressBar.vue | 54 +++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/StepProgressBar.vue b/src/components/StepProgressBar.vue
index b05519945..b554676fd 100644
--- a/src/components/StepProgressBar.vue
+++ b/src/components/StepProgressBar.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watch, onMounted } from '@vue/composition-api';
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted } from '@vue/composition-api';
 
 export default defineComponent({
     props: {
@@ -26,9 +26,13 @@ export default defineComponent({
             type: Boolean,
             default: true,
         },
+        isPaused: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props, { emit }) {
-        const animationProgress = ref(100); // Start with full progress
+        const animationProgress = ref(0);
         const isFirstStepAnimated = ref(false);
         const ANIMATION_DURATION = 5000; // 5000ms = 5s (adjust as needed)
 
@@ -41,18 +45,32 @@ export default defineComponent({
         });
 
         let animationFrame: number;
-        let animationStartTime: number | null = null;
+        let startTime: number;
+        let pausedTime = 0;
+        let lastPauseTime: number | null = null;
+
+        const animate = (timestamp: number) => {
+            if (!startTime) startTime = timestamp;
+
+            if (props.isPaused) {
+                if (lastPauseTime === null) {
+                    lastPauseTime = timestamp;
+                }
+                animationFrame = requestAnimationFrame(animate);
+                return;
+            }
 
-        const animateStep = (timestamp: number) => {
-            if (!animationStartTime) {
-                animationStartTime = timestamp;
+            if (lastPauseTime !== null) {
+                pausedTime += timestamp - lastPauseTime;
+                lastPauseTime = null;
             }
-            const elapsed = timestamp - animationStartTime;
-            const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
+
+            const elapsedTime = timestamp - startTime - pausedTime;
+            const progress = Math.min(elapsedTime / ANIMATION_DURATION, 1);
             animationProgress.value = progress * 100;
 
             if (progress < 1 && props.shouldAnimate) {
-                animationFrame = requestAnimationFrame(animateStep);
+                animationFrame = requestAnimationFrame(animate);
             } else {
                 isFirstStepAnimated.value = true;
                 emit('stepCompleted');
@@ -60,13 +78,15 @@ export default defineComponent({
         };
 
         const startAnimation = () => {
+            cancelAnimationFrame(animationFrame);
+            startTime = 0;
+            pausedTime = 0;
+            lastPauseTime = null;
+            animationProgress.value = 0;
             if (props.shouldAnimate) {
-                animationStartTime = null;
-                cancelAnimationFrame(animationFrame);
-                animationProgress.value = 0; // Reset progress before starting animation
-                animationFrame = requestAnimationFrame(animateStep);
+                animationFrame = requestAnimationFrame(animate);
             } else {
-                animationProgress.value = 100; // Set to full progress immediately
+                animationProgress.value = 100;
             }
         };
 
@@ -74,7 +94,7 @@ export default defineComponent({
             if (newStep > oldStep || (newStep === 1 && !isFirstStepAnimated.value)) {
                 startAnimation();
             } else if (newStep < oldStep) {
-                animationProgress.value = 100; // Set to full progress when going back
+                animationProgress.value = 100;
             }
         });
 
@@ -84,6 +104,10 @@ export default defineComponent({
             }
         });
 
+        onUnmounted(() => {
+            cancelAnimationFrame(animationFrame);
+        });
+
         return {
             getFillWidth,
         };

From a37a31b38b77589190608736340cecb2d98876f4 Mon Sep 17 00:00:00 2001
From: Mraveux <matheo.raveux@gmail.com>
Date: Fri, 18 Oct 2024 19:27:53 +0200
Subject: [PATCH 4/5] Implement touch pause feature

---
 .../prestaking/PrestakingWelcomePage.vue      | 133 ++++++++++++++++--
 1 file changed, 119 insertions(+), 14 deletions(-)

diff --git a/src/components/prestaking/PrestakingWelcomePage.vue b/src/components/prestaking/PrestakingWelcomePage.vue
index 06ab14b8a..5b40b4ff0 100644
--- a/src/components/prestaking/PrestakingWelcomePage.vue
+++ b/src/components/prestaking/PrestakingWelcomePage.vue
@@ -2,15 +2,24 @@
     <div class="prestaking-welcome-page flex-column"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
-         @touchend="handleTouchEnd">
+         @touchend="handleTouchEnd"
+         @mousedown="handleMouseDown"
+         @mouseup="handleMouseUp"
+         @mouseleave="setPaused(false)"
+         @focusout="setPaused(false)">
         <StepProgressBar
             :currentStep="currentStep"
             :shouldAnimate="shouldAnimate"
+            :isPaused="isPaused"
             @stepCompleted="onStepCompleted"
         />
 
         <!-- Navigation arrows -->
-        <div v-if="currentStep > 1" class="arrow-area left-arrow" @click.stop="handleArrowClick('prev')">
+        <div v-if="currentStep > 1" class="arrow-area left-arrow"
+             @mousedown.stop="handleArrowMouseDown('prev')"
+             @mouseup.stop="handleArrowMouseUp('prev')"
+             @touchstart.stop="handleArrowTouchStart('prev')"
+             @touchend.stop="handleArrowTouchEnd('prev')">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M15 18L9 12L15 6"
@@ -21,7 +30,11 @@
                 />
             </svg>
         </div>
-        <div v-if="currentStep < 3" class="arrow-area right-arrow" @click.stop="handleArrowClick('next')">
+        <div v-if="currentStep < 3" class="arrow-area right-arrow"
+             @mousedown.stop="handleArrowMouseDown('next')"
+             @mouseup.stop="handleArrowMouseUp('next')"
+             @touchstart.stop="handleArrowTouchStart('next')"
+             @touchend.stop="handleArrowTouchEnd('next')">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M9 18L15 12L9 6"
@@ -152,10 +165,17 @@ export default defineComponent({
         const shouldAnimate = ref(true);
         const lastNavigationTime = ref(0);
         const navigationCooldown = 300; // ms
+        const isPaused = ref(false);
+        const isArrowClicked = ref(false);
+        const arrowDirection = ref<'prev' | 'next' | null>(null);
+        const pauseTimer = ref<number | ReturnType<typeof setTimeout> | null>(null);
+        const navigationTimer = ref<number | ReturnType<typeof setTimeout> | null>(null);
+        const PAUSE_DELAY = 200; // 200ms delay before pausing
+        const NAVIGATION_DELAY = 300; // 300ms delay before allowing navigation after unpausing
 
         const touchStartX = ref(0);
         const touchEndX = ref(0);
-        const isArrowClick = ref(false);
+        const isSwiping = ref(false);
 
         const hasReachedStep3 = computed(() => maxReachedStep.value >= 3);
 
@@ -205,7 +225,7 @@ export default defineComponent({
         // Handle navigation between steps
         const navigate = (direction: 'next' | 'prev') => {
             const currentTime = Date.now();
-            if (currentTime - lastNavigationTime.value > navigationCooldown) {
+            if (currentTime - lastNavigationTime.value > navigationCooldown && !isPaused.value) {
                 if (direction === 'next' && currentStep.value < 3) {
                     currentStep.value++;
                     maxReachedStep.value = Math.max(maxReachedStep.value, currentStep.value);
@@ -236,19 +256,24 @@ export default defineComponent({
 
         // Touch event handlers for swipe navigation
         const handleTouchStart = (e: TouchEvent) => {
-            if (!isArrowClick.value) {
+            if (!isArrowClicked.value) {
                 touchStartX.value = e.touches[0].clientX;
+                isSwiping.value = false;
+                startPauseTimer();
             }
         };
 
         const handleTouchMove = (e: TouchEvent) => {
-            if (!isArrowClick.value) {
+            if (!isArrowClicked.value) {
                 touchEndX.value = e.touches[0].clientX;
+                if (Math.abs(touchEndX.value - touchStartX.value) > 10) {
+                    isSwiping.value = true;
+                }
             }
         };
 
         const handleTouchEnd = () => {
-            if (!isArrowClick.value) {
+            if (!isArrowClicked.value && isSwiping.value) {
                 const swipeThreshold = 50; // Minimum distance to trigger swipe
                 const swipeDistance = touchEndX.value - touchStartX.value;
 
@@ -260,18 +285,83 @@ export default defineComponent({
             // Reset touch values
             touchStartX.value = 0;
             touchEndX.value = 0;
-            isArrowClick.value = false;
+            isSwiping.value = false;
+            isArrowClicked.value = false;
+            setPaused(false);
+        };
+
+        const handleMouseDown = (e: MouseEvent) => {
+            if (!isArrowClicked.value) {
+                startPauseTimer();
+            }
+        };
+
+        const handleMouseUp = (e: MouseEvent) => {
+            if (!isArrowClicked.value) {
+                setPaused(false);
+            }
+        };
+
+        const handleArrowMouseDown = (direction: 'prev' | 'next') => {
+            isArrowClicked.value = true;
+            arrowDirection.value = direction;
+            startPauseTimer();
+        };
+
+        const handleArrowMouseUp = (direction: 'prev' | 'next') => {
+            if (isArrowClicked.value && arrowDirection.value === direction && navigationTimer.value === null) {
+                navigate(direction);
+            }
+            isArrowClicked.value = false;
+            arrowDirection.value = null;
+            setPaused(false);
+        };
+
+        const setPaused = (value: boolean) => {
+            if (pauseTimer.value !== null) {
+                clearTimeout(pauseTimer.value as ReturnType<typeof setTimeout>);
+                pauseTimer.value = null;
+            }
+            if (navigationTimer.value !== null) {
+                clearTimeout(navigationTimer.value as ReturnType<typeof setTimeout>);
+                navigationTimer.value = null;
+            }
+            isPaused.value = value;
+            if (!value) {
+                navigationTimer.value = setTimeout(() => {
+                    navigationTimer.value = null;
+                }, NAVIGATION_DELAY);
+            }
+        };
+
+        const startPauseTimer = () => {
+            if (pauseTimer.value === null) {
+                pauseTimer.value = setTimeout(() => {
+                    setPaused(true);
+                    pauseTimer.value = null;
+                }, PAUSE_DELAY);
+            }
         };
 
-        // Handle arrow click navigation
-        const handleArrowClick = (direction: 'next' | 'prev') => {
-            isArrowClick.value = true;
-            navigate(direction);
+        const handleArrowTouchStart = (direction: 'prev' | 'next') => {
+            isArrowClicked.value = true;
+            arrowDirection.value = direction;
+            startPauseTimer();
+        };
+
+        const handleArrowTouchEnd = (direction: 'prev' | 'next') => {
+            if (isArrowClicked.value && arrowDirection.value === direction && navigationTimer.value === null) {
+                navigate(direction);
+            }
+            isArrowClicked.value = false;
+            arrowDirection.value = null;
+            setPaused(false);
         };
 
         return {
             currentStep,
             shouldAnimate,
+            isPaused,
             navigate,
             emitNext,
             onStepCompleted,
@@ -281,10 +371,19 @@ export default defineComponent({
             handleTouchStart,
             handleTouchMove,
             handleTouchEnd,
-            handleArrowClick,
+            handleMouseDown,
+            handleMouseUp,
+            handleArrowMouseDown,
+            handleArrowMouseUp,
             contentWrapper,
             stepContent,
             onTransitionEnter,
+            setPaused,
+            startPauseTimer,
+            navigationTimer,
+            isSwiping,
+            handleArrowTouchStart,
+            handleArrowTouchEnd,
         };
     },
     components: {
@@ -521,6 +620,12 @@ export default defineComponent({
             height: 2.25rem;
         }
     }
+
+    // Improve touch area on mobile
+    @media (max-width: $mobileBreakpoint) {
+        width: 25%; // Decrease touch area width
+        min-width: 50px; // Ensure a minimum width for small screens
+    }
 }
 
 @mixin arrow-background($direction) {

From 6dc2df624c8feee727ef59aef0438ca5cc2c6419 Mon Sep 17 00:00:00 2001
From: Mraveux <matheo.raveux@gmail.com>
Date: Fri, 18 Oct 2024 19:47:37 +0200
Subject: [PATCH 5/5] fix linter warnings and fix header padding

---
 src/components/prestaking/PrestakingWelcomePage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/prestaking/PrestakingWelcomePage.vue b/src/components/prestaking/PrestakingWelcomePage.vue
index 5b40b4ff0..3cf4e1e69 100644
--- a/src/components/prestaking/PrestakingWelcomePage.vue
+++ b/src/components/prestaking/PrestakingWelcomePage.vue
@@ -290,13 +290,13 @@ export default defineComponent({
             setPaused(false);
         };
 
-        const handleMouseDown = (e: MouseEvent) => {
+        const handleMouseDown = () => {
             if (!isArrowClicked.value) {
                 startPauseTimer();
             }
         };
 
-        const handleMouseUp = (e: MouseEvent) => {
+        const handleMouseUp = () => {
             if (!isArrowClicked.value) {
                 setPaused(false);
             }
@@ -420,7 +420,7 @@ export default defineComponent({
 }
 
 .page-header {
-    padding: 5.5rem 0 7rem;
+    padding: 5.5rem 4.5rem 7rem;
 }
 
 .page-body {