664 lines
29 KiB
TypeScript
664 lines
29 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useRef } from "react"
|
||
import Image from "next/image"
|
||
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { motion, useScroll, useTransform } from "framer-motion"
|
||
import { useInView } from "react-intersection-observer"
|
||
import { ArrowRight, ShoppingBag, Sparkles, Leaf, Hourglass, Heart } from "lucide-react"
|
||
import { Input } from "@/components/ui/input"
|
||
import { ProductCard } from "@/components/ui/product-card"
|
||
|
||
export default function HomePage() {
|
||
const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 })
|
||
const [heroRef, heroInView] = useInView({ triggerOnce: false, threshold: 0.1 })
|
||
const [currentCollection, setCurrentCollection] = useState(0)
|
||
const parallaxRef = useRef(null)
|
||
const { scrollYProgress } = useScroll({
|
||
target: parallaxRef,
|
||
offset: ["start start", "end start"]
|
||
})
|
||
const y = useTransform(scrollYProgress, [0, 1], [0, 200])
|
||
|
||
// Collections data
|
||
const collections = [
|
||
{
|
||
id: 1,
|
||
name: "ЭФЕМЕРНОСТЬ",
|
||
season: "ВЕСНА-ЛЕТО 2025",
|
||
description: "Воздушные силуэты, вдохновленные природой и движением",
|
||
image: "/placeholder.svg?height=1080&width=1920",
|
||
color: "#E2E2C1",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "АРХИТЕКТОНИКА",
|
||
season: "ОСЕНЬ-ЗИМА 2024",
|
||
description: "Структурированные формы с акцентом на линиях и пропорциях",
|
||
image: "/placeholder.svg?height=1080&width=1920",
|
||
color: "#63823B",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "МЕТАМОРФОЗЫ",
|
||
season: "КАПСУЛЬНАЯ КОЛЛЕКЦИЯ",
|
||
description: "Трансформируемые модели для динамичной городской жизни",
|
||
image: "/placeholder.svg?height=1080&width=1920",
|
||
color: "#2B5F47",
|
||
},
|
||
]
|
||
|
||
// Featured categories
|
||
const categories = [
|
||
{
|
||
id: "dresses",
|
||
name: "ПЛАТЬЯ",
|
||
description: "Элегантные силуэты для особых случаев и повседневности",
|
||
image: "/placeholder.svg?height=800&width=600",
|
||
},
|
||
{
|
||
id: "suits",
|
||
name: "КОСТЮМЫ",
|
||
description: "Безупречный крой и современные интерпретации классики",
|
||
image: "/placeholder.svg?height=800&width=600",
|
||
},
|
||
{
|
||
id: "outerwear",
|
||
name: "ВЕРХНЯЯ ОДЕЖДА",
|
||
description: "Выразительные формы и функциональные детали",
|
||
image: "/placeholder.svg?height=800&width=600",
|
||
},
|
||
]
|
||
|
||
// Featured products
|
||
const featuredProducts = [
|
||
{
|
||
id: 1,
|
||
name: "ШЕЛКОВОЕ ПЛАТЬЕ С ДРАПИРОВКОЙ",
|
||
price: 12800,
|
||
image: "/placeholder.svg?height=600&width=400",
|
||
isNew: true,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "ЖАКЕТ ИЗ ИТАЛЬЯНСКОЙ ШЕРСТИ",
|
||
price: 18500,
|
||
image: "/placeholder.svg?height=600&width=400",
|
||
isNew: true,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "БРЮКИ С ВЫСОКОЙ ПОСАДКОЙ",
|
||
price: 8900,
|
||
image: "/placeholder.svg?height=600&width=400",
|
||
isNew: false,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "БЛУЗА С ОБЪЕМНЫМИ РУКАВАМИ",
|
||
price: 7600,
|
||
image: "/placeholder.svg?height=600&width=400",
|
||
isNew: false,
|
||
},
|
||
]
|
||
|
||
// Editorial content
|
||
const editorials = [
|
||
{
|
||
id: 1,
|
||
title: "ИСКУССТВО СИЛУЭТА",
|
||
description: "Исследование форм и пропорций в современной моде",
|
||
image: "/placeholder.svg?height=800&width=600",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "УСТОЙЧИВОЕ РАЗВИТИЕ",
|
||
description: "Наш подход к ответственному производству",
|
||
image: "/placeholder.svg?height=800&width=600",
|
||
},
|
||
]
|
||
|
||
// Automatic collection rotation
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setCurrentCollection((prev) => (prev + 1) % collections.length)
|
||
}, 6000)
|
||
return () => clearInterval(interval)
|
||
}, [collections.length])
|
||
|
||
return (
|
||
<main className="overflow-hidden">
|
||
{/* Hero Section */}
|
||
<section
|
||
ref={heroRef}
|
||
className="relative min-h-screen flex items-center overflow-hidden"
|
||
style={{ backgroundColor: collections[currentCollection].color }}
|
||
>
|
||
<div className="absolute inset-0 z-0">
|
||
<div className="absolute inset-0 bg-gradient-to-r from-black/30 to-transparent z-10" />
|
||
<motion.div
|
||
className="w-full h-full"
|
||
initial={{ scale: 1.1, opacity: 0 }}
|
||
animate={{
|
||
scale: 1,
|
||
opacity: 1,
|
||
transition: { duration: 1.5 }
|
||
}}
|
||
key={collections[currentCollection].id}
|
||
>
|
||
<Image
|
||
src={collections[currentCollection].image}
|
||
alt={collections[currentCollection].name}
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Декоративные элементы */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none z-[5] overflow-hidden">
|
||
<motion.div
|
||
className="absolute top-[10%] right-[5%] w-64 h-64 rounded-full border border-white/10 opacity-60"
|
||
initial={{ scale: 0.8, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 0.6 }}
|
||
transition={{ duration: 2, delay: 0.5 }}
|
||
/>
|
||
<motion.div
|
||
className="absolute bottom-[15%] left-[10%] w-40 h-40 rounded-full border border-white/10 opacity-40"
|
||
initial={{ scale: 0.8, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 0.4 }}
|
||
transition={{ duration: 2, delay: 0.8 }}
|
||
/>
|
||
<motion.div
|
||
className="absolute top-[30%] left-[20%] w-20 h-20 rounded-full bg-tertiary/10 opacity-30 backdrop-blur-sm"
|
||
initial={{ y: -50, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 0.3 }}
|
||
transition={{ duration: 1.5, delay: 1 }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
<div className="max-w-2xl">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
key={`season-${collections[currentCollection].id}`}
|
||
className="mb-4"
|
||
>
|
||
<span className="inline-block text-sm md:text-base tracking-widest text-white/90 font-light border-b border-white/30 pb-1">
|
||
{collections[currentCollection].season}
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
key={`name-${collections[currentCollection].id}`}
|
||
className="text-4xl md:text-6xl lg:text-7xl font-serif text-white mb-6"
|
||
>
|
||
{collections[currentCollection].name}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
key={`desc-${collections[currentCollection].id}`}
|
||
className="text-lg md:text-xl text-white/80 mb-8 font-light"
|
||
>
|
||
{collections[currentCollection].description}
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.8 }}
|
||
className="flex flex-wrap gap-4"
|
||
>
|
||
<Button
|
||
asChild
|
||
size="lg"
|
||
className="bg-white text-primary hover:bg-white/90 rounded-none px-8 group relative overflow-hidden"
|
||
>
|
||
<Link href={`/collections/${collections[currentCollection].id}`}>
|
||
<span className="relative z-10">СМОТРЕТЬ КОЛЛЕКЦИЮ</span>
|
||
<span className="absolute inset-0 bg-tertiary scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 z-0"></span>
|
||
</Link>
|
||
</Button>
|
||
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
size="lg"
|
||
className="border-white text-white hover:bg-white/10 rounded-none px-8 group relative overflow-hidden"
|
||
>
|
||
<Link href="/catalog">
|
||
<span className="relative z-10">ВСЕ ТОВАРЫ</span>
|
||
<span className="absolute inset-0 bg-white/10 scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 z-0"></span>
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Collection Indicators */}
|
||
<div className="absolute bottom-10 left-4 right-4">
|
||
<div className="container mx-auto">
|
||
<div className="flex justify-center md:justify-start space-x-3">
|
||
{collections.map((_, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => setCurrentCollection(index)}
|
||
className={`w-12 h-1 transition-all ${
|
||
currentCollection === index ? "bg-white" : "bg-white/30"
|
||
}`}
|
||
aria-label={`Переключить на коллекцию ${index + 1}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Преимущества */}
|
||
<section className="py-24 bg-gradient-to-b from-tertiary/20 to-white relative overflow-hidden">
|
||
{/* Декоративные элементы */}
|
||
<div className="absolute inset-0 pointer-events-none">
|
||
<div className="absolute right-0 top-0 w-1/3 h-1/3 bg-[url('/pattern.svg')] opacity-5"></div>
|
||
<div className="absolute left-0 bottom-0 w-1/4 h-1/4 bg-[url('/pattern.svg')] opacity-5"></div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative">
|
||
<div className="text-center mb-16">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Почему мы</span>
|
||
<h2 className="text-3xl md:text-4xl font-serif text-primary mb-4">НАШИ ПРЕИМУЩЕСТВА</h2>
|
||
<div className="w-20 h-[2px] bg-secondary mx-auto"></div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
|
||
>
|
||
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
|
||
<Sparkles className="h-10 w-10 text-primary" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-primary mb-4">Уникальный дизайн</h3>
|
||
<p className="text-gray-600 leading-relaxed">Каждая модель разрабатывается нашими дизайнерами с вниманием к деталям и современным тенденциям моды.</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
|
||
>
|
||
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
|
||
<Leaf className="h-10 w-10 text-primary" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-primary mb-4">Экологичные материалы</h3>
|
||
<p className="text-gray-600 leading-relaxed">Мы используем только качественные и экологически чистые ткани, заботясь о вашем комфорте и окружающей среде.</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="flex flex-col items-center text-center p-8 bg-white shadow-sm border-t-2 border-primary/20 hover:border-primary transition-colors duration-300"
|
||
>
|
||
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-300">
|
||
<Hourglass className="h-10 w-10 text-primary" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-primary mb-4">Вне времени</h3>
|
||
<p className="text-gray-600 leading-relaxed">Создаем одежду, которая остается актуальной вне зависимости от сезона, сочетая классику и современность.</p>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Категории */}
|
||
<section className="py-20 relative overflow-hidden">
|
||
{/* Декоративные элементы */}
|
||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||
<div className="absolute -right-20 -top-20 w-80 h-80 rounded-full bg-tertiary/10"></div>
|
||
<div className="absolute -left-40 bottom-0 w-96 h-96 rounded-full bg-primary/5"></div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative">
|
||
<div className="text-center mb-16">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Наш ассортимент</span>
|
||
<h2 className="text-3xl md:text-4xl font-serif text-primary mb-4">КАТЕГОРИИ</h2>
|
||
<div className="w-20 h-[2px] bg-secondary mx-auto"></div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{categories.map((category, index) => (
|
||
<motion.div
|
||
key={category.id}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||
>
|
||
<Link
|
||
href={`/catalog?category=${category.id}`}
|
||
className="group block relative overflow-hidden"
|
||
>
|
||
<div className="aspect-[3/4] relative overflow-hidden">
|
||
<Image
|
||
src={category.image}
|
||
alt={category.name}
|
||
fill
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent opacity-80"></div>
|
||
|
||
{/* Рамка при наведении */}
|
||
<div className="absolute inset-[10px] border border-white/0 transition-all duration-500 group-hover:border-white/30 group-hover:inset-[15px]"></div>
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 p-6 text-white transform transition-transform duration-500">
|
||
<h3 className="text-xl font-medium mb-2 group-hover:translate-y-[-5px] transition-transform duration-300">{category.name}</h3>
|
||
<p className="text-sm text-white/80 mb-4 group-hover:translate-y-[-5px] transition-transform duration-300 delay-75">{category.description}</p>
|
||
<span className="inline-flex items-center text-sm font-medium text-white group-hover:translate-y-[-5px] transition-transform duration-300 delay-150">
|
||
<span className="relative">
|
||
СМОТРЕТЬ ТОВАРЫ
|
||
<span className="absolute bottom-[-4px] left-0 w-0 h-[1px] bg-white transition-all duration-300 group-hover:w-full"></span>
|
||
</span>
|
||
<ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Популярные товары */}
|
||
<section className="py-24 bg-white relative overflow-hidden">
|
||
{/* Декоративные элементы */}
|
||
<div className="absolute top-0 right-0 w-1/3 h-1/2 bg-tertiary/10 rounded-bl-[100px] -z-10"></div>
|
||
<div className="absolute bottom-0 left-0 w-1/4 h-1/3 bg-primary/5 rounded-tr-[70px] -z-10"></div>
|
||
|
||
<div className="container mx-auto px-4 relative">
|
||
<div className="flex flex-col md:flex-row justify-between items-center mb-16">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="mb-6 md:mb-0"
|
||
>
|
||
<span className="text-sm tracking-widest text-secondary uppercase mb-2 inline-block">Выбор стилистов</span>
|
||
<h2 className="text-3xl md:text-4xl font-serif text-primary">ПОПУЛЯРНЫЕ ТОВАРЫ</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-primary text-primary hover:bg-primary/5 rounded-none px-8"
|
||
>
|
||
<Link href="/catalog">
|
||
СМОТРЕТЬ ВСЕ ТОВАРЫ
|
||
</Link>
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||
{featuredProducts.map((product) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
id={product.id}
|
||
name={product.name}
|
||
price={product.price}
|
||
image={product.image}
|
||
isNew={product.isNew}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Featured Products */}
|
||
<section className="py-24 bg-tertiary/20">
|
||
<div className="container mx-auto px-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl md:text-5xl font-light text-primary mb-6 tracking-tight">
|
||
ИЗБРАННЫЕ МОДЕЛИ
|
||
</h2>
|
||
<p className="text-gray-700 max-w-2xl mx-auto">
|
||
Ключевые изделия текущего сезона, воплощающие эстетику бренда
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
ref={ref}
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
|
||
>
|
||
{featuredProducts.map((product, index) => (
|
||
<motion.div
|
||
key={product.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
className="group"
|
||
>
|
||
<Link href={`/product/${product.id}`}>
|
||
<div className="relative aspect-[3/4] overflow-hidden bg-tertiary/10">
|
||
<Image
|
||
src={product.image}
|
||
alt={product.name}
|
||
fill
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
{product.isNew && (
|
||
<div className="absolute top-4 left-4 bg-primary text-white text-xs py-1 px-3 tracking-wider">
|
||
НОВИНКА
|
||
</div>
|
||
)}
|
||
<button className="absolute top-4 right-4 bg-white/80 p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||
<Heart className="h-5 w-5 text-primary" />
|
||
</button>
|
||
</div>
|
||
</Link>
|
||
|
||
<div className="pt-4 pb-2">
|
||
<Link href={`/product/${product.id}`}>
|
||
<h3 className="text-sm tracking-wider text-gray-800 mb-2 group-hover:text-primary transition-colors">
|
||
{product.name}
|
||
</h3>
|
||
</Link>
|
||
<p className="text-primary">{product.price.toLocaleString()} ₽</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
<div className="text-center mt-16">
|
||
<Button asChild className="bg-primary hover:bg-primary/90 text-white rounded-none px-12 py-6">
|
||
<Link href="/catalog">
|
||
СМОТРЕТЬ ВСЕ МОДЕЛИ
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Editorial Content */}
|
||
<section className="py-24">
|
||
<div className="container mx-auto px-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl md:text-5xl font-light text-primary mb-6 tracking-tight">
|
||
ЖУРНАЛ
|
||
</h2>
|
||
<p className="text-gray-700 max-w-2xl mx-auto">
|
||
Погрузитесь в мир нашего бренда через истории, интервью и вдохновляющий контент
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 md:gap-16">
|
||
{editorials.map((editorial, index) => (
|
||
<motion.div
|
||
key={editorial.id}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||
className="group"
|
||
>
|
||
<Link href="/journal">
|
||
<div className="relative aspect-video overflow-hidden mb-6">
|
||
<Image
|
||
src={editorial.image}
|
||
alt={editorial.title}
|
||
fill
|
||
className="object-cover transition-transform duration-700 group-hover:scale-105"
|
||
/>
|
||
</div>
|
||
<h3 className="text-xl md:text-2xl font-light text-primary mb-3 tracking-tight group-hover:text-secondary transition-colors">
|
||
{editorial.title}
|
||
</h3>
|
||
<p className="text-gray-700 mb-4">{editorial.description}</p>
|
||
<span className="inline-block text-primary border-b border-primary pb-1 group-hover:border-secondary group-hover:text-secondary transition-colors">
|
||
ЧИТАТЬ ДАЛЕЕ
|
||
</span>
|
||
</Link>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Подписка на рассылку */}
|
||
<section className="py-24 bg-primary relative overflow-hidden">
|
||
{/* Декоративные элементы */}
|
||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||
<div className="absolute top-0 left-0 w-full h-full opacity-5">
|
||
<Image
|
||
src="/pattern.svg"
|
||
alt=""
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</div>
|
||
<div className="absolute -right-20 -top-20 w-80 h-80 rounded-full border border-white/10 opacity-30"></div>
|
||
<div className="absolute -left-40 bottom-0 w-96 h-96 rounded-full border border-white/10 opacity-20"></div>
|
||
</div>
|
||
|
||
<div className="container mx-auto px-4 relative">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
<span className="text-sm tracking-widest text-tertiary uppercase mb-2 inline-block">Будьте в курсе</span>
|
||
<h2 className="text-3xl md:text-4xl font-serif text-white mb-6">ПОДПИШИТЕСЬ НА РАССЫЛКУ</h2>
|
||
<p className="text-white/80 mb-8 leading-relaxed">
|
||
Подпишитесь на нашу рассылку, чтобы первыми узнавать о новых коллекциях, специальных предложениях и эксклюзивных событиях. Мы отправляем только самую важную и интересную информацию.
|
||
</p>
|
||
|
||
<div className="flex flex-col md:flex-row gap-4 max-w-xl mx-auto">
|
||
<Input
|
||
type="email"
|
||
placeholder="Ваш email"
|
||
className="bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-tertiary md:flex-1"
|
||
/>
|
||
<Button className="bg-tertiary hover:bg-tertiary/90 text-primary">
|
||
ПОДПИСАТЬСЯ
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-white/60 text-xs mt-4">
|
||
Нажимая на кнопку, вы соглашаетесь с нашей <Link href="/privacy-policy" className="underline hover:text-white">политикой конфиденциальности</Link>
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Instagram Feed */}
|
||
<section className="py-16">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl md:text-3xl font-light text-primary tracking-tight">
|
||
@DRESSEDFORSUCCESSSTORE
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
|
||
{Array.from({ length: 6 }).map((_, index) => (
|
||
<a
|
||
key={index}
|
||
href="https://instagram.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="relative aspect-square group overflow-hidden"
|
||
>
|
||
<Image
|
||
src={`/placeholder.svg?height=300&width=300&text=Instagram+${index + 1}`}
|
||
alt={`Instagram post ${index + 1}`}
|
||
fill
|
||
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
||
/>
|
||
<div className="absolute inset-0 bg-primary/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<span className="text-white">@dressedforsuccessstore</span>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
)
|
||
}
|