haikal01/java-brew-legacy
0
1<!DOCTYPE html>2<html lang="id" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Java Brew Legacy - Warisan Kopi Jawa</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 fontFamily: {17 'serif': ['Georgia', 'serif'],18 },19 backgroundImage: {20 'batik-pattern': "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDBDNC40NzcgMCAwIDQuNDc3IDAgMTBTNC40NzcgMjAgMTAgMjBTMjAgMTUuNTIzIDIwIDEwUzE1LjUyMyAwIDEwIDBaIiBmaWxsPSIjMGMyODc1IiBmaWxsLW9wYWNpdHk9IjAuMDIiLz4KPC9zdmc+')",21 }22 }23 }24 }25 </script>26 <style>27 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');28 29 .batik-border {30 background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDBDNC40NzcgMCAwIDQuNDc3IDAgMTBTNC40NzcgMjAgMTAgMjBTMjAgMTUuNTIzIDIwIDEwUzE1LjUyMyAwIDEwIDBaIiBmaWxsPSIjZmU5NjI0IiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8L3N2Zz4=');31 }32 33 .hero-gradient {34 background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(2, 132, 199, 0.2) 100%);35 }36 37 .scroll-smooth {38 scroll-behavior: smooth;39 }40 41 .fade-in {42 animation: fadeIn 1s ease-in;43 }44 45 @keyframes fadeIn {46 from { opacity: 0; transform: translateY(20px); }47 to { opacity: 1; transform: translateY(0); }48 }49 50 .hover-lift {51 transition: transform 0.3s ease;52 }53 54 .hover-lift:hover {55 transform: translateY(-5px);56 }57 </style>58</head>59<body class="bg-gray-900 text-gray-100 font-serif scroll-smooth">60 <!-- Navigation -->61 <nav class="fixed w-full bg-gray-900/95 backdrop-blur-sm z-50 border-b border-sky-800">62 <div class="container mx-auto px-4 py-4">63 <div class="flex justify-between items-center">64 <div class="flex items-center space-x-2">65 <i data-feather="coffee" class="text-orange-400 w-8 h-8"></i>66 <span class="text-2xl font-bold text-sky-300">Java Brew Legacy</span>67 </div>68 69 <div class="hidden md:flex space-x-8">70 <a href="#hero" class="text-sky-200 hover:text-orange-300 transition-colors">Beranda</a>71 <a href="#sejarah" class="text-sky-200 hover:text-orange-300 transition-colors">Sejarah</a>72 <a href="#galeri" class="text-sky-200 hover:text-orange-300 transition-colors">Galeri</a>73 <a href="#kontak" class="text-sky-200 hover:text-orange-300 transition-colors">Kontak</a>74 </div>75 76 <button class="md:hidden text-sky-200">77 <i data-feather="menu"></i>78 </button>79 </div>80 </div>81 </nav>82 83 <!-- Hero Section -->84 <section id="hero" class="min-h-screen flex items-center justify-center relative overflow-hidden">85 <div class="absolute inset-0 hero-gradient batik-pattern"></div>86 <img src="http://static.photos/agriculture/1200x630/42" alt="Perkebunan Kopi Jawa" class="absolute inset-0 w-full h-full object-cover opacity-20">87 88 <div class="container mx-auto px-4 text-center relative z-10 fade-in">89 <div class="max-w-4xl mx-auto">90 <h1 class="text-5xl md:text-7xl font-bold text-sky-200 mb-6">91 Warisan Kopi <span class="text-orange-300">Jawa</span>92 </h1>93 <p class="text-xl md:text-2xl text-sky-100 mb-8 leading-relaxed">94 Menelusuri jejak sejarah dan keautentikan kopi Jawa melalui cita rasa yang telah melegenda selama berabad-abad95 </p>96 <div class="flex flex-col sm:flex-row gap-4 justify-center">97 <a href="#sejarah" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-lg font-semibold transition-all hover-lift border border-orange-400">98 Jelajahi Sejarah99 </a>100 <a href="#galeri" class="border border-sky-500 text-sky-300 hover:bg-sky-900 px-8 py-3 rounded-lg font-semibold transition-all hover-lift">101 Lihat Galeri102 </a>103 </div>104 </div>105 </div>106 107 <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">108 <a href="#sejarah" class="animate-bounce">109 <i data-feather="chevron-down" class="text-sky-300 w-8 h-8"></i>110 </a>111 </div>112 </section>113 114 <!-- Sejarah Section -->115 <section id="sejarah" class="py-20 bg-gray-800 batik-pattern">116 <div class="container mx-auto px-4">117 <div class="text-center mb-16">118 <h2 class="text-4xl md:text-5xl font-bold text-sky-200 mb-4">Sejarah Kopi Jawa</h2>119 <div class="w-24 h-1 bg-orange-400 mx-auto"></div>120 </div>121 122 <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">123 <div class="fade-in">124 <div class="relative">125 <img src="http://static.photos/vintage/640x360/7" alt="Sejarah Kopi Jawa" class="rounded-lg shadow-2xl batik-border">126 <div class="absolute -bottom-4 -right-4 bg-orange-500 text-white p-4 rounded-lg">127 <i data-feather="book-open" class="w-6 h-6"></i>128 </div>129 </div>130 </div>131 132 <div class="fade-in">133 <h3 class="text-3xl font-bold text-sky-300 mb-6">Warisan yang Tak Ternilai</h3>134 <p class="text-lg text-gray-300 mb-4 leading-relaxed">135 Kopi Jawa memiliki sejarah panjang yang dimulai sejak era kolonial Belanda pada abad ke-17. 136 Perkebunan kopi pertama di Jawa Timur menjadi cikal bakal industri kopi Indonesia yang mendunia.137 </p>138 <p class="text-lg text-gray-300 mb-6 leading-relaxed">139 Teknik penanaman dan pengolahan tradisional yang diwariskan turun-temurun menjadikan kopi Jawa 140 memiliki karakteristik unik dengan cita rasa yang khas dan mendalam.141 </p>142 <div class="flex items-center space-x-4 text-orange-300">143 <i data-feather="clock" class="w-5 h-5"></i>144 <span>Sejak 1696</span>145 <i data-feather="map-pin" class="w-5 h-5 ml-4"></i>146 <span>Jawa Timur, Indonesia</span>147 </div>148 </div>149 </div>150 </div>151 </section>152 153 <!-- Galeri Section -->154 <section id="galeri" class="py-20 bg-gray-900">155 <div class="container mx-auto px-4">156 <div class="text-center mb-16">157 <h2 class="text-4xl md:text-5xl font-bold text-sky-200 mb-4">Galeri Proses Tradisional</h2>158 <div class="w-24 h-1 bg-orange-400 mx-auto"></div>159 <p class="text-xl text-sky-100 mt-4 max-w-2xl mx-auto">160 Dokumentasi visual proses tradisional dari panen hingga penyajian kopi Jawa161 </p>162 </div>163 164 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">165 <!-- Galeri Item 1 -->166 <div class="group relative overflow-hidden rounded-lg batik-border hover-lift">167 <img src="http://static.photos/agriculture/640x360/1" alt="Panen Kopi" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">168 <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-80"></div>169 <div class="absolute bottom-0 left-0 p-6">170 <h4 class="text-xl font-bold text-white mb-2">Panen Tradisional</h4>171 <p class="text-sky-200">Memetik biji kopi dengan tangan</p>172 </div>173 </div>174 175 <!-- Galeri Item 2 -->176 <div class="group relative overflow-hidden rounded-lg batik-border hover-lift">177 <img src="http://static.photos/agriculture/640x360/2" alt="Penyangraian" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">178 <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-80"></div>179 <div class="absolute bottom-0 left-0 p-6">180 <h4 class="text-xl font-bold text-white mb-2">Penyangraian Manual</h4>181 <p class="text-sky-200">Proses roasting menggunakan wajan</p>182 </div>183 </div>184 185 <!-- Galeri Item 3 -->186 <div class="group relative overflow-hidden rounded-lg batik-border hover-lift">187 <img src="http://static.photos/agriculture/640x360/3" alt="Penyajian" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110">188 <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-80"></div>189 <div class="absolute bottom-0 left-0 p-6">190 <h4 class="text-xl font-bold text-white mb-2">Penyajian Tradisional</h4>191 <p class="text-sky-200">Kopi tubruk dengan gula jawa</p>192 </div>193 </div>194 </div>195 </div>196 </section>197 198 <!-- Kontak Section -->199 <section id="kontak" class="py-20 bg-gray-800 batik-pattern">200 <div class="container mx-auto px-4">201 <div class="text-center mb-16">202 <h2 class="text-4xl md:text-5xl font-bold text-sky-200 mb-4">Hubungi Kami</h2>203 <div class="w-24 h-1 bg-orange-400 mx-auto"></div>204 <p class="text-xl text-sky-100 mt-4 max-w-2xl mx-auto">205 Tertarik dengan warisan kopi Jawa? Mari berbagi cerita dan pengalaman206 </p>207 </div>208 209 <div class="max-w-4xl mx-auto">210 <form class="grid md:grid-cols-2 gap-8">211 <div class="space-y-6">212 <div>213 <label class="block text-sky-200 mb-2">Nama Lengkap</label>214 <input type="text" class="w-full bg-gray-700 border border-sky-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-orange-400 transition-colors" placeholder="Masukkan nama Anda">215 </div>216 <div>217 <label class="block text-sky-200 mb-2">Email</label>218 <input type="email" class="w-full bg-gray-700 border border-sky-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-orange-400 transition-colors" placeholder="email@contoh.com">219 </div>220 <div>221 <label class="block text-sky-200 mb-2">Subjek</label>222 <input type="text" class="w-full bg-gray-700 border border-sky-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-orange-400 transition-colors" placeholder="Subjek pesan">223 </div>224 </div>225 226 <div class="space-y-6">227 <div>228 <label class="block text-sky-200 mb-2">Pesan</label>229 <textarea rows="8" class="w-full bg-gray-700 border border-sky-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-orange-400 transition-colors" placeholder="Tulis pesan Anda..."></textarea>230 </div>231 <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-semibold transition-all border border-orange-400 hover-lift flex items-center justify-center space-x-2">232 <i data-feather="send" class="w-5 h-5"></i>233 <span>Kirim Pesan</span>234 </button>235 </div>236 </form>237 </div>238 </div>239 </section>240 241 <!-- Footer -->242 <footer class="bg-gray-900 border-t border-sky-800 py-12">243 <div class="container mx-auto px-4">244 <div class="grid md:grid-cols-4 gap-8 max-w-6xl mx-auto">245 <div>246 <div class="flex items-center space-x-2 mb-4">247 <i data-feather="coffee" class="text-orange-400 w-6 h-6"></i>248 <span class="text-xl font-bold text-sky-300">Java Brew Legacy</span>249 </div>250 <p class="text-gray-400">251 Melestarikan warisan kopi Jawa melalui edukasi dan apresiasi cita rasa tradisional.252 </p>253 </div>254 255 <div>256 <h4 class="text-sky-200 font-semibold mb-4">Tautan Cepat</h4>257 <ul class="space-y-2 text-gray-400">258 <li><a href="#hero" class="hover:text-orange-300 transition-colors">Beranda</a></li>259 <li><a href="#sejarah" class="hover:text-orange-300 transition-colors">Sejarah</a></li>260 <li><a href="#galeri" class="hover:text-orange-300 transition-colors">Galeri</a></li>261 <li><a href="#kontak" class="hover:text-orange-300 transition-colors">Kontak</a></li>262 </ul>263 </div>264 265 <div>266 <h4 class="text-sky-200 font-semibold mb-4">Kontak</h4>267 <ul class="space-y-2 text-gray-400">268 <li class="flex items-center space-x-2">269 <i data-feather="map-pin" class="w-4 h-4"></i>270 <span>Jawa Timur, Indonesia</span>271 </li>272 <li class="flex items-center space-x-2">273 <i data-feather="mail" class="w-4 h-4"></i>274 <span>info@javabrewlegacy.id</span>275</body>276</html>