Spaces:
Running
Running
File size: 2,745 Bytes
4755edd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { useState } from "react";
import { BrandMark } from "./BrandMark";
import { HfIcon } from "./HfIcon";
import { NeuroBackground } from "./NeuroBackground";
import { MODEL_CONFIG, type ModelOption } from "../model-config";
interface LandingPageProps {
onStart: (modelId: string) => void;
}
export function LandingPage({ onStart }: LandingPageProps) {
const [bgReady, setBgReady] = useState(false);
return (
<div className="relative w-full min-h-screen p-7 bg-bg text-left max-[900px]:p-[22px]">
<NeuroBackground onReady={() => setBgReady(true)} />
<div
className={`relative z-[1] w-[min(1120px,100%)] min-h-[calc(100vh-56px)] mx-auto flex flex-col items-center justify-center gap-8 max-[900px]:min-h-[calc(100vh-44px)] transition-opacity duration-700 ease-out ${
bgReady ? "opacity-100" : "opacity-0"
}`}
>
<div className="flex flex-col items-center text-center">
<BrandMark />
<h1 className="mt-6 text-[clamp(3.4rem,9vw,7.8rem)] font-bold tracking-[-0.06em] leading-[0.95] max-sm:tracking-[-0.05em] drop-shadow-[0_2px_12px_rgba(0,0,0,0.7)]">
LFM2-MoE
</h1>
<p className="shimmer mt-5 text-text-soft text-[clamp(1.05rem,2.6vw,1.42rem)] leading-[1.5] drop-shadow-[0_1px_8px_rgba(0,0,0,0.6)]">
WebGPU-accelerated Mixture of Experts.
<br />
Built with{" "}
<HfIcon className="inline-block w-[1.6rem] h-[1.6rem] mr-[0.25rem] ml-[0.35rem] mb-px align-text-bottom" />
<span className="inline-block">Transformers.js</span>
</p>
</div>
<div className="flex flex-col items-center gap-3.5">
<span className="inline-block text-accent font-mono text-[0.73rem] tracking-[0.22em] uppercase">
Choose model
</span>
<div className="flex gap-3 max-sm:flex-col">
{MODEL_CONFIG.models.map((model: ModelOption) => (
<button
key={model.modelId}
type="button"
className="flex flex-col gap-1 py-3.5 px-[22px] border border-line rounded-[20px] bg-[rgba(255,255,255,0.05)] backdrop-blur-[16px] text-center transition-[transform,border-color,background-color] duration-[180ms] ease-[ease] hover:-translate-y-0.5 hover:border-[rgba(157,224,255,0.42)] hover:bg-[rgba(157,224,255,0.14)]"
onClick={() => onStart(model.modelId)}
>
<strong className="text-[0.95rem] font-bold">{model.label}</strong>
<span className="font-mono text-[0.75rem] tracking-[0.06em]">{model.sublabel}</span>
</button>
))}
</div>
</div>
</div>
</div>
);
}
|