From 68648d7da13c6c6e1cfa537efe9d219090d1a00e Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Apr 2026 03:05:31 +0000 Subject: [PATCH 01/21] feat: add CongYou ESG single-page website MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Modern React + Tailwind + Framer Motion website for 琮祐企業 (CongYou ESG) featuring marble-textured hero, scroll-reveal animations, product tabs, comparison table, infinite certification carousel, and contact form. https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB --- esg-website/.gitignore | 4 + esg-website/index.html | 19 ++ esg-website/package.json | 22 ++ esg-website/postcss.config.js | 6 + esg-website/src/App.jsx | 25 ++ esg-website/src/components/Certification.jsx | 85 +++++++ .../src/components/ComparisonTable.jsx | 124 ++++++++++ esg-website/src/components/ContactForm.jsx | 225 ++++++++++++++++++ esg-website/src/components/FadeIn.jsx | 33 +++ esg-website/src/components/Features.jsx | 134 +++++++++++ esg-website/src/components/Footer.jsx | 66 +++++ esg-website/src/components/Hero.jsx | 169 +++++++++++++ esg-website/src/components/Navbar.jsx | 125 ++++++++++ esg-website/src/components/ProductTabs.jsx | 168 +++++++++++++ esg-website/src/index.css | 24 ++ esg-website/src/main.jsx | 10 + esg-website/tailwind.config.js | 19 ++ esg-website/vite.config.js | 6 + 18 files changed, 1264 insertions(+) create mode 100644 esg-website/.gitignore create mode 100644 esg-website/index.html create mode 100644 esg-website/package.json create mode 100644 esg-website/postcss.config.js create mode 100644 esg-website/src/App.jsx create mode 100644 esg-website/src/components/Certification.jsx create mode 100644 esg-website/src/components/ComparisonTable.jsx create mode 100644 esg-website/src/components/ContactForm.jsx create mode 100644 esg-website/src/components/FadeIn.jsx create mode 100644 esg-website/src/components/Features.jsx create mode 100644 esg-website/src/components/Footer.jsx create mode 100644 esg-website/src/components/Hero.jsx create mode 100644 esg-website/src/components/Navbar.jsx create mode 100644 esg-website/src/components/ProductTabs.jsx create mode 100644 esg-website/src/index.css create mode 100644 esg-website/src/main.jsx create mode 100644 esg-website/tailwind.config.js create mode 100644 esg-website/vite.config.js diff --git a/esg-website/.gitignore b/esg-website/.gitignore new file mode 100644 index 0000000..9145c03 --- /dev/null +++ b/esg-website/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +dist/ +.env +.DS_Store diff --git a/esg-website/index.html b/esg-website/index.html new file mode 100644 index 0000000..1e93662 --- /dev/null +++ b/esg-website/index.html @@ -0,0 +1,19 @@ + + + + + + 琮祐企業 — CongYou ESG | 石頭紙系列 + + + + + + +
+ + + diff --git a/esg-website/package.json b/esg-website/package.json new file mode 100644 index 0000000..759457a --- /dev/null +++ b/esg-website/package.json @@ -0,0 +1,22 @@ +{ + "name": "congyou-esg", + "version": "1.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "framer-motion": "^11.3.0", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.3.1", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.39", + "tailwindcss": "^3.4.4", + "vite": "^5.3.1" + } +} diff --git a/esg-website/postcss.config.js b/esg-website/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/esg-website/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/esg-website/src/App.jsx b/esg-website/src/App.jsx new file mode 100644 index 0000000..ef6a736 --- /dev/null +++ b/esg-website/src/App.jsx @@ -0,0 +1,25 @@ +import Navbar from './components/Navbar' +import Hero from './components/Hero' +import Features from './components/Features' +import ProductTabs from './components/ProductTabs' +import ComparisonTable from './components/ComparisonTable' +import Certification from './components/Certification' +import ContactForm from './components/ContactForm' +import Footer from './components/Footer' + +export default function App() { + return ( +
+ +
+ + + + + + +
+
+
+ ) +} diff --git a/esg-website/src/components/Certification.jsx b/esg-website/src/components/Certification.jsx new file mode 100644 index 0000000..25b825a --- /dev/null +++ b/esg-website/src/components/Certification.jsx @@ -0,0 +1,85 @@ +import { useRef } from 'react' +import { motion } from 'framer-motion' +import FadeIn from './FadeIn' + +const certs = [ + { abbr: 'SGS', name: 'SGS 認證', desc: '國際標準品質驗證' }, + { abbr: 'FDA', name: 'FDA 認證', desc: '美國食品藥物安全' }, + { abbr: 'ISO\n14001', name: 'ISO 14001', desc: '環境管理系統' }, + { abbr: 'CE', name: 'CE 認證', desc: '歐盟合規標誌' }, + { abbr: '綠標', name: '台灣環保標章', desc: '通過台灣環保署認證' }, + { abbr: 'Carbon\nFP', name: '碳足跡標籤', desc: 'Carbon Footprint Label' }, + { abbr: 'ECOLOGO', name: 'ECOLOGO', desc: '北美環保認證' }, +] + +function CertCard({ cert }) { + return ( +
+
+ + {cert.abbr} + +
+
+

{cert.name}

+

{cert.desc}

+
+
+ ) +} + +export default function Certification() { + const duplicated = [...certs, ...certs] + + return ( +
+
+ +

Certifications

+

國際認證標章

+

+ 通過嚴格第三方機構驗證，品質與環保雙重保障。 +

+ +
+ + {/* Infinite scroll strip */} +
+ {/* Left fade */} +
+ {/* Right fade */} +
+ + + {duplicated.map((cert, i) => ( + + ))} + +
+ + {/* Bottom stats */} +
+ +
+ {[ + { value: '7+', label: '國際認證' }, + { value: '15+', label: '年產業經驗' }, + { value: '30+', label: '服務國家' }, + { value: '500+', label: '合作企業' }, + ].map((item) => ( +
+
{item.value}
+
{item.label}
+
+ ))} +
+ +
+
+ ) +} diff --git a/esg-website/src/components/ComparisonTable.jsx b/esg-website/src/components/ComparisonTable.jsx new file mode 100644 index 0000000..2e7cc11 --- /dev/null +++ b/esg-website/src/components/ComparisonTable.jsx @@ -0,0 +1,124 @@ +import FadeIn from './FadeIn' + +function CheckIcon() { + return ( + + + + + ) +} + +function XIcon() { + return ( + + + + + ) +} + +const rows = [ + { + category: '耐水性', + traditional: { icon: , text: '遇水即軟損', bad: true }, + congyou: { icon: , text: '浸水 72h 不損', bad: false }, + }, + { + category: '抗凍性', + traditional: { icon: , text: '低溫易脆裂', bad: true }, + congyou: { icon: , text: '抗凍達 -20°C', bad: false }, + }, + { + category: '碳排放', + traditional: { icon: , text: '高碳排（砍伐＋製漿）', bad: true }, + congyou: { icon: , text: '低碳排（-60%）', bad: false }, + }, + { + category: '製程用水', + traditional: { icon: , text: '大量用水，排放廢液', bad: true }, + congyou: { icon: , text: '無需用水，零廢液', bad: false }, + }, + { + category: '使用壽命', + traditional: { icon: , text: '一次性，易損耗', bad: true }, + congyou: { icon: , text: '耐用，可多次使用', bad: false }, + }, + { + category: '回收再利用', + traditional: { icon: , text: '潮濕後無法回收', bad: true }, + congyou: { icon: , text: '100% 可回收', bad: false }, + }, + { + category: '環保認證', + traditional: { icon: , text: '通常無', bad: true }, + congyou: { icon: , text: 'SGS · FDA · ISO', bad: false }, + }, + { + category: '食品安全', + traditional: { icon: , text: '受限（含螢光劑）', bad: true }, + congyou: { icon: , text: 'FDA 認證，無毒安全', bad: false }, + }, +] + +export default function ComparisonTable() { + return ( +
+
+ +

Comparison

+

傳統 vs 琮祐

+

+ 全面對比傳統紙箱與琮祐石頭紙箱，讓數據說話。 +

+ + + +
+ {/* Header */} +
+
比較項目
+
+

傳統紙箱

+

Traditional Box

+
+
+

琮祐石頭紙箱

+

CongYou Stone Paper

+
+
+ + {/* Rows */} + {rows.map((row, i) => ( +
+
+ {row.category} +
+
+ {row.traditional.icon} + {row.traditional.text} +
+
+ {row.congyou.icon} + {row.congyou.text} +
+
+ ))} +
+ + + {/* Bottom note */} + +

+ * 數據來源：SGS 第三方檢測報告 · 內部研究數據 +

+ +
+
+ ) +} diff --git a/esg-website/src/components/ContactForm.jsx b/esg-website/src/components/ContactForm.jsx new file mode 100644 index 0000000..32b9eb9 --- /dev/null +++ b/esg-website/src/components/ContactForm.jsx @@ -0,0 +1,225 @@ +import { useState } from 'react' +import { motion, AnimatePresence } from 'framer-motion' +import FadeIn from './FadeIn' + +const subjects = [ + '石頭紙箱規格詢問', + '可分解破壞袋洽詢', + '環保緩衝材詢問', + 'ODM / OEM 客製服務', + '代理合作洽談', + '其他', +] + +function Field({ label, children }) { + return ( +
+ + {children} +
+ ) +} + +const inputClass = + 'w-full px-4 py-3 rounded-xl border border-gray-200 bg-white text-sm text-gray-800 font-light placeholder:text-gray-300 focus:outline-none focus:border-forest/40 focus:ring-2 focus:ring-forest/10 transition-all duration-200' + +export default function ContactForm() { + const [submitted, setSubmitted] = useState(false) + const [form, setForm] = useState({ + name: '', company: '', email: '', phone: '', subject: '', message: '', + }) + + const handleSubmit = (e) => { + e.preventDefault() + setSubmitted(true) + } + + const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })) + + return ( +
+
+
+ {/* Left info column */} + +
+

Contact Us

+

+ 預約專業諮詢 +

+

+ 無論您是品牌端、代理商或通路商，歡迎與我們的顧問團隊聯繫， + 共同探索最適合您的永續包裝解決方案。 +

+ +
+ {[ + { + icon: ( + + + + + ), + label: '公司地址', + value: '台灣 · 台北市', + }, + { + icon: ( + + + + + ), + label: '電子郵件', + value: 'info@congyou-esg.com', + }, + { + icon: ( + + + + ), + label: '聯絡電話', + value: '+886 2 XXXX-XXXX', + }, + ].map((item) => ( +
+
+ {item.icon} +
+
+

{item.label}

+

{item.value}

+
+
+ ))} +
+
+ + + {/* Form column */} + +
+ + {submitted ? ( + +
+ + + +
+

諮詢已送出

+

+ 感謝您的詢問！我們的顧問將於 1-2 個工作天內與您聯繫。 +

+ + + ) : ( + +
+ + + + + + +
+ +
+ + + + + + +
+ + + + + + +