Hugging Face's logo

Spaces:
Boobs00
/
low-pressure-scottzilla-security-systems
Running

App Files Community
Boobs00 commited on
Commit
dcf9265
·
verified ·
1 Parent(s): 7475f36

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +966 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Low Pressure Scottzilla Security Systems
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: green
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: low-pressure-scottzilla-security-systems
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,966 @@
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>Low Pressure Security | Berkeley's Community-First Security Partner</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#E63946',
15
+ dark: '#1A1A1D',
16
+ charcoal: '#252525',
17
+ light: '#F5F5F5',
18
+ berkeley: '#003262',
19
+ scottzilla: '#2563EB'
20
+ },
21
+ fontFamily: {
22
+ sans: ['Inter', 'sans-serif'],
23
+ title: ['Oswald', 'sans-serif'],
24
+ tech: ['Rajdhani', 'sans-serif']
25
+ },
26
+ animation: {
27
+ 'bounce-slow': 'bounce 3s infinite',
28
+ 'pulse-slow': 'pulse 5s infinite',
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style>
35
+ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap');
36
+
37
+ body {
38
+ font-family: 'Inter', sans-serif;
39
+ background-color: #1A1A1D;
40
+ color: #F5F5F5;
41
+ scroll-behavior: smooth;
42
+ }
43
+
44
+ .hero-gradient {
45
+ background: linear-gradient(135deg, rgba(26, 26, 29, 0.9) 0%, rgba(38, 38, 38, 0.7) 100%);
46
+ }
47
+
48
+ .tech-gradient {
49
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(30, 58, 138, 0.8) 100%);
50
+ }
51
+
52
+ .bike-icon {
53
+ transform: rotate(15deg);
54
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
55
+ }
56
+
57
+ .security-card {
58
+ transition: all 0.3s ease;
59
+ border-bottom: 3px solid transparent;
60
+ }
61
+
62
+ .security-card:hover {
63
+ transform: translateY(-5px);
64
+ box-shadow: 0 10px 20px rgba(0,0,0,0.3);
65
+ border-bottom: 3px solid #E63946;
66
+ }
67
+
68
+ .tech-card:hover {
69
+ border-bottom: 3px solid #2563EB;
70
+ }
71
+
72
+ .nav-link::after {
73
+ content: '';
74
+ display: block;
75
+ width: 0;
76
+ height: 2px;
77
+ background: #E63946;
78
+ transition: width 0.3s;
79
+ }
80
+
81
+ .nav-link:hover::after {
82
+ width: 100%;
83
+ }
84
+
85
+ .berkeley-landmark {
86
+ background-blend-mode: overlay;
87
+ }
88
+
89
+ .tech-landmark {
90
+ background-blend-mode: overlay;
91
+ }
92
+
93
+ .testimonial-card {
94
+ transition: all 0.3s ease;
95
+ }
96
+
97
+ .testimonial-card:hover {
98
+ transform: translateY(-5px);
99
+ box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2);
100
+ }
101
+
102
+ .tech-testimonial:hover {
103
+ box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
104
+ }
105
+
106
+ .form-input:focus {
107
+ box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.3);
108
+ }
109
+
110
+ .tech-input:focus {
111
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
112
+ }
113
+
114
+ @keyframes float {
115
+ 0% { transform: translateY(0px); }
116
+ 50% { transform: translateY(-10px); }
117
+ 100% { transform: translateY(0px); }
118
+ }
119
+
120
+ .floating {
121
+ animation: float 6s ease-in-out infinite;
122
+ }
123
+
124
+ /* Logo styling */
125
+ .logo-container {
126
+ display: flex;
127
+ align-items: center;
128
+ }
129
+
130
+ .low-pressure-logo {
131
+ width: 40px;
132
+ height: 40px;
133
+ background: #E63946;
134
+ border-radius: 50%;
135
+ display: flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+ margin-right: 10px;
139
+ }
140
+
141
+ .scottzilla-logo {
142
+ width: 40px;
143
+ height: 40px;
144
+ background: #2563EB;
145
+ border-radius: 8px;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+ margin-right: 10px;
150
+ transform: rotate(45deg);
151
+ }
152
+
153
+ .scottzilla-logo-inner {
154
+ transform: rotate(-45deg);
155
+ font-weight: bold;
156
+ color: white;
157
+ }
158
+
159
+ .partner-badge {
160
+ position: absolute;
161
+ bottom: -10px;
162
+ right: -10px;
163
+ background: #2563EB;
164
+ color: white;
165
+ padding: 5px 10px;
166
+ border-radius: 20px;
167
+ font-size: 12px;
168
+ font-weight: bold;
169
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
170
+ }
171
+ </style>
172
+ </head>
173
+ <body class="min-h-screen">
174
+ <!-- Navigation -->
175
+ <nav class="bg-dark border-b border-gray-800 fixed w-full z-50">
176
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
177
+ <div class="flex items-center justify-between h-16">
178
+ <div class="flex items-center">
179
+ <div class="flex-shrink-0">
180
+ <div class="flex items-center">
181
+ <div class="logo-container relative">
182
+ <div class="low-pressure-logo">
183
+ <i class="fas fa-shield-alt text-white text-xl"></i>
184
+ </div>
185
+ <span class="text-white font-title text-xl tracking-tight">LOW PRESSURE <span class="text-primary">SECURITY</span></span>
186
+ <div class="partner-badge">
187
+ <span>+ SCOTTZILLA</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ <div class="hidden md:block">
194
+ <div class="ml-10 flex items-baseline space-x-8">
195
+ <a href="#home" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Home</a>
196
+ <a href="#about" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Our Mission</a>
197
+ <a href="#services" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Services</a>
198
+ <a href="#alliance" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Alliance</a>
199
+ <a href="#contact" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Contact</a>
200
+ </div>
201
+ </div>
202
+ <div class="md:hidden">
203
+ <button class="mobile-menu-button p-2 rounded-md text-light hover:text-primary focus:outline-none">
204
+ <i class="fas fa-bars text-xl"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </nav>
210
+
211
+ <!-- Mobile Menu -->
212
+ <div class="mobile-menu hidden md:hidden bg-charcoal fixed w-full z-40 mt-16">
213
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
214
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Home</a>
215
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Our Mission</a>
216
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Services</a>
217
+ <a href="#alliance" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Alliance</a>
218
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Contact</a>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Hero Section -->
223
+ <section id="home" class="relative pt-24 pb-32 md:pt-32 md:pb-48 flex items-center justify-center">
224
+ <div class="absolute inset-0 overflow-hidden">
225
+ <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Berkeley Hills" class="w-full h-full object-cover berkeley-landmark">
226
+ <div class="absolute inset-0 hero-gradient"></div>
227
+ </div>
228
+
229
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
230
+ <div class="text-center">
231
+ <div class="flex justify-center mb-8">
232
+ <div class="flex items-center">
233
+ <div class="low-pressure-logo">
234
+ <i class="fas fa-shield-alt text-white text-xl"></i>
235
+ </div>
236
+ <span class="text-white text-2xl mx-4">+</span>
237
+ <div class="scottzilla-logo">
238
+ <div class="scottzilla-logo-inner">SZ</div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <h1 class="text-4xl md:text-6xl font-title font-bold tracking-tight text-light mb-6">
243
+ <span class="text-primary">COMMUNITY</span> MEETS <span class="text-scottzilla">TECHNOLOGY</span>
244
+ </h1>
245
+ <p class="mt-6 text-lg md:text-xl max-w-3xl mx-auto text-gray-300">
246
+ Berkeley's most trusted security alliance since 2008. Combining neighborhood-focused protection with cutting-edge technology.
247
+ </p>
248
+ <div class="mt-10 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
249
+ <a href="#contact" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-red-600 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105">
250
+ Get Protected
251
+ </a>
252
+ <a href="#alliance" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-light bg-charcoal hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105">
253
+ Our Partnership
254
+ </a>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
260
+ <i class="fas fa-bicycle bike-icon text-primary text-4xl animate-bounce-slow"></i>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Stats Section -->
265
+ <section class="py-12 bg-gradient-to-r from-primary to-scottzilla">
266
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
267
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
268
+ <div class="p-4">
269
+ <div class="text-4xl font-title font-bold text-white">15+</div>
270
+ <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Years Serving Berkeley</div>
271
+ </div>
272
+ <div class="p-4">
273
+ <div class="text-4xl font-title font-bold text-white">98%</div>
274
+ <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Client Retention</div>
275
+ </div>
276
+ <div class="p-4">
277
+ <div class="text-4xl font-title font-bold text-white">85%</div>
278
+ <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Local Employees</div>
279
+ </div>
280
+ <div class="p-4">
281
+ <div class="text-4xl font-title font-bold text-white">24/7</div>
282
+ <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Emergency Response</div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <!-- Mission Statement -->
289
+ <section id="about" class="py-20 bg-charcoal">
290
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
291
+ <div class="lg:text-center">
292
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Our Philosophy</h2>
293
+ <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl">
294
+ Strength Through <span class="text-primary">Community</span> & <span class="text-scottzilla">Innovation</span>
295
+ </p>
296
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
297
+ We believe security shouldn't come at the cost of community trust or environmental responsibility.
298
+ </p>
299
+ </div>
300
+
301
+ <div class="mt-20">
302
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
303
+ <div class="pt-6">
304
+ <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card">
305
+ <div class="-mt-6">
306
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">
307
+ <i class="fas fa-hands-helping text-xl"></i>
308
+ </div>
309
+ <h3 class="mt-8 text-lg font-title font-medium text-light tracking-tight">Neighborhood Watch 2.0</h3>
310
+ <p class="mt-5 text-base text-gray-300">
311
+ Our hybrid approach combines trained professionals with engaged community members for comprehensive coverage.
312
+ </p>
313
+ <div class="mt-6">
314
+ <a href="#" class="text-primary text-sm font-medium inline-flex items-center">
315
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
316
+ </a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="pt-6">
323
+ <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card tech-card">
324
+ <div class="-mt-6">
325
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-scottzilla text-white mx-auto">
326
+ <i class="fas fa-robot text-xl"></i>
327
+ </div>
328
+ <h3 class="mt-8 text-lg font-tech font-medium text-light tracking-tight">AI Surveillance</h3>
329
+ <p class="mt-5 text-base text-gray-300">
330
+ Scottzilla's smart monitoring detects threats while respecting privacy, reducing false alarms by 87%.
331
+ </p>
332
+ <div class="mt-6">
333
+ <a href="#" class="text-scottzilla text-sm font-medium inline-flex items-center">
334
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
335
+ </a>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="pt-6">
342
+ <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card">
343
+ <div class="-mt-6">
344
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">
345
+ <i class="fas fa-hand-holding-usd text-xl"></i>
346
+ </div>
347
+ <h3 class="mt-8 text-lg font-title font-medium text-light tracking-tight">Local Investment</h3>
348
+ <p class="mt-5 text-base text-gray-300">
349
+ 85% of our team lives within Berkeley city limits, and we reinvest 15% of profits into community safety programs.
350
+ </p>
351
+ <div class="mt-6">
352
+ <a href="#" class="text-primary text-sm font-medium inline-flex items-center">
353
+ Learn more <i class="fas fa-arrow-right ml-1"></i>
354
+ </a>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- Services -->
365
+ <section id="services" class="py-20 bg-dark">
366
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
367
+ <div class="lg:text-center mb-16">
368
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">What We Offer</h2>
369
+ <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl">
370
+ Comprehensive <span class="text-primary">Protection</span> Solutions
371
+ </p>
372
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
373
+ Tailored security services for Berkeley homes, businesses, and institutions.
374
+ </p>
375
+ </div>
376
+
377
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
378
+ <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl">
379
+ <div class="p-6">
380
+ <div class="flex items-center">
381
+ <div class="flex-shrink-0 bg-primary p-3 rounded-md">
382
+ <i class="fas fa-home text-white text-xl"></i>
383
+ </div>
384
+ <div class="ml-4">
385
+ <h3 class="text-lg font-title font-medium text-light">Residential Security</h3>
386
+ </div>
387
+ </div>
388
+ <p class="mt-4 text-gray-300">
389
+ 24/7 monitoring, smart home integration, and neighborhood watch coordination to protect your family and property.
390
+ </p>
391
+ <ul class="mt-6 space-y-3">
392
+ <li class="flex items-start">
393
+ <div class="flex-shrink-0">
394
+ <i class="fas fa-check-circle text-primary"></i>
395
+ </div>
396
+ <p class="ml-3 text-gray-300">Customized home security assessments</p>
397
+ </li>
398
+ <li class="flex items-start">
399
+ <div class="flex-shrink-0">
400
+ <i class="fas fa-check-circle text-primary"></i>
401
+ </div>
402
+ <p class="ml-3 text-gray-300">Bicycle patrols for low-impact surveillance</p>
403
+ </li>
404
+ <li class="flex items-start">
405
+ <div class="flex-shrink-0">
406
+ <i class="fas fa-check-circle text-primary"></i>
407
+ </div>
408
+ <p class="ml-3 text-gray-300">Emergency response within 5 minutes</p>
409
+ </li>
410
+ </ul>
411
+ <div class="mt-6">
412
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
413
+ Get a Quote
414
+ </a>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl">
420
+ <div class="p-6">
421
+ <div class="flex items-center">
422
+ <div class="flex-shrink-0 bg-scottzilla p-3 rounded-md">
423
+ <i class="fas fa-lock text-white text-xl"></i>
424
+ </div>
425
+ <div class="ml-4">
426
+ <h3 class="text-lg font-tech font-medium text-light">Cyber Protection</h3>
427
+ </div>
428
+ </div>
429
+ <p class="mt-4 text-gray-300">
430
+ Scottzilla's advanced digital security solutions protect your online assets and smart home devices.
431
+ </p>
432
+ <ul class="mt-6 space-y-3">
433
+ <li class="flex items-start">
434
+ <div class="flex-shrink-0">
435
+ <i class="fas fa-check-circle text-scottzilla"></i>
436
+ </div>
437
+ <p class="ml-3 text-gray-300">Network vulnerability scanning</p>
438
+ </li>
439
+ <li class="flex items-start">
440
+ <div class="flex-shrink-0">
441
+ <i class="fas fa-check-circle text-scottzilla"></i>
442
+ </div>
443
+ <p class="ml-3 text-gray-300">IoT device protection</p>
444
+ </li>
445
+ <li class="flex items-start">
446
+ <div class="flex-shrink-0">
447
+ <i class="fas fa-check-circle text-scottzilla"></i>
448
+ </div>
449
+ <p class="ml-3 text-gray-300">Dark web monitoring</p>
450
+ </li>
451
+ </ul>
452
+ <div class="mt-6">
453
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-scottzilla hover:bg-blue-700 transition duration-300">
454
+ Get a Quote
455
+ </a>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl">
461
+ <div class="p-6">
462
+ <div class="flex items-center">
463
+ <div class="flex-shrink-0 bg-primary p-3 rounded-md">
464
+ <i class="fas fa-university text-white text-xl"></i>
465
+ </div>
466
+ <div class="ml-4">
467
+ <h3 class="text-lg font-title font-medium text-light">Campus Security</h3>
468
+ </div>
469
+ </div>
470
+ <p class="mt-4 text-gray-300">
471
+ Specialized protection for educational institutions that balances safety with an open learning environment.
472
+ </p>
473
+ <ul class="mt-6 space-y-3">
474
+ <li class="flex items-start">
475
+ <div class="flex-shrink-0">
476
+ <i class="fas fa-check-circle text-primary"></i>
477
+ </div>
478
+ <p class="ml-3 text-gray-300">De-escalation trained officers</p>
479
+ </li>
480
+ <li class="flex items-start">
481
+ <div class="flex-shrink-0">
482
+ <i class="fas fa-check-circle text-primary"></i>
483
+ </div>
484
+ <p class="ml-3 text-gray-300">Student safety workshops</p>
485
+ </li>
486
+ <li class="flex items-start">
487
+ <div class="flex-shrink-0">
488
+ <i class="fas fa-check-circle text-primary"></i>
489
+ </div>
490
+ <p class="ml-3 text-gray-300">Bicycle patrol units</p>
491
+ </li>
492
+ </ul>
493
+ <div class="mt-6">
494
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
495
+ Get a Quote
496
+ </a>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl">
502
+ <div class="p-6">
503
+ <div class="flex items-center">
504
+ <div class="flex-shrink-0 bg-scottzilla p-3 rounded-md">
505
+ <i class="fas fa-video text-white text-xl"></i>
506
+ </div>
507
+ <div class="ml-4">
508
+ <h3 class="text-lg font-tech font-medium text-light">Smart Surveillance</h3>
509
+ </div>
510
+ </div>
511
+ <p class="mt-4 text-gray-300">
512
+ AI-powered camera systems that learn normal patterns and alert only to genuine threats.
513
+ </p>
514
+ <ul class="mt-6 space-y-3">
515
+ <li class="flex items-start">
516
+ <div class="flex-shrink-0">
517
+ <i class="fas fa-check-circle text-scottzilla"></i>
518
+ </div>
519
+ <p class="ml-3 text-gray-300">Facial recognition (opt-in)</p>
520
+ </li>
521
+ <li class="flex items-start">
522
+ <div class="flex-shrink-0">
523
+ <i class="fas fa-check-circle text-scottzilla"></i>
524
+ </div>
525
+ <p class="ml-3 text-gray-300">License plate recognition</p>
526
+ </li>
527
+ <li class="flex items-start">
528
+ <div class="flex-shrink-0">
529
+ <i class="fas fa-check-circle text-scottzilla"></i>
530
+ </div>
531
+ <p class="ml-3 text-gray-300">Predictive threat analysis</p>
532
+ </li>
533
+ </ul>
534
+ <div class="mt-6">
535
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-scottzilla hover:bg-blue-700 transition duration-300">
536
+ Get a Quote
537
+ </a>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </section>
544
+
545
+ <!-- Alliance Section -->
546
+ <section id="alliance" class="py-20 bg-charcoal">
547
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
548
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
549
+ <div class="lg:col-span-6 relative">
550
+ <img class="w-full rounded-lg shadow-xl floating" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Security professionals meeting">
551
+ <div class="absolute -bottom-6 -right-6 bg-primary p-4 rounded-lg shadow-lg hidden md:block">
552
+ <i class="fas fa-handshake text-white text-4xl"></i>
553
+ </div>
554
+ </div>
555
+ <div class="mt-12 lg:mt-0 lg:col-span-6">
556
+ <div class="sm:max-w-md lg:px-0 lg:pr-8">
557
+ <h2 class="text-3xl font-title font-bold tracking-tight text-light sm:text-4xl">
558
+ The <span class="text-primary">Low Pressure</span> + <span class="text-scottzilla">Scottzilla</span> Alliance
559
+ </h2>
560
+ <p class="mt-3 text-lg text-gray-300">
561
+ Our strategic partnership combines cutting-edge technology with deep community knowledge for unparalleled protection.
562
+ </p>
563
+ <div class="mt-8">
564
+ <div class="flex items-start">
565
+ <div class="flex-shrink-0 bg-dark rounded-md p-3">
566
+ <i class="fas fa-network-wired text-primary text-xl"></i>
567
+ </div>
568
+ <div class="ml-4">
569
+ <h3 class="text-lg font-title font-medium text-light">Integrated Technology</h3>
570
+ <p class="mt-2 text-base text-gray-300">
571
+ Access to Scottzilla's advanced monitoring systems while maintaining our community-focused approach.
572
+ </p>
573
+ </div>
574
+ </div>
575
+ <div class="mt-8 flex items-start">
576
+ <div class="flex-shrink-0 bg-dark rounded-md p-3">
577
+ <i class="fas fa-users text-primary text-xl"></i>
578
+ </div>
579
+ <div class="ml-4">
580
+ <h3 class="text-lg font-title font-medium text-light">Shared Expertise</h3>
581
+ <p class="mt-2 text-base text-gray-300">
582
+ Joint training programs that combine Scottzilla's technical excellence with our neighborhood engagement strategies.
583
+ </p>
584
+ </div>
585
+ </div>
586
+ <div class="mt-8 flex items-start">
587
+ <div class="flex-shrink-0 bg-dark rounded-md p-3">
588
+ <i class="fas fa-shield-alt text-primary text-xl"></i>
589
+ </div>
590
+ <div class="ml-4">
591
+ <h3 class="text-lg font-title font-medium text-light">Enhanced Coverage</h3>
592
+ <p class="mt-2 text-base text-gray-300">
593
+ Expanded resources for large-scale security needs without sacrificing our local touch.
594
+ </p>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ <div class="mt-8">
599
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-primary to-scottzilla hover:opacity-90 transition duration-300">
600
+ Learn About Our Partnership
601
+ </a>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </section>
608
+
609
+ <!-- Testimonials -->
610
+ <section class="py-20 bg-dark">
611
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
612
+ <div class="lg:text-center mb-16">
613
+ <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Community Voices</h2>
614
+ <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl">
615
+ What Berkeley Says About Us
616
+ </p>
617
+ </div>
618
+
619
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
620
+ <div class="bg-charcoal rounded-lg p-8 testimonial-card">
621
+ <div class="flex items-center mb-4">
622
+ <div class="flex-shrink-0">
623
+ <i class="fas fa-quote-left text-primary text-2xl"></i>
624
+ </div>
625
+ <div class="ml-4">
626
+ <div class="flex items-center">
627
+ <div class="flex-shrink-0 h-10 w-10">
628
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="">
629
+ </div>
630
+ <div class="ml-3">
631
+ <p class="text-sm font-medium text-light">Sarah J.</p>
632
+ <p class="text-sm text-gray-400">North Berkeley Resident</p>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ <p class="text-gray-300">
638
+ "The bicycle patrols make me feel safe without making our neighborhood feel like a police state. It's security with a human touch."
639
+ </p>
640
+ <div class="mt-4 flex">
641
+ <i class="fas fa-star text-yellow-400"></i>
642
+ <i class="fas fa-star text-yellow-400"></i>
643
+ <i class="fas fa-star text-yellow-400"></i>
644
+ <i class="fas fa-star text-yellow-400"></i>
645
+ <i class="fas fa-star text-yellow-400"></i>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="bg-charcoal rounded-lg p-8 testimonial-card tech-testimonial">
650
+ <div class="flex items-center mb-4">
651
+ <div class="flex-shrink-0">
652
+ <i class="fas fa-quote-left text-scottzilla text-2xl"></i>
653
+ </div>
654
+ <div class="ml-4">
655
+ <div class="flex items-center">
656
+ <div class="flex-shrink-0 h-10 w-10">
657
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1987&q=80" alt="">
658
+ </div>
659
+ <div class="ml-3">
660
+ <p class="text-sm font-medium text-light">Marcus T.</p>
661
+ <p class="text-sm text-gray-400">Telegraph Ave Business Owner</p>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ <p class="text-gray-300">
667
+ "Scottzilla's AI cameras reduced false alarms by 90% while catching real threats. The perfect complement to Low Pressure's human touch."
668
+ </p>
669
+ <div class="mt-4 flex">
670
+ <i class="fas fa-star text-yellow-400"></i>
671
+ <i class="fas fa-star text-yellow-400"></i>
672
+ <i class="fas fa-star text-yellow-400"></i>
673
+ <i class="fas fa-star text-yellow-400"></i>
674
+ <i class="fas fa-star text-yellow-400"></i>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="bg-charcoal rounded-lg p-8 testimonial-card">
679
+ <div class="flex items-center mb-4">
680
+ <div class="flex-shrink-0">
681
+ <i class="fas fa-quote-left text-primary text-2xl"></i>
682
+ </div>
683
+ <div class="ml-4">
684
+ <div class="flex items-center">
685
+ <div class="flex-shrink-0 h-10 w-10">
686
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="">
687
+ </div>
688
+ <div class="ml-3">
689
+ <p class="text-sm font-medium text-light">Dr. Elena R.</p>
690
+ <p class="text-sm text-gray-400">UC Berkeley Faculty</p>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ <p class="text-gray-300">
696
+ "When we needed event security that wouldn't intimidate international students, Low Pressure delivered perfectly. Their approach is brilliant."
697
+ </p>
698
+ <div class="mt-4 flex">
699
+ <i class="fas fa-star text-yellow-400"></i>
700
+ <i class="fas fa-star text-yellow-400"></i>
701
+ <i class="fas fa-star text-yellow-400"></i>
702
+ <i class="fas fa-star text-yellow-400"></i>
703
+ <i class="fas fa-star text-yellow-400"></i>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="mt-12 text-center">
709
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
710
+ Read More Testimonials
711
+ </a>
712
+ </div>
713
+ </div>
714
+ </section>
715
+
716
+ <!-- CTA Section -->
717
+ <section id="contact" class="relative py-20 bg-gradient-to-r from-dark to-charcoal overflow-hidden">
718
+ <div class="absolute inset-0 opacity-10">
719
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80')] bg-cover bg-center"></div>
720
+ </div>
721
+ <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
722
+ <div class="text-center">
723
+ <h2 class="text-3xl font-title font-bold tracking-tight text-light sm:text-4xl">
724
+ Ready to Experience <span class="text-primary">Community-First</span> Security?
725
+ </h2>
726
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
727
+ Contact us today for a free consultation tailored to your Berkeley property or business.
728
+ </p>
729
+ <div class="mt-12">
730
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
731
+ <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105">
732
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">
733
+ <i class="fas fa-phone-alt text-xl"></i>
734
+ </div>
735
+ <h3 class="mt-6 text-lg font-title font-medium text-light">Call Us</h3>
736
+ <p class="mt-2 text-base text-gray-300">
737
+ (510) 555-0199
738
+ </p>
739
+ <p class="mt-1 text-sm text-gray-400">
740
+ 24/7 Emergency Line
741
+ </p>
742
+ <div class="mt-4">
743
+ <a href="tel:5105550199" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
744
+ Call Now
745
+ </a>
746
+ </div>
747
+ </div>
748
+
749
+ <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105">
750
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">
751
+ <i class="fas fa-envelope text-xl"></i>
752
+ </div>
753
+ <h3 class="mt-6 text-lg font-title font-medium text-light">Email Us</h3>
754
+ <p class="mt-2 text-base text-gray-300">
755
+ contact@lowpressure.berkeley
756
+ </p>
757
+ <p class="mt-1 text-sm text-gray-400">
758
+ Response within 2 hours
759
+ </p>
760
+ <div class="mt-4">
761
+ <a href="mailto:contact@lowpressure.berkeley" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
762
+ Email Now
763
+ </a>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105">
768
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto">
769
+ <i class="fas fa-map-marker-alt text-xl"></i>
770
+ </div>
771
+ <h3 class="mt-6 text-lg font-title font-medium text-light">Visit Us</h3>
772
+ <p class="mt-2 text-base text-gray-300">
773
+ 2120 University Ave<br>
774
+ Berkeley, CA 94704
775
+ </p>
776
+ <p class="mt-1 text-sm text-gray-400">
777
+ By appointment only
778
+ </p>
779
+ <div class="mt-4">
780
+ <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300">
781
+ Schedule Visit
782
+ </a>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ <div class="mt-12 max-w-2xl mx-auto">
788
+ <form class="space-y-6">
789
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
790
+ <div>
791
+ <label for="first-name" class="sr-only">First name</label>
792
+ <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="First name">
793
+ </div>
794
+ <div>
795
+ <label for="last-name" class="sr-only">Last name</label>
796
+ <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Last name">
797
+ </div>
798
+ <div class="sm:col-span-2">
799
+ <label for="email" class="sr-only">Email</label>
800
+ <input type="email" name="email" id="email" autocomplete="email" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Email">
801
+ </div>
802
+ <div class="sm:col-span-2">
803
+ <label for="phone" class="sr-only">Phone</label>
804
+ <input type="tel" name="phone" id="phone" autocomplete="tel" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Phone">
805
+ </div>
806
+ <div class="sm:col-span-2">
807
+ <label for="service" class="sr-only">Service Needed</label>
808
+ <select id="service" name="service" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary">
809
+ <option>Select a service</option>
810
+ <option>Residential Security</option>
811
+ <option>Commercial Protection</option>
812
+ <option>Campus Security</option>
813
+ <option>Event Security</option>
814
+ <option>Cyber Protection</option>
815
+ <option>Smart Surveillance</option>
816
+ <option>Other</option>
817
+ </select>
818
+ </div>
819
+ <div class="sm:col-span-2">
820
+ <label for="message" class="sr-only">Message</label>
821
+ <textarea id="message" name="message" rows="4" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="How can we help?"></textarea>
822
+ </div>
823
+ </div>
824
+ <div class="mt-6">
825
+ <button type="submit" class="inline-flex items-center justify-center w-full rounded-md border border-transparent bg-primary px-6 py-3 text-base font-medium text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition duration-300 transform hover:scale-105">
826
+ <i class="fas fa-paper-plane mr-2"></i> Send Message
827
+ </button>
828
+ </div>
829
+ </form>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </section>
834
+
835
+ <!-- Footer -->
836
+ <footer class="bg-dark border-t border-gray-800">
837
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
838
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
839
+ <div class="col-span-2">
840
+ <div class="flex items-center">
841
+ <div class="low-pressure-logo">
842
+ <i class="fas fa-shield-alt text-white text-xl"></i>
843
+ </div>
844
+ <span class="text-white font-title text-xl ml-2 tracking-tight">LOW PRESSURE <span class="text-primary">SECURITY</span></span>
845
+ </div>
846
+ <div class="flex items-center mt-4">
847
+ <div class="scottzilla-logo">
848
+ <div class="scottzilla-logo-inner">SZ</div>
849
+ </div>
850
+ <span class="text-white font-tech text-xl ml-2 tracking-tight"><span class="text-scottzilla">SCOTTZILLA</span> SYSTEMS</span>
851
+ </div>
852
+ <p class="mt-4 text-sm text-gray-300">
853
+ Berkeley's community-first security partner since 2008. Combining local knowledge with professional protection.
854
+ </p>
855
+ <div class="mt-6 flex space-x-6">
856
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">
857
+ <i class="fab fa-twitter text-xl"></i>
858
+ </a>
859
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">
860
+ <i class="fab fa-facebook text-xl"></i>
861
+ </a>
862
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">
863
+ <i class="fab fa-instagram text-xl"></i>
864
+ </a>
865
+ <a href="#" class="text-gray-400 hover:text-primary transition duration-300">
866
+ <i class="fab fa-linkedin text-xl"></i>
867
+ </a>
868
+ </div>
869
+ </div>
870
+ <div>
871
+ <h3 class="text-sm font-title font-semibold text-light tracking-wider uppercase">Services</h3>
872
+ <div class="mt-4 space-y-4">
873
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Residential Security</a>
874
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Commercial Protection</a>
875
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Campus Security</a>
876
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Cyber Protection</a>
877
+ </div>
878
+ </div>
879
+ <div>
880
+ <h3 class="text-sm font-title font-semibold text-light tracking-wider uppercase">Company</h3>
881
+ <div class="mt-4 space-y-4">
882
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">About Us</a>
883
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Our Team</a>
884
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Careers</a>
885
+ <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Community Impact</a>
886
+ </div>
887
+ </div>
888
+ </div>
889
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
890
+ <p class="text-base text-gray-400">
891
+ &copy; 2023 Low Pressure Security + Scottzilla Systems. All rights reserved.
892
+ </p>
893
+ <div class="mt-4 md:mt-0 flex space-x-6">
894
+ <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Privacy Policy</a>
895
+ <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Terms of Service</a>
896
+ <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Accessibility</a>
897
+ </div>
898
+ </div>
899
+ </div>
900
+ </footer>
901
+
902
+ <!-- Back to Top Button -->
903
+ <button id="back-to-top" class="hidden fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition duration-300 z-50">
904
+ <i class="fas fa-arrow-up text-xl"></i>
905
+ </button>
906
+
907
+ <script>
908
+ // Mobile menu toggle
909
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
910
+ const mobileMenu = document.querySelector('.mobile-menu');
911
+
912
+ mobileMenuButton.addEventListener('click', () => {
913
+ mobileMenu.classList.toggle('hidden');
914
+ });
915
+
916
+ // Close mobile menu when clicking a link
917
+ const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
918
+ mobileMenuLinks.forEach(link => {
919
+ link.addEventListener('click', () => {
920
+ mobileMenu.classList.add('hidden');
921
+ });
922
+ });
923
+
924
+ // Smooth scrolling for anchor links
925
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
926
+ anchor.addEventListener('click', function (e) {
927
+ e.preventDefault();
928
+
929
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
930
+ behavior: 'smooth'
931
+ });
932
+ });
933
+ });
934
+
935
+ // Back to top button
936
+ const backToTopButton = document.getElementById('back-to-top');
937
+
938
+ window.addEventListener('scroll', () => {
939
+ if (window.pageYOffset > 300) {
940
+ backToTopButton.classList.remove('hidden');
941
+ } else {
942
+ backToTopButton.classList.add('hidden');
943
+ }
944
+ });
945
+
946
+ backToTopButton.addEventListener('click', () => {
947
+ window.scrollTo({
948
+ top: 0,
949
+ behavior: 'smooth'
950
+ });
951
+ });
952
+
953
+ // Form submission
954
+ const contactForm = document.querySelector('form');
955
+ if (contactForm) {
956
+ contactForm.addEventListener('submit', (e) => {
957
+ e.preventDefault();
958
+
959
+ // Here you would typically send the form data to a server
960
+ alert('Thank you for your message! We will contact you soon.');
961
+ contactForm.reset();
962
+ });
963
+ }
964
+ </script>
965
+ <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=Boobs00/low-pressure-scottzilla-security-systems" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
966
+ </html>
prompts.txt ADDED
File without changes