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>Webflow Development - 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 <style>25 .feature-card:hover {26 transform: translateY(-5px);27 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);28 }29 </style>30</head>31<body class="font-sans antialiased text-gray-800">32 <!-- Navigation -->33 <nav class="bg-white shadow-sm fixed w-full z-10">34 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">35 <div class="flex justify-between h-16">36 <div class="flex items-center">37 <a href="index.html" class="flex items-center">38 <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">39 <span class="text-white font-bold text-xl">T</span>40 </div>41 <span class="text-xl font-bold text-dark">TFast <span class="text-primary">Digital</span></span>42 </a>43 </div>44 <div class="hidden md:flex items-center space-x-8">45 <a href="index.html" class="text-dark hover:text-primary transition">Home</a>46 <a href="services.html" class="text-dark hover:text-primary transition">Services</a>47 <a href="webflow-development.html" class="text-primary font-medium">Webflow Dev</a>48 <a href="#portfolio" class="text-dark hover:text-primary transition">Portfolio</a>49 <a href="#contact" class="text-dark hover:text-primary transition">Contact</a>50 <a href="/auth/signup" class="bg-secondary text-white px-6 py-2 rounded-lg hover:bg-green-700 transition flex items-center">51 <i data-feather="user-plus" class="mr-2 w-4 h-4"></i> Get Started52 </a>53 </div>54 <div class="md:hidden flex items-center">55 <button id="menu-toggle">56 <i data-feather="menu"></i>57 </button>58 </div>59 </div>60 </div>61 </nav>62 63 <!-- Hero Section -->64 <section class="pt-32 pb-20 bg-gradient-to-br from-blue-50 to-indigo-50">65 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">66 <div class="text-center">67 <h1 class="text-4xl md:text-5xl font-bold text-dark mb-6">Pixel-Perfect Webflow Development</h1>68 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Your designer's favorite web developer. We build Figma, Sketch & Adobe XD designs pixel-perfect in Webflow.</p>69 <div class="mt-8 flex justify-center space-x-4">70 <a href="#contact" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center">71 Get a Quote <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>72 </a>73 </div>74 </div>75 </div>76 </section>77 78 <!-- Features Section -->79 <section class="py-20 bg-white">80 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">81 <div class="grid md:grid-cols-3 gap-8">82 <div class="bg-white p-8 rounded-xl border border-gray-100 feature-card transition">83 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-6">84 <i data-feather="eye" class="text-primary"></i>85 </div>86 <h3 class="text-xl font-semibold mb-4">Attention to detail</h3>87 <p class="text-gray-600">Many developers cringe at pixel perfection. Not us - we live and breathe pixels and understand the effort to make a website beautiful.</p>88 </div>89 <div class="bg-white p-8 rounded-xl border border-gray-100 feature-card transition">90 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-6">91 <i data-feather="thumbs-up" class="text-primary"></i>92 </div>93 <h3 class="text-xl font-semibold mb-4">No headaches</h3>94 <p class="text-gray-600">Gone are the days of back-and-forth with developers. We get it right the first time, saving you time and frustration.</p>95 </div>96 <div class="bg-white p-8 rounded-xl border border-gray-100 feature-card transition">97 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-6">98 <i data-feather="zap" class="text-primary"></i>99 </div>100 <h3 class="text-xl font-semibold mb-4">Fast execution</h3>101 <p class="text-gray-600">As highly experienced Webflow developers, we build your website in 2-4 weeks depending on design complexity.</p>102 </div>103 </div>104 </div>105 </section>106 107 <!-- Process Section -->108 <section class="py-20 bg-gray-50">109 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">110 <div class="text-center mb-16">111 <h2 class="text-3xl font-bold text-dark mb-4">How It Works</h2>112 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our streamlined Webflow development process</p>113 </div>114 115 <div class="grid md:grid-cols-5 gap-8">116 <div class="text-center">117 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">118 <span class="text-2xl font-bold text-primary">1</span>119 </div>120 <h3 class="text-lg font-semibold mb-2">Share your designs</h3>121 <p class="text-gray-600">We review your Figma/Sketch/XD designs and provide a fixed-price quote and timeline.</p>122 </div>123 <div class="text-center">124 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">125 <span class="text-2xl font-bold text-primary">2</span>126 </div>127 <h3 class="text-lg font-semibold mb-2">Begin development</h3>128 <p class="text-gray-600">We start building each page across mobile, tablet and desktop.</p>129 </div>130 <div class="text-center">131 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">132 <span class="text-2xl font-bold text-primary">3</span>133 </div>134 <h3 class="text-lg font-semibold mb-2">Provide feedback</h3>135 <p class="text-gray-600">Review the staging site and provide feedback for final polish.</p>136 </div>137 <div class="text-center">138 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">139 <span class="text-2xl font-bold text-primary">4</span>140 </div>141 <h3 class="text-lg font-semibold mb-2">Training & support</h3>142 <p class="text-gray-600">We provide Webflow training and 30-day post-launch support.</p>143 </div>144 <div class="text-center">145 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">146 <span class="text-2xl font-bold text-primary">5</span>147 </div>148 <h3 class="text-lg font-semibold mb-2">Launch</h3>149 <p class="text-gray-600">We transfer the site to your Webflow account and domain.</p>150 </div>151 </div>152 </div>153 </section>154 155 <!-- Portfolio Section -->156 <section class="py-20 bg-white">157 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">158 <div class="text-center mb-16">159 <h2 class="text-3xl font-bold text-dark mb-4">Webflow Projects</h2>160 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Pixel-perfect implementations of designer mockups</p>161 </div>162 163 <div class="grid md:grid-cols-3 gap-8">164 <div class="bg-white rounded-xl overflow-hidden shadow-md">165 <img src="https://static.photos/technology/640x360/1" alt="Webflow Project" class="w-full h-48 object-cover">166 <div class="p-6">167 <h3 class="text-xl font-semibold mb-2">Good Housing</h3>168 <p class="text-gray-600 mb-4">Construction Company</p>169 <div class="flex justify-between items-center">170 <a href="#" class="text-primary font-medium">View Project</a>171 <span class="text-sm text-gray-500">Webflow</span>172 </div>173 </div>174 </div>175 <div class="bg-white rounded-xl overflow-hidden shadow-md">176 <img src="https://static.photos/technology/640x360/2" alt="Webflow Project" class="w-full h-48 object-cover">177 <div class="p-6">178 <h3 class="text-xl font-semibold mb-2">Laura Avery</h3>179 <p class="text-gray-600 mb-4">Skincare Studio</p>180 <div class="flex justify-between items-center">181 <a href="#" class="text-primary font-medium">View Project</a>182 <span class="text-sm text-gray-500">Webflow</span>183 </div>184 </div>185 </div>186 <div class="bg-white rounded-xl overflow-hidden shadow-md">187 <img src="https://static.photos/technology/640x360/3" alt="Webflow Project" class="w-full h-48 object-cover">188 <div class="p-6">189 <h3 class="text-xl font-semibold mb-2">Yolo Media</h3>190 <p class="text-gray-600 mb-4">Creative Agency</p>191 <div class="flex justify-between items-center">192 <a href="#" class="text-primary font-medium">View Project</a>193 <span class="text-sm text-gray-500">Webflow</span>194 </div>195 </div>196 </div>197 </div>198 </div>199 </section>200 201 <!-- Pricing Section -->202 <section class="py-20 bg-gray-50">203 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">204 <div class="text-center mb-16">205 <h2 class="text-3xl font-bold text-dark mb-4">Pricing</h2>206 <p class="text-xl text-gray-600 max-w-3xl mx-auto">Simple per-page pricing for Webflow development</p>207 </div>208 209 <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">210 <div class="bg-white p-8 rounded-xl shadow-sm">211 <h3 class="text-xl font-semibold mb-4">Basic Page</h3>212 <p class="text-4xl font-bold text-primary mb-6">$1,000+</p>213 <ul class="space-y-3 mb-8">214 <li class="flex items-center">215 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>216 <span>Simple layouts</span>217 </li>218 <li class="flex items-center">219 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>220 <span>Basic animations</span>221 </li>222 <li class="flex items-center">223 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>224 <span>Responsive design</span>225 </li>226 </ul>227 <a href="#contact" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">228 Get Started229 </a>230 </div>231 <div class="bg-white p-8 rounded-xl shadow-sm border-2 border-primary relative">232 <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">233 POPULAR234 </div>235 <h3 class="text-xl font-semibold mb-4">Advanced Page</h3>236 <p class="text-4xl font-bold text-primary mb-6">$2,500+</p>237 <ul class="space-y-3 mb-8">238 <li class="flex items-center">239 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>240 <span>Complex layouts</span>241 </li>242 <li class="flex items-center">243 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>244 <span>Advanced animations</span>245 </li>246 <li class="flex items-center">247 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>248 <span>CMS implementation</span>249 </li>250 </ul>251 <a href="#contact" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">252 Get Started253 </a>254 </div>255 <div class="bg-white p-8 rounded-xl shadow-sm">256 <h3 class="text-xl font-semibold mb-4">Very Advanced</h3>257 <p class="text-4xl font-bold text-primary mb-6">$4,000+</p>258 <ul class="space-y-3 mb-8">259 <li class="flex items-center">260 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>261 <span>Custom interactions</span>262 </li>263 <li class="flex items-center">264 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>265 <span>Complex CMS</span>266 </li>267 <li class="flex items-center">268 <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>269 <span>Platform integrations</span>270 </li>271 </ul>272 <a href="#contact" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">273 Get Started274 </a>275 </div>276 </div>277 </div>278 </section>279 280 <!-- CTA Section -->281 <section id="contact" class="py-20 bg-dark text-white">282 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">283 <div class="max-w-3xl mx-auto text-center">284 <h2 class="text-3xl font-bold mb-6">Start Your Webflow Project</h2>285 <p class="text-xl mb-8">Ready to bring your designs to life with pixel-perfect Webflow development?</p>286 <div class="flex flex-col sm:flex-row justify-center gap-4">287 <a href="/auth/signup" class="bg-primary text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center">288 <i data-feather="mail" class="mr-2 w-5 h-5"></i> Contact Us289 </a>290 <a href="tel:+256700123456" class="bg-white text-dark px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition flex items-center justify-center">291 <i data-feather="phone" class="mr-2 w-5 h-5"></i> Call Now292 </a>293 </div>294 </div>295 </div>296 </section>297 298 <!-- Footer -->299 <footer class="bg-gray-900 text-white py-16">300 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">301 <div class="grid md:grid-cols-4 gap-8">302 <div>303 <div class="flex items-center mb-6">304 <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">305 <span class="text-white font-bold text-xl">T</span>306 </div>307 <span class="text-xl font-bold text-white">TFast <span class="text-primary">Digital</span></span>308 </div>309 <p class="text-gray-400 mb-6">Pixel-perfect Webflow development for designers and agencies.</p>310 </div>311 <div>312 <h4 class="text-lg font-semibold mb-4">Services</h4>313 <ul class="space-y-3">314 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Web Design</a></li>315 <li><a href="services.html" class="text-gray-400 hover:text-white transition">App Development</a></li>316 <li><a href="webflow-development.html" class="text-gray-400 hover:text-white transition">Webflow Development</a></li>317 <li><a href="services.html" class="text-gray-400 hover:text-white transition">Social Media Marketing</a></li>318 </ul>319 </div>320 <div>321 <h4 class="text-lg font-semibold mb-4">Company</h4>322 <ul class="space-y-3">323 <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>324 <li><a href="#" class="text-gray-400 hover:text-white transition">Our Team</a></li>325 <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>326 </ul>327 </div>328 <div>329 <h4 class="text-lg font-semibold mb-4">Contact</h4>330 <ul class="space-y-3">331 <li class="flex items-start">332 <i data-feather="map-pin" class="text-primary mr-2 mt-1 w-4 h-4"></i>333 <span class="text-gray-400">Kampala, Uganda</span>334 </li>335 <li class="flex items-start">336 <i data-feather="phone" class="text-primary mr-2 mt-1 w-4 h-4"></i>337 <span class="text-gray-400">+256 700 123456</span>338 </li>339 <li class="flex items-start">340 <i data-feather="mail" class="text-primary mr-2 mt-1 w-4 h-4"></i>341 <span class="text-gray-400">webflow@tfastdigital.com</span>342 </li>343 </ul>344 </div>345 </div>346 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">347 <p>© 2024 TFast Digital. All rights reserved.</p>348 </div>349 </div>350 </footer>351 352 <script>353 feather.replace();354 </script>355</body>356</html>