KoreanSexy/devforge-digital-forge
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>DevForge - Crafting Digital Success</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="components/navbar.js"></script>12 <script src="components/footer.js"></script>13 <script src="components/modal.js"></script>14 <script>15 tailwind.config = {16 darkMode: 'class',17 theme: {18 extend: {19 colors: {20 primary: '#8B5CF6',21 secondary: '#EC4899',22 dark: '#0F172A',23 darker: '#020617'24 }25 }26 }27 }28 </script>29</head>30<body class="bg-darker text-gray-200 font-sans antialiased">31 <custom-navbar></custom-navbar>32 33 <main>34 <!-- Hero Section -->35 <section class="relative h-screen flex items-center justify-center bg-gradient-to-br from-dark to-darker overflow-hidden">36 <div class="absolute inset-0 opacity-20">37 <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-30"></div>38 </div>39 <div class="container mx-auto px-6 z-10 text-center">40 <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">41 We Don't Just Write Code42 </h1>43 <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 opacity-90">44 We forge digital tools that propel your business into the future45 </p>46 <div class="flex gap-4 justify-center">47 <a href="#contact" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-medium hover:shadow-lg hover:shadow-primary/30 transition-all">48 Start Your Project49 </a>50 <a href="#services" class="px-8 py-4 border border-primary text-primary rounded-full font-medium hover:bg-primary/10 transition-all">51 Explore Services52 </a>53 </div>54 </div>55 <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">56 <a href="#about" class="text-gray-400 hover:text-white">57 <i data-feather="chevron-down" class="w-8 h-8"></i>58 </a>59 </div>60 </section>61 62 <!-- About Section -->63 <section id="about" class="py-20 bg-dark">64 <div class="container mx-auto px-6">65 <div class="max-w-4xl mx-auto text-center mb-16">66 <h2 class="text-4xl font-bold mb-6">We don't just write code. We create tools for your success.</h2>67 <p class="text-lg opacity-90">68 At DevForge, we combine technical expertise with business acumen to deliver solutions that drive real results. Our team of passionate developers, designers, and strategists work together to turn your vision into reality.69 </p>70 </div>71 72 <div class="grid md:grid-cols-3 gap-8">73 <div class="bg-darker p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all">74 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">75 <i data-feather="layers" class="text-primary"></i>76 </div>77 <h3 class="text-xl font-bold mb-3">Deep Expertise</h3>78 <p class="opacity-80">79 Years of experience across industries and technologies ensure we always choose the right tools for your specific needs.80 </p>81 </div>82 83 <div class="bg-darker p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all">84 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">85 <i data-feather="eye" class="text-primary"></i>86 </div>87 <h3 class="text-xl font-bold mb-3">Complete Transparency</h3>88 <p class="opacity-80">89 No hidden costs or surprises. We keep you informed at every stage with clear communication and regular updates.90 </p>91 </div>92 93 <div class="bg-darker p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all">94 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">95 <i data-feather="shield" class="text-primary"></i>96 </div>97 <h3 class="text-xl font-bold mb-3">Long-term Support</h3>98 <p class="opacity-80">99 Our relationship doesn't end at launch. We provide ongoing support to ensure your solution continues to perform.100 </p>101 </div>102 </div>103 </div>104 </section>105 106 <!-- Services Section -->107 <section id="services" class="py-20 bg-darker">108 <div class="container mx-auto px-6">109 <div class="max-w-2xl mx-auto text-center mb-16">110 <h2 class="text-4xl font-bold mb-6">Our Services</h2>111 <p class="text-lg opacity-90">112 Comprehensive solutions tailored to your business needs at every stage of digital transformation.113 </p>114 </div>115 116 <div class="grid md:grid-cols-2 gap-8">117 <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group">118 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-all">119 <i data-feather="code" class="text-primary"></i>120 </div>121 <h3 class="text-2xl font-bold mb-3">Custom Development</h3>122 <p class="opacity-80 mb-4">123 Bespoke software solutions built from scratch to perfectly match your business requirements and workflows.124 </p>125 <ul class="space-y-2">126 <li class="flex items-center">127 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>128 <span>Web Applications</span>129 </li>130 <li class="flex items-center">131 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>132 <span>Enterprise Systems</span>133 </li>134 <li class="flex items-center">135 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>136 <span>API Development</span>137 </li>138 </ul>139 </div>140 141 <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group">142 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-all">143 <i data-feather="refresh-cw" class="text-primary"></i>144 </div>145 <h3 class="text-2xl font-bold mb-3">Refactoring & Improvement</h3>146 <p class="opacity-80 mb-4">147 Modernize and optimize existing systems for better performance, security, and maintainability.148 </p>149 <ul class="space-y-2">150 <li class="flex items-center">151 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>152 <span>Code Optimization</span>153 </li>154 <li class="flex items-center">155 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>156 <span>Feature Implementation</span>157 </li>158 <li class="flex items-center">159 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>160 <span>Legacy System Modernization</span>161 </li>162 </ul>163 </div>164 165 <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group">166 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-all">167 <i data-feather="search" class="text-primary"></i>168 </div>169 <h3 class="text-2xl font-bold mb-3">Technical Audit</h3>170 <p class="opacity-80 mb-4">171 Comprehensive evaluation of your current technology stack with actionable recommendations.172 </p>173 <ul class="space-y-2">174 <li class="flex items-center">175 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>176 <span>Security Assessment</span>177 </li>178 <li class="flex items-center">179 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>180 <span>Performance Analysis</span>181 </li>182 <li class="flex items-center">183 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>184 <span>Architecture Review</span>185 </li>186 </ul>187 </div>188 189 <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group">190 <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-all">191 <i data-feather="cloud" class="text-primary"></i>192 </div>193 <h3 class="text-2xl font-bold mb-3">DevOps & Cloud</h3>194 <p class="opacity-80 mb-4">195 Streamline your development and deployment processes with our cloud infrastructure expertise.196 </p>197 <ul class="space-y-2">198 <li class="flex items-center">199 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>200 <span>CI/CD Pipeline Setup</span>201 </li>202 <li class="flex items-center">203 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>204 <span>Cloud Migration</span>205 </li>206 <li class="flex items-center">207 <i data-feather="check" class="w-4 h-4 mr-2 text-primary"></i>208 <span>Infrastructure as Code</span>209 </li>210 </ul>211 </div>212 </div>213 </div>214 </section>215 216 <!-- Process Section -->217 <section class="py-20 bg-dark">218 <div class="container mx-auto px-6">219 <div class="max-w-2xl mx-auto text-center mb-16">220 <h2 class="text-4xl font-bold mb-6">Our Work Process</h2>221 <p class="text-lg opacity-90">222 A structured approach that ensures quality and efficiency at every stage of your project.223 </p>224 </div>225 226 <div class="relative">227 <div class="absolute left-1/2 top-0 h-full w-0.5 bg-gradient-to-b from-primary to-secondary transform -translate-x-1/2 hidden md:block"></div>228 229 <div class="space-y-16 md:space-y-0">230 <div class="relative flex flex-col md:flex-row items-center justify-between process-step">231 <div class="flex-1 md:pr-16 mb-8 md:mb-0 text-right">232 <h3 class="text-2xl font-bold mb-3">Discovery & Planning</h3>233 <p class="opacity-80">234 We start by deeply understanding your business goals, target audience, and technical requirements to create a comprehensive project roadmap.235 </p>236 </div>237 <div class="w-16 h-16 rounded-full bg-primary/10 border-2 border-primary flex items-center justify-center shrink-0">238 <span class="text-2xl font-bold text-primary">1</span>239 </div>240 <div class="flex-1 md:pl-16 mt-8 md:mt-0 text-left">241 <div class="bg-darker p-6 rounded-xl">242 <h4 class="font-bold mb-2 flex items-center">243 <i data-feather="target" class="w-5 h-5 mr-2 text-primary"></i>244 Deliverables245 </h4>246 <ul class="space-y-2 text-sm">247 <li>Project Specification Document</li>248 <li>Technical Architecture</li>249 <li>Timeline & Milestones</li>250 </ul>251 </div>252 </div>253 </div>254 255 <div class="relative flex flex-col md:flex-row items-center justify-between process-step">256 <div class="flex-1 md:pr-16 mb-8 md:mb-0 text-right order-3 md:order-1">257 <div class="bg-darker p-6 rounded-xl">258 <h4 class="font-bold mb-2 flex items-center">259 <i data-feather="target" class="w-5 h-5 mr-2 text-primary"></i>260 Deliverables261 </h4>262 <ul class="space-y-2 text-sm">263 <li>UI/UX Design Mockups</li>264 <li>Interactive Prototypes</li>265 <li>Design System</li>266 </ul>267 </div>268 </div>269 <div class="w-16 h-16 rounded-full bg-primary/10 border-2 border-primary flex items-center justify-center shrink-0 order-2">270 <span class="text-2xl font-bold text-primary">2</span>271 </div>272 <div class="flex-1 md:pl-16 mt-8 md:mt-0 text-left order-1 md:order-3">273 <h3 class="text-2xl font-bold mb-3">Design & Prototyping</h3>274 <p class="opacity-80">275 Our designers create intuitive user interfaces and experiences, validated through interactive prototypes before development begins.276 </p>277 </div>278 </div>279 280 <div class="relative flex flex-col md:flex-row items-center justify-between process-step">281 <div class="flex-1 md:pr-16 mb-8 md:mb-0 text-right">282 <h3 class="text-2xl font-bold mb-3">Development & Testing</h3>283 <p class="opacity-80">284 Agile development process with continuous integration, regular demos, and comprehensive testing to ensure quality and functionality.285 </p>286 </div>287 <div class="w-16 h-16 rounded-full bg-primary/10 border-2 border-primary flex items-center justify-center shrink-0">288 <span class="text-2xl font-bold text-primary">3</span>289 </div>290 <div class="flex-1 md:pl-16 mt-8 md:mt-0 text-left">291 <div class="bg-darker p-6 rounded-xl">292 <h4 class="font-bold mb-2 flex items-center">293 <i data-feather="target" class="w-5 h-5 mr-2 text-primary"></i>294 Deliverables295 </h4>296 <ul class="space-y-2 text-sm">297 <li>Weekly Development Updates</li>298 <li>Test Reports</li>299 <li>Staging Environment</li>300 </ul>301 </div>302 </div>303 </div>304 305 <div class="relative flex flex-col md:flex-row items-center justify-between process-step">306 <div class="flex-1 md:pr-16 mb-8 md:mb-0 text-right order-3 md:order-1">307 <div class="bg-darker p-6 rounded-xl">308 <h4 class="font-bold mb-2 flex items-center">309 <i data-feather="target" class="w-5 h-5 mr-2 text-primary"></i>310 Deliverables311 </h4>312 <ul class="space-y-2 text-sm">313 <li>Production Deployment</li>314 <li>User Training</li>315 <li>Support Plan</li>316 </ul>317 </div>318 </div>319 <div class="w-16 h-16 rounded-full bg-primary/10 border-2 border-primary flex items-center justify-center shrink-0 order-2">320 <span class="text-2xl font-bold text-primary">4</span>321 </div>322 <div class="flex-1 md:pl-16 mt-8 md:mt-0 text-left order-1 md:order-3">323 <h3 class="text-2xl font-bold mb-3">Launch & Support</h3>324 <p class="opacity-80">325 Smooth deployment to production followed by monitoring, optimization, and ongoing support to ensure long-term success.326 </p>327 </div>328 </div>329 </div>330 </div>331 </div>332 </section>333 334 <!-- Portfolio Section -->335 <section class="py-20 bg-darker">336 <div class="container mx-auto px-6">337 <div class="max-w-2xl mx-auto text-center mb-16">338 <h2 class="text-4xl font-bold mb-6">Our Work</h2>339 <p class="text-lg opacity-90">340 Selected projects that showcase our expertise across industries and technologies.341 </p>342 </div>343 344 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">345 <div class="portfolio-card group">346 <div class="relative overflow-hidden rounded-xl h-64">347 <img src="http://static.photos/technology/640x360/1" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">348 <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">349 <div>350 <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>351 <p class="text-sm opacity-90">352 Custom built online store with advanced product configurator and payment integration.353 </p>354 </div>355 </div>356 </div>357 </div>358 359 <div class="portfolio-card group">360 <div class="relative overflow-hidden rounded-xl h-64">361 <img src="http://static.photos/finance/640x360/2" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">362 <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">363 <div>364 <h3 class="text-xl font-bold mb-2">Financial Dashboard</h3>365 <p class="text-sm opacity-90">366 Real-time analytics platform for investment portfolio management.367 </p>368 </div>369 </div>370 </div>371 </div>372 373 <div class="portfolio-card group">374 <div class="relative overflow-hidden rounded-xl h-64">375 <img src="http://static.photos/medical/640x360/3" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">376 <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">377 <div>378 <h3 class="text-xl font-bold mb-2">Healthcare Portal</h3>379 <p class="text-sm opacity-90">380 HIPAA-compliant patient management system with telehealth capabilities.381 </p>382 </div>383 </div>384 </div>385 </div>386 387 <div class="portfolio-card group">388 <div class="relative overflow-hidden rounded-xl h-64">389 <img src="http://static.photos/education/640x360/4" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">390 <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">391 <div>392 <h3 class="text-xl font-bold mb-2">Learning Management System</h3>393 <p class="text-sm opacity-90">394 Custom e-learning platform with course builder and certification tracking.395 </p>396 </div>397 </div>398 </div>399 </div>400 401 <div class="portfolio-card group">402 <div class="relative overflow-hidden rounded-xl h-64">403 <img src="http://static.photos/retail/640x360/5" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">404 <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">405 <div>406 <h3 class="text-xl font-bold mb-2">Inventory Management</h3>407 <p class="text-sm opacity-90">408 Multi-location inventory tracking with predictive stock level analysis.409 </p>410 </div>411 </div>412 </div>413 </div>414 415 <div class="portfolio-card group">416 <div class="relative overflow-hidden rounded-xl h-64">417 <img src="http://static.photos/travel/640x360/6" alt="Project" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">418 <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">419 <div>420 <h3 class="text-xl font-bold mb-2">Travel Booking Engine</h3>421 <p class="text-sm opacity-90">422 Custom booking platform with dynamic pricing and availability management.423 </p>424 </div>425 </div>426 </div>427 </div>428 </div>429 </div>430 </section>431 432 <!-- Technologies Section -->433 <section class="py-20 bg-dark">434 <div class="container mx-auto px-6">435 <div class="max-w-2xl mx-auto text-center mb-16">436 <h2 class="text-4xl font-bold mb-6">Technology Stack</h2>437 <p class="text-lg opacity-90">438 We work with leading technologies to build robust, scalable solutions.439 </p>440 </div>441 442 <div class="space-y-12">443 <div>444 <h3 class="text-xl font-bold mb-6 flex items-center">445 <i data-feather="monitor" class="w-5 h-5 mr-2 text-primary"></i>446 Frontend447 </h3>448 <div class="flex flex-wrap gap-4">449 <div class="tech-badge">450 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" class="w-8 h-8">451 React452 </div>453 <div class="tech-badge">454 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue" class="w-8 h-8">455 Vue.js456 </div>457 <div class="tech-badge">458 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" alt="Angular" class="w-8 h-8">459 Angular460 </div>461 <div class="tech-badge">462 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="Svelte" class="w-8 h-8">463 Svelte464 </div>465 <div class="tech-badge">466 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" alt="Tailwind" class="w-8 h-8">467 Tailwind CSS468 </div>469 </div>470 </div>471 472 <div>473 <h3 class="text-xl font-bold mb-6 flex items-center">474 <i data-feather="server" class="w-5 h-5 mr-2 text-primary"></i>475 Backend476 </h3>477 <div class="flex flex-wrap gap-4">478 <div class="tech-badge">479 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" class="w-8 h-8">480 Node.js481 </div>482 <div class="tech-badge">483 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" class="w-8 h-8">484 Python485 </div>486 <div class="tech-badge">487 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dotnetcore/dotnetcore-original.svg" alt=".NET" class="w-8 h-8">488 .NET489 </div>490 <div class="tech-badge">491 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java" class="w-8 h-8">492 Java493 </div>494 <div class="tech-badge">495 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" alt="Go" class="w-8 h-8">496 Go497 </div>498 </div>499 </div>500 501 <div>502 <h3 class="text-xl font-bold mb-6 flex items-center">503 <i data-feather="database" class="w-5 h-5 mr-2 text-primary"></i>504 Databases505 </h3>506 <div class="flex flex-wrap gap-4">507 <div class="tech-badge">508 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" alt="PostgreSQL" class="w-8 h-8">509 PostgreSQL510 </div>511 <div class="tech-badge">512 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg" alt="MongoDB" class="w-8 h-8">513 MongoDB514 </div>515 <div class="tech-badge">516 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="MySQL" class="w-8 h-8">517 MySQL518 </div>519 <div class="tech-badge">520 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg" alt="Redis" class="w-8 h-8">521 Redis522 </div>523 <div class="tech-badge">524 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg" alt="Firebase" class="w-8 h-8">525 Firebase526 </div>527 </div>528 </div>529 530 <div>531 <h3 class="text-xl font-bold mb-6 flex items-center">532 <i data-feather="cloud" class="w-5 h-5 mr-2 text-primary"></i>533 DevOps & Cloud534 </h3>535 <div class="flex flex-wrap gap-4">536 <div class="tech-badge">537 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg" alt="AWS" class="w-8 h-8">538 AWS539 </div>540 <div class="tech-badge">541 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg" alt="Azure" class="w-8 h-8">542 Azure543 </div>544 <div class="tech-badge">545 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg" alt="GCP" class="w-8 h-8">546 Google Cloud547 </div>548 <div class="tech-badge">549 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" alt="Docker" class="w-8 h-8">550 Docker551 </div>552 <div class="tech-badge">553 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" alt="Kubernetes" class="w-8 h-8">554 Kubernetes555 </div>556 </div>557 </div>558 </div>559 </div>560 </section>561 562 <!-- Contact Section -->563 <section id="contact" class="py-20 bg-darker">564 <div class="container mx-auto px-6">565 <div class="max-w-4xl mx-auto">566 <div class="bg-dark rounded-xl p-8 md:p-12 shadow-lg border border-gray-800">567 <div class="grid md:grid-cols-2 gap-12">568 <div>569 <h2 class="text-3xl font-bold mb-6">Get in Touch</h2>570 <p class="opacity-90 mb-8">571 Ready to start your project or have questions about our services? Contact us and we'll get back to you within 24 hours.572 </p>573 574 <div class="space-y-6">575 <div class="flex items-start">576 <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4 mt-1">577 <i data-feather="map-pin" class="text-primary"></i>578 </div>579 <div>580 <h4 class="font-bold">Address</h4>581 <p class="opacity-80 text-sm">582 123 Tech Street<br>583 Digital District, CA 90210584 </p>585 </div>586 </div>587 588 <div class="flex items-start">589 <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4 mt-1">590 <i data-feather="phone" class="text-primary"></i>591 </div>592 <div>593 <h4 class="font-bold">Phone</h4>594 <p class="opacity-80 text-sm">595 +1 (555) 123-4567<br>596 Mon-Fri, 9am-6pm PST597 </p>598 </div>599 </div>600 601 <div class="flex items-start">602 <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-4 mt-1">603 <i data-feather="mail" class="text-primary"></i>604 </div>605 <div>606 <h4 class="font-bold">Email</h4>607 <p class="opacity-80 text-sm">608 hello@devforge.com<br>609 support@devforge.com610 </p>611 </div>612 </div>613 614 <div class="flex items-center space-x-4 pt-4">615 <a href="#" class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center hover:bg-primary/20 transition-all">616 <i data-feather="message-circle" class="text-primary"></i>617 </a>618 <a href="#" class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center hover:bg-primary/20 transition-all">619 <i data-feather="phone" class="text-primary"></i>620 </a>621 <a href="#" class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center hover:bg-primary/20 transition-all">622 <i data-feather="mail" class="text-primary"></i>623 </a>624 </div>625 </div>626 </div>627 628 <div>629 <h3 class="text-xl font-bold mb-6">Send Us a Message</h3>630 <form class="space-y-4" id="contactForm">631 <div>632 <label for="name" class="block mb-2 text-sm font-medium">Your Name *</label>633 <input type="text" id="name" name="name" required class="w-full px-4 py-3 bg-darker border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">634 </div>635 636 <div>637 <label for="phone" class="block mb-2 text-sm font-medium">Phone Number *</label>638 <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 bg-darker border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">639 </div>640 641 <div>642 <label for="email" class="block mb-2 text-sm font-medium">Email Address</label>643 <input type="email" id="email" name="email" class="w-full px-4 py-3 bg-darker border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">644 </div>645 646 <div>647 <label for="message" class="block mb-2 text-sm font-medium">Your Message</label>648 <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-darker border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>649 </div>650 651 <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-primary to-secondary rounded-lg font-medium hover:shadow-lg hover:shadow-primary/30 transition-all">652 Send Message653 </button>654 </form>655 </div>656 </div>657 </div>658 </div>659 </div>660 </section>661 </main>662 663 <custom-footer></custom-footer>664 <custom-modal></custom-modal>665 666 <script src="script.js"></script>667 <script>668 feather.replace();669 </script>670</body>671</html>