heroedge.html 97 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805
  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>ITAgency - Professional IT Services & Web Development</title>
  7. <meta name="description" content="Leading IT agency providing web development, mobile apps, cloud solutions, and digital marketing. Transform your business with cutting-edge technology solutions.">
  8. <meta name="keywords" content="IT services, web development, mobile apps, cloud solutions, digital marketing">
  9. <!-- Favicon -->
  10. <link rel="icon" type="image/png" href="assets/images/ico-01.png">
  11. <!-- CSS Files -->
  12. <link rel="stylesheet" href="assets/css/heroedge.css">
  13. <link rel="stylesheet" href="assets/css/auto-progress-bar.css">
  14. <!-- General CSS files -->
  15. <link rel="stylesheet" href="assets/css/globals.css">
  16. <link rel="stylesheet" href="assets/css/style.css">
  17. </head>
  18. <body class="body-1">
  19. <!-- Tech Page Loader -->
  20. <div id="page-loader" class="page-loader">
  21. <div class="loader-container">
  22. <div class="loader-content">
  23. <!-- Advanced Tech Spinner Only -->
  24. <div class="loader-spinner">
  25. <div class="spinner-ring">
  26. <div></div>
  27. </div>
  28. </div>
  29. <!-- Advanced Progress Bar -->
  30. <div class="loader-progress">
  31. <div class="progress-bar"></div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- Header -->
  37. <header class="header">
  38. <div class="container d-flex-between">
  39. <!-- Logo -->
  40. <div class="logo position-relative">
  41. <img class="image" src="assets/images/logo-transparent-01.png" alt="Logo">
  42. <a class="overlay-link" href="index.html"></a>
  43. </div>
  44. <!-- Navigation -->
  45. <nav class="navbar" id="navbar">
  46. <ul class="nav-menu">
  47. <li class="dropdown">
  48. <a class="dropdown-toggle" data-dropdown="home-dropdown">Home</a>
  49. <ul class="dropdown-menu" id="home-dropdown">
  50. <li><a href="index.html" class="dropdown-item">Home 1</a></li>
  51. <li><a href="heroedge.html" class="dropdown-item">Hero Edge</a></li>
  52. <li><a href="home-page-2.html" class="dropdown-item">Home 2</a></li>
  53. <li><a href="home-page-3.html" class="dropdown-item">Home 3</a></li>
  54. <li><a href="home-page-4.html" class="dropdown-item">Home 4</a></li>
  55. </ul>
  56. </li>
  57. <li><a href="about-us.html" class="nav-link">About Us</a></li>
  58. <li><a href="services.html" class="nav-link">Services</a></li>
  59. <li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
  60. <li class="dropdown">
  61. <a class="dropdown-toggle" data-dropdown="blog-dropdown">Blog</a>
  62. <ul class="dropdown-menu" id="blog-dropdown">
  63. <li><a href="blog-column-1.html" class="dropdown-item">Blog Column 1</a></li>
  64. <li><a href="blog-column-2.html" class="dropdown-item">Blog Column 2</a></li>
  65. <li><a href="blog-column-3.html" class="dropdown-item">Blog Column 3</a></li>
  66. <li><a href="article.html" class="dropdown-item">Blog Detail Page</a></li>
  67. </ul>
  68. </li>
  69. <li class="dropdown">
  70. <a class="dropdown-toggle" data-dropdown="pages-dropdown">Pages</a>
  71. <ul class="dropdown-menu" id="pages-dropdown">
  72. <li><a href="process.html" class="dropdown-item">Process</a></li>
  73. <li><a href="pricing.html" class="dropdown-item">Pricing</a></li>
  74. <li><a href="team.html" class="dropdown-item">Team</a></li>
  75. <li><a href="team-member.html" class="dropdown-item">Team Member</a></li>
  76. <li><a href="faqs.html" class="dropdown-item">FAQs</a></li>
  77. <li><a href="terms-conditions.html" class="dropdown-item">Terms & Conditions</a></li>
  78. <li><a href="privacy-policy.html" class="dropdown-item">Privacy Policy</a></li>
  79. <li><a href="service-cards-grid.html" class="dropdown-item">Service Cards Grid</a></li>
  80. <li><a href="buttons.html" class="dropdown-item">Buttons</a></li>
  81. <li><a href="typography.html" class="dropdown-item">Fonts</a></li>
  82. </ul>
  83. </li>
  84. <li><a href="contact-us.html" class="nav-link">Contact Us</a></li>
  85. </ul>
  86. </nav>
  87. <!-- Get Quotes Button -->
  88. <div class="actions d-flex-center">
  89. <a pages/contact-us.html class="btn btn-get-quotes">Get Quotes</a>
  90. <div class="theme-switcher">
  91. <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
  92. <svg id="theme-toggle-light-icon" class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.894 17.894a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/></svg>
  93. <svg id="theme-toggle-dark-icon" class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.69a.75.75 0 01.981.981A10.501 10.501 0 0118 19.5a10.5 10.5 0 01-10.5-10.5 10.5 10.5 0 011.718-5.528.75.75 0 01.81-.162z" clip-rule="evenodd" /></svg>
  94. </button>
  95. </div>
  96. </div>
  97. <!-- Mobile Menu Toggle -->
  98. <button class="mobile-menu-toggle" id="mobile-menu-toggle">
  99. <span class="hamburger-line"></span>
  100. <span class="hamburger-line"></span>
  101. <span class="hamburger-line"></span>
  102. </button>
  103. </div>
  104. </header>
  105. <!-- Hero Edge -->
  106. <section class="hs" style="background: var(--color-white);">
  107. <!-- Background diagonal panel -->
  108. <div class="hs-bg-panel"></div>
  109. <!-- ── SLIDES TRACK ──────────────────────── -->
  110. <div class="hs-track">
  111. <!-- SLIDE 1 -->
  112. <div class="hs-slide is-active" data-index="0">
  113. <div class="hs-left">
  114. <div class="hs-index">01</div>
  115. <div class="hs-label hs-ac">
  116. <div class="hs-label-dot"></div>
  117. <span class="hs-label-text">Digital Agency</span>
  118. </div>
  119. <h2 class="hs-title hs-ac" style="color: var(--color-black);">
  120. Empowering<br>
  121. Brands with<br>
  122. <span>Digital Power</span>
  123. </h2>
  124. <p class="hs-desc hs-ac">
  125. We help businesses adapt and grow through custom
  126. digital strategies, innovative tools, and scalable solutions.
  127. </p>
  128. <div class="hs-btns hs-ac">
  129. <button class="hs-btn-a">Get Started</button>
  130. <button class="hs-btn-b" style="color: var(--color-black);">
  131. Explore Service
  132. <svg viewBox="0 0 24 24">
  133. <line x1="5" y1="12" x2="19" y2="12"/>
  134. <polyline points="12 5 19 12 12 19"/>
  135. </svg>
  136. </button>
  137. </div>
  138. </div>
  139. <div class="hs-right">
  140. <div class="hs-img-wrap">
  141. <img
  142. class="hs-img"
  143. src="assets/images/backgrounds/digital-agency.png"
  144. alt="Slide 1"
  145. />
  146. </div>
  147. <div class="hs-overlay"></div>
  148. <div class="hs-card">
  149. <div class="hs-card-num">+320</div>
  150. <div class="hs-card-label">Projects Delivered</div>
  151. </div>
  152. </div>
  153. </div>
  154. <!-- /SLIDE 1 -->
  155. <!-- SLIDE 2 -->
  156. <div class="hs-slide" data-index="1">
  157. <div class="hs-left">
  158. <div class="hs-index">02</div>
  159. <div class="hs-label hs-ac">
  160. <div class="hs-label-dot"></div>
  161. <span class="hs-label-text">Digital Marketing</span>
  162. </div>
  163. <h2 class="hs-title hs-ac" style="color: var(--color-black);">
  164. Marketing For<br>
  165. Your <span>Growing</span><br>
  166. Business
  167. </h2>
  168. <p class="hs-desc hs-ac">
  169. Accelerate your reach with data-driven campaigns,
  170. creative content and strategies built for measurable growth.
  171. </p>
  172. <div class="hs-btns hs-ac">
  173. <button class="hs-btn-a">Start Now</button>
  174. <button class="hs-btn-b" style="color: var(--color-black);">
  175. Our Portfolio
  176. <svg viewBox="0 0 24 24">
  177. <line x1="5" y1="12" x2="19" y2="12"/>
  178. <polyline points="12 5 19 12 12 19"/>
  179. </svg>
  180. </button>
  181. </div>
  182. </div>
  183. <div class="hs-right">
  184. <div class="hs-img-wrap">
  185. <img
  186. class="hs-img"
  187. src="assets/images/backgrounds/digital-marketing.png"
  188. alt="Slide 2"
  189. />
  190. </div>
  191. <div class="hs-card">
  192. <div class="hs-card-num">98%</div>
  193. <div class="hs-card-label">Client Satisfaction</div>
  194. </div>
  195. </div>
  196. </div>
  197. <!-- /SLIDE 2 -->
  198. <!-- SLIDE 3 -->
  199. <div class="hs-slide" data-index="2">
  200. <div class="hs-left">
  201. <div class="hs-index">03</div>
  202. <div class="hs-label hs-ac">
  203. <div class="hs-label-dot"></div>
  204. <span class="hs-label-text">Technology &amp; AI</span>
  205. </div>
  206. <h2 class="hs-title hs-ac" style="color: var(--color-black);">
  207. Scalable <span>AI</span><br>
  208. Solutions For<br>
  209. Modern Teams
  210. </h2>
  211. <p class="hs-desc hs-ac">
  212. Harness artificial intelligence to automate workflows,
  213. unlock insights, and build smarter products at scale.
  214. </p>
  215. <div class="hs-btns hs-ac">
  216. <button class="hs-btn-a">Learn More</button>
  217. <button class="hs-btn-b" style="color: var(--color-black);">
  218. View Cases
  219. <svg viewBox="0 0 24 24">
  220. <line x1="5" y1="12" x2="19" y2="12"/>
  221. <polyline points="12 5 19 12 12 19"/>
  222. </svg>
  223. </button>
  224. </div>
  225. </div>
  226. <div class="hs-right">
  227. <div class="hs-img-wrap">
  228. <img
  229. class="hs-img"
  230. src="assets/images/backgrounds/technology-ia.png"
  231. alt="Slide 3"
  232. />
  233. </div>
  234. <div class="hs-card">
  235. <div class="hs-card-num">12x</div>
  236. <div class="hs-card-label">Faster Automation</div>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. <!-- /hs-track -->
  242. <!-- ── BOTTOM BAR ──────────────────────────── -->
  243. <div class="hs-bar">
  244. <div class="hs-socials-nav">
  245. <!-- Social icons -->
  246. <div class="hs-socials">
  247. <div class="hs-soc">
  248. <svg viewBox="0 0 24 24">
  249. <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
  250. </svg>
  251. </div>
  252. <div class="hs-soc">
  253. <svg viewBox="0 0 24 24">
  254. <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.29 4.87A12.81 12.81 0 0 1 1.64 3.16a4.52 4.52 0 0 0 1.4 6.04 4.47 4.47 0 0 1-2.04-.49v.06a4.52 4.52 0 0 0 3.62 4.43 4.51 4.51 0 0 1-2.04.08 4.53 4.53 0 0 0 4.22 3.14A9.06 9.06 0 0 1 1 19.54 12.77 12.77 0 0 0 7.9 21.5c8.26 0 12.78-6.84 12.78-12.77 0-.19-.01-.39-.01-.58A9.14 9.14 0 0 0 23 3z"/>
  255. </svg>
  256. </div>
  257. <div class="hs-soc">
  258. <svg viewBox="0 0 24 24">
  259. <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4V9h4v2a6 6 0 0 1 6-3zM2 9h4v12H2z"/>
  260. <circle cx="4" cy="4" r="2"/>
  261. </svg>
  262. </div>
  263. </div>
  264. <div class="hs-bar-div"></div>
  265. <!-- Navigation -->
  266. <div class="hs-nav">
  267. <div class="hs-nav-arr">
  268. <button class="hs-arr" id="hsArr-prev" aria-label="Anterior">
  269. <svg viewBox="0 0 24 24">
  270. <polyline points="15 18 9 12 15 6"/>
  271. </svg>
  272. </button>
  273. <span class="hs-count">
  274. <span id="hsNum">1</span>
  275. <span class="hs-count-sep"> / </span>3
  276. </span>
  277. <button class="hs-arr" id="hsArr-next" aria-label="Siguiente">
  278. <svg viewBox="0 0 24 24">
  279. <polyline points="9 18 15 12 9 6"/>
  280. </svg>
  281. </button>
  282. </div>
  283. <div class="hs-dots-nav">
  284. <div class="hs-dot is-active"></div>
  285. <div class="hs-dot"></div>
  286. <div class="hs-dot"></div>
  287. </div>
  288. </div>
  289. </div>
  290. <!-- Logo strip -->
  291. <div class="hs-logos">
  292. <div class="hs-logos-track">
  293. <!-- Set 1 -->
  294. <div class="hs-logo"><img src="assets/images/companies/company-min-01.png" alt="Company 01"/></div>
  295. <div class="hs-logo"><img src="assets/images/companies/company-min-02.png" alt="Company 02"/></div>
  296. <div class="hs-logo"><img src="assets/images/companies/company-min-03.png" alt="Company 03"/></div>
  297. <div class="hs-logo"><img src="assets/images/companies/company-min-04.png" alt="Company 04"/></div>
  298. <div class="hs-logo"><img src="assets/images/companies/company-min-05.png" alt="Company 05"/></div>
  299. <div class="hs-logo"><img src="assets/images/companies/company-min-06.png" alt="Company 06"/></div>
  300. <!-- Set 2 — duplicado para loop seamless -->
  301. <div class="hs-logo"><img src="assets/images/companies/company-min-01.png" alt="Company 01"/></div>
  302. <div class="hs-logo"><img src="assets/images/companies/company-min-02.png" alt="Company 02"/></div>
  303. <div class="hs-logo"><img src="assets/images/companies/company-min-03.png" alt="Company 03"/></div>
  304. <div class="hs-logo"><img src="assets/images/companies/company-min-04.png" alt="Company 04"/></div>
  305. <div class="hs-logo"><img src="assets/images/companies/company-min-05.png" alt="Company 05"/></div>
  306. <div class="hs-logo"><img src="assets/images/companies/company-min-06.png" alt="Company 06"/></div>
  307. </div>
  308. </div>
  309. </div>
  310. </section>
  311. <!-- Main 1 -->
  312. <div class="main d-flex-center pt-8 pb-8">
  313. <!-- Main Content -->
  314. <div class="container main-content">
  315. <!-- Services section -->
  316. <section class="service-cards-modern">
  317. <div class="d-flex-baseline-between pb-5"
  318. data-aos="fade-down"
  319. data-aos-duration="600"
  320. data-aos-delay="0">
  321. <h2>Our Services</h2>
  322. <a href="services.html" class="btn btn-primary">See Services</a>
  323. </div>
  324. <div class="services-grid">
  325. <div class="service-card"
  326. data-aos="fade-up"
  327. data-aos-delay="0">
  328. <div class="service-icon">
  329. <svg><use xlink:href="#monitor-code"></use></svg>
  330. </div>
  331. <div class="service-description">
  332. <h3>Web Development</h3>
  333. <p>Professional web solutions with modern technologies and responsive designs.</p>
  334. </div>
  335. <a class="overlay-link" href="javascript:void(0)"></a>
  336. </div>
  337. <div class="service-card"
  338. data-aos="fade-up"
  339. data-aos-delay="100">
  340. <div class="service-icon">
  341. <svg><use xlink:href="#phone"></use></svg>
  342. </div>
  343. <div class="service-description">
  344. <h4>Mobile App Development</h4>
  345. <p>Native and cross-platform mobile applications for iOS and Android.</p>
  346. </div>
  347. <a class="overlay-link" href="javascript:void(0)"></a>
  348. </div>
  349. <div class="service-card"
  350. data-aos="fade-up"
  351. data-aos-delay="200">
  352. <div class="service-icon">
  353. <svg><use xlink:href="#cloud-iot-2"></use></svg>
  354. </div>
  355. <div class="service-description">
  356. <h4>Cloud Solutions</h4>
  357. <p>Scalable cloud infrastructure and deployment solutions for your business.</p>
  358. </div>
  359. <a class="overlay-link" href="javascript:void(0)"></a>
  360. </div>
  361. <div class="service-card"
  362. data-aos="fade-up"
  363. data-aos-delay="0">
  364. <div class="service-icon">
  365. <svg><use xlink:href="#seo-monitor"></use></svg>
  366. </div>
  367. <div class="service-description">
  368. <h4>Digital Marketing</h4>
  369. <p>Strategic digital marketing campaigns to boost your online presence.</p>
  370. </div>
  371. <a class="overlay-link" href="javascript:void(0)"></a>
  372. </div>
  373. <div class="service-card"
  374. data-aos="fade-up"
  375. data-aos-delay="100">
  376. <div class="service-icon">
  377. <svg><use xlink:href="#vector-nodes-6"></use></svg>
  378. </div>
  379. <div class="service-description">
  380. <h4>UX/UI Design</h4>
  381. <p>User-centered design experiences that engage and convert your audience.</p>
  382. </div>
  383. <a class="overlay-link" href="javascript:void(0)"></a>
  384. </div>
  385. <div class="service-card"
  386. data-aos="fade-up"
  387. data-aos-delay="200">
  388. <div class="service-icon">
  389. <svg><use xlink:href="#database-2"></use></svg>
  390. </div>
  391. <div class="service-description">
  392. <h4>Data Analytics</h4>
  393. <p>Transform your data into actionable insights for better business decisions.</p>
  394. </div>
  395. <a class="overlay-link" href="javascript:void(0)"></a>
  396. </div>
  397. </div>
  398. </section>
  399. <!-- About Our Company section -->
  400. <section class="about-our-company">
  401. <div class="about-info pb-4"
  402. data-aos="fade-right"
  403. data-aos-duration="600"
  404. data-aos-delay="0">
  405. <div class="about-texts pb-4">
  406. <h4 class="text-accent">About Our Company</h4>
  407. <h2 class="about-info-title">We're Passionate About Delivering Quality That Elevates Your Business.</h2>
  408. <p>
  409. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione illum ut,
  410. obcaecati voluptate incidunt vero esse repellendus voluptates eveniet dolores.
  411. </p>
  412. </div>
  413. <div class="about-progress">
  414. <div class="custom-progress" data-progress
  415. data-label="IT Consulting"
  416. data-percentage="90"
  417. data-color="var(--color-primary)"
  418. data-bg="var(--color-text-primary)"
  419. data-text-color="var(--color-text-primary)">
  420. </div>
  421. <div class="custom-progress" data-progress
  422. data-label="Web Development"
  423. data-percentage="75"
  424. data-color="var(--color-primary)"
  425. data-bg="var(--color-text-primary)"
  426. data-text-color="var(--color-text-primary)">
  427. </div>
  428. <div class="custom-progress" data-progress
  429. data-label="UX Design"
  430. data-percentage="70"
  431. data-color="var(--color-primary)"
  432. data-bg="var(--color-text-primary)"
  433. data-text-color="var(--color-text-primary)">
  434. </div>
  435. </div>
  436. </div>
  437. <div class="about-image"
  438. data-hover-3d
  439. data-aos="fade-left"
  440. data-aos-duration="600"
  441. data-aos-delay="0">
  442. <img src="assets/images/backgrounds/computer-code.png" alt="About Image">
  443. </div>
  444. </section>
  445. </div>
  446. </div>
  447. <!-- Counting info section -->
  448. <section class="counting-info container">
  449. <div class="counting-content">
  450. <div class="info"
  451. data-aos="fade-down"
  452. data-aos-delay="100">
  453. <h2 class="title">Have <span class="subinfo">25 Years</span> of Experiences</h2>
  454. <p class="text">
  455. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  456. Blanditiis quod veniam temporibus eaque, a neque nulla.
  457. </p>
  458. <a pages/contact-us.html class="btn btn-outline"
  459. data-aos="fade-right"
  460. data-aos-duration="500"
  461. data-aos-delay="950">
  462. Get Started
  463. </a>
  464. </div>
  465. <div class="box-counting">
  466. <div class="counts"
  467. data-aos="fade-down"
  468. data-aos-delay="100">
  469. <svg><use xlink:href="#bulb-2"></use></svg>
  470. <span class="number" data-counter>3785+</span>
  471. <span class="label">Successful Projects</span>
  472. </div>
  473. <div class="counts"
  474. data-aos="fade-up"
  475. data-aos-delay="100">
  476. <svg><use xlink:href="#hand-shake"></use></svg>
  477. <span class="number" data-counter>9800+</span>
  478. <span class="label">Satisfied Clients</span>
  479. </div>
  480. <div class="counts"
  481. data-aos="fade-down"
  482. data-aos-delay="100">
  483. <svg><use xlink:href="#message-3-text"></use></svg>
  484. <span class="number" data-counter>1052+</span>
  485. <span class="label">Support Tickets Resolved</span>
  486. </div>
  487. </div>
  488. </div>
  489. </section>
  490. <!-- Main 2 -->
  491. <div class="main d-flex-center pt-8 pb-8">
  492. <!-- Main Content 2 -->
  493. <div class="container main-content">
  494. <!-- Process section -->
  495. <section class="step-info">
  496. <div class="d-flex-center pb-5"
  497. data-aos="fade-down"
  498. data-aos-duration="600"
  499. data-aos-delay="0">
  500. <h2 class="heading-lg">Our Processes</h2>
  501. </div>
  502. <div class="box-step-info">
  503. <!-- Step 1 -->
  504. <div class="step up">
  505. <div class="process-info d-flex-center"
  506. data-aos="fade-down"
  507. data-aos-delay="100">
  508. <div class="process-icon">
  509. <svg><use xlink:href="#code-1"></use></svg>
  510. </div>
  511. <div class="process-text">
  512. <span class="text text-shadowl--white">1. WE INVESTIGATE AND PLAN</span>
  513. <p>We analyze your requirements and create a comprehensive strategy tailored to your business goals.</p>
  514. </div>
  515. </div>
  516. </div>
  517. <!-- Step 2 -->
  518. <div class="step right">
  519. <div class="process-info d-flex-center"
  520. data-aos="fade-left"
  521. data-aos-delay="150">
  522. <div class="process-icon">
  523. <svg><use xlink:href="#monitor-code"></use></svg>
  524. </div>
  525. <div class="process-text">
  526. <span class="text text-shadowl--white">2. WE CO-CREATE AND DEVELOP</span>
  527. <p>Working together, we build innovative solutions using cutting-edge technology and best practices.</p>
  528. </div>
  529. </div>
  530. </div>
  531. <!-- Central Image -->
  532. <div class="central-image">
  533. <img class="image" src="assets/images/backgrounds/process.jpg" alt="Process">
  534. </div>
  535. <!-- Step 3 -->
  536. <div class="step down">
  537. <div class="process-info d-flex-center"
  538. data-aos="fade-up"
  539. data-aos-delay="200">
  540. <div class="process-icon">
  541. <svg><use xlink:href="#refresh-user-1"></use></svg>
  542. </div>
  543. <div class="process-text">
  544. <span class="text text-shadowl--white">3. WE ACCOMPANY AND GUARANTEE</span>
  545. <p>We provide ongoing support and maintenance to ensure your solution performs optimally over time.</p>
  546. </div>
  547. </div>
  548. </div>
  549. <!-- Step 4 -->
  550. <div class="step left">
  551. <div class="process-info d-flex-center"
  552. data-aos="fade-right"
  553. data-aos-delay="250">
  554. <div class="process-icon">
  555. <svg><use xlink:href="#hand-shake"></use></svg>
  556. </div>
  557. <div class="process-text">
  558. <span class="text text-shadowl--white">4. WE DELIVER AND LAUNCH</span>
  559. <p>We deploy your solution with thorough testing and seamless implementation.</p>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. </section>
  565. <!-- Portfolio section -->
  566. <section class="portfolio pt-8">
  567. <div class="d-flex-center pb-5"
  568. data-aos="fade-down"
  569. data-aos-duration="600"
  570. data-aos-delay="0">
  571. <h2 class="heading-lg">Our Portfolio</h2>
  572. </div>
  573. <div class="portfolio-isotope"
  574. data-aos="fade-up"
  575. data-aos-delay="100">
  576. <div class="portfolio-filters-container d-flex-center pb-5">
  577. <ul class="portfolio-filters">
  578. <li class="filter-btn active" data-filter="*">All Projects</li>
  579. <li class="filter-btn" data-filter=".filter-web">Web Development</li>
  580. <li class="filter-btn" data-filter=".filter-mobile">Mobile Apps</li>
  581. <li class="filter-btn" data-filter=".filter-design">UI/UX Design</li>
  582. <li class="filter-btn" data-filter=".filter-branding">Branding</li>
  583. </ul>
  584. </div>
  585. <div class="portfolio-grid">
  586. <div class="portfolio-item filter-web"
  587. data-aos="zoom-in"
  588. data-aos-delay="0">
  589. <div class="portfolio-card">
  590. <div class="portfolio-image">
  591. <img class="image" src="assets/images/portfolio/project-1.png" alt="E-commerce Platform">
  592. <a href="assets/images/portfolio/project-1.png" class="portfolio-lightbox"></a>
  593. </div>
  594. <div class="portfolio-info">
  595. <h3>E-commerce Platform</h3>
  596. <span class="portfolio-category">Web Development</span>
  597. </div>
  598. </div>
  599. <a class="overlay-link" href="javascript:void(0)"></a>
  600. </div>
  601. <div class="portfolio-item filter-mobile"
  602. data-aos="zoom-in"
  603. data-aos-delay="50">
  604. <div class="portfolio-card">
  605. <div class="portfolio-image">
  606. <img class="image" src="assets/images/portfolio/project-2.png" alt="Fitness Tracking App">
  607. <a href="assets/images/portfolio/project-2.png" class="portfolio-lightbox"></a>
  608. </div>
  609. <div class="portfolio-info">
  610. <h4>Fitness Tracking App</h4>
  611. <span class="portfolio-category">Mobile Apps</span>
  612. </div>
  613. </div>
  614. <a class="overlay-link" href="javascript:void(0)"></a>
  615. </div>
  616. <div class="portfolio-item filter-design"
  617. data-aos="zoom-in"
  618. data-aos-delay="100">
  619. <div class="portfolio-card">
  620. <div class="portfolio-image">
  621. <img class="image" src="assets/images/portfolio/project-3.png" alt="Banking Dashboard">
  622. <a href="assets/images/portfolio/project-3.png" class="portfolio-lightbox"></a>
  623. </div>
  624. <div class="portfolio-info">
  625. <h4>Banking Dashboard</h4>
  626. <span class="portfolio-category">UI/UX Design</span>
  627. </div>
  628. </div>
  629. <a class="overlay-link" href="javascript:void(0)"></a>
  630. </div>
  631. <div class="portfolio-item filter-branding"
  632. data-aos="zoom-in"
  633. data-aos-delay="150">
  634. <div class="portfolio-card">
  635. <div class="portfolio-image">
  636. <img class="image" src="assets/images/portfolio/project-4.png" alt="Tech Startup Branding">
  637. <a href="assets/images/portfolio/project-4.png" class="portfolio-lightbox"></a>
  638. </div>
  639. <div class="portfolio-info">
  640. <h4>Tech Startup Brand</h4>
  641. <span class="portfolio-category">Branding</span>
  642. </div>
  643. </div>
  644. <a class="overlay-link" href="javascript:void(0)"></a>
  645. </div>
  646. <div class="portfolio-item filter-web"
  647. data-aos="zoom-in"
  648. data-aos-delay="200">
  649. <div class="portfolio-card">
  650. <div class="portfolio-image">
  651. <img class="image" src="assets/images/portfolio/project-5.png" alt="Restaurant Website">
  652. <a href="assets/images/portfolio/project-5.png" class="portfolio-lightbox"></a>
  653. </div>
  654. <div class="portfolio-info">
  655. <h4>Restaurant Website</h4>
  656. <span class="portfolio-category">Web Development</span>
  657. </div>
  658. </div>
  659. <a class="overlay-link" href="javascript:void(0)"></a>
  660. </div>
  661. <div class="portfolio-item filter-mobile"
  662. data-aos="zoom-in"
  663. data-aos-delay="250">
  664. <div class="portfolio-card">
  665. <div class="portfolio-image">
  666. <img class="image" src="assets/images/portfolio/project-6.png" alt="Travel Planning App">
  667. <a href="assets/images/portfolio/project-6.png" class="portfolio-lightbox"></a>
  668. </div>
  669. <div class="portfolio-info">
  670. <h4>Travel Planning App</h4>
  671. <span class="portfolio-category">Mobile Apps</span>
  672. </div>
  673. </div>
  674. <a class="overlay-link" href="javascript:void(0)"></a>
  675. </div>
  676. </div>
  677. </div>
  678. </section>
  679. </div>
  680. </div>
  681. <!-- Client company section -->
  682. <section class="client-companies container pt-8 pb-8">
  683. <div class="text-center mt-6 mb-6"
  684. data-aos="fade-up"
  685. data-aos-duration="600">
  686. <h2 class="text-white">Building Success With Great Companies</h2>
  687. </div>
  688. <div class="customers-carousel universal-slider">
  689. <div class="client-company">
  690. <img class="image" src="assets/images/companies/company-01.png" alt="Company 01">
  691. </div>
  692. <div class="client-company">
  693. <img class="image" src="assets/images/companies/company-02.png" alt="Company 02">
  694. </div>
  695. <div class="client-company">
  696. <img class="image" src="assets/images/companies/company-03.png" alt="Company 03">
  697. </div>
  698. <div class="client-company">
  699. <img class="image" src="assets/images/companies/company-04.png" alt="Company 04">
  700. </div>
  701. <div class="client-company">
  702. <img class="image" src="assets/images/companies/company-05.png" alt="Company 05">
  703. </div>
  704. <div class="client-company">
  705. <img class="image" src="assets/images/companies/company-06.png" alt="Company 06">
  706. </div>
  707. <div class="client-company">
  708. <img class="image" src="assets/images/companies/company-01.png" alt="Company 01">
  709. </div>
  710. <div class="client-company">
  711. <img class="image" src="assets/images/companies/company-02.png" alt="Company 02">
  712. </div>
  713. <div class="client-company">
  714. <img class="image" src="assets/images/companies/company-03.png" alt="Company 03">
  715. </div>
  716. <div class="client-company">
  717. <img class="image" src="assets/images/companies/company-04.png" alt="Company 04">
  718. </div>
  719. <div class="client-company">
  720. <img class="image" src="assets/images/companies/company-05.png" alt="Company 05">
  721. </div>
  722. <div class="client-company">
  723. <img class="image" src="assets/images/companies/company-06.png" alt="Company 06">
  724. </div>
  725. </div>
  726. </section>
  727. <!-- Main 3 -->
  728. <div class="main d-flex-center pt-8 pb-8">
  729. <!-- Main Content 3 -->
  730. <div class="container main-content">
  731. <!-- Pricing Plans section -->
  732. <section class="pricing-plants">
  733. <div class="text-center pb-5"
  734. data-aos="fade-down"
  735. data-aos-duration="600"
  736. data-aos-delay="0">
  737. <h2 class="heading-lg">Pricing Plans</h2>
  738. <p>Clear, simple, and flexible plans for your business.</p>
  739. </div>
  740. <div class="options-plants">
  741. <div class="plants"
  742. data-aos="fade-left"
  743. data-aos-delay="150">
  744. <div class="plant-header">
  745. <h2 class="mb-0">Basic</h2>
  746. <p>Perfect for small businesses and startups</p>
  747. </div>
  748. <div class="price d-flex-center">
  749. <span class="price-main">$37 <span class="price-discount">$50</span></span>
  750. </div>
  751. <div class="d-flex-center">
  752. <a href="javascript:void(0)" class="btn btn-primary">Buy Basic Plan</a>
  753. </div>
  754. <div class="benefits">
  755. <div class="line"></div>
  756. <ul class="benefits-list">
  757. <li class="benefit-item">
  758. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  759. <span class="text">Up to 5 Pages Website</span>
  760. </li>
  761. <li class="benefit-item">
  762. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  763. <span class="text">Mobile Responsive Design</span>
  764. </li>
  765. <li class="benefit-item">
  766. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  767. <span class="text">Basic SEO Optimization</span>
  768. </li>
  769. <li class="benefit-item">
  770. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  771. <span class="text">Contact Form Integration</span>
  772. </li>
  773. <li class="benefit-item">
  774. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  775. <span class="text">1 Month Free Support</span>
  776. </li>
  777. <li class="benefit-item">
  778. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  779. <span class="text">SSL Certificate</span>
  780. </li>
  781. <li class="benefit-item unavailable">
  782. <div class="circle-x-svg">
  783. <svg viewBox="0 0 24 24" width="18" height="18">
  784. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  785. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  786. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  787. </svg>
  788. </div>
  789. <span class="text">E-commerce Functionality</span>
  790. </li>
  791. <li class="benefit-item unavailable">
  792. <div class="circle-x-svg">
  793. <svg viewBox="0 0 24 24" width="18" height="18">
  794. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  795. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  796. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  797. </svg>
  798. </div>
  799. <span class="text">Advanced Analytics</span>
  800. </li>
  801. <li class="benefit-item unavailable">
  802. <div class="circle-x-svg">
  803. <svg viewBox="0 0 24 24" width="18" height="18">
  804. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  805. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  806. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  807. </svg>
  808. </div>
  809. <span class="text">Priority Support</span>
  810. </li>
  811. </ul>
  812. </div>
  813. </div>
  814. <div class="plants most-popular"
  815. data-aos="fade-down"
  816. data-aos-delay="100">
  817. <div class="tag-most-popular">
  818. <span>Most Popular</span>
  819. </div>
  820. <div class="plant-header">
  821. <h2 class="mb-0">Pro</h2>
  822. <p>Ideal for growing businesses</p>
  823. </div>
  824. <div class="price d-flex-center">
  825. <span class="price-main">$57 <span class="price-discount">$70</span></span>
  826. </div>
  827. <div class="d-flex-center">
  828. <a href="javascript:void(0)" class="btn btn-primary">Buy Pro Plan</a>
  829. </div>
  830. <div class="benefits">
  831. <div class="line"></div>
  832. <ul class="benefits-list">
  833. <li class="benefit-item">
  834. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  835. <span class="text">Up to 5 Pages Website</span>
  836. </li>
  837. <li class="benefit-item">
  838. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  839. <span class="text">Mobile Responsive Design</span>
  840. </li>
  841. <li class="benefit-item">
  842. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  843. <span class="text">Basic SEO Optimization</span>
  844. </li>
  845. <li class="benefit-item">
  846. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  847. <span class="text">Contact Form Integration</span>
  848. </li>
  849. <li class="benefit-item">
  850. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  851. <span class="text">1 Month Free Support</span>
  852. </li>
  853. <li class="benefit-item">
  854. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  855. <span class="text">SSL Certificate</span>
  856. </li>
  857. <li class="benefit-item unavailable">
  858. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  859. <span class="text">E-commerce Functionality</span>
  860. </li>
  861. <li class="benefit-item unavailable">
  862. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  863. <span class="text">Advanced Analytics</span>
  864. </li>
  865. <li class="benefit-item unavailable">
  866. <div class="circle-x-svg">
  867. <svg viewBox="0 0 24 24" width="18" height="18">
  868. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  869. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  870. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  871. </svg>
  872. </div>
  873. <span class="text">Priority Support</span>
  874. </li>
  875. </ul>
  876. </div>
  877. </div>
  878. <div class="plants"
  879. data-aos="fade-right"
  880. data-aos-delay="150">
  881. <div class="plant-header text-center mb-6">
  882. <h2 class="mb-0">Enterprise</h2>
  883. <p>For large-scale businesses</p>
  884. </div>
  885. <div class="price d-flex-center">
  886. <span class="price-main">$77 <span class="price-discount">$100</span></span>
  887. </div>
  888. <div class="d-flex-center">
  889. <a href="javascript:void(0)" class="btn btn-primary">Buy Enterprise Plan</a>
  890. </div>
  891. <div class="benefits">
  892. <div class="line"></div>
  893. <ul class="benefits-list">
  894. <li class="benefit-item">
  895. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  896. <span class="text">Up to 5 Pages Website</span>
  897. </li>
  898. <li class="benefit-item">
  899. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  900. <span class="text">Mobile Responsive Design</span>
  901. </li>
  902. <li class="benefit-item">
  903. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  904. <span class="text">Basic SEO Optimization</span>
  905. </li>
  906. <li class="benefit-item">
  907. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  908. <span class="text">Contact Form Integration</span>
  909. </li>
  910. <li class="benefit-item">
  911. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  912. <span class="text">1 Month Free Support</span>
  913. </li>
  914. <li class="benefit-item">
  915. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  916. <span class="text">SSL Certificate</span>
  917. </li>
  918. <li class="benefit-item unavailable">
  919. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  920. <span class="text">E-commerce Functionality</span>
  921. </li>
  922. <li class="benefit-item unavailable">
  923. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  924. <span class="text">Advanced Analytics</span>
  925. </li>
  926. <li class="benefit-item unavailable">
  927. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  928. <span class="text">Priority Support</span>
  929. </li>
  930. </ul>
  931. </div>
  932. </div>
  933. </div>
  934. </section>
  935. </div>
  936. </div>
  937. <!-- Testimonials section -->
  938. <section class="testimonials container pt-8 pb-8">
  939. <div class="text-center pb-5"
  940. data-aos="fade-down"
  941. data-aos-duration="600"
  942. data-aos-delay="0">
  943. <h2 class="heading-lg text-white">Testimonials</h2>
  944. <p class="text-white">Trusted feedback from companies and partners who believe in our quality.</p>
  945. </div>
  946. <div class="testimonials-grid p-2" data-testimonials="home"
  947. data-aos="fade-up"
  948. data-aos-delay="100">
  949. <!-- Slide 1 -->
  950. <div class="comment" data-comment>
  951. <div class="d-flex flex-column gap-2">
  952. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  953. <div class="message">
  954. <p class="text">
  955. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  956. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  957. nemo vitae nulla tempore.
  958. </p>
  959. </div>
  960. <div class="info-user">
  961. <div class="image">
  962. <img src="assets/images/testimonials/face-01.png" alt="Face 01">
  963. </div>
  964. <div class="info">
  965. <span class="name">Adrien Jacob</span>
  966. <span class="role">CEO</span>
  967. <div class="rating">
  968. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  969. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  970. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  971. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  972. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  973. </div>
  974. </div>
  975. </div>
  976. </div>
  977. </div>
  978. <!-- Slide 2 -->
  979. <div class="comment" data-comment>
  980. <div class="d-flex flex-column gap-2">
  981. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  982. <div class="message">
  983. <p class="text">
  984. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  985. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  986. nemo vitae nulla tempore.
  987. </p>
  988. </div>
  989. <div class="info-user">
  990. <div class="image">
  991. <img src="assets/images/testimonials/face-02.png" alt="Face 02">
  992. </div>
  993. <div class="info">
  994. <span class="name">Diana Taylor</span>
  995. <span class="role">Graphic Designer</span>
  996. <div class="rating">
  997. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  998. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  999. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1000. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1001. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1002. </div>
  1003. </div>
  1004. </div>
  1005. </div>
  1006. </div>
  1007. <!-- Slide 3 -->
  1008. <div class="comment" data-comment>
  1009. <div class="d-flex flex-column gap-2">
  1010. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1011. <div class="message">
  1012. <p class="text">
  1013. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1014. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1015. nemo vitae nulla tempore.
  1016. </p>
  1017. </div>
  1018. <div class="info-user">
  1019. <div class="image">
  1020. <img src="assets/images/testimonials/face-03.png" alt="Face 03">
  1021. </div>
  1022. <div class="info">
  1023. <span class="name">Sarah Johnson</span>
  1024. <span class="role">Businesswoman</span>
  1025. <div class="rating">
  1026. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1027. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1028. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1029. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1030. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1031. </div>
  1032. </div>
  1033. </div>
  1034. </div>
  1035. </div>
  1036. <!-- Slide 4 -->
  1037. <div class="comment" data-comment>
  1038. <div class="d-flex flex-column gap-2">
  1039. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1040. <div class="message">
  1041. <p class="text">
  1042. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1043. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1044. nemo vitae nulla tempore.
  1045. </p>
  1046. </div>
  1047. <div class="info-user">
  1048. <div class="image">
  1049. <img src="assets/images/testimonials/face-04.png" alt="Face 04">
  1050. </div>
  1051. <div class="info">
  1052. <span class="name">Michael Brown</span>
  1053. <span class="role">Marketing Director</span>
  1054. <div class="rating">
  1055. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1056. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1057. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1058. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1059. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1060. </div>
  1061. </div>
  1062. </div>
  1063. </div>
  1064. </div>
  1065. <!-- Slide 5 -->
  1066. <div class="comment" data-comment>
  1067. <div class="d-flex flex-column gap-2">
  1068. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1069. <div class="message">
  1070. <p class="text">
  1071. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1072. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1073. nemo vitae nulla tempore.
  1074. </p>
  1075. </div>
  1076. <div class="info-user">
  1077. <div class="image">
  1078. <img src="assets/images/testimonials/face-02.png" alt="Face 02">
  1079. </div>
  1080. <div class="info">
  1081. <span class="name">Emma Wilson</span>
  1082. <span class="role">Product Manager</span>
  1083. <div class="rating">
  1084. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1085. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1086. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1087. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1088. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1089. </div>
  1090. </div>
  1091. </div>
  1092. </div>
  1093. </div>
  1094. <!-- Slide 6 -->
  1095. <div class="comment" data-comment>
  1096. <div class="d-flex flex-column gap-2">
  1097. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1098. <div class="message">
  1099. <p class="text">
  1100. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1101. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1102. nemo vitae nulla tempore.
  1103. </p>
  1104. </div>
  1105. <div class="info-user">
  1106. <div class="image">
  1107. <img src="assets/images/testimonials/face-01.png" alt="Face 01">
  1108. </div>
  1109. <div class="info">
  1110. <span class="name">James Anderson</span>
  1111. <span class="role">Tech Lead</span>
  1112. <div class="rating">
  1113. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1114. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1115. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1116. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1117. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1118. </div>
  1119. </div>
  1120. </div>
  1121. </div>
  1122. </div>
  1123. <!-- Slide 7 -->
  1124. <div class="comment" data-comment>
  1125. <div class="d-flex flex-column gap-2">
  1126. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1127. <div class="message">
  1128. <p class="text">
  1129. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1130. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1131. nemo vitae nulla tempore.
  1132. </p>
  1133. </div>
  1134. <div class="info-user">
  1135. <div class="image">
  1136. <img src="assets/images/testimonials/face-03.png" alt="Face 03">
  1137. </div>
  1138. <div class="info">
  1139. <span class="name">Lisa Martinez</span>
  1140. <span class="role">UX Designer</span>
  1141. <div class="rating">
  1142. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1143. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1144. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1145. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1146. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1147. </div>
  1148. </div>
  1149. </div>
  1150. </div>
  1151. </div>
  1152. <!-- Slide 8 -->
  1153. <div class="comment" data-comment>
  1154. <div class="d-flex flex-column gap-2">
  1155. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1156. <div class="message">
  1157. <p class="text">
  1158. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1159. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1160. nemo vitae nulla tempore.
  1161. </p>
  1162. </div>
  1163. <div class="info-user">
  1164. <div class="image">
  1165. <img src="assets/images/testimonials/face-04.png" alt="Face 04">
  1166. </div>
  1167. <div class="info">
  1168. <span class="name">David Rodriguez</span>
  1169. <span class="role">Software Engineer</span>
  1170. <div class="rating">
  1171. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1172. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1173. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1174. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1175. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1176. </div>
  1177. </div>
  1178. </div>
  1179. </div>
  1180. </div>
  1181. <!-- Slide 9 -->
  1182. <div class="comment" data-comment>
  1183. <div class="d-flex flex-column gap-2">
  1184. <svg class="quote-icon"><use xlink:href="#double-quotes-end-1"></use></svg>
  1185. <div class="message">
  1186. <p class="text">
  1187. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  1188. Maxime tempora ipsum dicta nesciunt, perspiciatis placeat molestias
  1189. nemo vitae nulla tempore.
  1190. </p>
  1191. </div>
  1192. <div class="info-user">
  1193. <div class="image">
  1194. <img src="assets/images/testimonials/face-02.png" alt="Face 02">
  1195. </div>
  1196. <div class="info">
  1197. <span class="name">Amanda Thompson</span>
  1198. <span class="role">Operations Manager</span>
  1199. <div class="rating">
  1200. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1201. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1202. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1203. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1204. <svg class="star"><use xlink:href="#star-filled"></use></svg>
  1205. </div>
  1206. </div>
  1207. </div>
  1208. </div>
  1209. </div>
  1210. </div>
  1211. </section>
  1212. <!-- Main 4 -->
  1213. <div class="main d-flex-center pt-10 pb-8">
  1214. <!-- Main Content -->
  1215. <div class="container main-content">
  1216. <!-- Blog section -->
  1217. <section class="blog no-blog-sidebar">
  1218. <div class="d-flex-baseline-between pb-5"
  1219. data-aos="fade-down"
  1220. data-aos-duration="600"
  1221. data-aos-delay="0">
  1222. <h2>Latest Blog Posts</h2>
  1223. <a href="blog-column-2.html" class="btn btn-primary">View All Posts</a>
  1224. </div>
  1225. <div class="blog-grid blog-grid-col3">
  1226. <!-- Blog Post 1 -->
  1227. <article class="blog-card"
  1228. data-aos="fade-up"
  1229. data-aos-delay="0">
  1230. <div class="blog-image">
  1231. <img class="image" src="assets/images/blog/post-1.png" alt="The Future of Web Development">
  1232. <div class="blog-category">
  1233. <span class="category-tag">Technology</span>
  1234. </div>
  1235. </div>
  1236. <div class="blog-content">
  1237. <div class="blog-meta">
  1238. <div class="blog-date">
  1239. <svg><use xlink:href="#calendar"></use></svg>
  1240. <span>July 15, 2025</span>
  1241. </div>
  1242. <div class="blog-author">
  1243. <svg><use xlink:href="#user"></use></svg>
  1244. <span>James Wilson</span>
  1245. </div>
  1246. </div>
  1247. <h3 class="blog-title">The Future of Web Development: Trends to Watch in 2025</h3>
  1248. <p class="blog-excerpt">
  1249. Discover the latest trends shaping the web development landscape,
  1250. from AI-powered tools to progressive web applications and beyond.
  1251. </p>
  1252. <div class="blog-footer">
  1253. <a href="article.html" class="read-more">
  1254. Read More
  1255. <svg><use xlink:href="#arrow-right"></use></svg>
  1256. </a>
  1257. <div class="blog-stats">
  1258. <span class="reading-time">
  1259. <svg><use xlink:href="#clock"></use></svg>
  1260. 4 min read
  1261. </span>
  1262. </div>
  1263. </div>
  1264. </div>
  1265. <a class="overlay-link" href="article.html"></a>
  1266. </article>
  1267. <!-- Blog Post 2 -->
  1268. <article class="blog-card"
  1269. data-aos="fade-up"
  1270. data-aos-delay="100">
  1271. <div class="blog-image">
  1272. <img class="image" src="assets/images/blog/post-2.png" alt="Mobile App Security Best Practices">
  1273. <div class="blog-category">
  1274. <span class="category-tag">Security</span>
  1275. </div>
  1276. </div>
  1277. <div class="blog-content">
  1278. <div class="blog-meta">
  1279. <div class="blog-date">
  1280. <svg><use xlink:href="#calendar"></use></svg>
  1281. <span>July 10, 2025</span>
  1282. </div>
  1283. <div class="blog-author">
  1284. <svg><use xlink:href="#user"></use></svg>
  1285. <span>James Wilson</span>
  1286. </div>
  1287. </div>
  1288. <h3 class="blog-title">Mobile App Security: Best Practices for Developers</h3>
  1289. <p class="blog-excerpt">
  1290. Learn essential security measures every mobile developer should implement
  1291. to protect user data and ensure app integrity.
  1292. </p>
  1293. <div class="blog-footer">
  1294. <a href="article.html" class="read-more">
  1295. Read More
  1296. <svg><use xlink:href="#arrow-right"></use></svg>
  1297. </a>
  1298. <div class="blog-stats">
  1299. <span class="reading-time">
  1300. <svg><use xlink:href="#clock"></use></svg>
  1301. 7 min read
  1302. </span>
  1303. </div>
  1304. </div>
  1305. </div>
  1306. <a class="overlay-link" href="article.html"></a>
  1307. </article>
  1308. <!-- Blog Post 3 -->
  1309. <article class="blog-card"
  1310. data-aos="fade-up"
  1311. data-aos-delay="200">
  1312. <div class="blog-image">
  1313. <img class="image" src="assets/images/blog/post-3.png" alt="Cloud Migration Strategies">
  1314. <div class="blog-category">
  1315. <span class="category-tag">Cloud</span>
  1316. </div>
  1317. </div>
  1318. <div class="blog-content">
  1319. <div class="blog-meta">
  1320. <div class="blog-date">
  1321. <svg><use xlink:href="#calendar"></use></svg>
  1322. <span>July 5, 2025</span>
  1323. </div>
  1324. <div class="blog-author">
  1325. <svg><use xlink:href="#user"></use></svg>
  1326. <span>Emma Rodriguez</span>
  1327. </div>
  1328. </div>
  1329. <h3 class="blog-title">Cloud Migration Strategies for Modern Businesses</h3>
  1330. <p class="blog-excerpt">
  1331. A comprehensive guide to successfully migrating your business infrastructure
  1332. to the cloud with minimal downtime and maximum efficiency.
  1333. </p>
  1334. <div class="blog-footer">
  1335. <a href="article.html" class="read-more">
  1336. Read More
  1337. <svg><use xlink:href="#arrow-right"></use></svg>
  1338. </a>
  1339. <div class="blog-stats">
  1340. <span class="reading-time">
  1341. <svg><use xlink:href="#clock"></use></svg>
  1342. 6 min read
  1343. </span>
  1344. </div>
  1345. </div>
  1346. </div>
  1347. <a class="overlay-link" href="article.html"></a>
  1348. </article>
  1349. </div>
  1350. </section>
  1351. <!-- Contact Form section -->
  1352. <section class="contact-form pt-5">
  1353. <div class="d-flex-center pb-5"
  1354. data-aos="fade-down"
  1355. data-aos-duration="600"
  1356. data-aos-delay="0">
  1357. <h2 class="heading-lg">Contact Us</h2>
  1358. </div>
  1359. <div class="contact-form-container"
  1360. data-aos="fade-up"
  1361. data-aos-delay="100">
  1362. <div class="contact-form-content">
  1363. <!-- Contact Info -->
  1364. <div class="contact-info-card">
  1365. <div class="contact-info-header">
  1366. <h3>Let's Start a Conversation</h3>
  1367. <p>Let's build the future of your business together. Contact our experts and start your digital journey today.</p>
  1368. </div>
  1369. <div class="contact-details">
  1370. <div class="contact-detail-item">
  1371. <div class="contact-icon">
  1372. <svg><use xlink:href="#phone"></use></svg>
  1373. </div>
  1374. <div class="contact-text">
  1375. <span class="label">Phone</span>
  1376. <span class="value">+1 (800) 987-6543</span>
  1377. </div>
  1378. </div>
  1379. <div class="contact-detail-item">
  1380. <div class="contact-icon">
  1381. <svg><use xlink:href="#envelope-1"></use></svg>
  1382. </div>
  1383. <div class="contact-text">
  1384. <span class="label">Email</span>
  1385. <span class="value">hello@itagency.com</span>
  1386. </div>
  1387. </div>
  1388. <div class="contact-detail-item">
  1389. <div class="contact-icon">
  1390. <svg><use xlink:href="#map-marker-1"></use></svg>
  1391. </div>
  1392. <div class="contact-text">
  1393. <span class="label">Address</span>
  1394. <span class="value">789 Innovation Avenue, Future Town, FT 67890</span>
  1395. </div>
  1396. </div>
  1397. <div class="contact-detail-item">
  1398. <div class="contact-icon">
  1399. <svg><use xlink:href="#alarm-1"></use></svg>
  1400. </div>
  1401. <div class="contact-text">
  1402. <span class="label">Business Hours</span>
  1403. <span class="value">Mon - Fri: 9:00 AM - 6:00 PM</span>
  1404. </div>
  1405. </div>
  1406. </div>
  1407. <div class="contact-social">
  1408. <span class="social-label">Follow Us</span>
  1409. <div class="social-links">
  1410. <a href="javascript:void(0)" class="social-link icon-transition sm" >
  1411. <svg><use xlink:href="#twitter-x"></use></svg>
  1412. </a>
  1413. <a href="javascript:void(0)" class="social-link icon-transition sm" >
  1414. <svg><use xlink:href="#facebook"></use></svg>
  1415. </a>
  1416. <a href="javascript:void(0)" class="social-link icon-transition sm" >
  1417. <svg><use xlink:href="#linkedin"></use></svg>
  1418. </a>
  1419. <a href="javascript:void(0)" class="social-link icon-transition sm" >
  1420. <svg><use xlink:href="#instagram"></use></svg>
  1421. </a>
  1422. </div>
  1423. </div>
  1424. </div>
  1425. <!-- Contact Form -->
  1426. <div class="contact-form-card">
  1427. <form id="contactForm" action="contact.php" method="POST" class="contact-form-fields">
  1428. <!-- Message sending notification -->
  1429. <div class="form-status">
  1430. <div class="form-success" id="form-success" style="display: none;">
  1431. <svg><use xlink:href="#lni-checkmark-circle"></use></svg>
  1432. <span>Thank you! Your message has been sent successfully. We'll get back to you within 24 hours.</span>
  1433. </div>
  1434. <div class="form-error-general" id="form-error" style="display: none;">
  1435. <svg><use xlink:href="#lni-warning"></use></svg>
  1436. <span>Something went wrong. Please try again or contact us directly.</span>
  1437. </div>
  1438. </div>
  1439. <!-- Form fields -->
  1440. <div class="form-group">
  1441. <label for="name" class="form-label">Full Name *</label>
  1442. <input type="text" id="name" name="name" class="form-input" required>
  1443. <span class="form-error" id="name-error"></span>
  1444. </div>
  1445. <div class="form-group">
  1446. <label for="email" class="form-label">Email Address *</label>
  1447. <input type="email" id="email" name="email" class="form-input" required>
  1448. <span class="form-error" id="email-error"></span>
  1449. </div>
  1450. <div class="form-group">
  1451. <label for="phone" class="form-label">Phone Number</label>
  1452. <input type="tel" id="phone" name="phone" class="form-input">
  1453. <span class="form-error" id="phone-error"></span>
  1454. </div>
  1455. <div class="form-group">
  1456. <label for="company" class="form-label">Company</label>
  1457. <input type="text" id="company" name="company" class="form-input">
  1458. </div>
  1459. <div class="form-group">
  1460. <label for="service" class="form-label">Service Interested In</label>
  1461. <select id="service" name="service" class="form-select">
  1462. <option value="">Select a service</option>
  1463. <option value="web-development">Web Development</option>
  1464. <option value="mobile-app">Mobile App Development</option>
  1465. <option value="cloud-solutions">Cloud Solutions</option>
  1466. <option value="digital-marketing">Digital Marketing</option>
  1467. <option value="ui-ux-design">UI/UX Design</option>
  1468. <option value="data-analytics">Data Analytics</option>
  1469. <option value="other">Other</option>
  1470. </select>
  1471. </div>
  1472. <div class="form-group">
  1473. <label for="budget" class="form-label">Project Budget</label>
  1474. <select id="budget" name="budget" class="form-select">
  1475. <option value="">Select budget range</option>
  1476. <option value="under-5k">Under $5,000</option>
  1477. <option value="5k-15k">$5,000 - $15,000</option>
  1478. <option value="15k-50k">$15,000 - $50,000</option>
  1479. <option value="50k-100k">$50,000 - $100,000</option>
  1480. <option value="over-100k">Over $100,000</option>
  1481. </select>
  1482. </div>
  1483. <div class="form-group form-group-full">
  1484. <label for="message" class="form-label">Project Details *</label>
  1485. <textarea id="message" name="message" class="form-textarea" rows="5"
  1486. placeholder="Tell us about your project requirements, goals, and any specific features you need..." required></textarea>
  1487. <span class="form-error" id="message-error"></span>
  1488. </div>
  1489. <div class="form-group form-group-full">
  1490. <label class="form-checkbox-container">
  1491. <input type="checkbox" name="newsletter" class="form-checkbox">
  1492. <span class="form-checkmark"></span>
  1493. <span class="form-checkbox-text">Subscribe to our newsletter for updates and tech insights</span>
  1494. </label>
  1495. </div>
  1496. <div class="form-group form-group-full">
  1497. <label class="form-checkbox-container">
  1498. <input type="checkbox" name="privacy" class="form-checkbox" required>
  1499. <span class="form-checkmark"></span>
  1500. <span class="form-checkbox-text">I agree to the <a href="#privacy" class="form-link">Privacy Policy</a> and <a href="#terms" class="form-link">Terms of Service</a> *</span>
  1501. </label>
  1502. <span class="form-error" id="privacy-error"></span>
  1503. </div>
  1504. <div class="form-actions">
  1505. <button type="submit" class="btn btn-primary form-submit-btn">
  1506. <span>Send Message</span>
  1507. </button>
  1508. </div>
  1509. </form>
  1510. </div>
  1511. </div>
  1512. </div>
  1513. </section>
  1514. </div>
  1515. </div>
  1516. <!-- Footer -->
  1517. <footer class="footer pb-5">
  1518. <div class="footer-main">
  1519. <div class="container">
  1520. <div class="footer-content">
  1521. <!-- Company Info -->
  1522. <div class="footer-section footer-about"
  1523. data-aos="fade-up"
  1524. data-aos-delay="100">
  1525. <div class="footer-logo">
  1526. <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
  1527. </div>
  1528. <p class="footer-description">
  1529. Empowering businesses with smart, innovative tech solutions.
  1530. We craft high-impact web development, mobile apps, and digital
  1531. services that fuel your growth and success.
  1532. </p>
  1533. <div class="footer-social">
  1534. <span class="social-label">Follow Us</span>
  1535. <div class="social-links">
  1536. <a href="javascript:void(0)" class="social-link icon-transition"
  1537. data-aos="zoom-in"
  1538. data-aos-delay="200">
  1539. <svg><use xlink:href="#twitter-x"></use></svg>
  1540. </a>
  1541. <a href="javascript:void(0)" class="social-link icon-transition"
  1542. data-aos="zoom-in"
  1543. data-aos-delay="250">
  1544. <svg><use xlink:href="#facebook"></use></svg>
  1545. </a>
  1546. <a href="javascript:void(0)" class="social-link icon-transition"
  1547. data-aos="zoom-in"
  1548. data-aos-delay="300">
  1549. <svg><use xlink:href="#linkedin"></use></svg>
  1550. </a>
  1551. <a href="javascript:void(0)" class="social-link icon-transition"
  1552. data-aos="zoom-in"
  1553. data-aos-delay="350">
  1554. <svg><use xlink:href="#instagram"></use></svg>
  1555. </a>
  1556. </div>
  1557. </div>
  1558. </div>
  1559. <!-- Navigation Links -->
  1560. <div class="footer-section footer-links"
  1561. data-aos="fade-up"
  1562. data-aos-delay="200">
  1563. <h4 class="footer-title">Navigation</h4>
  1564. <ul class="footer-menu">
  1565. <li><a href="index.html" class="footer-link">Home</a></li>
  1566. <li><a href="about-us.html" class="footer-link">About Us</a></li>
  1567. <li><a href="services.html" class="footer-link">Services</a></li>
  1568. <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
  1569. <li><a href="team.html" class="footer-link">Team</a></li>
  1570. <li><a href="pricing.html" class="footer-link">Pricing</a></li>
  1571. <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
  1572. <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
  1573. <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
  1574. </ul>
  1575. </div>
  1576. <!-- Services -->
  1577. <div class="footer-section footer-services"
  1578. data-aos="fade-up"
  1579. data-aos-delay="300">
  1580. <h4 class="footer-title">Our Services</h4>
  1581. <ul class="footer-menu">
  1582. <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
  1583. <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
  1584. <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
  1585. <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
  1586. <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
  1587. <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
  1588. <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
  1589. <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
  1590. </ul>
  1591. </div>
  1592. <!-- Contact Info -->
  1593. <div class="footer-section footer-contact"
  1594. data-aos="fade-up"
  1595. data-aos-delay="400">
  1596. <h4 class="footer-title">Contact Info</h4>
  1597. <div class="footer-contact-info">
  1598. <div class="contact-item">
  1599. <div class="contact-icon">
  1600. <svg><use xlink:href="#map-marker-1"></use></svg>
  1601. </div>
  1602. <div class="contact-text">
  1603. <span class="contact-label">Address</span>
  1604. <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
  1605. </div>
  1606. </div>
  1607. <div class="contact-item">
  1608. <div class="contact-icon">
  1609. <svg><use xlink:href="#phone"></use></svg>
  1610. </div>
  1611. <div class="contact-text">
  1612. <span class="contact-label">Phone</span>
  1613. <span class="contact-value">+1 (800) 987-6543</span>
  1614. </div>
  1615. </div>
  1616. <div class="contact-item">
  1617. <div class="contact-icon">
  1618. <svg><use xlink:href="#envelope-1"></use></svg>
  1619. </div>
  1620. <div class="contact-text">
  1621. <span class="contact-label">Email</span>
  1622. <span class="contact-value">hello@itagency.com</span>
  1623. </div>
  1624. </div>
  1625. <div class="contact-item">
  1626. <div class="contact-icon">
  1627. <svg><use xlink:href="#alarm-1"></use></svg>
  1628. </div>
  1629. <div class="contact-text">
  1630. <span class="contact-label">Business Hours</span>
  1631. <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
  1632. </div>
  1633. </div>
  1634. </div>
  1635. </div>
  1636. <!-- Newsletter -->
  1637. <div class="footer-section footer-newsletter"
  1638. data-aos="fade-up"
  1639. data-aos-delay="500">
  1640. <h4 class="footer-title">Newsletter</h4>
  1641. <p class="newsletter-description">
  1642. Subscribe to our newsletter for the latest tech insights and updates.
  1643. </p>
  1644. <form class="newsletter-form" id="newsletterForm">
  1645. <div class="newsletter-input-group">
  1646. <input type="email"
  1647. class="newsletter-input"
  1648. placeholder="Enter your email address"
  1649. required>
  1650. <button type="submit" class="newsletter-btn">
  1651. <svg><use xlink:href="#arrow-right"></use></svg>
  1652. </button>
  1653. </div>
  1654. <label class="newsletter-checkbox">
  1655. <input name="newsletter-agreement" type="checkbox">
  1656. <span class="checkmark"></span>
  1657. <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
  1658. </label>
  1659. </form>
  1660. <!-- Copyright -->
  1661. <div class="footer-copyright"
  1662. data-aos="fade-up"
  1663. data-aos-delay="500">
  1664. <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
  1665. </div>
  1666. </div>
  1667. </div>
  1668. </div>
  1669. </div>
  1670. </footer>
  1671. <!-- Scroll to Top Button -->
  1672. <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
  1673. <svg viewBox="0 0 24 24">
  1674. <path d="M7 14l5-5 5 5z"/>
  1675. </svg>
  1676. </button>
  1677. <!-- JavaScript -->
  1678. <script src="assets/lib/particles/particles.min.js"></script>
  1679. <script src="assets/lib/aos/aos.js"></script>
  1680. <script src="assets/lib/hover3dBgEffects/hover3d-bg-effects.js"></script>
  1681. <script src="assets/js/heroedge.js"></script>
  1682. <script src="assets/js/custom-isotope.js"></script>
  1683. <script src="assets/js/testimonials.js"></script>
  1684. <script src="assets/js/auto-progress-bar.js"></script>
  1685. <script src="assets/js/animate-counters.js"></script>
  1686. <script src="assets/js/universal-slider.js"></script>
  1687. <script src="assets/js/contact-form-demo.js"></script>
  1688. <script src="assets/js/main-01.js"></script>
  1689. </body>
  1690. </html>