85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { Battery, Zap, Truck, Sun } from 'lucide-react'
|
|
import SearchBar from '../components/SearchBar'
|
|
import CategoryCard from '../components/CategoryCard'
|
|
import { useState } from 'react'
|
|
|
|
export default function Home() {
|
|
const [search, setSearch] = useState('')
|
|
|
|
return (
|
|
<div>
|
|
{/* Hero */}
|
|
<section className="max-w-5xl mx-auto px-6 pt-20 pb-16 text-center">
|
|
<div className="inline-block px-4 py-1 rounded-full bg-sky-100 dark:bg-sky-950 text-sky-600 dark:text-sky-400 text-sm font-medium mb-4">
|
|
2026 • Industrial Tech
|
|
</div>
|
|
<h1 className="text-6xl md:text-7xl font-semibold tracking-tighter leading-none mb-6">
|
|
Промышленные<br />аккумуляторы<br />в одном месте
|
|
</h1>
|
|
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-md mx-auto mb-10">
|
|
Сравнивайте, выбирайте и заказывайте LiFePO4, AGM, GEL и свинцово-кислотные батареи для любой отрасли.
|
|
</p>
|
|
|
|
<div className="max-w-md mx-auto">
|
|
<SearchBar value={search} onChange={setSearch} />
|
|
</div>
|
|
<div className="mt-4">
|
|
<Link to="/catalog" className="text-sm text-sky-500 hover:underline">Или перейдите сразу в каталог →</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Categories */}
|
|
<section className="max-w-6xl mx-auto px-6 pb-20">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<CategoryCard
|
|
title="Солнечные станции"
|
|
count={124}
|
|
icon={<Sun className="w-6 h-6" />}
|
|
to="/catalog?app=Solar"
|
|
/>
|
|
<CategoryCard
|
|
title="ИБП и резерв"
|
|
count={89}
|
|
icon={<Zap className="w-6 h-6" />}
|
|
to="/catalog?app=UPS"
|
|
/>
|
|
<CategoryCard
|
|
title="Тяговые (погрузчики)"
|
|
count={67}
|
|
icon={<Truck className="w-6 h-6" />}
|
|
to="/catalog?app=Forklift"
|
|
/>
|
|
<CategoryCard
|
|
title="Морские и RV"
|
|
count={41}
|
|
icon={<Battery className="w-6 h-6" />}
|
|
to="/catalog?app=Marine"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats */}
|
|
<section className="border-t border-gray-200 dark:border-gray-800 py-12">
|
|
<div className="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-y-8 text-center">
|
|
<div>
|
|
<div className="text-4xl font-semibold tabular-nums">480</div>
|
|
<div className="text-sm text-gray-500 mt-1">моделей в каталоге</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-semibold tabular-nums">38</div>
|
|
<div className="text-sm text-gray-500 mt-1">поставщиков</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-semibold tabular-nums">12 400</div>
|
|
<div className="text-sm text-gray-500 mt-1">заказов в 2025</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-semibold tabular-nums">4.8</div>
|
|
<div className="text-sm text-gray-500 mt-1">средняя оценка</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
} |