หน้าแรกเว็บบริษัทรับทำหลังคาบน Next.js ครบในหน้าเดียว ทั้งบริการ 6 อย่าง ผลงาน รีวิว คำถามที่พบบ่อย และฟอร์มนัดหมาย ภาษาไทยเป็นหลักและอังกฤษอยู่ที่ /en
Roofing companyWeb design / Development / Thai + English
ลูกค้า
Roofline
ประเภทธุรกิจ
Roofing company
ขอบเขตงาน
Web design / Development / Thai + English
หน้าเว็บ
ชุดสี
ฟอนต์ที่ใช้
หัวข้อ
เนื้อความ
หัวข้อภาษาไทย
เนื้อความภาษาไทย
งานนี้ในตัวเลข
6
บริการ แต่ละการ์ดมีภาพช่างกำลังทำงาน
5
แบบการเคลื่อนไหวจากต้นฉบับ ที่เล่นซ้ำด้วยโค้ด GSAP ตัวเล็ก
2
ภาษา ไทยเป็นหลัก อังกฤษอยู่ที่ /en
4
ฟอนต์ ในจำนวนนี้ 2 ตัวสำหรับภาษาไทย
01
งานหลังคา ลูกค้าอยากรู้ไม่กี่เรื่อง
คนที่หาช่างหลังคาอยากรู้ไม่กี่อย่าง ทำอะไรได้บ้าง เคยทำงานที่ไหน คนอื่นว่าอย่างไร และจะนัดได้เมื่อไหร่ หน้าแรกของ Roofline จึงเรียงตามลำดับนั้น แล้วจบด้วยฟอร์มนัดหมาย
ลูกค้าเลือกดีไซน์ Roofline ที่เริ่มจากเทมเพลต Webflow ขอบเขตงานคือหน้าแรกหนึ่งหน้าที่ยาวครบทุกส่วน กับหน้า 404 สร้างใหม่บน Next.js ทั้งภาษาไทยและอังกฤษ ชื่อ แบรนด์ และเบอร์โทรยังเป็นอักษรละติน
02
แดง ส้ม และดำ
หน้าแรกเปิดด้วยพื้นไล่สีจากดำไปแดงและส้ม หัวข้อใหญ่ "หลังคาที่สร้างมาให้อยู่ได้นาน" อยู่ข้างภาพช่างกำลังตอกหลังคา ส่วนบริการวางบนพื้นดำ การ์ดทุกใบมีภาพช่างกำลังทำงาน และส่วนที่เหลือของหน้าเป็นพื้นขาวให้สายตาได้พัก
Onest ตั้งหัวข้อ Inter ตั้งเนื้อความ ส่วนภาษาไทยเราเพิ่ม Kanit กับ Noto Sans Thai เข้าไปในชุดฟอนต์ ตัวอักษรไทยจึงหนักและสูงพอดีกับตัวละตินที่อยู่ข้างกัน
03
หน้าเดียว ครบทุกคำถาม
ถัดจากหน้าแรกเป็นตัวเลขประสบการณ์ บริการ 6 อย่าง คือติดตั้ง ซ่อม เปลี่ยนหลังคา ความเสียหายจากพายุ หลังคาอาคารพาณิชย์ และบริการฉุกเฉิน ตามด้วยขั้นตอนการทำงาน เหตุผลที่ควรเลือก ผลงานล่าสุดในสไลด์ รีวิวจากลูกค้า และคำถามที่พบบ่อยแบบกดขยาย
ฟอร์มนัดหมายท้ายหน้าตรวจข้อมูลฝั่งเซิร์ฟเวอร์ด้วย Zod และมีช่องดักสแปมที่คนมองไม่เห็น
04
การเคลื่อนไหว จากข้อมูลต้นฉบับ
เทมเพลต Webflow เก็บการเคลื่อนไหวทั้งหมดไว้เป็นข้อมูล เราตัดข้อมูลชุดนั้นมาใช้ แล้วเขียนตัวเล่นเล็ก ๆ บน GSAP ให้เล่นได้ 5 แบบเหมือนต้นฉบับ คือเมื่อชี้ เมื่อคลิก เมื่อเลื่อนมาถึง เมื่อเปิดหน้า และเมื่อเปิดเมนู
เมนูดรอปดาวน์ สไลด์ผลงาน แท็บ และคำถามที่พบบ่อย เป็นคอมโพเนนต์ของตัวเองบน Next.js คนที่ตั้งค่าเครื่องให้ลดการเคลื่อนไหวจะเห็นทุกอย่างในตำแหน่งสุดท้ายทันที
05
ภาษาไทยเป็นหลัก อังกฤษอยู่ที่ /en
หน้าแรกเปิดเป็นภาษาไทยที่ URL ปกติ และมีภาษาอังกฤษอยู่ที่ /en มุมบนมีปุ่มสลับ ไทย / EN ข้อความไทยเขียนใหม่ให้เป็นภาษาที่ช่างและเจ้าของบ้านใช้คุยกันจริง
ข้อความทั้งสองภาษาส่งมาจากเซิร์ฟเวอร์เป็น HTML Google จึงอ่านบริการ ผลงาน และคำถามที่พบบ่อยได้ครบทั้งสองภาษา
06
อยากได้เว็บแบบนี้สำหรับงานช่าง
ธุรกิจงานช่างและรับเหมาขายด้วยภาพงานจริงและความเร็วในการตอบ ถ้าคุณรับเหมาก่อสร้างหรือทำงานซ่อมบ้าน ดูรับทำเว็บไซต์รับเหมาก่อสร้าง ถ้าเป็นบริษัทที่มีหลายบริการ ดูรับทำเว็บไซต์บริษัท
ทุกแพ็กเกจรวมการเขียนเนื้อหาและ SEO พื้นฐานก่อนเปิดเว็บ เทียบราคาได้ที่แพ็กเกจและราคา
อยากได้เว็บแบบนี้สำหรับธุรกิจของคุณ
เล่าธุรกิจของคุณมาทาง LINE หรือ WhatsApp เราตอบกลับภายใน 1 วันทำการ พร้อมแพ็กเกจที่เหมาะและงานที่ใกล้เคียงที่สุด