commit 2d5f88772ae7c0d49c4c1ee9397d61c7a164bbae Author: Dhaverd Date: Thu Sep 3 04:57:35 2026 +0200 first commit diff --git a/index.html b/index.html new file mode 100755 index 0000000..902c253 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + АвтоДетали Про — Запчасти и жидкости для автомобилей + + +
+ + + diff --git a/package.json b/package.json new file mode 100755 index 0000000..3d5f596 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "react-vite-tailwind", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "clsx": "2.1.1", + "react": "19.2.3", + "react-dom": "19.2.3", + "tailwind-merge": "3.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "4.1.17", + "@types/node": "^22.0.0", + "@types/react": "19.2.7", + "@types/react-dom": "19.2.3", + "@vitejs/plugin-react": "5.1.1", + "tailwindcss": "4.1.17", + "typescript": "5.9.3", + "vite": "7.2.4", + "vite-plugin-singlefile": "2.3.0" + } +} diff --git a/public/images/cat-brakes.jpg b/public/images/cat-brakes.jpg new file mode 100755 index 0000000..3ceb010 Binary files /dev/null and b/public/images/cat-brakes.jpg differ diff --git a/public/images/cat-engine.jpg b/public/images/cat-engine.jpg new file mode 100755 index 0000000..3012463 Binary files /dev/null and b/public/images/cat-engine.jpg differ diff --git a/public/images/cat-filters.jpg b/public/images/cat-filters.jpg new file mode 100755 index 0000000..a2efffe Binary files /dev/null and b/public/images/cat-filters.jpg differ diff --git a/public/images/cat-oil.jpg b/public/images/cat-oil.jpg new file mode 100755 index 0000000..eee8a99 Binary files /dev/null and b/public/images/cat-oil.jpg differ diff --git a/public/images/cat-suspension.jpg b/public/images/cat-suspension.jpg new file mode 100755 index 0000000..ce96168 Binary files /dev/null and b/public/images/cat-suspension.jpg differ diff --git a/public/images/hero-bg.jpg b/public/images/hero-bg.jpg new file mode 100755 index 0000000..3c4e872 Binary files /dev/null and b/public/images/hero-bg.jpg differ diff --git a/src/App.tsx b/src/App.tsx new file mode 100755 index 0000000..58060a9 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,733 @@ +import { useState } from "react"; + +const categories = [ + { + id: 1, + name: "Двигатель", + image: "/images/cat-engine.jpg", + count: 1842, + icon: "🔧", + }, + { + id: 2, + name: "Масла и жидкости", + image: "/images/cat-oil.jpg", + count: 634, + icon: "🛢️", + }, + { + id: 3, + name: "Тормозная система", + image: "/images/cat-brakes.jpg", + count: 921, + icon: "⚙️", + }, + { + id: 4, + name: "Фильтры", + image: "/images/cat-filters.jpg", + count: 488, + icon: "🔩", + }, + { + id: 5, + name: "Подвеска и рулевое", + image: "/images/cat-suspension.jpg", + count: 1103, + icon: "🚗", + }, + { + id: 6, + name: "Электрика", + image: "/images/cat-engine.jpg", + count: 765, + icon: "⚡", + }, +]; + +const products = [ + { + id: 1, + name: "Масло моторное Castrol EDGE 5W-40", + category: "Масла и жидкости", + price: 2890, + oldPrice: 3400, + rating: 4.8, + reviews: 214, + badge: "Хит", + badgeColor: "bg-red-500", + image: "/images/cat-oil.jpg", + brand: "Castrol", + }, + { + id: 2, + name: "Тормозные колодки Brembo P 85 020", + category: "Тормозная система", + price: 1650, + oldPrice: null, + rating: 4.9, + reviews: 87, + badge: "Новинка", + badgeColor: "bg-green-500", + image: "/images/cat-brakes.jpg", + brand: "Brembo", + }, + { + id: 3, + name: "Воздушный фильтр Mann C 25 114", + category: "Фильтры", + price: 490, + oldPrice: 620, + rating: 4.6, + reviews: 132, + badge: "Скидка", + badgeColor: "bg-orange-500", + image: "/images/cat-filters.jpg", + brand: "Mann", + }, + { + id: 4, + name: "Амортизатор передний KYB 335804", + category: "Подвеска и рулевое", + price: 3200, + oldPrice: null, + rating: 4.7, + reviews: 56, + badge: null, + badgeColor: "", + image: "/images/cat-suspension.jpg", + brand: "KYB", + }, + { + id: 5, + name: "Антифриз Sintec Lux -40°C (зелёный)", + category: "Масла и жидкости", + price: 380, + oldPrice: 450, + rating: 4.5, + reviews: 301, + badge: "Хит", + badgeColor: "bg-red-500", + image: "/images/cat-oil.jpg", + brand: "Sintec", + }, + { + id: 6, + name: "Ремень ГРМ Gates K015591XS", + category: "Двигатель", + price: 2100, + oldPrice: null, + rating: 4.9, + reviews: 44, + badge: null, + badgeColor: "", + image: "/images/cat-engine.jpg", + brand: "Gates", + }, + { + id: 7, + name: "Свечи NGK Iridium IX BKR6EIX (4 шт.)", + category: "Двигатель", + price: 1280, + oldPrice: 1560, + rating: 4.8, + reviews: 178, + badge: "Скидка", + badgeColor: "bg-orange-500", + image: "/images/cat-engine.jpg", + brand: "NGK", + }, + { + id: 8, + name: "Масло трансмиссионное Mobil ATF 3309", + category: "Масла и жидкости", + price: 1740, + oldPrice: null, + rating: 4.7, + reviews: 63, + badge: "Новинка", + badgeColor: "bg-green-500", + image: "/images/cat-oil.jpg", + brand: "Mobil", + }, +]; + +const brands = [ + "Castrol", "Bosch", "NGK", "Brembo", "KYB", "Mann", "Gates", "Mobil", + "Valeo", "Denso", "Monroe", "Febi", +]; + +const reviews = [ + { + name: "Алексей К.", + date: "12 мая 2025", + rating: 5, + text: "Заказывал масло и фильтры — пришли быстро, всё оригинальное. Упаковка целая, цена лучшая в городе. Буду заказывать снова!", + car: "Toyota Camry 2019", + }, + { + name: "Мария Д.", + date: "3 июня 2025", + rating: 5, + text: "Очень удобный сайт, нашла нужные тормозные колодки за минуту. Доставка на следующий день, качество отличное.", + car: "Kia Rio 2021", + }, + { + name: "Дмитрий В.", + date: "28 апреля 2025", + rating: 4, + text: "Хороший ассортимент, есть редкие позиции. Немного долго ждал ответа от поддержки, но в итоге всё решили.", + car: "BMW 3 Series 2018", + }, +]; + +function StarRating({ rating, size = "sm" }: { rating: number; size?: "sm" | "md" }) { + const sizeClass = size === "sm" ? "text-xs" : "text-sm"; + return ( +
+ {[1, 2, 3, 4, 5].map((s) => ( + + ★ + + ))} +
+ ); +} + +export default function App() { + const [cartCount, setCartCount] = useState(0); + const [wishlist, setWishlist] = useState([]); + const [searchValue, setSearchValue] = useState(""); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const [addedToCart, setAddedToCart] = useState(null); + const [selectedBrand] = useState(null); + + const handleAddToCart = (id: number) => { + setCartCount((c) => c + 1); + setAddedToCart(id); + setTimeout(() => setAddedToCart(null), 1500); + }; + + const toggleWishlist = (id: number) => { + setWishlist((prev) => + prev.includes(id) ? prev.filter((w) => w !== id) : [...prev, id] + ); + }; + + const filteredProducts = products.filter((p) => { + const matchSearch = + searchValue === "" || + p.name.toLowerCase().includes(searchValue.toLowerCase()) || + p.brand.toLowerCase().includes(searchValue.toLowerCase()) || + p.category.toLowerCase().includes(searchValue.toLowerCase()); + const matchBrand = !selectedBrand || p.brand === selectedBrand; + return matchSearch && matchBrand; + }); + + return ( +
+ {/* Top bar */} +
+
+
+ 📞 +7 (800) 555-35-35 + | + ✉️ info@avtodetal-pro.ru +
+
+ 🕐 Пн–Пт: 9:00–20:00, Сб–Вс: 10:00–18:00 + | + ✅ Бесплатная доставка от 3000₽ +
+
+
+ + {/* Header */} +
+
+ {/* Logo */} +
+
+ А +
+
+
АвтоДетали
+
Про
+
+
+ + {/* Search */} +
+
+ setSearchValue(e.target.value)} + placeholder="Поиск по запчастям, маслам, артикулу..." + className="w-full border-2 border-gray-200 focus:border-red-500 rounded-l-lg px-4 py-2.5 text-sm outline-none transition-colors" + /> + +
+
+ + {/* Actions */} +
+ + + + +
+
+ + {/* Nav */} + + + {/* Mobile menu */} + {mobileMenuOpen && ( +
+ setSearchValue(e.target.value)} + placeholder="Поиск..." + className="border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none w-full" + /> + {["Каталог", "Масла и жидкости", "Фильтры", "Тормоза", "Подвеска", "Электрика", "Акции"].map( + (item) => ( + + {item} + + ) + )} +
+ )} +
+ + {/* Hero */} +
+ Автозапчасти +
+
+
+ 🔥 Летняя распродажа — скидки до 30% +
+

+ Запчасти и расходники
+ для любого автомобиля +

+

+ Более 50 000 наименований в наличии. Оригинальные и аналоговые запчасти, + масла, фильтры, тормоза и многое другое. Доставка по всей России. +

+
+ + +
+
+
+ ✔ Гарантия подлинности +
+
+ ✔ Возврат 30 дней +
+
+ ✔ Доставка 1–3 дня +
+
+
+
+
+ + {/* VIN Search */} +
+
+
+
+ 🚘 Подбор по VIN: +
+
+ + +
+
+ Введите 17-значный VIN для точного подбора +
+
+
+
+ + {/* Categories */} +
+

+ Категории товаров +

+
+ + {/* Popular Products */} +
+
+

Популярные товары

+ + Все товары → + +
+ + {filteredProducts.length === 0 ? ( +
+
🔍
+
Товары не найдены
+
Попробуйте изменить запрос
+
+ ) : ( +
+ {filteredProducts.map((product) => ( +
+
+ {product.name} + {product.badge && ( + + {product.badge} + + )} + +
+
+
{product.brand}
+
+ {product.name} +
+
+ + ({product.reviews}) +
+
+ + {product.price.toLocaleString()} ₽ + + {product.oldPrice && ( + + {product.oldPrice.toLocaleString()} ₽ + + )} + {product.oldPrice && ( + + −{Math.round((1 - product.price / product.oldPrice) * 100)}% + + )} +
+ +
+
+ ))} +
+ )} +
+ + {/* Brands */} +
+
+

Бренды

+
+ {brands.map((brand) => ( + + ))} +
+
+
+ + {/* Advantages */} +
+

Почему выбирают нас

+
+ {[ + { + icon: "🚚", + title: "Быстрая доставка", + desc: "Доставляем по всей России за 1–5 рабочих дней. Бесплатно при заказе от 3000 ₽.", + }, + { + icon: "✅", + title: "Только оригинал", + desc: "Гарантируем подлинность товара. Работаем только с официальными дистрибьюторами.", + }, + { + icon: "🔄", + title: "Возврат 30 дней", + desc: "Если товар не подошёл — вернём деньги без лишних вопросов в течение 30 дней.", + }, + { + icon: "🎧", + title: "Поддержка 24/7", + desc: "Наши специалисты помогут подобрать запчасти и ответят на любые вопросы.", + }, + ].map((adv) => ( +
+
{adv.icon}
+
{adv.title}
+
{adv.desc}
+
+ ))} +
+
+ + {/* Reviews */} +
+
+
+

Отзывы покупателей

+
+ + 4.8 + / 5 (1 248 отзывов) +
+
+
+ {reviews.map((rev, idx) => ( +
+
+
+ {rev.name[0]} +
+
+
{rev.name}
+
{rev.date}
+
+
+ +
+
+

{rev.text}

+
+ 🚗 {rev.car} +
+
+ ))} +
+
+
+ + {/* Newsletter */} +
+
+

Не пропустите акции!

+

+ Подпишитесь на рассылку и получите скидку 10% на первый заказ +

+
+ + +
+
+
+ + {/* Footer */} +
+
+
+
+
+
+ А +
+
+
АвтоДетали Про
+
+
+

+ Интернет-магазин автозапчастей. Более 50 000 товаров в наличии для всех марок автомобилей. +

+
+ {["VK", "TG", "OK"].map((s) => ( + + {s} + + ))} +
+
+
+
Каталог
+
    + {["Двигатель", "Тормозная система", "Подвеска", "Масла и жидкости", "Фильтры", "Электрика", "Аксессуары"].map( + (item) => ( +
  • + + {item} + +
    • + ) + )} +
+
+
+
Покупателям
+
    + {["Как оформить заказ", "Доставка и оплата", "Возврат товара", "Гарантия", "Отзывы", "Бонусная программа"].map( + (item) => ( +
  • + + {item} + +
    • + ) + )} +
+
+
+
Контакты
+
    +
  • 📞 +7 (800) 555-35-35 (бесплатно)
    • +
  • ✉️ info@avtodetal-pro.ru
    • +
  • 📍 г. Москва, ул. Автомобильная, 12
    • +
  • 🕐 Пн–Пт: 9:00–20:00
    • +
  • 🕐 Сб–Вс: 10:00–18:00
    • +
+
+
Принимаем оплату:
+
+ {["Visa", "MC", "МИР", "SBP"].map((pay) => ( + + {pay} + + ))} +
+
+
+
+
+ © 2025 АвтоДетали Про. Все права защищены. ИНН: 7712345678 | ОГРН: 1157746123456 +
+
+
+
+ ); +} diff --git a/src/index.css b/src/index.css new file mode 100755 index 0000000..f1d8c73 --- /dev/null +++ b/src/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/src/main.tsx b/src/main.tsx new file mode 100755 index 0000000..12fa35b --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./index.css"; +import App from "./App"; + +createRoot(document.getElementById("root")!).render( + + + +); diff --git a/src/utils/cn.ts b/src/utils/cn.ts new file mode 100755 index 0000000..a5ef193 --- /dev/null +++ b/src/utils/cn.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100755 index 0000000..d06d38f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "types": ["node"], + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Path mapping */ + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100755 index 0000000..1f06afd --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,19 @@ +import path from "path"; +import { fileURLToPath } from "url"; +import tailwindcss from "@tailwindcss/vite"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; +import { viteSingleFile } from "vite-plugin-singlefile"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react(), tailwindcss(), viteSingleFile()], + resolve: { + alias: { + "@": path.resolve(__dirname, "src"), + }, + }, +});