Hugging Face's logo

Spaces:
huggingfaceninja
/
sparkflow-electrics
Running

App Files Community
huggingfaceninja commited on
Commit
2c7f8c1
·
verified ·
1 Parent(s): 2ae744a

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +283 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Sparkflow Electrics
3
- emoji: 🏆
4
  colorFrom: yellow
5
- colorTo: yellow
 
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: SparkFlow Electrics ⚡
 
3
  colorFrom: yellow
4
+ colorTo: red
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://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,284 @@
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>SparkFlow Electrics - Toronto Electrical Contractors</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <style>
14
+ .gradient-bg {
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ }
17
+ .service-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .service-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .nav-blur {
25
+ backdrop-filter: blur(10px);
26
+ background: rgba(255, 255, 255, 0.9);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <!-- Navigation -->
32
+ <nav class="fixed w-full z-50 nav-blur shadow-sm">
33
+ <div class="container mx-auto px-4">
34
+ <div class="flex justify-between items-center py-4">
35
+ <a href="#" class="flex items-center">
36
+ <img src="https://mpelectric.ca/images/logo-mpe-extended.png" alt="SparkFlow Electrics" class="h-12">
37
+ </a>
38
+
39
+ <!-- Desktop Menu -->
40
+ <div class="hidden lg:flex items-center space-x-8">
41
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">HOME</a>
42
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">ABOUT US</a>
43
+ <div class="relative group">
44
+ <button class="text-gray-700 hover:text-blue-600 font-medium transition-colors flex items-center">
45
+ SERVICES <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i>
46
+ </button>
47
+ <div class="absolute left-0 mt-2 w-80 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
48
+ <div class="grid grid-cols-1 gap-1 p-4">
49
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">FUSE PANEL REPLACEMENT</a>
50
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">LED RETROFITTING</a>
51
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">KNOB & TUBE REPLACEMENT</a>
52
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">BASEMENT RENOVATIONS</a>
53
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">BREAKER PANEL INSTALLATION</a>
54
+ <a href="#" class="px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded transition-colors">GENERATOR PANELS</a>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">CONTACT US</a>
59
+ <a href="#" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium">REQUEST SERVICE</a>
60
+ </div>
61
+
62
+ <!-- Mobile Menu Button -->
63
+ <button class="lg:hidden text-gray-700" id="mobileMenuButton">
64
+ <i data-feather="menu"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </nav>
69
+
70
+ <!-- Hero Section -->
71
+ <section class="gradient-bg text-white pt-24 pb-20">
72
+ <div class="container mx-auto px-4">
73
+ <div class="text-center max-w-4xl mx-auto">
74
+ <h1 class="text-5xl lg:text-6xl font-bold mb-6 leading-tight">
75
+ RESIDENTIAL & COMMERCIAL<br>
76
+ <span class="text-yellow-300">ELECTRICIANS TORONTO</span>
77
+ </h1>
78
+ <p class="text-xl mb-8 opacity-90">Qualified, Licensed & Insured Electrical Contractors Serving the GTA</p>
79
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
80
+ <a href="#" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-lg font-bold text-lg hover:bg-yellow-300 transition-colors shadow-lg">
81
+ SERVICE REQUEST
82
+ </a>
83
+ <a href="tel:14167975991" class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-gray-900 transition-colors">
84
+ <i data-feather="phone" class="inline w-5 h-5 mr-2"></i>
85
+ (416) 797-5991
86
+ </a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Services Grid -->
93
+ <section class="py-20 bg-white">
94
+ <div class="container mx-auto px-4">
95
+ <div class="text-center mb-16">
96
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Our Electrical Services</h2>
97
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Comprehensive electrical solutions for residential and commercial properties across Toronto and the GTA</p>
98
+ </div>
99
+
100
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
101
+ <!-- Service Card 1 -->
102
+ <div class="service-card bg-gray-50 rounded-xl p-6 border border-gray-200">
103
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
104
+ <img src="https://mpelectric.ca/images/electrical-panel.png" alt="Breaker Panel" class="w-10 h-10">
105
+ </div>
106
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Breaker Panel Installation</h3>
107
+ <p class="text-gray-600 mb-4">Upgrade your home with a new circuit breaker panel installation</p>
108
+ <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 inline-flex items-center">
109
+ READ MORE <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
110
+ </a>
111
+ </div>
112
+
113
+ <!-- Service Card 2 -->
114
+ <div class="service-card bg-gray-50 rounded-xl p-6 border border-gray-200">
115
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-4">
116
+ <img src="https://mpelectric.ca/images/electric-meter.png" alt="Service Upgrade" class="w-10 h-10">
117
+ </div>
118
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Electrical Service Upgrades</h3>
119
+ <p class="text-gray-600 mb-4">Upgrade your electrical service from 100 Amp to 200 Amp</p>
120
+ <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 inline-flex items-center">
121
+ READ MORE <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
122
+ </a>
123
+ </div>
124
+
125
+ <!-- Service Card 3 -->
126
+ <div class="service-card bg-gray-50 rounded-xl p-6 border border-gray-200">
127
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
128
+ <img src="https://mpelectric.ca/images/pot-light.png" alt="LED Retrofitting" class="w-10 h-10">
129
+ </div>
130
+ <h3 class="text-xl font-bold text-gray-800 mb-3">LED Retrofitting & Installation</h3>
131
+ <p class="text-gray-600 mb-4">Reduce your energy costs with low consumption LED lighting fixtures</p>
132
+ <a href="#" class="text-blue-600 font-semibold hover:text-blue-700 inline-flex items-center">
133
+ READ MORE <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
134
+ </a>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- About Section -->
141
+ <section class="py-20 bg-gray-100">
142
+ <div class="container mx-auto px-4">
143
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
144
+ <div>
145
+ <h2 class="text-4xl font-bold text-gray-800 mb-6">Welcome to SparkFlow Electrics</h2>
146
+ <p class="text-lg text-gray-600 mb-6">MP Electric is an experienced electrical contracting company located in Toronto, Ontario, serving the Greater Toronto Area (GTA), including Scarborough, Markham, Pickering, Ajax, Whitby, North York, Vaughan and surrounding areas.</p>
147
+ <p class="text-lg text-gray-600 mb-8">At MP Electric, we're on a mission to provide the highest quality of service and establish lasting professional relationships with our clients.</p>
148
+ <div class="flex flex-wrap gap-4">
149
+ <div class="flex items-center">
150
+ <i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>
151
+ <span class="text-gray-700">Licensed & Insured</span>
152
+ </div>
153
+ <div class="flex items-center">
154
+ <i data-feather="clock" class="w-5 h-5 text-blue-500 mr-2"></i>
155
+ <span class="text-gray-700">24/7 Emergency Service</span>
156
+ </div>
157
+ <div class="flex items-center">
158
+ <i data-feather="award" class="w-5 h-5 text-yellow-500 mr-2"></i>
159
+ <span class="text-gray-700">ESA Certified</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <div class="grid grid-cols-2 gap-4">
164
+ <img src="https://mpelectric.ca/images/knob-and-tube.png" alt="Knob & Tube" class="rounded-lg shadow-md">
165
+ <img src="https://mpelectric.ca/images/ac-unit.png" alt="AC Installation" class="rounded-lg shadow-md">
166
+ <img src="https://mpelectric.ca/images/ev-charging-station.png" alt="EV Charging" class="rounded-lg shadow-md">
167
+ <img src="https://mpelectric.ca/images/hot-tub-installation.png" alt="Hot Tub" class="rounded-lg shadow-md">
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Contact Form -->
174
+ <section class="py-20 bg-white">
175
+ <div class="container mx-auto px-4">
176
+ <div class="max-w-4xl mx-auto">
177
+ <div class="text-center mb-12">
178
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Get Your Free Quote</h2>
179
+ <p class="text-xl text-gray-600">Fill out the form below and we'll get back to you within 24 hours</p>
180
+ </div>
181
+
182
+ <form class="bg-gray-50 rounded-2xl p-8 shadow-lg">
183
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
184
+ <div>
185
+ <label class="block text-gray-700 font-medium mb-2">Name *</label>
186
+ <input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
187
+ </div>
188
+ <div>
189
+ <label class="block text-gray-700 font-medium mb-2">Phone Number *</label>
190
+ <input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
191
+ </div>
192
+ <div class="md:col-span-2">
193
+ <label class="block text-gray-700 font-medium mb-2">E-mail Address *</label>
194
+ <input type="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all">
195
+ </div>
196
+ </div>
197
+ <div class="mb-6">
198
+ <label class="block text-gray-700 font-medium mb-2">How can we help? *</label>
199
+ <textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"></textarea>
200
+ </div>
201
+ <div class="flex items-center justify-between">
202
+ <button type="submit" class="bg-blue-600 text-white px-8 py-4 rounded-lg font-bold hover:bg-blue-700 transition-colors shadow-md">
203
+ SEND REQUEST
204
+ </button>
205
+ </div>
206
+ </form>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Footer -->
212
+ <footer class="bg-gray-800 text-white pt-12 pb-8">
213
+ <div class="container mx-auto px-4">
214
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
215
+ <div>
216
+ <img src="https://mpelectric.ca/images/logo-mpe.png" alt="SparkFlow Electrics" class="h-10 mb-4">
217
+ <p class="text-gray-300 mb-2">172 Woodfield Road</p>
218
+ <p class="text-gray-300 mb-4">Toronto, ON M4L 2W7 Canada</p>
219
+ <p class="text-gray-400">ECRA/ESA License #7008307</p>
220
+ </div>
221
+
222
+ <div>
223
+ <h3 class="font-bold text-lg mb-4">Explore</h3>
224
+ <ul class="space-y-2">
225
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Home</a></li>
226
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">About Us</a></li>
227
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Our Services</a></li>
228
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Contact Us</a></li>
229
+ </ul>
230
+ </div>
231
+
232
+ <div>
233
+ <h3 class="font-bold text-lg mb-4">Electrical Services</h4>
234
+ <ul class="space-y-2">
235
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Fuse Panel Replacement</a></li>
236
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">LED Retrofitting</a></li>
237
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">Service Upgrades</a></li>
238
+ <li><a href="#" class="text-gray-300 hover:text-white transition-colors">EV Charging Stations</a></li>
239
+ </ul>
240
+ </div>
241
+
242
+ <div>
243
+ <h3 class="font-bold text-lg mb-4">Certifications</h3>
244
+ <div class="flex space-x-4">
245
+ <img src="https://mpelectric.ca/images/footer/affiliate-logo-black-esa.png" alt="ESA" class="h-12 bg-white p-2 rounded">
246
+ <img src="https://mpelectric.ca/images/footer/affiliate-logo-black-ecra.png" alt="ECRA" class="h-12 bg-white p-2 rounded">
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="border-t border-gray-700 pt-8 text-center">
252
+ <p class="text-gray-400">&copy; 2025 SparkFlow Electrics. All Rights Reserved.</p>
253
+ </div>
254
+ </div>
255
+ </footer>
256
+
257
+ <script>
258
+ feather.replace();
259
+
260
+ // Mobile menu functionality
261
+ document.getElementById('mobileMenuButton').addEventListener('click', function() {
262
+ // Add mobile menu implementation here
263
+ alert('Mobile menu would open here');
264
+ });
265
+
266
+ // Vanta.js background animation
267
+ VANTA.NET({
268
+ el: "#vanta-bg",
269
+ mouseControls: true,
270
+ touchControls: true,
271
+ gyroControls: false,
272
+ minHeight: 200.00,
273
+ minWidth: 200.00,
274
+ scale: 1.00,
275
+ scaleMobile: 1.00,
276
+ color: 0x3b82f6,
277
+ backgroundColor: 0xffffff,
278
+ points: 12.00,
279
+ maxDistance: 22.00,
280
+ spacing: 18.00
281
+ });
282
+ </script>
283
+ </body>
284
  </html>