@jjlmoya/landings 0.4.0

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

@@ -0,0 +1,262 @@
+---
+import tinderProfile from "../assets/jjlmoya/tinder-profile.webp";
+import tinderProfileWinked from "../assets/jjlmoya/tinder-profile-winked.webp";
+import bobPointingSprite from "../assets/bob-model-book/bob-pointing.webp";
+import bobTechnoTrack from "../assets/music/bob-techno.mp3";
+
+interface Props {
+    t: {
+        textBefore: string;
+        wordWithRagebait: string;
+        textAfter: string;
+        ragebaitExplanation: string;
+        eyebrow: string;
+        title: string;
+        chipsLabel: string;
+        boardLabel: string;
+        alert: string;
+        portraitAlt: string;
+        poseLabel: string;
+        name: string;
+        role: string;
+        bio: string;
+        stats: string[][];
+        chips: string[];
+        stamp: string;
+        linksLabel: string;
+        partyPlayer: {
+            eyebrow: string;
+            title: string;
+            text: string;
+            audioLabel: string;
+            playLabel: string;
+            pauseLabel: string;
+        };
+    };
+}
+
+const { t } = Astro.props;
+---
+
+<section class="team-section human-touch" aria-labelledby="human-touch-title" data-human-touch>
+    <div class="human-touch-party-player" aria-label={t.partyPlayer.audioLabel}>
+        <audio class="human-touch-audio" preload="metadata" data-human-touch-audio>
+            <source src={bobTechnoTrack} type="audio/mpeg" />
+        </audio>
+        <button
+            class="human-touch-player-toggle"
+            type="button"
+            aria-label={t.partyPlayer.playLabel}
+            data-play-label={t.partyPlayer.playLabel}
+            data-pause-label={t.partyPlayer.pauseLabel}
+            data-human-touch-toggle
+        >
+            <span class="human-touch-player-icon" aria-hidden="true"></span>
+        </button>
+        <div class="human-touch-player-wave" aria-hidden="true">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="human-touch-disco-lights" aria-hidden="true">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="human-touch-disco-bursts" aria-hidden="true">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+        <div class="human-touch-player-bar" data-human-touch-seek aria-hidden="true">
+            <span data-human-touch-progress></span>
+        </div>
+        <span class="human-touch-player-time" data-human-touch-current aria-hidden="true">0:00</span>
+    </div>
+    <div class="human-touch-equalizer" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="team-landing-inner">
+        <div class="human-touch-shell">
+            <div class="human-touch-copy">
+                <p class="team-section-eyebrow">{t.eyebrow}</p>
+                <h2 class="team-section-title" id="human-touch-title">
+                    {t.title}
+                </h2>
+                <p class="team-section-text">
+                    {t.textBefore}<span class="human-touch-ragebait-inline">{t.wordWithRagebait}</span>{t.textAfter}
+                </p>
+
+                <div class="human-touch-ragebait-box">
+                    <p class="human-touch-ragebait-explanation">{t.ragebaitExplanation}</p>
+                </div>
+
+                <div
+                    class="human-touch-chipstorm"
+                    aria-label={t.chipsLabel}
+                >
+                    {t.chips.map((chip) => <span>{chip}</span>)}
+                </div>
+            </div>
+
+            <div
+                class="human-touch-board"
+                aria-label={t.boardLabel}
+            >
+                <div class="human-touch-alert">
+                    {t.alert}
+                </div>
+                <div class="human-touch-card">
+                    <div class="human-touch-human">
+                        <div class="human-touch-portrait">
+                            <img
+                                src={tinderProfile.src}
+                                width={tinderProfile.width}
+                                height={tinderProfile.height}
+                                alt={t.portraitAlt}
+                                loading="lazy"
+                                class="human-touch-portrait-base"
+                            />
+                            <img
+                                src={tinderProfileWinked.src}
+                                width={tinderProfileWinked.width}
+                                height={tinderProfileWinked.height}
+                                alt=""
+                                aria-hidden="true"
+                                loading="lazy"
+                                class="human-touch-portrait-wink"
+                            />
+                        </div>
+                        <span>{t.poseLabel}</span>
+                    </div>
+                    <div class="human-touch-id">
+                        <p>{t.name}</p>
+                        <strong>{t.role}</strong>
+                        <span>{t.bio}</span>
+                    </div>
+                </div>
+
+                <div class="human-touch-stats">
+                    {
+                        t.stats.map(([label, value]) => (
+                            <div>
+                                <span>{label}</span>
+                                <strong>{value}</strong>
+                            </div>
+                        ))
+                    }
+                </div>
+
+                <div class="human-touch-bob-stamp" aria-hidden="true">
+                    <img
+                        src={bobPointingSprite.src}
+                        width={bobPointingSprite.width}
+                        height={bobPointingSprite.height}
+                        alt=""
+                        loading="lazy"
+                    />
+                    <span>{t.stamp}</span>
+                </div>
+
+                <div
+                    class="human-touch-links"
+                    aria-label={t.linksLabel}
+                >
+                    <a
+                        href="https://es.linkedin.com/in/jjlmoya"
+                        target="_blank"
+                        rel="noreferrer">LinkedIn</a
+                    >
+                    <a
+                        href="https://github.com/jjlmoya"
+                        target="_blank"
+                        rel="noreferrer">GitHub</a
+                    >
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    const humanTouch = document.querySelector<HTMLElement>('[data-human-touch]');
+    const humanTouchAudio = document.querySelector<HTMLAudioElement>('[data-human-touch-audio]');
+    const humanTouchToggle = document.querySelector<HTMLButtonElement>('[data-human-touch-toggle]');
+    const humanTouchProgress = document.querySelector<HTMLElement>('[data-human-touch-progress]');
+    const humanTouchSeek = document.querySelector<HTMLElement>('[data-human-touch-seek]');
+    const humanTouchCurrent = document.querySelector<HTMLElement>('[data-human-touch-current]');
+
+    humanTouchSeek?.addEventListener('click', (event) => {
+        if (!humanTouchAudio || !humanTouchSeek || !humanTouchAudio.duration) return;
+
+        const bounds = humanTouchSeek.getBoundingClientRect();
+        const ratio = Math.min(1, Math.max(0, (event.clientX - bounds.left) / bounds.width));
+        humanTouchAudio.currentTime = ratio * humanTouchAudio.duration;
+    });
+
+    const formatAudioTime = (seconds: number) => {
+        if (!Number.isFinite(seconds)) return '0:00';
+
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+    };
+
+    const updatePlayer = () => {
+        if (!humanTouchAudio) return;
+
+        const duration = humanTouchAudio.duration || 0;
+        const currentTime = humanTouchAudio.currentTime || 0;
+        const progress = duration > 0 ? currentTime / duration * 100 : 0;
+
+        if (humanTouchProgress) humanTouchProgress.style.inlineSize = `${progress}%`;
+        if (humanTouchCurrent) humanTouchCurrent.textContent = formatAudioTime(currentTime);
+    };
+
+    humanTouchAudio?.addEventListener('play', () => {
+        humanTouch?.classList.add('is-partying');
+        humanTouchToggle?.classList.add('is-playing');
+        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.pauseLabel ?? '');
+    });
+
+    humanTouchAudio?.addEventListener('pause', () => {
+        humanTouch?.classList.remove('is-partying');
+        humanTouchToggle?.classList.remove('is-playing');
+        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.playLabel ?? '');
+    });
+
+    humanTouchAudio?.addEventListener('ended', () => {
+        humanTouch?.classList.remove('is-partying');
+        humanTouchToggle?.classList.remove('is-playing');
+        humanTouchToggle?.setAttribute('aria-label', humanTouchToggle.dataset.playLabel ?? '');
+        updatePlayer();
+    });
+
+    humanTouchAudio?.addEventListener('loadedmetadata', updatePlayer);
+    humanTouchAudio?.addEventListener('timeupdate', updatePlayer);
+
+    humanTouchToggle?.addEventListener('click', () => {
+        if (!humanTouchAudio) return;
+
+        if (humanTouchAudio.paused) {
+            void humanTouchAudio.play();
+            return;
+        }
+
+        humanTouchAudio.pause();
+    });
+</script>

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

@@ -0,0 +1,73 @@
+---
+interface Scene {
+    number: string;
+    label: string;
+    title: string;
+    text: string;
+    visual: string;
+    asset: { src: string; width: number; height: number };
+    assetAlt: string;
+    formula: { label: string; asset: { src: string; width: number; height: number } }[];
+}
+
+interface Props {
+    scene: Scene;
+}
+
+const { scene } = Astro.props;
+const firstFormula = scene.formula[0]!;
+const secondFormula = scene.formula[1]!;
+---
+
+<article
+    class={`master-plan-scene master-plan-scene-${scene.visual}`}
+>
+    <div class="master-plan-art" aria-hidden="true">
+        <span class="master-plan-frame-label">
+            {scene.number}
+        </span>
+        <span class="master-plan-placeholder">
+            <img
+                class="master-plan-asset"
+                src={scene.asset.src}
+                width={scene.asset.width}
+                height={scene.asset.height}
+                alt={scene.assetAlt}
+                loading="lazy"
+            />
+        </span>
+    </div>
+    <div class="master-plan-copy">
+        <p class="master-plan-kicker">{scene.label}</p>
+        <h3>{scene.title}</h3>
+        {scene.formula && (
+            <div class="master-plan-equation">
+                <span class="master-plan-equation-term">
+                    <img
+                        src={firstFormula.asset.src}
+                        width={firstFormula.asset.width}
+                        height={firstFormula.asset.height}
+                        alt={firstFormula.label}
+                        loading="lazy"
+                    />
+                </span>
+                <span
+                    class="master-plan-equation-arrow"
+                    aria-hidden="true"
+                >
+                    &gt;
+                </span>
+                <span class="master-plan-equation-term">
+                    <img
+                        src={secondFormula.asset.src}
+                        width={secondFormula.asset.width}
+                        height={secondFormula.asset.height}
+                        alt={secondFormula.label}
+                        loading="lazy"
+                    />
+                </span>
+            </div>
+        )}
+        <p>{scene.text}</p>
+    </div>
+</article>

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

@@ -0,0 +1,46 @@
+---
+
+interface Props {
+    t: {
+        eyebrow: string;
+        title: string;
+        text: string;
+        memories: {
+            m1: { name: string; line: string };
+            m2: { name: string; line: string };
+            m3: { name: string; line: string };
+            m4: { name: string; line: string };
+        };
+    };
+}
+
+const { t } = Astro.props;
+
+const memories = [
+    { name: t.memories.m1.name, line: t.memories.m1.line, mark: '01', color: '#f8d66d' },
+    { name: t.memories.m2.name, line: t.memories.m2.line, mark: '02', color: '#2dd4bf' },
+    { name: t.memories.m3.name, line: t.memories.m3.line, mark: '03', color: '#f15aa0' },
+    { name: t.memories.m4.name, line: t.memories.m4.line, mark: '04', color: '#60a5fa' },
+];
+---
+
+<section class="team-section memory-wall" aria-labelledby="memory-wall-title">
+    <div class="team-landing-inner">
+        <p class="team-section-eyebrow">{t.eyebrow}</p>
+        <h2 class="team-section-title" id="memory-wall-title">{t.title}</h2>
+        <p class="team-section-text">
+            {t.text}
+        </p>
+        <div class="memory-wall-board">
+            {
+                memories.map((memory) => (
+                    <article class="memory-card" style={`--memory-color: ${memory.color}`}>
+                        <div class="memory-card-photo" aria-hidden="true">{memory.mark}</div>
+                        <h3 class="memory-card-name">{memory.name}</h3>
+                        <p class="memory-card-line">{memory.line}</p>
+                    </article>
+                ))
+            }
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,46 @@
+---
+import sealOfApproval from '../assets/seal-of-approval.webp';
+
+interface Props {
+    t: {
+        eyebrow: string;
+        title: string;
+        description: string;
+        values: string[];
+    };
+}
+
+const { t } = Astro.props;
+
+const regularValues = t.values.slice(0, -1);
+const lastValue = t.values[t.values.length - 1];
+---
+
+<section class="team-section product-manifesto" aria-labelledby="product-manifesto-title">
+    <div class="team-landing-inner">
+        <div class="product-manifesto-top">
+            <p class="team-section-eyebrow">{t.eyebrow}</p>
+            <h2 class="team-section-title" id="product-manifesto-title">{t.title}</h2>
+        </div>
+
+        <div class="product-manifesto-mid">
+            <p class="product-manifesto-description">{t.description}</p>
+            <div class="product-manifesto-seal" aria-hidden="true">
+                <img
+                    src={sealOfApproval.src}
+                    width={sealOfApproval.width}
+                    height={sealOfApproval.height}
+                    alt=""
+                    loading="lazy"
+                />
+            </div>
+        </div>
+
+        <div class="product-manifesto-list" role="list" aria-label={t.eyebrow}>
+            {regularValues.map((value) => (
+                <span class="product-manifesto-item" role="listitem">{value}</span>
+            ))}
+            <span class="product-manifesto-item product-manifesto-item-miau" role="listitem">{lastValue}</span>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,67 @@
+---
+import type { KnownLocale } from '../../../types';
+import feedbackImage from '../assets/feedback.webp';
+import formulaMoney from '../assets/master-plan-money.webp';
+import formulaFood from '../assets/master-plan-more-food.webp';
+
+interface Props {
+    locale: KnownLocale;
+    t: {
+        eyebrow: string;
+        title: string;
+        text: string;
+        linkText: string;
+        comingSoonLabel: string;
+        inbox: {
+            ideas: string;
+            bugs: string;
+            fixes: string;
+            support: string;
+        };
+    };
+}
+
+const { locale, t } = Astro.props;
+void locale;
+---
+
+<section class="team-section support-transition" aria-labelledby="support-transition-title">
+    <div class="team-landing-inner support-transition-layout">
+        <div class="support-transition-content">
+            <p class="team-section-eyebrow">{t.eyebrow}</p>
+            <h2 class="team-section-title" id="support-transition-title">{t.title}</h2>
+            <p class="team-section-text">
+                {t.text}
+            </p>
+            <div class="support-transition-group">
+                <span class="support-transition-coming-soon">{t.comingSoonLabel}</span>
+                <button class="support-transition-link is-disabled" type="button" disabled>
+                    {t.linkText}
+                </button>
+            </div>
+        </div>
+        
+        <div class="support-transition-visual" aria-hidden="true">
+            <div class="support-transition-zzz">
+                <span>Z</span>
+                <span>z</span>
+                <span>z</span>
+                <span class="support-transition-bubble-icon">
+                    <img src={formulaFood.src} width={formulaFood.width} height={formulaFood.height} alt="" />
+                </span>
+                <span class="support-transition-bubble-icon">
+                    <img src={formulaMoney.src} width={formulaMoney.width} height={formulaMoney.height} alt="" />
+                </span>
+            </div>
+            <div class="support-transition-frame">
+                <img
+                    src={feedbackImage.src}
+                    width={feedbackImage.width}
+                    height={feedbackImage.height}
+                    alt=""
+                    loading="lazy"
+                />
+            </div>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,67 @@
+---
+
+interface Props {
+    t: {
+        eyebrow: string;
+        title: string;
+        scenes: {
+            strategic: { title: string; setting: string; speech: string[]; propLabel: string };
+            qa: { title: string; setting: string; speech: string[]; propLabel: string };
+            implementation: { title: string; setting: string; speech: string[]; propLabel: string };
+        };
+    };
+}
+
+const { t } = Astro.props;
+
+const scenes = [
+    {
+        title: t.scenes.strategic.title,
+        setting: t.scenes.strategic.setting,
+        speech: t.scenes.strategic.speech,
+        propLabel: t.scenes.strategic.propLabel,
+        prop: 'map',
+    },
+    {
+        title: t.scenes.qa.title,
+        setting: t.scenes.qa.setting,
+        speech: t.scenes.qa.speech,
+        propLabel: t.scenes.qa.propLabel,
+        prop: 'papers',
+    },
+    {
+        title: t.scenes.implementation.title,
+        setting: t.scenes.implementation.setting,
+        speech: t.scenes.implementation.speech,
+        propLabel: t.scenes.implementation.propLabel,
+        prop: 'keyboard',
+    },
+];
+---
+
+<section class="team-section team-comic" aria-labelledby="team-comic-title">
+    <div class="team-landing-inner">
+        <p class="team-section-eyebrow">{t.eyebrow}</p>
+        <h2 class="team-section-title" id="team-comic-title">{t.title}</h2>
+        <div class="team-comic-strip">
+            {
+                scenes.map((scene) => (
+                    <article class={`team-comic-panel team-comic-panel-${scene.prop}`}>
+                        <div class="team-comic-art" aria-hidden="true">
+                            <span class="team-comic-cat"></span>
+                            <span class="team-comic-human"></span>
+                            <span class="team-comic-prop">{scene.propLabel}</span>
+                        </div>
+                        <div class="team-comic-content">
+                            <h3>{scene.title}</h3>
+                            <p>{scene.setting}</p>
+                            <div class="team-comic-bubbles">
+                                {scene.speech.map((line) => <span>{line}</span>)}
+                            </div>
+                        </div>
+                    </article>
+                ))
+            }
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,42 @@
+---
+import heroSceneUrl from "../assets/gamebob-team-hero.webp";
+
+interface Props {
+    t: {
+        kicker: string;
+        titlePrefix: string;
+        titleAccent: string;
+        lead: string;
+        stageLabel: string;
+        sceneAlt: string;
+    };
+}
+
+const { t } = Astro.props;
+---
+
+<section class="team-hero" aria-labelledby="team-hero-title">
+    <div class="team-landing-inner team-hero-grid">
+        <div class="team-hero-copy">
+            <div class="team-hero-kicker">
+                <span class="team-hero-dot" aria-hidden="true"></span>
+                {t.kicker}
+            </div>
+            <slot name="title" />
+            <p class="team-hero-lead">{t.lead}</p>
+        </div>
+        <div
+            class="team-hero-stage"
+            aria-label={t.stageLabel}
+        >
+            <img
+                class="team-hero-scene"
+                src={heroSceneUrl.src}
+                width={heroSceneUrl.width}
+                height={heroSceneUrl.height}
+                alt={t.sceneAlt}
+                loading="eager"
+            />
+        </div>
+    </div>
+</section>