Hugging Face's logo

Spaces:
Linkmkb
/
kjhvy
Running

App Files Community
Linkmkb commited on
Commit
f87f8f3
·
verified ·
1 Parent(s): e5d07ef

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +733 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kjhvy
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: kjhvy
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,733 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ForestBounty | Premium Canned Mushrooms</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero-pattern {
22
+ background-image: radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px);
23
+ background-size: 40px 40px;
24
+ }
25
+
26
+ .mushroom-bg {
27
+ background-image: url('https://images.unsplash.com/photo-1516550893923-42d28e5677af?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
28
+ background-size: cover;
29
+ background-position: center;
30
+ }
31
+
32
+ .product-card:hover .product-overlay {
33
+ opacity: 1;
34
+ transform: translateY(0);
35
+ }
36
+
37
+ .nav-link::after {
38
+ content: '';
39
+ display: block;
40
+ width: 0;
41
+ height: 2px;
42
+ background: #4ade80;
43
+ transition: width .3s;
44
+ }
45
+
46
+ .nav-link:hover::after {
47
+ width: 100%;
48
+ }
49
+
50
+ .mushroom-spin {
51
+ animation: spin 15s linear infinite;
52
+ }
53
+
54
+ @keyframes spin {
55
+ 0% { transform: rotate(0deg); }
56
+ 100% { transform: rotate(360deg); }
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50">
61
+ <!-- Navigation -->
62
+ <nav class="bg-white shadow-md sticky top-0 z-50">
63
+ <div class="container mx-auto px-6 py-4">
64
+ <div class="flex items-center justify-between">
65
+ <div class="flex items-center">
66
+ <img src="https://cdn-icons-png.flaticon.com/512/2909/2909553.png" alt="ForestBounty Logo" class="h-10 w-10 mr-2 mushroom-spin">
67
+ <span class="title-font text-2xl font-bold text-green-700">ForestBounty</span>
68
+ </div>
69
+ <div class="hidden md:flex space-x-8">
70
+ <a href="#home" class="nav-link text-gray-700 hover:text-green-600">Home</a>
71
+ <a href="#products" class="nav-link text-gray-700 hover:text-green-600">Products</a>
72
+ <a href="#about" class="nav-link text-gray-700 hover:text-green-600">About</a>
73
+ <a href="#recipes" class="nav-link text-gray-700 hover:text-green-600">Recipes</a>
74
+ <a href="#contact" class="nav-link text-gray-700 hover:text-green-600">Contact</a>
75
+ </div>
76
+ <div class="flex items-center space-x-4">
77
+ <button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button">
78
+ <i class="fas fa-bars text-2xl"></i>
79
+ </button>
80
+ <button class="hidden md:block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition duration-300">
81
+ <i class="fas fa-shopping-cart mr-2"></i>Shop Now
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <!-- Mobile menu -->
87
+ <div class="md:hidden hidden bg-white w-full px-6 py-4 border-t" id="mobile-menu">
88
+ <div class="flex flex-col space-y-4">
89
+ <a href="#home" class="text-gray-700 hover:text-green-600">Home</a>
90
+ <a href="#products" class="text-gray-700 hover:text-green-600">Products</a>
91
+ <a href="#about" class="text-gray-700 hover:text-green-600">About</a>
92
+ <a href="#recipes" class="text-gray-700 hover:text-green-600">Recipes</a>
93
+ <a href="#contact" class="text-gray-700 hover:text-green-600">Contact</a>
94
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition duration-300 w-full">
95
+ <i class="fas fa-shopping-cart mr-2"></i>Shop Now
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- Hero Section -->
102
+ <section id="home" class="hero-pattern relative overflow-hidden">
103
+ <div class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center">
104
+ <div class="md:w-1/2 mb-12 md:mb-0">
105
+ <h1 class="title-font text-4xl md:text-6xl font-bold text-gray-800 mb-6">
106
+ Nature's Bounty in Every <span class="text-green-600">Can</span>
107
+ </h1>
108
+ <p class="text-lg text-gray-600 mb-8">
109
+ Hand-picked, sustainably sourced mushrooms preserved at the peak of freshness. Perfect for gourmet meals anytime, anywhere.
110
+ </p>
111
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
112
+ <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full font-medium transition duration-300">
113
+ Explore Products
114
+ </button>
115
+ <button class="border-2 border-green-600 text-green-600 hover:bg-green-50 px-8 py-3 rounded-full font-medium transition duration-300">
116
+ Watch Our Story <i class="fas fa-play-circle ml-2"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ <div class="md:w-1/2 relative">
121
+ <div class="mushroom-bg h-80 md:h-96 rounded-2xl shadow-xl transform rotate-3"></div>
122
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg">
123
+ <div class="flex items-center">
124
+ <div class="bg-green-100 p-3 rounded-full mr-3">
125
+ <i class="fas fa-leaf text-green-600 text-xl"></i>
126
+ </div>
127
+ <div>
128
+ <p class="font-bold text-gray-800">100% Organic</p>
129
+ <p class="text-sm text-gray-600">Certified mushrooms</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
136
+ </section>
137
+
138
+ <!-- Features Section -->
139
+ <section class="bg-white py-16">
140
+ <div class="container mx-auto px-6">
141
+ <div class="text-center mb-16">
142
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">
143
+ Why Choose ForestBounty?
144
+ </h2>
145
+ <div class="w-24 h-1 bg-green-600 mx-auto"></div>
146
+ </div>
147
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
148
+ <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300">
149
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
150
+ <i class="fas fa-tree text-green-600 text-2xl"></i>
151
+ </div>
152
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Sustainable Harvesting</h3>
153
+ <p class="text-gray-600">
154
+ We carefully harvest our mushrooms to ensure forest ecosystems remain healthy and productive for generations to come.
155
+ </p>
156
+ </div>
157
+ <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300">
158
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
159
+ <i class="fas fa-clock text-green-600 text-2xl"></i>
160
+ </div>
161
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Peak Freshness</h3>
162
+ <p class="text-gray-600">
163
+ Our proprietary canning process locks in nutrients and flavor within hours of harvest for maximum quality.
164
+ </p>
165
+ </div>
166
+ <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition duration-300">
167
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
168
+ <i class="fas fa-medal text-green-600 text-2xl"></i>
169
+ </div>
170
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Gourmet Quality</h3>
171
+ <p class="text-gray-600">
172
+ Preferred by chefs worldwide, our mushrooms deliver restaurant-quality results in your home kitchen.
173
+ </p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Products Section -->
180
+ <section id="products" class="bg-gray-50 py-16">
181
+ <div class="container mx-auto px-6">
182
+ <div class="text-center mb-16">
183
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">
184
+ Our Premium Selection
185
+ </h2>
186
+ <p class="text-gray-600 max-w-2xl mx-auto">
187
+ Discover our range of hand-selected mushroom varieties, each with its own unique flavor profile and culinary uses.
188
+ </p>
189
+ <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div>
190
+ </div>
191
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
192
+ <!-- Product 1 -->
193
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
194
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1606813907291-d86efa9b94db?ixlib=rb-4.0.3&auto=format&fit=crop&w=1352&q=80');"></div>
195
+ <div class="p-6">
196
+ <div class="flex justify-between items-start mb-2">
197
+ <h3 class="text-xl font-bold text-gray-800">Porcini</h3>
198
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">BESTSELLER</span>
199
+ </div>
200
+ <p class="text-gray-600 text-sm mb-4">Rich, nutty flavor perfect for risottos and sauces.</p>
201
+ <div class="flex justify-between items-center">
202
+ <span class="text-lg font-bold text-gray-800">$6.99</span>
203
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm transition duration-300">
204
+ Add to Cart
205
+ </button>
206
+ </div>
207
+ </div>
208
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300">
209
+ <button class="bg-white text-green-600 px-6 py-3 rounded-full font-medium hover:bg-green-50 transition duration-300">
210
+ Quick View
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Product 2 -->
216
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
217
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1605559422743-6f7a399115e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
218
+ <div class="p-6">
219
+ <div class="flex justify-between items-start mb-2">
220
+ <h3 class="text-xl font-bold text-gray-800">Chanterelle</h3>
221
+ <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">NEW</span>
222
+ </div>
223
+ <p class="text-gray-600 text-sm mb-4">Delicate and fruity with a slight peppery taste.</p>
224
+ <div class="flex justify-between items-center">
225
+ <span class="text-lg font-bold text-gray-800">$7.49</span>
226
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm transition duration-300">
227
+ Add to Cart
228
+ </button>
229
+ </div>
230
+ </div>
231
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300">
232
+ <button class="bg-white text-green-600 px-6 py-3 rounded-full font-medium hover:bg-green-50 transition duration-300">
233
+ Quick View
234
+ </button>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Product 3 -->
239
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
240
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1512428813834-c702c2622a3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
241
+ <div class="p-6">
242
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Shiitake</h3>
243
+ <p class="text-gray-600 text-sm mb-4">Meaty texture with a rich, smoky flavor.</p>
244
+ <div class="flex justify-between items-center">
245
+ <span class="text-lg font-bold text-gray-800">$5.99</span>
246
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm transition duration-300">
247
+ Add to Cart
248
+ </button>
249
+ </div>
250
+ </div>
251
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300">
252
+ <button class="bg-white text-green-600 px-6 py-3 rounded-full font-medium hover:bg-green-50 transition duration-300">
253
+ Quick View
254
+ </button>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Product 4 -->
259
+ <div class="product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300 relative">
260
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1533134242443-9485b1f9e9e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
261
+ <div class="p-6">
262
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Morel</h3>
263
+ <p class="text-gray-600 text-sm mb-4">Highly prized with a distinctive honeycomb texture.</p>
264
+ <div class="flex justify-between items-center">
265
+ <span class="text-lg font-bold text-gray-800">$9.99</span>
266
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full text-sm transition duration-300">
267
+ Add to Cart
268
+ </button>
269
+ </div>
270
+ </div>
271
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 transform translate-y-4 transition duration-300">
272
+ <button class="bg-white text-green-600 px-6 py-3 rounded-full font-medium hover:bg-green-50 transition duration-300">
273
+ Quick View
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ <div class="text-center mt-12">
279
+ <button class="border-2 border-green-600 text-green-600 hover:bg-green-50 px-8 py-3 rounded-full font-medium transition duration-300">
280
+ View All Products
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- About Section -->
287
+ <section id="about" class="bg-white py-16">
288
+ <div class="container mx-auto px-6">
289
+ <div class="flex flex-col md:flex-row items-center">
290
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
291
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-6">
292
+ Our Mushroom Journey
293
+ </h2>
294
+ <p class="text-gray-600 mb-6">
295
+ Founded in 1995 by master forager Elias Green, ForestBounty began as a small family operation in the Pacific Northwest. What started as a passion for wild mushrooms has grown into a company dedicated to bringing the finest preserved mushrooms to kitchens around the world.
296
+ </p>
297
+ <p class="text-gray-600 mb-8">
298
+ Today, we work with a network of expert foragers who share our commitment to sustainable harvesting practices. Each can represents hours of careful selection and our proprietary preservation process that maintains texture, flavor, and nutritional value.
299
+ </p>
300
+ <div class="flex space-x-4">
301
+ <div class="text-center">
302
+ <div class="text-3xl font-bold text-green-600">25+</div>
303
+ <div class="text-gray-600">Years Experience</div>
304
+ </div>
305
+ <div class="text-center">
306
+ <div class="text-3xl font-bold text-green-600">100%</div>
307
+ <div class="text-gray-600">Organic Certified</div>
308
+ </div>
309
+ <div class="text-center">
310
+ <div class="text-3xl font-bold text-green-600">12</div>
311
+ <div class="text-gray-600">Mushroom Varieties</div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="md:w-1/2 relative">
316
+ <div class="grid grid-cols-2 gap-4">
317
+ <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95e51c0b72bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
318
+ <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1582731593059-3f0d1a3d238f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
319
+ <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1549608276-644bffeb82a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
320
+ <div class="h-64 bg-cover bg-center rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1512428813834-c702c2622a3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
321
+ </div>
322
+ <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-lg shadow-lg">
323
+ <div class="flex items-center">
324
+ <div class="bg-green-100 p-4 rounded-full mr-4">
325
+ <i class="fas fa-award text-green-600 text-2xl"></i>
326
+ </div>
327
+ <div>
328
+ <p class="font-bold text-gray-800">2023 Golden Spore Award</p>
329
+ <p class="text-sm text-gray-600">Best Canned Mushroom Producer</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Recipes Section -->
339
+ <section id="recipes" class="bg-gray-50 py-16">
340
+ <div class="container mx-auto px-6">
341
+ <div class="text-center mb-16">
342
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">
343
+ Mushroom Inspiration
344
+ </h2>
345
+ <p class="text-gray-600 max-w-2xl mx-auto">
346
+ Discover delicious ways to use our canned mushrooms in your cooking.
347
+ </p>
348
+ <div class="w-24 h-1 bg-green-600 mx-auto mt-4"></div>
349
+ </div>
350
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
351
+ <!-- Recipe 1 -->
352
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
353
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1518779578993-ec3579fee39f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
354
+ <div class="p-6">
355
+ <div class="flex items-center mb-3">
356
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">30 min</span>
357
+ <span class="text-gray-500 text-sm"><i class="fas fa-utensils mr-1"></i> Main Course</span>
358
+ </div>
359
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Creamy Mushroom Pasta</h3>
360
+ <p class="text-gray-600 text-sm mb-4">A luxurious pasta dish featuring our porcini mushrooms in a creamy garlic sauce.</p>
361
+ <button class="text-green-600 hover:text-green-700 font-medium flex items-center">
362
+ View Recipe <i class="fas fa-arrow-right ml-2"></i>
363
+ </button>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Recipe 2 -->
368
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
369
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
370
+ <div class="p-6">
371
+ <div class="flex items-center mb-3">
372
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">20 min</span>
373
+ <span class="text-gray-500 text-sm"><i class="fas fa-bread-slice mr-1"></i> Appetizer</span>
374
+ </div>
375
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Mushroom Bruschetta</h3>
376
+ <p class="text-gray-600 text-sm mb-4">Our chanterelles shine in this elegant twist on the classic Italian starter.</p>
377
+ <button class="text-green-600 hover:text-green-700 font-medium flex items-center">
378
+ View Recipe <i class="fas fa-arrow-right ml-2"></i>
379
+ </button>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Recipe 3 -->
384
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
385
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');"></div>
386
+ <div class="p-6">
387
+ <div class="flex items-center mb-3">
388
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded mr-2">45 min</span>
389
+ <span class="text-gray-500 text-sm"><i class="fas fa-drumstick-bite mr-1"></i> Meat Dish</span>
390
+ </div>
391
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Beef & Mushroom Stew</h3>
392
+ <p class="text-gray-600 text-sm mb-4">Hearty comfort food featuring our shiitake mushrooms slow-cooked with tender beef.</p>
393
+ <button class="text-green-600 hover:text-green-700 font-medium flex items-center">
394
+ View Recipe <i class="fas fa-arrow-right ml-2"></i>
395
+ </button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ <div class="text-center mt-12">
400
+ <button class="border-2 border-green-600 text-green-600 hover:bg-green-50 px-8 py-3 rounded-full font-medium transition duration-300">
401
+ Browse All Recipes
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Testimonials -->
408
+ <section class="bg-white py-16">
409
+ <div class="container mx-auto px-6">
410
+ <div class="text-center mb-16">
411
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">
412
+ What Our Customers Say
413
+ </h2>
414
+ <div class="w-24 h-1 bg-green-600 mx-auto"></div>
415
+ </div>
416
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
417
+ <!-- Testimonial 1 -->
418
+ <div class="bg-gray-50 p-8 rounded-xl">
419
+ <div class="flex items-center mb-4">
420
+ <div class="text-yellow-400 mr-2">
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star"></i>
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star"></i>
426
+ </div>
427
+ <span class="text-gray-500 text-sm">2 days ago</span>
428
+ </div>
429
+ <p class="text-gray-600 mb-6">
430
+ "The porcini mushrooms are incredible! The flavor is so intense, just like fresh. I use them in risottos and they elevate the dish to restaurant quality."
431
+ </p>
432
+ <div class="flex items-center">
433
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
434
+ <div>
435
+ <p class="font-bold text-gray-800">Sarah J.</p>
436
+ <p class="text-sm text-gray-600">Home Chef, Portland</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Testimonial 2 -->
442
+ <div class="bg-gray-50 p-8 rounded-xl">
443
+ <div class="flex items-center mb-4">
444
+ <div class="text-yellow-400 mr-2">
445
+ <i class="fas fa-star"></i>
446
+ <i class="fas fa-star"></i>
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ </div>
451
+ <span class="text-gray-500 text-sm">1 week ago</span>
452
+ </div>
453
+ <p class="text-gray-600 mb-6">
454
+ "As a professional chef, I demand the best ingredients. ForestBounty's mushrooms consistently deliver exceptional quality that I can rely on for my menu."
455
+ </p>
456
+ <div class="flex items-center">
457
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
458
+ <div>
459
+ <p class="font-bold text-gray-800">Michael T.</p>
460
+ <p class="text-sm text-gray-600">Executive Chef, Seattle</p>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Testimonial 3 -->
466
+ <div class="bg-gray-50 p-8 rounded-xl">
467
+ <div class="flex items-center mb-4">
468
+ <div class="text-yellow-400 mr-2">
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star-half-alt"></i>
474
+ </div>
475
+ <span class="text-gray-500 text-sm">3 weeks ago</span>
476
+ </div>
477
+ <p class="text-gray-600 mb-6">
478
+ "I love having these on hand for quick meals. The morels are particularly special - so hard to find fresh where I live, but these canned ones are fantastic."
479
+ </p>
480
+ <div class="flex items-center">
481
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer L." class="w-12 h-12 rounded-full mr-4">
482
+ <div>
483
+ <p class="font-bold text-gray-800">Jennifer L.</p>
484
+ <p class="text-sm text-gray-600">Food Blogger, Chicago</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </section>
491
+
492
+ <!-- Newsletter -->
493
+ <section class="bg-green-700 py-16">
494
+ <div class="container mx-auto px-6">
495
+ <div class="max-w-4xl mx-auto text-center">
496
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-white mb-6">
497
+ Join Our Mushroom Community
498
+ </h2>
499
+ <p class="text-green-100 mb-8">
500
+ Subscribe to our newsletter for exclusive recipes, seasonal offers, and mushroom foraging tips delivered to your inbox.
501
+ </p>
502
+ <div class="flex flex-col sm:flex-row max-w-md mx-auto sm:max-w-xl">
503
+ <input type="email" placeholder="Your email address" class="px-6 py-4 rounded-l-full sm:rounded-r-none rounded-r-full mb-2 sm:mb-0 flex-grow focus:outline-none">
504
+ <button class="bg-green-800 hover:bg-green-900 text-white px-8 py-4 rounded-r-full sm:rounded-l-none rounded-l-full font-medium transition duration-300">
505
+ Subscribe
506
+ </button>
507
+ </div>
508
+ <p class="text-green-200 text-sm mt-4">
509
+ We respect your privacy. Unsubscribe at any time.
510
+ </p>
511
+ </div>
512
+ </div>
513
+ </section>
514
+
515
+ <!-- Contact Section -->
516
+ <section id="contact" class="bg-white py-16">
517
+ <div class="container mx-auto px-6">
518
+ <div class="flex flex-col md:flex-row">
519
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
520
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-6">
521
+ Get In Touch
522
+ </h2>
523
+ <p class="text-gray-600 mb-8">
524
+ Have questions about our products or need cooking advice? Our mushroom experts are here to help.
525
+ </p>
526
+ <div class="space-y-6">
527
+ <div class="flex items-start">
528
+ <div class="bg-green-100 p-3 rounded-full mr-4">
529
+ <i class="fas fa-map-marker-alt text-green-600"></i>
530
+ </div>
531
+ <div>
532
+ <h4 class="font-bold text-gray-800 mb-1">Our Location</h4>
533
+ <p class="text-gray-600">123 Forest Lane, Portland, OR 97201</p>
534
+ </div>
535
+ </div>
536
+ <div class="flex items-start">
537
+ <div class="bg-green-100 p-3 rounded-full mr-4">
538
+ <i class="fas fa-phone-alt text-green-600"></i>
539
+ </div>
540
+ <div>
541
+ <h4 class="font-bold text-gray-800 mb-1">Call Us</h4>
542
+ <p class="text-gray-600">(503) 555-0199</p>
543
+ </div>
544
+ </div>
545
+ <div class="flex items-start">
546
+ <div class="bg-green-100 p-3 rounded-full mr-4">
547
+ <i class="fas fa-envelope text-green-600"></i>
548
+ </div>
549
+ <div>
550
+ <h4 class="font-bold text-gray-800 mb-1">Email Us</h4>
551
+ <p class="text-gray-600">[email protected]</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ <div class="mt-8">
556
+ <h4 class="font-bold text-gray-800 mb-4">Follow Us</h4>
557
+ <div class="flex space-x-4">
558
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-600 hover:text-green-600 transition duration-300">
559
+ <i class="fab fa-facebook-f"></i>
560
+ </a>
561
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-600 hover:text-green-600 transition duration-300">
562
+ <i class="fab fa-instagram"></i>
563
+ </a>
564
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-600 hover:text-green-600 transition duration-300">
565
+ <i class="fab fa-pinterest-p"></i>
566
+ </a>
567
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-600 hover:text-green-600 transition duration-300">
568
+ <i class="fab fa-youtube"></i>
569
+ </a>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ <div class="md:w-1/2">
574
+ <div class="bg-gray-50 p-8 rounded-xl">
575
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Send Us a Message</h3>
576
+ <form>
577
+ <div class="mb-4">
578
+ <label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label>
579
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent">
580
+ </div>
581
+ <div class="mb-4">
582
+ <label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
583
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent">
584
+ </div>
585
+ <div class="mb-4">
586
+ <label for="subject" class="block text-gray-700 text-sm font-medium mb-2">Subject</label>
587
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent">
588
+ </div>
589
+ <div class="mb-6">
590
+ <label for="message" class="block text-gray-700 text-sm font-medium mb-2">Message</label>
591
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent"></textarea>
592
+ </div>
593
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
594
+ Send Message
595
+ </button>
596
+ </form>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </section>
602
+
603
+ <!-- Footer -->
604
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
605
+ <div class="container mx-auto px-6">
606
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
607
+ <div>
608
+ <div class="flex items-center mb-4">
609
+ <img src="https://cdn-icons-png.flaticon.com/512/2909/2909553.png" alt="ForestBounty Logo" class="h-8 w-8 mr-2">
610
+ <span class="title-font text-xl font-bold text-white">ForestBounty</span>
611
+ </div>
612
+ <p class="text-gray-400 mb-4">
613
+ Bringing the forest's finest mushrooms to your table since 1995.
614
+ </p>
615
+ <div class="flex space-x-4">
616
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
617
+ <i class="fab fa-facebook-f"></i>
618
+ </a>
619
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
620
+ <i class="fab fa-instagram"></i>
621
+ </a>
622
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
623
+ <i class="fab fa-pinterest-p"></i>
624
+ </a>
625
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
626
+ <i class="fab fa-youtube"></i>
627
+ </a>
628
+ </div>
629
+ </div>
630
+ <div>
631
+ <h4 class="text-lg font-bold text-white mb-4">Quick Links</h4>
632
+ <ul class="space-y-2">
633
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
634
+ <li><a href="#products" class="text-gray-400 hover:text-white transition duration-300">Products</a></li>
635
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
636
+ <li><a href="#recipes" class="text-gray-400 hover:text-white transition duration-300">Recipes</a></li>
637
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
638
+ </ul>
639
+ </div>
640
+ <div>
641
+ <h4 class="text-lg font-bold text-white mb-4">Products</h4>
642
+ <ul class="space-y-2">
643
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Porcini Mushrooms</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Chanterelle Mushrooms</a></li>
645
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Shiitake Mushrooms</a></li>
646
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Morel Mushrooms</a></li>
647
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">View All</a></li>
648
+ </ul>
649
+ </div>
650
+ <div>
651
+ <h4 class="text-lg font-bold text-white mb-4">Newsletter</h4>
652
+ <p class="text-gray-400 mb-4">
653
+ Subscribe to get updates on new products and recipes.
654
+ </p>
655
+ <div class="flex">
656
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-green-600 w-full">
657
+ <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-lg">
658
+ <i class="fas fa-paper-plane"></i>
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
664
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
665
+ &copy; 2023 ForestBounty. All rights reserved.
666
+ </p>
667
+ <div class="flex space-x-6">
668
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
669
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a>
670
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Shipping Policy</a>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </footer>
675
+
676
+ <!-- Back to Top Button -->
677
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-green-600 text-white w-12 h-12 rounded-full shadow-lg hidden items-center justify-center transition duration-300 hover:bg-green-700">
678
+ <i class="fas fa-arrow-up"></i>
679
+ </button>
680
+
681
+ <script>
682
+ // Mobile menu toggle
683
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
684
+ const mobileMenu = document.getElementById('mobile-menu');
685
+
686
+ mobileMenuButton.addEventListener('click', () => {
687
+ mobileMenu.classList.toggle('hidden');
688
+ });
689
+
690
+ // Back to top button
691
+ const backToTopButton = document.getElementById('back-to-top');
692
+
693
+ window.addEventListener('scroll', () => {
694
+ if (window.pageYOffset > 300) {
695
+ backToTopButton.classList.remove('hidden');
696
+ backToTopButton.classList.add('flex');
697
+ } else {
698
+ backToTopButton.classList.add('hidden');
699
+ backToTopButton.classList.remove('flex');
700
+ }
701
+ });
702
+
703
+ backToTopButton.addEventListener('click', () => {
704
+ window.scrollTo({ top: 0, behavior: 'smooth' });
705
+ });
706
+
707
+ // Smooth scrolling for navigation links
708
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
709
+ anchor.addEventListener('click', function (e) {
710
+ e.preventDefault();
711
+
712
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
713
+ behavior: 'smooth'
714
+ });
715
+
716
+ // Close mobile menu if open
717
+ if (!mobileMenu.classList.contains('hidden')) {
718
+ mobileMenu.classList.add('hidden');
719
+ }
720
+ });
721
+ });
722
+
723
+ // Product quick view simulation
724
+ const quickViewButtons = document.querySelectorAll('.product-overlay button');
725
+
726
+ quickViewButtons.forEach(button => {
727
+ button.addEventListener('click', () => {
728
+ alert('Product quick view feature would open here with more details!');
729
+ });
730
+ });
731
+ </script>
732
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Linkmkb/kjhvy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
733
+ </html>
prompts.txt ADDED
File without changes