rentungroup/rentun-group-web-app

# Rentun Group — 落地页 + 管理面板 ## 📁 项目位置历史 | 日期 | 位置 | 状态 | |-------|-----------|--------| | 2026年6月（初始） | `c:\Users\madfe\OneDrive\Documentos\perfil manuel\propuestas\rentun-group\` | HTML 原型 (`landing.html`) | | 2026年6月（迁移） | `C:\Users\madfe\OneDrive\Documentos\GitHub\rentun-group\` | ✅ 活跃的 React 项目 | ### 原型文件 (HTML) — 保留作参考 `propuestas/rentun-group/` 中的原始文件夹包含： - `landing.html` — 纯 HTML 的完整落地页原型 - `index.html` — 初始草图 - `boceto.html` — 设计探索 - `asset/` — 品牌徽标（5个版本：black, blanco, blue, horizontal, white） - `favicon_io/` — 所有生成的 favicons (favicon.ico, .png, apple-touch-icon, android-chrome, site.webmanifest) ## 🚀 快速开始 ### 1. 配置项目（首次） 双击 `setup.bat` — 复制 favicons、徽标并安装依赖项： ``` setup.bat ``` ### 2. 启动开发环境 ``` npm run dev # → http://localhost:5173 ``` ### 3. 生产环境构建 ``` npm run build ``` ## 🗂️ 项目结构 ``` rentun-group/ ├── public/ │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── site.webmanifest │ └── logos/ ← logos de la marca (5 versiones) ├── src/ │ ├── config/ │ │ └── site.js ← ⭐ CONFIG CENTRAL (links, datos, stats) │ ├── utils/ │ │ ├── db.js ← localStorage + TODO Supabase │ │ └── supabase.js ← cliente Supabase (preparado, inactivo) │ ├── pages/ │ │ ├── Landing.jsx ← Página principal / │ │ ├── Admin.jsx ← Panel admin /admin │ │ └── GuestGuide.jsx ← Guía de huésped /guia │ ├── components/ │ │ └── Navbar.jsx ← Barra de navegación │ ├── App.jsx ← Router principal │ ├── main.jsx ← Entry point React │ └── index.css ← Design tokens + estilos globales ├── .env.example ← Template de variables de entorno ├── .env ← ⚠️ NO subir a Git (en .gitignore) ├── .gitignore ├── vercel.json ← Configuración deploy Vercel (SPA routing) ├── vite.config.js ├── package.json ├── setup.bat ← Script de configuración inicial └── README.md ← Este archivo ``` ## 🌐 应用路由 | 路由 | 组件 | 描述 | |------|-----------|-------------| | `/` | `Landing.jsx` | 展示落地页 | | `/guia` | `GuestGuide.jsx` | 房客互动指南 | | `/admin` | `Admin.jsx` | 内容管理面板 | ## ✏️ 如何编辑内容 ### 选项 1 — 管理面板（推荐） 导航至 `http://localhost:5173/admin` 并编辑： - Hero 文本 - WhatsApp 号码 - 电子邮件 - Airbnb 链接 - 公寓描述 - 最终 CTA 更改保存在浏览器的 `localStorage` 中。 ### 选项 2 — 源代码 直接编辑 `src/config/site.js` 以进行永久更改。 ## 🔗 房产链接 (Bogotá · ★5.0) | 功能 | 链接 | |---------|------| | 主房源 | `https://es-l.airbnb.com/rooms/1637747920094051201` | | 直接预订 | `https://www.airbnb.com.co/book/stays/1637747920094051201?...` | | 评论 | `https://www.airbnb.com.co/rooms/1637747920094051201/reviews` | | 联系房东 | `https://www.airbnb.com.co/contact_host/1637747920094051201/send_message` | | 日历 | `...send_message#availability-calendar` | | 房屋规则 | `https://www.airbnb.com.co/rooms/1637747920094051201/house-rules` | | 安全 | `https://www.airbnb.com.co/rooms/1637747920094051201/safety` | ## 📞 联系信息 | 字段 | 值 | 状态 | |-------|-------|--------| | WhatsApp | `573219511173` | ⏳ 临时 — 在收到真实的 Airbnb 号码后更新 | | Email | `rentungroup@gmail.com` | ⏳ 占位符 — 使用最终邮箱更新 | ## 🏗️ 基础设施与部署 ### 当前状态 - **本地:** `npm run dev` → `localhost:5173` - **生产环境:** 待配置 ### 在 Vercel 上部署： 1. 将项目上传到 GitHub 2. 在 [vercel.com](https://vercel.com) 连接仓库 3. 配置环境变量（参见 `.env.example`） 4. 每次 `git push` 时自动部署 `vercel.json` 已为 SPA 路由 (React Router) 配置完毕。 ### Vercel 需要的环境变量： ``` VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key VITE_WA_NUMBER=573219511173 VITE_CONTACT_EMAIL=rentungroup@gmail.com ``` ## 🗄️ Supabase 集成（待定） 项目已准备好连接到 Supabase。获取凭据后： 1. 在 [supabase.com](https://supabase.com) 创建项目 2. 将 URL 和 anon key 复制到 `.env` 文件中 3. 在 `src/utils/supabase.js` → 取消注释客户端相关代码行 4. 在 `src/utils/db.js` → 将 `localStorage` 函数替换为 Supabase 函数（标记为 `// TODO: Supabase`） **Supabase 建议的表格：** ``` CREATE TABLE site_config ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), key TEXT UNIQUE NOT NULL, value TEXT, updated_at TIMESTAMPTZ DEFAULT now() ); ``` ## 🎨 官方调色板 | Token | Hex | 用途 | |-------|-----|-----| | `--navy` | `#0F4C81` | 主色调、navbar、按钮 | | `--orange` | `#F57C00` | 强调色、徽章、CTA | | `--gray` | `#B0B4B8` | 次要文本 | | `--light` | `#E6E7E8` | 边框、柔和背景 | 字体：**Outfit** (Google Fonts) — 字重 300 → 900 ## 📦 主要依赖项 ``` { "react": "^19.2.6", "react-dom": "^19.2.6", "react-router-dom": "^7.17.0", "framer-motion": "^12.40.0", "lucide-react": "^1.18.0", "@supabase/supabase-js": "^2.49.4", "clsx": "^2.1.1" } ``` ## 📝 更新日志 ### v1.0.0 — 2026年6月 - ✅ `propuestas` 文件夹中的 HTML 原型 (`landing.html`) - ✅ 采用 Rentun Group 官方调色板的设计 - ✅ 集成 Airbnb embed (JSSDK) - ✅ 1 个真实房产 (Bogotá · ★5.0 · 1卧室 · 1张床 · 1浴室) - ✅ 基础 SEO + Schema.org JSON-LD ### v2.0.0 — 2026年6月（迁移至 React） - ✅ 项目迁移至 **React 19 + Vite** - ✅ 移至 `GitHub/rentun-group/`（客户项目文件夹） - ✅ 3 个路由的架构：`/` · `/guia` · `/admin` - ✅ 集中配置 (`src/config/site.js`) 包含所有 Airbnb 链接 - ✅ 可编辑的管理面板 (`/admin`)：Hero、WhatsApp、Email、链接、描述 - ✅ 房客指南 (`/guia`) 包含标签页：开始、手册、退房、规则 - ✅ 集成 Favicons（来源：`favicon_io/`） - ✅ 准备好对接 Supabase + GitHub + Vercel - ✅ 配置了用于 SPA 路由的 `vercel.json` - ✅ 带有环境变量模板的 `.env.example` ### 待办事项 - ⏳ 运行 `setup.bat` 以复制 favicons 并执行 `npm install` - ⏳ 更新真实的 WhatsApp 号码（在 Airbnb 提供后） - ⏳ 连接 Supabase（在收到项目凭据后） - ⏳ 上传至 GitHub 并连接到 Vercel 进行部署 - ⏳ 管理面板的 Auth（使用 Supabase Auth） ## 👤 致谢 由 [**J&M Tech Solutions**](https://www.jymtechsolutions.online/es) 开发 主要开发者：**Manuel Madrid** 客户：**Rentun Group** · Bogotá, Colombia

标签：AI智能客服, React, Supabase, Syscalls, 后台管理面板, 房屋短租, 自定义脚本