Merge version_1 into main #2
284
src/app/page.tsx
284
src/app/page.tsx
@@ -20,27 +20,26 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "首頁",
|
||||
id: "hero",
|
||||
},
|
||||
name: "首頁", id: "hero"},
|
||||
{
|
||||
name: "關於揚文",
|
||||
id: "about",
|
||||
},
|
||||
name: "關於揚文", id: "about"},
|
||||
{
|
||||
name: "所有產品",
|
||||
id: "products",
|
||||
},
|
||||
name: "所有產品", id: "products"},
|
||||
{
|
||||
name: "聯絡我們",
|
||||
id: "contact",
|
||||
},
|
||||
name: "聯絡我們", id: "contact"},
|
||||
]}
|
||||
brandName="揚文企業"
|
||||
/>
|
||||
@@ -48,42 +47,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
title="20年專業事務機服務，與您共創永續經營"
|
||||
description="以客為尊，提供速印機、影印機租賃與維修，持續追求創新，走在潮流尖端，滿足您的辦公需求。"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iwxa2g&_wi=1",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6wjzu2&_wi=1",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qntmmr",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rh4dj4",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f30j7p",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p4vnjt",
|
||||
imageAlt: "office printer maintenance professional",
|
||||
},
|
||||
{ id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iwxa2g", imageAlt: "office printer maintenance professional" },
|
||||
{ id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6wjzu2", imageAlt: "office printer maintenance professional" },
|
||||
{ id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qntmmr", imageAlt: "office printer maintenance professional" },
|
||||
{ id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rh4dj4", imageAlt: "office printer maintenance professional" },
|
||||
{ id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f30j7p", imageAlt: "office printer maintenance professional" },
|
||||
{ id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p4vnjt", imageAlt: "office printer maintenance professional" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -93,21 +66,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="揚文企業的專業核心"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "專業經驗",
|
||||
value: "20年+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "服務客戶",
|
||||
value: "數千+",
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
label: "維修滿意度",
|
||||
value: "99%",
|
||||
},
|
||||
{ icon: Award, label: "專業經驗", value: "20年+" },
|
||||
{ icon: Users, label: "服務客戶", value: "數千+" },
|
||||
{ icon: Settings, label: "維修滿意度", value: "99%" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -119,27 +80,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "速印機租賃",
|
||||
subtitle: "高速且穩定的輸出效能，適合各式高量印刷需求。",
|
||||
category: "設備租賃",
|
||||
value: "高效",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "OA事務機維修",
|
||||
subtitle: "專業團隊到府維修，確保您的辦公效率不受干擾。",
|
||||
category: "專業維護",
|
||||
value: "穩定",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "印刷設計諮詢",
|
||||
subtitle: "提供客製化印刷建議，讓您的品牌形象更加突顯。",
|
||||
category: "設計服務",
|
||||
value: "創意",
|
||||
},
|
||||
{ id: "f1", title: "速印機租賃", subtitle: "高速且穩定的輸出效能，適合各式高量印刷需求。", category: "設備租賃", value: "高效" },
|
||||
{ id: "f2", title: "OA事務機維修", subtitle: "專業團隊到府維修，確保您的辦公效率不受干擾。", category: "專業維護", value: "穩定" },
|
||||
{ id: "f3", title: "印刷設計諮詢", subtitle: "提供客製化印刷建議，讓您的品牌形象更加突顯。", category: "設計服務", value: "創意" }
|
||||
]}
|
||||
title="為什麼選擇揚文服務？"
|
||||
description="我們珍惜與每位客戶交易的機會，全體員工抱持熱忱，為您提供最專業的事務機解決方案。"
|
||||
@@ -153,48 +96,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "高速影印機",
|
||||
price: "洽詢報價",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9ce9d&_wi=1",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "速印印刷機",
|
||||
price: "洽詢報價",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nmnbwr",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "事務機耗材組",
|
||||
price: "選購諮詢",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hxw7ci",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "數位裁紙機",
|
||||
price: "選購諮詢",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dfd2nx",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "專業級版紙",
|
||||
price: "洽詢報價",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tv4bc3",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "環保專用油墨",
|
||||
price: "洽詢報價",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cdgij5",
|
||||
imageAlt: "digital office photocopier",
|
||||
},
|
||||
{ id: "p1", name: "高速影印機", price: "洽詢報價", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9ce9d", imageAlt: "digital office photocopier" },
|
||||
{ id: "p2", name: "速印印刷機", price: "洽詢報價", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nmnbwr", imageAlt: "digital office photocopier" },
|
||||
{ id: "p3", name: "事務機耗材組", price: "選購諮詢", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hxw7ci", imageAlt: "digital office photocopier" },
|
||||
{ id: "p4", name: "數位裁紙機", price: "選購諮詢", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dfd2nx", imageAlt: "digital office photocopier" },
|
||||
{ id: "p5", name: "專業級版紙", price: "洽詢報價", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tv4bc3", imageAlt: "digital office photocopier" },
|
||||
{ id: "p6", name: "環保專用油墨", price: "洽詢報價", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cdgij5", imageAlt: "digital office photocopier" }
|
||||
]}
|
||||
title="核心優質產品"
|
||||
description="多元化的產品選擇，親民的價格，滿足您所有的辦公需求。"
|
||||
@@ -206,46 +113,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "五星專業評價",
|
||||
quote: "服務專業，四周都是影印機的機台與零件，應該是事務機修繕與維護專家。",
|
||||
name: "Velon Lee",
|
||||
role: "企業客戶",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7gt3fu",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "非常滿意",
|
||||
quote: "揚文團隊非常積極，解決了我們長久以來的列印設備問題。",
|
||||
name: "張先生",
|
||||
role: "教育機關",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iwxa2g&_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "卓越品質",
|
||||
quote: "感謝貴公司專業且親民的價格，印刷品質極佳。",
|
||||
name: "王小姐",
|
||||
role: "設計公司",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yyv64q&_wi=1",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "快速響應",
|
||||
quote: "維修響應速度很快，不愧是走在潮流尖端的服務團隊。",
|
||||
name: "李經理",
|
||||
role: "零售業",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9ce9d&_wi=2",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "細心維護",
|
||||
quote: "溝通親切，每次來檢查機器都處理得很完善。",
|
||||
name: "陳小姐",
|
||||
role: "行政秘書",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6wjzu2&_wi=2",
|
||||
},
|
||||
{ id: "1", title: "五星專業評價", quote: "服務專業，四周都是影印機的機台與零件，應該是事務機修繕與維護專家。", name: "Velon Lee", role: "企業客戶", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7gt3fu" },
|
||||
{ id: "2", title: "非常滿意", quote: "揚文團隊非常積極，解決了我們長久以來的列印設備問題。", name: "張先生", role: "教育機關", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=iwxa2g" },
|
||||
{ id: "3", title: "卓越品質", quote: "感謝貴公司專業且親民的價格，印刷品質極佳。", name: "王小姐", role: "設計公司", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yyv64q" },
|
||||
{ id: "4", title: "快速響應", quote: "維修響應速度很快，不愧是走在潮流尖端的服務團隊。", name: "李經理", role: "零售業", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w9ce9d" },
|
||||
{ id: "5", title: "細心維護", quote: "溝通親切，每次來檢查機器都處理得很完善。", name: "陳小姐", role: "行政秘書", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6wjzu2" }
|
||||
]}
|
||||
title="客戶好評見證"
|
||||
description="多年來，揚文深耕在地，與許多客戶建立了深厚的合作關係。"
|
||||
@@ -257,13 +129,7 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"合作夥伴 A",
|
||||
"合作夥伴 B",
|
||||
"合作夥伴 C",
|
||||
"合作夥伴 D",
|
||||
"合作夥伴 E",
|
||||
"合作夥伴 F",
|
||||
"合作夥伴 G",
|
||||
"合作夥伴 A", "合作夥伴 B", "合作夥伴 C", "合作夥伴 D", "合作夥伴 E", "合作夥伴 F", "合作夥伴 G"
|
||||
]}
|
||||
title="信任揚文的優質夥伴"
|
||||
description="多年來，揚文深耕在地，與許多客戶建立了深厚的合作關係。"
|
||||
@@ -275,21 +141,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "如何申請事務機維修？",
|
||||
content: "歡迎直接撥打電話 04-2482-1320，或透過官網遠端服務申請。",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "有提供影印機租賃方案嗎？",
|
||||
content: "是的，我們提供多元化的租賃速印機與影印機服務，請洽客服索取詳細報價。",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "營業時間為何？",
|
||||
content: "週一至週五 08:00–17:30。週六及週日公休。",
|
||||
},
|
||||
{ id: "q1", title: "如何申請事務機維修？", content: "歡迎直接撥打電話 04-2482-1320，或透過官網遠端服務申請。" },
|
||||
{ id: "q2", title: "有提供影印機租賃方案嗎？", content: "是的，我們提供多元化的租賃速印機與影印機服務，請洽客服索取詳細報價。" },
|
||||
{ id: "q3", title: "營業時間為何？", content: "週一至週五 08:00–17:30。週六及週日公休。" }
|
||||
]}
|
||||
title="常見問題諮詢"
|
||||
description="這裡有關於我們事務機服務的常見問題解答。"
|
||||
@@ -303,30 +157,12 @@ export default function LandingPage() {
|
||||
title="與我們聯絡"
|
||||
description="立即聯絡揚文，為您的企業提供最完善的事務機解決方案。"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "公司名稱",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "聯絡電話",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "電子郵件",
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "公司名稱", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "聯絡電話", required: true },
|
||||
{ name: "email", type: "email", placeholder: "電子郵件" }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "請輸入您的需求與問題",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yyv64q&_wi=2"
|
||||
textarea={{ name: "message", placeholder: "請輸入您的需求與問題", rows: 4 }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yyv64q"
|
||||
imageAlt="technician repairing printer"
|
||||
/>
|
||||
</div>
|
||||
@@ -336,31 +172,17 @@ export default function LandingPage() {
|
||||
logoText="揚文企業有限公司"
|
||||
columns={[
|
||||
{
|
||||
title: "聯絡資訊",
|
||||
items: [
|
||||
{
|
||||
label: "電話：04-2482-1320",
|
||||
href: "tel:0424821320",
|
||||
},
|
||||
{
|
||||
label: "地址：台中市大里區新南路163巷5號",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
title: "聯絡資訊", items: [
|
||||
{ label: "電話：04-2482-1320", href: "tel:0424821320" },
|
||||
{ label: "地址：台中市大里區新南路163巷5號", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "營業時間",
|
||||
items: [
|
||||
{
|
||||
label: "週一至週五 08:00–17:30",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "假日公休",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "營業時間", items: [
|
||||
{ label: "週一至週五 08:00–17:30", href: "#" },
|
||||
{ label: "假日公休", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 揚文企業有限公司. All Rights Reserved."
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user