Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
d8dfun
/
d8d-yefushi-website-jb1KXsil
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

Initial commit from template

D8D AI 1 rok temu
commit
6761c19a5e
24 zmienionych plików z 607 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 24 0
      .gitignore
  2. 28 0
      eslint.config.js
  3. 13 0
      index.html
  4. 34 0
      package.json
  5. 6 0
      postcss.config.js
  6. 31 0
      src/App.tsx
  7. 27 0
      src/components/About.tsx
  8. 35 0
      src/components/Footer.tsx
  9. 36 0
      src/components/Header.tsx
  10. 17 0
      src/components/Hero.tsx
  11. 31 0
      src/components/ProductSection.tsx
  12. 13 0
      src/index.css
  13. 10 0
      src/main.tsx
  14. 62 0
      src/pages/AboutPage.tsx
  15. 49 0
      src/pages/ContactPage.tsx
  16. 64 0
      src/pages/DesignPage.tsx
  17. 16 0
      src/pages/HomePage.tsx
  18. 34 0
      src/pages/ProductsPage.tsx
  19. 1 0
      src/vite-env.d.ts
  20. 16 0
      tailwind.config.js
  21. 24 0
      tsconfig.app.json
  22. 7 0
      tsconfig.json
  23. 22 0
      tsconfig.node.json
  24. 7 0
      vite.config.ts

+ 24 - 0
.gitignore
Wyświetl plik 

@@ -0,0 +1,24 @@
 
+# Logs
 
+logs
 
+*.log
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+pnpm-debug.log*
 
+lerna-debug.log*
 
+
 
+node_modules
 
+dist
 
+dist-ssr
 
+*.local
 
+
 
+# Editor directories and files
 
+.vscode/*
 
+!.vscode/extensions.json
 
+.idea
 
+.DS_Store
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?

+ 28 - 0
eslint.config.js
Wyświetl plik 

@@ -0,0 +1,28 @@
 
+import js from '@eslint/js';
 
+import globals from 'globals';
 
+import reactHooks from 'eslint-plugin-react-hooks';
 
+import reactRefresh from 'eslint-plugin-react-refresh';
 
+import tseslint from 'typescript-eslint';
 
+
 
+export default tseslint.config(
 
+  { ignores: ['dist'] },
 
+  {
 
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
 
+    files: ['**/*.{ts,tsx}'],
 
+    languageOptions: {
 
+      ecmaVersion: 2020,
 
+      globals: globals.browser,
 
+    },
 
+    plugins: {
 
+      'react-hooks': reactHooks,
 
+      'react-refresh': reactRefresh,
 
+    },
 
+    rules: {
 
+      ...reactHooks.configs.recommended.rules,
 
+      'react-refresh/only-export-components': [
 
+        'warn',
 
+        { allowConstantExport: true },
 
+      ],
 
+    },
 
+  }
 
+);

+ 13 - 0
index.html
Wyświetl plik 

@@ -0,0 +1,13 @@
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Vite + React + TS</title>
 
+  </head>
 
+  <body>
 
+    <div id="root"></div>
 
+    <script type="module" src="/src/main.tsx"></script>
 
+  </body>
 
+</html>

+ 34 - 0
package.json
Wyświetl plik 

@@ -0,0 +1,34 @@
 
+{
 
+  "name": "vite-react-typescript-starter",
 
+  "private": true,
 
+  "version": "0.0.0",
 
+  "type": "module",
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "vite build",
 
+    "lint": "eslint .",
 
+    "preview": "vite preview"
 
+  },
 
+  "dependencies": {
 
+    "lucide-react": "^0.344.0",
 
+    "react": "^18.3.1",
 
+    "react-dom": "^18.3.1",
 
+    "react-router-dom": "^6.27.0"
 
+  },
 
+  "devDependencies": {
 
+    "@eslint/js": "^9.9.1",
 
+    "@types/react": "^18.3.5",
 
+    "@types/react-dom": "^18.3.0",
 
+    "@vitejs/plugin-react": "^4.3.1",
 
+    "autoprefixer": "^10.4.18",
 
+    "eslint": "^9.9.1",
 
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
 
+    "eslint-plugin-react-refresh": "^0.4.11",
 
+    "globals": "^15.9.0",
 
+    "postcss": "^8.4.35",
 
+    "tailwindcss": "^3.4.1",
 
+    "typescript": "^5.5.3",
 
+    "typescript-eslint": "^8.3.0",
 
+    "vite": "^5.4.2"
 
+  }
 
+}

+ 6 - 0
postcss.config.js
Wyświetl plik 

@@ -0,0 +1,6 @@
 
+export default {
 
+  plugins: {
 
+    tailwindcss: {},
 
+    autoprefixer: {},
 
+  },
 
+};

+ 31 - 0
src/App.tsx
Wyświetl plik 

@@ -0,0 +1,31 @@
 
+import React from 'react';
 
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
+import Header from './components/Header';
 
+import Footer from './components/Footer';
 
+import HomePage from './pages/HomePage';
 
+import AboutPage from './pages/AboutPage';
 
+import ProductsPage from './pages/ProductsPage';
 
+import DesignPage from './pages/DesignPage';
 
+import ContactPage from './pages/ContactPage';
 
+
 
+function App() {
 
+  return (
 
+    <Router>
 
+      <div className="min-h-screen bg-gray-100 flex flex-col">
 
+        <Header />
 
+        <main className="flex-grow">
 
+          <Routes>
 
+            <Route path="/" element={<HomePage />} />
 
+            <Route path="/about" element={<AboutPage />} />
 
+            <Route path="/products" element={<ProductsPage />} />
 
+            <Route path="/design" element={<DesignPage />} />
 
+            <Route path="/contact" element={<ContactPage />} />
 
+          </Routes>
 
+        </main>
 
+        <Footer />
 
+      </div>
 
+    </Router>
 
+  );
 
+}
 
+
 
+export default App;

+ 27 - 0
src/components/About.tsx
Wyświetl plik 

@@ -0,0 +1,27 @@
 
+import React from 'react';
 
+
 
+const About: React.FC = () => {
 
+  return (
 
+    <section className="py-16 bg-white">
 
+      <div className="container mx-auto px-4">
 
+        <div className="flex flex-wrap items-center">
 
+          <div className="w-full md:w-1/2 mb-8 md:mb-0">
 
+            <img src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="About Us" className="rounded-lg shadow-lg" />
 
+          </div>
 
+          <div className="w-full md:w-1/2 md:pl-12">
 
+            <h2 className="text-3xl font-bold mb-4">关于野服饰</h2>
 
+            <p className="text-gray-600 mb-6">
 
+              野服饰致力于将传统中国元素与现代设计完美融合，为现代女性打造既优雅又富有个性的服装。我们的设计灵感源自中国传统文化，通过创新的剪裁和面料选择，将古典美学重新诠释，赋予其现代气息。
 
+            </p>
 
+            <p className="text-gray-600 mb-6">
 
+              每一件野服饰的作品都是匠心独运的艺术品，体现了我们对品质和细节的极致追求。我们相信，真正的美不仅在于外表，更在于内在的气质和文化底蕴。
 
+            </p>
 
+            <a href="#" className="bg-gray-800 text-white py-2 px-6 rounded-full text-lg font-semibold hover:bg-gray-700 transition duration-300">了解更多</a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+  );
 
+};
 
+
 
+export default About;

+ 35 - 0
src/components/Footer.tsx
Wyświetl plik 

@@ -0,0 +1,35 @@
 
+import React from 'react';
 
+import { Facebook, Instagram, Twitter } from 'lucide-react';
 
+
 
+const Footer: React.FC = () => {
 
+  return (
 
+    <footer className="bg-gray-800 text-white py-8">
 
+      <div className="container mx-auto px-4">
 
+        <div className="flex flex-wrap justify-between">
 
+          <div className="w-full md:w-1/3 mb-6 md:mb-0">
 
+            <h3 className="text-xl font-bold mb-2">野服饰</h3>
 
+            <p className="text-gray-400">新中式女装，传统与现代的完美融合</p>
 
+          </div>
 
+          <div className="w-full md:w-1/3 mb-6 md:mb-0">
 
+            <h4 className="text-lg font-semibold mb-2">联系我们</h4>
 
+            <p className="text-gray-400">邮箱：info@yefashion.com</p>
 
+            <p className="text-gray-400">电话：+86 123 4567 8900</p>
 
+          </div>
 
+          <div className="w-full md:w-1/3">
 
+            <h4 className="text-lg font-semibold mb-2">关注我们</h4>
 
+            <div className="flex space-x-4">
 
+              <a href="#" className="text-white hover:text-gray-400"><Facebook /></a>
 
+              <a href="#" className="text-white hover:text-gray-400"><Instagram /></a>
 
+              <a href="#" className="text-white hover:text-gray-400"><Twitter /></a>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div className="mt-8 text-center text-gray-400">
 
+          <p>&copy; 2024 野服饰. 保留所有权利。</p>
 
+        </div>
 
+      </div>
 
+    </footer>
 
+  );
 
+};
 
+
 
+export default Footer;

+ 36 - 0
src/components/Header.tsx
Wyświetl plik 

@@ -0,0 +1,36 @@
 
+import React from 'react';
 
+import { Menu, X } from 'lucide-react';
 
+import { Link } from 'react-router-dom';
 
+
 
+const Header: React.FC = () => {
 
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
+
 
+  return (
 
+    <header className="bg-white shadow-md">
 
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
 
+        <Link to="/" className="text-2xl font-bold text-gray-800">野服饰</Link>
 
+        <nav className="hidden md:flex space-x-6">
 
+          <Link to="/" className="text-gray-600 hover:text-gray-800">首页</Link>
 
+          <Link to="/about" className="text-gray-600 hover:text-gray-800">关于我们</Link>
 
+          <Link to="/products" className="text-gray-600 hover:text-gray-800">产品系列</Link>
 
+          <Link to="/design" className="text-gray-600 hover:text-gray-800">设计理念</Link>
 
+          <Link to="/contact" className="text-gray-600 hover:text-gray-800">联系我们</Link>
 
+        </nav>
 
+        <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
 
+          {isMenuOpen ? <X /> : <Menu />}
 
+        </button>
 
+      </div>
 
+      {isMenuOpen && (
 
+        <div className="md:hidden">
 
+          <Link to="/" className="block py-2 px-4 text-sm hover:bg-gray-100">首页</Link>
 
+          <Link to="/about" className="block py-2 px-4 text-sm hover:bg-gray-100">关于我们</Link>
 
+          <Link to="/products" className="block py-2 px-4 text-sm hover:bg-gray-100">产品系列</Link>
 
+          <Link to="/design" className="block py-2 px-4 text-sm hover:bg-gray-100">设计理念</Link>
 
+          <Link to="/contact" className="block py-2 px-4 text-sm hover:bg-gray-100">联系我们</Link>
 
+        </div>
 
+      )}
 
+    </header>
 
+  );
 
+};
 
+
 
+export default Header;

+ 17 - 0
src/components/Hero.tsx
Wyświetl plik 

@@ -0,0 +1,17 @@
 
+import React from 'react';
 
+
 
+const Hero: React.FC = () => {
 
+  return (
 
+    <div className="relative h-screen flex items-center justify-center overflow-hidden">
 
+      <div className="absolute inset-0 bg-cover bg-center" style={{backgroundImage: "url('https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')"}}></div>
 
+      <div className="absolute inset-0 bg-black opacity-50"></div>
 
+      <div className="relative z-10 text-center text-white">
 
+        <h1 className="text-5xl md:text-6xl font-bold mb-4">野服饰</h1>
 
+        <p className="text-xl md:text-2xl mb-8">新中式女装，传统与现代的完美融合</p>
 
+        <a href="#" className="bg-white text-gray-800 py-2 px-6 rounded-full text-lg font-semibold hover:bg-gray-200 transition duration-300">探索系列</a>
 
+      </div>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default Hero;

+ 31 - 0
src/components/ProductSection.tsx
Wyświetl plik 

@@ -0,0 +1,31 @@
 
+import React from 'react';
 
+
 
+const products = [
 
+  { id: 1, name: '青花旗袍', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
 
+  { id: 2, name: '水墨长裙', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
 
+  { id: 3, name: '竹韵套装', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
 
+  { id: 4, name: '山水外套', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80' },
 
+];
 
+
 
+const ProductSection: React.FC = () => {
 
+  return (
 
+    <section className="py-16 bg-gray-50">
 
+      <div className="container mx-auto px-4">
 
+        <h2 className="text-3xl font-bold text-center mb-12">精选系列</h2>
 
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
 
+          {products.map((product) => (
 
+            <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
 
+              <img src={product.image} alt={product.name} className="w-full h-64 object-cover" />
 
+              <div className="p-4">
 
+                <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
 
+                <a href="#" className="text-blue-600 hover:underline">查看详情</a>
 
+              </div>
 
+            </div>
 
+          ))}
 
+        </div>
 
+      </div>
 
+    </section>
 
+  );
 
+};
 
+
 
+export default ProductSection;

+ 13 - 0
src/index.css
Wyświetl plik 

@@ -0,0 +1,13 @@
 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
 
+
 
+@tailwind base;
 
+@tailwind components;
 
+@tailwind utilities;
 
+
 
+body {
 
+  font-family: 'Noto Serif SC', serif;
 
+}
 
+
 
+.bg-pattern {
 
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 
+}

+ 10 - 0
src/main.tsx
Wyświetl plik 

@@ -0,0 +1,10 @@
 
+import { StrictMode } from 'react';
 
+import { createRoot } from 'react-dom/client';
 
+import App from './App.tsx';
 
+import './index.css';
 
+
 
+createRoot(document.getElementById('root')!).render(
 
+  <StrictMode>
 
+    <App />
 
+  </StrictMode>
 
+);

+ 62 - 0
src/pages/AboutPage.tsx
Wyświetl plik 

@@ -0,0 +1,62 @@
 
+import React from 'react';
 
+
 
+const AboutPage: React.FC = () => {
 
+  return (
 
+    <div className="bg-gray-50 min-h-screen">
 
+      <div className="container mx-auto px-4 py-16">
 
+        <h1 className="text-4xl font-bold text-center mb-12">关于野服饰</h1>
 
+        
+        <section className="mb-16">
 
+          <h2 className="text-3xl font-semibold mb-6">我们的故事</h2>
 
+          <p className="text-gray-700 mb-4">
 
+            野服饰诞生于2020年,是一群热爱中国传统文化的年轻设计师共同创立的新中式女装品牌。我们的使命是将中国传统美学与现代时尚完美融合,为现代女性打造既优雅又富有个性的服装。
 
+          </p>
 
+          <p className="text-gray-700 mb-4">
 
+            我们的名字"野",不仅代表了自然之美,更象征着我们追求自由、创新和突破传统框架的设计理念。我们相信,真正的时尚应该是对文化的传承和创新的完美平衡。
 
+          </p>
 
+        </section>
 
+        
+        <section className="mb-16">
 
+          <h2 className="text-3xl font-semibold mb-6">设计理念</h2>
 
+          <div className="grid md:grid-cols-3 gap-8">
 
+            <div className="bg-white p-6 rounded-lg shadow-md">
 
+              <h3 className="text-xl font-semibold mb-4">传统与现代的融合</h3>
 
+              <p className="text-gray-700">我们将中国传统元素如水墨画、青花瓷等融入现代剪裁中,创造出独特的视觉语言。</p>
 
+            </div>
 
+            <div className="bg-white p-6 rounded-lg shadow-md">
 
+              <h3 className="text-xl font-semibold mb-4">匠心工艺</h3>
 
+              <p className="text-gray-700">每件作品都经过精心制作,从面料选择到缝纫细节,我们都力求完美。</p>
 
+            </div>
 
+            <div className="bg-white p-6 rounded-lg shadow-md">
 
+              <h3 className="text-xl font-semibold mb-4">可持续时尚</h3>
 
+              <p className="text-gray-700">我们注重环保材料的使用,追求时尚与环境保护的和谐统一。</p>
 
+            </div>
 
+          </div>
 
+        </section>
 
+        
+        <section>
 
+          <h2 className="text-3xl font-semibold mb-6">我们的团队</h2>
 
+          <div className="grid md:grid-cols-3 gap-8">
 
+            <div className="text-center">
 
+              <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="设计师照片" className="w-40 h-40 rounded-full mx-auto mb-4 object-cover" />
 
+              <h3 className="text-xl font-semibold">李梦华</h3>
 
+              <p className="text-gray-600">创始人 &amp; 首席设计师</p>
 
+            </div>
 
+            <div className="text-center">
 
+              <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="设计师照片" className="w-40 h-40 rounded-full mx-auto mb-4 object-cover" />
 
+              <h3 className="text-xl font-semibold">张艺谋</h3>
 
+              <p className="text-gray-600">面料开发总监</p>
 
+            </div>
 
+            <div className="text-center">
 
+              <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="设计师照片" className="w-40 h-40 rounded-full mx-auto mb-4 object-cover" />
 
+              <h3 className="text-xl font-semibold">王菲</h3>
 
+              <p className="text-gray-600">市场营销总监</p>
 
+            </div>
 
+          </div>
 
+        </section>
 
+      </div>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default AboutPage;

+ 49 - 0
src/pages/ContactPage.tsx
Wyświetl plik 

@@ -0,0 +1,49 @@
 
+import React from 'react';
 
+
 
+const ContactPage: React.FC = () => {
 
+  return (
 
+    <div className="bg-gray-50 min-h-screen py-16">
 
+      <div className="container mx-auto px-4">
 
+        <h1 className="text-4xl font-bold text-center mb-12">联系我们</h1>
 
+        
+        <div className="flex flex-wrap -mx-4">
 
+          <div className="w-full md:w-1/2 px-4 mb-8">
 
+            <h2 className="text-2xl font-semibold mb-4">联系方式</h2>
 
+            <p className="mb-2"><strong>地址：</strong>上海市静安区南京西路1788号</p>
 
+            <p className="mb-2"><strong>电话：</strong>+86 123 4567 8900</p>
 
+            <p className="mb-2"><strong>邮箱：</strong>info@yefashion.com</p>
 
+            <p className="mb-6"><strong>营业时间：</strong>周一至周五 9:00-18:00</p>
 
+            
+            <h3 className="text-xl font-semibold mb-3">关注我们</h3>
 
+            <div className="flex space-x-4">
 
+              <a href="#" className="text-gray-600 hover:text-gray-800">微博</a>
 
+              <a href="#" className="text-gray-600 hover:text-gray-800">微信</a>
 
+              <a href="#" className="text-gray-600 hover:text-gray-800">小红书</a>
 
+            </div>
 
+          </div>
 
+          
+          <div className="w-full md:w-1/2 px-4">
 
+            <h2 className="text-2xl font-semibold mb-4">给我们留言</h2>
 
+            <form>
 
+              <div className="mb-4">
 
+                <label htmlFor="name" className="block text-gray-700 font-semibold mb-2">姓名</label>
 
+                <input type="text" id="name" name="name" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required />
 
+              </div>
 
+              <div className="mb-4">
 
+                <label htmlFor="email" className="block text-gray-700 font-semibold mb-2">邮箱</label>
 
+                <input type="email" id="email" name="email" className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required />
 
+              </div>
 
+              <div className="mb-4">
 
+                <label htmlFor="message" className="block text-gray-700 font-semibold mb-2">留言</label>
 
+                <textarea id="message" name="message" rows={4} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" required></textarea>
 
+              </div>
 
+              <button type="submit" className="bg-primary text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition duration-300">发送留言</button>
 
+            </form>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default ContactPage;

+ 64 - 0
src/pages/DesignPage.tsx
Wyświetl plik 

@@ -0,0 +1,64 @@
 
+import React from 'react';
 
+
 
+const DesignPage: React.FC = () => {
 
+  return (
 
+    <div className="bg-gray-50 min-h-screen py-16">
 
+      <div className="container mx-auto px-4">
 
+        <h1 className="text-4xl font-bold text-center mb-12">设计理念</h1>
 
+        
+        <div className="mb-16">
 
+          <h2 className="text-3xl font-semibold mb-6">传统与现代的融合</h2>
 
+          <div className="flex flex-wrap items-center">
 
+            <div className="w-full md:w-1/2 mb-6 md:mb-0">
 
+              <img src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="传统与现代" className="rounded-lg shadow-lg" />
 
+            </div>
 
+            <div className="w-full md:w-1/2 md:pl-8">
 
+              <p className="text-gray-700 mb-4">
 
+                在野服饰，我们致力于将中国传统文化元素与现代设计语言完美融合。我们汲取古典美学的精髓，通过创新的剪裁和现代面料，赋予传统服饰新的生命力。
 
+              </p>
 
+              <p className="text-gray-700">
 
+                每一件作品都是对传统的致敬，同时也是对现代审美的诠释。我们相信，真正的创新源于对传统的深刻理解和大胆突破。
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <div className="mb-16">
 
+          <h2 className="text-3xl font-semibold mb-6">自然灵感</h2>
 
+          <div className="flex flex-wrap items-center flex-row-reverse">
 
+            <div className="w-full md:w-1/2 mb-6 md:mb-0 md:pl-8">
 
+              <img src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="自然灵感" className="rounded-lg shadow-lg" />
 
+            </div>
 
+            <div className="w-full md:w-1/2">
 
+              <p className="text-gray-700 mb-4">
 
+                大自然是我们永恒的灵感来源。从山水画的意境到花鸟虫鱼的生动，我们将自然元素巧妙地融入设计中，创造出既和谐又独特的服饰作品。
 
+              </p>
 
+              <p className="text-gray-700">
 
+                通过精心选择的色彩、图案和质地，我们努力在每件作品中呈现自然的美感和生命力。
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        
+        <div>
 
+          <h2 className="text-3xl font-semibold mb-6">可持续时尚</h2>
 
+          <div className="flex flex-wrap items-center">
 
+            <div className="w-full md:w-1/2 mb-6 md:mb-0">
 
+              <img src="https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="可持续时尚" className="rounded-lg shadow-lg" />
 
+            </div>
 
+            <div className="w-full md:w-1/2 md:pl-8">
 
+              <p className="text-gray-700 mb-4">
 
+                在追求美学的同时，我们也深知对环境负责的重要性。野服饰积极采用环保面料和可持续的生产方式，努力减少我们的碳足迹。
 
+              </p>
 
+              <p className="text-gray-700">
 
+                我们相信，真正的美不仅体现在外表，更在于对地球和未来的责任。通过可持续的设计理念，我们希望为时尚产业的绿色转型贡献自己的力量。
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default DesignPage;

+ 16 - 0
src/pages/HomePage.tsx
Wyświetl plik 

@@ -0,0 +1,16 @@
 
+import React from 'react';
 
+import Hero from '../components/Hero';
 
+import ProductSection from '../components/ProductSection';
 
+import About from '../components/About';
 
+
 
+const HomePage: React.FC = () => {
 
+  return (
 
+    <>
 
+      <Hero />
 
+      <ProductSection />
 
+      <About />
 
+    </>
 
+  );
 
+};
 
+
 
+export default HomePage;

+ 34 - 0
src/pages/ProductsPage.tsx
Wyświetl plik 

@@ -0,0 +1,34 @@
 
+import React from 'react';
 
+
 
+const products = [
 
+  { id: 1, name: '青花旗袍', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '融合青花瓷元素的现代旗袍' },
 
+  { id: 2, name: '水墨长裙', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '灵感源自中国水墨画的飘逸长裙' },
 
+  { id: 3, name: '竹韵套装', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '以竹子为灵感的清新套装' },
 
+  { id: 4, name: '山水外套', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '将山水画意境融入现代外套设计' },
 
+  { id: 5, name: '牡丹礼服', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '以牡丹为主题的华丽礼服' },
 
+  { id: 6, name: '茶韵连衣裙', image: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80', description: '茶文化启发的优雅连衣裙' },
 
+];
 
+
 
+const ProductsPage: React.FC = () => {
 
+  return (
 
+    <div className="bg-gray-50 min-h-screen py-16">
 
+      <div className="container mx-auto px-4">
 
+        <h1 className="text-4xl font-bold text-center mb-12">产品系列</h1>
 
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
+          {products.map((product) => (
 
+            <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
 
+              <img src={product.image} alt={product.name} className="w-full h-64 object-cover" />
 
+              <div className="p-4">
 
+                <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
 
+                <p className="text-gray-600 mb-4">{product.description}</p>
 
+                <a href="#" className="text-primary hover:underline">查看详情</a>
 
+              </div>
 
+            </div>
 
+          ))}
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+};
 
+
 
+export default ProductsPage;

+ 1 - 0
src/vite-env.d.ts
Wyświetl plik 

@@ -0,0 +1 @@
 
+/// <reference types="vite/client" />

+ 16 - 0
tailwind.config.js
Wyświetl plik 

@@ -0,0 +1,16 @@
 
+/** @type {import('tailwindcss').Config} */
 
+export default {
 
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 
+  theme: {
 
+    extend: {
 
+      colors: {
 
+        primary: '#8B4513',
 
+        secondary: '#D2B48C',
 
+      },
 
+      fontFamily: {
 
+        sans: ['Noto Serif SC', 'serif'],
 
+      },
 
+    },
 
+  },
 
+  plugins: [],
 
+};

+ 24 - 0
tsconfig.app.json
Wyświetl plik 

@@ -0,0 +1,24 @@
 
+{
 
+  "compilerOptions": {
 
+    "target": "ES2020",
 
+    "useDefineForClassFields": true,
 
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
 
+    "module": "ESNext",
 
+    "skipLibCheck": true,
 
+
 
+    /* Bundler mode */
 
+    "moduleResolution": "bundler",
 
+    "allowImportingTsExtensions": true,
 
+    "isolatedModules": true,
 
+    "moduleDetection": "force",
 
+    "noEmit": true,
 
+    "jsx": "react-jsx",
 
+
 
+    /* Linting */
 
+    "strict": true,
 
+    "noUnusedLocals": true,
 
+    "noUnusedParameters": true,
 
+    "noFallthroughCasesInSwitch": true
 
+  },
 
+  "include": ["src"]
 
+}

+ 7 - 0
tsconfig.json
Wyświetl plik 

@@ -0,0 +1,7 @@
 
+{
 
+  "files": [],
 
+  "references": [
 
+    { "path": "./tsconfig.app.json" },
 
+    { "path": "./tsconfig.node.json" }
 
+  ]
 
+}

+ 22 - 0
tsconfig.node.json
Wyświetl plik 

@@ -0,0 +1,22 @@
 
+{
 
+  "compilerOptions": {
 
+    "target": "ES2022",
 
+    "lib": ["ES2023"],
 
+    "module": "ESNext",
 
+    "skipLibCheck": true,
 
+
 
+    /* Bundler mode */
 
+    "moduleResolution": "bundler",
 
+    "allowImportingTsExtensions": true,
 
+    "isolatedModules": true,
 
+    "moduleDetection": "force",
 
+    "noEmit": true,
 
+
 
+    /* Linting */
 
+    "strict": true,
 
+    "noUnusedLocals": true,
 
+    "noUnusedParameters": true,
 
+    "noFallthroughCasesInSwitch": true
 
+  },
 
+  "include": ["vite.config.ts"]
 
+}

+ 7 - 0
vite.config.ts
Wyświetl plik 

@@ -0,0 +1,7 @@
 
+import { defineConfig } from 'vite';
 
+import react from '@vitejs/plugin-react';
 
+
 
+// https://vitejs.dev/config/
 
+export default defineConfig({
 
+  plugins: [react()],
 
+});