@jjlmoya/landings 0.5.0 → 0.7.0

package/src/landing/team/i18n/zh.ts

@@ -0,0 +1,181 @@
+import type { LandingCardContent } from '../../../types';
+
+export const cardContent: LandingCardContent = {
+    slug: 'team',
+    seo: {
+        title: 'GameBob Studio 团队',
+        description: '了解猫咪董事会、人类开发人员以及由马略卡岛发起的独立项目 GameBob Studio 诞生的故事。',
+    }
+};
+
+export const pageContent = {
+    hero: {
+        kicker: '在马略卡岛的某个地方',
+        titlePrefix: 'Game',
+        titleAccent: 'Bob',
+        lead: '由猫咪运营。由人类建造。',
+        stageLabel: 'Bob在监督GameBob工作室',
+        sceneAlt: 'JJ在笔记本电脑上工作时，Bob在监督的像素艺术场景'
+    },
+    companyWorks: {
+        eyebrow: '这家公司如何运作',
+        title: '猫咪董事会',
+        text: 'GameBob 是基于真正的王权而非企业幻想来组织的。Bob 绝对统治着董事会。这里没有扁平化组织：一切都是垂直的、不容置疑的，而且略带威严。民主无论在今天、明天还是未来，都无从谈起。',
+        members: {
+            bob: {
+                name: 'Bob',
+                role: '一切的拥有者',
+                status: '权威级别：绝对。专业干饭喵（雌性）。'
+            },
+            terra: {
+                name: 'Terra',
+                role: '女族长',
+                status: '起点。盯着代码，直到代码感到被审判。'
+            },
+            ambar: {
+                name: 'Ámbar',
+                role: '高级监督（雌性）',
+                status: '维持权力平衡（通过极度撒娇攻击）。'
+            },
+            ambarChiquilla: {
+                name: 'Ámbar Chiquilla',
+                role: '初级审计师（雌性）',
+                status: '害羞的猎手。专注于追踪鼠标光标。'
+            },
+            drac: {
+                name: 'Drac',
+                role: '外勤作业',
+                status: '派对灵魂。在街头过着自己最好的生活。'
+            },
+            jj: {
+                name: 'JJ',
+                role: '铲屎官',
+                status: '执行部门。状态：数量上完全处于劣势。'
+            }
+        }
+    },
+    humanTouch: {
+        eyebrow: '人力资源',
+        title: '人类',
+        textBefore: 'Bob 认为页面中需要展现共情，因为\'人类与人类产生链接\'。所以她下令创建了这个板块，并且由于知道我们有注意力缺陷，她要求用动画和',
+        wordWithRagebait: '冥亮',
+        textAfter: '的灯光充满它。',
+        ragebaitExplanation: '大家冷静：「冥亮」的谐音错字是故意的。猫咪董事会声称，指出错别字能让访问量增加400%。',
+        chipsLabel: '人类领域',
+        boardLabel: '人类业务档案',
+        alert: '高多巴胺人类档案',
+        portraitAlt: '充满虚假性感气息的 jjlmoya 个人资料照片',
+        poseLabel: '被迫营业的姿势',
+        name: 'jjlmoya',
+        role: '前端开发人员',
+        bio: '将日常执念、遇到的问题和微小细节转化为工具、交互体验以及可以成长多年的系统。',
+        stats: [
+            ['据点', '西班牙马略卡岛'],
+            ['角色', '开发人员'],
+            ['经验', '长于一只猫的一生'],
+            ['语言', 'ES · CA · EN']
+        ],
+        chips: [
+            '前端',
+            '应用',
+            '网页',
+            '自动化',
+            '产品',
+            '界面',
+            '性能',
+            '无障碍',
+            '隐私',
+            '实用的点子'
+        ],
+        stamp: '人类温度（强制）！',
+        linksLabel: '专业链接',
+        partyPlayer: {
+            eyebrow: 'Bob 的音频实验室',
+            title: '董事会批准的派对歌曲',
+            text: '按下播放，人类资源横幅即刻进入紧急庆祝模式。',
+            audioLabel: '播放 Bob 的派对歌曲',
+            playLabel: '播放 Bob 的派对歌曲',
+            pauseLabel: '暂停 Bob 的派对歌曲'
+        }
+    },
+    translationComic: {
+        eyebrow: '起点',
+        title: '一切如何开始',
+        spainFood: '西班牙意味着食物。',
+        worldFood: '世界意味着更多的食物。',
+        humanAssignment: '人类理解了任务。',
+        languagesLabel: '支持的语言占位符',
+        text: 'Bob 夺取你钱包的宏伟计划始于一个简单的认知：钱可以转化为食物。从那以后，任何业务流程都不再安全。',
+        quote: '多干活。多搞钱。多吃肉。',
+        closing: '计划很简单。人类至今仍在恢复中。',
+        scenes: [
+            {
+                label: '我的重大失误',
+                title: 'Bob 发现了这个系统。',
+                text: '有一天我犯了不可挽回的错误：让她看到了我是如何获得她的食物的。那一天起，Bob 开始理解一切。',
+                assetAlt: '',
+                formula: ['钱', '食物']
+            },
+            {
+                label: '梦想',
+                title: '胃部指引了方向。',
+                text: 'Bob 日以继夜不停地做梦，得出了自己想要拥有多得多的食物的结论。',
+                assetAlt: '',
+                formula: ['更多钱', '更多食物']
+            },
+            {
+                label: '宏伟计划',
+                title: 'Bob 考虑了收入。',
+                text: 'Bob 不满足于理解系统。她开始盘算如何产生持续的收入，最好是一只爪子都不用动。',
+                assetAlt: '',
+                formula: ['工具', '钱']
+            },
+            {
+                label: 'GameBob 诞生',
+                title: '人类接到了命令。',
+                text: '命令很简单：人类开发工具、游戏和页面。Bob 监督策略。食物为愿景提供财务支持。',
+                assetAlt: '',
+                formula: ['更多项目', '更多食物']
+            }
+        ]
+    },
+    bobModelBook: {
+        eyebrow: '应急计划',
+        logoPrefix: 'Only',
+        logoName: 'Bob',
+        text: 'Bob 强迫我创建了这个板块，因为如果其他一切都失败了，她认为自己的外表可以成为一种经济上可行的替代方案。我只是执行了命令。',
+        galleryLabel: 'Bob 的写真图库',
+        unlockedAlt: '写真姿势的 Bob',
+        lockedAlt: '锁定的 Bob 姿势',
+        openLabel: '解锁 Bob 的姿势',
+        closeLabel: '关闭 Bob 的姿势',
+        premiumTitle: 'OnlyBob 会员专属',
+        premiumText: 'Bob 决定这些姿势对普通用户来说过于强大。当商业模式在她看来在情感上足够成熟时，将开放完整访问权限。',
+        buyLabel: '购买访问权限（我还没彻底绝望）',
+        trialLabel: '24 小时免费试用',
+        subscriptionLabel: 'OnlyBob 试用期激活',
+        subscriptionPrefix: '',
+        expiredLabel: '试用期已过期'
+    },
+    productManifesto: {
+        eyebrow: '产品哲学',
+        title: '高品质带来高收益。',
+        description: '猫咪为了优化页面的每一个角落，阅读了数百本 SEO 手册，随身携带 5 本数字营销书籍，并开始阅读斯多葛学派。这些是她为我制定的规则，只有遵守这些规则才能通过筛选并获得她的品质认证。',
+        values: [
+            '实用',
+            '视觉化',
+            '快速',
+            '有趣',
+            '独特',
+            '隐私保护',
+            '喵'
+        ]
+    },
+    supportTransition: {
+        eyebrow: '董事会的接收窗口',
+        title: '反馈。',
+        text: '想法、错误报告、翻译修正以及对项目的支持。董事会无法保证快速回复。主要是因为它们是猫。人类资源将继续仔细阅读一切。',
+        linkText: '去支持我们',
+        comingSoonLabel: '即将推出'
+    }
+};

package/src/landing/team/styles/BobModelBook.css

@@ -173,16 +173,19 @@
 
 .bob-model-book-lock {
     position: absolute;
-    z-index: 3;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
     display: grid;
     width: clamp(2.8rem, 5vw, 4rem);
     aspect-ratio: 1;
     place-items: center;
-    border: 1px solid rgba(255, 255, 255, 0.34);
+    border: 1px solid rgba(255, 255, 255, 0.45);
     border-radius: 999px;
-    background: rgba(0, 0, 0, 0.44);
-    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
-    backdrop-filter: blur(8px);
+    background: rgba(24, 24, 27, 0.88);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+    color: var(--bob-blue);
 }
 
 .bob-model-book-lock::before {

package/src/landing/team/styles/HumanTouch.css

@@ -3,16 +3,27 @@
 
     position: relative;
     overflow: hidden;
+    padding-bottom: clamp(7rem, 12vw, 9rem);
 }
 
-.human-touch::before,
-.human-touch::after {
+.human-touch-bg-wrap {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    contain: paint;
+    transform: translate3d(0, 0, 0);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.human-touch-bg-wrap::before,
+.human-touch-bg-wrap::after {
     position: absolute;
     pointer-events: none;
     content: "";
 }
 
-.human-touch::before {
+.human-touch-bg-wrap::before {
     inset: -15%;
     background:
         radial-gradient(circle at 15% 25%, var(--team-pink) 0%, transparent 35%),
@@ -25,14 +36,14 @@
         human-touch-bg-pulse 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
 }
 
-.human-touch.is-partying::before {
+.human-touch.is-partying .human-touch-bg-wrap::before {
     opacity: 1;
     animation:
         human-touch-bg-move 1.5s linear infinite,
         human-touch-bg-pulse 0.18s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
 }
 
-.human-touch::after {
+.human-touch-bg-wrap::after {
     inset: -10%;
     background:
         linear-gradient(105deg, transparent 0 44%, var(--team-mint) 45% 46%, transparent 47%),
@@ -42,7 +53,7 @@
     animation: human-touch-lasers 3s ease-in-out infinite alternate;
 }
 
-.human-touch.is-partying::after {
+.human-touch.is-partying .human-touch-bg-wrap::after {
     opacity: 0.74;
     animation-duration: 0.42s;
     mix-blend-mode: screen;
@@ -317,7 +328,7 @@
     position: absolute;
     right: clamp(1.2rem, 6vw, 6.5rem);
     bottom: clamp(1.4rem, 7vw, 5rem);
-    z-index: 2;
+    z-index: 0;
     width: clamp(12rem, 26vw, 22rem);
     height: clamp(12rem, 26vw, 22rem);
     pointer-events: none;
@@ -760,15 +771,14 @@
 
 .human-touch-links a {
     display: inline-flex;
-    min-height: 2.7rem;
+    width: 2.8rem;
+    height: 2.8rem;
     align-items: center;
+    justify-content: center;
     border: 1px solid color-mix(in srgb, var(--team-mint) 58%, var(--team-border));
-    border-radius: 999px;
-    padding: 0.55rem 0.9rem;
+    border-radius: 12px;
     background: color-mix(in srgb, var(--team-surface) 78%, transparent);
     color: var(--team-ink);
-    font-size: 0.9rem;
-    font-weight: var(--font-weight-bold, 800);
     text-decoration: none;
     box-shadow: 0 0 26px color-mix(in srgb, var(--team-mint) 16%, transparent);
     transition:
@@ -1188,3 +1198,97 @@
         margin-top: 0.5rem;
     }
 }
+
+.human-touch-border-player {
+    display: none;
+}
+
+@media (max-width: 860px) {
+    .human-touch {
+        overflow: visible;
+    }
+
+    .human-touch-party-player {
+        display: none;
+    }
+
+    .human-touch-border-player {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 6px;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+    }
+
+    .human-touch-border-player.top-border-player {
+        top: 0;
+    }
+
+    .human-touch-border-player.bottom-border-player {
+        bottom: 0;
+    }
+
+    .human-touch-border-progress-bar {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.08);
+        cursor: pointer;
+    }
+
+    .human-touch-border-progress-bar span {
+        display: block;
+        height: 100%;
+        background: linear-gradient(90deg, var(--team-pink), var(--team-mint), var(--team-gold));
+        box-shadow: 0 0 10px var(--team-mint);
+        width: 0%;
+    }
+
+    .human-touch-border-toggle {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 110;
+        display: grid;
+        place-items: center;
+        width: 2.4rem;
+        aspect-ratio: 1;
+        border: 1px solid var(--team-mint);
+        border-radius: 8px;
+        background: rgba(24, 24, 27, 0.92);
+        color: var(--team-ink);
+        cursor: pointer;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+        transition:
+            transform 0.15s ease,
+            background-color 0.15s ease;
+    }
+
+    .human-touch-border-toggle:active {
+        transform: translate(-50%, -50%) scale(0.92);
+    }
+
+    .border-toggle-icon {
+        width: 0;
+        height: 0;
+        margin-left: 0.12rem;
+        border-top: 0.45rem solid transparent;
+        border-bottom: 0.45rem solid transparent;
+        border-left: 0.68rem solid var(--team-mint);
+    }
+
+    .human-touch-border-toggle.is-playing .border-toggle-icon {
+        width: 0.68rem;
+        height: 0.9rem;
+        margin-left: 0;
+        border: 0;
+        background:
+            linear-gradient(90deg, var(--team-pink) 34%, transparent 34% 66%, var(--team-pink) 66% 100%);
+    }
+}
+
+
+

package/src/landing/team/styles/SupportTransition.css

@@ -2,7 +2,8 @@
     --support-transition-inverse: #fff;
 
     position: relative;
-    padding-block: clamp(3rem, 8vw, 6rem);
+    padding-top: clamp(3rem, 8vw, 6rem);
+    padding-bottom: clamp(6rem, 15vw, 10rem);
 }
 
 .support-transition-layout {
@@ -281,6 +282,11 @@
         gap: 3rem;
     }
 
+    .support-transition-content {
+        align-items: center;
+        text-align: center;
+    }
+
     .support-transition-visual {
         order: -1;
     }

package/src/landing/team/styles/TeamHero.css

@@ -20,6 +20,8 @@
 }
 
 .team-hero-copy {
+    position: relative;
+    z-index: 10;
     min-width: 0;
     padding-left: 0.4rem;
 }
@@ -81,19 +83,108 @@
 
 .team-hero-stage {
     position: relative;
-    min-height: 520px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 480px;
     min-width: 0;
 }
 
+.team-hero-window {
+    position: relative;
+    width: 100%;
+    max-width: 540px;
+    background: #27272a;
+    border: 2px solid color-mix(in srgb, var(--team-mint) 45%, transparent);
+    border-radius: 12px;
+    box-shadow:
+        0 20px 40px rgba(0, 0, 0, 0.45),
+        0 0 30px color-mix(in srgb, var(--team-mint) 15%, transparent);
+    overflow: hidden;
+    animation:
+        hero-float 6s ease-in-out infinite,
+        hero-window-glow 4s ease-in-out infinite alternate;
+    transition: transform 0.3s ease;
+}
+
+.team-hero-window:hover {
+    transform: scale(1.02) translateY(-4px);
+}
+
+.team-hero-window-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.6rem 1rem;
+    background: #18181b;
+    border-bottom: 2px solid color-mix(in srgb, var(--team-mint) 25%, transparent);
+}
+
+.team-hero-window-dots {
+    display: flex;
+    gap: 0.4rem;
+}
+
+.window-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #3f3f46;
+}
+
+.window-dot.red { background: #ef4444; }
+.window-dot.yellow { background: #eab308; }
+.window-dot.green { background: #22c55e; }
+
+.team-hero-window-title {
+    color: var(--team-ink);
+    opacity: 0.65;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    user-select: none;
+}
+
+.team-hero-window-content {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1.77;
+    background: #fff;
+    overflow: hidden;
+}
+
 .team-hero-scene {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    width: min(590px, 100%);
-    height: auto;
-    transform: translateY(-50%);
-    filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.18));
-    image-rendering: auto;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    image-rendering: pixelated;
+}
+
+@keyframes hero-float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-8px);
+    }
+}
+
+@keyframes hero-window-glow {
+    0% {
+        border-color: color-mix(in srgb, var(--team-mint) 45%, transparent);
+        box-shadow:
+            0 20px 40px rgba(0, 0, 0, 0.45),
+            0 0 25px color-mix(in srgb, var(--team-mint) 15%, transparent);
+    }
+
+    100% {
+        border-color: color-mix(in srgb, var(--team-pink) 45%, transparent);
+        box-shadow:
+            0 20px 40px rgba(0, 0, 0, 0.45),
+            0 0 40px color-mix(in srgb, var(--team-pink) 20%, transparent);
+    }
 }
 
 @keyframes mallorca-radar {
@@ -112,7 +203,7 @@
     }
 }
 
-@media (max-width: 980px) {
+@media (max-width: 1100px) {
     .team-hero-grid {
         grid-template-columns: 1fr;
         gap: 0;
@@ -125,12 +216,6 @@
     .team-hero-stage {
         min-height: 500px;
     }
-
-    .team-hero-scene {
-        right: 50%;
-        width: min(660px, 120%);
-        transform: translate(50%, -50%);
-    }
 }
 
 @media (max-width: 560px) {

package/src/layouts/PreviewLayout.astro

@@ -74,9 +74,6 @@ const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Ast
             color 0.3s ease;
     }
 
-    main {
-        padding: 0 2rem;
-    }
 
     .page-wrapper {
         display: flex;

package/src/pages/[locale].astro

@@ -26,7 +26,7 @@ const landingsWithContent = await Promise.all(
         categoryTitle="Landings"
         apps={landingsWithContent.map(({ entry, card }) => ({
             id: entry.id,
-            title: card.title,
+            title: card.title || entry.id,
             href: `/${locale}/${card.slug}`,
         }))}
     />
@@ -43,9 +43,8 @@ const landingsWithContent = await Promise.all(
                     <article class="app-card">
                         <a href={`/${locale}/${card.slug}`} class="app-card-link">
                             <div class="app-card-content">
-                                <h2 class="app-title">{card.title}</h2>
-                                <p class="app-subtitle">{card.subtitle}</p>
-                                <p class="app-description">{card.description}</p>
+                                <h2 class="app-title">{card.title || card.seo?.title || entry.id}</h2>
+                                <p class="app-description">{card.description || card.seo?.description || ""}</p>
                             </div>
                             <div class="app-card-meta">
                                 <span class="app-id">{entry.id}</span>

package/src/tests/no_en_dash.test.ts

@@ -33,6 +33,7 @@ describe('Typography garbage character validation', () => {
         });
 
         it(`should not contain space before colon in ${displayPath}`, () => {
+            if (filePath.endsWith('fr.ts')) return;
             const content = fs.readFileSync(filePath, 'utf-8');
             expect(/ : /.test(content)).toBe(false);
         });

package/src/types.ts

@@ -8,9 +8,10 @@ export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
 export interface LandingCardContent {
     slug: string;
-    title: string;
-    subtitle: string;
-    description: string;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    seo?: Pick<LandingSeoMetadata, 'title' | 'description'>;
 }
 
 export interface LandingPublicAssets {
@@ -19,8 +20,8 @@ export interface LandingPublicAssets {
 }
 
 export interface LandingSeoMetadata {
-    title: string;
-    description: string;
+    title?: string;
+    description?: string;
     image: string;
     openGraphImage: string;
 }