Loko619/https-www-troboroa-f6n2t5b
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Trobo Roasters | Artisan Coffee</title>7 <link rel="stylesheet" href="style.css">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 theme: {14 extend: {15 colors: {16 primary: {17 100: '#FFF5F5',18 200: '#FED7D7',19 300: '#FEB2B2',20 400: '#FC8181',21 500: '#F56565',22 600: '#E53E3E',23 700: '#C53030',24 800: '#9B2C2C',25 900: '#742A2A',26 },27 secondary: {28 100: '#EBF8FF',29 200: '#BEE3F8',30 300: '#90CDF4',31 400: '#63B3ED',32 500: '#4299E1',33 600: '#3182CE',34 700: '#2B6CB0',35 800: '#2C5282',36 900: '#2A4365',37 }38 }39 }40 }41 }42 </script>43</head>44<body class="bg-primary-100 font-sans antialiased">45 <!-- Navbar Component -->46 <script src="components/navbar.js"></script>47 <custom-navbar></custom-navbar>48 49 <!-- Hero Section -->50 <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-primary-200 to-primary-400 overflow-hidden">51 <div class="absolute inset-0 bg-[url('https://static.photos/food/1200x630/42')] bg-cover bg-center opacity-20"></div>52 <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">53 <h1 class="text-5xl md:text-7xl font-bold text-primary-800 mb-6">Trobo Roasters</h1>54 <p class="text-xl md:text-2xl text-primary-700 mb-8">Artisan coffee roasted with passion, brewed with perfection</p>55 <div class="flex flex-col sm:flex-row gap-4 justify-center">56 <a href="#products" class="bg-secondary-500 hover:bg-secondary-600 text-white px-8 py-3 rounded-full font-medium transition duration-300 shadow-lg">Our Coffees</a>57 <a href="#about" class="bg-white hover:bg-gray-50 text-primary-600 px-8 py-3 rounded-full font-medium transition duration-300 shadow-lg">Our Story</a>58 </div>59 </div>60 </section>61 62 <!-- Products Section -->63 <section id="products" class="py-20 bg-white">64 <div class="container mx-auto px-4">65 <h2 class="text-3xl md:text-4xl font-bold text-center text-primary-700 mb-12">Our Coffee Selection</h2>66 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">67 <!-- Product Card 1 -->68 <div class="bg-primary-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">69 <img src="https://static.photos/food/640x360/1" alt="Ethiopian Yirgacheffe" class="w-full h-64 object-cover">70 <div class="p-6">71 <h3 class="text-xl font-bold text-primary-800 mb-2">Ethiopian Yirgacheffe</h3>72 <p class="text-primary-600 mb-4">Bright citrus and floral notes with a tea-like body</p>73 <div class="flex justify-between items-center">74 <span class="text-secondary-600 font-bold">$18.00</span>75 <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">Add to Cart</button>76 </div>77 </div>78 </div>79 80 <!-- Product Card 2 -->81 <div class="bg-primary-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">82 <img src="https://static.photos/food/640x360/2" alt="Colombian Supremo" class="w-full h-64 object-cover">83 <div class="p-6">84 <h3 class="text-xl font-bold text-primary-800 mb-2">Colombian Supremo</h3>85 <p class="text-primary-600 mb-4">Rich caramel sweetness with nutty undertones</p>86 <div class="flex justify-between items-center">87 <span class="text-secondary-600 font-bold">$16.00</span>88 <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">Add to Cart</button>89 </div>90 </div>91 </div>92 93 <!-- Product Card 3 -->94 <div class="bg-primary-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">95 <img src="https://static.photos/food/640x360/3" alt="Sumatra Mandheling" class="w-full h-64 object-cover">96 <div class="p-6">97 <h3 class="text-xl font-bold text-primary-800 mb-2">Sumatra Mandheling</h3>98 <p class="text-primary-600 mb-4">Earthy and complex with notes of dark chocolate</p>99 <div class="flex justify-between items-center">100 <span class="text-secondary-600 font-bold">$17.00</span>101 <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">Add to Cart</button>102 </div>103 </div>104 </div>105 </div>106 </div>107 </section>108 109 <!-- About Section -->110 <section id="about" class="py-20 bg-primary-50">111 <div class="container mx-auto px-4">112 <div class="flex flex-col lg:flex-row items-center gap-12">113 <div class="lg:w-1/2">114 <img src="https://static.photos/people/640x360/5" alt="Our Roastery" class="rounded-xl shadow-lg w-full">115 </div>116 <div class="lg:w-1/2">117 <h2 class="text-3xl md:text-4xl font-bold text-primary-700 mb-6">Our Story</h2>118 <p class="text-primary-600 mb-4">Trobo Roasters began as a passion project in a small garage in 2015. What started as a hobby quickly grew into a mission to bring exceptional coffee to our community.</p>119 <p class="text-primary-600 mb-6">We source only the finest beans from ethical farms around the world and roast them with precision to highlight their unique characteristics. Every cup tells a story.</p>120 <a href="#" class="inline-block bg-secondary-500 hover:bg-secondary-600 text-white px-6 py-3 rounded-full font-medium transition duration-300">Meet Our Team</a>121 </div>122 </div>123 </div>124 </section>125 126 <!-- Testimonials -->127 <section class="py-20 bg-secondary-500 text-white">128 <div class="container mx-auto px-4">129 <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">What Our Customers Say</h2>130 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">131 <div class="bg-secondary-400 p-6 rounded-xl">132 <div class="flex items-center mb-4">133 <i data-feather="star" class="text-yellow-300 mr-1"></i>134 <i data-feather="star" class="text-yellow-300 mr-1"></i>135 <i data-feather="star" class="text-yellow-300 mr-1"></i>136 <i data-feather="star" class="text-yellow-300 mr-1"></i>137 <i data-feather="star" class="text-yellow-300"></i>138 </div>139 <p class="mb-4">"The Ethiopian Yirgacheffe is the best coffee I've ever had. So flavorful and aromatic!"</p>140 <p class="font-bold">- Sarah J.</p>141 </div>142 <div class="bg-secondary-400 p-6 rounded-xl">143 <div class="flex items-center mb-4">144 <i data-feather="star" class="text-yellow-300 mr-1"></i>145 <i data-feather="star" class="text-yellow-300 mr-1"></i>146 <i data-feather="star" class="text-yellow-300 mr-1"></i>147 <i data-feather="star" class="text-yellow-300 mr-1"></i>148 <i data-feather="star" class="text-yellow-300"></i>149 </div>150 <p class="mb-4">"Trobo's attention to detail in their roasting process really shows in every cup."</p>151 <p class="font-bold">- Michael T.</p>152 </div>153 <div class="bg-secondary-400 p-6 rounded-xl">154 <div class="flex items-center mb-4">155 <i data-feather="star" class="text-yellow-300 mr-1"></i>156 <i data-feather="star" class="text-yellow-300 mr-1"></i>157 <i data-feather="star" class="text-yellow-300 mr-1"></i>158 <i data-feather="star" class="text-yellow-300 mr-1"></i>159 <i data-feather="star" class="text-yellow-300"></i>160 </div>161 <p class="mb-4">"Customer service is outstanding and the coffee is consistently amazing."</p>162 <p class="font-bold">- Amanda K.</p>163 </div>164 </div>165 </div>166 </section>167 168 <!-- Newsletter -->169 <section class="py-16 bg-primary-200">170 <div class="container mx-auto px-4 max-w-3xl text-center">171 <h2 class="text-2xl md:text-3xl font-bold text-primary-800 mb-4">Join Our Coffee Club</h2>172 <p class="text-primary-700 mb-6">Get exclusive offers, brewing tips, and first access to new roasts.</p>173 <form class="flex flex-col sm:flex-row gap-2 justify-center">174 <input type="email" placeholder="Your email address" class="px-4 py-3 rounded-full flex-grow max-w-md focus:outline-none focus:ring-2 focus:ring-secondary-500">175 <button type="submit" class="bg-secondary-500 hover:bg-secondary-600 text-white px-8 py-3 rounded-full font-medium transition duration-300">Subscribe</button>176 </form>177 </div>178 </section>179 180 <!-- Footer Component -->181 <script src="components/footer.js"></script>182 <custom-footer></custom-footer>183 184 <script src="script.js"></script>185 <script>186 feather.replace();187 </script>188<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>189</body>190</html>