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">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "หน้าแรก", id: "hero"},
{
name: "บริการ", id: "services"},
{
name: "ผลงาน", id: "products"},
{
name: "ติดต่อ", id: "contact"},
{ name: "หน้าแรก", id: "hero" },
{ name: "บริการ", id: "services" },
{ name: "ผลงาน", id: "products" },
{ name: "ติดต่อ", id: "contact" },
]}
brandName="ร้านทำสแตนเลส"
/>
@@ -47,54 +43,32 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars"}}
background={{ variant: "gradient-bars" }}
title="ผู้เชี่ยวชาญงานเหล็กและสแตนเลส กรุงเทพฯ"
description="บริการติดตั้ง กันสาด โครงหลังคา ราวบันได ประตู รั้ว และงานซ่อมแซมเหล็กทุกชนิด ด้วยประสบการณ์กว่า 10 ปี แข็งแรง สวยงาม จบงานไว"
kpis={[
{
value: "10+", label: "ปีประสบการณ์"},
{
value: "100%", label: "ความพึงพอใจ"},
{
value: "ทั่วกรุง", label: "พื้นที่ให้บริการ"},
{ value: "10+", label: "ปีประสบการณ์" },
{ value: "100%", label: "ความพึงพอใจ" },
{ value: "ทั่วกรุง", label: "พื้นที่ให้บริการ" },
]}
enableKpiAnimation={true}
buttons={[
{
text: "แอดไลน์ปรึกษาฟรี", href: "https://line.me/ti/p/~0948609192"},
]}
buttons={[{ 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"
mediaAnimation="slide-up"
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/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/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/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/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+ ราย"
marqueeItems={[
{
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: 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 },
]}
/>
</div>
@@ -104,7 +78,8 @@ export default function LandingPage() {
useInvertedBackground={false}
title="เกี่ยวกับเรา"
description={[
"เราเป็นทีมช่างเหล็กและสแตนเลสมืออาชีพ ให้บริการครบวงจรในเขตกรุงเทพฯ และปริมณฑล ด้วยประสบการณ์กว่า 10 ปี", "มุ่งเน้นความแข็งแรง ทนทาน และดีไซน์ที่ทันสมัย ตอบโจทย์ทั้งงานบ้านและงานโรงงาน"]}
"เราเป็นทีมช่างเหล็กและสแตนเลสมืออาชีพ ให้บริการครบวงจรในเขตกรุงเทพฯ และปริมณฑล ด้วยประสบการณ์กว่า 10 ปี", "มุ่งเน้นความแข็งแรง ทนทาน และดีไซน์ที่ทันสมัย ตอบโจทย์ทั้งงานบ้านและงานโรงงาน"
]}
/>
</div>
@@ -113,21 +88,11 @@ export default function LandingPage() {
textboxLayout="inline-image"
useInvertedBackground={true}
features={[
{
title: "กันสาดทุกแบบ", description: "กันสาดสแตนเลส ทรงทันสมัย แข็งแรง", buttonIcon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/steel-door-storage-warehouse_53876-74720.jpg"},
{
title: "ราวบันไดสแตนเลส", description: "ดีไซน์สวยงาม แข็งแรง ปลอดภัย", buttonIcon: Zap,
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: "กันสาดทุกแบบ", description: "กันสาดสแตนเลส ทรงทันสมัย แข็งแรง", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/steel-door-storage-warehouse_53876-74720.jpg" },
{ title: "ราวบันไดสแตนเลส", description: "ดีไซน์สวยงาม แข็งแรง ปลอดภัย", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/spiral-staircase-with-metallic-railing_250224-286.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, imageSrc: "http://img.b2bpic.net/modern-construction_1127-104.jpg" },
]}
title="บริการของเรา"
description="งานเหล็กและสแตนเลสครบวงจร"
@@ -141,18 +106,12 @@ export default function LandingPage() {
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
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/free-photo/young-woman-by-shopping-center_1303-16433.jpg"},
{
id: "p3", name: "รั้วเหล็กดัด", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283256.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"},
{ id: "p1", name: "กันสาดสแตนเลส", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/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: "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: "p6", name: "งานซ่อมงานเหล็ก", price: "สอบถามราคา", imageSrc: "http://img.b2bpic.net/burning-coal_23-2147643498.jpg" },
]}
title="ผลงานของเรา"
description="ตัวอย่างงานคุณภาพที่เราภูมิใจ"
@@ -165,16 +124,11 @@ export default function LandingPage() {
textboxLayout="inline-image"
useInvertedBackground={true}
testimonials={[
{
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/free-photo/close-up-competitive-employee_1098-2870.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"},
{ id: "t1", name: "คุณสมชาย", handle: "@บ้านเดี่ยว", testimonial: "งานสวย แข็งแรง ราคายุติธรรมครับ", imageSrc: "http://img.b2bpic.net/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: "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" },
]}
title="ความประทับใจจากลูกค้า"
description="เสียงตอบรับที่ทำให้เราภูมิใจ"
@@ -186,7 +140,8 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"กรุงเทพฯ ชั้นใน", "กรุงเทพฯ ชั้นนอก", "ปริมณฑล", "นนทบุรี", "สมุทรปราการ", "ปทุมธานี", "นครปฐม"]}
"กรุงเทพฯ ชั้นใน", "กรุงเทพฯ ชั้นนอก", "ปริมณฑล", "นนทบุรี", "สมุทรปราการ", "ปทุมธานี", "นครปฐม"
]}
title="พื้นที่ให้บริการหลัก"
description="บริการงานเหล็กทั่วกรุงเทพฯ และปริมณฑล"
/>
@@ -197,12 +152,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "q1", title: "มีบริการดูหน้างานฟรีไหม?", content: "มีครับ ส่งรูปงานและสอบถามผ่านไลน์ได้เลย"},
{
id: "q2", title: "ใช้เวลานานแค่ไหน?", content: "ขึ้นอยู่กับความยากง่ายของงาน เราประเมินเวลาให้ก่อนเริ่มงานครับ"},
{
id: "q3", title: "แอดไลน์อย่างไร?", content: "แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที"},
{ id: "q1", title: "มีบริการดูหน้างานฟรีไหม?", content: "มีครับ ส่งรูปงานและสอบถามผ่านไลน์ได้เลย" },
{ id: "q2", title: "ใช้เวลานานแค่ไหน?", content: "ขึ้นอยู่กับความยากง่ายของงาน เราประเมินเวลาให้ก่อนเริ่มงานครับ" },
{ id: "q3", title: "แอดไลน์อย่างไร?", content: "แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที" },
]}
title="คำถามที่พบบ่อย"
description="สอบถามข้อมูลเพิ่มเติมได้ตลอดเวลา"
@@ -211,21 +163,20 @@ export default function LandingPage() {
</div>
<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
useInvertedBackground={false}
title="ติดต่อเรา"
description="แอดไลน์ด้วยเบอร์ 0948609192 เพื่อสอบถามราคาและส่งรูปงานได้ทันที"
description={<span>ด่วน! โทรหาเราได้ที่ <strong style={{ fontSize: "1.2em", color: "var(--primary-cta)" }}>0948609192</strong> หรือแอดไลน์เพื่อส่งรูปประเมินราคา</span>}
inputs={[
{
name: "name", type: "text", placeholder: "ชื่อของคุณ", required: true,
},
{
name: "phone", type: "tel", placeholder: "เบอร์โทรศัพท์", required: true,
},
{ name: "name", type: "text", placeholder: "ชื่อของคุณ", required: true },
{ name: "phone", type: "tel", placeholder: "เบอร์โทรศัพท์", required: true },
]}
textarea={{
name: "message", placeholder: "รายละเอียดงานที่ต้องการ", required: true,
}}
textarea={{ name: "message", placeholder: "รายละเอียดงานที่ต้องการ", required: true }}
imageSrc="http://img.b2bpic.net/free-photo/african-adult-business-american-beautiful_1303-1339.jpg"
/>
</div>
@@ -233,20 +184,8 @@ export default function LandingPage() {
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "บริการ", items: [
{
label: "กันสาด", href: "#services"},
{
label: "ราวบันได", href: "#services"},
],
},
{
title: "ติดต่อ", items: [
{
label: "โทร 0948609192", href: "tel:0948609192"},
],
},
{ title: "บริการ", items: [{ label: "กันสาด", href: "#services" }, { label: "ราวบันได", href: "#services" }] },
{ title: "ติดต่อ", items: [{ label: "โทร 0948609192", href: "tel:0948609192" }] },
]}
bottomLeftText="© 2024 ร้านทำสแตนเลส"
bottomRightText="บริการด้วยใจ"
@@ -255,4 +194,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}