import { motion } from 'framer-motion'; import Head from 'next/head'; import Image from 'next/image'; import { useState, useEffect } from 'react'; import Header from '../components/Header'; import Hero from '../components/Hero'; import CookieNotification from '../components/CookieNotification'; import fs from 'fs'; import path from 'path'; import { Heart } from 'lucide-react'; import Footer from '../components/Footer'; // Типы для свойств компонента interface HomeProps { heroImages: string[]; products: Product[]; } // Тип для товара interface Product { id: number; name: string; price: number; images: string[]; description: string; isNew?: boolean; } export default function Home({ heroImages, products }: HomeProps) { // Состояние для отслеживания наведения на карточки товаров const [hoveredProduct, setHoveredProduct] = useState(null); // Состояние для отслеживания избранных товаров const [favorites, setFavorites] = useState([]); // Состояние для отслеживания прокрутки страницы const [scrolled, setScrolled] = useState(false); // Эффект для отслеживания прокрутки useEffect(() => { const handleScroll = () => { const isScrolled = window.scrollY > 50; if (isScrolled !== scrolled) { setScrolled(isScrolled); } }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, [scrolled]); // Функция для добавления/удаления товара из избранного const toggleFavorite = (id: number, e: React.MouseEvent) => { e.stopPropagation(); setFavorites(prev => prev.includes(id) ? prev.filter(itemId => itemId !== id) : [...prev, id] ); }; return (
Brand Store | Элегантная мода
{/* Секция с HERO элементом */} {/* Секция с товарами */}
Коллекция
{products.map((product, index) => ( setHoveredProduct(product.id)} onMouseLeave={() => setHoveredProduct(null)} > {/* Метка "New" */} {product.isNew && (
New
)} {/* Кнопка избранного */} {/* Изображение товара */}
1 ? product.images[1] : product.images[0]} alt={product.name} layout="fill" objectFit="cover" className="transition-all duration-500 hover:scale-105" />
{/* Информация о товаре */}

{product.name}

{product.price.toLocaleString()} ₽

 ))}
); } // Функция для получения данных на стороне сервера export async function getStaticProps() { // Данные о товарах const products = [ { id: 1, name: 'Пальто оверсайз', price: 43800, images: ['/wear/palto1.jpg', '/wear/palto2.jpg'], description: 'Элегантное пальто оверсайз высокого качества', isNew: true }, { id: 2, name: 'Костюм хлопок', price: 12800, images: ['/wear/pidzak2.jpg', '/wear/pidzak1.jpg'], description: 'Стильный костюм для особых случаев', isNew: true }, { id: 3, name: 'Блузка', price: 3500, images: ['/wear/sorochka1.jpg', '/wear/sorochka2.jpg'], description: 'Классическая блузка в коричневом цвете', isNew: true }, { id: 4, name: 'Платье со сборкой', price: 28800, images: ['/wear/jumpsuit_1.jpg', '/wear/jumpsuit_2.jpg'], description: 'Элегантное платье высокого качества', isNew: true } ]; // Получение изображений для слайдера из папки hero_photos const heroImagesDirectory = path.join(process.cwd(), 'public/hero_photos'); let heroImages = []; try { const fileNames = fs.readdirSync(heroImagesDirectory); // Фильтруем только изображения const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif']; const imageFiles = fileNames.filter(file => imageExtensions.some(ext => file.toLowerCase().endsWith(ext)) ); if (imageFiles.length > 0) { heroImages = imageFiles.map(fileName => `/hero_photos/${fileName}`); } else { // Если нет изображений, используем изображения из папки photos heroImages = ['/photos/head_photo.png']; } } catch (error) { console.error('Error reading hero_photos directory:', error); // Если папка не существует или пуста, используем изображение из папки photos heroImages = ['/photos/head_photo.png']; } return { props: { heroImages, products, }, // Перегенерация страницы каждые 10 минут revalidate: 600, }; }