import { useState, useMemo } from "react";
import { cn } from "./utils/cn";
// Типы данных
interface Product {
id: number;
name: string;
category: string;
price: string;
image: string;
description: string;
features: string[];
}
// Данные категорий
const categories = [
{ id: "all", name: "Все товары", icon: "????" },
{ id: "windows", name: "Окна", icon: "????" },
{ id: "doors", name: "Двери", icon: "????" },
{ id: "balcony", name: "Балконы", icon: "????" },
{ id: "facade", name: "Фасады", icon: "????" },
];
// Данные товаров
const products: Product[] = [
{
id: 1,
name: "Энергосберегающее окно",
category: "windows",
price: "от 8 500 ₽",
image: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=400&h=300&fit=crop",
description: "Современное окно с тройным стеклопакетом и энергосберегающим покрытием",
features: ["Тройной стеклопакет", "Теплосбережение", "Шумоизоляция"],
},
{
id: 2,
name: "Панорамное окно",
category: "windows",
price: "от 15 000 ₽",
image: "https://images.unsplash.com/photo-1507089947368-19c1da9775ae?w=400&h=300&fit=crop",
description: "Большие панорамные окна для максимального естественного освещения",
features: ["Панорамное остекление", "Безрамный профиль", "Максимум света"],
},
{
id: 3,
name: "Входная дверь",
category: "doors",
price: "от 25 000 ₽",
image: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop",
description: "Надежная металлическая дверь с утеплением и современным дизайном",
features: ["Металлический лист 2мм", "Утепление", "Замки премиум"],
},
{
id: 4,
name: "Межкомнатная дверь",
category: "doors",
price: "от 12 000 ₽",
image: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=400&h=300&fit=crop",
description: "Стильные межкомнатные двери в классическом и современном стиле",
features: ["Массив дерева", "Стеклянные вставки", "Разные цвета"],
},
{
id: 5,
name: "Остекление балкона",
category: "balcony",
price: "от 35 000 ₽",
image: "https://images.unsplash.com/photo-1515263487990-61b07816b324?w=400&h=300&fit=crop",
description: "Теплое или холодное остекление балконов и лоджий любой сложности",
features: ["Теплое/холодное", "Выносное остекление", "Утепление"],
},
{
id: 6,
name: "Зимний сад",
category: "facade",
price: "от 120 000 ₽",
image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop",
description: "Создание зимнего сада или оранжереи под ключ",
features: ["Алюминиевый профиль", "Автоматическое проветривание", "Освещение"],
},
{
id: 7,
name: "Офисная перегородка",
category: "facade",
price: "от 8 000 ₽",
image: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=400&h=300&fit=crop",
description: "Стеклянные перегородки для зонирования офисных пространств",
features: ["Закаленное стекло", "Мобильные системы", "Звукоизоляция"],
},
{
id: 8,
name: "Раздвижная дверь",
category: "doors",
price: "от 45 000 ₽",
image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=400&h=300&fit=crop",
description: "Раздвижные двери для террасы или патио",
features: ["Панорамное остекление", "Теплый профиль", "Скрытый монтаж"],
},
];
// Компонент Header
function Header() {
return (
);
}
// Компонент Hero
function Hero() {
return (
);
}
// Компонент ProductCard
function ProductCard({ product }: { product: Product }) {
const [isHovered, setIsHovered] = useState(false);
return (
{/* Поиск и фильтры */}
{/* Результаты */}
{filteredProducts.length > 0 ? (
)}
{/* Счетчик */}
);
}
// Компонент Services
function Services() {
const services = [
{
icon: "????",
title: "Бесплатный замер",
description: "Наш специалист приедет к вам в удобное время и сделает точные замеры"
},
{
icon: "????",
title: "Дизайн-проект",
description: "Поможем подобрать идеальное решение под ваш интерьер"
},
{
icon: "????",
title: "Профессиональный монтаж",
description: "Монтажные бригады с опытом более 10 лет"
},
{
icon: "????️",
title: "Гарантийное обслуживание",
description: "10 лет гарантии на все конструкции и работы"
}
];
return (
);
}
// Компонент Contact
function Contact() {
return (
Email
);
}
// Компонент Footer
function Footer() {
return (
);
}
// Главный компонент App
export function App() {
return (
Монолит Окна
Оконные конструкции
Работаем с 2005 года
Качественные окна по доступным ценам
Производство и установка пластиковых окон, дверей и светопрозрачных конструкций. Собственное производство, гарантия до 10 лет.
Гарантия 10 лет
На все конструкции
Быстрый монтаж
От 1 дня
Выезд замерщика
Бесплатно
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
> 
);
}
// Компонент Catalog
function Catalog() {
const [activeCategory, setActiveCategory] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
const [sortBy, setSortBy] = useState("default");
const filteredProducts = useMemo(() => {
let filtered = products;
// Фильтрация по категории
if (activeCategory !== "all") {
filtered = filtered.filter(p => p.category === activeCategory);
}
// Поиск
if (searchQuery) {
const query = searchQuery.toLowerCase();
filtered = filtered.filter(p =>
p.name.toLowerCase().includes(query) ||
p.description.toLowerCase().includes(query) ||
p.features.some(f => f.toLowerCase().includes(query))
);
}
// Сортировка
if (sortBy === "price-asc") {
filtered = [...filtered].sort((a, b) =>
parseInt(a.price.replace(/\D/g, '')) - parseInt(b.price.replace(/\D/g, ''))
);
} else if (sortBy === "price-desc") {
filtered = [...filtered].sort((a, b) =>
parseInt(b.price.replace(/\D/g, '')) - parseInt(a.price.replace(/\D/g, ''))
);
}
return filtered;
}, [activeCategory, searchQuery, sortBy]);
return (
{categories.find(c => c.id === product.category)?.icon} {categories.find(c => c.id === product.category)?.name}
{product.name}
{product.description}
{product.features.map((feature, idx) => (
{feature}
))}
Цена
{product.price}
Каталог продукции
Широкий выбор оконных и дверных конструкций для вашего дома
{/* Поиск */}
{/* Категории */}
setSearchQuery(e.target.value)}
className="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 transition-all"
/>
{/* Сортировка */}
{categories.map((category) => (
))}
{filteredProducts.map((product) => (
) : (
Ничего не найдено
Попробуйте изменить параметры поиска
Найдено товаров: {filteredProducts.length}
Наши услуги
Комплексный подход к остеклению вашего дома от замера до монтажа
{services.map((service, idx) => (
))}
{service.icon}
{service.title}
{service.description}
Свяжитесь с нами
Оставьте заявку на бесплатный замер и получите расчет стоимости в течение 30 минут
Телефон
8 (800) 123-45-67
info@monolit-okna.ru
Адрес
г. Москва, ул. Примерная, д. 1
