ผลงาน
ผลงานทั้งหมด
Demo shop Shirt with custom
Demo shop Shirt with customเว็บไซต์นี้สื่อภาพลักษณ์ของโรงงาน/แบรนด์ที่รับผลิตเสื้อยูนิฟอร์ม โดยมีทั้งส่วนขายสินค้า, คอนเทนต์ให้ความรู้, และเครื่องมือออกแบบเสื้อในเว็บเดียวจุดเด่นของเดโมคือ visual style โทน premium, ระบบเลือกสินค้าแบบ category-based, และหน้า Custom Design ที่ให้ผู้ใช้เปลี่ยนผ้า สี ทรง ปก แขน กระเป๋า โลโก้ และข้อความได้Home Pageหน้าแรกเป็น landing page หลักของแบรนด์ ใช้เพื่อแนะนำบริการ “ออกแบบเสื้อยูนิฟอร์มแบบ Real-Time” พร้อม CTA ไปยังหน้า Design และ Shopเนื้อหาหลักประกอบด้วย hero section, จุดเด่นของบริการ, หมวดสินค้ายอดนิยม, free services, ขั้นตอนการใช้งาน, เหตุผลที่ควรเลือกแบรนด์, CTA section, บทความล่าสุด, และรีวิวลูกค้าAbout Pageหน้า About เป็นหน้าที่อธิบายตัวตน แนวคิด และจุดแข็งของแบรนด์ JustUchoice โดยวาง positioning ว่าเป็นผู้ช่วยให้การสั่งทำเสื้อยูนิฟอร์ม “ง่ายและสนุก” มากขึ้นส่วน hero ของหน้าจะสื่อว่าแบรนด์ช่วยให้องค์กรสร้างเสื้อทีมที่สะท้อนตัวตนได้ โดยไม่เสียเวลานานหรือมีต้นทุนเกินจำเป็น พร้อม bullet points เรื่องโรงงานในประเทศ, ทีมดีไซน์ช่วยฟรี, ระบบติดตามออนไลน์, และรับประกันคุณภาพ 60 วันกลางหน้ามี accordion section สำหรับอธิบายบริการหลัก เช่น ระบบออกแบบที่ใช้งานง่าย, การผลิตโดยโรงงานของบริษัทเอง, เทคนิคงานพิมพ์หลายรูปแบบ, และระบบ ERP/Order Tracking ที่ติดตามงานได้ทุกขั้นตอนด้านล่างมี service grid แสดง 9 บริการหลักของแบรนด์ เช่น Faulty-Proof, Free Sample, Overage Protection, 60 Days Warranty, Corporate Onsite, Online Status Check, Corporate Stylist, Instant Price Check, และ Online Designerหน้า About ปิดท้ายด้วย CTA ชวนผู้ใช้ไปเริ่มออกแบบเสื้อหรือปรึกษาทีมงาน เพื่อพาเข้าสู่ conversion flow ของเว็บShop Pageหน้า Shop เป็นหน้ารวมหมวดสินค้าทั้งหมด เช่น เสื้อโปโล เสื้อยืด เสื้อเชิ้ต ยูนิฟอร์ม แจ็กเก็ต ผ้ากันเปื้อน หมวก และถุงผ้าแต่ละการ์ดจะแสดงชื่อหมวด จำนวนสินค้า ราคาเริ่มต้น และขั้นต่ำในการสั่งซื้อ เพื่อพาผู้ใช้ไปยังหน้ารายละเอียดของหมวดนั้นShop Detail Pageหน้า Shop Detail คือหน้ารายละเอียดของแต่ละหมวดสินค้า เช่น /shop/polo โดยเน้นการเลือก Tier ผ้า ของหมวดนั้นหน้าแสดง hero ของหมวดสินค้า, ข้อความแนะนำ, badge ของลักษณะการใช้งาน, และรายการ tier แบบ accordion ที่แสดงชื่อผ้า ส่วนผสม คุณสมบัติ ราคา และขั้นต่ำ พร้อมปุ่มไปหน้าออกแบบ.Blog Pageหน้า Blog เป็นหน้ารวมบทความ ให้ผู้ใช้ดูความรู้และไอเดียเกี่ยวกับการออกแบบเสื้อ การเลือกผ้า เทคนิคการพิมพ์ และมุมมองทางธุรกิจมีระบบกรองตามหมวดบทความ เช่น ข่าวสาร, แนะนำสินค้า, ไอเดียดีไซน์, เคล็ดลับธุรกิจ, และเทคนิคการพิมพ์Blog Detail Pageหน้า Blog Detail ใช้แสดงบทความแบบเต็ม พร้อมหัวข้อ, excerpt, ผู้เขียน, วันที่, เวลาอ่าน, ภาพปก, เนื้อหาบทความ, และปุ่มแชร์ด้านข้างมี sidebar สำหรับชวนไปหน้าออกแบบเสื้อ, แสดงบทความยอดนิยม, และแสดงหมวดบทความอื่น รวมถึงมีส่วน “บทความที่เกี่ยวข้อง” ด้านล่างContact Us Pageหน้า Contact Us เป็นหน้าติดต่อทีมงาน แสดงข้อมูลที่อยู่ เบอร์โทร LINE อีเมล เวลาทำการ และมี mock map/showroom sectionผู้ใช้สามารถกรอกฟอร์มชื่อ นามสกุล อีเมล หัวข้อ และข้อความ เพื่อส่งคำถามหรือสอบถามราคาเบื้องต้นได้Custom Design Pageหน้า Custom Design เป็นหน้าหลักของระบบ designer ให้ผู้ใช้ปรับแต่งเสื้อแบบ interactive และเห็น preview ทันทีผู้ใช้สามารถเลือกประเภทสินค้า, เนื้อผ้า, ทรงเสื้อ, ปก, สาบ, แขน, กระเป๋า, โซนสี, อัปโหลดโลโก้, เพิ่มข้อความ, จัดตำแหน่ง overlay, ดูรหัสแบบ, คัดลอกลิงก์, ดูราคา/ตัว, ปรับจำนวน, ดูส่วนลดตามจำนวน, และกดบันทึกหรือขอราคาClick here to visit https://d2d-demo-shop-shirt.vercel.app
Demo Luxury Real Estate by D2D
Demo Luxury Real Estate by D2Dเป็นเว็บไซต์แลนดิ้งเพจอสังหาริมทรัพย์แบบหน้าเดียว สำหรับโครงการบ้านระดับพรีเมียม ใช้เพื่อสื่อสารแบรนด์ นำเสนอแบบบ้าน บรรยากาศโครงการ จุดเด่นด้านทำเล โปรโมชั่น และการนัดชมโครงการพร้อมระบบเก็บรายชื่อลูกค้าและหน้าแอดมินเบื้องต้นHeroส่วนเปิดหน้าเว็บที่สื่อภาพลักษณ์หลักของโครงการด้วยภาพลักชัวรี จุดขายสำคัญ ปุ่มกระตุ้นการตัดสินใจ และฟอร์มลงทะเบียนรับสิทธิพิเศษStatBar & HighlightSectionแถบสถิติที่ช่วยเพิ่มความน่าเชื่อถือของโครงการ เช่น ยอดจอง รางวัล จำนวนครอบครัวลูกบ้าน และระดับความปลอดภัยส่วนจุดเด่นของโครงการ เน้นคุณค่าด้านการอยู่อาศัยและฟังก์ชัน เช่น สมาร์ทโฮม ระบบความปลอดภัย รองรับรถ EV และสิ่งอำนวยความสะดวกระดับพรีเมียมMortgageCalculatorเครื่องคำนวณสินเชื่อเบื้องต้นแบบโต้ตอบ ช่วยให้ผู้ใช้ประเมินราคาบ้าน เงินดาวน์ ดอกเบี้ย ระยะเวลากู้ และค่างวดรายเดือนUnitsSectionส่วนแสดงผังโครงการและแบบบ้านที่มีให้เลือก พร้อมรายละเอียดตำแหน่งทางการตลาด ขนาดบ้าน จำนวนห้องนอน/ห้องน้ำ และราคาเริ่มต้นGallerySectionแกลเลอรีภาพที่ใช้โชว์บรรยากาศของพื้นที่สำคัญในโครงการ เช่น ห้องนั่งเล่น พื้นที่ทานอาหาร คลับเฮ้าส์ และห้องนอนใหญ่LocationSectionส่วนที่สื่อจุดเด่นด้านทำเลและการเดินทาง โดยอธิบายสถานที่สำคัญใกล้เคียงและมีแผนที่ฝังในหน้าเว็บAppointmentSectionส่วนสำหรับนัดเข้าชมโครงการ ลูกค้าสามารถกรอกข้อมูลติดต่อ วันที่ เวลา และจำนวนผู้เข้าชมเพื่อจองนัดหมายได้Promotion Sectionส่วนโปรโมชั่นที่เน้นข้อเสนอแบบจำกัดเวลาและสิทธิพิเศษสำหรับการจอง เพื่อเร่งการตัดสินใจของลูกค้าFooterส่วนท้ายเว็บไซต์ที่สรุปแบรนด์อีกครั้ง พร้อมข้อมูลติดต่อ เวลาเปิดทำการ ช่องทางโซเชียล และช่องรับข่าวสารทางอีเมลClick here to visit https://d2d-real-estate-luxury-demo.vercel.app/Tech stackFrontend: React 19 + TypeScriptBuild tool: Vite 6Styling: Tailwind CSS 4Animation: Framer Motion และ motionIcons: lucide-reactBackend entry/server: Express ผ่าน server.tsDatabase / Auth: Firebase โดยใช้ Firestore และ Firebase AuthForm/data handling: ฟอร์มใน React state โดย submit เข้า FirestoreUtility libs: clsx, tailwind-merge, date-fns
DEMO LOGISTICS by D2D
DEMO LOGISTICS by D2Dโปรเจกต์นี้เป็น landing page demo สำหรับธุรกิจขนส่ง/โลจิสติกส์ เน้นงานขาย การสร้างความน่าเชื่อถือ การโชว์บริการ ราคา รถที่มี และการกระตุ้นให้ลูกค้าติดต่อหรือขอใบเสนอราคา ยังไม่ใช่ระบบ logistics เต็มรูปแบบที่มี backend จริงHero Section & Estimate / Track Cardส่วนเปิดหน้า ใช้ภาพใหญ่และข้อความขายหลัก เช่น ขนส่งด่วน รับเหมางานไว ประเมินราคาเร็ว พร้อมปุ่มจองคิวและดูราคากล่องฟอร์มด้านขวาใน Hero มี 2 แท็บ คือประเมินราคาและเช็คสถานะงาน โดยส่วนประเมินราคาเป็น mock calculationTrust Metricsส่วนตัวเลขสถิติ เช่น จำนวนเที่ยววิ่ง ลูกค้าองค์กร ความตรงเวลา และจำนวนรถ เพื่อสร้างความน่าเชื่อถือServices Sectionอธิบายบริการหลัก 6 แบบ เช่น ส่งด่วน เช่าเหมา ขนย้ายบ้าน/สำนักงาน งานโรงงาน คนยกของ และประกันสินค้าVehicle Fleetแสดงประเภทรถ เช่น กระบะ open, 4 ล้อตู้ทึบ, 6 ล้อ, 10 ล้อ/trailer พร้อมขนาดบรรทุก น้ำหนัก และจุดเด่นPricing Sectionส่วนแพ็กเกจราคา แบ่งเป็น 3 กลุ่มคือ Personal, Business, Enterprise เพื่อให้ลูกค้าเลือกตามขนาดงานHow It Worksอธิบายขั้นตอนใช้งาน 4 ขั้นตอน ตั้งแต่จองรถ รับสินค้า ขนส่ง/ติดตาม จนถึงส่งมอบสำเร็จAbout Us & Why Choose Usล่า positioning ของบริษัทว่าเป็นพาร์ทเนอร์ขนส่งที่เชื่อถือได้ พร้อมข้อความเรื่องประสบการณ์ วิสัยทัศน์ และพันธกิจจุดขายหลัก 4 ข้อ คือ ปลอดภัย ตรงเวลา ทีมงานมืออาชีพ และราคาโปร่งใสFAQ Sectionรวมคำถามที่พบบ่อย เช่น ส่งภายในวันเดียว ประกันสินค้า ใบกำกับภาษี และวิ่งต่างจังหวัดFooterส่วนท้ายเว็บมีข้อมูลแบรนด์ ลิงก์บริการ เมนูหลัก ฟอร์มรับโปรโมชัน และลิงก์นโยบายClick here to visit https://d2d-fastmove-logistics-demo.vercel.app/ Tech stack ViteReact 19TypeScriptTailwind CSS 4motionlucide-reactReact DOMGoogle FontsNode.js
Demo The Grande Residenc by D2D
Demo The Grande Residenc by D2DThe Grande Residence คือเดโมเว็บไซต์แนว landing page ระดับพรีเมียมสำหรับโครงการอสังหาริมทรัพย์ บ้านจัดสรร และแคมเปญการตลาดด้านที่อยู่อาศัย โดยมีเป้าหมายเพื่อสื่อสารภาพลักษณ์แบรนด์ นำเสนอจุดเด่นของโครงการ เก็บข้อมูลผู้สนใจ รองรับการนัดหมายเข้าชม และมีมุมมอง CRM แบบเบื้องต้นสำหรับเดโมหรือการใช้งานฝั่งขายโปรเจกต์นี้เป็นเว็บไซต์การตลาดอสังหาริมทรัพย์แบบหน้าเดียว ที่ออกแบบมาเพื่อจำลองประสบการณ์ของแคมเปญบ้านหรือโครงการที่อยู่อาศัยสไตล์ modern luxury โดยรวมการเล่าเรื่องแบรนด์ การนำเสนอภาพลักษณ์ การเก็บ lead การนัดหมายเข้าชม และแดชบอร์ดแอดมินแบบง่ายไว้ในแอป frontend เดียว เหมาะสำหรับใช้เป็นตัวอย่างงาน พรอตोटाइป์ หรือฐานตั้งต้นสำหรับงานเว็บโครงการจริง.Hero & Lead FormHero section คือส่วนเปิดการขายหลักของหน้า ใช้สื่อสารตัวตนของโครงการ จุดขายสำคัญ ราคาเริ่มต้น ความสะดวกของทำเล โปรโมชั่น และปุ่มกระตุ้นการลงทะเบียน โดยมีฟอร์มเก็บข้อมูลผู้สนใจวางอยู่ในส่วนนี้ทันทีเพื่อเพิ่มโอกาสในการเปลี่ยนผู้ชมเป็น leadส่วนนี้ใช้เก็บข้อมูลผู้สนใจ เช่น ชื่อ เบอร์โทร และช่วงเวลาที่สะดวกให้ติดต่อกลับ ออกแบบมาเพื่อให้กรอกได้เร็วและรองรับการบันทึกทั้งไปยัง Firestore และ local fallbackHighlightsส่วน Highlights ใช้นำเสนอจุดเด่นหลักของโครงการ เช่น การเดินทาง ความปลอดภัย พื้นที่สีเขียว หรือระบบ smart home เพื่อสื่อสารคุณค่าด้านการอยู่อาศัยที่มากกว่าสเปกของบ้านUnit Cardsส่วน Unit Cards ใช้นำเสนอแบบบ้านหรือยูนิตที่มีในโครงการ โดยแต่ละการ์ดสรุปข้อมูลสำคัญ เช่น ขนาด จำนวนห้อง ราคา และภาพลักษณ์ของแบบบ้าน เพื่อให้ผู้ชมเปรียบเทียบตัวเลือกได้ง่ายGalleryส่วน Gallery ใช้แสดงภาพโครงการที่คัดมาเพื่อเสริมภาพลักษณ์ความพรีเมียมของแบรนด์ ช่วยสร้างอารมณ์ร่วมและทำให้ผู้ชมเห็นภาพประสบการณ์การอยู่อาศัยได้ชัดขึ้นLocationส่วน Location ใช้อธิบายตำแหน่งที่ตั้งของโครงการและเหตุผลที่ทำเลนั้นมีคุณค่า โดยมักเชื่อมกับประเด็นเรื่องการเดินทาง การเข้าถึงเมือง โรงเรียน หรือแหล่งไลฟ์สไตล์Mortgage Calculatorส่วน Mortgage Calculator ช่วยให้ผู้ชมประเมินความสามารถในการซื้อหรือค่างวดโดยประมาณ ทำให้หน้าเว็บมีประโยชน์เชิงใช้งานจริงมากกว่าการเป็นโบรชัวร์แบบนิ่งFooterFooter เป็นส่วนปิดท้ายของหน้า ใช้รองรับข้อมูลแบรนด์และข้อมูลประกอบอื่น ๆ ช่วยให้โครงสร้าง landing page สมบูรณ์และเป็นจุดอ้างอิงสุดท้ายก่อนผู้ใช้จะออกจากหน้าหรือทำ conversionClick here to visit https://d2d-real-estate-demo.vercel.app/Tech stackFrontend: React 19 + TypeScript + Vite 6 package.json src/main.tsxStyling: Tailwind CSS 4 @tailwindcss/vite และ custom theme/fonts src/index.cssAnimation/UI: motion (motion/react) lucide-reactForm/validation: react-hook-form + zod + @hookform/resolversData layer: Firebase Firestore src/lib/firebase.tsFallback persistence: localStorage CRM fallback src/lib/crmStorage.ts
GemiTrans AI Translator
GemiTrans AI TranslatorการทำงานหลักGemiTrans เป็นเว็บแอปพลิเคชันแปลภาษาที่ขับเคลื่อนด้วย AI (Google Gemini) ออกแบบมาเพื่อการแปลแบบเรียลไทม์ที่รองรับการแปลหลายภาษาพร้อมกันในหน้าจอเดียว (สูงสุด 3 รูปแบบการแปล) จุดเด่นคือผู้ใช้สามารถปรับระดับ ความสุภาพ (Formality) และ วัตถุประสงค์ (Objective) ของคำแปลได้เพื่อให้ได้ผลลัพธ์ที่แม่นยำตามบริบทการใช้งานการแก้ปัญหาความรวดเร็วและประสิทธิภาพ ลดความยุ่งยากในการสลับหน้าจอไปมาเพื่อแปลหลายภาษา โดยสามารถเปรียบเทียบผลลัพธ์แบบ Side-by-Side ได้ทันทีในคลิกเดียวบริบทและโทนของภาษา แก้ปัญหาคำแปลที่ "แข็ง" หรือไม่ตรงกับกาลเทศะ โดยการปรับระดับความสุภาพ (0-100) และระบุวัตถุประสงค์ (เช่น แปลแบบทั่วไป, เชิงเทคนิค, หรือเชิงกวี)การจัดเก็บข้อมูลอย่างเป็นระบบ มีระบบ Notebook (เครื่องมือเขียนโน้ต) และ ประวัติการแปล (History) ช่วยให้ผู้ใช้บันทึกและจัดการข้อมูลการแปลที่สำคัญได้ง่ายขึ้นการจัดการทรัพยากร มีระบบ Quota รายวัน (Token-based) เพื่อควบคุมปริมาณการใช้งาน AI และบริหารจัดการต้นทุนอย่างเป็นระบบLanding pageหน้าแรกที่ถูกออกแบบมาเพื่อนำเสนอฟีเจอร์เด่นของแอปพลิเคชัน มีหน้าตาที่ทันสมัยและใช้แอนิเมชัน (Framer Motion) เพื่อสร้างความน่าสนใจ โดยจะแนะนำจุดเด่นอย่างการแปลด้วย AI และการแปลหลายภาษาพร้อมกัน เพื่อกระตุ้นให้ผู้ใช้ใหม่เริ่มต้นใช้งานหรือศึกษาข้อมูลราคาและสิทธิประโยชน์Log in & sign inระบบความปลอดภัยและการยืนยันตัวตนที่ทำงานผ่าน Firebase Authentication ผู้ใช้สามารถสมัครสมาชิกหรือเข้าสู่ระบบเพื่อเชื่อมต่อข้อมูลประวัติการแปล, คำที่บันทึกไว้ และสมุดโน้ต ให้เข้าถึงได้จากทุกอุปกรณ์ ระบบรองรับการตรวจสอบข้อมูลและการแจ้งเตือนข้อผิดพลาดที่ใช้งานง่ายMain productหัวใจหลักของแอปพลิเคชัน เป็นพื้นที่ทำงานที่ผู้ใช้สามารถพิมพ์ข้อความเพื่อแปลแบบเรียลไทม์ โดยมีฟีเจอร์สำคัญคือMulti-Card UI แปลข้อความเป็นหลายภาษาพร้อมกันได้สูงสุด 3 ภาษาCustomization ปรับระดับความสุภาพและกำหนดวัตถุประสงค์การแปลผ่าน AIDrag & Drop จัดลำดับการ์ดคำแปลใหม่ได้ตามต้องการเพื่อการเปรียบเทียบที่สะดวกขึ้นAction Tools คัดลอกข้อความ, ฟังเสียงอ่าน (TTS), หรือส่งข้อมูลไปยัง Notebook ได้ทันทีSettingศูนย์รวมการตั้งค่าส่วนบุคคลที่ช่วยให้ผู้ใช้จัดการการใช้งานได้ตามต้องการ เช่น การตั้งค่า ภาษาเริ่มต้น ที่ใช้บ่อย, การตรวจสอบ โควตาการใช้งานรายวัน (Token) ที่เหลืออยู่ (จัดการโดย Firebase) และการอัปเดตข้อมูลโปรไฟล์ เพื่อให้แอปพลิเคชันพร้อมใช้งานตามสไตล์ของแต่ละคนNotebookเครื่องมือช่วยจัดการข้อมูลที่มีระบบ Rich Text Editor (Tiptap) ผู้ใช้สามารถสร้าง แก้ไข และจัดการโน้ตของตนเองได้อย่างอิสระ โดยสามารถดึงผลการแปลจากหน้าหลักมาบันทึกต่อท้ายในโน้ตได้ทันที เหมาะสำหรับผู้ที่ต้องการรวบรวมข้อมูลหรือจดบันทึกเพื่อการศึกษาและการทำงานอย่างเป็นระบบClick here to visit https://gemitrans-d2d.vercel.appTech StackFrontend React 19, Tailwind CSS, HeroUI (Component Library), Framer Motion (Animations), Tiptap (Rich Text Editor), dnd-kit (Drag-and-Drop UI).Backend Node.js (Serverless API), Google Generative AI (Gemini 1.5 Flash / 3.1 Flash-Lite).Infrastructure Firebase (Authentication, Firestore Database, Hosting).
Contact us
Location
Bangkok, Thailand
2024 — Present
Office hours
จันทร์ – ศุกร์: 9:00 – 18:00
09 AM — 06 PM
Drop us a line
design2deploy.work@gmail.com