Website design assessment

типо мне кажется вообще неудачно скомпонована страница когда заходишь глаза разбегаются нихуя не понятно почему кнопки какие то справа

морфий, Это спэрма деда мороза подкинул опдарочек

RX4D, По пробуй браузер другой и чекни пожалуйста

OPTIMISED, щаща

OPTIMISED, ms edge та же хуйня

OPTIMISED, ес

scarly, Починил

OPTIMISED, Всё как-то светиться через чур, не? Имхо чисто, везде градиентовые цвета

Марков, если так

OPTIMISED, Я бы их просто не одним фоном заебашил, а чуть потемнее/посветлее, чем сам бэкграунд боди

Sakura, покажи полный скрин как выглядит страница

OPTIMISED, а шо сам не глянешь

Sakura, ну по скринам у тебя блоки смещены у меня нет

waltdiss, Ладно, видимо он не хочет https://ui.shadcn.com/

codeviolence, ну я понял +-, ладно

codeviolence

Если коротко: shadcn/ui — это набор качественных UI-компонентов на React, собранных из Radix UI + Tailwind CSS. Это не библиотека с бандлом, а CLI, который копирует код компонентов прямо в твой проект. В итоге:
- у тебя нет лишних зависимостей во время рантайма;
- компоненты доступны и консистентны (состояния, фокус, клавиатура);
- легко кастомизировать дизайн под себя, потому что код у тебя.

Почему это убирает “ИИ-шный” вайб ленда:
- единая типографика/отступы/цветовые токены из коробки;
- продуманные состояния наведения/фокуса/дизейбла;
- готовые паттерны: Navbar, Card-сетки, Dialog/Sheet, Dropdown, Tabs, Table, Command Palette, Toasts и др.

Как поставить (Next.js):

Инициализируй проект

npx create-next-app@latest myapp
cd myapp

Code

npx create-next-app@latest myapp

cd myapp

Установи и инициализируй shadcn/ui

npx shadcn-ui@latest init

Code

npx shadcn-ui@latest init

Добавляй нужные компоненты

npx shadcn-ui@latest add button card input label form dialog dropdown-menu sheet navigation-menu badge toast

Code

npx shadcn-ui@latest add button card input label form dialog dropdown-menu sheet navigation-menu badge toast

Как поставить (Vite + React):

Проект + Tailwind

npm create vite@latest myapp -- --template react-ts
cd myapp
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Code

npm create vite@latest myapp -- --template react-ts

cd myapp

npm i -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Добавь пути в tailwind.config.js (src/**/*.{ts,tsx} и т.п.).
Дальше так же:

npx shadcn-ui@latest init
npx shadcn-ui@latest add button card input ...

Code

npx shadcn-ui@latest init

npx shadcn-ui@latest add button card input ...

Пример: хедер с CTA на лендинг

import { Button } from "@/components/ui/button"

export default function Hero() {
return (
<section className="container mx-auto py-16 text-center">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
CS2 Statrix — аналитика матчей и игроков
</h1>
<p className="mt-4 text-muted-foreground">
Глубокие метрики, быстрый импорт демо и удобные отчёты.
</p>
<div className="mt-6 flex gap-3 justify-center">
<Button size="lg">Попробовать бесплатно</Button>
<Button variant="outline" size="lg">Смотреть демо</Button>
</div>
</section>
)
}

Code

import { Button } from "@/components/ui/button"



export default function Hero() {

  return (

    <section className="container mx-auto py-16 text-center">

      <h1 className="text-4xl md:text-5xl font-bold tracking-tight">

        CS2 Statrix — аналитика матчей и игроков

      </h1>

      <p className="mt-4 text-muted-foreground">

        Глубокие метрики, быстрый импорт демо и удобные отчёты.

      </p>

      <div className="mt-6 flex gap-3 justify-center">

        <Button size="lg">Попробовать бесплатно</Button>

        <Button variant="outline" size="lg">Смотреть демо</Button>

      </div>

    </section>

  )

}

Сетка фич на Card'ах

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart3, ShieldCheck, Zap } from "lucide-react"

const features = [
{ icon: BarChart3, title: "Глубокая статистика", text: "Перфоманс по картам, оружию, раундам." },
{ icon: Zap, title: "Быстрый импорт", text: "Загрузите демо и получите отчёт за минуты." },
{ icon: ShieldCheck, title: "Честные метрики", text: "Нормализация и защита от накруток." },
]

export function Features() {
return (
<section className="container mx-auto py-12">
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{features.map((f) => (
<Card key={f.title}>
<CardHeader className="flex flex-row items-center gap-3">
<f.icon className="h-5 w-5 text-primary" />
<CardTitle>{f.title}</CardTitle>
</CardHeader>
<CardContent className="text-muted-foreground">
{f.text}
</CardContent>
</Card>
))}
</div>
</section>
)
}

Code

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { BarChart3, ShieldCheck, Zap } from "lucide-react"



const features = [

  { icon: BarChart3, title: "Глубокая статистика", text: "Перфоманс по картам, оружию, раундам." },

  { icon: Zap, title: "Быстрый импорт", text: "Загрузите демо и получите отчёт за минуты." },

  { icon: ShieldCheck, title: "Честные метрики", text: "Нормализация и защита от накруток." },

]



export function Features() {

  return (

    <section className="container mx-auto py-12">

      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

        {features.map((f) => (

          <Card key={f.title}>

            <CardHeader className="flex flex-row items-center gap-3">

              <f.icon className="h-5 w-5 text-primary" />

              <CardTitle>{f.title}</CardTitle>

            </CardHeader>

            <CardContent className="text-muted-foreground">

              {f.text}

            </CardContent>

          </Card>

        ))}

      </div>

    </section>

  )

}

Тёмная тема в один клик (с next-themes)

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from "lucide-react"

export function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<Button variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
<Sun className="h-5 w-5 rotate-0 scale-100 dark:-rotate-90 dark:scale-0 transition-all" />
<Moon className="h-5 w-5 absolute r

Code

import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"

import { Moon, Sun } from "lucide-react"



export function ThemeToggle() {

  const { theme, setTheme } = useTheme()

  return (

    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>

      <Sun className="h-5 w-5 rotate-0 scale-100 dark:-rotate-90 dark:scale-0 transition-all" />

      <Moon className="h-5 w-5 absolute r