-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
525 lines (506 loc) · 30.9 KB
/
Copy pathindex.html
File metadata and controls
525 lines (506 loc) · 30.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE html>
<html lang="en-ZA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORION PRO — Never Miss Another Customer Again</title>
<meta name="description" content="Meet Naledi. She welcomes your customers, books appointments, answers questions, and never takes a day off. SLA guaranteed.">
<meta property="og:title" content="ORION PRO — Meet Naledi">
<meta property="og:description" content="The customer experience manager your business deserves. 24/7 WhatsApp, 50+ languages. Custom pricing.">
<meta property="og:image" content="https://oriondevcore.com/assets/og-orion-pro.jpg">
<meta property="og:url" content="https://oriondevcore.com">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>O</text></svg>">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true,
xfbml : true,
version : '{api-version}'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<nav class="nav" id="nav">
<div class="nav-inner">
<a href="/" class="nav-brand">
<span class="nav-title">ORION <span class="nav-title-pro">PRO</span></span>
</a>
<div class="nav-links" id="navLinks">
<a href="#story" class="nav-link">The Story</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#features" class="nav-link">Features</a>
<a href="#services" class="nav-link">Web & Brand</a>
<a href="/naledi-gallery" class="nav-link">Naledi Gallery</a>
<a href="/staff" class="nav-link">Team</a>
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="nav-link nav-cta" aria-label="SAY HOWZIT!">SAY HOWZIT!</a>
</div>
<button class="nav-hamburger" id="navHamburger" aria-label="Menu" aria-expanded="false">
<span></span><span></span>
</button>
</div>
</nav>
<div class="mobile-menu" id="mobileMenu">
<a href="#story" class="nav-link">The Story</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#features" class="nav-link">Features</a>
<a href="#services" class="nav-link">Web & Brand</a>
<a href="/naledi-gallery" class="nav-link">Naledi Gallery</a>
<a href="/staff" class="nav-link">Team</a>
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="nav-link nav-cta" aria-label="SAY HOWZIT!">SAY HOWZIT!</a>
</div>
<section class="hero" id="hero">
<div class="hero-bg-img"></div>
<div class="hero-languages">
<span class="hero-lang-word">SAWUBONA</span>
<span class="hero-lang-word">HOWZIT</span>
<span class="hero-lang-word">NI HAO</span>
<span class="hero-lang-word">BONJOUR</span>
<span class="hero-lang-word">OLA</span>
<span class="hero-lang-word">KONNICHIWA</span>
<span class="hero-lang-word">HALLO</span>
<span class="hero-lang-word">LEKKER</span>
<span class="hero-lang-word">NAMASTE</span>
<span class="hero-lang-word">MIDDAG</span>
<span class="hero-lang-word">CIAO</span>
<span class="hero-lang-word">MOLO</span>
</div>
<div class="hero-content">
<div class="hero-badge">ORION WHATSAPP PRO</div>
<h1 class="hero-title">Never Miss <span class="gold">Another Customer</span></h1>
<p class="hero-sub">Meet Naledi. She welcomes your customers, books appointments, answers questions, and never takes a day off.</p>
<p class="hero-desc">While your team is caring for your customers, Naledi is making sure nobody feels ignored. 24/7 WhatsApp. 50+ languages including isiZulu and Afrikaans. She remembers the little things.</p>
<div class="hero-ctas">
<a href="#story" class="btn btn-primary">The Story</a>
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="btn btn-secondary">SAY HOWZIT!</a>
</div>
<div class="hero-meta">
Built in Durban · SLA guaranteed
</div>
</div>
</section>
<section class="story-section" id="story">
<div class="section-inner">
<div class="section-header">
<h2 class="section-title">The Ones Who <span class="gold">Didn't Adapt</span></h2>
<p class="section-sub">Every generation, a giant falls. Not because they lacked resources. Because they refused to believe the world had changed.</p>
</div>
<div class="story-grid">
<div class="story-card">
<img src="assets/kodak-logo.png" alt="Kodak" loading="lazy" style="max-width:140px;height:auto;margin-bottom:16px;opacity:0.6">
<div class="story-year">Founded 1888</div>
<h3>Invented Digital. Buried It.</h3>
<p>Kodak invented the first digital camera in 1975. Their response? They hid it. They were afraid it would kill their film business. It did anyway. 170,000 employees became 0.</p>
</div>
<div class="story-card">
<img src="assets/blockbuster-logo.png" alt="Blockbuster" loading="lazy" style="max-width:160px;height:auto;margin-bottom:16px;opacity:0.6">
<div class="story-year">Founded 1985</div>
<h3>Had Netflix. Said No.</h3>
<p>In 2000, Netflix offered to sell to Blockbuster for $50 million. Blockbuster laughed. By 2010, Blockbuster was bankrupt. Netflix was worth billions. The refusal to see where the world was going cost them everything.</p>
</div>
<div class="story-card">
<img src="assets/blackberry-logo.png" alt="Blackberry" loading="lazy" style="max-width:150px;height:auto;margin-bottom:16px;opacity:0.6">
<div class="story-year">Founded 1984</div>
<h3>Owned Business. Ignored Touch.</h3>
<p>Blackberry dominated the business phone market. They had keyboards, security, BBM. When the iPhone launched, they called it a toy. Business owners switched anyway. Blackberry's market share went from 50% to 0%.</p>
</div>
<div class="story-card">
<div style="font-size:36px;font-weight:900;color:var(--text-muted);margin-bottom:16px;opacity:0.5;">NOKIA</div>
<div class="story-year">Founded 1865</div>
<h3>King of Phones. Missed Touch.</h3>
<p>Nokia owned 50% of the global mobile market. The 3310 was legendary. When the iPhone launched in 2007, they called it a fragile toy with no keyboard. By 2013, their phone division was sold for scrap. $250 billion to zero.</p>
</div>
</div>
<div class="story-pivot">
<h2>But <span class="gold">You Are Not Them</span></h2>
<p>You're reading this because you're one of the business owners who sees what's coming. Your customers already expect 24/7 answers on WhatsApp. Your competitors are either ignoring this or already using it. There is no middle ground.</p>
<p class="hero-meta">The question is not whether AI receptionists will replace human ones. The question is whether you'll be the one offering it first — or the one your customers left for being too slow.</p>
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="btn btn-primary btn-lg">SAY HOWZIT! →</a>
</div>
</div>
</section>
<section class="pricing-single" id="pricing">
<div class="section-inner">
<div class="section-header">
<h2 class="section-title">Custom <span class="gold">Pricing</span></h2>
<p class="section-sub">Per client needs analysis. Let's talk.</p>
</div>
<div class="price-card">
<div class="price-name">ORION WhatsApp PRO</div>
<div class="price-amount">Get a Quote</div>
<p class="price-desc">Your AI WhatsApp office manager. 24/7. 50+ languages. Voice notes. Document reading. Lead capture. Smart filtering. Learns from every conversation.</p>
<p class="price-proof">Built in Durban. Powered by Meta's official WhatsApp Business API.</p>
<ul class="price-features">
<li>AI WhatsApp office manager operating 24/7, never misses a message</li>
<li>Voice note transcription, spoken language converted to action</li>
<li>Document reading, upload price lists, menus, catalogues</li>
<li>50+ languages, Zulu, English, French, Mandarin, Japanese, Hindi, and more</li>
<li>Smart lead capture with instant WhatsApp notification to your phone</li>
<li>Auto-filters spam, drunks, sales pitches, you only see real inquiries</li>
<li>Weekly lead report delivered to your phone</li>
<li>Service Level Agreement (SLA) guaranteed</li>
</ul>
<div class="price-setup">
Already have a WhatsApp Business API number? <strong>Connect it for free.</strong><br>
Need a number? We set one up for you.
</div>
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="btn btn-primary btn-lg">SAY HOWZIT! →</a>
</div>
</div>
</section>
<section class="verticals" id="verticals">
<div class="section-inner">
<div class="section-header">
<h2 class="section-title">Your Industry. <span class="gold">Pre-Trained.</span></h2>
<p class="section-sub">Same AI. Different needs. Custom pricing.</p>
</div>
<div class="vertical-grid">
<div class="vertical-card">
<div class="vert-letter">Hospitality</div>
<h4>Hotels & B&Bs</h4>
<p>Booking inquiries, check-in and check-out times, amenity questions, local recommendations, cancellation policies.</p>
</div>
<div class="vertical-card">
<div class="vert-letter">Sparkies</div>
<h4>Electricians Verified</h4>
<p>Emergency versus scheduled call-outs, availability, service areas, quote collection after hours.</p>
</div>
<div class="vertical-card">
<div class="vert-letter">Plumbers</div>
<h4>Leaks, Geysers, Blockages</h4>
<p>Burst pipe or dripping tap, she knows the difference. Call-out fees, availability, emergency routing by time of day.</p>
</div>
<div class="vertical-card">
<div class="vert-letter">Builders</div>
<h4>Your business Corner Stone</h4>
<p>Project inquiries, quoting process, timeline estimates, material questions, site visit scheduling.</p>
</div>
<div class="vertical-card">
<div class="vert-letter">Air-conditioning</div>
<h4>HVAC</h4>
<p>Service calls, maintenance plans, emergency repairs, filter reminders, seasonal pricing changes.</p>
</div>
</div>
</div>
</section>
<section class="features" id="features">
<div class="section-inner">
<div class="section-header">
<h2 class="section-title">What You're <span class="gold">Actually</span> Paying For</h2>
<p class="section-sub">Not a chatbot. A team member.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<h3>Name Them</h3>
<p>Your AI hire gets a name, a face, a personality. They represent your brand, not a generic robot.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<h3>Zero Overhead</h3>
<p>No salary, no UIF, no pension, no sick leave, no smoke breaks. One predictable monthly fee, nothing else.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<h3>Any Language</h3>
<p>Your customer speaks Zulu, French, Mandarin, or Arabic. Your hire speaks it back. 50+ languages, built in.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<h3>Knows Your Business</h3>
<p>Upload your price list, menu, catalog, or FAQ. Your hire reads it, understands it, and never gets it wrong.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<h3>Improves Every Day</h3>
<p>Every conversation makes your hire smarter. They learn your customers, your tone, your products, continuously.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<h3>Zero Setup Friction</h3>
<p>We handle everything. You just connect your WhatsApp number. We'll take it from there.</p>
</div>
</div>
</div>
</section>
<section class="comparison" id="comparison">
<div class="section-inner">
<div class="section-header">
<h2 class="section-title">ORION PRO vs <span class="gold">The World</span></h2>
<p class="section-sub">See how the alternatives stack up.</p>
</div>
<div class="comp-table">
<div class="comp-row comp-header">
<span class="comp-label"></span>
<span class="comp-orion">ORION PRO</span>
<span>BizAI</span>
<span>WATI</span>
<span>Receptionist</span>
</div>
<div class="comp-row">
<span class="comp-label">Real AI understanding</span>
<span class="comp-yes">✓</span>
<span class="comp-no">✗</span>
<span class="comp-partial">Partial</span>
<span class="comp-na">—</span>
</div>
<div class="comp-row">
<span class="comp-label">Voice transcription</span>
<span class="comp-yes">✓</span>
<span class="comp-no">✗</span>
<span class="comp-no">✗</span>
<span class="comp-no">✗</span>
</div>
<div class="comp-row">
<span class="comp-label">Document reading</span>
<span class="comp-yes">✓</span>
<span class="comp-no">✗</span>
<span class="comp-no">✗</span>
<span class="comp-yes">✓</span>
</div>
<div class="comp-row">
<span class="comp-label">50+ languages</span>
<span class="comp-yes">✓</span>
<span class="comp-no">EN only</span>
<span class="comp-no">EN only</span>
<span class="comp-na">Varies</span>
</div>
<div class="comp-row">
<span class="comp-label">Price per month</span>
<span class="comp-yes"><strong>Custom quote</strong></span>
<span>Basic chatbot</span>
<span>Limited automation</span>
<span>R8k+ human</span>
</div>
<div class="comp-row">
<span class="comp-label">Setup time</span>
<span class="comp-yes">1-3 days</span>
<span>30 min</span>
<span>1-2 weeks</span>
<span>2 weeks</span>
</div>
<div class="comp-row">
<span class="comp-label">Cancellation</span>
<span class="comp-yes">SLA terms apply</span>
<span>Monthly</span>
<span>30 day notice</span>
<span>Contract</span>
</div>
</div>
</div>
</section>
<section class="services-section" id="services" style="padding:60px 0;border-top:1px solid var(--border);background:var(--surface)">
<div class="section-inner">
<p class="section-label">ODC Development & Branding</p>
<h2 style="font-size:var(--text-2xl);text-align:center;margin-bottom:4px">Professional Solutions. Transparent Value.</h2>
<p style="font-size:var(--text-sm);color:var(--text-muted);text-align:center;margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto">Fast delivery. Premium quality. Ongoing support. <span style="color:var(--primary)">Easier money in the bank.</span></p>
<div class="services-grid">
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="9" y1="4" x2="9" y2="20"/></svg>
<h4>Single Page Application</h4>
<p>Custom-built SPA for your brand. Fully responsive, SEO optimised, with animations, forms and analytics.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
<h4>Colour Logo</h4>
<p>Full-colour vector logo design with brand consistency, variations and mockups.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
<h4>Mono Logo</h4>
<p>Vector mono logo in all formats, with icon and favicon variants.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="12" y2="14"/></svg>
<h4>Social Media Assets</h4>
<p>Cover images for Facebook, X, Instagram, LinkedIn, YouTube and TikTok.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 20h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"/><polyline points="22 6 12 13 2 6"/></svg>
<h4>Brand Guidelines</h4>
<p>Full PDF brand style guide covering logo usage, colours, typography and best practices.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
<h4>Website Content</h4>
<p>SEO-friendly copywriting, blog posts and image sourcing for your site.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="1"/><path d="M20.2 20.2a8 8 0 0 0 0-16.4"/><path d="M6.4 6.4a8 8 0 0 0 0 11.2"/></svg>
<h4>Hosting + Domain</h4>
<p>Reliable web hosting with SSL, backups and a .co.za or .com domain.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12a9 9 0 1 1-9-9"/><path d="M12 6v6l3 2"/></svg>
<h4>Website Maintenance</h4>
<p>Monthly updates, backups, monitoring, security and content edits.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10"/><path d="M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10"/></svg>
<h4>SEO Optimization</h4>
<p>On-page SEO with meta tags, keywords, speed optimisation and indexing.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 7 12 13 2 7"/></svg>
<h4>Email Signature</h4>
<p>HTML email signature with clickable links, social icons and dark mode support.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
<h4>Graphic Design</h4>
<p>Banners, icons, flyers, brochures, social posts and infographics.</p>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2Z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7Z"/></svg>
<h4>System Training</h4>
<p>Training session with user guide, video tutorials and ongoing support.</p>
</div>
</div>
<div style="text-align:center;margin-top:24px">
<a href="https://wa.me/27703080516?text=Howzit%20ODC%20-%20I%20want%20a%20website%20built" class="btn btn-primary">Get a Quote →</a>
<p style="font-size:12px;color:var(--text-muted);margin-top:12px">Bundle with Orion PRO for discounted packages</p>
</div>
</div>
</section>
<section class="cta" id="cta">
<div class="section-inner">
<h2 class="cta-title">Buy Back <span class="gold">Your Business</span></h2>
<p class="cta-desc">Your customers are messaging you right now. Some of them are ready to buy. The rest are talking to your competitors. Every minute you wait is a lead you don't get back.</p>
<div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;">
<a href="https://wa.me/27703080516?text=SAY%20HOWZIT!" class="btn btn-primary btn-lg">SAY HOWZIT! →</a>
</div>
<p class="cta-note">SLA & Terms apply</p>
</div>
</section>
<section style="padding:48px 24px;text-align:center;border-top:1px solid var(--border);background:var(--surface);">
<div class="section-inner">
<p style="font-size:13px;color:var(--text-muted);margin-bottom:8px;font-family:var(--font-mono);">/// ORION PRO STAFF ///</p>
<div style="display:flex;justify-content:center;gap:20px;flex-wrap:wrap;align-items:center;margin:16px 0;">
<a href="/staff" style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:9999px;border:1px solid var(--border);font-size:13px;color:var(--text-muted);text-decoration:none;transition:all 0.2s;">
<span style="width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#c8a84e);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;">G</span> Graham
</a>
<a href="/staff" style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:9999px;border:1px solid var(--border);font-size:13px;color:var(--text-muted);text-decoration:none;transition:all 0.2s;">
<span style="width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#c8a84e);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;">N</span> Nomfundo
</a>
<a href="/staff" style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:9999px;border:1px solid var(--border);font-size:13px;color:var(--text-muted);text-decoration:none;transition:all 0.2s;">
<span style="width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#c8a84e);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;">N</span> Naledi
</a>
<a href="/staff" style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:9999px;border:1px solid var(--border);font-size:13px;color:var(--text-muted);text-decoration:none;transition:all 0.2s;">
<span style="width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#0a84ff,#c8a84e);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;">M</span> Mintaka
</a>
</div>
<p style="font-size:13px;color:var(--text-dim);max-width:500px;margin:12px auto 0;line-height:1.6;">
Four people building the future of customer support from Durban.
<a href="/staff" style="color:var(--primary);text-decoration:none;font-weight:600;">Meet the team →</a>
</p>
</div>
</section>
<section style="padding:80px 20px;background:var(--bg-card);">
<div style="max-width:1000px;margin:0 auto;text-align:center;">
<h2 style="font-size:28px;font-weight:700;margin-bottom:8px;">Naledi Handbook</h2>
<p style="color:var(--text-dim);margin-bottom:32px;">What Naledi knows — browse the handbook in a WhatsApp-style interface</p>
<iframe src="https://wahb.orion269.workers.dev/" style="width:100%;height:700px;border:none;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.3);" title="Naledi Live Demo"></iframe>
</div>
</section>
<footer class="footer">
<div class="footer-inner">
<div style="display:grid;grid-template-columns:2fr repeat(4,1fr);gap:48px;max-width:1200px;margin:0 auto;">
<div>
<span class="footer-logo">ORION <span class="gold">PRO</span></span>
<p style="font-size:13px;color:var(--text-muted);margin-top:12px;line-height:1.7;">AI-powered WhatsApp receptionist for modern businesses. Part of the Orion Universe ecosystem.</p>
<p style="font-size:12px;color:var(--text-dim);margin-top:16px;">Orion Universe<br>Graham Schubach<br>Durban, KwaZulu-Natal, South Africa</p>
</div>
<div>
<h4 style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:16px;">AI & Digital</h4>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li><a href="/" style="font-size:13px;color:var(--text-muted);">Naledi — WhatsApp AI</a></li>
<li><a href="/staff" style="font-size:13px;color:var(--text-muted);">Meet the Team</a></li>
<li><a href="#pricing" style="font-size:13px;color:var(--text-muted);">GBP — Google Business</a></li>
<li><a href="#pricing" style="font-size:13px;color:var(--text-muted);">SEO Optimization</a></li>
<li><a href="#pricing" style="font-size:13px;color:var(--text-muted);">Website Design</a></li>
</ul>
</div>
<div>
<h4 style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:16px;">Products</h4>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li><a href="#" style="font-size:13px;color:var(--text-muted);">AI Print 2 Canvas</a></li>
<li><a href="#" style="font-size:13px;color:var(--text-muted);">mPOS / Nexus POS</a></li>
</ul>
</div>
<div>
<h4 style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:16px;">Entertainment</h4>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li><a href="#" style="font-size:13px;color:var(--text-muted);">SupaTraxx Karaoke</a></li>
<li><a href="#" style="font-size:13px;color:var(--text-muted);">Venue Partners</a></li>
<li><a href="#" style="font-size:13px;color:var(--text-muted);">Event Bookings</a></li>
</ul>
</div>
<div>
<h4 style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:16px;">Legal</h4>
<ul style="list-style:none;display:flex;flex-direction:column;gap:10px;">
<li><a href="https://docs.oriondevcore.com/privacy" style="font-size:13px;color:var(--text-muted);">Privacy Policy (POPIA)</a></li>
<li><a href="https://docs.oriondevcore.com/privacy" style="font-size:13px;color:var(--text-muted);">Terms of Service</a></li>
<li><a href="https://docs.oriondevcore.com/naledi-privacy" style="font-size:13px;color:var(--text-muted);">Data Processing</a></li>
<li style="margin-top:16px;"><a href="https://wa.me/27703080516" style="font-size:13px;color:var(--text-muted);">Contact</a></li>
<li><a href="mailto:info@oriondevcore.com" style="font-size:13px;color:var(--text-muted);">Email</a></li>
</ul>
</div>
</div>
<div style="max-width:1200px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;">
<p style="font-size:11px;color:var(--text-dim);">© 2026 Orion Universe. All rights reserved. Built for the bold.</p>
<p style="font-size:11px;color:var(--text-dim);">POPIA compliant data handling · Secured AI processing</p>
</div>
</div>
</footer>
<div class="chat-fab" id="chatFab" aria-label="Open chat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</div>
<div class="chat-popup" id="chatPopup">
<div class="chat-popup-header">
<span>Naledi — ORION PRO</span>
<button class="chat-popup-close" id="chatClose" aria-label="Close chat">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="chat-popup-messages" id="chatPopupMessages">
<div class="chat-msg chat-msg-bot">Howzit. I'm Naledi, the AI behind ORION PRO. I'm your WhatsApp office manager. Ask me anything about pricing, features, or how I can help your business.</div>
</div>
<div class="naledi-typing" id="nalediTyping" style="display:none">Naledi is typing...</div>
<div class="chat-popup-input-wrap">
<input type="text" class="chat-popup-input" id="chatPopupInput" placeholder="Type a message..." autocomplete="off">
<button class="chat-popup-send" id="chatPopupSend" aria-label="Send">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polyline points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>