📦 deps(thirdparty): update snapshots
This commit is contained in:
ci[bot]
@@ -526,14 +526,14 @@ We officially thank the following contributors for their help in making this rep
|
||||
## Star History
|
||||
|
||||
<a href="https://www.star-history.com/#sickn33/antigravity-awesome-skills&type=date&legend=top-left">
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=sickn33/antigravity-awesome-skills&type=date&legend=top-left&cache_bust=202606290745" />
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=sickn33/antigravity-awesome-skills&type=date&legend=top-left&cache_bust=202606300720" />
|
||||
</a>
|
||||
|
||||
<a href="https://www.star-history.com/sickn33/antigravity-awesome-skills">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&theme=dark&cache_bust=202606290745" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&cache_bust=202606290745" />
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&cache_bust=202606290745" />
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&theme=dark&cache_bust=202606300720" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&cache_bust=202606300720" />
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/chart?repos=sickn33/antigravity-awesome-skills&style=landscape1&cache_bust=202606300720" />
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Source
|
||||
|
||||
- Repo: https://github.com/sickn33/antigravity-awesome-skills
|
||||
- Ref: 45bce6b6be12cc96151eb4984c7233b4dc6f7d9d
|
||||
- Ref: b4e58904aa84c26e3aa679e2fababad36f95fd4d
|
||||
- Remove-Paths:
|
||||
- Snapshot: 2026-06-29
|
||||
- Snapshot: 2026-06-30
|
||||
- Sync-Mode: copy_skill_dirs
|
||||
- Notes: vendored into playbook branch thirdparty/skill
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 50 KiB |
+25
-1
@@ -1,5 +1,10 @@
|
||||
# [UI UX Pro Max](https://uupm.cc)
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> |
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a>
|
||||
<img src="https://img.shields.io/badge/reasoning_rules-161-green?style=for-the-badge" alt="161 Reasoning Rules">
|
||||
@@ -251,6 +256,25 @@ Each rule includes:
|
||||
|
||||
</details>
|
||||
|
||||
## 💎 Basic vs. Premium Version Comparison
|
||||
|
||||
Many users ask about the differences between the open-source and premium versions. Here is a detailed breakdown to help you choose the right fit for your workflow.
|
||||
|
||||
### 🟢 Basic Version (This Repository)
|
||||
* **Fully Open Source:** Perfect for individual developers, hobbyists, and standard projects.
|
||||
* **Core UI/UX Intelligence:** Full access to 67 UI styles, 161 product types, color palettes, and curated font pairings.
|
||||
* **Smart Recommendations:** Built-in BM25 search engine for highly accurate design matching.
|
||||
* **Cross-Platform Support:** Stack-specific guidelines supporting 13+ major frameworks (React, Vue, Tailwind, iOS, Android, etc.).
|
||||
* **Design System Generation:** Instantly generate tailored UI rules, patterns, and logic via CLI.
|
||||
|
||||
### 🟡 Premium Version
|
||||
* **Extended Brand Design Skills:** Goes beyond UI/UX to include Brand Identity generation, Logo Design, Corporate Identity Programs (CIP), Banners, Presentation Slides, and custom Iconography.
|
||||
* **Advanced Asset Creation:** Deep integration with AI-powered image generation to create real visual assets, not just placeholders.
|
||||
* **Enterprise Architecture:** A more comprehensive and scalable Design Token architecture, built for large-scale team deployments.
|
||||
* **Priority Support:** Dedicated technical assistance for teams and professionals who need an uninterrupted full design workflow.
|
||||
|
||||
👉 *For more details on upgrading to the Premium tier, visit [uipm.cc](https://uipm.cc).*
|
||||
|
||||
## Installation
|
||||
|
||||
### Using Claude Marketplace (Claude Code)
|
||||
|
||||
@@ -0,0 +1,502 @@
|
||||
# [UI UX Pro Max](https://uupm.cc)
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> |
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases"><img src="https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue" alt="GitHub Release"></a>
|
||||
<img src="https://img.shields.io/badge/reasoning_rules-100-green?style=for-the-badge" alt="100 条推理规则">
|
||||
<img src="https://img.shields.io/badge/UI_styles-67-purple?style=for-the-badge" alt="67 种 UI 风格">
|
||||
<img src="https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white" alt="Python 3.x">
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/LICENSE"><img src="https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green" alt="License"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/uipro-cli"><img src="https://img.shields.io/npm/v/uipro-cli?style=flat-square&logo=npm&label=CLI" alt="npm"></a>
|
||||
<a href="https://www.npmjs.com/package/uipro-cli"><img src="https://img.shields.io/npm/dm/uipro-cli?style=flat-square&label=downloads" alt="npm downloads"></a>
|
||||
<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/stargazers"><img src="https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github" alt="GitHub stars"></a>
|
||||
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-支持开发-00457C?style=flat-square&logo=paypal&logoColor=white" alt="PayPal"></a>
|
||||
</p>
|
||||
|
||||
一个为跨多平台和框架构建专业 UI/UX 提供设计智能的 AI 技能。
|
||||
|
||||
<p align="center">
|
||||
<a href="https://uupm.cc">
|
||||
<img src="screenshots/website.png" alt="UI UX Pro Max" width="800">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<b>如果这个项目对你有帮助，请考虑支持：</b><br><br>
|
||||
<a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-捐赠-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal 捐赠"></a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<i>其他项目</i><br>
|
||||
<a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>
|
||||
</p>
|
||||
|
||||
## v2.0 新特性
|
||||
|
||||
### 智能设计系统生成
|
||||
|
||||
v2.0 的旗舰特性是**设计系统生成器**——一个 AI 驱动的推理引擎，可在数秒内分析您的项目需求并生成完整、定制化的设计系统。
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------------------------+
|
||||
| 目标：Serenity Spa - 推荐设计系统 |
|
||||
+----------------------------------------------------------------------------------------+
|
||||
| |
|
||||
| 模式：以 Hero 为中心 + 社交证明 |
|
||||
| 转化：情感驱动，带信任元素 |
|
||||
| CTA：首屏展示，客户评价后重复 |
|
||||
| 版块： |
|
||||
| 1. 主视觉区 (Hero) |
|
||||
| 2. 服务 |
|
||||
| 3. 客户评价 |
|
||||
| 4. 预约 |
|
||||
| 5. 联系我们 |
|
||||
| |
|
||||
| 风格：柔和 UI 进化版 (Soft UI Evolution) |
|
||||
| 关键词：柔和阴影、微妙深度、 calming、高级质感、有机形状 |
|
||||
| 适用：健康、美容、生活方式品牌、高端服务 |
|
||||
| 性能：优秀 | 无障碍：WCAG AA |
|
||||
| |
|
||||
| 配色： |
|
||||
| 主色： #E8B4B8 (柔和粉) |
|
||||
| 辅色： #A8D5BA (鼠尾草绿) |
|
||||
| CTA： #D4AF37 (金色) |
|
||||
| 背景： #FFF5F5 (暖白) |
|
||||
| 文字： #2D3436 (炭灰) |
|
||||
| 备注： calming 配色，金色点缀增添奢华感 |
|
||||
| |
|
||||
| 字体：Cormorant Garamond / Montserrat |
|
||||
| 调性：优雅、 calming、精致 |
|
||||
| 适用：奢侈品牌、健康、美容、编辑类 |
|
||||
| Google Fonts: https://fonts.google.com/share?selection.family=... |
|
||||
| |
|
||||
| 关键效果： |
|
||||
| 柔和阴影 + 平滑过渡 (200-300ms) + 细腻悬停状态 |
|
||||
| |
|
||||
| 避免 (反模式)： |
|
||||
| 亮霓虹色 + 生硬动画 + 深色模式 + AI 紫/粉渐变 (银行业) |
|
||||
| |
|
||||
| 交付前检查清单： |
|
||||
| [ ] 不使用表情符号作为图标 (使用 SVG: Heroicons/Lucide) |
|
||||
| [ ] 所有可点击元素有 cursor-pointer |
|
||||
| [ ] 悬停状态带平滑过渡 (150-300ms) |
|
||||
| [ ] 浅色模式：文字对比度至少 4.5:1 |
|
||||
| [ ] Focus 状态对键盘导航可见 |
|
||||
| [ ] 尊重 prefers-reduced-motion 偏好 |
|
||||
| [ ] 响应式：375px、768px、1024px、1440px |
|
||||
| |
|
||||
+----------------------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
### 设计系统生成的工作原理
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 1. 用户请求 │
|
||||
│ "为我的美容院搭建落地页" │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 2. 多域搜索 (5 个并行搜索) │
|
||||
│ • 产品类型匹配 (100 个分类) │
|
||||
│ • 风格推荐 (67 种风格) │
|
||||
│ • 配色方案选择 (96 套配色) │
|
||||
│ • 落地页模式 (24 种模式) │
|
||||
│ • 字体配对 (57 种组合) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 3. 推理引擎 │
|
||||
│ • 匹配产品 → UI 分类规则 │
|
||||
│ • 应用风格优先级 (BM25 排序) │
|
||||
│ • 过滤行业反模式 │
|
||||
│ • 处理决策规则 (JSON 条件) │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 4. 完整设计系统输出 │
|
||||
│ 模式 + 风格 + 配色 + 字体 + 效果 │
|
||||
│ + 避免的反模式 + 交付前检查清单 │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 100 条行业特定推理规则
|
||||
|
||||
推理引擎包含针对以下领域的专门规则：
|
||||
|
||||
| 分类 | 示例 |
|
||||
|------|------|
|
||||
| **科技与 SaaS** | SaaS、微 SaaS、B2B 企业级、开发者工具、AI/聊天机器人平台 |
|
||||
| **金融** | 金融科技、银行、加密货币、保险、交易仪表板 |
|
||||
| **医疗健康** | 医疗诊所、药房、牙科、兽医、心理健康 |
|
||||
| **电子商务** | 综合电商、奢侈品、 marketplace、订阅盒 |
|
||||
| **服务** | 美容/水疗、餐饮、酒店、法律、咨询 |
|
||||
| **创意** | 作品集、代理公司、摄影、游戏、音乐流媒体 |
|
||||
| **新兴技术** | Web3/NFT、空间计算、量子计算、自动驾驶系统 |
|
||||
|
||||
每条规则包括：
|
||||
- **推荐模式** - 落地页结构
|
||||
- **风格优先级** - 最匹配的 UI 风格
|
||||
- **配色氛围** - 适合行业的调色板
|
||||
- **字体氛围** - 匹配品牌个性的字体
|
||||
- **关键效果** - 动画与交互
|
||||
- **反模式** - 不要做哪些（例如银行业的"AI 紫/粉渐变"）
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **67 种 UI 风格** - 玻璃拟态、粘土拟态、极简主义、粗野主义、新拟态、便当盒网格、深色模式、AI 原生 UI 等
|
||||
- **96 套配色方案** - 针对 SaaS、电商、医疗健康、金融科技、美容等行业的专属调色板
|
||||
- **57 种字体配对** - 精选字体组合，含 Google Fonts 导入
|
||||
- **25 种图表类型** - 适用于仪表板和分析场景的推荐
|
||||
- **13 种技术栈** - React、Next.js、Astro、Vue、Nuxt.js、Nuxt UI、Svelte、SwiftUI、React Native、Flutter、HTML+Tailwind、shadcn/ui、Jetpack Compose
|
||||
- **99 条 UX 指南** - 最佳实践、反模式与无障碍规则
|
||||
- **100 条推理规则** - 行业特定的设计系统生成（v2.0 新增）
|
||||
|
||||
### 可用风格 (67)
|
||||
|
||||
<details>
|
||||
<summary><b>通用风格 (49)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 1 | 极简主义 & 瑞士风格 | 企业应用、仪表板、文档 |
|
||||
| 2 | 新拟态 (Neumorphism) | 健康/养生应用、冥想平台 |
|
||||
| 3 | 玻璃拟态 (Glassmorphism) | 现代 SaaS、金融仪表板 |
|
||||
| 4 | 粗野主义 (Brutalism) | 设计作品集、艺术项目 |
|
||||
| 5 | 3D & 超写实主义 | 游戏、产品展示、沉浸式体验 |
|
||||
| 6 | 活力 & 块状 | 创业公司、创意机构、游戏 |
|
||||
| 7 | 深色模式 (OLED) | 夜间模式应用、编程平台 |
|
||||
| 8 | 无障碍 & 伦理设计 | 政府、医疗、教育 |
|
||||
| 9 | 粘土拟态 (Claymorphism) | 教育应用、儿童应用、SaaS |
|
||||
| 10 | 极光 UI (Aurora UI) | 现代 SaaS、创意机构 |
|
||||
| 11 | 复古未来主义 | 游戏、娱乐、音乐平台 |
|
||||
| 12 | 扁平设计 | Web 应用、移动应用、初创 MVP |
|
||||
| 13 | 拟物化 | 传统应用、游戏、高端产品 |
|
||||
| 14 | 液态玻璃 | 高端 SaaS、高端电商 |
|
||||
| 15 | 动效驱动 | 作品集网站、叙事平台 |
|
||||
| 16 | 微交互 | 移动应用、触摸屏 UI |
|
||||
| 17 | 包容性设计 | 公共服务、教育、医疗 |
|
||||
| 18 | 零界面 | 语音助手、AI 平台 |
|
||||
| 19 | 柔和 UI 进化版 | 现代企业应用、SaaS |
|
||||
| 20 | 新粗野主义 | Z 世代品牌、创业公司、Figma 风格 |
|
||||
| 21 | 便当盒网格 | 仪表板、产品页面、作品集 |
|
||||
| 22 | Y2K 美学 | 时尚品牌、音乐、Z 世代 |
|
||||
| 23 | 赛博朋克 UI | 游戏、科技产品、加密货币应用 |
|
||||
| 24 | 有机亲生物 | 健康应用、可持续品牌 |
|
||||
| 25 | AI 原生 UI | AI 产品、聊天机器人、Copilot |
|
||||
| 26 | 孟菲斯设计 | 创意机构、音乐、年轻品牌 |
|
||||
| 27 | 蒸汽波 | 音乐平台、游戏、作品集 |
|
||||
| 28 | 维度分层 | 仪表板、卡片布局、模态框 |
|
||||
| 29 | 夸张极简主义 | 时尚、建筑、作品集 |
|
||||
| 30 | 动态字体 | 主视觉区、营销网站 |
|
||||
| 31 | 视差叙事 | 品牌故事、产品发布 |
|
||||
| 32 | 瑞士现代主义 2.0 | 企业网站、建筑、编辑类 |
|
||||
| 33 | HUD / 科幻 FUI | 科幻游戏、太空科技、网络安全 |
|
||||
| 34 | 像素艺术 | 独立游戏、复古工具、创意 |
|
||||
| 35 | 便当网格 | 产品特性、仪表板、个人 |
|
||||
| 36 | 空间 UI (VisionOS) | 空间计算应用、VR/AR |
|
||||
| 37 | 电子墨水 / 纸张 | 阅读应用、数字报纸 |
|
||||
| 38 | Z 世代混沌 / 极繁主义 | Z 世代生活方式、音乐艺术家 |
|
||||
| 39 | 仿生 / 有机 2.0 | 可持续科技、生物科技、健康 |
|
||||
| 40 | 反精致 / 原始美学 | 创意作品集、艺术家网站 |
|
||||
| 41 | 触感数字 / 可变形 UI | 现代移动应用、趣味品牌 |
|
||||
| 42 | 自然提炼 | 健康品牌、可持续产品 |
|
||||
| 43 | 交互式光标设计 | 创意作品集、交互式 |
|
||||
| 44 | 语音优先多模态 | 语音助手、无障碍应用 |
|
||||
| 45 | 3D 产品预览 | 电商、家具、时尚 |
|
||||
| 46 | 渐变网格 / 极光进化 | 主视觉区、背景、创意 |
|
||||
| 47 | 编辑网格 / 杂志 | 新闻网站、博客、杂志 |
|
||||
| 48 | 色差 / RGB 分离 | 音乐平台、游戏、科技 |
|
||||
| 49 | 复古模拟 / 胶片 | 摄影、音乐/黑胶品牌 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>落地页风格 (8)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 1 | 主视觉中心设计 | 具有强烈视觉识别度的产品 |
|
||||
| 2 | 转化优化型 | 潜在客户生成、销售页面 |
|
||||
| 3 | 功能丰富展示 | SaaS、复杂产品 |
|
||||
| 4 | 极简直接型 | 简单产品、应用 |
|
||||
| 5 | 社交证明聚焦 | 服务、B2C 产品 |
|
||||
| 6 | 交互产品演示 | 软件、工具 |
|
||||
| 7 | 信任与权威型 | B2B、企业、咨询 |
|
||||
| 8 | 叙事驱动型 | 品牌、代理公司、非营利 |
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><b>BI/分析仪表板风格 (10)</b></summary>
|
||||
|
||||
| # | 风格 | 最适用于 |
|
||||
|---|------|---------|
|
||||
| 1 | 密集数据仪表板 | 复杂数据分析 |
|
||||
| 2 | 热力图风格 | 地理/行为数据 |
|
||||
| 3 | 高管仪表板 | 高管摘要 |
|
||||
| 4 | 实时监控 | 运维、DevOps |
|
||||
| 5 | 钻取分析 | 详细探索 |
|
||||
| 6 | 对比分析仪表板 | 并排对比 |
|
||||
| 7 | 预测分析 | 预测、ML 洞察 |
|
||||
| 8 | 用户行为分析 | UX 研究、产品分析 |
|
||||
| 9 | 财务仪表板 | 财务、会计 |
|
||||
| 10 | 销售智能仪表板 | 销售团队、CRM |
|
||||
|
||||
</details>
|
||||
|
||||
## 安装
|
||||
|
||||
### 使用 Claude Marketplace (Claude Code)
|
||||
|
||||
通过两条命令直接在 Claude Code 中安装：
|
||||
|
||||
```
|
||||
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
|
||||
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
|
||||
```
|
||||
|
||||
### 使用 CLI (推荐)
|
||||
|
||||
```bash
|
||||
# 全局安装 CLI
|
||||
npm install -g uipro-cli
|
||||
|
||||
# 进入你的项目
|
||||
cd /path/to/your/project
|
||||
|
||||
# 为你的 AI 助手安装
|
||||
uipro init --ai claude # Claude Code
|
||||
uipro init --ai cursor # Cursor
|
||||
uipro init --ai windsurf # Windsurf
|
||||
uipro init --ai antigravity # Antigravity
|
||||
uipro init --ai copilot # GitHub Copilot
|
||||
uipro init --ai kiro # Kiro
|
||||
uipro init --ai codex # Codex CLI
|
||||
uipro init --ai qoder # Qoder
|
||||
uipro init --ai roocode # Roo Code
|
||||
uipro init --ai gemini # Gemini CLI
|
||||
uipro init --ai trae # Trae
|
||||
uipro init --ai opencode # OpenCode
|
||||
uipro init --ai continue # Continue
|
||||
uipro init --ai codebuddy # CodeBuddy
|
||||
uipro init --ai droid # Droid (Factory)
|
||||
uipro init --ai all # 所有助手
|
||||
```
|
||||
|
||||
### 其他 CLI 命令
|
||||
|
||||
```bash
|
||||
uipro versions # 列出可用版本
|
||||
uipro update # 更新到最新版本
|
||||
uipro init --offline # 跳过 GitHub 下载，使用捆绑资源
|
||||
```
|
||||
|
||||
## 前置要求
|
||||
|
||||
搜索脚本需要 Python 3.x。
|
||||
|
||||
```bash
|
||||
# 检查是否已安装 Python
|
||||
python3 --version
|
||||
|
||||
# macOS
|
||||
brew install python3
|
||||
|
||||
# Ubuntu/Debian
|
||||
sudo apt update && sudo apt install python3
|
||||
|
||||
# Windows
|
||||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
## 使用方式
|
||||
|
||||
### 技能模式 (自动激活)
|
||||
|
||||
**支持：** Claude Code、Cursor、Windsurf、Antigravity、Codex CLI、Continue、Gemini CLI、OpenCode、Qoder、CodeBuddy、Droid (Factory)
|
||||
|
||||
当你请求 UI/UX 工作时，技能会自动激活。只需自然地聊天：
|
||||
|
||||
```
|
||||
为我的 SaaS 产品搭建一个落地页
|
||||
```
|
||||
|
||||
> **Trae**：先切换到 **SOLO** 模式。技能会在 UI/UX 请求时激活。
|
||||
|
||||
### 工作流模式 (斜杠命令)
|
||||
|
||||
**支持：** Kiro、GitHub Copilot、Roo Code
|
||||
|
||||
使用斜杠命令调用技能：
|
||||
|
||||
```
|
||||
/ui-ux-pro-max 为我的 SaaS 产品搭建一个落地页
|
||||
```
|
||||
|
||||
### 示例提示词
|
||||
|
||||
```
|
||||
为我的 SaaS 产品搭建一个落地页
|
||||
|
||||
创建一个医疗健康分析仪表板
|
||||
|
||||
设计一个带深色模式的作品集网站
|
||||
|
||||
为电商制作一个移动应用 UI
|
||||
|
||||
搭建一个带深色主题的金融科技银行应用
|
||||
```
|
||||
|
||||
### 工作原理
|
||||
|
||||
1. **你提出请求** - 请求任何 UI/UX 任务（构建、设计、创建、实现、审查、修复、改进）
|
||||
2. **生成设计系统** - AI 使用推理引擎自动生成完整的设计系统
|
||||
3. **智能推荐** - 根据你的产品类型和需求，找到最佳匹配的风格、配色和字体
|
||||
4. **代码生成** - 使用正确的颜色、字体、间距和最佳实践实现 UI
|
||||
5. **交付前检查** - 针对常见 UI/UX 反模式进行验证
|
||||
|
||||
### 支持的技术栈
|
||||
|
||||
该技能为以下技术栈提供特定指南：
|
||||
|
||||
| 分类 | 技术栈 |
|
||||
|------|--------|
|
||||
| **Web (HTML)** | HTML + Tailwind (默认) |
|
||||
| **React 生态** | React、Next.js、shadcn/ui |
|
||||
| **Vue 生态** | Vue、Nuxt.js、Nuxt UI |
|
||||
| **其他 Web** | Svelte、Astro |
|
||||
| **iOS** | SwiftUI |
|
||||
| **Android** | Jetpack Compose |
|
||||
| **跨平台** | React Native、Flutter |
|
||||
|
||||
只需在提示词中提到你偏好的技术栈，或让它默认使用 HTML + Tailwind。
|
||||
|
||||
## 设计系统命令 (高级)
|
||||
|
||||
如需直接访问设计系统生成器：
|
||||
|
||||
> 注意：如果你通过 Continue 安装，将下面命令中的 `.claude/skills/` 替换为 `.continue/skills/`。对于 Droid (Factory)，使用 `.factory/skills/`。
|
||||
|
||||
```bash
|
||||
# 生成带 ASCII 输出的设计系统
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"
|
||||
|
||||
# 生成带 Markdown 输出
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown
|
||||
|
||||
# 特定领域搜索
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart
|
||||
|
||||
# 特定技术栈指南
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
|
||||
```
|
||||
|
||||
### 持久化设计系统 (主配置 + 覆盖模式)
|
||||
|
||||
将设计系统保存到文件，实现**跨会话的层级检索**：
|
||||
|
||||
```bash
|
||||
# 生成并持久化到 design-system/MASTER.md
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"
|
||||
|
||||
# 同时创建页面特定的覆盖文件
|
||||
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
|
||||
```
|
||||
|
||||
这会创建 `design-system/` 文件夹结构：
|
||||
|
||||
```
|
||||
design-system/
|
||||
├── MASTER.md # 全局唯一真相源 (颜色、字体、间距、组件)
|
||||
└── pages/
|
||||
└── dashboard.md # 页面特定覆盖 (仅与主配置的偏差)
|
||||
```
|
||||
|
||||
**层级检索工作原理：**
|
||||
1. 构建特定页面 (如"结账页") 时，先检查 `design-system/pages/checkout.md`
|
||||
2. 如果页面文件存在，其规则**覆盖**主配置文件
|
||||
3. 如果不存在，仅使用 `design-system/MASTER.md`
|
||||
|
||||
**上下文感知检索提示词：**
|
||||
```
|
||||
我正在构建 [页面名称] 页面。请阅读 design-system/MASTER.md。
|
||||
同时检查 design-system/pages/[page-name].md 是否存在。
|
||||
如果页面文件存在，优先使用其规则。
|
||||
如果不存在，仅使用主配置规则。
|
||||
现在，生成代码...
|
||||
```
|
||||
|
||||
## 架构与贡献
|
||||
|
||||
### 对于用户
|
||||
|
||||
代码库已重构为使用**基于模板的生成系统**。所有平台特定文件 (`.cursor/`、`.windsurf/`、`.kiro/`、`.factory/` 等) 现在由 CLI 动态生成。
|
||||
|
||||
**始终使用 CLI 安装：**
|
||||
|
||||
```bash
|
||||
npm install -g uipro-cli
|
||||
uipro init --ai <platform>
|
||||
```
|
||||
|
||||
这确保你获得最新模板和适用于 AI 助手的正确文件结构。
|
||||
|
||||
### 对于贡献者
|
||||
|
||||
如果你想为这个项目做贡献：
|
||||
|
||||
```bash
|
||||
# 1. 克隆仓库
|
||||
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
|
||||
cd ui-ux-pro-max-skill
|
||||
|
||||
# 2. 理解结构
|
||||
src/ui-ux-pro-max/ # 唯一真相源 (数据、脚本、模板)
|
||||
cli/ # CLI 安装器 (从模板生成文件)
|
||||
.claude/ # Claude Code 技能的本地开发/测试
|
||||
.factory/ # Droid (Factory) 技能的本地开发/测试
|
||||
|
||||
# 3. 在 src/ui-ux-pro-max/ 中修改
|
||||
# - data/*.csv → 数据库文件
|
||||
# - scripts/*.py → 搜索引擎与设计系统
|
||||
# - templates/ → 平台特定模板
|
||||
|
||||
# 4. 同步到 CLI 并本地测试
|
||||
cp -r src/ui-ux-pro-max/data/* cli/assets/data/
|
||||
cp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/
|
||||
cp -r src/ui-ux-pro-max/templates/* cli/assets/templates/
|
||||
|
||||
# 5. 构建并测试 CLI
|
||||
cd cli && bun run build
|
||||
node dist/index.js init --ai claude --offline # 在临时文件夹中测试
|
||||
|
||||
# 6. 创建 PR (永远不要直接推送到 main)
|
||||
git checkout -b feat/your-feature
|
||||
git commit -m "feat: description"
|
||||
git push -u origin feat/your-feature
|
||||
gh pr create
|
||||
```
|
||||
|
||||
详细的开发指南请参见 [CLAUDE.md](CLAUDE.md)。
|
||||
|
||||
## Star 历史
|
||||
|
||||
[](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)
|
||||
|
||||
## 许可证
|
||||
|
||||
本项目采用 [MIT 许可证](LICENSE) 授权。
|
||||
@@ -1,8 +1,8 @@
|
||||
# Source
|
||||
|
||||
- Repo: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
|
||||
- Ref: 8a81ed60272d21d4b8808f7308d49a0b1b000555
|
||||
- Ref: 3effe971c07a20658952e304099557523bdf9e44
|
||||
- Remove-Paths:
|
||||
- Snapshot: 2026-06-28
|
||||
- Snapshot: 2026-06-30
|
||||
- Sync-Mode: render_skill
|
||||
- Notes: vendored into playbook branch thirdparty/skill
|
||||
|
||||
@@ -0,0 +1,458 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HealthView - Analytics Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#60A5FA',
|
||||
accent: '#F97316',
|
||||
surface: '#F8FAFC',
|
||||
text: '#1E293B',
|
||||
success: '#10B981',
|
||||
warning: '#F59E0B',
|
||||
danger: '#EF4444',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Fira Sans', 'sans-serif'],
|
||||
body: ['Fira Sans', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-100 font-body text-text antialiased">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-slate-200 fixed h-full">
|
||||
<div class="p-6 border-b border-slate-100">
|
||||
<h1 class="font-heading font-bold text-xl text-primary flex items-center gap-2">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
|
||||
</svg>
|
||||
HealthView
|
||||
</h1>
|
||||
</div>
|
||||
<nav class="p-4">
|
||||
<ul class="space-y-1">
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg bg-primary/10 text-primary font-medium cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
Patients
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Appointments
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
Analytics
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 ml-64 p-8">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 class="font-heading text-2xl font-bold text-text">Healthcare Analytics</h2>
|
||||
<p class="text-slate-500 text-sm">Overview of patient data and hospital metrics</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Search patients..." class="pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary w-64 transition-all duration-200" aria-label="Search patients">
|
||||
<svg class="w-5 h-5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<button class="p-2.5 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 transition-colors duration-200 cursor-pointer relative" aria-label="Notifications">
|
||||
<svg class="w-5 h-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
|
||||
</svg>
|
||||
<span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-3 pl-4 border-l border-slate-200">
|
||||
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center text-primary font-semibold">DR</div>
|
||||
<div>
|
||||
<div class="font-medium text-sm text-text">Dr. Roberts</div>
|
||||
<div class="text-xs text-slate-400">Cardiologist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
12%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">2,847</div>
|
||||
<div class="text-slate-500 text-sm">Total Patients</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-success/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
8%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">94.2%</div>
|
||||
<div class="text-slate-500 text-sm">Recovery Rate</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-warning/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-danger text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
|
||||
3%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">24 min</div>
|
||||
<div class="text-slate-500 text-sm">Avg. Wait Time</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100 hover:shadow-md transition-shadow duration-300 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-success text-sm font-medium flex items-center gap-1">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
5%
|
||||
</span>
|
||||
</div>
|
||||
<div class="font-mono text-3xl font-bold text-text mb-1">142</div>
|
||||
<div class="text-slate-500 text-sm">Beds Available</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Row -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<!-- Patient Trend Chart -->
|
||||
<div class="col-span-2 bg-white p-6 rounded-xl border border-slate-100">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Patient Admissions Trend</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg bg-primary text-white cursor-pointer">Weekly</button>
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg text-slate-500 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">Monthly</button>
|
||||
<button class="px-3 py-1.5 text-sm rounded-lg text-slate-500 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">Yearly</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-64">
|
||||
<canvas id="admissionsChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Department Distribution -->
|
||||
<div class="bg-white p-6 rounded-xl border border-slate-100">
|
||||
<h3 class="font-heading font-semibold text-lg text-text mb-6">Department Distribution</h3>
|
||||
<div class="h-64">
|
||||
<canvas id="departmentChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row -->
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<!-- Recent Patients Table -->
|
||||
<div class="col-span-2 bg-white rounded-xl border border-slate-100">
|
||||
<div class="p-6 border-b border-slate-100 flex items-center justify-between">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Recent Patients</h3>
|
||||
<button class="text-primary text-sm font-medium hover:text-primary/80 transition-colors duration-200 cursor-pointer">View All</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="text-left text-sm text-slate-500 border-b border-slate-100">
|
||||
<th class="px-6 py-4 font-medium">Patient</th>
|
||||
<th class="px-6 py-4 font-medium">ID</th>
|
||||
<th class="px-6 py-4 font-medium">Department</th>
|
||||
<th class="px-6 py-4 font-medium">Status</th>
|
||||
<th class="px-6 py-4 font-medium">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center text-primary font-medium">JD</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">John Doe</div>
|
||||
<div class="text-sm text-slate-400">john.doe@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2847</td>
|
||||
<td class="px-6 py-4 text-slate-600">Cardiology</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm font-medium">Recovered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 8, 2026</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center text-secondary font-medium">SM</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Sarah Miller</div>
|
||||
<div class="text-sm text-slate-400">sarah.m@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2846</td>
|
||||
<td class="px-6 py-4 text-slate-600">Neurology</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-warning/10 text-warning text-sm font-medium">In Treatment</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 7, 2026</td>
|
||||
</tr>
|
||||
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-accent/10 rounded-full flex items-center justify-center text-accent font-medium">RJ</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Robert Johnson</div>
|
||||
<div class="text-sm text-slate-400">r.johnson@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2845</td>
|
||||
<td class="px-6 py-4 text-slate-600">Orthopedics</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">Scheduled</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 6, 2026</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50/50 transition-colors duration-200 cursor-pointer">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-success/10 rounded-full flex items-center justify-center text-success font-medium">EW</div>
|
||||
<div>
|
||||
<div class="font-medium text-text">Emily Wilson</div>
|
||||
<div class="text-sm text-slate-400">e.wilson@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-mono text-sm text-slate-600">#PT-2844</td>
|
||||
<td class="px-6 py-4 text-slate-600">Pediatrics</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm font-medium">Recovered</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500">Mar 5, 2026</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Appointments -->
|
||||
<div class="bg-white rounded-xl border border-slate-100">
|
||||
<div class="p-6 border-b border-slate-100">
|
||||
<h3 class="font-heading font-semibold text-lg text-text">Upcoming Appointments</h3>
|
||||
</div>
|
||||
<div class="p-4 space-y-3">
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Checkup - Michael Brown</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-primary/10 text-primary">9:00 AM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">General Health Examination</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Surgery - Lisa Anderson</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-danger/10 text-danger">11:30 AM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Knee Replacement Procedure</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Consultation - David Lee</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-warning/10 text-warning">2:00 PM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Cardiac Follow-up</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200 cursor-pointer">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-medium text-text">Lab Results - Jennifer Kim</span>
|
||||
<span class="text-xs px-2 py-1 rounded bg-success/10 text-success">4:30 PM</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-500">Blood Work Review</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Patient Admissions Line Chart
|
||||
const admissionsCtx = document.getElementById('admissionsChart').getContext('2d');
|
||||
new Chart(admissionsCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Admissions',
|
||||
data: [45, 52, 38, 65, 48, 32, 41],
|
||||
borderColor: '#3B82F6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#3B82F6',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5
|
||||
}, {
|
||||
label: 'Discharges',
|
||||
data: [38, 45, 42, 58, 52, 28, 35],
|
||||
borderColor: '#10B981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#10B981',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0,0,0,0.05)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Department Donut Chart
|
||||
const departmentCtx = document.getElementById('departmentChart').getContext('2d');
|
||||
new Chart(departmentCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Cardiology', 'Neurology', 'Orthopedics', 'Pediatrics', 'Other'],
|
||||
datasets: [{
|
||||
data: [28, 22, 18, 15, 17],
|
||||
backgroundColor: [
|
||||
'#3B82F6',
|
||||
'#10B981',
|
||||
'#F97316',
|
||||
'#8B5CF6',
|
||||
'#94A3B8'
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: '65%',
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Chen - Full Stack Developer</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#1E293B',
|
||||
cta: '#2563EB',
|
||||
background: '#0F172A',
|
||||
surface: '#1E293B',
|
||||
text: '#F1F5F9',
|
||||
muted: '#94A3B8',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Space Grotesk', 'sans-serif'],
|
||||
body: ['Archivo', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.card-glow:hover {
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-text antialiased">
|
||||
<!-- Floating Navbar -->
|
||||
<nav class="fixed top-6 left-6 right-6 z-50 bg-surface/80 backdrop-blur-xl rounded-2xl border border-white/5">
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="#" class="font-heading font-bold text-xl text-text cursor-pointer">
|
||||
<span class="gradient-text">AC</span>
|
||||
</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#work" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Work</a>
|
||||
<a href="#about" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">About</a>
|
||||
<a href="#skills" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Skills</a>
|
||||
<a href="#contact" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer">Contact</a>
|
||||
</div>
|
||||
<a href="#contact" class="bg-primary hover:bg-cta text-white font-medium px-5 py-2.5 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Let's Talk
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex items-center px-6 pt-32 pb-20">
|
||||
<div class="max-w-6xl mx-auto w-full">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<p class="text-primary font-medium mb-4 tracking-wide">Full Stack Developer</p>
|
||||
<h1 class="font-heading text-5xl md:text-7xl font-bold text-text mb-6 leading-tight">
|
||||
Hi, I'm<br>
|
||||
<span class="gradient-text">Alex Chen</span>
|
||||
</h1>
|
||||
<p class="text-muted text-lg md:text-xl leading-relaxed mb-10 max-w-lg">
|
||||
I craft digital experiences that blend beautiful design with powerful functionality. Specializing in React, Node.js, and modern web technologies.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="#work" class="bg-primary hover:bg-cta text-white font-semibold px-8 py-4 rounded-xl transition-colors duration-200 cursor-pointer inline-flex items-center gap-2">
|
||||
View My Work
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#contact" class="border border-white/10 hover:border-white/20 text-text font-semibold px-8 py-4 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Download CV
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="flex gap-4 mt-12">
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="w-12 h-12 rounded-xl bg-surface border border-white/5 flex items-center justify-center text-muted hover:text-primary hover:border-primary/30 transition-all duration-200 cursor-pointer" aria-label="Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Image -->
|
||||
<div class="relative">
|
||||
<div class="aspect-square rounded-3xl bg-gradient-to-br from-primary/20 to-purple-600/20 border border-white/5 overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-64 h-64 rounded-full bg-gradient-to-br from-primary to-purple-600 opacity-80 blur-3xl"></div>
|
||||
</div>
|
||||
<div class="relative z-10 h-full flex items-center justify-center">
|
||||
<div class="w-48 h-48 rounded-full bg-surface border-4 border-primary/30 flex items-center justify-center">
|
||||
<span class="font-heading text-6xl font-bold gradient-text">AC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Elements -->
|
||||
<div class="absolute -top-4 -right-4 w-20 h-20 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute -bottom-4 -left-4 w-16 h-16 rounded-2xl bg-purple-600/10 border border-purple-600/20 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Work Section -->
|
||||
<section id="work" class="py-24 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-primary font-medium mb-3">Portfolio</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text">Featured Projects</h2>
|
||||
</div>
|
||||
|
||||
<!-- Project Grid (Masonry-style) -->
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Project 1 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-blue-600/20 to-cyan-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm">React</span>
|
||||
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-400 text-sm">TypeScript</span>
|
||||
<span class="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm">Node.js</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">E-Commerce Platform</h3>
|
||||
<p class="text-muted leading-relaxed">Full-featured online store with real-time inventory, Stripe payments, and admin dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 2 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-purple-600/20 to-pink-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-purple-500/10 text-purple-400 text-sm">Next.js</span>
|
||||
<span class="px-3 py-1 rounded-full bg-orange-500/10 text-orange-400 text-sm">Prisma</span>
|
||||
<span class="px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 text-sm">PostgreSQL</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">SaaS Dashboard</h3>
|
||||
<p class="text-muted leading-relaxed">Analytics platform with real-time data visualization, team collaboration, and custom reports.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 3 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-green-600/20 to-emerald-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-sm">Vue.js</span>
|
||||
<span class="px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-400 text-sm">Firebase</span>
|
||||
<span class="px-3 py-1 rounded-full bg-pink-500/10 text-pink-400 text-sm">Tailwind</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">Task Management App</h3>
|
||||
<p class="text-muted leading-relaxed">Collaborative project management tool with kanban boards, time tracking, and integrations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 4 -->
|
||||
<div class="group bg-surface rounded-3xl border border-white/5 overflow-hidden card-glow transition-all duration-300 cursor-pointer">
|
||||
<div class="aspect-video bg-gradient-to-br from-orange-600/20 to-red-600/20 relative overflow-hidden">
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-background/80 backdrop-blur-sm">
|
||||
<span class="text-text font-medium flex items-center gap-2">
|
||||
View Project
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex gap-2 mb-4">
|
||||
<span class="px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-sm">React Native</span>
|
||||
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm">GraphQL</span>
|
||||
<span class="px-3 py-1 rounded-full bg-teal-500/10 text-teal-400 text-sm">AWS</span>
|
||||
</div>
|
||||
<h3 class="font-heading text-2xl font-bold text-text mb-3">Fitness Tracker</h3>
|
||||
<p class="text-muted leading-relaxed">Cross-platform mobile app with workout tracking, nutrition logging, and social features.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section id="skills" class="py-24 px-6 bg-surface/50">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<p class="text-primary font-medium mb-3">Expertise</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text">Skills & Technologies</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Frontend -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Frontend</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">React</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Next.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">TypeScript</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Vue.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Tailwind CSS</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Framer Motion</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-green-500/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Backend</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Node.js</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Python</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">PostgreSQL</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">MongoDB</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">GraphQL</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">REST APIs</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools -->
|
||||
<div class="bg-surface p-8 rounded-3xl border border-white/5">
|
||||
<div class="w-14 h-14 rounded-2xl bg-purple-500/10 flex items-center justify-center mb-6">
|
||||
<svg class="w-7 h-7 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading text-xl font-bold text-text mb-4">Tools & DevOps</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Git</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Docker</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">AWS</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Vercel</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">CI/CD</span>
|
||||
<span class="px-3 py-2 rounded-lg bg-background text-muted text-sm">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 px-6">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<p class="text-primary font-medium mb-3">About Me</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text mb-6">Turning Ideas into Reality</h2>
|
||||
<p class="text-muted text-lg leading-relaxed mb-6">
|
||||
With 5+ years of experience in web development, I've had the privilege of working with startups and established companies to build products that make a difference.
|
||||
</p>
|
||||
<p class="text-muted text-lg leading-relaxed mb-8">
|
||||
I believe great software is born from the intersection of clean code, intuitive design, and deep understanding of user needs. When I'm not coding, you'll find me contributing to open source or exploring the latest web technologies.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">5+</div>
|
||||
<div class="text-muted text-sm">Years Experience</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">50+</div>
|
||||
<div class="text-muted text-sm">Projects Completed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-heading text-4xl font-bold gradient-text mb-2">30+</div>
|
||||
<div class="text-muted text-sm">Happy Clients</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="aspect-square rounded-3xl bg-gradient-to-br from-primary/10 to-purple-600/10 border border-white/5 p-8 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="w-32 h-32 rounded-full bg-gradient-to-br from-primary to-purple-600 mx-auto mb-6 flex items-center justify-center">
|
||||
<svg class="w-16 h-16 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<blockquote class="text-text text-lg italic">"Code is poetry written for machines to execute and humans to admire."</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-24 px-6 bg-surface/50">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<p class="text-primary font-medium mb-3">Get In Touch</p>
|
||||
<h2 class="font-heading text-4xl md:text-5xl font-bold text-text mb-6">Let's Work Together</h2>
|
||||
<p class="text-muted text-lg mb-12 max-w-2xl mx-auto">
|
||||
Have a project in mind or just want to chat? I'm always open to discussing new opportunities and creative ideas.
|
||||
</p>
|
||||
|
||||
<form class="bg-surface rounded-3xl border border-white/5 p-8 md:p-12 text-left">
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-text mb-2">Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="John Doe">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-text mb-2">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="john@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="subject" class="block text-sm font-medium text-text mb-2">Subject</label>
|
||||
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200" placeholder="Project Inquiry">
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<label for="message" class="block text-sm font-medium text-text mb-2">Message</label>
|
||||
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-xl bg-background border border-white/10 text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 resize-none" placeholder="Tell me about your project..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-primary hover:bg-cta text-white font-semibold py-4 rounded-xl transition-colors duration-200 cursor-pointer">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 px-6 border-t border-white/5">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-heading font-bold text-xl gradient-text">AC</span>
|
||||
<span class="text-muted">Alex Chen</span>
|
||||
</div>
|
||||
<p class="text-muted text-sm">2026 All rights reserved. Built with passion.</p>
|
||||
<div class="flex gap-4">
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="GitHub">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted hover:text-text transition-colors duration-200 cursor-pointer" aria-label="Twitter">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SaaSify - Streamline Your Workflow</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3B82F6',
|
||||
secondary: '#60A5FA',
|
||||
cta: '#F97316',
|
||||
background: '#F8FAFC',
|
||||
text: '#1E293B',
|
||||
},
|
||||
fontFamily: {
|
||||
heading: ['Poppins', 'sans-serif'],
|
||||
body: ['Open Sans', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-text antialiased">
|
||||
<!-- Floating Navbar -->
|
||||
<nav class="fixed top-4 left-4 right-4 z-50 bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="#" class="font-heading font-bold text-2xl text-primary cursor-pointer">SaaSify</a>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="#features" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Features</a>
|
||||
<a href="#testimonials" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Testimonials</a>
|
||||
<a href="#pricing" class="text-text/80 hover:text-primary transition-colors duration-200 cursor-pointer">Pricing</a>
|
||||
</div>
|
||||
<a href="#cta" class="bg-cta hover:bg-orange-600 text-white font-semibold px-6 py-2.5 rounded-lg transition-colors duration-200 cursor-pointer">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="pt-32 pb-20 px-4">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h1 class="font-heading text-4xl md:text-6xl font-bold text-text mb-6 leading-tight">
|
||||
Streamline Your Workflow<br>
|
||||
<span class="text-primary">Like Never Before</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-text/70 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Join 10,000+ teams who trust SaaSify to automate tasks, boost productivity, and scale their operations effortlessly.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<a href="#cta" class="bg-cta hover:bg-orange-600 text-white font-semibold px-8 py-4 rounded-xl text-lg transition-colors duration-200 cursor-pointer shadow-lg shadow-cta/30">
|
||||
Start Free Trial
|
||||
</a>
|
||||
<a href="#demo" class="bg-white hover:bg-gray-50 text-text font-semibold px-8 py-4 rounded-xl text-lg transition-colors duration-200 cursor-pointer border border-gray-200">
|
||||
Watch Demo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Social Proof Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">10K+</div>
|
||||
<div class="text-text/60 text-sm">Active Teams</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">99.9%</div>
|
||||
<div class="text-text/60 text-sm">Uptime SLA</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">50M+</div>
|
||||
<div class="text-text/60 text-sm">Tasks Automated</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-heading text-3xl md:text-4xl font-bold text-primary mb-2">4.9</div>
|
||||
<div class="text-text/60 text-sm">Star Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Logo Cloud -->
|
||||
<section class="py-16 bg-white border-y border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<p class="text-center text-text/50 text-sm font-medium mb-8 uppercase tracking-wider">Trusted by industry leaders</p>
|
||||
<div class="flex flex-wrap justify-center items-center gap-12 opacity-60">
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Stripe</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Notion</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Linear</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Vercel</text></svg>
|
||||
<svg class="h-8 w-auto" viewBox="0 0 124 24" fill="currentColor"><text x="0" y="20" font-family="Arial" font-size="20" font-weight="bold">Figma</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-24 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Everything You Need to Scale</h2>
|
||||
<p class="text-text/60 text-lg max-w-2xl mx-auto">Powerful features designed to help your team work smarter, not harder.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Instant Automation</h3>
|
||||
<p class="text-text/60 leading-relaxed">Set up workflows in minutes with our no-code builder. Automate repetitive tasks and focus on what matters.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Real-time Analytics</h3>
|
||||
<p class="text-text/60 leading-relaxed">Track performance metrics, identify bottlenecks, and make data-driven decisions with powerful dashboards.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-100 hover:shadow-xl hover:border-primary/20 transition-all duration-300 cursor-pointer group">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors duration-200">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-3">Enterprise Security</h3>
|
||||
<p class="text-text/60 leading-relaxed">Bank-level encryption, SOC 2 compliance, and granular permissions keep your data safe and secure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="py-24 px-4 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Loved by Teams Worldwide</h2>
|
||||
<p class="text-text/60 text-lg">See what our customers have to say about SaaSify.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Testimonial 1 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"SaaSify reduced our manual work by 80%. We can now focus on strategic initiatives instead of repetitive tasks."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary font-semibold">SM</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">Sarah Mitchell</div>
|
||||
<div class="text-sm text-text/50">VP Operations, TechCorp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 2 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"The analytics dashboard gives us insights we never had before. ROI was visible within the first month."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center text-secondary font-semibold">JC</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">James Chen</div>
|
||||
<div class="text-sm text-text/50">CTO, ScaleUp Inc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonial 3 -->
|
||||
<div class="bg-background p-8 rounded-2xl border border-gray-100 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex gap-1 mb-4">
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<p class="text-text/80 mb-6 leading-relaxed">"Best investment we've made. The integrations work flawlessly and support team is incredibly responsive."</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-cta/20 rounded-full flex items-center justify-center text-cta font-semibold">AR</div>
|
||||
<div>
|
||||
<div class="font-semibold text-text">Amanda Rodriguez</div>
|
||||
<div class="text-sm text-text/50">Founder, GrowthLab</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<section id="pricing" class="py-24 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-heading text-3xl md:text-4xl font-bold text-text mb-4">Simple, Transparent Pricing</h2>
|
||||
<p class="text-text/60 text-lg">Start free. Scale as you grow.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<!-- Starter -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-2">Starter</h3>
|
||||
<p class="text-text/50 text-sm mb-6">For small teams getting started</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-text">$0</span>
|
||||
<span class="text-text/50">/month</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Up to 5 users</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>100 automations/mo</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Basic analytics</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl border-2 border-gray-200 text-text font-semibold hover:border-primary hover:text-primary transition-colors duration-200 cursor-pointer">Get Started</button>
|
||||
</div>
|
||||
|
||||
<!-- Pro (Popular) -->
|
||||
<div class="bg-primary p-8 rounded-2xl border-2 border-primary relative cursor-pointer hover:shadow-xl transition-shadow duration-300 scale-105">
|
||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-cta text-white text-sm font-semibold px-4 py-1 rounded-full">Most Popular</div>
|
||||
<h3 class="font-heading font-semibold text-xl text-white mb-2">Pro</h3>
|
||||
<p class="text-white/70 text-sm mb-6">For growing teams</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-white">$49</span>
|
||||
<span class="text-white/70">/month</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Up to 25 users</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited automations</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Advanced analytics</li>
|
||||
<li class="flex items-center gap-3 text-white/90"><svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Priority support</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl bg-white text-primary font-semibold hover:bg-gray-100 transition-colors duration-200 cursor-pointer">Start Free Trial</button>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise -->
|
||||
<div class="bg-white p-8 rounded-2xl border border-gray-200 cursor-pointer hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 class="font-heading font-semibold text-xl text-text mb-2">Enterprise</h3>
|
||||
<p class="text-text/50 text-sm mb-6">For large organizations</p>
|
||||
<div class="mb-6">
|
||||
<span class="font-heading text-4xl font-bold text-text">Custom</span>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Unlimited users</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Custom integrations</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Dedicated support</li>
|
||||
<li class="flex items-center gap-3 text-text/70"><svg class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>SLA guarantee</li>
|
||||
</ul>
|
||||
<button class="w-full py-3 px-6 rounded-xl border-2 border-gray-200 text-text font-semibold hover:border-primary hover:text-primary transition-colors duration-200 cursor-pointer">Contact Sales</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="cta" class="py-24 px-4 bg-gradient-to-br from-primary to-secondary">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="font-heading text-3xl md:text-5xl font-bold text-white mb-6">Ready to Transform Your Workflow?</h2>
|
||||
<p class="text-white/80 text-lg md:text-xl mb-10 max-w-2xl mx-auto">Join thousands of teams already using SaaSify. Start your free trial today.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="bg-white text-primary font-semibold px-8 py-4 rounded-xl text-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer shadow-lg">
|
||||
Start Free Trial
|
||||
</button>
|
||||
<button class="bg-transparent border-2 border-white text-white font-semibold px-8 py-4 rounded-xl text-lg hover:bg-white/10 transition-colors duration-200 cursor-pointer">
|
||||
Schedule Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-text py-16 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
||||
<div>
|
||||
<a href="#" class="font-heading font-bold text-2xl text-white mb-4 block cursor-pointer">SaaSify</a>
|
||||
<p class="text-white/60 leading-relaxed">Streamline your workflow and scale your operations with powerful automation.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Product</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Features</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Pricing</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Integrations</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Company</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">About</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Blog</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Support</h4>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Help Center</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Contact</a></li>
|
||||
<li><a href="#" class="text-white/60 hover:text-white transition-colors duration-200 cursor-pointer">Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-white/40 text-sm">© 2026 SaaSify. All rights reserved.</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="text-white/40 hover:text-white transition-colors duration-200 cursor-pointer text-sm">Privacy</a>
|
||||
<a href="#" class="text-white/40 hover:text-white transition-colors duration-200 cursor-pointer text-sm">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user