| <!DOCTYPE html> |
| <html lang="th"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ใจเกษตร - นวัตกรรมอาหารพืชเข้มข้น</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| |
| <section class="relative bg-gradient-to-br from-emerald-500 via-emerald-600 to-emerald-700 text-white overflow-hidden"> |
| <div class="absolute inset-0 bg-black opacity-10"></div> |
| <div class="relative z-10 container mx-auto px-4 py-24"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in"> |
| ใจเกษตร |
| <span class="block text-2xl md:text-3xl font-light mt-4 text-emerald-100"> |
| นวัตกรรมอาหารพืชเข้มข้น |
| </span> |
| </h1> |
| <p class="text-xl md:text-2xl mb-8 text-emerald-50"> |
| เพิ่มผลผลิต 60-70% | ดูดซึม 95% | ปลอดภัย 99.99% |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="#products" class="bg-yellow-500 hover:bg-yellow-600 text-emerald-900 px-8 py-4 rounded-full font-bold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"> |
| ดูผลิตภัณฑ์ |
| </a> |
| <a href="#calculator" class="border-2 border-white hover:bg-white hover:text-emerald-600 px-8 py-4 rounded-full font-bold text-lg transition-all duration-300"> |
| คำนวณอัตราการใช้ |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0"> |
| <svg class="w-full h-12 md:h-24" viewBox="0 0 1200 120" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M0 120L50 110C100 100 200 80 300 60C400 40 500 20 600 15C700 10 800 20 900 35C1000 50 1100 70 1150 80L1200 90V120H1150C1100 120 1000 120 900 120C800 120 700 120 600 120C500 120 400 120 300 120C200 120 100 120 50 120H0Z" fill="#F9FAFB"/> |
| </svg> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-4xl font-bold text-center mb-16 text-gray-800"> |
| ทำไมต้องเลือกใจเกษตร? |
| </h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> |
| <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="zap" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">ดูดซึมเร็ว</h3> |
| <p class="text-gray-600">เห็นผลใน 2-5 วัน ด้วยอัตราการดูดซึมสูงถึง 95%</p> |
| </div> |
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> |
| <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="trending-up" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">เพิ่มผลผลิต</h3> |
| <p class="text-gray-600">เพิ่มผลผลิตได้ถึง 60-70% เทียบกับปุ๋ยเคมีทั่วไป</p> |
| </div> |
| <div class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> |
| <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center mb-6"> |
| <i data-feather="shield" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">ปลอดภัยสูง</h3> |
| <p class="text-gray-600">ปลอดภัย 99.99% เป็นมิตรต่อสิ่งแวดล้อม</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-4xl font-bold text-center mb-16 text-gray-800"> |
| ผลิตภัณฑ์ใจเกษตร |
| </h2> |
| <div class="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto"> |
| <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-3xl p-8 shadow-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-20 h-20 bg-orange-500 rounded-full flex items-center justify-center mr-6"> |
| <span class="text-white font-bold text-2xl">สูตร 1</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-800">บำรุงต้น ราก ใบ</h3> |
| <p class="text-gray-600">ปรับสภาพดิน</p> |
| </div> |
| </div> |
| <ul class="space-y-3 text-gray-700"> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| กระตุ้นการแตกราก |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| ดูดซึมอาหารเก่ง |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| ต้านทานสภาพอากาศแปรปรวน |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| เสริมภูมิต้านทานโรค |
| </li> |
| </ul> |
| </div> |
| <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-3xl p-8 shadow-xl"> |
| <div class="flex items-center mb-6"> |
| <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mr-6"> |
| <span class="text-white font-bold text-2xl">สูตร 2</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-bold text-gray-800">เพิ่มผลผลิต</h3> |
| <p class="text-gray-600">ติดดอก ออกผล</p> |
| </div> |
| </div> |
| <ul class="space-y-3 text-gray-700"> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| ช่วยในการออกดอก ติดผล |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| ขยายขนาดผล |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| สร้างเนื้อ รสชาติ สีสัน |
| </li> |
| <li class="flex items-center"> |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-500 mr-3"></i> |
| ลดการหลุดร่วง |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="calculator" class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden"> |
| <div class="bg-emerald-600 p-8 text-white"> |
| <h2 class="text-3xl font-bold text-center">คำนวณอัตราการใช้ใจเกษตร</h2> |
| </div> |
| <div class="p-8"> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div> |
| <label class="block text-gray-700 font-bold mb-2">ประเภทพืช</label> |
| <select id="plantType" class="w-full p-4 border-2 border-gray-300 rounded-xl focus:border-emerald-500 focus:outline-none"> |
| <option value="vegetable">พืชผัก ไม้ดอก ไม้ประดับ</option> |
| <option value="field">พืชไร่ (มัน อ้อย ข้าวโพด)</option> |
| <option value="perennial">พืชยืนต้น (ผลไม้ ยาง ปาล์ม)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 font-bold mb-2">พื้นที่ (ไร่)</label> |
| <input type="number" id="area" min="0.1" step="0.1" value="1" |
| class="w-full p-4 border-2 border-gray-300 rounded-xl focus:border-emerald-500 focus:outline-none"> |
| </div> |
| </div> |
| <div class="mt-8 p-6 bg-emerald-50 rounded-xl"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">ผลการคำนวณ</h3> |
| <div id="result" class="space-y-2 text-gray-700"> |
| <p>อัตราการใช้: <span class="font-bold text-emerald-600">10-15 กรัม ต่อน้ำ 20 ลิตร</span></p> |
| <p>ความถี่: <span class="font-bold text-emerald-600">7-10 วัน/ครั้ง</span></p> |
| <p>ปริมาณที่ต้องใช้: <span class="font-bold text-emerald-600">10-15 กรัม</span></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-4xl font-bold mb-8 text-gray-800">ติดต่อสอบถาม</h2> |
| <p class="text-xl text-gray-600 mb-8">ปรึกษาปัญหาเรื่องพืชและการใช้ใจเกษตร</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
| <div class="bg-emerald-100 p-6 rounded-2xl flex items-center"> |
| <i data-feather="message-circle" class="w-8 h-8 text-emerald-600 mr-4"></i> |
| <div class="text-left"> |
| <p class="font-bold text-gray-800">Line Openchat</p> |
| <p class="text-gray-600">WP ใจเกษร Openchat</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
