198 lines
7.9 KiB
TypeScript
198 lines
7.9 KiB
TypeScript
import { motion } from 'framer-motion';
|
||
import Head from 'next/head';
|
||
import Image from 'next/image';
|
||
import { useState, useEffect } from 'react';
|
||
|
||
export default function Home() {
|
||
// Данные о товарах
|
||
const products = [
|
||
{
|
||
id: 1,
|
||
name: 'Пальто',
|
||
price: 15000,
|
||
images: ['/wear/palto1.jpg', '/wear/palto2.jpg'],
|
||
description: 'Элегантное пальто высокого качества'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: 'Пиджак',
|
||
price: 12000,
|
||
images: ['/wear/pidzak1.jpg', '/wear/pidzak2.jpg'],
|
||
description: 'Стильный пиджак для особых случаев'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: 'Сорочка',
|
||
price: 5000,
|
||
images: ['/wear/sorochka1.jpg', '/wear/sorochka2.jpg'],
|
||
description: 'Классическая сорочка из премиальных материалов'
|
||
}
|
||
];
|
||
|
||
// Состояние для отслеживания наведения на карточки товаров
|
||
const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);
|
||
|
||
// Состояние для отслеживания прокрутки страницы
|
||
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]);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white font-['Arimo']">
|
||
<Head>
|
||
<title>Brand Store | Элегантная мода</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
</Head>
|
||
|
||
<header className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/80 backdrop-blur-md shadow-sm' : 'bg-transparent'}`}>
|
||
<nav className="container mx-auto px-6 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="flex items-center"
|
||
>
|
||
<div className="relative h-12 w-12">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Brand Logo"
|
||
layout="fill"
|
||
objectFit="contain"
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
<div className="hidden md:flex space-x-8">
|
||
<a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>Коллекция</a>
|
||
<a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>О нас</a>
|
||
<a href="#" className={`transition-colors ${scrolled ? 'text-primary hover:text-accent' : 'text-white hover:text-gray-200'}`}>Контакты</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
{/* Секция с фоновым изображением */}
|
||
<section className="relative h-screen">
|
||
<div className="absolute inset-0 w-full h-full">
|
||
<Image
|
||
src="/photos/head_photo.png"
|
||
alt="Главное фото"
|
||
layout="fill"
|
||
objectFit="cover"
|
||
priority
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Секция с приветственным текстом */}
|
||
<section className="py-20 bg-white">
|
||
<div className="container mx-auto px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="text-center max-w-3xl mx-auto"
|
||
>
|
||
<h1 className="text-5xl md:text-6xl text-primary mb-6">
|
||
Элегантность в каждой детали
|
||
</h1>
|
||
<p className="text-lg text-gray-600 mb-8">
|
||
Откройте для себя новую коллекцию 2024
|
||
</p>
|
||
<button className="bg-primary text-white px-8 py-3 rounded-full hover:bg-accent transition-colors">
|
||
Смотреть коллекцию
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Секция с товарами */}
|
||
<section className="py-20 bg-gray-50">
|
||
<div className="container mx-auto px-6">
|
||
{/* <h2 className="text-3xl text-primary text-center mb-16">Наши товары</h2> */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
|
||
{products.map((product, index) => (
|
||
<motion.div
|
||
key={product.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: index * 0.2 }}
|
||
className="group"
|
||
onMouseEnter={() => setHoveredProduct(product.id)}
|
||
onMouseLeave={() => setHoveredProduct(null)}
|
||
>
|
||
<div className="relative h-[600px] w-full overflow-hidden mb-6">
|
||
<Image
|
||
src={hoveredProduct === product.id ? product.images[1] : product.images[0]}
|
||
alt={product.name}
|
||
layout="fill"
|
||
objectFit="contain"
|
||
className="transition-opacity duration-300"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<h3 className="text-2xl text-primary mb-3">{product.name}</h3>
|
||
<p className="text-gray-600 mb-5 text-lg">{product.description}</p>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-xl font-semibold text-primary">{product.price.toLocaleString()} ₽</span>
|
||
<button className="bg-primary text-white px-6 py-3 rounded-full hover:bg-accent transition-colors">
|
||
Подробнее
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer className="bg-primary text-white py-12">
|
||
<div className="container mx-auto px-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div>
|
||
<h4 className="text-xl mb-4">О нас</h4>
|
||
<p className="text-gray-400">
|
||
Мы создаем элегантную одежду для тех, кто ценит качество и стиль.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xl mb-4">Контакты</h4>
|
||
<p className="text-gray-400">
|
||
Email: info@brandstore.com<br />
|
||
Телефон: +7 (999) 123-45-67
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xl mb-4">Подписаться</h4>
|
||
<div className="flex">
|
||
<input
|
||
type="email"
|
||
placeholder="Ваш email"
|
||
className="bg-white/10 px-4 py-2 rounded-l-full focus:outline-none"
|
||
/>
|
||
<button className="bg-accent px-6 rounded-r-full hover:bg-accent/90 transition-colors">
|
||
→
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|