- {stat.value} -
-{stat.caption}
-
-
-
- (null);
+ const rendererRef = useRef(null);
+ const rafRef = useRef(null);
+ const materialRef = useRef(null);
+ const resizeObserverRef = useRef(null);
+ const rotationRef = useRef(rotation);
+ const autoRotateRef = useRef(autoRotate);
+ const pointerTargetRef = useRef(new THREE.Vector2(0, 0));
+ const pointerCurrentRef = useRef(new THREE.Vector2(0, 0));
+ const pointerSmoothRef = useRef(8);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const scene = new THREE.Scene();
+ const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+ const geometry = new THREE.PlaneGeometry(2, 2);
+ const uColorsArray = Array.from({ length: MAX_COLORS }, () => new THREE.Vector3(0, 0, 0));
+ const material = new THREE.ShaderMaterial({
+ vertexShader: vert,
+ fragmentShader: frag,
+ uniforms: {
+ uCanvas: { value: new THREE.Vector2(1, 1) },
+ uTime: { value: 0 },
+ uSpeed: { value: speed },
+ uRot: { value: new THREE.Vector2(1, 0) },
+ uColorCount: { value: 0 },
+ uColors: { value: uColorsArray },
+ uTransparent: { value: transparent ? 1 : 0 },
+ uScale: { value: scale },
+ uFrequency: { value: frequency },
+ uWarpStrength: { value: warpStrength },
+ uPointer: { value: new THREE.Vector2(0, 0) },
+ uMouseInfluence: { value: mouseInfluence },
+ uParallax: { value: parallax },
+ uNoise: { value: noise },
+ uIterations: { value: iterations },
+ uIntensity: { value: intensity },
+ uBandWidth: { value: bandWidth },
+ },
+ premultipliedAlpha: true,
+ transparent: true,
+ });
+ materialRef.current = material;
+
+ const mesh = new THREE.Mesh(geometry, material);
+ scene.add(mesh);
+
+ const renderer = new THREE.WebGLRenderer({
+ antialias: false,
+ powerPreference: 'high-performance',
+ alpha: true,
+ });
+ rendererRef.current = renderer;
+ renderer.outputColorSpace = THREE.SRGBColorSpace;
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+ renderer.setClearColor(0x000000, transparent ? 0 : 1);
+ renderer.domElement.style.width = '100%';
+ renderer.domElement.style.height = '100%';
+ renderer.domElement.style.display = 'block';
+ container.appendChild(renderer.domElement);
+
+ const clock = new THREE.Clock();
+
+ const handleResize = () => {
+ const w = container.clientWidth || 1;
+ const h = container.clientHeight || 1;
+ renderer.setSize(w, h, false);
+ material.uniforms.uCanvas.value.set(w, h);
+ };
+
+ handleResize();
+
+ if ('ResizeObserver' in window) {
+ const ro = new ResizeObserver(handleResize);
+ ro.observe(container);
+ resizeObserverRef.current = ro;
+ } else {
+ (window as any).addEventListener('resize', handleResize);
+ }
+
+ const loop = () => {
+ const dt = clock.getDelta();
+ const elapsed = clock.elapsedTime;
+ material.uniforms.uTime.value = elapsed;
+
+ const deg = (rotationRef.current % 360) + autoRotateRef.current * elapsed;
+ const rad = (deg * Math.PI) / 180;
+ const c = Math.cos(rad);
+ const s = Math.sin(rad);
+ material.uniforms.uRot.value.set(c, s);
+
+ const cur = pointerCurrentRef.current;
+ const tgt = pointerTargetRef.current;
+ const amt = Math.min(1, dt * pointerSmoothRef.current);
+ cur.lerp(tgt, amt);
+ material.uniforms.uPointer.value.copy(cur);
+ renderer.render(scene, camera);
+ rafRef.current = requestAnimationFrame(loop);
+ };
+ rafRef.current = requestAnimationFrame(loop);
+
+ return () => {
+ if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+ if (resizeObserverRef.current) resizeObserverRef.current.disconnect();
+ else (window as any).removeEventListener('resize', handleResize);
+ geometry.dispose();
+ material.dispose();
+ renderer.dispose();
+ renderer.forceContextLoss();
+ if (renderer.domElement && renderer.domElement.parentElement === container) {
+ container.removeChild(renderer.domElement);
+ }
+ };
+ }, [bandWidth, frequency, intensity, iterations, mouseInfluence, noise, parallax, scale, speed, transparent, warpStrength]);
+
+ useEffect(() => {
+ const material = materialRef.current;
+ const renderer = rendererRef.current;
+ if (!material) return;
+
+ rotationRef.current = rotation;
+ autoRotateRef.current = autoRotate;
+ material.uniforms.uSpeed.value = speed;
+ material.uniforms.uScale.value = scale;
+ material.uniforms.uFrequency.value = frequency;
+ material.uniforms.uWarpStrength.value = warpStrength;
+ material.uniforms.uMouseInfluence.value = mouseInfluence;
+ material.uniforms.uParallax.value = parallax;
+ material.uniforms.uNoise.value = noise;
+ material.uniforms.uIterations.value = iterations;
+ material.uniforms.uIntensity.value = intensity;
+ material.uniforms.uBandWidth.value = bandWidth;
+
+ const toVec3 = (hex: string) => {
+ const h = hex.replace('#', '').trim();
+ const v =
+ h.length === 3
+ ? [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)]
+ : [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+ return new THREE.Vector3(v[0] / 255, v[1] / 255, v[2] / 255);
+ };
+
+ const arr = (colors || []).filter(Boolean).slice(0, MAX_COLORS).map(toVec3);
+ for (let i = 0; i < MAX_COLORS; i++) {
+ const vec = material.uniforms.uColors.value[i];
+ if (i < arr.length) vec.copy(arr[i]);
+ else vec.set(0, 0, 0);
+ }
+ material.uniforms.uColorCount.value = arr.length;
+
+ material.uniforms.uTransparent.value = transparent ? 1 : 0;
+ if (renderer) renderer.setClearColor(0x000000, transparent ? 0 : 1);
+ }, [rotation, autoRotate, speed, scale, frequency, warpStrength, mouseInfluence, parallax, noise, iterations, intensity, bandWidth, colors, transparent]);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const handlePointerMove = (e: PointerEvent) => {
+ const rect = container.getBoundingClientRect();
+ const x = ((e.clientX - rect.left) / (rect.width || 1)) * 2 - 1;
+ const y = -(((e.clientY - rect.top) / (rect.height || 1)) * 2 - 1);
+ pointerTargetRef.current.set(x, y);
+ };
+
+ container.addEventListener('pointermove', handlePointerMove);
+ return () => {
+ container.removeEventListener('pointermove', handlePointerMove);
+ };
+ }, []);
+
+ return ;
+}
diff --git a/pages/src/components/FadeInSection.tsx b/pages/src/components/FadeInSection.tsx
new file mode 100644
index 0000000..ceb5994
--- /dev/null
+++ b/pages/src/components/FadeInSection.tsx
@@ -0,0 +1,43 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+interface FadeInSectionProps {
+ children: React.ReactNode;
+ delay?: number; // ms
+}
+
+const FadeInSection: React.FC = ({ children, delay = 0 }) => {
+ const ref = useRef(null);
+ const [isVisible, setIsVisible] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ observer.unobserve(entry.target);
+ }
+ },
+ { threshold: 0.08 }
+ );
+
+ if (ref.current) {
+ observer.observe(ref.current);
+ }
+
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
- {/* Ambient glow */}
-
-
+
+
-
-
- {/* Legend */}
- - {t('benchmark.sectionLabel')} -
-- {t('benchmark.title')} -
-- {t('benchmark.subtitlePreRepos')} - 50 - {t('benchmark.subtitlePrePRs')} - 200 - {t('benchmark.subtitlePreLangs')} - 10 - {t('benchmark.subtitleEnd')} -
-
-
-
- {/* Table */}
-
-
-
-
-
-
-
- {/* Header */}
-
+
);
};
diff --git a/pages/src/components/ColorBends.css b/pages/src/components/ColorBends.css
new file mode 100644
index 0000000..b546eb2
--- /dev/null
+++ b/pages/src/components/ColorBends.css
@@ -0,0 +1,11 @@
+.color-bends-container {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.color-bends-container canvas {
+ display: block;
+ width: 100% !important;
+ height: 100% !important;
+}
diff --git a/pages/src/components/ColorBends.tsx b/pages/src/components/ColorBends.tsx
new file mode 100644
index 0000000..7449fb0
--- /dev/null
+++ b/pages/src/components/ColorBends.tsx
@@ -0,0 +1,321 @@
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import './ColorBends.css';
+
+const MAX_COLORS = 8;
+
+const frag = `
+#define MAX_COLORS ${MAX_COLORS}
+uniform vec2 uCanvas;
+uniform float uTime;
+uniform float uSpeed;
+uniform vec2 uRot;
+uniform int uColorCount;
+uniform vec3 uColors[MAX_COLORS];
+uniform int uTransparent;
+uniform float uScale;
+uniform float uFrequency;
+uniform float uWarpStrength;
+uniform vec2 uPointer;
+uniform float uMouseInfluence;
+uniform float uParallax;
+uniform float uNoise;
+uniform int uIterations;
+uniform float uIntensity;
+uniform float uBandWidth;
+varying vec2 vUv;
+
+void main() {
+ float t = uTime * uSpeed;
+ vec2 p = vUv * 2.0 - 1.0;
+ p += uPointer * uParallax * 0.1;
+ vec2 rp = vec2(p.x * uRot.x - p.y * uRot.y, p.x * uRot.y + p.y * uRot.x);
+ vec2 q = vec2(rp.x * (uCanvas.x / uCanvas.y), rp.y);
+ q /= max(uScale, 0.0001);
+ q /= 0.5 + 0.2 * dot(q, q);
+ q += 0.2 * cos(t) - 7.56;
+ vec2 toward = (uPointer - rp);
+ q += toward * uMouseInfluence * 0.2;
+
+ for (int j = 0; j < 5; j++) {
+ if (j >= uIterations - 1) break;
+ vec2 rr = sin(1.5 * (q.yx * uFrequency) + 2.0 * cos(q * uFrequency));
+ q += (rr - q) * 0.15;
+ }
+
+ vec3 col = vec3(0.0);
+ float a = 1.0;
+
+ if (uColorCount > 0) {
+ vec2 s = q;
+ vec3 sumCol = vec3(0.0);
+ float cover = 0.0;
+ for (int i = 0; i < MAX_COLORS; ++i) {
+ if (i >= uColorCount) break;
+ s -= 0.01;
+ vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+ float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+ float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+ float kMix = pow(kBelow, 0.3);
+ float gain = 1.0 + max(uWarpStrength - 1.0, 0.0);
+ vec2 disp = (r - s) * kBelow;
+ vec2 warped = s + disp * gain;
+ float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+ float m = mix(m0, m1, kMix);
+ float w = 1.0 - exp(-uBandWidth / exp(uBandWidth * m));
+ sumCol += uColors[i] * w;
+ cover = max(cover, w);
+ }
+ col = clamp(sumCol, 0.0, 1.0);
+ a = uTransparent > 0 ? cover : 1.0;
+ } else {
+ vec2 s = q;
+ for (int k = 0; k < 3; ++k) {
+ s -= 0.01;
+ vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+ float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+ float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+ float kMix = pow(kBelow, 0.3);
+ float gain = 1.0 + max(uWarpStrength - 1.0, 0.0);
+ vec2 disp = (r - s) * kBelow;
+ vec2 warped = s + disp * gain;
+ float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+ float m = mix(m0, m1, kMix);
+ col[k] = 1.0 - exp(-uBandWidth / exp(uBandWidth * m));
+ }
+ a = uTransparent > 0 ? max(max(col.r, col.g), col.b) : 1.0;
+ }
+
+ col *= uIntensity;
+
+ if (uNoise > 0.0001) {
+ float n = fract(sin(dot(gl_FragCoord.xy + vec2(uTime), vec2(12.9898, 78.233))) * 43758.5453123);
+ col += (n - 0.5) * uNoise;
+ col = clamp(col, 0.0, 1.0);
+ }
+
+ vec3 rgb = (uTransparent > 0) ? col * a : col;
+ gl_FragColor = vec4(rgb, a);
+}
+`;
+
+const vert = `
+varying vec2 vUv;
+void main() {
+ vUv = uv;
+ gl_Position = vec4(position, 1.0);
+}
+`;
+
+interface ColorBendsProps {
+ className?: string;
+ style?: React.CSSProperties;
+ rotation?: number;
+ speed?: number;
+ colors?: string[];
+ transparent?: boolean;
+ autoRotate?: number;
+ scale?: number;
+ frequency?: number;
+ warpStrength?: number;
+ mouseInfluence?: number;
+ parallax?: number;
+ noise?: number;
+ iterations?: number;
+ intensity?: number;
+ bandWidth?: number;
+}
+
+export default function ColorBends({
+ className = '',
+ style,
+ rotation = 90,
+ speed = 0.2,
+ colors = [],
+ transparent = true,
+ autoRotate = 0,
+ scale = 1,
+ frequency = 1,
+ warpStrength = 1,
+ mouseInfluence = 1,
+ parallax = 0.5,
+ noise = 0.15,
+ iterations = 1,
+ intensity = 1.5,
+ bandWidth = 6,
+}: ColorBendsProps) {
+ const containerRef = useRef
- = {
- f1: 'F1',
- precision: t('benchmark.colPrecision'),
- recall: t('benchmark.colRecall'),
- };
- return (
-
-
- {/* Rows */}
- {sortedData.map((entry, index) => {
- const entryRank = ranks.get(index);
- const hasData = entry.f1 != null;
- const pMedal = precisionMedals.get(index);
- const rMedal = recallMedals.get(index);
+ {t('benchmark.colRank')}
- {t('benchmark.colModel')}
- {t('benchmark.colSource')}
- {(['f1', 'precision', 'recall'] as const).map((field) => {
- const labels: Record setSortField(field)}
- >
- {labels[field]}
- ▼
-
- );
- })}
- {t('benchmark.colAvgTime')}
- {t('benchmark.colAvgToken')}
-
+ {/* Header */}
+
+ {/* Footer note */}
+
+
+ {t('benchmark.sectionLabel')}
+
+
+ {/* Table */}
+ + {t('benchmark.title')} +
++ {t('benchmark.subtitle')} +
+
+ {/* Table Header */}
+
-
+ {sortableHeaders.map((col, i) => {
+ const isActive = col.field === sortField;
+ const isSortable = !!col.field;
return (
+ {/* Table Rows */}
+ {sortedRows.map((row, idx) => {
+ const bgOpacity = idx === 0 ? 0.25 : idx === 1 ? 0.18 : idx === 2 ? 0.1 : 0;
+ const rankDisplay = idx < 3 ? MEDAL_RANKS[idx] : String(idx + 1);
+ return (
+ setHoveredRow(index)}
- onMouseLeave={() => setHoveredRow(null)}
+ key={col.key}
+ onClick={isSortable ? () => handleSort(col.field!) : undefined}
+ style={{
+ width: i === 0 ? 120 : i === 1 ? 200 : i === 2 ? 200 : undefined,
+ flex: i > 2 ? 1 : undefined,
+ height: 44,
+ display: 'flex',
+ alignItems: 'center',
+ gap: 4,
+ padding: i === 0 ? '10px 20px' : '10px 12px',
+ cursor: isSortable ? 'pointer' : 'default',
+ userSelect: 'none',
+ }}
>
- {/* Rank */}
- 
+ )}
);
})}
- {entryRank != null ? (
-
- {entryRank <= 3 ? medalIcons[['gold', 'silver', 'bronze'][entryRank - 1]] : (
- {entryRank}
- )}
-
- ) : (
-
-
-
- )}
-
-
- {/* Model + Company */}
-
-
-
- {/* Source */}
- {entry.model}
- {entry.company}
-
- {entry.sourceType === 'ocr' &&
-
- {/* F1 */}
-
- {entry.f1 != null ? (
-
- {entry.f1.toFixed(2)}%
-
- ) : (
-
-
- Running
-
- )}
-
-
- {/* Precision with medal */}
-
- {entry.precision != null ? (
-
-
- {/* Recall with medal */}
-
-
- ) : (
-
- {entry.precision.toFixed(2)}%
-
- {pMedal ? medalIcons[pMedal] : ''}
-
-
- {entry.precisionDetail && (
- {entry.precisionDetail}
- )}
-
-
-
- )}
-
- {entry.recall != null ? (
-
-
- {/* Avg Time */}
-
-
- ) : (
-
- {entry.recall.toFixed(2)}%
-
- {rMedal ? medalIcons[rMedal] : ''}
-
-
- {entry.recallDetail && (
- {entry.recallDetail}
- )}
-
-
-
- )}
-
- {entry.avgTime ? (
- {entry.avgTime}
- ) : (
-
-
- {/* Avg Token */}
-
-
-
- )}
-
- {entry.avgTotalToken ? (
-
+
+ {col.label}
+
+ {isSortable && (
+
- {entry.avgTotalToken}
- {entry.avgInputToken && (
-
- ) : (
- {entry.avgInputToken} / {entry.avgOutputToken}
- )}
-
-
-
- )}
- 0 ? `rgba(43,222,94,${bgOpacity})` : 'transparent',
+ borderStyle: 'solid',
+ borderColor: 'rgba(255,255,255,0.16)',
+ borderTopWidth: 0,
+ borderBottomWidth: idx === sortedRows.length - 1 ? 0 : 1,
+ borderRightWidth: 0,
+ borderLeftWidth: 0,
+ overflow: 'hidden',
+ }}
+ >
+ {/* Rank */}
+
+ );
+ })}
+
+ {rankDisplay}
+
+
+ {/* Model */}
+
+ {row.model}
+ {row.provider}
+
+ {/* Source */}
+
+ {row.sourceIcon && 
}
+ {row.source}
+
+ {/* F1 */}
+
+
+ {row.f1}
+
+
+ {/* Precision */}
+
+
+ {/* Recall */}
+
+
+ {row.precision}
+
+ {row.precisionMedal !== undefined && 
}
+
+ {row.precisionDetail}
+
+
+ {/* Avg Time */}
+
+
+ {row.recall}
+
+ {row.recallMedal !== undefined && 
}
+
+ {row.recallDetail}
+
+ {row.avgTime}
+
+ {/* Avg Token */}
+
+ {row.avgToken}
+ {row.tokenDetail}
+
+ + Open Code Review · v1.3.1 ｜ Claude Code · v2.1.169 · /code-review ｜ Codex · v0.140.0 · /review +
+
+ {children}
+
+ );
+};
+
+export default FadeInSection;
diff --git a/pages/src/components/FeaturesSection.tsx b/pages/src/components/FeaturesSection.tsx
index 781dbf0..c17784d 100644
--- a/pages/src/components/FeaturesSection.tsx
+++ b/pages/src/components/FeaturesSection.tsx
@@ -1,86 +1,101 @@
import React from 'react';
import { useTranslation } from '../i18n';
+import { useResponsive } from '../hooks/useResponsive';
+import icon1 from '../assets/icons/icon-feature-architecture.svg';
+import icon2 from '../assets/icons/icon-feature-positioning.svg';
+import icon3 from '../assets/icons/icon-feature-multi-model.svg';
+import icon4 from '../assets/icons/icon-feature-concurrent.svg';
+import icon5 from '../assets/icons/icon-feature-compression.svg';
+import icon6 from '../assets/icons/icon-feature-rules.svg';
const FeaturesSection: React.FC = () => {
const { t } = useTranslation();
+ const { isMobile, isTablet } = useResponsive();
const features = [
- {
- icon: 'fa-robot',
- color: 'text-brand-400',
- bgColor: 'bg-brand-500/10',
- title: t('features.feat1Title'),
- description: t('features.feat1Desc'),
- },
- {
- icon: 'fa-crosshairs',
- color: 'text-cyan-400',
- bgColor: 'bg-cyan-500/10',
- title: t('features.feat2Title'),
- description: t('features.feat2Desc'),
- },
- {
- icon: 'fa-link',
- color: 'text-purple-400',
- bgColor: 'bg-purple-500/10',
- title: t('features.feat3Title'),
- description: t('features.feat3Desc'),
- },
- {
- icon: 'fa-bolt',
- color: 'text-yellow-400',
- bgColor: 'bg-yellow-500/10',
- title: t('features.feat4Title'),
- description: t('features.feat4Desc'),
- },
- {
- icon: 'fa-brain',
- color: 'text-orange-400',
- bgColor: 'bg-orange-500/10',
- title: t('features.feat5Title'),
- description: t('features.feat5Desc'),
- },
- {
- icon: 'fa-scroll',
- color: 'text-pink-400',
- bgColor: 'bg-pink-500/10',
- title: t('features.feat6Title'),
- description: t('features.feat6Desc'),
- },
+ { icon: icon1, title: t('features.feat1Title'), desc: t('features.feat1Desc') },
+ { icon: icon2, title: t('features.feat2Title'), desc: t('features.feat2Desc') },
+ { icon: icon3, title: t('features.feat3Title'), desc: t('features.feat3Desc') },
+ { icon: icon4, title: t('features.feat4Title'), desc: t('features.feat4Desc') },
+ { icon: icon5, title: t('features.feat5Title'), desc: t('features.feat5Desc') },
+ { icon: icon6, title: t('features.feat6Title'), desc: t('features.feat6Desc') },
];
return (
-
+ {/* Header */}
+
+
+ {t('features.sectionBadge')}
+
+
- + {t('features.title')} +
++ {t('features.subtitle')} +
+
-
- (null);
+
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
+ }, []);
+
+ const currentLabel = LANG_OPTIONS.find(o => o.value === language)?.label ?? 'English';
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/pages/src/components/HeroSection.tsx b/pages/src/components/HeroSection.tsx
index 54f022e..692403a 100644
--- a/pages/src/components/HeroSection.tsx
+++ b/pages/src/components/HeroSection.tsx
@@ -1,177 +1,356 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
import { useTranslation } from '../i18n';
+import { useResponsive } from '../hooks/useResponsive';
+import ColorBends from './ColorBends';
+import lineIcon from '../assets/icons/icon-terminal-prompt.svg';
const terminalLines = [
- { delay: 0, text: '$ ocr review --from main --to feature-auth', type: 'command' },
- { delay: 600, text: '[ocr] Reviewing 5 file(s) in /home/user/project', type: 'info' },
- { delay: 1200, text: '[ocr] ▶ file_read "internal/auth/login.go"', type: 'tool' },
- { delay: 1600, text: '[ocr] ✔ file_read (15ms)', type: 'tool-ok' },
- { delay: 2000, text: '[ocr] ▶ code_search "password.*hash"', type: 'tool' },
- { delay: 2400, text: '[ocr] ✔ code_search (8ms)', type: 'tool-ok' },
- { delay: 2800, text: '[ocr] Plan completed for internal/auth/login.go', type: 'info' },
- { delay: 3200, text: '', type: 'separator' },
- { delay: 3400, text: '─── internal/auth/login.go:42-55 ───', type: 'header' },
- { delay: 3600, text: 'Consider using bcrypt cost factor ≥ 12 for password hashing.', type: 'comment' },
- { delay: 4000, text: '', type: 'separator' },
- { delay: 4200, text: '[ocr] Summary: 5 file(s), 3 comment(s), ~8421 tokens, 12.5s', type: 'result' }
+ {
+ num: 1,
+ hasIcon: true,
+ content: (
+
+ $ ocr re
+ v
+ iew --from
+
+ mai
+ n --to feature-auth
+
+ ),
+ },
+ {
+ num: 2,
+ hasIcon: true,
+ content: (
+
+ [o
+ cr] R
+ e
+ v
+ iew
+ ing
+
+ 5 file
+ (s) in /home/user/project
+
+ ),
+ },
+ {
+ num: 3,
+ hasIcon: true,
+ content: (
+
+ [o
+ cr]
+ ▶
+ fi
+ l
+ e
+ _re
+ a
+ d
+ "
+ int
+ e
+ rna
+ l
+ /a
+ u
+ th/login.go"
+
+ ),
+ },
+ {
+ num: 4,
+ hasIcon: true,
+ content: (
+
+ [ocr
+ ] ✔
+ f
+ ile
+ _
+ r
+ ead
+ (1
+ 5
+ ms)
+
+ ),
+ },
+ {
+ num: 5,
+ hasIcon: true,
+ content: (
+
+ [ocr]
+ ▶
+ co
+ de_
+ s
+ e
+ arch
+ "p
+ a
+ s
+ swo
+ r
+ d.*hash"
+
+ ),
+ },
+ {
+ num: 6,
+ hasIcon: true,
+ content: (
+
+ [ocr] ✔ c
+ ode
+ _
+ s
+ ear
+ ch
+ (
+ 8
+ ms)
+
+ ),
+ },
+ { num: 7, hasIcon: false, content: [ocr] Plan completed for internal/auth/login.go },
+ { num: 8, hasIcon: false, content: ─── internal/auth/login.go:42-55 ─── },
+ { num: 9, hasIcon: false, content: Consider using bcrypt cost factor ≥ 12 for password hashing. },
+ {
+ num: 10,
+ hasIcon: false,
+ content: (
+
+ [o
+ cr] Su
+ m
+ mar
+ y: 5 file(s), 3 comment(s), ~8421 tokens, 12.5s
+
+ ),
+ },
+ { num: 11, hasIcon: false, content: ｜ },
];
-const TerminalLine: React.FC<{ line: typeof terminalLines[0]; visible: boolean }> = ({ line, visible }) => {
- const colorMap: Record = {
- command: 'text-brand-400 font-semibold',
- info: 'text-slate-400',
- tool: 'text-cyan-400',
- 'tool-ok': 'text-green-400',
- separator: 'text-slate-600',
- header: 'text-slate-500 font-mono',
- comment: 'text-slate-300 text-xs',
- result: 'text-brand-400 font-medium'
- };
-
- return (
- ([]);
const { t } = useTranslation();
-
- useEffect(() => {
- const timers: ReturnType[] = [];
- terminalLines.forEach((line, index) => {
- const timer = setTimeout(() => {
- setVisibleLines((prev) => [...prev, index]);
- }, line.delay + 500);
- timers.push(timer);
- });
- return () => { timers.forEach((timer) => clearTimeout(timer)); };
- }, []);
-
- const pills = [
- { icon: 'fa-check-circle', color: 'text-brand-400', label: t('hero.pill1') },
- { icon: 'fa-shield-halved', color: 'text-cyan-400', label: t('hero.pill2') },
- { icon: 'fa-bolt', color: 'text-yellow-400', label: t('hero.pill3') }
- ];
+ const { isMobile, isTablet } = useResponsive();
return (
-
- {/* Layered glow orbs */}
-
-
-
+
+ {/* Shader Background */}
+
- {/* Section pill badge */}
-
-
-
- {t('features.sectionBadge')}
-
- - {t('features.title')} -
-- {t('features.subtitle')} -
-
- {features.map((feature) => (
-
diff --git a/pages/src/components/Footer.tsx b/pages/src/components/Footer.tsx
new file mode 100644
index 0000000..48fb09c
--- /dev/null
+++ b/pages/src/components/Footer.tsx
@@ -0,0 +1,125 @@
+import React, { useState, useRef, useEffect } from 'react';
+import githubIcon from '../assets/icons/icon-github.svg';
+import langIcon from '../assets/icons/icon-language.svg';
+import { useTranslation } from '../i18n/context';
+import { useResponsive } from '../hooks/useResponsive';
+import type { Language } from '../i18n/types';
+
+const LANG_OPTIONS: { value: Language; label: string }[] = [
+ { value: 'en', label: 'English' },
+ { value: 'zh', label: '中文' },
+ { value: 'ja', label: '日本語' },
+];
+
+const Footer: React.FC = () => {
+ const { language, setLanguage, t } = useTranslation();
+ const { isMobile } = useResponsive();
+ const [open, setOpen] = useState(false);
+ const ref = useRef
-
-
-
- {feature.title}
-{feature.description}
+ {/* Grid */} +
+ {features.map((feat, i) => {
+ const cols = isMobile ? 1 : isTablet ? 2 : 3;
+ const isLastCol = (i % cols) === cols - 1;
+ const isLastRow = i >= features.length - (features.length % cols || cols);
+ return (
+
+ );
+ })}
+
+
+ 
- ))}
-
+
+ + {feat.title} +
++ {feat.desc} +
+
- {line.text}
-
- );
-};
-
const HeroSection: React.FC = () => {
- const [visibleLines, setVisibleLines] = useState
- {/* Left content */}
-
-
-
- {t('hero.title')}
-
-
- {t('hero.title')}
-
- {t('hero.titleHighlight')}
-
- - {t('hero.description')} -
+ {/* Content */} +
+ {/* Title */}
+
+
+ {t('hero.title').split('\n').map((line, i, arr) => (
+
+
+
+ {/* Buttons */}
+
+
+ {/* Terminal */}
+
+ {t('hero.title').split('\n').map((line, i, arr) => (
+
+ {line}
+ {i < arr.length - 1 &&
}
+
+ ))}
+
+ } +
+ {t('hero.description')} +
+
+ {/* Terminal header */}
+ (0);
+ const startTimeRef = useRef(0);
+
+ useEffect(() => {
+ if (!isActive) return;
+ startTimeRef.current = performance.now();
+
+ const animate = (now: number) => {
+ const elapsed = now - startTimeRef.current;
+ const progress = Math.min(elapsed / duration, 1);
+ // easeOutExpo
+ const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+ setCurrent(Math.round(eased * target));
+ if (progress < 1) {
+ rafRef.current = requestAnimationFrame(animate);
+ }
+ };
+
+ rafRef.current = requestAnimationFrame(animate);
+ return () => cancelAnimationFrame(rafRef.current);
+ }, [isActive, target, duration]);
+
+ return current;
+}
+
+const CountUpValue: React.FC<{ value: string; isVisible: boolean }> = ({ value, isVisible }) => {
+ const { prefix, number, suffix } = parseStatValue(value);
+ const count = useCountUp(number, 2000, isVisible);
+
+ if (number === 0) {
+ // 无法解析数字，直接显示原文
+ return <>{value};
+ }
+
+ return <>{prefix}{isVisible ? count : 0}{suffix};
+};
const HighlightsSection: React.FC = () => {
const { t } = useTranslation();
+ const { isMobile, isTablet } = useResponsive();
const sectionRef = useRef(null);
- const [visible, setVisible] = useState(false);
+ const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
- setVisible(true);
- observer.disconnect();
+ setIsVisible(true);
+ observer.unobserve(entry.target);
}
},
{ threshold: 0.3 }
);
- if (sectionRef.current) observer.observe(sectionRef.current);
+ if (sectionRef.current) {
+ observer.observe(sectionRef.current);
+ }
return () => observer.disconnect();
}, []);
const stats = [
- {
- label: t('highlights.stat1Label'),
- value: t('highlights.stat1Value'),
- caption: t('highlights.stat1Caption'),
- delay: 0,
- },
- {
- label: t('highlights.stat2Label'),
- value: t('highlights.stat2Value'),
- caption: t('highlights.stat2Caption'),
- delay: 100,
- },
- {
- label: t('highlights.stat3Label'),
- value: t('highlights.stat3Value'),
- caption: t('highlights.stat3Caption'),
- delay: 200,
- },
- {
- label: t('highlights.stat4Label'),
- value: t('highlights.stat4Value'),
- caption: t('highlights.stat4Caption'),
- delay: 300,
- },
+ { value: t('highlights.stat1Value'), label: t('highlights.stat1Label'), caption: t('highlights.stat1Caption') },
+ { value: t('highlights.stat2Value'), label: t('highlights.stat2Label'), caption: t('highlights.stat2Caption') },
+ { value: t('highlights.stat3Value'), label: t('highlights.stat3Label'), caption: t('highlights.stat3Caption') },
+ { value: t('highlights.stat4Value'), label: t('highlights.stat4Label'), caption: t('highlights.stat4Caption') },
+ { value: t('highlights.stat5Value'), label: t('highlights.stat5Label'), caption: t('highlights.stat5Caption') },
];
return (
-
-
-
-
+
+ {t('hero.terminal')}
+
-
- {/* Feature pills */}
-
- {pills.map((item) => (
-
-
- {/* Scroll indicator */}
-
-
- {item.label}
+ {/* Terminal body */}
+
-
- {/* Right terminal */}
-
+ {terminalLines.map((line) => (
+
-
- {/* CTA buttons */}
-
+
))}
+
+ {line.num}
+
+ {line.hasIcon && 
}
+
+
+ {line.content}
+
-
-
-
-
- {/* Social proof */}
-
-
-
- {t('hero.users')}
-
-
-
-
- {t('hero.openSource')}
-
-
- {/* Outer glow frame */}
-
-
-
-
- {/* Scan line effect */}
-
-
-
-
- {/* F1 badge */}
-
-
-
-
- {t('hero.terminal')}
-
-
- {terminalLines.map((line, index) => (
-
-
-
- {/* Decorative accent line */}
-
-
-
- F1: {t('highlights.stat4Value')}
- {t('hero.badgeLabel')}
-
- Scroll
-
);
diff --git a/pages/src/components/HighlightsSection.tsx b/pages/src/components/HighlightsSection.tsx
index 1e48f07..42c98ba 100644
--- a/pages/src/components/HighlightsSection.tsx
+++ b/pages/src/components/HighlightsSection.tsx
@@ -1,85 +1,162 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
import { useTranslation } from '../i18n';
+import { useResponsive } from '../hooks/useResponsive';
+
+// 从字符串中解析数字和前后缀
+function parseStatValue(value: string): { prefix: string; number: number; suffix: string } {
+ // 匹配 "> 30%" 等格式
+ const match = value.match(/^([^\d]*?)(\d+)(.*)$/);
+ if (match) {
+ return { prefix: match[1], number: parseInt(match[2], 10), suffix: match[3] };
+ }
+ return { prefix: '', number: 0, suffix: value };
+}
+
+function useCountUp(target: number, duration: number = 1200, isActive: boolean) {
+ const [current, setCurrent] = useState(0);
+ const rafRef = useRef
-
-
- = ({ children }) => {
return (
-
- {stats.map((stat, i) => (
-
-
-
-
- {stat.label}
-
-
-
- ))}
+
+
);
diff --git a/pages/src/components/LandingPage.tsx b/pages/src/components/LandingPage.tsx
index 573ae7a..a011807 100644
--- a/pages/src/components/LandingPage.tsx
+++ b/pages/src/components/LandingPage.tsx
@@ -1,36 +1,31 @@
-import React, { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
import Navbar from './Navbar';
-import HeroSection from './HeroSection';
-import HighlightsSection from './HighlightsSection';
-import WhySection from './WhySection';
-import FeaturesSection from './FeaturesSection';
-import BenchmarkSection from './BenchmarkSection';
-import QuickStartSection from './QuickStartSection';
-const LandingPage: React.FC = () => {
- const location = useLocation();
-
- useEffect(() => {
- const scrollTo = (location.state as { scrollTo?: string })?.scrollTo;
- if (scrollTo) {
- const el = document.getElementById(scrollTo);
- if (el) {
- setTimeout(() => el.scrollIntoView({ behavior: 'smooth' }), 100);
- }
- window.history.replaceState({}, '');
- }
- }, [location.state]);
+interface LandingPageProps {
+ children: React.ReactNode;
+}
+const LandingPage: React.FC
+ {stats.map((stat, i) => (
+
+ ))}
+
+
-
+
+ {stat.label} +
++ {stat.caption} +
- (null);
useEffect(() => {
- const handleScroll = () => setIsScrolled(window.scrollY > 20);
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
+ const handler = (e: MouseEvent) => {
+ if (langRef.current && !langRef.current.contains(e.target as Node)) setLangOpen(false);
+ };
+ document.addEventListener('mousedown', handler);
+ return () => document.removeEventListener('mousedown', handler);
}, []);
- const scrollToSection = (sectionId: string) => {
- const element = document.getElementById(sectionId);
- if (element) {
- element.scrollIntoView({ behavior: 'smooth' });
- }
- setIsMobileMenuOpen(false);
- };
-
- const toggleLanguage = () => {
- setLanguage(language === 'en' ? 'zh' : 'en');
- };
+ const currentPath = location.pathname;
return (
+
);
};
diff --git a/pages/src/components/Navbar.tsx b/pages/src/components/Navbar.tsx
index 57cfc86..4488d75 100644
--- a/pages/src/components/Navbar.tsx
+++ b/pages/src/components/Navbar.tsx
@@ -1,146 +1,216 @@
-import React, { useState, useEffect } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import React, { useState, useRef, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from '../i18n';
-import logoSvg from '../../logo.svg';
+import { useResponsive } from '../hooks/useResponsive';
+import socialIcon from '../assets/icons/icon-github.svg';
+import brandIcon from '../assets/images/brandicon.svg';
+
+import type { Language } from '../i18n/types';
+
+const LANG_OPTIONS: { value: Language; label: string }[] = [
+ { value: 'en', label: 'English' },
+ { value: 'zh', label: '中文' },
+ { value: 'ja', label: '日本語' },
+];
+
+const navTabs = [
+ { path: '/', labelKey: 'navbar.features' },
+ { path: '/benchmark', labelKey: 'navbar.benchmark' },
+ { path: '/quickstart', labelKey: 'navbar.quickstart' },
+ { path: '/docs', labelKey: 'navbar.docs' },
+];
const Navbar: React.FC = () => {
- const [isScrolled, setIsScrolled] = useState(false);
- const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const { language, setLanguage, t } = useTranslation();
+ const { isMobile } = useResponsive();
const location = useLocation();
const navigate = useNavigate();
- const isDocsPage = location.pathname === '/docs';
- const { t, language, setLanguage } = useTranslation();
-
- const navItems = [
- { label: t('navbar.features'), id: 'features' },
- { label: t('navbar.benchmark'), id: 'benchmark' },
- { label: t('navbar.quickstart'), id: 'quickstart' }
- ];
-
- const navigateToSection = (sectionId: string) => {
- navigate('/', { state: { scrollTo: sectionId } });
- setIsMobileMenuOpen(false);
- };
+ const [langOpen, setLangOpen] = useState(false);
+ const langRef = useRef
+