Hugging Face's logo

Spaces:
SVINT
/
sbscprt-v1
Running

App Files Community
SVINT commited on
Commit
f147f2a
·
verified ·
1 Parent(s): 447c8a9

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +840 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sbscprt V1
3
- emoji: 🌖
4
- colorFrom: blue
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: sbscprt-v1
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,840 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SBSCRPT | Integrated Business Solutions</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
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ obsidian: '#0a0a0a',
16
+ primary: '#6d28d9',
17
+ secondary: '#10b981',
18
+ accent: '#3b82f6',
19
+ },
20
+ animation: {
21
+ 'float': 'float 6s ease-in-out infinite',
22
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
23
+ },
24
+ keyframes: {
25
+ float: {
26
+ '0%, 100%': { transform: 'translateY(0)' },
27
+ '50%': { transform: 'translateY(-10px)' },
28
+ }
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style>
35
+ .gradient-text {
36
+ background: linear-gradient(90deg, #6d28d9, #3b82f6, #10b981);
37
+ -webkit-background-clip: text;
38
+ background-clip: text;
39
+ color: transparent;
40
+ }
41
+ .service-card:hover {
42
+ transform: translateY(-5px);
43
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
44
+ }
45
+ .chatbox {
46
+ box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
47
+ }
48
+ .nav-link::after {
49
+ content: '';
50
+ display: block;
51
+ width: 0;
52
+ height: 2px;
53
+ background: #6d28d9;
54
+ transition: width .3s;
55
+ }
56
+ .nav-link:hover::after {
57
+ width: 100%;
58
+ }
59
+ .fade-in {
60
+ animation: fadeIn 1s ease-in;
61
+ }
62
+ @keyframes fadeIn {
63
+ from { opacity: 0; }
64
+ to { opacity: 1; }
65
+ }
66
+ </style>
67
+ </head>
68
+ <body class="bg-obsidian text-gray-200 min-h-screen font-sans antialiased">
69
+ <!-- Navigation -->
70
+ <nav class="sticky top-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="flex items-center justify-between h-16">
73
+ <div class="flex items-center">
74
+ <div class="flex-shrink-0">
75
+ <span class="text-2xl font-bold gradient-text">SBSCRPT</span>
76
+ </div>
77
+ <div class="hidden md:block">
78
+ <div class="ml-10 flex items-baseline space-x-4">
79
+ <a href="#services" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Services</a>
80
+ <a href="#products" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Products</a>
81
+ <a href="#showcase" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Showcase</a>
82
+ <a href="#about" class="nav-link px-3 py-2 rounded-md text-sm font-medium">About</a>
83
+ <a href="#subsidiaries" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Subsidiaries</a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ <div class="hidden md:block">
88
+ <div class="ml-4 flex items-center md:ml-6">
89
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
90
+ <span class="sr-only">View notifications</span>
91
+ <i class="fas fa-bell h-6 w-6"></i>
92
+ </button>
93
+ <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none" onclick="toggleChat()">
94
+ <span class="sr-only">Open chat</span>
95
+ <i class="fas fa-comment-dots h-6 w-6"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ <div class="-mr-2 flex md:hidden">
100
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" onclick="toggleMobileMenu()">
101
+ <span class="sr-only">Open main menu</span>
102
+ <i class="fas fa-bars h-6 w-6" id="menu-icon"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Mobile menu -->
109
+ <div class="md:hidden hidden" id="mobile-menu">
110
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
111
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium">Services</a>
112
+ <a href="#products" class="block px-3 py-2 rounded-md text-base font-medium">Products</a>
113
+ <a href="#showcase" class="block px-3 py-2 rounded-md text-base font-medium">Showcase</a>
114
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium">About</a>
115
+ <a href="#subsidiaries" class="block px-3 py-2 rounded-md text-base font-medium">Subsidiaries</a>
116
+ </div>
117
+ <div class="pt-4 pb-3 border-t border-gray-700">
118
+ <div class="flex items-center px-5">
119
+ <button class="ml-auto p-1 rounded-full text-gray-400 hover:text-white focus:outline-none" onclick="toggleChat()">
120
+ <span class="sr-only">Open chat</span>
121
+ <i class="fas fa-comment-dots h-6 w-6"></i>
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <!-- Hero Section -->
129
+ <header class="relative bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
130
+ <div class="absolute inset-0 opacity-20">
131
+ <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')]"></div>
132
+ </div>
133
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 relative z-10">
134
+ <div class="text-center">
135
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
136
+ <span class="gradient-text">Tailored Solutions</span> <br>For Your Business Needs
137
+ </h1>
138
+ <p class="mt-6 max-w-2xl mx-auto text-xl text-gray-300">
139
+ SBSCRPT delivers integrated services, products, and multimedia solutions with FMV pricing plus a 9% service fee.
140
+ </p>
141
+ <div class="mt-10 flex justify-center gap-4">
142
+ <a href="#services" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-purple-700 md:py-4 md:text-lg md:px-10 transition-colors">
143
+ Explore Services
144
+ </a>
145
+ <button onclick="toggleChat()" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-accent hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition-colors">
146
+ Get a Quote
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-900 to-transparent"></div>
152
+ </header>
153
+
154
+ <!-- Services Section -->
155
+ <section id="services" class="py-20 bg-gray-900">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="text-center mb-16">
158
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
159
+ Our <span class="gradient-text">Integrated Services</span>
160
+ </h2>
161
+ <p class="mt-4 max-w-2xl mx-auto text-gray-300">
162
+ Comprehensive solutions tailored to your specific requirements
163
+ </p>
164
+ </div>
165
+
166
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
167
+ <!-- Service Cards will be autopopulated from database -->
168
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-primary">
169
+ <div class="flex items-center mb-4">
170
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
171
+ <i class="fas fa-code text-primary text-xl"></i>
172
+ </div>
173
+ <h3 class="ml-3 text-lg font-medium text-white">Custom Software Development</h3>
174
+ </div>
175
+ <p class="mt-2 text-gray-300">
176
+ Bespoke applications built to your exact specifications with OPSEC-focused security.
177
+ </p>
178
+ <div class="mt-4 flex justify-between items-center">
179
+ <span class="text-sm text-gray-400">Starting at $5,000</span>
180
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-secondary">
185
+ <div class="flex items-center mb-4">
186
+ <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg">
187
+ <i class="fas fa-brain text-secondary text-xl"></i>
188
+ </div>
189
+ <h3 class="ml-3 text-lg font-medium text-white">AI Integration Services</h3>
190
+ </div>
191
+ <p class="mt-2 text-gray-300">
192
+ Implement cutting-edge AI solutions tailored to your business processes.
193
+ </p>
194
+ <div class="mt-4 flex justify-between items-center">
195
+ <span class="text-sm text-gray-400">Starting at $3,500</span>
196
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-accent">
201
+ <div class="flex items-center mb-4">
202
+ <div class="flex-shrink-0 bg-accent/10 p-3 rounded-lg">
203
+ <i class="fas fa-film text-accent text-xl"></i>
204
+ </div>
205
+ <h3 class="ml-3 text-lg font-medium text-white">Multimedia Production</h3>
206
+ </div>
207
+ <p class="mt-2 text-gray-300">
208
+ Professional video, audio, and graphic design services for your brand.
209
+ </p>
210
+ <div class="mt-4 flex justify-between items-center">
211
+ <span class="text-sm text-gray-400">Starting at $2,000</span>
212
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-primary">
217
+ <div class="flex items-center mb-4">
218
+ <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg">
219
+ <i class="fas fa-lock text-primary text-xl"></i>
220
+ </div>
221
+ <h3 class="ml-3 text-lg font-medium text-white">Security Compliance</h3>
222
+ </div>
223
+ <p class="mt-2 text-gray-300">
224
+ Full compliance with all major security standards and regulations.
225
+ </p>
226
+ <div class="mt-4 flex justify-between items-center">
227
+ <span class="text-sm text-gray-400">Starting at $4,500</span>
228
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-secondary">
233
+ <div class="flex items-center mb-4">
234
+ <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg">
235
+ <i class="fas fa-store text-secondary text-xl"></i>
236
+ </div>
237
+ <h3 class="ml-3 text-lg font-medium text-white">E-Commerce Solutions</h3>
238
+ </div>
239
+ <p class="mt-2 text-gray-300">
240
+ Complete online store setup with payment processing and inventory management.
241
+ </p>
242
+ <div class="mt-4 flex justify-between items-center">
243
+ <span class="text-sm text-gray-400">Starting at $3,000</span>
244
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-accent">
249
+ <div class="flex items-center mb-4">
250
+ <div class="flex-shrink-0 bg-accent/10 p-3 rounded-lg">
251
+ <i class="fas fa-chart-line text-accent text-xl"></i>
252
+ </div>
253
+ <h3 class="ml-3 text-lg font-medium text-white">Business Consulting</h3>
254
+ </div>
255
+ <p class="mt-2 text-gray-300">
256
+ Strategic guidance to optimize your operations and maximize growth.
257
+ </p>
258
+ <div class="mt-4 flex justify-between items-center">
259
+ <span class="text-sm text-gray-400">Starting at $250/hr</span>
260
+ <button class="text-sm text-accent hover:text-blue-400">Learn more →</button>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Products Section -->
268
+ <section id="products" class="py-20 bg-gray-800">
269
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
270
+ <div class="text-center mb-16">
271
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
272
+ Our <span class="gradient-text">Product Portfolio</span>
273
+ </h2>
274
+ <p class="mt-4 max-w-2xl mx-auto text-gray-300">
275
+ Digital goods and physical products designed for excellence
276
+ </p>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
280
+ <!-- Product Cards will be autopopulated from database -->
281
+ <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
282
+ <div class="h-48 bg-gradient-to-r from-primary to-accent flex items-center justify-center">
283
+ <i class="fas fa-box-open text-white text-5xl"></i>
284
+ </div>
285
+ <div class="p-4">
286
+ <h3 class="text-lg font-semibold text-white">Subcult Streetwear</h3>
287
+ <p class="mt-2 text-gray-300 text-sm">Premium urban apparel from our Subcult collective</p>
288
+ <div class="mt-4 flex justify-between items-center">
289
+ <span class="text-primary font-medium">$29 - $99</span>
290
+ <button class="text-xs bg-primary hover:bg-purple-700 text-white px-3 py-1 rounded-full">View Collection</button>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
296
+ <div class="h-48 bg-gradient-to-r from-secondary to-accent flex items-center justify-center">
297
+ <i class="fas fa-mobile-alt text-white text-5xl"></i>
298
+ </div>
299
+ <div class="p-4">
300
+ <h3 class="text-lg font-semibold text-white">ValueScope App</h3>
301
+ <p class="mt-2 text-gray-300 text-sm">Patent-pending valuation tool for business assets</p>
302
+ <div class="mt-4 flex justify-between items-center">
303
+ <span class="text-secondary font-medium">$49/month</span>
304
+ <button class="text-xs bg-secondary hover:bg-green-700 text-white px-3 py-1 rounded-full">Try Demo</button>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
310
+ <div class="h-48 bg-gradient-to-r from-accent to-primary flex items-center justify-center">
311
+ <i class="fas fa-book text-white text-5xl"></i>
312
+ </div>
313
+ <div class="p-4">
314
+ <h3 class="text-lg font-semibold text-white">VentureHub Reports</h3>
315
+ <p class="mt-2 text-gray-300 text-sm">Market analysis and business opportunity packages</p>
316
+ <div class="mt-4 flex justify-between items-center">
317
+ <span class="text-accent font-medium">$99 - $499</span>
318
+ <button class="text-xs bg-accent hover:bg-blue-700 text-white px-3 py-1 rounded-full">Browse Reports</button>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105">
324
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
325
+ <i class="fas fa-headphones text-white text-5xl"></i>
326
+ </div>
327
+ <div class="p-4">
328
+ <h3 class="text-lg font-semibold text-white">SBSCRPT Media</h3>
329
+ <p class="mt-2 text-gray-300 text-sm">Exclusive multimedia content and production templates</p>
330
+ <div class="mt-4 flex justify-between items-center">
331
+ <span class="text-primary font-medium">$19 - $199</span>
332
+ <button class="text-xs bg-primary hover:bg-purple-700 text-white px-3 py-1 rounded-full">View Library</button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <!-- Showcase Section -->
341
+ <section id="showcase" class="py-20 bg-gray-900">
342
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
343
+ <div class="text-center mb-16">
344
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
345
+ Our <span class="gradient-text">Work Showcase</span>
346
+ </h2>
347
+ <p class="mt-4 max-w-2xl mx-auto text-gray-300">
348
+ Explore our portfolio of past projects and client successes
349
+ </p>
350
+ </div>
351
+
352
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
353
+ <!-- Showcase items will be autopopulated from database -->
354
+ <div class="relative group overflow-hidden rounded-lg">
355
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
356
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
357
+ <div>
358
+ <h3 class="text-white font-bold text-xl">E-Commerce Platform</h3>
359
+ <p class="text-gray-300 mt-2">Custom-built online store with AI recommendations</p>
360
+ <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="relative group overflow-hidden rounded-lg">
366
+ <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
367
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
368
+ <div>
369
+ <h3 class="text-white font-bold text-xl">Corporate Branding</h3>
370
+ <p class="text-gray-300 mt-2">Complete visual identity for tech startup</p>
371
+ <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="relative group overflow-hidden rounded-lg">
377
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
378
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
379
+ <div>
380
+ <h3 class="text-white font-bold text-xl">Mobile Application</h3>
381
+ <p class="text-gray-300 mt-2">Fitness tracking app with social features</p>
382
+ <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="mt-12 text-center">
389
+ <button class="px-6 py-3 border-2 border-primary text-primary font-medium rounded-md hover:bg-primary hover:text-white transition-colors">
390
+ View Full Portfolio
391
+ </button>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- AI Blog Preview -->
397
+ <section class="py-20 bg-gray-800">
398
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
399
+ <div class="text-center mb-16">
400
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
401
+ <span class="gradient-text">AI-Generated Insights</span>
402
+ </h2>
403
+ <p class="mt-4 max-w-2xl mx-auto text-gray-300">
404
+ Our autonomous blog delivers fresh, SEO-optimized content daily
405
+ </p>
406
+ </div>
407
+
408
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
409
+ <!-- Blog posts will be autogenerated -->
410
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
411
+ <div class="h-48 bg-gradient-to-r from-primary to-accent flex items-center justify-center">
412
+ <i class="fas fa-robot text-white text-5xl"></i>
413
+ </div>
414
+ <div class="p-6">
415
+ <div class="flex items-center text-sm text-gray-400 mb-2">
416
+ <span>Today</span>
417
+ <span class="mx-2">•</span>
418
+ <span>AI Generated</span>
419
+ </div>
420
+ <h3 class="text-xl font-semibold text-white">The Future of AI in Business Operations</h3>
421
+ <p class="mt-3 text-gray-300">
422
+ Exploring how artificial intelligence is transforming traditional business models and creating new opportunities...
423
+ </p>
424
+ <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center">
425
+ Read more <i class="fas fa-arrow-right ml-1"></i>
426
+ </button>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
431
+ <div class="h-48 bg-gradient-to-r from-secondary to-primary flex items-center justify-center">
432
+ <i class="fas fa-chart-pie text-white text-5xl"></i>
433
+ </div>
434
+ <div class="p-6">
435
+ <div class="flex items-center text-sm text-gray-400 mb-2">
436
+ <span>Yesterday</span>
437
+ <span class="mx-2">•</span>
438
+ <span>AI Generated</span>
439
+ </div>
440
+ <h3 class="text-xl font-semibold text-white">Market Trends in Tech for 2023</h3>
441
+ <p class="mt-3 text-gray-300">
442
+ Analysis of emerging technologies that are shaping industries and how businesses can adapt to stay competitive...
443
+ </p>
444
+ <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center">
445
+ Read more <i class="fas fa-arrow-right ml-1"></i>
446
+ </button>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="bg-gray-700 rounded-lg overflow-hidden">
451
+ <div class="h-48 bg-gradient-to-r from-accent to-secondary flex items-center justify-center">
452
+ <i class="fas fa-lock text-white text-5xl"></i>
453
+ </div>
454
+ <div class="p-6">
455
+ <div class="flex items-center text-sm text-gray-400 mb-2">
456
+ <span>2 days ago</span>
457
+ <span class="mx-2">•</span>
458
+ <span>AI Generated</span>
459
+ </div>
460
+ <h3 class="text-xl font-semibold text-white">OPSEC Best Practices for Startups</h3>
461
+ <p class="mt-3 text-gray-300">
462
+ Essential security measures every growing business should implement to protect their data and intellectual property...
463
+ </p>
464
+ <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center">
465
+ Read more <i class="fas fa-arrow-right ml-1"></i>
466
+ </button>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="mt-12 text-center">
472
+ <button class="px-6 py-3 border-2 border-secondary text-secondary font-medium rounded-md hover:bg-secondary hover:text-white transition-colors">
473
+ Visit Our Blog
474
+ </button>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Subsidiaries Section -->
480
+ <section id="subsidiaries" class="py-20 bg-gray-900">
481
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
482
+ <div class="text-center mb-16">
483
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
484
+ Our <span class="gradient-text">Subsidiary Companies</span>
485
+ </h2>
486
+ <p class="mt-4 max-w-2xl mx-auto text-gray-300">
487
+ Specialized divisions focusing on specific market segments
488
+ </p>
489
+ </div>
490
+
491
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
492
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
493
+ <div class="w-20 h-20 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-4">
494
+ <i class="fas fa-paint-brush text-primary text-2xl"></i>
495
+ </div>
496
+ <h3 class="text-xl font-semibold text-white mb-2">SBSCRPT Media & Design</h3>
497
+ <p class="text-gray-300 mb-4">Creative solutions for branding and multimedia production</p>
498
+ <a href="#" class="text-sm text-primary hover:text-purple-400">Visit Site →</a>
499
+ </div>
500
+
501
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
502
+ <div class="w-20 h-20 mx-auto bg-secondary/10 rounded-full flex items-center justify-center mb-4">
503
+ <i class="fas fa-tshirt text-secondary text-2xl"></i>
504
+ </div>
505
+ <h3 class="text-xl font-semibold text-white mb-2">Subcult Collective</h3>
506
+ <p class="text-gray-300 mb-4">Streetwear and urban culture apparel brand</p>
507
+ <a href="#" class="text-sm text-secondary hover:text-green-400">Visit Site →</a>
508
+ </div>
509
+
510
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
511
+ <div class="w-20 h-20 mx-auto bg-accent/10 rounded-full flex items-center justify-center mb-4">
512
+ <i class="fas fa-lightbulb text-accent text-2xl"></i>
513
+ </div>
514
+ <h3 class="text-xl font-semibold text-white mb-2">VentureHub</h3>
515
+ <p class="text-gray-300 mb-4">Business idea marketplace and startup incubator</p>
516
+ <a href="#" class="text-sm text-accent hover:text-blue-400">Visit Site →</a>
517
+ </div>
518
+
519
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
520
+ <div class="w-20 h-20 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-4">
521
+ <i class="fas fa-chart-bar text-primary text-2xl"></i>
522
+ </div>
523
+ <h3 class="text-xl font-semibold text-white mb-2">ValueScope</h3>
524
+ <p class="text-gray-300 mb-4">Patent-pending valuation tools and analytics</p>
525
+ <a href="#" class="text-sm text-primary hover:text-purple-400">Visit Site →</a>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </section>
530
+
531
+ <!-- About Section -->
532
+ <section id="about" class="py-20 bg-gray-800">
533
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
534
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
535
+ <div class="mb-12 lg:mb-0">
536
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6">
537
+ About <span class="gradient-text">SBSCRPT</span>
538
+ </h2>
539
+ <p class="text-gray-300 mb-4">
540
+ SBSCRPT is an integrated business solutions provider specializing in technology, multimedia, and tailored services.
541
+ We combine multiple disciplines to deliver comprehensive solutions to our clients.
542
+ </p>
543
+ <p class="text-gray-300 mb-4">
544
+ Our unique pricing model offers Fair Market Value (FMV) pricing plus a 9% service fee, ensuring transparency
545
+ and value for our clients.
546
+ </p>
547
+ <p class="text-gray-300 mb-6">
548
+ With a strong focus on OPSEC and compliance, we prioritize the security of your data and intellectual property
549
+ throughout all our engagements.
550
+ </p>
551
+ <div class="flex flex-wrap gap-4">
552
+ <div class="flex items-center">
553
+ <div class="flex-shrink-0 bg-primary/10 p-2 rounded-full">
554
+ <i class="fas fa-check text-primary"></i>
555
+ </div>
556
+ <span class="ml-2 text-white">NDA Protection</span>
557
+ </div>
558
+ <div class="flex items-center">
559
+ <div class="flex-shrink-0 bg-secondary/10 p-2 rounded-full">
560
+ <i class="fas fa-check text-secondary"></i>
561
+ </div>
562
+ <span class="ml-2 text-white">Full Compliance</span>
563
+ </div>
564
+ <div class="flex items-center">
565
+ <div class="flex-shrink-0 bg-accent/10 p-2 rounded-full">
566
+ <i class="fas fa-check text-accent"></i>
567
+ </div>
568
+ <span class="ml-2 text-white">Tailored Solutions</span>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ <div class="relative">
573
+ <div class="relative z-10 bg-gray-700 rounded-xl overflow-hidden p-1">
574
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Team" class="w-full h-auto rounded-lg">
575
+ </div>
576
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary rounded-full opacity-20"></div>
577
+ <div class="absolute -top-6 -left-6 w-24 h-24 bg-secondary rounded-full opacity-20"></div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- CTA Section -->
584
+ <section class="py-20 bg-gradient-to-r from-gray-900 to-gray-800">
585
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
586
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6">
587
+ Ready to Transform Your Business?
588
+ </h2>
589
+ <p class="max-w-2xl mx-auto text-gray-300 mb-8">
590
+ Get started with SBSCRPT today and experience integrated solutions tailored to your needs.
591
+ </p>
592
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
593
+ <button onclick="toggleChat()" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-purple-700 md:py-4 md:text-lg md:px-10 transition-colors">
594
+ Get a Custom Quote
595
+ </button>
596
+ <a href="#contact" class="px-8 py-3 border border-primary text-base font-medium rounded-md text-primary hover:bg-gray-800 md:py-4 md:text-lg md:px-10 transition-colors">
597
+ Contact Our Team
598
+ </a>
599
+ </div>
600
+ </div>
601
+ </section>
602
+
603
+ <!-- Footer -->
604
+ <footer class="bg-gray-900 border-t border-gray-800">
605
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
606
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
607
+ <div>
608
+ <h3 class="text-white font-semibold mb-4">SBSCRPT</h3>
609
+ <p class="text-gray-400 text-sm">
610
+ Integrated business solutions with a focus on technology, multimedia, and tailored services.
611
+ </p>
612
+ </div>
613
+ <div>
614
+ <h3 class="text-white font-semibold mb-4">Services</h3>
615
+ <ul class="space-y-2">
616
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Custom Development</a></li>
617
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">AI Integration</a></li>
618
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Multimedia Production</a></li>
619
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Security Compliance</a></li>
620
+ </ul>
621
+ </div>
622
+ <div>
623
+ <h3 class="text-white font-semibold mb-4">Products</h3>
624
+ <ul class="space-y-2">
625
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Subcult Apparel</a></li>
626
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">ValueScope Tools</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">VentureHub Reports</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">SBSCRPT Media</a></li>
629
+ </ul>
630
+ </div>
631
+ <div>
632
+ <h3 class="text-white font-semibold mb-4">Connect</h3>
633
+ <div class="flex space-x-4">
634
+ <a href="#" class="text-gray-400 hover:text-white">
635
+ <i class="fab fa-twitter"></i>
636
+ </a>
637
+ <a href="#" class="text-gray-400 hover:text-white">
638
+ <i class="fab fa-linkedin"></i>
639
+ </a>
640
+ <a href="#" class="text-gray-400 hover:text-white">
641
+ <i class="fab fa-instagram"></i>
642
+ </a>
643
+ <a href="#" class="text-gray-400 hover:text-white">
644
+ <i class="fab fa-github"></i>
645
+ </a>
646
+ </div>
647
+ <div class="mt-4">
648
+ <p class="text-gray-400 text-sm">info@sbscrpt.com</p>
649
+ <p class="text-gray-400 text-sm">+1 (555) 123-4567</p>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
654
+ <p class="text-gray-400 text-sm">
655
+ &copy; 2023 SBSCRPT. All rights reserved.
656
+ </p>
657
+ <div class="mt-4 md:mt-0">
658
+ <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Privacy Policy</a>
659
+ <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Terms of Service</a>
660
+ <a href="#" class="text-gray-400 hover:text-white text-sm">NDA Agreement</a>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </footer>
665
+
666
+ <!-- Chatbox -->
667
+ <div id="chatbox" class="fixed bottom-6 right-6 w-80 bg-gray-800 rounded-t-xl shadow-xl border border-gray-700 hidden transform transition-all duration-300 ease-in-out">
668
+ <div class="bg-gray-700 px-4 py-3 rounded-t-xl flex justify-between items-center">
669
+ <h3 class="text-white font-medium">SBSCRPT Assistant</h3>
670
+ <div class="flex items-center space-x-2">
671
+ <button class="text-gray-300 hover:text-white">
672
+ <i class="fas fa-minus"></i>
673
+ </button>
674
+ <button onclick="toggleChat()" class="text-gray-300 hover:text-white">
675
+ <i class="fas fa-times"></i>
676
+ </button>
677
+ </div>
678
+ </div>
679
+ <div class="h-64 overflow-y-auto p-4 bg-gray-800">
680
+ <div class="mb-4">
681
+ <div class="flex items-start mb-2">
682
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
683
+ <i class="fas fa-robot text-primary text-sm"></i>
684
+ </div>
685
+ <div class="bg-gray-700 rounded-lg p-3 text-sm text-gray-200">
686
+ Hello! I'm your SBSCRPT assistant. How can I help you today? You can ask about our services, products, or request a custom quote.
687
+ </div>
688
+ </div>
689
+ </div>
690
+ <!-- Messages will appear here -->
691
+ </div>
692
+ <div class="p-3 border-t border-gray-700 bg-gray-800">
693
+ <div class="flex">
694
+ <input type="text" id="chat-input" placeholder="Type your message..." class="flex-1 bg-gray-700 rounded-l-lg px-4 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-primary">
695
+ <button onclick="sendMessage()" class="bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg text-sm">
696
+ <i class="fas fa-paper-plane"></i>
697
+ </button>
698
+ </div>
699
+ <p class="text-xs text-gray-400 mt-2">
700
+ By using this chat, you agree to our <a href="#" class="text-primary hover:underline">privacy policy</a>.
701
+ </p>
702
+ </div>
703
+ </div>
704
+
705
+ <script>
706
+ // Mobile menu toggle
707
+ function toggleMobileMenu() {
708
+ const menu = document.getElementById('mobile-menu');
709
+ const icon = document.getElementById('menu-icon');
710
+
711
+ if (menu.classList.contains('hidden')) {
712
+ menu.classList.remove('hidden');
713
+ icon.classList.remove('fa-bars');
714
+ icon.classList.add('fa-times');
715
+ } else {
716
+ menu.classList.add('hidden');
717
+ icon.classList.remove('fa-times');
718
+ icon.classList.add('fa-bars');
719
+ }
720
+ }
721
+
722
+ // Chatbox toggle
723
+ function toggleChat() {
724
+ const chatbox = document.getElementById('chatbox');
725
+
726
+ if (chatbox.classList.contains('hidden')) {
727
+ chatbox.classList.remove('hidden');
728
+ setTimeout(() => {
729
+ chatbox.classList.add('fade-in');
730
+ }, 10);
731
+ } else {
732
+ chatbox.classList.add('hidden');
733
+ chatbox.classList.remove('fade-in');
734
+ }
735
+ }
736
+
737
+ // Send message function
738
+ function sendMessage() {
739
+ const input = document.getElementById('chat-input');
740
+ const message = input.value.trim();
741
+
742
+ if (message) {
743
+ const chatArea = document.querySelector('#chatbox > div.h-64');
744
+
745
+ // Add user message
746
+ const userMessage = document.createElement('div');
747
+ userMessage.className = 'mb-4 flex justify-end';
748
+ userMessage.innerHTML = `
749
+ <div class="bg-primary rounded-lg p-3 text-sm text-white max-w-xs">
750
+ ${message}
751
+ </div>
752
+ `;
753
+ chatArea.appendChild(userMessage);
754
+
755
+ // Clear input
756
+ input.value = '';
757
+
758
+ // Scroll to bottom
759
+ chatArea.scrollTop = chatArea.scrollHeight;
760
+
761
+ // Simulate response after delay
762
+ setTimeout(() => {
763
+ const responses = [
764
+ "I can help with that! Our team specializes in tailored solutions. Would you like me to generate a quote?",
765
+ "That's one of our popular services. Our FMV pricing plus 9% service fee applies. Can you share more details?",
766
+ "We have several options for that. Let me connect you with the right team member.",
767
+ "Thanks for your inquiry! Our typical turnaround time is 2-4 weeks depending on complexity.",
768
+ "That's a great question! Our ValueScope tool might be perfect for your needs."
769
+ ];
770
+
771
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
772
+
773
+ const botMessage = document.createElement('div');
774
+ botMessage.className = 'mb-4';
775
+ botMessage.innerHTML = `
776
+ <div class="flex items-start mb-2">
777
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
778
+ <i class="fas fa-robot text-primary text-sm"></i>
779
+ </div>
780
+ <div class="bg-gray-700 rounded-lg p-3 text-sm text-gray-200">
781
+ ${randomResponse}
782
+ </div>
783
+ </div>
784
+ `;
785
+ chatArea.appendChild(botMessage);
786
+
787
+ // Scroll to bottom again
788
+ chatArea.scrollTop = chatArea.scrollHeight;
789
+ }, 1000);
790
+ }
791
+ }
792
+
793
+ // Allow sending message with Enter key
794
+ document.getElementById('chat-input').addEventListener('keypress', function(e) {
795
+ if (e.key === 'Enter') {
796
+ sendMessage();
797
+ }
798
+ });
799
+
800
+ // Smooth scrolling for anchor links
801
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
802
+ anchor.addEventListener('click', function(e) {
803
+ e.preventDefault();
804
+
805
+ const targetId = this.getAttribute('href');
806
+ if (targetId === '#') return;
807
+
808
+ const targetElement = document.querySelector(targetId);
809
+ if (targetElement) {
810
+ targetElement.scrollIntoView({
811
+ behavior: 'smooth'
812
+ });
813
+
814
+ // Close mobile menu if open
815
+ const mobileMenu = document.getElementById('mobile-menu');
816
+ if (!mobileMenu.classList.contains('hidden')) {
817
+ toggleMobileMenu();
818
+ }
819
+ }
820
+ });
821
+ });
822
+
823
+ // Animation for service cards on scroll
824
+ function animateOnScroll() {
825
+ const cards = document.querySelectorAll('.service-card');
826
+ cards.forEach(card => {
827
+ const cardPosition = card.getBoundingClientRect().top;
828
+ const screenPosition = window.innerHeight / 1.3;
829
+
830
+ if (cardPosition < screenPosition) {
831
+ card.classList.add('fade-in');
832
+ }
833
+ });
834
+ }
835
+
836
+ window.addEventListener('scroll', animateOnScroll);
837
+ document.addEventListener('DOMContentLoaded', animateOnScroll);
838
+ </script>
839
+ <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=SVINT/sbscprt-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
840
+ </html>