Migrate project to TypeScript and update project structure with Tailwind CSS

2025-02-25 14:35:29 +07:00 · 2025-02-25 14:35:29 +07:00 · 9f0d3aba35
commit 9f0d3aba35
parent 1561d21666
23 changed files with 1802 additions and 639 deletions
--- a/next.config.js
+++ b/next.config.js
@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
  output: "standalone",
+  images: {
+    domains: [],
+    unoptimized: true,
+  },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,12 +1,25 @@
 {
+  "name": "brand-store",
+  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
-    "build": "next build"
+    "build": "next build",
+    "start": "next start"
  },
  "dependencies": {
-    "next": "latest",
+    "@heroicons/react": "^2.0.18",
+    "framer-motion": "^10.16.4",
+    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.21",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.20",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^5.2.2"
  }
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,7 +0,0 @@
-import "../styles/globals.css";
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app';
+import '../styles/globals.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+} 
--- a/pages/index.js
+++ b/pages/index.js
@ -1,67 +0,0 @@
-import Head from "next/head";
-import styles from "../styles/Home.module.css";
-
-export default function Home() {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js</a> on Docker!
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
-    </div>
-  );
-}
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -0,0 +1,198 @@
+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>
+  );
+} 
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/logotip.png
+++ b/public/logotip.png
--- a/public/photos/head_photo.png
+++ b/public/photos/head_photo.png
--- a/public/photos/photo1.jpg
+++ b/public/photos/photo1.jpg
--- a/public/photos/photo2.jpg
+++ b/public/photos/photo2.jpg
--- a/public/wear/palto1.jpg
+++ b/public/wear/palto1.jpg
--- a/public/wear/palto2.jpg
+++ b/public/wear/palto2.jpg
--- a/public/wear/pidzak1.jpg
+++ b/public/wear/pidzak1.jpg
--- a/public/wear/pidzak2.jpg
+++ b/public/wear/pidzak2.jpg
--- a/public/wear/sorochka1.jpg
+++ b/public/wear/sorochka1.jpg
--- a/public/wear/sorochka2.jpg
+++ b/public/wear/sorochka2.jpg
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@ -1,19 +1,172 @@
 .container {
  min-height: 100vh;
-  padding: 0 0.5rem;
+  background-color: transparent;
+  font-family: 'Cormorant Garamond', serif;
+  position: relative;
+}
+
+.header {
  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
  align-items: center;
+  padding: 2rem 4rem;
+  background-color: rgba(26, 26, 26, 0.8);
+  color: #ffffff;
+  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
+  backdrop-filter: blur(10px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.logo h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: #ffd700;
+  margin: 0;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+}
+
+.cartIcon {
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border: 1px solid #ffd700;
+  border-radius: 4px;
+  background-color: rgba(255, 215, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.cartIcon:hover {
+  background-color: rgba(255, 215, 0, 0.2);
+}
+
+.layout {
+  margin-top: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.sidebar {
+  width: 250px;
+  padding: 2rem;
+  background-color: rgba(248, 248, 248, 0.8);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(224, 224, 224, 0.5);
+}
+
+.navLink {
+  display: block;
+  padding: 1rem;
+  margin: 0.5rem 0;
+  color: #333;
+  text-decoration: none;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  border-left: 3px solid transparent;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+  border-radius: 4px;
+}
+
+.navLink:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-left: 3px solid #ffd700;
+  color: #000;
 }

 .main {
-  padding: 5rem 0;
  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  padding: 2rem;
+}
+
+.glassEffect {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
+}
+
+.hero {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));
+  color: #ffffff;
+  margin-bottom: 3rem;
+  border-radius: 15px;
+}
+
+.hero h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+}
+
+.products {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.productCard {
+  padding: 1rem;
+  transition: all 0.3s ease;
+  text-align: center;
+  border-radius: 10px;
+}
+
+.productCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
+}
+
+.productImage {
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+}
+
+.productImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.3s ease;
+}
+
+.productCard:hover .productImage img {
+  transform: scale(1.05);
+}
+
+.price {
+  font-size: 1.2rem;
+  color: #ffd700;
+  font-weight: 600;
+  margin: 1rem 0;
+  text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
+}
+
+.addToCartButton {
+  background-color: rgba(26, 26, 26, 0.8);
+  color: #ffffff;
+  border: 1px solid #ffd700;
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: 'Cormorant Garamond', serif;
+  border-radius: 4px;
+  backdrop-filter: blur(5px);
+}
+
+.addToCartButton:hover {
+  background-color: rgba(255, 215, 0, 0.2);
+  border-color: #ffffff;
 }

 .footer {
@ -123,9 +276,134 @@
  height: 1em;
 }

-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
+.brandHero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6rem 2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.brandContent {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+  color: #ffffff;
+  animation: fadeIn 1.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.brandTitle {
+  font-family: 'Playfair Display', serif;
+  font-size: 5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(45deg, #ffd700, #ffffff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
+}
+
+.brandTagline {
+  font-size: 2rem;
+  font-weight: 400;
+  margin-bottom: 3rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-style: italic;
+}
+
+.brandDescription {
+  max-width: 800px;
+  margin: 0 auto 4rem;
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.brandDescription p {
+  margin-bottom: 1.5rem;
+}
+
+.brandValues {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-top: 4rem;
+  padding: 2rem;
+}
+
+.valueItem {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 2rem;
+  border-radius: 15px;
+  border: 1px solid rgba(255, 215, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+.valueItem:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 215, 0, 0.4);
+}
+
+.valueItem h3 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #ffd700;
+  margin-bottom: 1rem;
+}
+
+.valueItem p {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.1rem;
+}
+
+@media (max-width: 768px) {
+  .brandHero {
+    padding: 4rem 1rem;
+  }
+
+  .brandTitle {
+    font-size: 3rem;
+  }
+
+  .brandTagline {
+    font-size: 1.5rem;
+  }
+
+  .brandValues {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
+  }
+
+  .header {
+    padding: 1rem 2rem;
+  }
+
+  .products {
+    padding: 1rem;
  }
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -1,3 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply antialiased;
+  }
+  body {
+    @apply text-primary m-0 p-0;
+  }
+}
+
+@layer components {
+  .container {
+    @apply max-w-7xl mx-auto px-4;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
 html,
 body {
  padding: 0;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#1a1a1a',
+        secondary: '#f5f5f5',
+        accent: '#d4af37',
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        serif: ['Playfair Display', 'serif'],
+      },
+    },
+  },
+  plugins: [],
+} 
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}