@jjlmoya/landings 0.4.0

package/src/landing/team/components/BobModelBook.astro

@@ -0,0 +1,253 @@
+---
+import { Icon } from 'astro-icon/components';
+import BobModelBookFrame from './BobModelBookFrame.astro';
+import coverPose from '../assets/bob-model-book/bob-pose-cover.webp';
+import attitudePose from '../assets/bob-model-book/bob-pose-attitude.webp';
+import expensivePose from '../assets/bob-model-book/bob-pose-expensive.webp';
+import finalPose from '../assets/bob-model-book/bob-pose-final.webp';
+import pose05 from '../assets/bob-model-book/bob-pose-05.webp';
+import pose06 from '../assets/bob-model-book/bob-pose-06.webp';
+import pose07Locked from '../assets/bob-model-book/bob-pose-07-locked.webp';
+import pose08Locked from '../assets/bob-model-book/bob-pose-08-locked.webp';
+import pose09Locked from '../assets/bob-model-book/bob-pose-09-locked.webp';
+
+interface Props {
+    t: {
+        eyebrow: string;
+        logoPrefix: string;
+        logoName: string;
+        text: string;
+        galleryLabel: string;
+        unlockedAlt: string;
+        lockedAlt: string;
+        openLabel: string;
+        closeLabel: string;
+        premiumTitle: string;
+        premiumText: string;
+        buyLabel: string;
+        trialLabel: string;
+        subscriptionLabel: string;
+        subscriptionPrefix: string;
+        expiredLabel: string;
+    };
+}
+
+const { t } = Astro.props;
+
+const poses = [
+    { image: coverPose, variant: 'large' },
+    { image: attitudePose, variant: 'portrait' },
+    { image: expensivePose, variant: 'wide' },
+    { image: finalPose, variant: 'portrait' },
+    { image: pose05, variant: 'portrait' },
+    { image: pose06, variant: 'wide' },
+    { image: pose07Locked, variant: 'portrait', locked: true },
+    { image: pose08Locked, variant: 'portrait', locked: true },
+    { image: pose09Locked, variant: 'wide', locked: true },
+];
+---
+
+<section class="team-section bob-model-book" aria-labelledby="bob-model-book-title">
+    <div class="team-landing-inner">
+        <div class="bob-model-book-header">
+            <p class="team-section-eyebrow">{t.eyebrow}</p>
+            <h2 class="bob-model-book-logo" id="bob-model-book-title">
+                <span class="bob-model-book-logo-mark" aria-hidden="true"></span>
+                <span>{t.logoPrefix}</span><strong>{t.logoName}</strong>
+            </h2>
+            <p class="team-section-text">
+                {t.text}
+            </p>
+        </div>
+
+        <div class="bob-model-book-grid" aria-label={t.galleryLabel}>
+            {
+                poses.map((pose, index) => (
+                    <BobModelBookFrame
+                        pose={pose}
+                        index={index}
+                        unlockedAlt={t.unlockedAlt}
+                        lockedAlt={t.lockedAlt}
+                        openLabel={t.openLabel}
+                    />
+                ))
+            }
+        </div>
+    </div>
+
+    <dialog class="bob-model-book-lightbox" data-bob-model-lightbox aria-label={t.galleryLabel}>
+        <div class="bob-model-book-lightbox-frame">
+            <button class="bob-model-book-lightbox-close" type="button" data-bob-model-close aria-label={t.closeLabel}>
+                <Icon name="mdi:close" />
+            </button>
+            <img data-bob-model-lightbox-image src="" alt="" />
+        </div>
+    </dialog>
+
+    <dialog class="bob-model-book-paywall" data-bob-model-paywall aria-labelledby="bob-model-paywall-title">
+        <div class="bob-model-book-paywall-panel">
+            <button class="bob-model-book-lightbox-close" type="button" data-bob-model-paywall-close aria-label={t.closeLabel}>
+                <Icon name="mdi:close" />
+            </button>
+            <h3 id="bob-model-paywall-title">{t.premiumTitle}</h3>
+            <p>{t.premiumText}</p>
+            <button class="bob-model-book-buy" type="button" disabled>
+                <Icon name="mdi:lock" />
+                <span>{t.buyLabel}</span>
+            </button>
+            <button class="bob-model-book-trial" type="button" data-bob-model-trial>
+                {t.trialLabel}
+            </button>
+        </div>
+    </dialog>
+
+    <div
+        class="bob-model-book-subscription"
+        data-bob-model-subscription
+        hidden
+        aria-live="polite"
+        data-label={t.subscriptionLabel}
+        data-prefix={t.subscriptionPrefix}
+        data-expired={t.expiredLabel}
+    >
+        <span data-bob-model-subscription-label>{t.subscriptionLabel}</span>
+        <strong data-bob-model-subscription-time></strong>
+    </div>
+</section>
+
+<script>
+    const trialDurationMs = 24 * 60 * 60 * 1000;
+    const storageKey = 'gamebob-onlybob-trial-expires-at';
+    const lightbox = document.querySelector<HTMLDialogElement>('[data-bob-model-lightbox]');
+    const lightboxImage = document.querySelector<HTMLImageElement>('[data-bob-model-lightbox-image]');
+    const closeButton = document.querySelector<HTMLButtonElement>('[data-bob-model-close]');
+    const paywall = document.querySelector<HTMLDialogElement>('[data-bob-model-paywall]');
+    const paywallCloseButton = document.querySelector<HTMLButtonElement>('[data-bob-model-paywall-close]');
+    const trialButton = document.querySelector<HTMLButtonElement>('[data-bob-model-trial]');
+    const subscription = document.querySelector<HTMLElement>('[data-bob-model-subscription]');
+    const subscriptionTime = document.querySelector<HTMLElement>('[data-bob-model-subscription-time]');
+    let isUnlockingTrial = false;
+
+    const getTrialExpiry = () => Number(localStorage.getItem(storageKey) ?? 0);
+    const isTrialActive = () => getTrialExpiry() > Date.now();
+
+    const openImage = (button: HTMLButtonElement) => {
+        if (!lightbox || !lightboxImage) return;
+
+        lightboxImage.src = button.dataset.bobModelSrc ?? '';
+        lightboxImage.alt = button.dataset.bobModelAlt ?? '';
+        lightboxImage.width = Number(button.dataset.bobModelWidth ?? 0);
+        lightboxImage.height = Number(button.dataset.bobModelHeight ?? 0);
+        lightbox.showModal();
+    };
+
+    const formatTime = (remainingMs: number) => {
+        const totalSeconds = Math.max(0, Math.floor(remainingMs / 1000));
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+
+        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    };
+
+    const getLockedFrames = () => Array.from(document.querySelectorAll<HTMLElement>('.bob-model-book-frame.is-locked'));
+
+    const setPremiumState = () => {
+        if (isUnlockingTrial) return;
+
+        const active = isTrialActive();
+        getLockedFrames().forEach((frame) => {
+            frame.classList.toggle('is-trial-unlocked', active);
+        });
+        document.querySelectorAll<HTMLButtonElement>('[data-bob-model-premium]').forEach((button) => {
+            button.setAttribute('aria-label', active ? button.dataset.bobModelAlt ?? '' : button.getAttribute('aria-label') ?? '');
+        });
+    };
+
+    const updateSubscription = () => {
+        if (!subscription || !subscriptionTime) return;
+
+        const remaining = getTrialExpiry() - Date.now();
+        if (remaining <= 0) {
+            localStorage.removeItem(storageKey);
+            subscription.hidden = true;
+            setPremiumState();
+            return;
+        }
+
+        subscription.hidden = false;
+        const prefix = subscription.dataset.prefix ?? '';
+        subscriptionTime.textContent = prefix ? `${prefix} ${formatTime(remaining)}` : formatTime(remaining);
+        setPremiumState();
+    };
+
+    const revealTrialAccess = () => {
+        const frames = getLockedFrames();
+        const stepMs = 820;
+        const revealMs = 1500;
+
+        if (frames.length === 0) {
+            updateSubscription();
+            return;
+        }
+
+        isUnlockingTrial = true;
+        frames.forEach((frame, index) => {
+            const delay = index * stepMs;
+            frame.classList.remove('is-trial-unlocked');
+            frame.classList.add('is-unlocking');
+            frame.style.setProperty('--unlock-delay', `${delay}ms`);
+
+            window.setTimeout(() => frame.classList.add('is-trial-unlocked'), delay + revealMs * 0.58);
+            window.setTimeout(() => {
+                frame.classList.remove('is-unlocking');
+                frame.style.removeProperty('--unlock-delay');
+
+                if (index === frames.length - 1) {
+                    isUnlockingTrial = false;
+                    updateSubscription();
+                }
+            }, delay + revealMs);
+        });
+    };
+
+    document.querySelectorAll<HTMLButtonElement>('[data-bob-model-open]').forEach((button) => {
+        button.addEventListener('click', () => openImage(button));
+    });
+
+    document.querySelectorAll<HTMLButtonElement>('[data-bob-model-premium]').forEach((button) => {
+        button.addEventListener('click', () => {
+            if (isTrialActive()) {
+                openImage(button);
+                return;
+            }
+
+            paywall?.showModal();
+        });
+    });
+
+    const closeLightbox = () => {
+        lightbox?.close();
+    };
+
+    closeButton?.addEventListener('click', closeLightbox);
+    lightbox?.addEventListener('click', (event) => {
+        if (event.target === lightbox) closeLightbox();
+    });
+    paywallCloseButton?.addEventListener('click', () => paywall?.close());
+    paywall?.addEventListener('click', (event) => {
+        if (event.target === paywall) paywall.close();
+    });
+    trialButton?.addEventListener('click', () => {
+        localStorage.setItem(storageKey, String(Date.now() + trialDurationMs));
+        paywall?.close();
+        if (subscription && subscriptionTime) {
+            subscription.hidden = false;
+            subscriptionTime.textContent = formatTime(trialDurationMs);
+        }
+        revealTrialAccess();
+    });
+
+    updateSubscription();
+    window.setInterval(updateSubscription, 1000);
+</script>

package/src/landing/team/components/BobModelBookFrame.astro

@@ -0,0 +1,73 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+    pose: {
+        image: { src: string; width: number; height: number };
+        variant: string;
+        locked?: boolean;
+    };
+    index: number;
+    unlockedAlt: string;
+    lockedAlt: string;
+    openLabel: string;
+}
+
+const { pose, index, unlockedAlt, lockedAlt, openLabel } = Astro.props;
+const loading = index < 2 ? 'eager' : 'lazy';
+---
+
+<figure
+    class:list={[
+        'bob-model-book-frame',
+        `bob-model-book-frame-${pose.variant}`,
+        pose.locked && 'is-locked',
+    ]}
+>
+    <div class="bob-model-book-stage">
+        {
+            pose.locked ? (
+                <button
+                    class="bob-model-book-open is-premium-locked"
+                    type="button"
+                    aria-label={lockedAlt}
+                    data-bob-model-premium
+                    data-bob-model-src={pose.image.src}
+                    data-bob-model-width={pose.image.width}
+                    data-bob-model-height={pose.image.height}
+                    data-bob-model-alt={lockedAlt}
+                >
+                    <img
+                        src={pose.image.src}
+                        width={pose.image.width}
+                        height={pose.image.height}
+                        alt={lockedAlt}
+                        loading={loading}
+                    />
+                    <span class="bob-model-book-lock" aria-hidden="true">
+                        <Icon name="mdi:lock" />
+                    </span>
+                </button>
+            ) : (
+                <button
+                    class="bob-model-book-open"
+                    type="button"
+                    aria-label={openLabel}
+                    data-bob-model-open
+                    data-bob-model-src={pose.image.src}
+                    data-bob-model-width={pose.image.width}
+                    data-bob-model-height={pose.image.height}
+                    data-bob-model-alt={unlockedAlt}
+                >
+                    <img
+                        src={pose.image.src}
+                        width={pose.image.width}
+                        height={pose.image.height}
+                        alt={unlockedAlt}
+                        loading={loading}
+                    />
+                </button>
+            )
+        }
+    </div>
+</figure>

package/src/landing/team/components/CompanyWorks.astro

@@ -0,0 +1,180 @@
+---
+import bobSprite from '../assets/bob.webp';
+import terraSprite from '../assets/terra.webp';
+import ambarSprite from '../assets/ambar.webp';
+import ambarChiquillaSprite from '../assets/ambar-chiquilla.webp';
+import dracSprite from '../assets/drac.webp';
+import jjSprite from '../assets/jjlmoya/jjlmoya-exhausted.webp';
+
+interface Props {
+    t: {
+        eyebrow: string;
+        title: string;
+        text: string;
+        secretDossier: string;
+        closeDossier: string;
+        members: {
+            bob: { name: string; role: string; status: string; dossier: string };
+            terra: { name: string; role: string; status: string; dossier: string };
+            ambar: { name: string; role: string; status: string; dossier: string };
+            ambarChiquilla: { name: string; role: string; status: string; dossier: string };
+            drac: { name: string; role: string; status: string; dossier: string };
+            jj: { name: string; role: string; status: string; dossier: string };
+        };
+    };
+}
+
+const { t } = Astro.props;
+
+const members = [
+    {
+        id: 'bob',
+        name: t.members.bob.name,
+        role: t.members.bob.role,
+        status: t.members.bob.status,
+        dossier: t.members.bob.dossier,
+        hierarchy: 'chief',
+        mark: 'B',
+        sprite: bobSprite,
+    },
+    {
+        id: 'terra',
+        name: t.members.terra.name,
+        role: t.members.terra.role,
+        status: t.members.terra.status,
+        dossier: t.members.terra.dossier,
+        hierarchy: 'orbit orbit-terra',
+        mark: 'T',
+        sprite: terraSprite,
+    },
+    {
+        id: 'ambar',
+        name: t.members.ambar.name,
+        role: t.members.ambar.role,
+        status: t.members.ambar.status,
+        dossier: t.members.ambar.dossier,
+        hierarchy: 'orbit orbit-ambar',
+        mark: 'A',
+        sprite: ambarSprite,
+    },
+    {
+        id: 'ambar-chiquilla',
+        name: t.members.ambarChiquilla.name,
+        role: t.members.ambarChiquilla.role,
+        status: t.members.ambarChiquilla.status,
+        dossier: t.members.ambarChiquilla.dossier,
+        hierarchy: 'orbit orbit-chiquilla',
+        mark: 'AC',
+        sprite: ambarChiquillaSprite,
+    },
+    {
+        id: 'drac',
+        name: t.members.drac.name,
+        role: t.members.drac.role,
+        status: t.members.drac.status,
+        dossier: t.members.drac.dossier,
+        hierarchy: 'orbit orbit-drac',
+        mark: 'D',
+        sprite: dracSprite,
+    },
+    {
+        id: 'jj',
+        name: t.members.jj.name,
+        role: t.members.jj.role,
+        status: t.members.jj.status,
+        dossier: t.members.jj.dossier,
+        hierarchy: 'human',
+        mark: 'JJ',
+        sprite: jjSprite,
+    },
+];
+---
+
+<section class="team-section company-works" aria-labelledby="company-works-title">
+    <div class="team-landing-inner">
+        <p class="team-section-eyebrow">{t.eyebrow}</p>
+        <h2 class="team-section-title" id="company-works-title">{t.title}</h2>
+        <p class="team-section-text">
+            {t.text}
+        </p>
+
+        <div class="company-works-system" data-company-grid>
+            <div class="company-works-orbit-ring" aria-hidden="true"></div>
+            {
+                members.map((member) => (
+                    <button
+                        class={`company-works-node company-works-node-${member.hierarchy}`}
+                        type="button"
+                        data-dossier-name={member.name}
+                        data-dossier-role={member.role}
+                        data-dossier-status={member.status}
+                        data-dossier-copy={member.dossier}
+                    >
+                        <span class="company-works-sprite" data-member={member.id} aria-hidden="true">
+                            <img
+                                src={member.sprite.src}
+                                width={member.sprite.width}
+                                height={member.sprite.height}
+                                alt=""
+                                loading="lazy"
+                            />
+                        </span>
+                        <span class="company-works-node-content">
+                            <span class="company-works-name">{member.name}</span>
+                            <span class="company-works-role">{member.role}</span>
+                            <span class="company-works-status">{member.status}</span>
+                        </span>
+                    </button>
+                ))
+            }
+        </div>
+    </div>
+
+    <div class="company-works-focus" data-company-focus></div>
+    <aside class="company-works-drawer" data-company-drawer aria-hidden="true">
+        <button class="company-works-drawer-close" type="button" data-company-close aria-label={t.closeDossier}>×</button>
+        <p class="company-works-drawer-eyebrow">{t.secretDossier}</p>
+        <h3 data-company-drawer-name></h3>
+        <p class="company-works-drawer-role" data-company-drawer-role></p>
+        <p class="company-works-drawer-status" data-company-drawer-status></p>
+        <p class="company-works-drawer-copy" data-company-drawer-copy></p>
+    </aside>
+</section>
+
+<script>
+    const drawer = document.querySelector<HTMLElement>('[data-company-drawer]');
+    const closeButton = document.querySelector<HTMLButtonElement>('[data-company-close]');
+    const focusLayer = document.querySelector<HTMLElement>('[data-company-focus]');
+    const closeDrawer = () => {
+        drawer?.classList.remove('is-open');
+        drawer?.setAttribute('aria-hidden', 'true');
+        focusLayer?.classList.remove('is-drawer-open');
+    };
+
+    document.querySelectorAll<HTMLButtonElement>('[data-dossier-name]').forEach((card) => {
+        card.addEventListener('mouseenter', () => {
+            focusLayer?.classList.add('is-active');
+            card.classList.add('is-focused');
+        });
+
+        card.addEventListener('mouseleave', () => {
+            focusLayer?.classList.remove('is-active');
+            card.classList.remove('is-focused');
+        });
+
+        card.addEventListener('click', () => {
+            if (!drawer) return;
+
+            drawer.querySelector('[data-company-drawer-name]')!.textContent = card.dataset.dossierName ?? '';
+            drawer.querySelector('[data-company-drawer-role]')!.textContent = card.dataset.dossierRole ?? '';
+            drawer.querySelector('[data-company-drawer-status]')!.textContent = card.dataset.dossierStatus ?? '';
+            drawer.querySelector('[data-company-drawer-copy]')!.textContent = card.dataset.dossierCopy ?? '';
+            drawer.classList.add('is-open');
+            drawer.setAttribute('aria-hidden', 'false');
+            focusLayer?.classList.add('is-drawer-open');
+        });
+    });
+
+    closeButton?.addEventListener('click', closeDrawer);
+    focusLayer?.addEventListener('click', closeDrawer);
+</script>