diff --git a/src/components/widgets/LabHero.astro b/src/components/widgets/LabHero.astro new file mode 100644 index 0000000..3dd484e --- /dev/null +++ b/src/components/widgets/LabHero.astro @@ -0,0 +1,243 @@ +--- +/** + * LabHero.astro + * Digital Industrial Hero Section + * + * Features: + * - Asymmetrical layout (not centered) + * - Large typographic treatment + * - Technical decorations and data displays + * - Staggered entry animations + * - "Research facility" atmosphere + */ +import { ScrollReveal } from '~/components/ui/cyber'; +import { getPermalink } from '~/utils/permalinks'; + +interface Props { + class?: string; +} + +const { class: className = '' } = Astro.props; + +// Technical data for decorative display +const systemStatus = { + version: 'V4.2.1', + status: 'ACTIVE', + nodes: '2,847', + uptime: '99.97%', +}; +--- + +
+ + + +
+
+ + +
+ +
+
+ + +
+
+
+ + +
+ + +
+ + +
+ + + +
+
+ SYSTEM ONLINE +
+ // {systemStatus.version} +
+ + + + +
+ +

+ + OPEN + + + WISDOM + +

+ + +
+
+

+ LABORATORY +

+
+
+ + + + +
+

+ A research facility for curious minds. We explore the unknown, challenge assumptions, and build the future through interdisciplinary collaboration. +

+ + +
+ + PROBLEM-DRIVEN + + + CROSS-DISCIPLINARY + + + HANDS-ON + +
+
+ + + + +
+ + Enter Lab + + + + + + Connect + +
+ +
+ + + + +
+ + +
+ SCROLL +
+
+
+
+ +
+ + + + + + + + + + + + + +
+ + diff --git a/src/components/widgets/ResearchMatrix.astro b/src/components/widgets/ResearchMatrix.astro new file mode 100644 index 0000000..5faa38d --- /dev/null +++ b/src/components/widgets/ResearchMatrix.astro @@ -0,0 +1,300 @@ +--- +/** + * ResearchMatrix.astro + * Industrial Bento Grid Component + * + * Features: + * - Asymmetric grid layout with varying cell sizes + * - Grid-breaking elements and overlapping cards + * - Technical markings and data displays + * - Staggered reveal animations + * - Industrial glass panels + */ +import { ScrollReveal } from '~/components/ui/cyber'; +import { getPermalink } from '~/utils/permalinks'; + +interface MatrixCell { + id: string; + titleKey: string; + descKey: string; + icon: string; + accent: 'acid' | 'electric' | 'orange' | 'violet'; + size: 'large' | 'medium' | 'small'; + link?: string; + stats?: { label: string; value: string }; +} + +interface Props { + title?: string; + titleKey?: string; + subtitle?: string; + subtitleKey?: string; + cells?: MatrixCell[]; + class?: string; +} + +const defaultCells: MatrixCell[] = [ + { + id: 'RES-001', + titleKey: 'lab.matrix.problemDriven.title', + descKey: 'lab.matrix.problemDriven.desc', + icon: '?', + accent: 'acid', + size: 'large', + link: '/curriculum', + stats: { label: 'Projects', value: '1,247' }, + }, + { + id: 'RES-002', + titleKey: 'lab.matrix.crossDisciplinary.title', + descKey: 'lab.matrix.crossDisciplinary.desc', + icon: '+', + accent: 'electric', + size: 'medium', + link: '/challenges', + stats: { label: 'Fields', value: '12' }, + }, + { + id: 'RES-003', + titleKey: 'lab.matrix.handsOn.title', + descKey: 'lab.matrix.handsOn.desc', + icon: '*', + accent: 'orange', + size: 'medium', + link: '/activities', + }, + { + id: 'RES-004', + titleKey: 'lab.matrix.innovation.title', + descKey: 'lab.matrix.innovation.desc', + icon: '~', + accent: 'violet', + size: 'small', + link: '/spaces', + }, + { + id: 'RES-005', + titleKey: 'lab.matrix.community.title', + descKey: 'lab.matrix.community.desc', + icon: '@', + accent: 'acid', + size: 'small', + link: '/about', + stats: { label: 'Members', value: '50+' }, + }, +]; + +const { + titleKey = 'lab.matrix.sectionTitle', + subtitleKey = 'lab.matrix.sectionSubtitle', + cells = defaultCells, + class: className = '', +} = Astro.props; + +// Color mappings +const accentColors = { + acid: { + text: 'text-signal-acid', + bg: 'bg-signal-acid', + border: 'border-signal-acid/30', + glow: 'shadow-lab-acid', + gradient: 'from-signal-acid/20 to-transparent', + }, + electric: { + text: 'text-signal-electric', + bg: 'bg-signal-electric', + border: 'border-signal-electric/30', + glow: 'shadow-lab-electric', + gradient: 'from-signal-electric/20 to-transparent', + }, + orange: { + text: 'text-signal-orange', + bg: 'bg-signal-orange', + border: 'border-signal-orange/30', + glow: 'shadow-lab-orange', + gradient: 'from-signal-orange/20 to-transparent', + }, + violet: { + text: 'text-signal-violet', + bg: 'bg-signal-violet', + border: 'border-signal-violet/30', + glow: 'shadow-[0_0_20px_rgba(139,92,246,0.3)]', + gradient: 'from-signal-violet/20 to-transparent', + }, +}; +--- + +
+ +
+ +
+ + +
+
+ +
+ + +
+ +
+
+ RESEARCH_MATRIX +
+ + +

+ Core Research Areas +

+ + +

+ Explore our interdisciplinary approach to learning and discovery +

+
+ + + +
+ + {cells.map((cell, index) => { + const colors = accentColors[cell.accent]; + const delay = 0.1 + (index * 0.1); + + // Determine grid span based on size + const gridClass = cell.size === 'large' + ? 'lg:col-span-7 lg:row-span-2' + : cell.size === 'medium' + ? 'lg:col-span-5' + : 'lg:col-span-6'; + + return ( + + + {/* Main Card */} +
+ {/* Gradient Overlay */} +
+ + {/* Content */} +
+ {/* Header */} +
+ {/* Icon Box */} +
+ {cell.icon} +
+ + {/* ID Badge */} +
+ {cell.id} +
+
+ + {/* Title & Description */} +
+

+ {cell.titleKey.split('.').pop()} +

+

+ Description placeholder +

+
+ + {/* Footer */} +
+ {cell.stats ? ( +
+ {cell.stats.label} + {cell.stats.value} +
+ ) : ( +
EXPLORE
+ )} + + {/* Arrow */} +
+ + + +
+
+
+ + {/* Hover Accent Line */} +
+
+ + {/* Grid Break Element - only on large cards */} + {cell.size === 'large' && ( + + )} + + + ); + })} + +
+ + + + + + + + +
+
+ + diff --git a/src/i18n/languages.ts b/src/i18n/languages.ts index 85ffdee..e610958 100644 --- a/src/i18n/languages.ts +++ b/src/i18n/languages.ts @@ -633,6 +633,34 @@ export const ui = { 'note.connectivity': '连接', 'note.sustainability': '可持续', 'note.technology': '黑科技', + + // ======================================== + // LAB DESIGN SYSTEM - Hero Section + // ======================================== + 'lab.hero.status': '系统在线', + 'lab.hero.title1': '开放', + 'lab.hero.title2': '智慧', + 'lab.hero.subtitle': '实验室', + 'lab.hero.desc': '一个面向好奇心的研究设施。我们探索未知、挑战假设，通过跨学科协作构建未来。', + 'lab.hero.tag1': '问题驱动', + 'lab.hero.tag2': '跨学科', + 'lab.hero.tag3': '实践导向', + 'lab.hero.cta1': '进入实验室', + 'lab.hero.cta2': '建立连接', + + // LAB DESIGN SYSTEM - Research Matrix + 'lab.matrix.sectionTitle': '核心研究领域', + 'lab.matrix.sectionSubtitle': '探索我们跨学科的学习与发现方法', + 'lab.matrix.problemDriven.title': '问题驱动学习', + 'lab.matrix.problemDriven.desc': '从真实世界的挑战出发，在探索中学习，在解决问题中成长。每个项目都始于一个好问题。', + 'lab.matrix.crossDisciplinary.title': '跨学科融合', + 'lab.matrix.crossDisciplinary.desc': '打破学科边界，融合多领域知识，培养综合思维和创新能力。', + 'lab.matrix.handsOn.title': '实践导向', + 'lab.matrix.handsOn.desc': '动手实践，在做中学。真正的理解来自于创造和构建。', + 'lab.matrix.innovation.title': '创新空间', + 'lab.matrix.innovation.desc': '配备先进设备的物理空间，激发创造力和协作。', + 'lab.matrix.community.title': '研究社区', + 'lab.matrix.community.desc': '连接有好奇心的探索者、导师和行业专家的网络。', }, en: { // Navigation @@ -1260,6 +1288,34 @@ export const ui = { 'note.connectivity': 'Connectivity', 'note.sustainability': 'Sustainability', 'note.technology': 'High-Tech', + + // ======================================== + // LAB DESIGN SYSTEM - Hero Section + // ======================================== + 'lab.hero.status': 'SYSTEM ONLINE', + 'lab.hero.title1': 'OPEN', + 'lab.hero.title2': 'WISDOM', + 'lab.hero.subtitle': 'LABORATORY', + 'lab.hero.desc': 'A research facility for curious minds. We explore the unknown, challenge assumptions, and build the future through interdisciplinary collaboration.', + 'lab.hero.tag1': 'PROBLEM-DRIVEN', + 'lab.hero.tag2': 'CROSS-DISCIPLINARY', + 'lab.hero.tag3': 'HANDS-ON', + 'lab.hero.cta1': 'Enter Lab', + 'lab.hero.cta2': 'Connect', + + // LAB DESIGN SYSTEM - Research Matrix + 'lab.matrix.sectionTitle': 'Core Research Areas', + 'lab.matrix.sectionSubtitle': 'Explore our interdisciplinary approach to learning and discovery', + 'lab.matrix.problemDriven.title': 'Problem-Driven Learning', + 'lab.matrix.problemDriven.desc': 'Start from real-world challenges, learn through exploration, grow through problem-solving. Every project begins with a good question.', + 'lab.matrix.crossDisciplinary.title': 'Cross-Disciplinary Fusion', + 'lab.matrix.crossDisciplinary.desc': 'Break down subject boundaries, integrate multi-domain knowledge, cultivate comprehensive thinking and innovation.', + 'lab.matrix.handsOn.title': 'Hands-On Practice', + 'lab.matrix.handsOn.desc': 'Learning by doing, building to understand. True comprehension comes from creation and construction.', + 'lab.matrix.innovation.title': 'Innovation Spaces', + 'lab.matrix.innovation.desc': 'Physical spaces equipped with advanced tools to spark creativity and collaboration.', + 'lab.matrix.community.title': 'Research Community', + 'lab.matrix.community.desc': 'A network connecting curious explorers, mentors, and industry experts.', }, } as const; diff --git a/src/layouts/LabLayout.astro b/src/layouts/LabLayout.astro new file mode 100644 index 0000000..5a623b0 --- /dev/null +++ b/src/layouts/LabLayout.astro @@ -0,0 +1,289 @@ +--- +/** + * LabLayout.astro + * Digital Industrial Laboratory Layout + * + * Features: + * - Deep obsidian background with film grain overlay + * - Subtle animated mesh gradient + * - Technical grid lines + * - Clash Display / Unbounded typography + */ +import '~/assets/styles/base.css'; +import MetaTags from '~/components/core/MetaTags.astro'; +import BasicScripts from '~/components/core/BasicScripts.astro'; +import AOSInit from '~/components/core/AOSInit.astro'; +import LenisInit from '~/components/core/LenisInit.astro'; +import Header from '~/components/widgets/Header.astro'; +import Footer from '~/components/widgets/Footer.astro'; +import { defaultLang } from '~/i18n/languages'; + +interface Props { + meta?: Record; + showHeader?: boolean; + showFooter?: boolean; +} + +const { meta = {}, showHeader = true, showFooter = true } = Astro.props; +--- + + + + + + + + + + + + + + + +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ {showHeader &&
} + +
+ +
+ + {showFooter &&
} +
+ + + + + + + + + + + + + + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 6d615c0..5a845d0 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -13,6 +13,31 @@ module.exports = { 'dark-surface': '#151515', 'dark-border': '#2a2a2a', + // ======================================== + // LAB DESIGN SYSTEM - Digital Industrial + // ======================================== + // Deep obsidian/slate backgrounds (not pitch black) + lab: { + // Background tiers + void: '#0C0C0F', // Deepest background + obsidian: '#111116', // Primary surface + slate: '#1A1A21', // Elevated surfaces + graphite: '#252530', // Cards/panels + steel: '#33333F', // Borders/dividers + // Text hierarchy + text: '#E8E8ED', // Primary text + muted: '#9191A0', // Secondary text + dim: '#5C5C6E', // Tertiary/disabled + }, + // Sharp electric accents (use sparingly) + signal: { + acid: '#D4FF00', // Acid Green - primary accent + electric: '#00D4FF', // Electric Blue - secondary accent + orange: '#FF6B00', // Signal Orange - warnings/CTAs + ember: '#FF3D00', // Hot ember - critical + violet: '#8B5CF6', // Deep violet - special + }, + // Light theme semantic colors 'text-primary': '#1a1a2e', 'text-secondary': '#6b7280', @@ -107,9 +132,15 @@ module.exports = { }, fontFamily: { + // Lab Design System Typography + // Display: Characterful headings (Clash Display > Unbounded > Syne) + // Mono: Technical/data labels (JetBrains Mono, Geist Mono) sans: ["'InterVariable'", ...defaultTheme.fontFamily.sans], - display: ["'Syne'", "'Space Grotesk'", "'InterVariable'", ...defaultTheme.fontFamily.sans], - mono: ["'JetBrains Mono'", ...defaultTheme.fontFamily.mono], + display: ["'Clash Display'", "'Unbounded'", "'Syne'", ...defaultTheme.fontFamily.sans], + mono: ["'JetBrains Mono'", "'Geist Mono'", ...defaultTheme.fontFamily.mono], + // Lab-specific utility fonts + lab: ["'Clash Display'", "'Unbounded'", ...defaultTheme.fontFamily.sans], + data: ["'JetBrains Mono'", "'Geist Mono'", ...defaultTheme.fontFamily.mono], }, fontSize: { @@ -154,6 +185,19 @@ module.exports = { // 扫描线 'scanlines': "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px)", + + // ======================================== + // LAB DESIGN SYSTEM - Backgrounds + // ======================================== + // Fine technical grid + 'lab-grid': "linear-gradient(rgba(212, 255, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 0, 0.03) 1px, transparent 1px)", + 'lab-grid-fine': "linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px)", + // Film grain effect (subtle) + 'lab-grain': "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E\")", + // Mesh gradient for movement + 'lab-mesh': "radial-gradient(at 40% 20%, rgba(212, 255, 0, 0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(0, 212, 255, 0.06) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.05) 0px, transparent 50%)", + // Technical crosshair pattern + 'lab-crosshair': "linear-gradient(rgba(212, 255, 0, 0.1) 1px, transparent 1px) 50% 50% / 40px 40px, linear-gradient(90deg, rgba(212, 255, 0, 0.1) 1px, transparent 1px) 50% 50% / 40px 40px", }, backgroundSize: { @@ -162,6 +206,9 @@ module.exports = { 'grid-cyber': '100px 100px', 'grid-dots': '20px 20px', '300%': '300%', + // Lab grid sizes + 'lab-grid': '60px 60px', + 'lab-grid-fine': '20px 20px', }, // 阴影系统 @@ -202,6 +249,19 @@ module.exports = { // 深度阴影 'depth': '0 1px 3px rgba(0, 0, 0, 0.05), 0 20px 40px -20px rgba(0, 0, 0, 0.1)', 'depth-lg': '0 1px 3px rgba(0, 0, 0, 0.05), 0 28px 56px -28px rgba(0, 0, 0, 0.15)', + + // ======================================== + // LAB DESIGN SYSTEM - Shadows + // ======================================== + // Industrial glass effect (thick, not iOS blur) + 'lab-glass': '0 4px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05)', + 'lab-glass-lg': '0 8px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08)', + // Accent glow shadows + 'lab-acid': '0 0 20px rgba(212, 255, 0, 0.3), 0 0 40px rgba(212, 255, 0, 0.1)', + 'lab-electric': '0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.1)', + 'lab-orange': '0 0 20px rgba(255, 107, 0, 0.3), 0 0 40px rgba(255, 107, 0, 0.1)', + // Inset technical shadows + 'lab-inset': 'inset 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.05)', }, // 动画 @@ -270,6 +330,23 @@ module.exports = { // 磁吸效果 'magnetic': 'magnetic 0.3s ease-out', + + // ======================================== + // LAB DESIGN SYSTEM - Animations + // ======================================== + // Mesh drift (subtle background movement) + 'lab-mesh-drift': 'labMeshDrift 20s ease-in-out infinite', + // Data stream effect + 'lab-data-stream': 'labDataStream 2s linear infinite', + // Technical scan line + 'lab-scan': 'labScan 8s linear infinite', + // Entry animations (staggered) + 'lab-enter': 'labEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards', + 'lab-enter-delay-1': 'labEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards', + 'lab-enter-delay-2': 'labEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards', + 'lab-enter-delay-3': 'labEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards', + // Subtle pulse for status indicators + 'lab-pulse': 'labPulse 3s ease-in-out infinite', }, keyframes: { @@ -420,6 +497,34 @@ module.exports = { '0%': { transform: 'translate(var(--x, 0), var(--y, 0))' }, '100%': { transform: 'translate(0, 0)' }, }, + + // ======================================== + // LAB DESIGN SYSTEM - Keyframes + // ======================================== + labMeshDrift: { + '0%, 100%': { backgroundPosition: '0% 0%' }, + '25%': { backgroundPosition: '100% 50%' }, + '50%': { backgroundPosition: '50% 100%' }, + '75%': { backgroundPosition: '0% 50%' }, + }, + labDataStream: { + '0%': { transform: 'translateY(-100%)', opacity: '0' }, + '10%': { opacity: '1' }, + '90%': { opacity: '1' }, + '100%': { transform: 'translateY(100%)', opacity: '0' }, + }, + labScan: { + '0%': { transform: 'translateY(-100%)', opacity: '0.5' }, + '100%': { transform: 'translateY(100vh)', opacity: '0' }, + }, + labEnter: { + '0%': { opacity: '0', transform: 'translateY(30px) scale(0.98)' }, + '100%': { opacity: '1', transform: 'translateY(0) scale(1)' }, + }, + labPulse: { + '0%, 100%': { opacity: '1' }, + '50%': { opacity: '0.6' }, + }, }, // 边框宽度