diff --git a/.gitignore b/.gitignore index d02424c..18a8ff5 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,6 @@ yarn-error.log* !.yarn/sdks !.yarn/versions .DS_Store + +# ZCode local config +.zcodeignore diff --git a/design-refs/pinterest/00-e-learning-platform---learning-plan-dash.jpg b/design-refs/pinterest/00-e-learning-platform---learning-plan-dash.jpg new file mode 100644 index 0000000..ece6b7c Binary files /dev/null and b/design-refs/pinterest/00-e-learning-platform---learning-plan-dash.jpg differ diff --git a/design-refs/pinterest/01-online-course-platform-concept.jpg b/design-refs/pinterest/01-online-course-platform-concept.jpg new file mode 100644 index 0000000..eade58b Binary files /dev/null and b/design-refs/pinterest/01-online-course-platform-concept.jpg differ diff --git a/design-refs/pinterest/02-education-platform.jpg b/design-refs/pinterest/02-education-platform.jpg new file mode 100644 index 0000000..ff55411 Binary files /dev/null and b/design-refs/pinterest/02-education-platform.jpg differ diff --git a/design-refs/pinterest/03-learnify---uxui-design-of-the-online-cou.jpg b/design-refs/pinterest/03-learnify---uxui-design-of-the-online-cou.jpg new file mode 100644 index 0000000..49a1212 Binary files /dev/null and b/design-refs/pinterest/03-learnify---uxui-design-of-the-online-cou.jpg differ diff --git a/design-refs/pinterest/04-coursue-learning-platform-dashboard.jpg b/design-refs/pinterest/04-coursue-learning-platform-dashboard.jpg new file mode 100644 index 0000000..2bde057 Binary files /dev/null and b/design-refs/pinterest/04-coursue-learning-platform-dashboard.jpg differ diff --git a/design-refs/pinterest/05-edtech---online-learning-startup-web-ui-.jpg b/design-refs/pinterest/05-edtech---online-learning-startup-web-ui-.jpg new file mode 100644 index 0000000..4b3b748 Binary files /dev/null and b/design-refs/pinterest/05-edtech---online-learning-startup-web-ui-.jpg differ diff --git a/design-refs/pinterest/06-task-management-app-ui-design.jpg b/design-refs/pinterest/06-task-management-app-ui-design.jpg new file mode 100644 index 0000000..442c39c Binary files /dev/null and b/design-refs/pinterest/06-task-management-app-ui-design.jpg differ diff --git a/design-refs/pinterest/07-checklist-design---curated-list-for-ui-c.jpg b/design-refs/pinterest/07-checklist-design---curated-list-for-ui-c.jpg new file mode 100644 index 0000000..83d11fe Binary files /dev/null and b/design-refs/pinterest/07-checklist-design---curated-list-for-ui-c.jpg differ diff --git a/design-refs/pinterest/08-onboarding-steps--untitled-ui.jpg b/design-refs/pinterest/08-onboarding-steps--untitled-ui.jpg new file mode 100644 index 0000000..829fa21 Binary files /dev/null and b/design-refs/pinterest/08-onboarding-steps--untitled-ui.jpg differ diff --git a/design-refs/pinterest/09-onboarding-progress-designs-themes-templ.jpg b/design-refs/pinterest/09-onboarding-progress-designs-themes-templ.jpg new file mode 100644 index 0000000..232ee60 Binary files /dev/null and b/design-refs/pinterest/09-onboarding-progress-designs-themes-templ.jpg differ diff --git a/design-refs/pinterest/10-minidil-website-on-behance.jpg b/design-refs/pinterest/10-minidil-website-on-behance.jpg new file mode 100644 index 0000000..a6d2ba3 Binary files /dev/null and b/design-refs/pinterest/10-minidil-website-on-behance.jpg differ diff --git a/design-refs/pinterest/11-how-does-scroll-into-view-work.jpg b/design-refs/pinterest/11-how-does-scroll-into-view-work.jpg new file mode 100644 index 0000000..b6b8950 Binary files /dev/null and b/design-refs/pinterest/11-how-does-scroll-into-view-work.jpg differ diff --git a/design-refs/pinterest/12-tutorials-templates-figma--constructor-u.jpg b/design-refs/pinterest/12-tutorials-templates-figma--constructor-u.jpg new file mode 100644 index 0000000..1cd32a1 Binary files /dev/null and b/design-refs/pinterest/12-tutorials-templates-figma--constructor-u.jpg differ diff --git a/design-refs/pinterest/README.md b/design-refs/pinterest/README.md new file mode 100644 index 0000000..51d804b --- /dev/null +++ b/design-refs/pinterest/README.md @@ -0,0 +1,44 @@ +# Pinterest 设计稿参考（教程网站重构） + +来源：Pinterest 调研（2026-10-02），每张图已溯源到原始出处。版权状况见文末。 +逐项元数据见 [sources.json](./sources.json)。 + +## 学习面板（靶子区 + 步骤验收） + +| 文件 | 设计稿 | 原始出处 | +|---|---|---| +| `00-e-learning-platform---learning-plan-dash.jpg` | E-learning Learning Plan Dashboard（Bogdan Nikitin） | [Dribbble](https://dribbble.com/shots/23956256) / [pin](https://www.pinterest.com/pin/8162843069852607/) | +| `04-coursue-learning-platform-dashboard.jpg` | Coursue Dashboard（Fireart） | [Dribbble](https://dribbble.com/shots/23027887-Coursue-Learning-Platform-Dashboard) / [pin](https://www.pinterest.com/pin/coursue-learning-platform-dashboard--628815166755740834/) | +| `02-education-platform.jpg` | W-Power Courses Dashboard（Awsmd） | [Dribbble](https://dribbble.com/shots/20197120-W-Power-Courses-Dashboar) / [pin](https://in.pinterest.com/pin/education-platform--104286547617862574/) | +| `01-online-course-platform-concept.jpg` | Online Course Platform Concept（Petr Dudchenko） | [Dribbble](https://dribbble.com/shots/10858901-Online-Course-Platform-Concept) / [pin](https://www.pinterest.com/pin/online-course-platform-concept--178525572723551326/) | +| `03-learnify---uxui-design-of-the-online-cou.jpg` | Learnify 在线课程平台（Outright） | [Dribbble](https://dribbble.com/shots/24454737-Learnify-UX-UI-design-of) / [pin](https://in.pinterest.com/pin/482800022571266106/) | + +## 清单 / 任务（步骤卡 + 验收产物） + +| 文件 | 设计稿 | 原始出处 | +|---|---|---| +| `06-task-management-app-ui-design.jpg` | Taskique 任务管理（Rifat）——含子任务勾选清单，重点参考 | [Dribbble](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-d) / [pin](https://in.pinterest.com/pin/task-management-app-ui-design--2674081025197797/) | +| `07-checklist-design---curated-list-for-ui-c.jpg` | Checklist Design 清单资源站 | [checklist.design](https://www.checklist.design/) / [pin](https://br.pinterest.com/pin/232357662016396948/) | + +## 引导流（指派学习 + 脱靶提醒） + +| 文件 | 设计稿 | 原始出处 | +|---|---|---| +| `08-onboarding-steps--untitled-ui.jpg` | Onboarding steps（Untitled UI / Jordan Hughes） | [Dribbble](https://dribbble.com/shots/23081995-Onboarding-steps-Untitled-UI) / [pin](https://www.pinterest.com/pin/569494315400426794/) | +| `09-onboarding-progress-designs-themes-templ.jpg` | Dashboard Onboarding 进度引导 | [Dribbble](https://dribbble.com/shots/18975440-Dashboard-Onboarding) / [pin](https://www.pinterest.com/pin/onboarding-progress-designs-themes-templates-on-dribbble--93309023522230046/) | + +## 教程站整体气质 + +| 文件 | 设计稿 | 原始出处 | +|---|---|---| +| `10-minidil-website-on-behance.jpg` | Minidil 教育网站（Behance） | [pin](https://www.pinterest.com/pin/828803137701519210/)（Behance 原项目未在 pin 页标注外链） | +| `11-how-does-scroll-into-view-work.jpg` | How it works - Scroll into view（Webflow 模板） | [Webflow](https://webflow.com/website/How-it-works-Scroll-into-view) / [pin](https://www.pinterest.com/pin/how-it-works-scroll-into-view-webflow--22166223162567510/) | +| `12-tutorials-templates-figma--constructor-u.jpg` | Constructor UI Kit 教程页（Spline） | [constructor.spline.one](https://constructor.spline.one/startups/tutorials) / [pin](https://www.pinterest.com/pin/tutorials--635007616233735559/) | +| `05-edtech---online-learning-startup-web-ui-.jpg` | EdTech 学习站 UI Kit | [UI8](https://ui8.net/dhuhacreative/products/edtech---online-learning-startu) / [pin](https://www.pinterest.com/pin/edtech-online-learning-startup-web-ui-kit--951807702477768443/) | + +## 版权状况 + +- ✅ **可直接使用**：Untitled UI 免费版组件（[license](https://www.untitledui.com/license)：无限个人/商用、无需署名，禁止转售与用于竞争性 UI kit；部分 React 组件 MIT）。 +- ⚠️ **仅作灵感参考，禁止复刻/搬图**：所有 Dribbble shots、Behance（Minidil）、Pinterest 上的一切 re-pin 图（Pinterest 不授予再利用权，以原始出处为准）。checklist.design 未声明内容再利用条款，参考其组织方式、不照抄条目文案。 +- 💰 **需付费**：UI8 EdTech Kit、Constructor（Spline）、Untitled UI PRO。 +- 落地建议：借鉴信息架构与布局思想，用 shadcn/ui + Untitled UI 免费版等可商用组件库重新实现。 diff --git a/design-refs/pinterest/sources.json b/design-refs/pinterest/sources.json new file mode 100644 index 0000000..1c4d11f --- /dev/null +++ b/design-refs/pinterest/sources.json @@ -0,0 +1,93 @@ +[ + { + "file": "00-e-learning-platform---learning-plan-dash.jpg", + "title": "E-learning Platform - Learning Plan Dashboard by Bogdan Nikitin for Nixtio on Dribbble | Modern learning dashboard design, Digital learning platform dashboard, E-learning ui", + "pin": "https://www.pinterest.com/pin/8162843069852607/", + "source": "https://dribbble.com/shots/23956256-E-learning-Platform-Learning-Plan-Dashboard", + "description": "E-learning Platform - Learning Plan Dashboard by Bogdan Nikitin for Nixtio on Dribbble | User experience, App design, Application design" + }, + { + "file": "01-online-course-platform-concept.jpg", + "title": "Online Course Platform Concept by Petr Dudchenko | Digital learning platform dashboard, E learning platform design, E-learning dashboard design", + "pin": "https://www.pinterest.com/pin/online-course-platform-concept--178525572723551326/", + "source": "https://dribbble.com/shots/10858901-Online-Course-Platform-Concept", + "description": "Explore this innovative Online Course Platform Concept designed by Petr Dudchenko for Mind Studios. Get inspired by the latest trends in online learning website design and UI design courses. Ui design user interface, Module ui, App design" + }, + { + "file": "02-education-platform.jpg", + "title": "Education Platform by Awsmd on Dribbble | Online education dashboard, Digital learning platform dashboard, E learning platform design", + "pin": "https://in.pinterest.com/pin/education-platform--104286547617862574/", + "source": "https://dribbble.com/shots/20197120-W-Power-Courses-Dashboard", + "description": "A digital dashboard interface for an online learning platform. The main section displays a course titled \"Introduction to Motion Design\" by Gordon Palmen, featuring a video thumbnail of a man speaking. Online education platform, E-learning, Web design course" + }, + { + "file": "03-learnify---uxui-design-of-the-online-cou.jpg", + "title": "Learnify - UX/UI design of the online courses platform | Digital learning platform dashboard, Okr task management interface, Educational dashboard interface designs", + "pin": "https://in.pinterest.com/pin/482800022571266106/", + "source": "https://dribbble.com/shots/24454737-Learnify-UX-UI-design-of-the-online-courses-platform", + "description": "Learnify - UX/UI design of the online courses platform designed by Outcrowd . Connect with them on Dribbble; the global community for designers and creative professionals. User interface, Dashboard ui, Web app development" + }, + { + "file": "04-coursue-learning-platform-dashboard.jpg", + "title": "Coursue Learning Platform Dashboard by Fireart UI/UX for Fireart Studio on Dribbble | Digital learning platform dashboard, Online course dashboard, Web design inspiration", + "pin": "https://www.pinterest.com/pin/coursue-learning-platform-dashboard--628815166755740834/", + "source": "https://dribbble.com/shots/23027887-Coursue-Learning-Platform-Dashboard", + "description": "Coursue Learning Platform Dashboard by Fireart UI/UX for Fireart Studio on Dribbble | Interface design, Web app design, Web admin" + }, + { + "file": "05-edtech---online-learning-startup-web-ui-.jpg", + "title": "EdTech - Online Learning Startup Web UI Kit | ウェブデザイン, ウェブサイトのテンプレート", + "pin": "https://www.pinterest.com/pin/edtech-online-learning-startup-web-ui-kit--951807702477768443/", + "source": "https://ui8.net/dhuhacreative/products/edtech---online-learning-startup-web-ui-kit?rel=timer", + "description": "EdTech: Web UI Kit for any online learning, edutech startup, academic portal, etc." + }, + { + "file": "06-task-management-app-ui-design.jpg", + "title": "Task Management App UI Design | To-do list | Task | Schedule by Rifat Sarkar | Business ui design, To do list app ui design, App interface", + "pin": "https://in.pinterest.com/pin/task-management-app-ui-design--2674081025197797/", + "source": "https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-do-list-Task-Schedule?utm_source=extension\\u0026utm_medium=click\\u0026utm_campaign=muzli", + "description": "Explore a stunning Task Management App UI Design showcasing a To-do list, Task, and Schedule by Rifat Sarkar for Rinex on Dribbble. Get inspired by the creativity and functionality of this design! | App design inspiration" + }, + { + "file": "07-checklist-design---curated-list-for-ui-c.jpg", + "title": "Checklist Design - Curated List for UI Components and Branding Assets | Checklist design element, Simple checklist design inspiration, Workflow", + "pin": "https://br.pinterest.com/pin/232357662016396948/", + "source": "https://www.checklist.design/", + "description": "Discover a curated list of checklists for website pages, UI components, and branding assets on Checklist Design. Enhance your design practices with this collection. Purposes, User experience, Templates dashboard" + }, + { + "file": "08-onboarding-steps--untitled-ui.jpg", + "title": "Onboarding steps — Untitled UI | Onboarding website design, Onboarding sheet, Onboarding schedule", + "pin": "https://www.pinterest.com/pin/569494315400426794/", + "source": "https://dribbble.com/shots/23081995-Onboarding-steps-Untitled-UI?utm_source=Clipboard_Shot\\u0026utm_campaign=jordanhughes\\u0026utm_content=Onboarding%20steps%20%E2%80%94%20Untitled%20UI\\u0026utm_medium=Social_Share\\u0026utm_source=Pinterest_Shot\\u0026utm_campaign=jordanhughes\\u0026utm_content=Onboarding%20steps%20%E2%80%94%20Untitled%20UI\\u0026utm_medium=Social_Share", + "description": "Onboarding steps — Untitled UI designed by Jordan Hughes®. Connect with them on Dribbble; the global community for designers and creative professionals. Sign up ui, App design layout, Ui examples" + }, + { + "file": "09-onboarding-progress-designs-themes-templ.jpg", + "title": "Onboarding Progress Designs, Themes, Templates on Dribbble | Employee dashboard design, How to design a user dashboard, Approval dashboard", + "pin": "https://www.pinterest.com/pin/onboarding-progress-designs-themes-templates-on-dribbble--93309023522230046/", + "source": "https://dribbble.com/shots/18975440-Dashboard-Onboarding", + "description": "Explore high-quality onboarding images for web and app design. Get inspired and connect with designers worldwide. Dashboard web, Web design, Admin dashboard ui design" + }, + { + "file": "10-minidil-website-on-behance.jpg", + "title": "Minidil Website on Behance | Web design colorful, Design educational website graphics, Interface design", + "pin": "https://www.pinterest.com/pin/828803137701519210/", + "source": "", + "description": "A colorful and vibrant website design featuring a variety of sections. The top section includes an image of two animated characters, with text in another language. Web design trends, Creative web design, Web design ideas" + }, + { + "file": "11-how-does-scroll-into-view-work.jpg", + "title": "How Does Scroll Into View Work? | How it works section ui design, Step by step ui design, Scroll ui design", + "pin": "https://www.pinterest.com/pin/how-it-works-scroll-into-view-webflow--22166223162567510/", + "source": "https://webflow.com/website/How-it-works-Scroll-into-view#liked", + "description": "Learn the simple animation for the 'How it works' section. This animation is applied to the class, making it easy to add new steps. Just duplicate the last step and edit its content. Websites, Ui project, Webflow" + }, + { + "file": "12-tutorials-templates-figma--constructor-u.jpg", + "title": "Tutorials Templates Figma – Constructor UI Kit for Figma Download | Nouvelles coiffures, Design, Kit d'interface", + "pin": "https://www.pinterest.com/pin/tutorials--635007616233735559/", + "source": "https://constructor.spline.one/startups/tutorials", + "description": "Découvrez vos propres épingles sur Pinterest, et enregistrez-les !" + } +] \ No newline at end of file diff --git a/packages/stack-idealjs/src/components/CourseShelf/CourseCard.tsx b/packages/stack-idealjs/src/components/CourseShelf/CourseCard.tsx new file mode 100644 index 0000000..0da9479 --- /dev/null +++ b/packages/stack-idealjs/src/components/CourseShelf/CourseCard.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import type { CourseSection } from "./courses"; +import styles from "./styles.module.css"; + +/** + * 单张课程卡：静态展示 title/desc/done/relations， + * hover（或键盘 focus）时挂载 GIF——"学完能得到什么"的动态预告。 + * GIF 只在首次 hover 时加载，避免首屏拉全部动图。 + */ +export default function CourseCard({ course }: { course: CourseSection }) { + const [previewing, setPreviewing] = useState(false); + const gifUrl = useBaseUrl(`gifs/${course.id}.gif`); + + return ( + setPreviewing(true)} + onMouseLeave={() => setPreviewing(false)} + onFocus={() => setPreviewing(true)} + onBlur={() => setPreviewing(false)} + > +