diff --git a/.workbuddy/memory/2026-04-01.md b/.workbuddy/memory/2026-04-01.md new file mode 100644 index 0000000..76a8f4d --- /dev/null +++ b/.workbuddy/memory/2026-04-01.md @@ -0,0 +1,8 @@ +# 2026-04-01 工作记录 + +- 评估将云展网/易企秀 H5 页面接入微信小程序首页的方案：优先建议使用 `web-view` 承载独立画册页，并在首页增加“电子画册/品牌画册”入口；前提是第三方链接域名可在小程序后台配置为业务域名且满足 HTTPS/备案要求。若第三方域名不可配置，则建议改为把画册内容转成图片或原生页面放入小程序，不建议直接依赖外链跳转。 +- 已按方案一落地：新增 `/pages/brochure/index` 作为 `web-view` 画册页，首页增加 `BrochureEntry` 卡片入口并完成路由配置；`npm run build:weapp` 构建通过。后续上线前需在小程序后台把 `book.yunzhan365.com` 配置为业务域名。 +- 继续优化画册接入体验：`/pages/brochure/index` 增加失败兜底界面，支持“重新加载 / 返回首页”，并在首页入口文案中明确“在线翻阅”；再次执行 `npm run build:weapp` 构建通过。 +- 用户确认无法让 `book.yunzhan365.com` 配置微信业务域名校验文件，因此第三方云展网链接不能作为小程序正式 `web-view` 接入方案；后续需改为自有域名中转、自有 H5 承载，或转图片/原生页展示。 +- 已按用户要求将 `/pages/brochure/index` 改成原生画册页：包含品牌主视觉、核心优势、服务范围、案例方向、服务流程与咨询 CTA，同时把首页入口文案改为适配原生页；`npm run build:weapp` 再次通过。 +- 继续推进画册正式版：`/pages/brochure/index` 现优先读取站点配置中的品牌名、电话、地址、工作时间，新增主营方案、服务承诺、预约咨询信息与“拨打热线 / 复制地址 / 返回首页”操作；同时把首页 `BrochureEntry` 真实挂到 Banner 下方，`npm run build:weapp` 构建通过。 diff --git a/.workbuddy/memory/2026-04-02.md b/.workbuddy/memory/2026-04-02.md new file mode 100644 index 0000000..873f73a --- /dev/null +++ b/.workbuddy/memory/2026-04-02.md @@ -0,0 +1,3 @@ +# 2026-04-02 工作记录 + +- 首页布局微调：将品牌画册入口（BrochureEntry）从 Banner 下方移至 NoticeBar 下方；同时注释隐藏 CaseShowcase（成功案例区块）。 diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md index d985177..ba53772 100644 --- a/.workbuddy/memory/MEMORY.md +++ b/.workbuddy/memory/MEMORY.md @@ -13,26 +13,26 @@ ## 关键路径 - 首页入口：`src/pages/index/index.tsx` +- 画册页：`src/pages/brochure/index.tsx`（当前为原生品牌画册展示页） - 分销商页面：`src/dealer/index.tsx` - 用户钱包：`src/user/wallet/wallet.tsx` - 客户管理：`src/dealer/customer/index` - 邀请码：`src/dealer/qrcode/index` - 导航工具：`src/utils/common.ts` (navTo函数) -## 首页结构 (2026-03-31 更新) +## 首页结构 (2026-04-02 更新) - Header (吸顶搜索栏) - Menu (导航菜单，hidden) - Banner (轮播广告) -- QuickActions (门窗业务快捷服务 - 2x2网格卡片) -- NoticeBar (公告栏) -- BestSellers (热销商品) - Grid (功能菜单) +- NoticeBar (公告栏) +- **BrochureEntry** (品牌画册入口卡片 — 位于公告栏下方) +- BestSellers (热销商品) - **TrustSection** (品牌信任区 - 3列水平布局) - 品质保障：10年质保，德国进口五金 - 专业团队：15年安装经验，持证上岗 - 客户好评：5000+家庭选择，98%满意度 -- **CaseShowcase** (案例展示 - 横向滚动画廊) - - 高端住宅、商业办公、别墅定制、旧窗改造 +- ~~CaseShowcase~~ (已注释隐藏，待有真实素材后再恢复) - **ContactSection** (联系方式 - 2x2网格布局) - 客服热线、在线咨询、门店地址、关注我们 @@ -52,3 +52,16 @@ - 项目标题：`text-base font-semibold text-gray-800` - 项目描述：`text-xs text-gray-500` - 小文本：`text-xs text-gray-500` + +## 画册页正式版 (2026-04-01) +- 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口，位置在 Banner 下方。 +- `src/pages/brochure/index.tsx` 当前为原生正式版结构：主营方案、核心优势、升级关键词、服务承诺、案例方向、服务流程、预约咨询信息。 +- 画册页优先读取 `configWebsiteField` 返回的 `siteName`、`tel`、`address`、`workDay` 作为品牌与联系信息；无配置时使用兜底文案。 +- 当前页面提供“拨打热线 / 复制地址 / 返回首页”三类转化操作，后续可继续接真实案例图、门店定位与预约表单。 + +## 外部 H5/画册接入约定 (2026-04-01) +- 小程序首页如需承载外部画册、易企秀、云展网等 H5，优先采用独立 `web-view` 页面承载，再从首页增加入口卡片或 banner 跳转。 +- 该方案的前提是目标域名可在小程序后台配置为业务域名，且满足 HTTPS、备案等微信限制。 +- 外部 `web-view` 页面应提供失败兜底界面（如重新加载、返回首页、管理员配置提示），不要只保留 toast 提示。 +- 当前 `book.yunzhan365.com` 无法配合放置微信业务域名校验文件，因此不能作为小程序正式业务域名接入。 +- 如果目标链接是第三方不可控域名，无法完成业务域名配置，则改为将内容转成图片、PDF 切图或原生页面在小程序内展示，不依赖直接外链打开；若仍想保留在线翻页体验，需迁移到自有可验证域名承载。 diff --git a/src/app.config.ts b/src/app.config.ts index 19a112e..0c40490 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,6 +1,7 @@ export default defineAppConfig({ pages: [ 'pages/index/index', + 'pages/brochure/index', 'pages/cart/cart', 'pages/find/find', 'pages/user/user' diff --git a/src/pages/brochure/index.config.ts b/src/pages/brochure/index.config.ts new file mode 100644 index 0000000..b1502e9 --- /dev/null +++ b/src/pages/brochure/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '品牌画册', + navigationBarBackgroundColor: '#ffffff', + navigationBarTextStyle: 'black' +}) diff --git a/src/pages/brochure/index.scss b/src/pages/brochure/index.scss new file mode 100644 index 0000000..06d3c19 --- /dev/null +++ b/src/pages/brochure/index.scss @@ -0,0 +1,381 @@ +.brochure-page { + min-height: 100vh; + padding: 24px 24px 40px; + background: linear-gradient(180deg, #f6f3ef 0%, #ffffff 24%, #f8fafc 100%); + box-sizing: border-box; +} + +.brochure-page__hero { + display: flex; + flex-direction: column; + gap: 18px; + padding: 30px 24px; + border-radius: 28px; + background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 60%, #f1d4a6 100%); + box-shadow: 0 18px 42px rgba(159, 106, 45, 0.2); +} + +.brochure-page__eyebrow { + font-size: 26px; + line-height: 1.4; + color: rgba(255, 255, 255, 0.9); + font-weight: 600; +} + +.brochure-page__title { + font-size: 44px; + line-height: 1.4; + color: #ffffff; + font-weight: 700; +} + +.brochure-page__desc { + font-size: 28px; + line-height: 1.8; + color: rgba(255, 255, 255, 0.88); +} + +.brochure-page__meta-list { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.brochure-page__meta-pill { + padding: 10px 18px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.16); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.brochure-page__meta-text { + font-size: 22px; + line-height: 1.4; + color: #ffffff; + font-weight: 600; +} + +.brochure-page__stats { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 6px; +} + +.brochure-page__stat { + display: flex; + flex-direction: column; + gap: 8px; + padding: 18px 14px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.14); + backdrop-filter: blur(10px); +} + +.brochure-page__stat-value { + font-size: 34px; + line-height: 1.2; + color: #ffffff; + font-weight: 700; +} + +.brochure-page__stat-label { + font-size: 22px; + line-height: 1.4; + color: rgba(255, 255, 255, 0.82); +} + +.brochure-page__section { + display: flex; + flex-direction: column; + gap: 18px; + margin-top: 22px; +} + +.brochure-page__section--process { + margin-top: 26px; +} + +.brochure-page__section-head, +.brochure-page__contact-head { + display: flex; + flex-direction: column; + gap: 8px; +} + +.brochure-page__section-title { + font-size: 34px; + line-height: 1.4; + color: #1f2937; + font-weight: 700; +} + +.brochure-page__section-desc { + font-size: 24px; + line-height: 1.7; + color: #6b7280; +} + +.brochure-page__solution-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.brochure-page__solution-card, +.brochure-page__highlight-card, +.brochure-page__case-card, +.brochure-page__process-item, +.brochure-page__promise-item, +.brochure-page__contact-card { + border-radius: 24px; + background: #ffffff; + box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); +} + +.brochure-page__solution-card { + display: flex; + flex-direction: column; + gap: 10px; + padding: 22px 20px; +} + +.brochure-page__highlight-list, +.brochure-page__case-list, +.brochure-page__process-list, +.brochure-page__promise-list { + display: flex; + flex-direction: column; + gap: 16px; +} + +.brochure-page__highlight-card { + display: flex; + gap: 16px; + padding: 22px 20px; +} + +.brochure-page__highlight-icon { + display: flex; + align-items: center; + justify-content: center; + width: 72px; + height: 72px; + border-radius: 20px; + flex-shrink: 0; + background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 100%); +} + +.brochure-page__highlight-content, +.brochure-page__case-content, +.brochure-page__process-content, +.brochure-page__promise-content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.brochure-page__card-title { + font-size: 30px; + line-height: 1.5; + color: #1f2937; + font-weight: 600; +} + +.brochure-page__card-desc { + font-size: 24px; + line-height: 1.7; + color: #6b7280; +} + +.brochure-page__tag-list { + display: flex; + flex-wrap: wrap; + gap: 14px; +} + +.brochure-page__tag { + padding: 14px 22px; + border-radius: 999px; + background: rgba(159, 106, 45, 0.1); + border: 1px solid rgba(159, 106, 45, 0.14); +} + +.brochure-page__tag-text { + font-size: 24px; + line-height: 1.4; + color: #9f6a2d; + font-weight: 600; +} + +.brochure-page__promise-item { + display: flex; + gap: 16px; + padding: 22px 20px; +} + +.brochure-page__promise-index { + display: flex; + align-items: center; + justify-content: center; + width: 72px; + height: 72px; + border-radius: 18px; + flex-shrink: 0; + background: #f8f1e7; + font-size: 24px; + line-height: 1.2; + color: #9f6a2d; + font-weight: 700; +} + +.brochure-page__case-card { + overflow: hidden; +} + +.brochure-page__case-visual { + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 8px; + height: 180px; + padding: 22px 20px; + background: linear-gradient(135deg, #c79047 0%, #f0d3a2 100%); +} + +.brochure-page__case-index { + font-size: 24px; + line-height: 1.2; + color: rgba(255, 255, 255, 0.86); + font-weight: 700; +} + +.brochure-page__case-visual-title { + font-size: 34px; + line-height: 1.4; + color: #ffffff; + font-weight: 700; +} + +.brochure-page__case-content { + padding: 22px 20px 24px; +} + +.brochure-page__process-item { + display: flex; + gap: 16px; + padding: 22px 20px; +} + +.brochure-page__process-step { + display: flex; + align-items: center; + justify-content: center; + width: 72px; + height: 72px; + border-radius: 999px; + background: #f3ede6; + flex-shrink: 0; +} + +.brochure-page__process-step-text { + font-size: 24px; + line-height: 1.2; + color: #9f6a2d; + font-weight: 700; +} + +.brochure-page__contact-card { + display: flex; + flex-direction: column; + gap: 18px; + margin-top: 26px; + padding: 28px 24px; +} + +.brochure-page__cta-title { + font-size: 34px; + line-height: 1.4; + color: #1f2937; + font-weight: 700; +} + +.brochure-page__cta-desc, +.brochure-page__cta-tip { + font-size: 24px; + line-height: 1.7; + color: #6b7280; +} + +.brochure-page__contact-list { + display: flex; + flex-direction: column; + gap: 14px; +} + +.brochure-page__contact-item { + display: flex; + flex-direction: column; + gap: 8px; + padding: 18px 20px; + border-radius: 20px; + background: #f8fafc; +} + +.brochure-page__contact-label { + font-size: 22px; + line-height: 1.4; + color: #9ca3af; +} + +.brochure-page__contact-value { + font-size: 28px; + line-height: 1.6; + color: #1f2937; + font-weight: 600; +} + +.brochure-page__cta-actions { + display: flex; + flex-direction: column; + gap: 14px; +} + +.brochure-page__button { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + height: 92px; + border-radius: 999px; +} + +.brochure-page__button--primary { + background: linear-gradient(135deg, #9f6a2d 0%, #d7a25d 100%); +} + +.brochure-page__button--secondary { + background: #f3f4f6; +} + +.brochure-page__button--ghost { + background: #fff7ed; + border: 1px solid rgba(159, 106, 45, 0.16); +} + +.brochure-page__button-text { + font-size: 28px; + font-weight: 600; +} + +.brochure-page__button-text--light { + color: #ffffff; +} + +.brochure-page__button-text--dark { + color: #1f2937; +} + +.brochure-page__button-text--gold { + color: #9f6a2d; +} diff --git a/src/pages/brochure/index.tsx b/src/pages/brochure/index.tsx new file mode 100644 index 0000000..97550ac --- /dev/null +++ b/src/pages/brochure/index.tsx @@ -0,0 +1,385 @@ +import React, { useEffect, useState } from 'react' +import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { + ShieldCheck, + People, + Star, + Phone, + ArrowRight, + Location +} from '@nutui/icons-react-taro' +import { configWebsiteField } from '@/api/cms/cmsWebsiteField' +import type { Config } from '@/api/cms/cmsWebsiteField/model' +import './index.scss' + +const DEFAULT_BRAND_NAME = '南南佐顿门窗' +const DEFAULT_HOTLINE_DISPLAY = '400-888-9999' +const DEFAULT_HOTLINE = '4008889999' +const DEFAULT_ADDRESS = '欢迎到店咨询门窗定制方案' +const DEFAULT_WORKDAY = '周一至周日 08:30-18:30' + +const solutionItems = [ + { + title: '系统门窗定制', + description: '适合新房装修、整屋升级，兼顾隔音、保温与颜值表现。' + }, + { + title: '阳台封窗升级', + description: '改善通风采光与密封性，让阳台更安全、更好用。' + }, + { + title: '别墅门窗方案', + description: '支持大面宽、转角窗与个性化立面设计定制。' + }, + { + title: '旧窗改造换新', + description: '针对渗水、噪音、漏风等问题，缩短施工周期，减少打扰。' + } +] + +const highlightItems = [ + { + icon: , + title: '品质保障', + description: '10年质保，精选型材与进口五金，兼顾安全、隔音与耐久。' + }, + { + icon: , + title: '专业团队', + description: '15年门窗安装经验，量尺、设计、施工全流程标准化服务。' + }, + { + icon: , + title: '真实口碑', + description: '5000+家庭选择，98%满意度，支持老房换窗与整屋升级。' + } +] + +const serviceTags = ['隔音静享', '节能保温', '抗风防水', '儿童安全', '颜值升级', '售后跟进'] + +const caseItems = [ + { + title: '高端住宅', + subtitle: '静音隔热更舒适', + description: '针对高层住宅、改善型家庭，优化隔音、保温与采光表现。' + }, + { + title: '商业办公', + subtitle: '兼顾颜值与效率', + description: '满足门店、办公室、展示空间的通透感、安全性与维护便利。' + }, + { + title: '别墅定制', + subtitle: '大面宽与个性化设计', + description: '结合建筑立面风格，定制开启方式、型材颜色与细节工艺。' + }, + { + title: '旧窗改造', + subtitle: '不大拆也能焕新', + description: '聚焦老房渗水、噪音、密封差等问题，缩短施工周期，减少打扰。' + } +] + +const promiseItems = [ + { + title: '方案先沟通再报价', + description: '结合房型、预算与使用需求，给出更贴合实际的门窗建议。' + }, + { + title: '量尺安装标准化', + description: '从上门测量、下单生产到现场安装，流程更清晰、交付更稳定。' + }, + { + title: '售后问题可跟进', + description: '支持使用阶段咨询、五金维护与常见问题排查，减少后顾之忧。' + } +] + +const processItems = [ + { + step: '01', + title: '需求沟通', + description: '了解房型、预算、风格偏好与使用场景。' + }, + { + step: '02', + title: '上门量尺', + description: '安排人员实地测量，核对尺寸与安装条件。' + }, + { + step: '03', + title: '方案报价', + description: '输出门窗方案、材质配置与施工报价。' + }, + { + step: '04', + title: '安装售后', + description: '规范安装交付，提供后续保养与售后支持。' + } +] + +const getDialNumber = (value?: string) => { + const pureNumber = (value || '').replace(/\D/g, '') + return pureNumber || DEFAULT_HOTLINE +} + +const BrochurePage: React.FC = () => { + const [config, setConfig] = useState() + + useEffect(() => { + configWebsiteField({}) + .then((data) => { + setConfig(data) + }) + .catch(() => undefined) + }, []) + + const brandName = config?.siteName || config?.loginTitle || DEFAULT_BRAND_NAME + const hotlineText = config?.tel || DEFAULT_HOTLINE_DISPLAY + const hotline = getDialNumber(config?.tel) + const address = config?.address || DEFAULT_ADDRESS + const workDay = config?.workDay || DEFAULT_WORKDAY + + useShareTimeline(() => { + return { + title: `${brandName} - 品牌画册`, + path: '/pages/brochure/index' + } + }) + + useShareAppMessage(() => { + return { + title: `${brandName}｜门窗定制安装服务`, + path: '/pages/brochure/index' + } + }) + + const handleBackHome = () => { + Taro.reLaunch({ + url: '/pages/index/index' + }) + } + + const handleCallPhone = () => { + Taro.showModal({ + title: '拨打电话', + content: `是否拨打客服热线 ${hotlineText}？`, + confirmText: '拨打', + cancelText: '取消', + success: (res) => { + if (!res.confirm) { + return + } + + Taro.makePhoneCall({ + phoneNumber: hotline, + fail: () => { + Taro.showToast({ + title: '拨号失败，请稍后重试', + icon: 'none' + }) + } + }) + } + }) + } + + const handleCopyAddress = () => { + Taro.setClipboardData({ + data: address, + success: () => { + Taro.showToast({ + title: '地址已复制', + icon: 'none' + }) + } + }) + } + + return ( + + + {brandName} + 系统门窗定制与安装服务 + + 从方案咨询、上门量尺到安装售后，覆盖住宅、门店、别墅与旧窗改造等门窗升级场景。 + + + + + 10年质保 + + + 上门量尺 + + + 售后跟进 + + + + + + 10年 + 质保承诺 + + + 15年 + 安装经验 + + + 5000+ + 家庭选择 + + + + + + + 主营方案 + 把用户最常问的几类门窗服务先讲清楚，方便快速判断是否适合。 + + + {solutionItems.map((item) => ( + + {item.title} + {item.description} + + ))} + + + + + + 核心优势 + 从产品配置到落地安装，都围绕居住体验与使用寿命做升级。 + + + {highlightItems.map((item) => ( + + {item.icon} + + {item.title} + {item.description} + + + ))} + + + + + + 门窗升级关键词 + 正式版页面先突出用户最关心的体验点，后续也方便叠加真实案例素材。 + + + {serviceTags.map((item) => ( + + {item} + + ))} + + + + + + 服务承诺 + 把“怎么做事”说清楚，比堆很多空话更像正式版。 + + + {promiseItems.map((item, index) => ( + + {`0${index + 1}`} + + {item.title} + {item.description} + + + ))} + + + + + + 精选案例方向 + 当前先保留正式版结构位，后续可直接替换真实项目图片、客户评价与施工前后对比。 + + + {caseItems.map((item, index) => ( + + + {`0${index + 1}`} + {item.title} + + + {item.subtitle} + {item.description} + + + ))} + + + + + + 服务流程 + 标准流程更省心，方案确认后即可安排施工交付。 + + + {processItems.map((item) => ( + + + {item.step} + + + {item.title} + {item.description} + + + ))} + + + + + + 预约咨询与到店信息 + 联系方式改为优先读取系统配置，避免正式版上线后还要手动改死文案。 + + + + + 服务热线 + {hotlineText} + + + 服务时间 + {workDay} + + + 门店地址 + {address} + + + + + + + 拨打热线 + + + + 复制地址 + + + 返回首页 + + + + + 下一步如果你给我真实案例图、门店地址和热线，我可以直接把这一页收口成上线版。 + + + ) +} + +export default BrochurePage diff --git a/src/pages/index/BrochureEntry.scss b/src/pages/index/BrochureEntry.scss new file mode 100644 index 0000000..91a1387 --- /dev/null +++ b/src/pages/index/BrochureEntry.scss @@ -0,0 +1,36 @@ +.brochure-entry { + margin-top: 12px; +} + +.brochure-entry__card { + display: flex; + align-items: center; + gap: 12px; + padding: 16px; + border-radius: 16px; + background: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%); + box-shadow: 0 10px 24px rgba(29, 78, 216, 0.18); +} + +.brochure-entry__icon { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + flex-shrink: 0; + border-radius: 12px; + background: rgba(255, 255, 255, 0.16); +} + +.brochure-entry__content { + flex: 1; + gap: 4px; +} + +.brochure-entry__action { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} diff --git a/src/pages/index/BrochureEntry.tsx b/src/pages/index/BrochureEntry.tsx new file mode 100644 index 0000000..eddc481 --- /dev/null +++ b/src/pages/index/BrochureEntry.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { ImageRectangle, ArrowRight } from '@nutui/icons-react-taro' +import './BrochureEntry.scss' + +const BROCHURE_TITLE = '品牌画册' + +const BrochureEntry: React.FC = () => { + const handleClick = () => { + Taro.navigateTo({ + url: '/pages/brochure/index' + }) + } + + return ( + + + + + + + + {BROCHURE_TITLE} + + 快速了解企业介绍、案例展示与门窗服务流程 + + + + + 查看画册 + + + + + ) +} + +export default BrochureEntry diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 88d0e52..a7d9cba 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -14,6 +14,7 @@ import PopUpAd from "@/pages/index/PopUpAd"; import TrustSection from "./TrustSection"; import CaseShowcase from "./CaseShowcase"; import ContactSection from "./ContactSection"; +import BrochureEntry from "./BrochureEntry"; import {configWebsiteField} from "@/api/cms/cmsWebsiteField"; import type {Config} from "@/api/cms/cmsWebsiteField/model"; @@ -120,9 +121,10 @@ function Home() { + - + {/* */}