Hugging Face's logo

Spaces:
rahulbana
/
playful-wonders-toy-emporium
Running

App Files Community
rahulbana commited on
Commit
e362e42
·
verified ·
1 Parent(s): 85cb940

create a landing page for my toy shop

Browse files
Files changed (5) hide show
  1. README.md +7 -4
  2. components/navbar.js +53 -0
  3. index.html +232 -19
  4. script.js +23 -0
  5. style.css +38 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Playful Wonders Toy Emporium
3
- emoji: 📊
4
- colorFrom: green
5
- colorTo: red
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: Playful Wonders Toy Emporium
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ position: sticky;
10
+ top: 0;
11
+ z-index: 50;
12
+ background-color: white;
13
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
14
+ }
15
+ .nav-container {
16
+ max-width: 1200px;
17
+ margin: 0 auto;
18
+ padding: 1rem;
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ }
23
+ .logo {
24
+ font-size: 1.5rem;
25
+ font-weight: bold;
26
+ color: #FF6B6B;
27
+ display: flex;
28
+ align-items: center;
29
+ }
30
+ .logo-icon {
31
+ margin-right: 0.5rem;
32
+ }
33
+ .nav-links {
34
+ display: flex;
35
+ gap: 1.5rem;
36
+ }
37
+ .nav-link {
38
+ color: #4B5563;
39
+ font-weight: 500;
40
+ transition: color 0.3s;
41
+ text-decoration: none;
42
+ }
43
+ .nav-link:hover {
44
+ color: #FF6B6B;
45
+ }
46
+ .cart-icon {
47
+ position: relative;
48
+ }
49
+ .cart-count {
50
+ position: absolute;
51
+ top: -0.5rem;
52
+ right: -0.5rem;
53
+ background-color
index.html CHANGED
@@ -1,19 +1,232 @@
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>Playful Wonders Toy Emporium 🧸</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#FF6B6B',
17
+ secondary: '#4ECDC4',
18
+ accent: '#FFE66D',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-gray-50 font-sans">
26
+ <custom-navbar></custom-navbar>
27
+ <main>
28
+ <!-- Hero Section -->
29
+ <section class="relative bg-gradient-to-r from-primary to-accent py-20 px-4">
30
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
31
+ <div class="md:w-1/2 mb-10 md:mb-0">
32
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Where Imagination Comes to Play!</h1>
33
+ <p class="text-xl text-white mb-8">Discover magical toys that spark creativity and joy for children of all ages.</p>
34
+ <div class="flex flex-col sm:flex-row gap-4">
35
+ <a href="#featured" class="bg-white text-primary hover:bg-gray-100 font-bold py-3 px-6 rounded-full text-center transition duration-300">Shop Now</a>
36
+ <a href="#about" class="border-2 border-white text-white hover:bg-white hover:text-primary font-bold py-3 px-6 rounded-full text-center transition duration-300">Learn More</a>
37
+ </div>
38
+ </div>
39
+ <div class="md:w-1/2">
40
+ <img src="http://static.photos/toys/1200x630/42" alt="Colorful toys" class="rounded-lg shadow-2xl transform hover:scale-105 transition duration-500">
41
+ </div>
42
+ </div>
43
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 -mb-8"></div>
44
+ </section>
45
+
46
+ <!-- Featured Products -->
47
+ <section id="featured" class="py-20 bg-white">
48
+ <div class="container mx-auto px-4">
49
+ <h2 class="text-3xl font-bold text-center mb-4 text-primary">Featured Toys</h2>
50
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Our most popular toys loved by kids and parents alike</p>
51
+
52
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
53
+ <!-- Product 1 -->
54
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
55
+ <div class="h-64 bg-secondary flex items-center justify-center">
56
+ <img src="http://static.photos/toys/640x360/1" alt="Building Blocks" class="h-full w-full object-cover">
57
+ </div>
58
+ <div class="p-6">
59
+ <h3 class="text-xl font-bold mb-2">Mega Building Blocks</h3>
60
+ <p class="text-gray-600 mb-4">200-piece set for endless creative possibilities</p>
61
+ <div class="flex justify-between items-center">
62
+ <span class="font-bold text-primary text-xl">$29.99</span>
63
+ <button class="bg-primary hover:bg-opacity-90 text-white py-2 px-4 rounded-full transition duration-300">Add to Cart</button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Product 2 -->
69
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
70
+ <div class="h-64 bg-accent flex items-center justify-center">
71
+ <img src="http://static.photos/toys/640x360/2" alt="Plush Toy" class="h-full w-full object-cover">
72
+ </div>
73
+ <div class="p-6">
74
+ <h3 class="text-xl font-bold mb-2">Cuddly Friends Collection</h3>
75
+ <p class="text-gray-600 mb-4">Super soft plush animals for bedtime snuggles</p>
76
+ <div class="flex justify-between items-center">
77
+ <span class="font-bold text-primary text-xl">$19.99</span>
78
+ <button class="bg-primary hover:bg-opacity-90 text-white py-2 px-4 rounded-full transition duration-300">Add to Cart</button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Product 3 -->
84
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
85
+ <div class="h-64 bg-primary flex items-center justify-center">
86
+ <img src="http://static.photos/toys/640x360/3" alt="Educational Toy" class="h-full w-full object-cover">
87
+ </div>
88
+ <div class="p-6">
89
+ <h3 class="text-xl font-bold mb-2">STEM Learning Kit</h3>
90
+ <p class="text-gray-600 mb-4">Fun experiments that teach science concepts</p>
91
+ <div class="flex justify-between items-center">
92
+ <span class="font-bold text-primary text-xl">$39.99</span>
93
+ <button class="bg-primary hover:bg-opacity-90 text-white py-2 px-4 rounded-full transition duration-300">Add to Cart</button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="text-center mt-12">
100
+ <a href="#" class="inline-block bg-secondary hover:bg-opacity-90 text-white font-bold py-3 px-8 rounded-full transition duration-300">View All Toys</a>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- About Section -->
106
+ <section id="about" class="py-20 bg-gray-50">
107
+ <div class="container mx-auto px-4">
108
+ <div class="flex flex-col md:flex-row items-center">
109
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
110
+ <img src="http://static.photos/toys/640x360/4" alt="Happy kids playing" class="rounded-lg shadow-lg w-full">
111
+ </div>
112
+ <div class="md:w-1/2">
113
+ <h2 class="text-3xl font-bold mb-6 text-secondary">Our Story</h2>
114
+ <p class="text-gray-700 mb-4">Founded in 2010, Playful Wonders has been bringing joy to children and families through carefully selected, high-quality toys that inspire creativity and learning.</p>
115
+ <p class="text-gray-700 mb-6">We believe in the power of play to help children develop essential skills while having fun. That's why every toy in our store is chosen with care by our team of parents and educators.</p>
116
+ <div class="flex flex-wrap gap-4">
117
+ <div class="flex items-center">
118
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-3">
119
+ <i data-feather="check" class="text-primary"></i>
120
+ </div>
121
+ <span class="font-medium">100% Safe Materials</span>
122
+ </div>
123
+ <div class="flex items-center">
124
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-3">
125
+ <i data-feather="check" class="text-primary"></i>
126
+ </div>
127
+ <span class="font-medium">Educational Value</span>
128
+ </div>
129
+ <div class="flex items-center">
130
+ <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-3">
131
+ <i data-feather="check" class="text-primary"></i>
132
+ </div>
133
+ <span class="font-medium">Durable Construction</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- Testimonials -->
142
+ <section class="py-20 bg-white">
143
+ <div class="container mx-auto px-4">
144
+ <h2 class="text-3xl font-bold text-center mb-4 text-primary">What Parents Say</h2>
145
+ <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Hear from happy families who love our toys</p>
146
+
147
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
148
+ <!-- Testimonial 1 -->
149
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
152
+ <img src="http://static.photos/people/200x200/1" alt="Sarah J." class="w-full h-full object-cover">
153
+ </div>
154
+ <div>
155
+ <h4 class="font-bold">Sarah J.</h4>
156
+ <div class="flex text-yellow-400">
157
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
158
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
159
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
160
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
161
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <p class="text-gray-700">"The building blocks set has kept my 5-year-old engaged for hours. The quality is excellent and the pieces fit together perfectly."</p>
166
+ </div>
167
+
168
+ <!-- Testimonial 2 -->
169
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
170
+ <div class="flex items-center mb-4">
171
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
172
+ <img src="http://static.photos/people/200x200/2" alt="Michael T." class="w-full h-full object-cover">
173
+ </div>
174
+ <div>
175
+ <h4 class="font-bold">Michael T.</h4>
176
+ <div class="flex text-yellow-400">
177
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
178
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
179
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
180
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
181
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <p class="text-gray-700">"My daughter won't go to sleep without her plush bunny from Playful Wonders. It's so soft and well-made - we'll be buying more!"</p>
186
+ </div>
187
+
188
+ <!-- Testimonial 3 -->
189
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
190
+ <div class="flex items-center mb-4">
191
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
192
+ <img src="http://static.photos/people/200x200/3" alt="Lisa M." class="w-full h-full object-cover">
193
+ </div>
194
+ <div>
195
+ <h4 class="font-bold">Lisa M.</h4>
196
+ <div class="flex text-yellow-400">
197
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
198
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
199
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
200
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
201
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <p class="text-gray-700">"The STEM kit makes learning so much fun! My son doesn't even realize he's learning science while playing with these experiments."</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Newsletter -->
212
+ <section class="py-16 bg-secondary text-white">
213
+ <div class="container mx-auto px-4 text-center">
214
+ <h2 class="text-3xl font-bold mb-4">Join Our Toy Club!</h2>
215
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Get 10% off your first order and be the first to know about new arrivals and special offers.</p>
216
+ <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4">
217
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary">
218
+ <button type="submit" class="bg-primary hover:bg-opacity-90 font-bold py-3 px-6 rounded-full transition duration-300">Subscribe</button>
219
+ </form>
220
+ </div>
221
+ </section>
222
+ </main>
223
+
224
+ <custom-footer></custom-footer>
225
+
226
+ <script src="components/navbar.js"></script>
227
+ <script src="components/footer.js"></script>
228
+ <script src="script.js"></script>
229
+ <script>feather.replace();</script>
230
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
231
+ </body>
232
+ </html>
script.js ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Initialize feather icons
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ feather.replace();
4
+
5
+ // Smooth scrolling for anchor links
6
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
7
+ anchor.addEventListener('click', function (e) {
8
+ e.preventDefault();
9
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
10
+ behavior: 'smooth'
11
+ });
12
+ });
13
+ });
14
+
15
+ // Simple cart functionality
16
+ const addToCartButtons = document.querySelectorAll('button:contains("Add to Cart")');
17
+ addToCartButtons.forEach(button => {
18
+ button.addEventListener('click', function() {
19
+ // In a real implementation, this would add to cart
20
+ alert('Added to cart!');
21
+ });
22
+ });
23
+ });
style.css CHANGED
@@ -1,28 +1,47 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom animations */
2
+ @keyframes bounce {
3
+ 0%, 100% {
4
+ transform: translateY(0);
5
+ }
6
+ 50% {
7
+ transform: translateY(-10px);
8
+ }
9
  }
10
 
11
+ .bounce-animation {
12
+ animation: bounce 2s infinite;
 
13
  }
14
 
15
+ /* Custom styles that extend Tailwind */
16
+ .hero-clip-path {
17
+ clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
 
 
18
  }
19
 
20
+ .testimonial-quote::before {
21
+ content: '"';
22
+ font-size: 4rem;
23
+ line-height: 1;
24
+ color: rgba(78, 205, 196, 0.2);
25
+ position: absolute;
26
+ top: -1rem;
27
+ left: -1rem;
28
+ z-index: 0;
29
  }
30
 
31
+ /* Custom button hover effects */
32
+ .btn-hover-effect {
33
+ transition: all 0.3s ease;
34
+ transform: translateY(0);
35
  }
36
+
37
+ .btn-hover-effect:hover {
38
+ transform: translateY(-3px);
39
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
40
+ }
41
+
42
+ /* Responsive tweaks */
43
+ @media (max-width: 640px) {
44
+ .hero-heading {
45
+ font-size: 2.5rem;
46
+ }
47
+ }