admin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Termius light mode colors, remove social proof/features/CTA sections
Docker Build / Build and Push Docker Image (push) Successful in 4m27s
Details

Browse Source
This commit is contained in:
admin
2026-06-14 18:53:29 +08:00
parent 8eb31a7c82
commit 43f9869246
2 changed files with 33 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/home/components/sections/hero.tsx
Vendored
+3 -96
View File
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact admin@modelstoken.com
*/
import { Link } from '@tanstack/react-router'
import { ArrowRight, Zap, Shield, Layers, BarChart3, Key, GitBranch, Users } from 'lucide-react'
import { ArrowRight } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { useStatus } from '@/hooks/use-status'
import { Button } from '@/components/ui/button'
@@ -27,13 +27,6 @@ interface HeroProps {
isAuthenticated?: boolean
}
const features = [
{ icon: Zap, title: 'Multi-model Routing', desc: 'Automatic failover and load balancing across providers' },
{ icon: Key, title: 'Key Management', desc: 'Centralized API key lifecycle with usage tracking' },
{ icon: Shield, title: 'Access Control', desc: 'Fine-grained permissions, rate limits, and token policies' },
{ icon: BarChart3, title: 'Real-time Monitoring', desc: 'Live dashboards with latency and cost analytics' },
]
const providers = [
'OpenAI', 'Claude', 'Gemini', 'Mistral', 'DeepSeek',
'Llama', 'Qwen', 'Cohere', 'Groq', 'Perplexity',
@@ -65,7 +58,7 @@ export function Hero(props: HeroProps) {
className='pointer-events-none absolute inset-0'
style={{
background:
'radial-gradient(ellipse 60% 50% at 50% -10%, oklch(0.65 0.17 210 / 0.06) 0%, transparent 70%)',
'radial-gradient(ellipse 60% 50% at 50% -10%, oklch(0.55 0.15 240 / 0.06) 0%, transparent 70%)',
}}
/>
@@ -111,28 +104,11 @@ export function Hero(props: HeroProps) {
</>
)}
</div>
{/* Social proof */}
<div className='mt-6 flex items-center gap-2 justify-center lg:justify-start'>
<div className='flex -space-x-2'>
{Array.from({ length: 4 }).map((_, i) => (
<div
key={i}
className='flex size-7 items-center justify-center rounded-full border-2 border-background bg-muted text-[10px] font-bold text-muted-foreground'
>
{String.fromCharCode(65 + i)}
</div>
))}
</div>
<span className='text-xs text-muted-foreground'>
<span className='font-semibold text-foreground'>1K+</span> {t('developers joined')}
</span>
</div>
</div>
{/* Right: terminal demo */}
<div className='w-full max-w-xl flex-1 lg:max-w-none'>
<div className='overflow-hidden rounded-lg border border-border bg-card shadow-sm dark:shadow-[0_0_60px_-16px_oklch(0.65_0.17_210/0.12)]'>
<div className='overflow-hidden rounded-lg border border-border bg-card shadow-sm dark:shadow-[0_0_60px_-16px_oklch(0.78_0.15_210/0.12)]'>
{/* Title bar */}
<div className='flex items-center gap-2 border-b border-border px-4 py-2'>
<div className='flex gap-1.5'>
@@ -208,75 +184,6 @@ export function Hero(props: HeroProps) {
<div className='pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-background to-transparent' />
</div>
</div>
{/* ── Features (2x2 grid like company) ── */}
<div className='pb-20'>
<div className='mb-10 text-center'>
<h2 className='text-2xl font-bold tracking-tight text-foreground'>
{t('Features')}
</h2>
<p className='mt-2 text-sm text-muted-foreground'>
{t('Everything you need to manage and route LLM API traffic')}
</p>
</div>
<div className='grid gap-4 md:grid-cols-2'>
{features.map((feature) => (
<div
key={feature.title}
className='group relative overflow-hidden rounded-xl border border-border bg-card p-6 transition-colors duration-200 hover:border-primary/30'
>
{/* Glow effect on hover */}
<div className='pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100' style={{ background: 'radial-gradient(200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), oklch(0.65 0.17 210 / 0.06), transparent 60%)' }} />
<div className='relative'>
<div className='mb-4 flex size-10 items-center justify-center rounded-lg border border-border bg-background'>
<feature.icon className='size-5 text-primary' />
</div>
<h3 className='text-base font-semibold text-foreground'>
{t(feature.title)}
</h3>
<p className='mt-2 text-sm leading-relaxed text-muted-foreground'>
{t(feature.desc)}
</p>
</div>
</div>
))}
</div>
</div>
{/* ── Setup / CTA section ── */}
<div className='pb-24'>
<div className='relative flex flex-col items-center justify-center overflow-hidden rounded-xl border border-border bg-card py-16 text-center'>
<h2 className='text-2xl font-bold tracking-tight text-foreground'>
{t('Ready to get started?')}
</h2>
<p className='mt-2 text-sm text-muted-foreground'>
{t('Just 3 minutes to start using')}
</p>
<div className='mt-6 flex items-center gap-3'>
{props.isAuthenticated ? (
<Button
className='group h-10 rounded-lg px-6 text-sm font-semibold'
render={<Link to='/dashboard' />}
>
{t('Dashboard')}
<ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
</Button>
) : (
<Button
className='group h-10 rounded-lg px-6 text-sm font-semibold'
render={<Link to='/sign-up' />}
>
{t('Get Started')}
<ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
</Button>
)}
</div>
{/* Decorative circles */}
<div aria-hidden className='pointer-events-none absolute -top-20 -right-20 size-60 rounded-full bg-primary/5 blur-3xl' />
<div aria-hidden className='pointer-events-none absolute -bottom-20 -left-20 size-60 rounded-full bg-primary/5 blur-3xl' />
</div>
</div>
</div>
{/* Marquee keyframes */}
web/default/src/styles/theme.css
Vendored
+30 -30
View File
@@ -100,49 +100,49 @@ For commercial licensing, please contact admin@modelstoken.com
* in theme-presets.css. Default mirrors `--font-sans` so behavior is
* identical when no font preference is set. */
--font-body: var(--font-sans);
/* Termius light: deep primary for buttons, cyan for accents/links */
--background: oklch(0.985 0.002 260);
--foreground: oklch(0.145 0.015 260);
/* Termius-inspired light mode: pure white bg, deep navy text, teal accent */
--background: oklch(0.995 0 0);
--foreground: oklch(0.13 0.028 270);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0.015 260);
--card-foreground: oklch(0.13 0.028 270);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0.015 260);
--primary: oklch(0.16 0.02 260);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.955 0.005 260);
--secondary-foreground: oklch(0.205 0.015 260);
--muted: oklch(0.955 0.005 260);
--muted-foreground: oklch(0.48 0.012 260);
--accent: oklch(0.945 0.01 260);
--accent-foreground: oklch(0.145 0.015 260);
--popover-foreground: oklch(0.13 0.028 270);
--primary: oklch(0.55 0.15 240);
--primary-foreground: oklch(0.995 0 0);
--secondary: oklch(0.96 0.005 260);
--secondary-foreground: oklch(0.18 0.02 270);
--muted: oklch(0.96 0.005 260);
--muted-foreground: oklch(0.45 0.015 260);
--accent: oklch(0.95 0.008 260);
--accent-foreground: oklch(0.13 0.028 270);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--destructive-foreground: oklch(0.995 0 0);
--success: oklch(0.596 0.145 163.225);
--success-foreground: oklch(0.985 0 0);
--success-foreground: oklch(0.995 0 0);
--warning: oklch(0.681 0.162 75.834);
--warning-foreground: oklch(0.145 0.015 260);
--warning-foreground: oklch(0.13 0.028 270);
--info: oklch(0.588 0.158 241.966);
--info-foreground: oklch(0.985 0 0);
--info-foreground: oklch(0.995 0 0);
--neutral: oklch(0.55 0.01 260);
--neutral-foreground: oklch(0.985 0 0);
--border: oklch(0.91 0.005 260);
--input: oklch(0.91 0.005 260);
--ring: oklch(0.65 0.17 210);
--chart-1: oklch(0.65 0.17 210);
--neutral-foreground: oklch(0.995 0 0);
--border: oklch(0.92 0.003 260);
--input: oklch(0.92 0.003 260);
--ring: oklch(0.55 0.15 240);
--chart-1: oklch(0.55 0.15 240);
--chart-2: oklch(0.596 0.145 163.225);
--chart-3: oklch(0.681 0.162 75.834);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.975 0.003 260);
--sidebar-foreground: oklch(0.145 0.015 260);
--sidebar-primary: oklch(0.65 0.17 210);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-foreground: oklch(0.13 0.028 270);
--sidebar-primary: oklch(0.55 0.15 240);
--sidebar-primary-foreground: oklch(0.995 0 0);
--sidebar-accent: oklch(0.94 0.008 260);
--sidebar-accent-foreground: oklch(0.145 0.015 260);
--sidebar-border: oklch(0.91 0.005 260);
--sidebar-ring: oklch(0.65 0.17 210);
--skeleton-base: oklch(0.955 0.005 260);
--skeleton-highlight: oklch(0.985 0.002 260);
--sidebar-accent-foreground: oklch(0.13 0.028 270);
--sidebar-border: oklch(0.92 0.003 260);
--sidebar-ring: oklch(0.55 0.15 240);
--skeleton-base: oklch(0.96 0.005 260);
--skeleton-highlight: oklch(0.995 0 0);
}
.dark {