-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
349 lines (305 loc) · 18.5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LaunchSUV - Kenyan Developer Boilerplate</title>
<meta name="description" content="LaunchSUV is a boilerplate for Kenyan developers featuring Mpesa integration, database storage, user authentication, and a good landing page to quickly their launch commercial solutions
after they have finished building
solutions.">
<meta name="keywords" content="LaunchSUV.KE, launch suv ,Kenyan developers, boilerplate, Mpesa integration, database storage, user authentication, landing page">
<meta name="google-site-verification" content="9eWCEpFv_rjDWC4Fm-mn7-91SiifB-GbaH-gI-oRoUI" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<!-- Open Graph Tags -->
<meta property="og:title" content="LaunchSUV - Kenyan Developer Boilerplate">
<meta property="og:description" content="LaunchSUV is a boilerplate for Kenyan developers featuring Mpesa integration, database storage, user authentication, and a good landing page to quickly launch their commercial
projects or solutions as quickly as possibly without having to start from scratch across all popular tech stacks.">
<meta property="og:image" content="https://neshjesse.github.io/landin/assets/Launch SUV Poster.png">
<meta property="og:url" content="https://neshjesse.github.io/landin/">
<meta property="og:type" content="website">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="LaunchSUV - Kenyan Developer Boilerplate">
<meta name="twitter:description" content="LaunchSUV is a boilerplate for Kenyan developers featuring Mpesa integration, database storage, user authentication, and a good landing page to quickly launch their commercial
projects or solutions as quickly as possibly without having to start from scratch across all popular tech stacks.">
<meta name="twitter:image" content="https://neshjesse.github.io/landin/assets/Launch SUV Poster.png">
<!-- Google Analytics -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BGY3CK9D46"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BGY3CK9D46');
</script>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Navbar -->
<nav class="bg-white shadow-md">
<div class="container mx-auto p-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold flex items-center">
<img src="assets/monlo.png" alt="Logo" class="h-8 w-8 mr-2">
LaunchSUV OPEN SOURCE INITIATIVE
</a>
<div class="hidden md:flex space-x-6">
<a href="#features" class="text-gray-700 hover:text-gray-900">Features</a>
<a href="#demo" class="text-gray-700 hover:text-gray-900">Demo</a>
<a href="#testimonials" class="text-gray-700 hover:text-gray-900">Testimonials</a>
<a href="#pricing" class="text-gray-700 hover:text-gray-900">Pricing</a>
<a href="#get-started" class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600">Get Started</a>
</div>
<button id="menu-btn" class="block md:hidden focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div id="menu" class="hidden md:hidden bg-white shadow-md">
<a href="#features" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Features</a>
<a href="#demo" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Demo</a>
<a href="#testimonials" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Testimonials</a>
<a href="#pricing" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Pricing</a>
</div>
</nav>
<header class="text-center py-10 bg-white shadow flex flex-col md:flex-row items-center my-6">
<div class="">
<h1 class="text-4xl font-bold">Launch your solution as fast as possible</h1>
<p class="mt-4 text-xl">The Boilerplate with all the necessary features a Kenyan developer needs
to launch their solution
</p>
<a href="#get-started" class="mt-6 inline-block bg-blue-500 text-white font-bold py-2 px-4 w-40 rounded hover:bg-blue-600">Get Started</a>
<p class="text-xl text-green-600 my-4">425 Kenyan devs will now be launching projects faster for the rest of their lives</p>
</div>
<div class="md:w-1/2 mt-6 md:mt-0">
<img src="assets/launch.png" alt="Launch Image" class="rounded shadow">
</div>
</header>
<main class="container mx-auto p-6">
<section id="get-started" class="my-8 bg-white p-6 shadow rounded text-center">
<h2 class="text-3xl font-semibold text-center">To Get Started</h2>
<ol class="list-decimal list-inside space-y-2 text-center">
<li class="py-3">Request Access</li>
<li class="py-3">Remember to specify your tech stack</li>
<li class="py-3">Get Access</li>
<li class="py-3">git clone <your-chosen-tech-stack>launchsuv</li>
</ol>
</section>
<!-- Features section -->
<section id="features" class="my-10">
<h2 class="text-3xl font-semibold text-center mb-6">Key Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 shadow rounded">
<h3 class="text-xl font-bold mb-2">Front-Wheels</h3>
<div class="flex items-center mb-4">
<img src="assets/land.png" alt="Landing Page" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">Landing Page</h4>
<p>A conversion optimised landing page</p>
</div>
</div>
<div class="flex items-center mb-4">
<img src="assets/mpesa.png" alt="Mpesa STK Push" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">Mpesa STK Push</h4>
<p>Collect Payments with Mpesa STK Push already Integrated</p>
</div>
</div>
<div class="flex items-center mb-4">
<img src="assets/docu.jpeg" alt="Good Documentation" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">Good Documentation</h4>
<p>Detailed and developer friendly documentation and a ton of readme.mds for a good developer experience</p>
</div>
</div>
</div>
<div class="bg-white p-6 shadow rounded">
<h3 class="text-xl font-bold mb-2">Back-Wheels</h3>
<div class="flex items-center mb-4">
<img src="assets/mongo.png" alt="MongoDB Database" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">MongoDB Database</h4>
<p>MongoDB database to store mpesa transactions & data</p>
</div>
</div>
<div class="flex items-center mb-4">
<img src="assets/auth.jpeg" alt="User Auth& Onboarding" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">User Auth& Onboarding</h4>
<p>Authenticate your users Choose between Google Sign In and the normal user signup and login formats</p>
</div>
</div>
</div>
<div class="bg-white p-6 shadow rounded">
<h3 class="text-xl font-bold mb-2">Spare-Wheels</h3>
<div class="flex items-center mb-4">
<img src="assets/mysql.jpeg" alt="MySQL Database" class="h-10 w-10 mr-3">
<div>
<h4 class="text-lg font-bold">MySQL Database</h4>
<p>Use MySQL database to store Mpesa transactions & data</p>
</div>
</div>
</div>
</div>
</section>
<!--Developer notes-->
<section id="developer" class="my-10">
<h2 class="text-3xl font-semibold text-center mb-6">Hello I am Jesse Nehemiah</h2>
<p class="py-2">
Throughout my years,I have always fantasized about being the next Larry page. After finishing high school,
I had a bucket load of ideas about apps and soft-wares that I wanted to build and get rich.I built only a tiny fraction
of them ,spent more time than I expected and still got 0 users,some even left unfinished,some succeeded.
</p>
<p class="py-2">
I even tried to built a startup that was to have Kenyan banks as the customer.
A few years after my burnout, I restarted the journey differently after learning:
</p>
<ul class="list-disc list-inside pl-5 space-y-2 mb-6">
<li>I realized that no need to start from scratch, millions of templates already existed.</li>
<li>After building, the real work begins, marketing and getting somebody to give you their hard-earned money.</li>
<li>A good landing page shows professionality , builds trust for B2B and is a faster form of distribution</li>
<li>Collecting payments is key for any developer out there.</li>
<li>Free-trials kill projects and only work for VC-Backed companies or large upfront investment,
Only 3 out of 100 visitors buy your product!!</li>
<li>Waitlist ++ landing pages are gold time savers.</li>
</ul>
<p class="text-2xl mb-6">I built LaunchSUV for many reasons but the key ones are:</p>
<ul class="list-disc list-inside pl-5 space-y-2">
<li>Save time and focus on what matters: building and promoting your business</li>
<li>Get profitable fast—the more you ship, the more you learn, the more you earn</li>
</ul>
</section>
<!--Demonstration Video section-->
<section id="demo" class="my-10">
</section>
<!--Testimonials-->
<section id="testimonials" class="my-10">
<h2 class="text-2xl font-semibold text-center mb-6">LaunchSUV has been trusted by Kenyans
since we launched on 23RD MAY
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 shadow rounded">
<h3 class="text-4xl text-green-600 font-bold mb-2">210 +</h3>
<p>Get your application live instantly with our free hosting services.</p>
</div>
<div class="bg-white p-6 shadow rounded">
<h3 class="text-4xl text-green-600 font-bold mb-2">125+</h3>
<p>Automate your backend tasks and workflows with ease.</p>
</div>
<div class="bg-white p-6 shadow rounded">
<h3 class="text-4xl text-green-600 font-bold mb-2">90+</h3>
<p>Create single-page applications with our streamlined tools.</p>
</div>
</div>
</section>
<!-- End of new section -->
<section id="pricing" class="my-10">
<h2 class="text-3xl font-semibold text-center mb-6">Pricing</h2>
<p class="text-2xl bg-white py-4 p-6 text-center">
Save hours of repeatitive code,ship fast and get profitable
FOR FREE GODAMIT
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 shadow rounded text-center">
<h3 class="text-xl font-bold mb-2">Mini SUV</h3>
<p class="text-green-600 font-semibold text-2xl mb-2">Ksh. 1200/Buy Once</p>
<p>Front-Wheels</p>
<p>Back-Wheels</p>
<p>Great Documentation</p>
<a class="mb-2 text-2xl text-green-600 font-semibold" href="https://forms.gle/R21R4Hs25BSLQHQcA">
Get Access</a>
</div>
<div class="bg-white p-6 shadow rounded text-center mx-auto">
<h3 class="text-xl font-bold mb-2">Medium SUV</h3>
<p>Front-Wheels</p>
<p>Back-Wheels</p>
<p>Spare-Wheels</p>
<p>Great Documentation</p>
<a class="mb-4 text-2xl text-green-600 font-semibold"
href="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/NeshJesse/landin">
Get Access</a>
</div>
<div class="bg-white p-6 shadow rounded text-center mx-auto">
<h3 class="text-xl font-bold mb-2">Full SUV</h3>
<p>Front-Wheels</p>
<p>Back-Wheels</p>
<p>Spare-Wheels</p>
<p>Great Documentation</p>
<p>Lifetime Updates</p>
<p>Available Support</p>
<a class="mb-4 text-2xl text-green-600 font-semibold"
href="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/NeshJesse/landin">
Get Access</a>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="my-10">
<h2 class="text-3xl font-semibold text-center mb-6">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="bg-white p-6 shadow rounded">
<div class="flex">
<p class="w-full text-left font-bold text-lg focus:outline-none">
What is a Boilerplate?
</p>
<button onclick="toggleFaq('faq0')">Click</button>
</div>
<div id="faq0" class="hidden mt-2">
<p>"Think of a boilerplate in web development like a ready-made Lego set.
Imagine you want to build a cool Lego spaceship. You could start from scratch, looking for all the right pieces and figuring out how to put them together on your own. That would take a lot of time and effort. But if you had a Lego kit that already has all the pieces you need and instructions on how to build the spaceship, you could get started right away and finish your spaceship much faster.
In web development, a boilerplate is like that Lego kit. It's a starter set of code that has the basic parts already put together, so you don't have to start from nothing every time you want to build a new website or web app. It includes common features and tools that most websites need, like ways to handle user logins, databases, and payments. This way, developers can focus on adding the unique parts that make their website special, instead of spending time on the basic setup.
So, a boilerplate is a handy tool that makes building websites quicker and easier, just like a Lego kit makes building a spaceship faster and more fun!."</p>
</div>
</div>
<div class="bg-white p-6 shadow rounded">
<div class="flex">
<p class="w-full text-left font-bold text-lg focus:outline-none">
What is a LaunchSUV?
</p>
<button onclick="toggleFaq('faq1')">Click</button>
</div>
<div id="faq1" class="hidden mt-2">
<p>"LaunchSUV is a boilerplate for Kenyan developers featuring Mpesa integration, database storage, user authentication, and a good landing page to quickly launch their commercial
projects or solutions as quickly as possibly without having to start from scratch across all popular tech stacks."</p>
</div>
</div>
<div class="bg-white p-6 shadow rounded">
<div class="flex">
<p class="w-full text-left font-bold text-lg focus:outline-none">
Can I request any specific part
</p>
<button class="" onclick="toggleFaq('faq3')">Click</button>
</div>
<div id="faq3" class="hidden mt-2">
<p>Yes, you can request any specific part according to your own requirements.</p>
</div>
</div>
</div>
<p class="mb-5 py-4 text-xl">
Got any more questions reach out via this
<a class="text-green-600" href="https://forms.gle/R21R4Hs25BSLQHQcA">Contact Form</a>
</p>
</section>
<!-- End of FAQ Section -->
<section class="my-10">
<h2 class="text-3xl font-semibold text-center mb-6">Coming soon</h2>
<div class="text-center">
<p class="text-2xl text-green-600">New features like email automation and tools are on the way. Stay tuned!</p>
</div>
</section>
<footer class="text-center py-6 bg-gray-800 text-white">
<p>© 2024 LaunchSUV. All rights reserved.</p>
</footer>
</main>
<script>
const menuBtn = document.getElementById('menu-btn');
const menu = document.getElementById('menu');
menuBtn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
function toggleFaq(id) {
const faq = document.getElementById(id);
faq.classList.toggle('hidden');
}
</script>
</body>
</html>