Обновить данные коллекций и продуктов, добавить связь между коллекциями и товарами

2025-02-28 11:09:40 +07:00 · 2025-02-28 11:09:40 +07:00 · c506682a3e
commit c506682a3e
parent bc51acede3
12 changed files with 40 additions and 27 deletions
--- a/components/Collections.tsx
+++ b/components/Collections.tsx
@ -10,7 +10,7 @@ interface CollectionsProps {
 export default function Collections({ collections }: CollectionsProps) {
  return (
    <section className="py-12 px-4 md:px-8 max-w-7xl mx-auto">
-      <h2 className="text-2xl md:text-3xl font-bold mb-8 font-['Playfair_Display']">Коллекции</h2>
+      <h2 className="text-2xl md:text-3xl font-bold text-center mb-8 font-['Playfair_Display']">Коллекции</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {collections.map((collection, index) => (
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@ -3,7 +3,7 @@ import { Facebook, Instagram, Twitter, Youtube } from "lucide-react";

 export default function Footer() {
  return (
-    <footer className="bg-[#2B5F47] text-white py-12">
+    <footer className="bg-[#2B5F47] text-white py-12 border-t border-[#63823B]">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@ -13,7 +13,7 @@ export default function Hero({ images = [] }: HeroProps) {
  return (
    <div className="relative h-[80vh] md:h-screen overflow-hidden bg-white">
      {/* Логотип по центру */}
-      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20">
+      <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"
@ -26,7 +26,7 @@ export default function Hero({ images = [] }: HeroProps) {
      </div>

      {/* Контент */}
-      <div className="absolute inset-0 flex items-center justify-center z-10">
+      <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 }}
@ -50,7 +50,7 @@ export default function Hero({ images = [] }: HeroProps) {
            transition={{ delay: 0.6, duration: 0.8 }}
          >
            <a
-              href="#new-arrivals"
+              href="/collections"
              className="bg-black text-white px-8 py-3 rounded-md font-medium hover:bg-gray-800 transition-colors inline-block"
            >
              Смотреть коллекцию
--- a/components/NewArrivals.tsx
+++ b/components/NewArrivals.tsx
@ -148,7 +148,7 @@ export default function NewArrivals({ products }: NewArrivalsProps) {

  return (
    <section id="new-arrivals" className="my-12 px-4 md:px-8 max-w-7xl mx-auto relative">
-      <h2 className="text-2xl md:text-3xl font-bold mb-6 font-['Playfair_Display']">Новинки</h2>
+      <h2 className="text-2xl md:text-3xl font-bold text-center mb-12 font-['Playfair_Display']">Новинки</h2>

      {/* Контейнер слайдера с кнопками навигации */}
      <div className="relative">
--- a/components/PopularCategories.tsx
+++ b/components/PopularCategories.tsx
@ -11,7 +11,7 @@ interface PopularCategoriesProps {
 export default function PopularCategories({ categories }: PopularCategoriesProps) {
  return (
    <section className="py-12 px-4 md:px-8 max-w-7xl mx-auto">
-      <h2 className="text-2xl md:text-3xl font-bold mb-8 font-['Playfair_Display']">Популярные категории</h2>
+      <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center font-['Playfair_Display']">Популярные категории</h2>
      
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        {categories.map((category, index) => (
--- a/components/TabSelector.tsx
+++ b/components/TabSelector.tsx
@ -56,7 +56,7 @@ export default function TabSelector({ onTabChange }: TabSelectorProps) {
  }, [])

  return (
-    <div className="flex justify-center items-center w-full py-8 bg-[#E2E2C1]">
+    <div className="flex justify-center items-center w-full py-8 bg-white">
      <div className="w-full max-w-[1200px] h-[60px] relative flex items-center justify-center">
        <div className="p-0">
          <div className="relative">
--- a/data/collections.ts
+++ b/data/collections.ts
@ -12,7 +12,7 @@ export interface Collection {
 export const collections: Collection[] = [
  {
    id: 1,
-    name: 'Весна-Лето 2024',
+    name: 'Весна-Лето 2025',
    image: '/photos/photo1.jpg',
    description: 'Легкие ткани и яркие цвета для теплого сезона. Наша новая коллекция воплощает свежесть и элегантность, идеально подходящую для весенних и летних дней.',
    url: '/collections/spring-summer-2024',
@ -20,7 +20,7 @@ export const collections: Collection[] = [
  },
  {
    id: 2,
-    name: 'Осень-Зима 2023',
+    name: 'Осень-Зима 2024',
    image: '/photos/autumn_winter.jpg',
    description: 'Теплые и уютные модели для холодного времени года. Коллекция сочетает в себе комфорт и стиль, предлагая элегантные решения для зимнего гардероба.',
    url: '/collections/autumn-winter-2023',
--- a/data/products.ts
+++ b/data/products.ts
@ -8,6 +8,7 @@ export interface Product {
  description: string;
  isNew?: boolean;
  categoryId: number;
+  collectionId?: number; // Опциональное поле для ID коллекции
  slug: string;
 }

@ -21,6 +22,7 @@ export const products: Product[] = [
    description: 'Элегантное пальто оверсайз высокого качества. Изготовлено из премиальных материалов, обеспечивающих комфорт и тепло. Идеально подходит для холодного сезона и создания стильного образа.',
    isNew: true,
    categoryId: 6,
+    collectionId: 2, // Осень-Зима 2024
    slug: 'palto-oversaiz',
    inStock: true
  },
@ -32,6 +34,7 @@ export const products: Product[] = [
    description: 'Стильный костюм для особых случаев. Выполнен из высококачественного хлопка, обеспечивающего комфорт и элегантный внешний вид. Идеально подходит для деловых встреч и официальных мероприятий.',
    isNew: true,
    categoryId: 6,
+    collectionId: 5, // Деловой стиль
    slug: 'kostyum-hlopok',
    inStock: true
  },
@ -43,6 +46,7 @@ export const products: Product[] = [
    description: 'Классическая блузка в коричневом цвете. Изготовлена из мягкой и приятной к телу ткани. Универсальная модель, которая подойдет как для офиса, так и для повседневного образа.',
    isNew: true,
    categoryId: 7,
+    collectionId: 1, // Весна-Лето 2025
    slug: 'bluzka',
    inStock: true
  },
@ -54,6 +58,7 @@ export const products: Product[] = [
    description: 'Элегантное платье высокого качества со сборкой. Подчеркивает фигуру и создает женственный силуэт. Идеально подходит для особых случаев и вечерних мероприятий.',
    isNew: true,
    categoryId: 5,
+    collectionId: 4, // Вечерняя коллекция
    slug: 'plate-so-sborkoy',
    inStock: true
  },
@ -65,6 +70,7 @@ export const products: Product[] = [
    description: 'Элегантные кожаные ботинки ручной работы. Изготовлены из натуральной кожи высшего качества. Комфортная колодка и стильный дизайн делают эту модель незаменимой в гардеробе.',
    isNew: true,
    categoryId: 1,
+    collectionId: 3, // Базовый гардероб
    slug: 'kozhanye-botinki',
    inStock: true
  },
@ -76,6 +82,7 @@ export const products: Product[] = [
    description: 'Роскошный шелковый шарф с уникальным принтом. Изготовлен из 100% натурального шелка. Добавит элегантности и шарма любому образу.',
    isNew: false,
    categoryId: 8,
+    // Нет коллекции
    slug: 'shelkovyj-sharf',
    inStock: true
  },
@ -87,6 +94,7 @@ export const products: Product[] = [
    description: 'Теплый шерстяной свитер крупной вязки. Изготовлен из мягкой шерсти мериноса. Идеально подходит для холодного времени года.',
    isNew: false,
    categoryId: 4,
+    collectionId: 2, // Осень-Зима 2024
    slug: 'sherstyanoj-sviter',
    inStock: true
  },
@ -98,6 +106,7 @@ export const products: Product[] = [
    description: 'Классические брюки прямого кроя. Выполнены из высококачественной ткани с добавлением эластана для комфортной посадки. Универсальная модель для офиса и повседневной носки.',
    isNew: false,
    categoryId: 3,
+    collectionId: 5, // Деловой стиль
    slug: 'klassicheskie-bryuki',
    inStock: true
  },
@ -109,6 +118,7 @@ export const products: Product[] = [
    description: 'Элегантная фетровая шляпа ручной работы. Изготовлена из высококачественного фетра. Дополнит любой образ и защитит от непогоды.',
    isNew: false,
    categoryId: 2,
+    // Нет коллекции
    slug: 'fetrovaya-shlyapa',
    inStock: true
  },
@ -120,6 +130,7 @@ export const products: Product[] = [
    description: 'Роскошная шелковая блузка с элегантным дизайном. Изготовлена из 100% натурального шелка. Идеально подходит для создания изысканного образа.',
    isNew: true,
    categoryId: 7,
+    collectionId: 1, // Весна-Лето 2025
    slug: 'shelkovaya-bluzka',
    inStock: true
  },
@ -131,6 +142,7 @@ export const products: Product[] = [
    description: 'Стильная кожаная сумка ручной работы. Изготовлена из натуральной кожи высшего качества. Вместительная и функциональная модель для повседневного использования.',
    isNew: false,
    categoryId: 8,
+    collectionId: 3, // Базовый гардероб
    slug: 'kozhanaya-sumka',
    inStock: true
  },
@ -142,6 +154,7 @@ export const products: Product[] = [
    description: 'Роскошное кашемировое пальто классического кроя. Изготовлено из 100% кашемира высшего качества. Элегантная модель, которая прослужит долгие годы.',
    isNew: true,
    categoryId: 6,
+    collectionId: 2, // Осень-Зима 2024
    slug: 'kashemirovoe-palto',
    inStock: true
  }
@ -180,4 +193,9 @@ export const getSimilarProducts = (productId: number, limit: number = 4): Produc
 // Функция для форматирования цены
 export const formatPrice = (price: number): string => {
  return new Intl.NumberFormat('ru-RU').format(price);
+};
+
+// Функция для получения товаров по коллекции
+export const getProductsByCollection = (collectionId: number): Product[] => {
+  return products.filter(product => product.collectionId === collectionId);
 }; 
--- a/pages/category/index.tsx
+++ b/pages/category/index.tsx
@ -13,7 +13,7 @@ export default function Categories() {
  return (
    <div className="min-h-screen bg-[#E2E2C1] font-['Arimo']">
      <Head>
-        <title>Каталог категорий | Brand Store</title>
+        <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>
@ -28,7 +28,7 @@ export default function Categories() {
            transition={{ duration: 0.5 }}
            className="text-3xl md:text-4xl font-bold mb-8 text-[#2B5F47] text-center"
          >
-            Каталог категорий
+            Каталог
          </motion.h1>

          <motion.div 
--- a/pages/collections/[slug].tsx
+++ b/pages/collections/[slug].tsx
@ -7,7 +7,7 @@ import { Heart } from "lucide-react"
 import Header from "../../components/Header"
 import Footer from "../../components/Footer"
 import { collections, getCollectionBySlug } from "../../data/collections"
-import { Product, products, formatPrice } from "../../data/products"
+import { Product, formatPrice, getProductsByCollection } from "../../data/products"
 import { useRouter } from "next/router"
 import { motion } from "framer-motion"

@ -20,11 +20,10 @@ interface CollectionPageProps {
    url: string
    slug: string
  }
-  // Для демонстрации используем все товары, в реальном проекте нужно связать коллекции с товарами
-  products: Product[]
+  collectionProducts: Product[]
 }

-export default function CollectionPage({ collection, products }: CollectionPageProps) {
+export default function CollectionPage({ collection, collectionProducts }: CollectionPageProps) {
  const router = useRouter()
  const [hoveredProduct, setHoveredProduct] = useState<number | null>(null)
  const [favorites, setFavorites] = useState<number[]>([])
@ -45,10 +44,6 @@ export default function CollectionPage({ collection, products }: CollectionPageP
    setFavorites((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]))
  }

-  // Для демонстрации выбираем случайные товары для коллекции
-  // В реальном приложении здесь должна быть логика выбора товаров по коллекции
-  const collectionProducts = products.slice(0, 8)
-
  return (
    <div className="min-h-screen bg-white font-['Arimo']">
      <Head>
@ -192,13 +187,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
    }
  }

-  // Для демонстрации используем все товары, в реальном проекте нужно связать коллекции с товарами
-  // Можно добавить фильтрацию по коллекции, если добавить поле collectionId в товары
+  // Получаем товары, принадлежащие к данной коллекции
+  const collectionProducts = getProductsByCollection(collection.id)

  return {
    props: {
      collection,
-      products,
+      collectionProducts,
    },
    revalidate: 600, // Перегенерация страницы каждые 10 минут
  }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -81,7 +81,7 @@ export default function Home({ heroImages, products, collections, categories }:
  };

  return (
-    <div className="min-h-screen bg-[#E2E2C1] font-['Arimo']">
+    <div className="min-h-screen bg-white font-['Arimo']">
      <Head>
        <title>Brand Store | Элегантная мода</title>
        <link rel="icon" href="/favicon.ico" />
--- a/pages/new-arrivals/index.tsx
+++ b/pages/new-arrivals/index.tsx
@ -27,7 +27,7 @@ export default function NewArrivals() {
  };

  return (
-    <div className="min-h-screen bg-[#E2E2C1] font-['Arimo']">
+    <div className="min-h-screen bg-[#2B5F47] font-['Arimo']">
      <Head>
        <title>Новинки | Brand Store</title>
        <link rel="icon" href="/favicon.ico" />
@ -65,7 +65,7 @@ export default function NewArrivals() {
                  onMouseLeave={() => setHoveredProduct(null)}
                >
                  <Link href={`/product/${product.slug}`}>
-                    <div className="relative h-64 w-full overflow-hidden">
+                    <div className="relative h-72 w-full overflow-hidden">
                      <Image
                        src={hoveredProduct === product.id && product.images.length > 1 
                          ? product.images[1] 
@ -88,7 +88,7 @@ export default function NewArrivals() {
                    </div>
                    <div className="p-4">
                      <h3 className="text-lg font-medium text-[#2B5F47] mb-1">{product.name}</h3>
-                      <p className="text-sm text-gray-600 mb-2 line-clamp-2">{product.description}</p>
+                      {/* <p className="text-sm text-gray-600 mb-2 line-clamp-2">{product.description}</p> */}
                      <div className="flex justify-between items-center">
                        <span className="font-bold text-[#2B5F47]">{product.price} ₽</span>
                        <span className="text-sm text-[#63823B]">