64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react";
|
||
import Image from "next/image";
|
||
import { motion } from "framer-motion";
|
||
|
||
// Типы для свойств компонента
|
||
interface HeroProps {
|
||
images?: string[];
|
||
}
|
||
|
||
export default function Hero({ images = [] }: HeroProps) {
|
||
return (
|
||
<div className="relative h-[80vh] md:h-screen overflow-hidden bg-white">
|
||
{/* Логотип по центру */}
|
||
<div className="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
|
||
<div className="relative w-[200px] h-[200px] md:w-[300px] md:h-[300px]">
|
||
<Image
|
||
src="/logotip.png"
|
||
alt="Brand Logo"
|
||
fill
|
||
className="object-contain"
|
||
priority
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Контент */}
|
||
<div className="relative inset-0 flex items-center justify-center z-10">
|
||
<div className="text-center text-black px-4 mt-[300px] md:mt-[400px]">
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.2, duration: 0.8 }}
|
||
className="text-4xl md:text-6xl font-bold mb-4 font-['Playfair_Display']"
|
||
>
|
||
Элегантность в каждой детали
|
||
</motion.h1>
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.4, duration: 0.8 }}
|
||
className="text-lg md:text-xl mb-8 max-w-2xl mx-auto"
|
||
>
|
||
Откройте для себя новую коллекцию, созданную с любовью к качеству и стилю
|
||
</motion.p>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.6, duration: 0.8 }}
|
||
>
|
||
<a
|
||
href="/collections"
|
||
className="bg-black text-white px-8 py-3 rounded-md font-medium hover:bg-gray-800 transition-colors inline-block"
|
||
>
|
||
Смотреть коллекцию
|
||
</a>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|