bender/2b7637e8-3f3f-4775-97ce-51487f4aa06a
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-07 14:17:45 +00:00
parent 4ed0a22a2a
commit be39795dcd
1 changed files with 54 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/app/page.tsx
View File

@@ -32,14 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
navItems={[ navItems={[
{ { name: "หน้าแรก", id: "hero" },
name: "หน้าแรก", id: "hero"}, { name: "บริการ", id: "services" },
{ { name: "ผลงาน", id: "products" },
name: "บริการ", id: "services"}, { name: "ติดต่อ", id: "contact" },
{
name: "ผลงาน", id: "products"},
{
name: "ติดต่อ", id: "contact"},
]} ]}
brandName="ร้านทำสแตนเลส" brandName="ร้านทำสแตนเลส"
/> />
@@ -47,54 +43,32 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroSplitKpi <HeroSplitKpi
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars"}}
title="ผู้เชี่ยวชาญงานเหล็กและสแตนเลส กรุงเทพฯ" title="ผู้เชี่ยวชาญงานเหล็กและสแตนเลส กรุงเทพฯ"
description="บริการติดตั้ง กันสาด โครงหลังคา ราวบันได ประตู รั้ว และงานซ่อมแซมเหล็กทุกชนิด ด้วยประสบการณ์กว่า 10 ปี แข็งแรง สวยงาม จบงานไว" description="บริการติดตั้ง กันสาด โครงหลังคา ราวบันได ประตู รั้ว และงานซ่อมแซมเหล็กทุกชนิด ด้วยประสบการณ์กว่า 10 ปี แข็งแรง สวยงาม จบงานไว"
kpis={[ kpis={[
{ { value: "10+", label: "ปีประสบการณ์" },
value: "10+", label: "ปีประสบการณ์"}, { value: "100%", label: "ความพึงพอใจ" },
{ { value: "ทั่วกรุง", label: "พื้นที่ให้บริการ" },
value: "100%", label: "ความพึงพอใจ"},
{
value: "ทั่วกรุง", label: "พื้นที่ให้บริการ"},
]} ]}
enableKpiAnimation={true} enableKpiAnimation={true}
buttons={[ buttons={[{ text: "แอดไลน์ปรึกษาฟรี", href: "https://line.me/ti/p/~0948609192" }]}
{
text: "แอดไลน์ปรึกษาฟรี", href: "https://line.me/ti/p/~0948609192"},
]}
imageSrc="http://img.b2bpic.net/free-photo/illuminated-pipes-form-industrial-ballet-light-darkness_157027-4420.jpg" imageSrc="http://img.b2bpic.net/free-photo/illuminated-pipes-form-industrial-ballet-light-darkness_157027-4420.jpg"
mediaAnimation="slide-up" mediaAnimation="slide-up"
avatars={[ avatars={[
{ { src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Client 1" },
src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Client 1"}, { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 2" },
{ { src: "http://img.b2bpic.net/free-photo/bearded-man-holding-his-arms-crossed-christmas_23-2148737963.jpg", alt: "Client 3" },
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 2"}, { src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", alt: "Client 4" },
{ { src: "http://img.b2bpic.net/free-photo/handsome-gay-official-suit-looking-camera-front-view-bearded-caucasian-man-smiling-camera-getting-dressed-wedding-ceremony-with-lover-lgbt-love-marriage-concept_74855-22937.jpg", alt: "Client 5" },
src: "http://img.b2bpic.net/free-photo/bearded-man-holding-his-arms-crossed-christmas_23-2148737963.jpg", alt: "Client 3"},
{
src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", alt: "Client 4"},
{
src: "http://img.b2bpic.net/free-photo/handsome-gay-official-suit-looking-camera-front-view-bearded-caucasian-man-smiling-camera-getting-dressed-wedding-ceremony-with-lover-lgbt-love-marriage-concept_74855-22937.jpg", alt: "Client 5"},
]} ]}
avatarText="ลูกค้าประทับใจมากกว่า 1,000+ ราย" avatarText="ลูกค้าประทับใจมากกว่า 1,000+ ราย"
marqueeItems={[ marqueeItems={[
{ { type: "text-icon", text: "กันสาดสแตนเลส", icon: Zap },
type: "text-icon", text: "กันสาดสแตนเลส", icon: Zap, { type: "text-icon", text: "โครงหลังคาเหล็ก", icon: Wrench },
}, { type: "text-icon", text: "ราวบันได", icon: TrendingUp },
{ { type: "text-icon", text: "รั้วบ้าน", icon: Shield },
type: "text-icon", text: "โครงหลังคาเหล็ก", icon: Wrench, { type: "text-icon", text: "ซ่อมบำรุง", icon: Wrench },
},
{
type: "text-icon", text: "ราวบันได", icon: TrendingUp,
},
{
type: "text-icon", text: "รั้วบ้าน", icon: Shield,
},
{
type: "text-icon", text: "ซ่อมบำรุง", icon: Wrench,
},
]} ]}
/> />
</div> </div>
@@ -104,7 +78,8 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
title="เกี่ยวกับเรา" title="เกี่ยวกับเรา"
description={[ description={[
"เราเป็นทีมช่างเหล็กและสแตนเลสมืออาชีพ ให้บริการครบวงจรในเขตกรุงเทพฯ และปริมณฑล ด้วยประสบการณ์กว่า 10 ปี", "มุ่งเน้นความแข็งแรง ทนทาน และดีไซน์ที่ทันสมัย ตอบโจทย์ทั้งงานบ้านและงานโรงงาน"]} "เราเป็นทีมช่างเหล็กและสแตนเลสมืออาชีพ ให้บริการครบวงจรในเขตกรุงเทพฯ และปริมณฑล ด้วยประสบการณ์กว่า 10 ปี", "มุ่งเน้นความแข็งแรง ทนทาน และดีไซน์ที่ทันสมัย ตอบโจทย์ทั้งงานบ้านและงานโรงงาน"
]}
/> />
</div> </div>
@@ -113,21 +88,11 @@ export default function LandingPage() {
textboxLayout="inline-image" textboxLayout="inline-image"
useInvertedBackground={true} useInvertedBackground={true}
features={[ features={[
{ { title: "กันสาดทุกแบบ", description: "กันสาดสแตนเลส ทรงทันสมัย แข็งแรง", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/steel-door-storage-warehouse_53876-74720.jpg" },
title: "กันสาดทุกแบบ", description: "กันสาดสแตนเลส ทรงทันสมัย แข็งแรง", buttonIcon: Zap, { title: "ราวบันไดสแตนเลส", description: "ดีไซน์สวยงาม แข็งแรง ปลอดภัย", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/spiral-staircase-with-metallic-railing_250224-286.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/steel-door-storage-warehouse_53876-74720.jpg"}, { title: "ประตูและรั้วเหล็ก", description: "ออกแบบตามสั่ง เสริมความปลอดภัย", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/high-angle-hand-spraying-powder-paint-from-gun_23-2149878762.jpg" },
{ { title: "งานซ่อมและเชื่อม", description: "บริการซ่อมแซมแก้ไขงานเหล็กทุกรูปแบบ", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/medium-shot-man-holding-car-door_23-2149714261.jpg" },
title: "ราวบันไดสแตนเลส", description: "ดีไซน์สวยงาม แข็งแรง ปลอดภัย", buttonIcon: Zap, { title: "โครงหลังคาเหล็ก", description: "โครงสร้างเหล็กแข็งแรง ทนทาน", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/modern-construction_1127-104.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/spiral-staircase-with-metallic-railing_250224-286.jpg"},
{
title: "ประตูและรั้วเหล็ก", description: "ออกแบบตามสั่ง เสริมความปลอดภัย", buttonIcon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-spraying-powder-paint-from-gun_23-2149878762.jpg"},
{
title: "งานซ่อมและเชื่อม", description: "บริการซ่อมแซมแก้ไขงานเหล็กทุกรูปแบบ", buttonIcon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-car-door_23-2149714261.jpg"},
{
title: "โครงหลังคาเหล็ก", description: "โครงสร้างเหล็กแข็งแรง ทนทาน", buttonIcon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/modern-construction_1127-104.jpg"},
]} ]}
title="บริการของเรา" title="บริการของเรา"
description="งานเหล็กและสแตนเลสครบวงจร" description="งานเหล็กและสแตนเลสครบวงจร"
@@ -141,18 +106,12 @@ export default function LandingPage() {
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[
{ { id: "p1", name: "กันสาดสแตนเลส", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/empty-pavilion-garden_1339-3182.jpg" },
id: "p1", name: "กันสาดสแตนเลส", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/empty-pavilion-garden_1339-3182.jpg"}, { id: "p2", name: "ราวบันไดสแตนเลส", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/young-woman-by-shopping-center_1303-16433.jpg" },
{ { id: "p3", name: "รั้วเหล็กดัด", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/abstract-city-building-shadows_23-2149283256.jpg" },
id: "p2", name: "ราวบันไดสแตนเลส", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-by-shopping-center_1303-16433.jpg"}, { id: "p4", name: "โครงหลังคาเหล็ก", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/agricultural-silo_146671-19121.jpg" },
{ { id: "p5", name: "มุ้งลวดนิรภัย", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/rough-metallic-surface-texture_23-2148953926.jpg" },
id: "p3", name: "รั้วเหล็กดัด", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283256.jpg"}, { id: "p6", name: "งานซ่อมงานเหล็ก", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/burning-coal_23-2147643498.jpg" },
{
id: "p4", name: "โครงหลังคาเหล็ก", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg"},
{
id: "p5", name: "มุ้งลวดนิรภัย", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/rough-metallic-surface-texture_23-2148953926.jpg"},
{
id: "p6", name: "งานซ่อมงานเหล็ก", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/burning-coal_23-2147643498.jpg"},
]} ]}
title="ผลงานของเรา" title="ผลงานของเรา"
description="ตัวอย่างงานคุณภาพที่เราภูมิใจ" description="ตัวอย่างงานคุณภาพที่เราภูมิใจ"
@@ -165,16 +124,11 @@ export default function LandingPage() {
textboxLayout="inline-image" textboxLayout="inline-image"
useInvertedBackground={true} useInvertedBackground={true}
testimonials={[ testimonials={[
{ { id: "t1", name: "คุณสมชาย", handle: "@บ้านเดี่ยว", testimonial: "งานสวย แข็งแรง ราคายุติธรรมครับ", imageSrc: "http://img.b2bpic.net/portrait-woman-smiling-kitchen_107420-12357.jpg" },
id: "t1", name: "คุณสมชาย", handle: "@บ้านเดี่ยว", testimonial: "งานสวย แข็งแรง ราคายุติธรรมครับ", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg"}, { id: "t2", name: "คุณวิภา", handle: "@อาคารพาณิชย์", testimonial: "ช่างทำงานเรียบร้อยมากครับ แนะนำเลย", imageSrc: "http://img.b2bpic.net/close-up-competitive-employee_1098-2870.jpg" },
{ { id: "t3", name: "คุณก้อง", handle: "@โรงงาน", testimonial: "โครงหลังคาแน่นหนา ไว้ใจได้จริง", imageSrc: "http://img.b2bpic.net/man-looking-camera-his-office_23-2148242891.jpg" },
id: "t2", name: "คุณวิภา", handle: "@อาคารพาณิชย์", testimonial: "ช่างทำงานเรียบร้อยมากครับ แนะนำเลย", imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"}, { id: "t4", name: "คุณเอ", handle: "@คอนโด", testimonial: "ประตูสวยตรงปก ประทับใจครับ", imageSrc: "http://img.b2bpic.net/architect-being-serious-while-looking-camera_23-2148242992.jpg" },
{ { id: "t5", name: "คุณมด", handle: "@ทาวน์เฮ้าส์", testimonial: "งานซ่อมไว ราคากันเองมาก", imageSrc: "http://img.b2bpic.net/expressive-senior-female-posing-indoor_344912-354.jpg" },
id: "t3", name: "คุณก้อง", handle: "@โรงงาน", testimonial: "โครงหลังคาแน่นหนา ไว้ใจได้จริง", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-camera-his-office_23-2148242891.jpg"},
{
id: "t4", name: "คุณเอ", handle: "@คอนโด", testimonial: "ประตูสวยตรงปก ประทับใจครับ", imageSrc: "http://img.b2bpic.net/free-photo/architect-being-serious-while-looking-camera_23-2148242992.jpg"},
{
id: "t5", name: "คุณมด", handle: "@ทาวน์เฮ้าส์", testimonial: "งานซ่อมไว ราคากันเองมาก", imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg"},
]} ]}
title="ความประทับใจจากลูกค้า" title="ความประทับใจจากลูกค้า"
description="เสียงตอบรับที่ทำให้เราภูมิใจ" description="เสียงตอบรับที่ทำให้เราภูมิใจ"
@@ -186,7 +140,8 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
names={[ names={[
"กรุงเทพฯ ชั้นใน", "กรุงเทพฯ ชั้นนอก", "ปริมณฑล", "นนทบุรี", "สมุทรปราการ", "ปทุมธานี", "นครปฐม"]} "กรุงเทพฯ ชั้นใน", "กรุงเทพฯ ชั้นนอก", "ปริมณฑล", "นนทบุรี", "สมุทรปราการ", "ปทุมธานี", "นครปฐม"
]}
title="พื้นที่ให้บริการหลัก" title="พื้นที่ให้บริการหลัก"
description="บริการงานเหล็กทั่วกรุงเทพฯ และปริมณฑล" description="บริการงานเหล็กทั่วกรุงเทพฯ และปริมณฑล"
/> />
@@ -197,12 +152,9 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
faqs={[ faqs={[
{ { id: "q1", title: "มีบริการดูหน้างานฟรีไหม?", content: "มีครับ ส่งรูปงานและสอบถามผ่านไลน์ได้เลย" },
id: "q1", title: "มีบริการดูหน้างานฟรีไหม?", content: "มีครับ ส่งรูปงานและสอบถามผ่านไลน์ได้เลย"}, { id: "q2", title: "ใช้เวลานานแค่ไหน?", content: "ขึ้นอยู่กับความยากง่ายของงาน เราประเมินเวลาให้ก่อนเริ่มงานครับ" },
{ { id: "q3", title: "แอดไลน์อย่างไร?", content: "แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที" },
id: "q2", title: "ใช้เวลานานแค่ไหน?", content: "ขึ้นอยู่กับความยากง่ายของงาน เราประเมินเวลาให้ก่อนเริ่มงานครับ"},
{
id: "q3", title: "แอดไลน์อย่างไร?", content: "แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที"},
]} ]}
title="คำถามที่พบบ่อย" title="คำถามที่พบบ่อย"
description="สอบถามข้อมูลเพิ่มเติมได้ตลอดเวลา" description="สอบถามข้อมูลเพิ่มเติมได้ตลอดเวลา"
@@ -211,21 +163,20 @@ export default function LandingPage() {
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<div style={{ padding: "20px 0" }}>
<h3 style={{ marginBottom: "15px" }}>สถานที่ตั้งของเรา</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3876.5367850554275!2d100.4851280753733!3d13.670559798547466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e2a22b9b5f543d%3A0x8673a5a73e6a642e!2sBang%20Mot%2C%20Thung%20Khru%2C%20Bangkok!5e0!3m2!1sen!2sth!4v1716382104924!5m2!1sen!2sth" width="100%" height="400" style={{ border: 0 }} allowFullScreen loading="lazy" />
<p style={{ marginTop: "15px", fontWeight: "bold" }}>ที่อยู่: ร้านทำสแตนเลส แขวงบางมด เขตทุ่งครุ กรุงเทพฯ 10140</p>
</div>
<ContactSplitForm <ContactSplitForm
useInvertedBackground={false} useInvertedBackground={false}
title="ติดต่อเรา" title="ติดต่อเรา"
description="แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที" description={<span>ด่วน! โทรหาเราได้ที่ <strong style={{ fontSize: "1.2em", color: "var(--primary-cta)" }}>0948609192</strong> หรือแอดไลน์เพื่อส่งรูปประเมินราคา</span>}
inputs={[ inputs={[
{ { name: "name", type: "text", placeholder: "ชื่อของคุณ", required: true },
name: "name", type: "text", placeholder: "ชื่อของคุณ", required: true, { name: "phone", type: "tel", placeholder: "เบอร์โทรศัพท์", required: true },
},
{
name: "phone", type: "tel", placeholder: "เบอร์โทรศัพท์", required: true,
},
]} ]}
textarea={{ textarea={{ name: "message", placeholder: "รายละเอียดงานที่ต้องการ", required: true }}
name: "message", placeholder: "รายละเอียดงานที่ต้องการ", required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/african-adult-business-american-beautiful_1303-1339.jpg" imageSrc="http://img.b2bpic.net/free-photo/african-adult-business-american-beautiful_1303-1339.jpg"
/> />
</div> </div>
@@ -233,20 +184,8 @@ export default function LandingPage() {
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterSimple <FooterSimple
columns={[ columns={[
{ { title: "บริการ", items: [{ label: "กันสาด", href: "#services" }, { label: "ราวบันได", href: "#services" }] },
title: "บริการ", items: [ { title: "ติดต่อ", items: [{ label: "โทร 0948609192", href: "tel:0948609192" }] },
{
label: "กันสาด", href: "#services"},
{
label: "ราวบันได", href: "#services"},
],
},
{
title: "ติดต่อ", items: [
{
label: "โทร 0948609192", href: "tel:0948609192"},
],
},
]} ]}
bottomLeftText="© 2024 ร้านทำสแตนเลส" bottomLeftText="© 2024 ร้านทำสแตนเลส"
bottomRightText="บริการด้วยใจ" bottomRightText="บริการด้วยใจ"
@@ -255,4 +194,4 @@ export default function LandingPage() {
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }