<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบรถเช่า - ขับเคลื่อนการเดินทางของคุณ</title>
<meta name="description" content="เช่ารถกับ RentCarPro — รถยนต์หลากหลายรุ่น บริการระดับพรีเมียม และการจองที่ง่ายและปลอดภัย สำหรับการเดินทางทุกประเภท">
<meta name="keywords" content="เช่ารถ, รถเช่า, RentCarPro, รถเช่าสนามบิน, รถเช่า กรุงเทพ">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://code.goragod.com/car-rent/">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="RentCarPro — ระบบรถเช่า">
<meta property="og:description" content="เช่ารถกับ RentCarPro — รถยนต์หลากหลายรุ่น บริการระดับพรีเมียม">
<meta property="og:image" content="img/hero-banner.webp">
<meta property="og:url" content="https://code.goragod.com/car-rent/">
<meta property="og:locale" content="th_TH">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="RentCarPro — ระบบรถเช่า">
<meta name="twitter:description" content="เช่ารถกับ RentCarPro — รถยนต์หลากหลายรุ่น บริการระดับพรีเมียม">
<meta name="twitter:image" content="img/hero-banner.webp">
<meta name="theme-color" content="#2196F3">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "RentCarPro",
"url": "https://code.goragod.com/car-rent/",
"logo": "img/hero-banner.webp",
"sameAs": [
"https://facebook.com/goragodwiriya",
"https://instagram.com/goragodwiriya"
]
}
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Preconnect & crossorigin for external assets -->
</head>
<body>
<!-- Skip link for keyboard users -->
<a class="skip-link" href="#maincontent">ข้ามไปยังเนื้อหา</a>
<!-- Notification Container -->
<div id="notification" class="notification-container" role="status" aria-live="polite"></div>
<!-- Loading Spinner -->
<div id="loading-spinner" class="loading-spinner">
<i class="fas fa-spinner fa-spin"></i>
<span>กำลังโหลด...</span>
</div>
<!-- Header -->
<header class="header" role="banner">
<div class="container">
<a href="#home" class="logo">
<i class="fas fa-car-alt"></i>
<span class="visually-hidden">RentCarPro</span>
<span> RentCarPro</span>
</a>
<nav class="nav" id="nav-menu" role="navigation" aria-label="เมนูหลัก">
<ul>
<li><a href="#home" class="nav-link active">หน้าแรก</a></li>
<li><a href="#cars" class="nav-link">รถของเรา</a></li>
<li><a href="#how-it-works" class="nav-link">วิธีการเช่า</a></li>
<li><a href="#contact" class="nav-link">ติดต่อเรา</a></li>
<li><a href="#" class="nav-link">เข้าสู่ระบบ</a></li>
<li><a href="#" class="nav-link btn btn-secondary" role="button">สมัครสมาชิก</a></li>
</ul>
</nav>
<button class="menu-toggle" id="mobile-menu-btn" aria-controls="nav-menu" aria-label="เปิดเมนู">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<main id="maincontent" role="main">
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content container">
<h1>ขับเคลื่อนการเดินทางของคุณไปกับเรา</h1>
<p>รถยนต์หลากหลายรุ่น พร้อมบริการระดับพรีเมียม</p>
<form id="hero-search-form" class="search-form" role="search" aria-label="ค้นหารถ">
<div class="form-group">
<label for="pickup-location"><i class="fas fa-map-marker-alt"></i> สถานที่รับรถ</label>
<input type="text" id="pickup-location" name="pickup_location" placeholder="เช่น สนามบินสุวรรณภูมิ" required aria-required="true" aria-label="สถานที่รับรถ">
</div>
<div class="form-group">
<label for="pickup-date"><i class="fas fa-calendar-alt"></i> วันที่รับรถ</label>
<input type="date" id="pickup-date" name="pickup_date" required aria-required="true" aria-label="วันที่รับรถ">
</div>
<div class="form-group">
<label for="return-date"><i class="fas fa-calendar-alt"></i> วันที่คืนรถ</label>
<input type="date" id="return-date" name="return_date" required aria-required="true" aria-label="วันที่คืนรถ">
</div>
<button type="submit" class="btn btn-primary btn-search">ค้นหารถ</button>
</form>
</div>
</section>
<!-- Featured Cars Section -->
<section id="cars" class="section featured-cars">
<div class="container">
<h2>รถยนต์แนะนำ</h2>
<p class="section-description">เลือกรถที่ใช่สำหรับทุกการเดินทาง</p>
<div class="car-list grid-4" id="car-list" aria-live="polite" aria-atomic="true">
<!-- Car cards will be injected here by JavaScript. Each image should include alt, width, height, and loading="lazy". -->
</div>
<div class="text-center mt-4">
<a href="#" class="btn btn-secondary">ดูรถทั้งหมด</a>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="section how-it-works bg-light">
<div class="container">
<h2>ขั้นตอนการเช่ารถง่ายๆ</h2>
<p class="section-description">เพียง 3 ขั้นตอน คุณก็พร้อมเดินทาง</p>
<div class="steps-grid grid-3">
<div class="step-item">
<div class="icon-circle"><i class="fas fa-car-side"></i></div>
<h3>1. เลือกรถของคุณ</h3>
<p>ค้นหารถยนต์ที่ตรงกับความต้องการและงบประมาณของคุณจากตัวเลือกมากมาย</p>
</div>
<div class="step-item">
<div class="icon-circle"><i class="fas fa-calendar-check"></i></div>
<h3>2. ระบุวันที่</h3>
<p>เลือกวันที่และเวลาที่คุณต้องการรับและคืนรถได้อย่างสะดวก</p>
</div>
<div class="step-item">
<div class="icon-circle"><i class="fas fa-key"></i></div>
<h3>3. รับกุญแจและออกเดินทาง</h3>
<p>ยืนยันการจอง รับกุญแจ และเริ่มการผจญภัยของคุณได้เลย!</p>
</div>
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section class="section why-choose-us">
<div class="container">
<h2>ทำไมต้องเลือก RentCarPro?</h2>
<div class="features-grid grid-3">
<div class="feature-item">
<i class="fas fa-handshake"></i>
<h3>บริการที่เชื่อถือได้</h3>
<p>เรามุ่งมั่นให้บริการที่ดีที่สุด เพื่อความพึงพอใจสูงสุดของคุณ</p>
</div>
<div class="feature-item">
<i class="fas fa-dollar-sign"></i>
<h3>ราคาคุ้มค่า</h3>
<p>ข้อเสนอและโปรโมชั่นสุดพิเศษ เพื่อการเช่ารถที่คุ้มค่า</p>
</div>
<div class="feature-item">
<i class="fas fa-car"></i>
<h3>รถยนต์คุณภาพ</h3>
<p>รถใหม่ สะอาด ปลอดภัย พร้อมให้คุณเลือกสรร</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="contact" class="footer" role="contentinfo">
<div class="container grid-4">
<div class="footer-col">
<h3><i class="fas fa-car-alt"></i> RentCarPro</h3>
<p>ขับเคลื่อนการเดินทางของคุณไปกับเรา ด้วยรถยนต์คุณภาพและบริการที่เหนือกว่า</p>
</div>
<div class="footer-col">
<h3>ลิงก์ด่วน</h3>
<ul>
<li><a href="#home">หน้าแรก</a></li>
<li><a href="#cars">รถของเรา</a></li>
<li><a href="#how-it-works">วิธีการเช่า</a></li>
<li><a href="#contact">ติดต่อเรา</a></li>
</ul>
</div>
<div class="footer-col">
<h3>ติดต่อเรา</h3>
<p><i class="fas fa-map-marker-alt"></i> 123 ถนนบางนา-ตราด, กรุงเทพฯ 10260</p>
<p><i class="fas fa-phone-alt"></i> <a href="tel:+6621234567">02-123-4567</a></p>
<p><i class="fas fa-envelope"></i> <a href="mailto:info@rentcarpro.com">info@rentcarpro.com</a></p>
</div>
<div class="footer-col">
<h3>ติดตามเรา</h3>
<div class="social-links">
<a href="#" aria-label="Facebook" rel="noopener noreferrer nofollow"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter" rel="noopener noreferrer nofollow"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram" rel="noopener noreferrer nofollow"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Line" rel="noopener noreferrer nofollow"><i class="fab fa-line"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 RentCarPro. All rights reserved.</p>
</div>
</footer>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&family=Prompt:wght@300;400;600&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Main JavaScript -->
<script type="module" src="js/main.js" defer></script>
</body>
</html>