Certified/resources/js/marketing.js

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';

Alpine.plugin(collapse);

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// Interactive OCR scan demo in the features section.
Alpine.data('ocrDemo', () => ({
    state: 'idle', // idle | scanning | typing | done
    progress: 0,
    fields: { title: '', issuer: '', expires: '' },
    result: { title: 'VCA Basisveiligheid (B-VCA)', issuer: 'SSVV — VCA Infra', expires: '12-03-2029' },

    async scan() {
        if (this.state !== 'idle' && this.state !== 'done') return;

        this.state = 'scanning';
        this.progress = 0;
        this.fields = { title: '', issuer: '', expires: '' };

        while (this.progress < 100) {
            this.progress = Math.min(100, this.progress + Math.random() * 14 + 4);
            await sleep(120);
        }

        this.state = 'typing';

        for (const key of Object.keys(this.result)) {
            for (const char of this.result[key]) {
                this.fields[key] += char;
                await sleep(28);
            }
            await sleep(180);
        }

        this.state = 'done';
    },
}));

window.Alpine = Alpine;
Alpine.start();