engineerkbc/digital-dynamo-hub-uganda
0
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>Our Services - TFast Digital</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: '#2563EB',15 secondary: '#059669',16 accent: '#F59E0B',17 dark: '#1F2937',18 light: '#F3F4F6'19 }20 }21 }22 }23 </script>24</head>25<body class="font-sans antialiased text-gray-800">26 <!-- Navigation -->27 <nav class="bg-white shadow-sm fixed w-full z-10">28 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">29 <div class="flex justify-between h-16">30 <div class="flex items-center">31 <div class="flex items-center">32 <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">33 <span class="text-white font-bold text-xl">T</span>34 </div>35 <span class="text-xl font-bold text-dark">TFast <span class="text-primary">Digital</span></span>36 </div>37 </div>38 <div class="hidden md:flex items-center space-x-8">39 <a href="index.html" class="text-dark hover:text-primary transition">Home</a>40 <a href="#services" class="text-primary font-medium">Services</a>41 <a href="webflow-development.html" class="text-dark hover:text-primary transition">Webflow Dev</a>42 <a href="#pricing" class="text-dark hover:text-primary transition">Pricing</a>43<a href="#about" class="text-dark hover:text-primary transition">About</a>44 <a href="#contact" class="text-dark hover:text-primary transition">Contact</a>45 <a href="/auth/signup" class="bg-secondary text-white px-6 py-2 rounded-lg hover:bg-green-700 transition flex items-center">46 <i data-feather="user-plus" class="mr-2 w-4 h-4"></i> Sign Up47 </a>48 </div>49<div class="md:hidden flex items-center">50 <button id="menu-toggle">51 <i data-feather="menu"></i>52 </button>53 </div>54 </div>55 </div>56 </nav>57 58 <!-- Services Hero -->59 <section class="pt-32 pb-20 bg-gradient-to-r from-primary to-secondary">60 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">61 <div class="text-center">62 <h1 class="text-4xl font-bold text-white mb-4">Our Digital Services</h1>63 <p class="text-xl text-white max-w-3xl mx-auto">Comprehensive solutions to accelerate your digital growth</p>64 </div>65 </div>66 </section>67 68 <!-- Services Grid -->69 <section id="services" class="py-20 bg-white">70 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">71 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">72 <!-- Web Design -->73 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">74 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">75 <i data-feather="layout" class="text-primary text-2xl"></i>76 </div>77 <h3 class="text-2xl font-semibold mb-4">Web Design & Development</h3>78 <p class="text-gray-600 mb-6">Custom, responsive websites that convert visitors into customers.</p>79 <ul class="space-y-3 mb-6">80 <li class="flex items-start">81 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>82 <span>Responsive Design</span>83 </li>84 <li class="flex items-start">85 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>86 <span>SEO Optimization</span>87 </li>88 <li class="flex items-start">89 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>90 <span>E-commerce Solutions</span>91 </li>92 </ul>93 <a href="#" class="text-primary font-medium flex items-center">94 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>95 </a>96 </div>97 98 <!-- App Development -->99 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">100 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">101 <i data-feather="smartphone" class="text-primary text-2xl"></i>102 </div>103 <h3 class="text-2xl font-semibold mb-4">Mobile App Development</h3>104 <p class="text-gray-600 mb-6">Native and cross-platform apps for iOS and Android.</p>105 <ul class="space-y-3 mb-6">106 <li class="flex items-start">107 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>108 <span>iOS & Android Apps</span>109 </li>110 <li class="flex items-start">111 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>112 <span>React Native Development</span>113 </li>114 <li class="flex items-start">115 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>116 <span>App Store Optimization</span>117 </li>118 </ul>119 <a href="#" class="text-primary font-medium flex items-center">120 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>121 </a>122 </div>123 124 <!-- SMM Boosting -->125 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">126 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">127 <i data-feather="users" class="text-primary text-2xl"></i>128 </div>129 <h3 class="text-2xl font-semibold mb-4">Social Media Boosting</h3>130 <p class="text-gray-600 mb-6">Grow your social media presence with real engagement.</p>131 <ul class="space-y-3 mb-6">132 <li class="flex items-start">133 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>134 <span>Instagram Followers/Likes</span>135 </li>136 <li class="flex items-start">137 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>138 <span>TikTok Views/Followers</span>139 </li>140 <li class="flex items-start">141 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>142 <span>YouTube Subscribers/Views</span>143 </li>144 </ul>145 <a href="#" class="text-primary font-medium flex items-center">146 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>147 </a>148 </div>149 150 <!-- Software Licensing -->151 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">152 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">153 <i data-feather="key" class="text-primary text-2xl"></i>154 </div>155 <h3 class="text-2xl font-semibold mb-4">Software Licensing</h3>156 <p class="text-gray-600 mb-6">Genuine software licenses at competitive prices.</p>157 <ul class="space-y-3 mb-6">158 <li class="flex items-start">159 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>160 <span>Windows OS Licenses</span>161 </li>162 <li class="flex items-start">163 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>164 <span>Microsoft Office</span>165 </li>166 <li class="flex items-start">167 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>168 <span>Antivirus Solutions</span>169 </li>170 </ul>171 <a href="#" class="text-primary font-medium flex items-center">172 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>173 </a>174 </div>175 176 <!-- GSM Tools -->177 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">178 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">179 <i data-feather="tool" class="text-primary text-2xl"></i>180 </div>181 <h3 class="text-2xl font-semibold mb-4">GSM Repair Tools</h3>182 <p class="text-gray-600 mb-6">Professional phone repair tools and services.</p>183 <ul class="space-y-3 mb-6">184 <li class="flex items-start">185 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>186 <span>UnlockTool Activation</span>187 </li>188 <li class="flex items-start">189 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>190 <span>Cheetah Pro License</span>191 </li>192 <li class="flex items-start">193 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>194 <span>IMEI Repair Services</span>195 </li>196 </ul>197 <a href="#" class="text-primary font-medium flex items-center">198 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>199 </a>200 </div>201 202 <!-- Custom Solutions -->203 <div class="bg-light p-8 rounded-xl shadow-md hover:shadow-xl transition">204 <div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-6">205 <i data-feather="cpu" class="text-primary text-2xl"></i>206 </div>207 <h3 class="text-2xl font-semibold mb-4">Custom Solutions</h3>208 <p class="text-gray-600 mb-6">Tailored digital solutions for your business needs.</p>209 <ul class="space-y-3 mb-6">210 <li class="flex items-start">211 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>212 <span>Custom Software</span>213 </li>214 <li class="flex items-start">215 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>216 <span>Business Automation</span>217 </li>218 <li class="flex items-start">219 <i data-feather="check" class="text-secondary mr-2 mt-1 w-4 h-4"></i>220 <span>Enterprise Solutions</span>221 </li>222 </ul>223 <a href="#" class="text-primary font-medium flex items-center">224 Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>225 </a>226 </div>227 </div>228 </div>229 </section>230 231 <!-- Pricing Section -->232 <section id="pricing" class="py-20 bg-light">233 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">234 <div class="text-center mb-16">235 <h2 class="text-3xl font-bold text-dark mb-4">Simple, Transparent Pricing</h2>236 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Quality services at competitive prices</p>237 </div>238 239 <div class="grid md:grid-cols-3 gap-8">240 <!-- Web Design Pricing -->241 <div class="bg-white p-8 rounded-xl shadow-md">242 <div class="text-center mb-6">243 <h3 class="text-2xl font-semibold mb-2">Web Design</h3>244 <p class="text-gray-600">Starting from</p>245 </div>246 <div class="text-center mb-6">247 <span class="text-4xl font-bold text-dark">UGX 500,000</span>248 </div>249 <ul class="space-y-3 mb-8">250 <li class="flex items-center">251 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>252 <span>Responsive Design</span>253 </li>254 <li class="flex items-center">255 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>256 <span>5+ Pages</span>257 </li>258 <li class="flex items-center">259 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>260 <span>SEO Basics</span>261 </li>262 <li class="flex items-center">263 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>264 <span>1 Year Support</span>265 </li>266 </ul>267 <a href="/auth/signup" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">268 Get Started269 </a>270</div>271 272 <!-- SMM Pricing -->273 <div class="bg-white p-8 rounded-xl shadow-md border-2 border-primary relative">274 <div class="absolute top-0 right-0 bg-primary text-white text-xs font-semibold px-3 py-1 rounded-bl-lg rounded-tr-lg">275 POPULAR276 </div>277 <div class="text-center mb-6">278 <h3 class="text-2xl font-semibold mb-2">SMM Boosting</h3>279 <p class="text-gray-600">Starting from</p>280 </div>281 <div class="text-center mb-6">282 <span class="text-4xl font-bold text-dark">UGX 50,000</span>283 </div>284 <ul class="space-y-3 mb-8">285 <li class="flex items-center">286 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>287 <span>1,000 Instagram Followers</span>288 </li>289 <li class="flex items-center">290 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>291 <span>5,000 TikTok Views</span>292 </li>293 <li class="flex items-center">294 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>295 <span>500 YouTube Subscribers</span>296 </li>297 <li class="flex items-center">298 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>299 <span>Fast Delivery</span>300 </li>301 </ul>302 <a href="/auth/signup" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">303 Boost Now304 </a>305</div>306 307 <!-- Software Pricing -->308 <div class="bg-white p-8 rounded-xl shadow-md">309 <div class="text-center mb-6">310 <h3 class="text-2xl font-semibold mb-2">Software Licenses</h3>311 <p class="text-gray-600">Starting from</p>312 </div>313 <div class="text-center mb-6">314 <span class="text-4xl font-bold text-dark">UGX 100,000</span>315 </div>316 <ul class="space-y-3 mb-8">317 <li class="flex items-center">318 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>319 <span>Windows 10/11 Pro</span>320 </li>321 <li class="flex items-center">322 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>323 <span>Microsoft Office 2021</span>324 </li>325 <li class="flex items-center">326 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>327 <span>Antivirus Solutions</span>328 </li>329 <li class="flex items-center">330 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>331 <span>Lifetime Activation</span>332 </li>333 </ul>334 <a href="/auth/signup" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">335 Buy License336 </a>337</div>338 </div>339 </div>340 </section>341 342 <!-- CTA Section -->343 <section id="cta" class="py-20 bg-dark text-white">344 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">345 <h2 class="text-4xl font-bold mb-6">Need Custom Solutions?</h2>346 <p class="text-xl mb-8 max-w-3xl mx-auto">Contact us for tailored services that fit your specific requirements.</p>347 <div class="flex flex-col sm:flex-row justify-center gap-4">348 <a href="/auth/signup" class="bg-accent text-dark px-8 py-3 rounded-lg font-medium hover:bg-yellow-500 transition flex items-center justify-center">349 <i data-feather="user-plus" class="mr-2 w-4 h-4"></i> Sign Up Free350 </a>351 <a href="tel:+256700123456" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">352 <i data-feather="phone" class="mr-2 w-4 h-4"></i> Call Now353 </a>354</div>355 </div>356 </section>357 358 <!-- Footer -->359 <footer class="bg-dark text-white py-16">360 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">361 <div class="grid md:grid-cols-4 gap-8">362 <div>363 <div class="flex items-center mb-6">364 <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">365 <span class="text-white font-bold text-xl">T</span>366 </div>367 <span class="text-xl font-bold text-white">TFast <span class="text-primary">Digital</span></span>368 </div>369 <p class="text-gray-400">Your trusted partner for digital solutions in Uganda and beyond.</p>370 </div>371 <div>372 <h4 class="text-lg font-semibold mb-4">Services</h4>373 <ul class="space-y-3">374 <li><a href="#services" class="text-gray-400 hover:text-white transition flex items-center">375 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> Web Design</a></li>376 <li><a href="#services" class="text-gray-400 hover:text-white transition flex items-center">377 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> App Development</a></li>378 <li><a href="#services" class="text-gray-400 hover:text-white transition flex items-center">379 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> SMM Boosting</a></li>380 </ul>381 </div>382 <div>383 <h4 class="text-lg font-semibold mb-4">Company</h4>384 <ul class="space-y-3">385 <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">386 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> About Us</a></li>387 <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">388 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> Our Team</a></li>389 <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center">390 <i data-feather="chevron-right" class="w-4 h-4 mr-2 text-primary"></i> Contact</a></li>391 </ul>392 </div>393 <div>394 <h4 class="text-lg font-semibold mb-4">Contact</h4>395 <ul class="space-y-3">396 <li class="flex items-start">397 <i data-feather="map-pin" class="text-primary mr-2 mt-1 w-4 h-4"></i>398 <span class="text-gray-400">Kampala, Uganda</span>399 </li>400 <li class="flex items-start">401 <i data-feather="phone" class="text-primary mr-2 mt-1 w-4 h-4"></i>402 <span class="text-gray-400">+256 700 123456</span>403 </li>404 <li class="flex items-start">405 <i data-feather="mail" class="text-primary mr-2 mt-1 w-4 h-4"></i>406 <span class="text-gray-400">info@tfastdigital.com</span>407 </li>408 </ul>409 </div>410 </div>411 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">412 <p>© 2024 TFast Digital Agency. All rights reserved.</p>413 </div>414 </div>415 </footer>416 417 <script>418 feather.replace();419 </script>420</body>421</html>