feat: add CongYou ESG single-page website#1
Open
choujame wants to merge 23 commits into
Open
Conversation
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
…4th product - Add DataDashboard section with animated counters (保護樹木/CO₂/認證/夥伴) - Replace hand-drawn SVG icons with Lucide-React throughout - Expand Features to 6 cards in 2×3 grid (added FDA & tree-free) - Add PGT 環保餐具 as 4th product tab with full specs - Expand ComparisonTable to 11 comparison rows - Add partner logos wall (10 global brands) to Certification section - Redesign ContactForm as 索取樣品 sample-request form with size selector - Enhance Hero with animated gradient blobs (Shinkai-style luminous glow) - Improve Footer with Lucide icons and 3-column link structure https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
…on & scroll-active nav
Language Toggle:
- LanguageContext (React context) with zh ↔ en toggle
- Globe icon button in Navbar (desktop + mobile)
- All 9 components fully bilingual via { zh, en }[lang] pattern
New Section — 產業應用 / Industry Solutions (#solutions):
- 3 animated cards: Cold Chain / Green E-Commerce / Industrial Buffering
- Colored gradient headers with Lucide icons
- Bilingual descriptions, tags, and product links
- Connects to content structure from the design brief
Navbar Enhancement:
- IntersectionObserver-based active section highlight
- Animated underline (Framer Motion layoutId) follows current section
- Smooth spring transition between sections
https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
…-top New components: - ESGVision (#esg): E/S/G three-pillar cards with metrics + animated sustainability roadmap timeline (desktop horizontal / mobile vertical) - FAQ: accordion with 8 bilingual Q&A, animated expand/collapse via AnimatePresence, numbered items, inline CTA - ScrollProgress: Framer Motion scaleX bar pinned at viewport top - BackToTop: floating button appears after 600px scroll, spring animation Navigation: - Navbar gains "ESG 願景 / ESG Vision" entry pointing to #esg - Full page order: Hero → DataDashboard → IndustrySolutions → Features → ProductTabs → ComparisonTable → ESGVision → FAQ → Certification → ContactForm → Footer https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
- Build on ubuntu-latest with Node 20 - Deploys dist/ to gh-pages branch via peaceiris/actions-gh-pages@v3 - Triggers on push to claude/build-esg-website-a30rS affecting esg-website/** - Set vite base to /cozeworkflows/ for correct GitHub Pages asset paths Live URL after enabling Pages: https://choujame.github.io/cozeworkflows/ https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
- Hero: rotating Ensō brush circle, floating animated leaves, ghost '石' kanji background, bamboo silhouettes at bottom corners - Features: warm ivory bg (#F7F4EF), seigaiha overlapping-circle pattern, ghost card numbers (01-06), green left-border accent on cards, ink brush stroke above section heading, ghost '技' kanji - DataDashboard: ghost '緑' kanji (right), bamboo silhouette (left), stronger radial glow, organic wave-cut bottom edge - CSS: three leaf-sway animation keyframes (animate-leaf-1/2/3) https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
- Renamed: 可分解破壞袋 → 二次循環破壞袋, 環保緩衝材 → 緩衝材, PGT 環保餐具 → 餐具 - Added: 背心袋 (Stone Paper Vest Bag), 環保生物袋 (Eco Bio Bag) - ProductVisual supports image URL (image field, null until Drive linked) - Tab bar widened to max-w-3xl for 6 products - Full bilingual content for all 6 products https://claude.ai/code/session_01WMg7Ym59g8DxpHyEoET1fB
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ompatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…T tableware vs melamine
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ❌ Deployment failed View logs |
cozeworkflows | e86d7c2 | May 13 2026, 03:50 PM |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
新增「給每天在路上的你」外送員區塊：故事性場景文案、耐熱石塑袋四大特點、雙 CTA 按鈕（索取樣品 / 請店家換袋），插於 IndustrySolutions 與 Features 之間。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
為六項主力產品各建立一個 B2B 故事區塊，深淺背景交替： - 石頭紙箱 → 生鮮電商採購（冷鏈損箱） - 破壞袋 → 電商品牌主（開箱負評） - 背心袋 → 連鎖超市採購（限塑合規） - 緩衝材 → 製造業外銷採購（ESG 門檻） - 耐熱石塑袋 → 餐廳老闆（外送評分） - 環保生物袋 → 有機農產業者（包裝破功） 每區塊：受眾 badge、場景故事卡、四大特點、雙 CTA，受眾統一為 B2B 決策者。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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