pricing.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  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>Pricing - Transparent and Flexible Plans | ITAgency</title>
  7. <meta name="description" content="Explore ITAgency’s clear and flexible pricing plans tailored for businesses of all sizes. Find the perfect package for web development, app design, consulting, and more.">
  8. <!-- Favicon -->
  9. <link rel="icon" type="image/x-icon" href="assets/images/ico-01.png">
  10. <!-- CSS Files -->
  11. <link rel="stylesheet" href="assets/css/aos.css">
  12. <link rel="stylesheet" href="assets/css/universal-slider.css">
  13. <!-- General CSS files -->
  14. <link rel="stylesheet" href="assets/css/globals.css">
  15. <link rel="stylesheet" href="assets/css/style.css">
  16. </head>
  17. <body class="body-1">
  18. <!-- Tech Page Loader -->
  19. <div id="page-loader" class="page-loader">
  20. <div class="loader-container">
  21. <div class="loader-content">
  22. <!-- Advanced Tech Spinner Only -->
  23. <div class="loader-spinner">
  24. <div class="spinner-ring">
  25. <div></div>
  26. </div>
  27. </div>
  28. <!-- Advanced Progress Bar -->
  29. <div class="loader-progress">
  30. <div class="progress-bar"></div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <!-- Header -->
  36. <header class="header">
  37. <div class="container d-flex-between">
  38. <!-- Logo -->
  39. <div class="logo position-relative">
  40. <img class="image" src="assets/images/logo-transparent-01.png" alt="Logo">
  41. <a class="overlay-link" href="index.html"></a>
  42. </div>
  43. <!-- Navigation -->
  44. <nav class="navbar" id="navbar">
  45. <ul class="nav-menu">
  46. <li class="dropdown">
  47. <a class="dropdown-toggle" data-dropdown="home-dropdown">Home</a>
  48. <ul class="dropdown-menu" id="home-dropdown">
  49. <li><a href="index.html" class="dropdown-item">Home 1</a></li>
  50. <li><a href="heroedge.html" class="dropdown-item">Hero Edge</a></li>
  51. <li><a href="home-page-2.html" class="dropdown-item">Home 2</a></li>
  52. <li><a href="home-page-3.html" class="dropdown-item">Home 3</a></li>
  53. <li><a href="home-page-4.html" class="dropdown-item">Home 4</a></li>
  54. </ul>
  55. </li>
  56. <li><a href="about-us.html" class="nav-link">About Us</a></li>
  57. <li><a href="services.html" class="nav-link">Services</a></li>
  58. <li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
  59. <li class="dropdown">
  60. <a class="dropdown-toggle" data-dropdown="blog-dropdown">Blog</a>
  61. <ul class="dropdown-menu" id="blog-dropdown">
  62. <li><a href="blog-column-1.html" class="dropdown-item">Blog Column 1</a></li>
  63. <li><a href="blog-column-2.html" class="dropdown-item">Blog Column 2</a></li>
  64. <li><a href="blog-column-3.html" class="dropdown-item">Blog Column 3</a></li>
  65. <li><a href="article.html" class="dropdown-item">Blog Detail Page</a></li>
  66. </ul>
  67. </li>
  68. <li class="dropdown">
  69. <a class="dropdown-toggle" data-dropdown="pages-dropdown">Pages</a>
  70. <ul class="dropdown-menu" id="pages-dropdown">
  71. <li><a href="process.html" class="dropdown-item">Process</a></li>
  72. <li><a href="pricing.html" class="dropdown-item">Pricing</a></li>
  73. <li><a href="team.html" class="dropdown-item">Team</a></li>
  74. <li><a href="team-member.html" class="dropdown-item">Team Member</a></li>
  75. <li><a href="faqs.html" class="dropdown-item">FAQs</a></li>
  76. <li><a href="terms-conditions.html" class="dropdown-item">Terms & Conditions</a></li>
  77. <li><a href="privacy-policy.html" class="dropdown-item">Privacy Policy</a></li>
  78. <li><a href="service-cards-grid.html" class="dropdown-item">Service Cards Grid</a></li>
  79. <li><a href="buttons.html" class="dropdown-item">Buttons</a></li>
  80. <li><a href="typography.html" class="dropdown-item">Fonts</a></li>
  81. </ul>
  82. </li>
  83. <li><a href="contact-us.html" class="nav-link">Contact Us</a></li>
  84. </ul>
  85. </nav>
  86. <!-- Get Quotes Button -->
  87. <div class="actions d-flex-center">
  88. <a pages/contact-us.html class="btn btn-get-quotes">Get Quotes</a>
  89. <div class="theme-switcher">
  90. <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
  91. <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>
  92. <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>
  93. </button>
  94. </div>
  95. </div>
  96. <!-- Mobile Menu Toggle -->
  97. <button class="mobile-menu-toggle" id="mobile-menu-toggle">
  98. <span class="hamburger-line"></span>
  99. <span class="hamburger-line"></span>
  100. <span class="hamburger-line"></span>
  101. </button>
  102. </div>
  103. </header>
  104. <!-- Page Header Section -->
  105. <section class="page-header">
  106. <div class="page-header-bg">
  107. <!-- Animated particles/dots background -->
  108. <div class="particles-container">
  109. <div class="particle"></div>
  110. <div class="particle"></div>
  111. <div class="particle"></div>
  112. <div class="particle"></div>
  113. <div class="particle"></div>
  114. <div class="particle"></div>
  115. <div class="particle"></div>
  116. <div class="particle"></div>
  117. <div class="particle"></div>
  118. <div class="particle"></div>
  119. <div class="particle"></div>
  120. <div class="particle"></div>
  121. </div>
  122. <!-- Geometric patterns overlay -->
  123. <div class="geometric-overlay">
  124. <div class="geometric-shape shape-1"></div>
  125. <div class="geometric-shape shape-2"></div>
  126. <div class="geometric-shape shape-3"></div>
  127. <div class="geometric-shape shape-4"></div>
  128. </div>
  129. <!-- Digital grid pattern -->
  130. <div class="digital-grid"></div>
  131. </div>
  132. <div class="page-header-content">
  133. <div>
  134. <div class="breadcrumb"
  135. data-aos="fade-down"
  136. data-aos-duration="600"
  137. data-aos-delay="0">
  138. <a href="index.html" class="breadcrumb-link">Home</a>
  139. <span class="breadcrumb-separator">
  140. <svg viewBox="0 0 24 24">
  141. <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
  142. </svg>
  143. </span>
  144. <span class="breadcrumb-current">Pricing</span>
  145. </div>
  146. <h1 class="page-title"
  147. data-aos="fade-up"
  148. data-aos-duration="600"
  149. data-aos-delay="100">Pricing</h1>
  150. <p class="page-description"
  151. data-aos="fade-up"
  152. data-aos-duration="600"
  153. data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique doloremque molestiae quae.</p>
  154. </div>
  155. </div>
  156. <!-- Floating elements -->
  157. <div class="floating-elements">
  158. <div class="floating-circle floating-circle-1"></div>
  159. <div class="floating-circle floating-circle-2"></div>
  160. <div class="floating-circle floating-circle-3"></div>
  161. </div>
  162. </section>
  163. <!-- Main 1 -->
  164. <div class="main d-flex-center pt-8 pb-8">
  165. <!-- Main Content -->
  166. <div class="container main-content">
  167. <!-- Pricing Plans section -->
  168. <section class="pricing-plants">
  169. <div class="options-plants">
  170. <div class="plants"
  171. data-aos="fade-left"
  172. data-aos-delay="150">
  173. <div class="plant-header">
  174. <h2 class="mb-0">Basic</h2>
  175. <p>Perfect for small businesses and startups</p>
  176. </div>
  177. <div class="price d-flex-center">
  178. <span class="price-main">$37 <span class="price-discount">$50</span></span>
  179. </div>
  180. <div class="d-flex-center">
  181. <a href="javascript:void(0)" class="btn btn-primary">Buy Basic Plan</a>
  182. </div>
  183. <div class="benefits">
  184. <div class="line"></div>
  185. <ul class="benefits-list">
  186. <li class="benefit-item">
  187. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  188. <span class="text">Up to 5 Pages Website</span>
  189. </li>
  190. <li class="benefit-item">
  191. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  192. <span class="text">Mobile Responsive Design</span>
  193. </li>
  194. <li class="benefit-item">
  195. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  196. <span class="text">Basic SEO Optimization</span>
  197. </li>
  198. <li class="benefit-item">
  199. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  200. <span class="text">Contact Form Integration</span>
  201. </li>
  202. <li class="benefit-item">
  203. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  204. <span class="text">1 Month Free Support</span>
  205. </li>
  206. <li class="benefit-item">
  207. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  208. <span class="text">SSL Certificate</span>
  209. </li>
  210. <li class="benefit-item unavailable">
  211. <div class="circle-x-svg">
  212. <svg viewBox="0 0 24 24" width="18" height="18">
  213. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  214. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  215. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  216. </svg>
  217. </div>
  218. <span class="text">E-commerce Functionality</span>
  219. </li>
  220. <li class="benefit-item unavailable">
  221. <div class="circle-x-svg">
  222. <svg viewBox="0 0 24 24" width="18" height="18">
  223. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  224. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  225. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  226. </svg>
  227. </div>
  228. <span class="text">Advanced Analytics</span>
  229. </li>
  230. <li class="benefit-item unavailable">
  231. <div class="circle-x-svg">
  232. <svg viewBox="0 0 24 24" width="18" height="18">
  233. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  234. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  235. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  236. </svg>
  237. </div>
  238. <span class="text">Priority Support</span>
  239. </li>
  240. </ul>
  241. </div>
  242. </div>
  243. <div class="plants most-popular"
  244. data-aos="fade-down"
  245. data-aos-delay="100">
  246. <div class="tag-most-popular">
  247. <span>Most Popular</span>
  248. </div>
  249. <div class="plant-header">
  250. <h2 class="mb-0">Pro</h2>
  251. <p>Ideal for growing businesses</p>
  252. </div>
  253. <div class="price d-flex-center">
  254. <span class="price-main">$57 <span class="price-discount">$70</span></span>
  255. </div>
  256. <div class="d-flex-center">
  257. <a href="javascript:void(0)" class="btn btn-primary">Buy Pro Plan</a>
  258. </div>
  259. <div class="benefits">
  260. <div class="line"></div>
  261. <ul class="benefits-list">
  262. <li class="benefit-item">
  263. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  264. <span class="text">Up to 5 Pages Website</span>
  265. </li>
  266. <li class="benefit-item">
  267. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  268. <span class="text">Mobile Responsive Design</span>
  269. </li>
  270. <li class="benefit-item">
  271. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  272. <span class="text">Basic SEO Optimization</span>
  273. </li>
  274. <li class="benefit-item">
  275. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  276. <span class="text">Contact Form Integration</span>
  277. </li>
  278. <li class="benefit-item">
  279. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  280. <span class="text">1 Month Free Support</span>
  281. </li>
  282. <li class="benefit-item">
  283. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  284. <span class="text">SSL Certificate</span>
  285. </li>
  286. <li class="benefit-item unavailable">
  287. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  288. <span class="text">E-commerce Functionality</span>
  289. </li>
  290. <li class="benefit-item unavailable">
  291. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  292. <span class="text">Advanced Analytics</span>
  293. </li>
  294. <li class="benefit-item unavailable">
  295. <div class="circle-x-svg">
  296. <svg viewBox="0 0 24 24" width="18" height="18">
  297. <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
  298. <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2"/>
  299. <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2"/>
  300. </svg>
  301. </div>
  302. <span class="text">Priority Support</span>
  303. </li>
  304. </ul>
  305. </div>
  306. </div>
  307. <div class="plants"
  308. data-aos="fade-right"
  309. data-aos-delay="150">
  310. <div class="plant-header">
  311. <h2 class="mb-0">Enterprise</h2>
  312. <p>For large-scale businesses</p>
  313. </div>
  314. <div class="price d-flex-center">
  315. <span class="price-main">$77 <span class="price-discount">$100</span></span>
  316. </div>
  317. <div class="d-flex-center">
  318. <a href="javascript:void(0)" class="btn btn-primary">Buy Enterprise Plan</a>
  319. </div>
  320. <div class="benefits">
  321. <div class="line"></div>
  322. <ul class="benefits-list">
  323. <li class="benefit-item">
  324. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  325. <span class="text">Up to 5 Pages Website</span>
  326. </li>
  327. <li class="benefit-item">
  328. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  329. <span class="text">Mobile Responsive Design</span>
  330. </li>
  331. <li class="benefit-item">
  332. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  333. <span class="text">Basic SEO Optimization</span>
  334. </li>
  335. <li class="benefit-item">
  336. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  337. <span class="text">Contact Form Integration</span>
  338. </li>
  339. <li class="benefit-item">
  340. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  341. <span class="text">1 Month Free Support</span>
  342. </li>
  343. <li class="benefit-item">
  344. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  345. <span class="text">SSL Certificate</span>
  346. </li>
  347. <li class="benefit-item unavailable">
  348. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  349. <span class="text">E-commerce Functionality</span>
  350. </li>
  351. <li class="benefit-item unavailable">
  352. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  353. <span class="text">Advanced Analytics</span>
  354. </li>
  355. <li class="benefit-item unavailable">
  356. <svg class="benefit-icon"><use xlink:href="#check-circle-1"></use></svg>
  357. <span class="text">Priority Support</span>
  358. </li>
  359. </ul>
  360. </div>
  361. </div>
  362. </div>
  363. </section>
  364. </div>
  365. </div>
  366. <!-- Footer -->
  367. <footer class="footer pb-5">
  368. <div class="footer-main">
  369. <div class="container">
  370. <div class="footer-content">
  371. <!-- Company Info -->
  372. <div class="footer-section footer-about"
  373. data-aos="fade-up"
  374. data-aos-delay="100">
  375. <div class="footer-logo">
  376. <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
  377. </div>
  378. <p class="footer-description">
  379. Empowering businesses with smart, innovative tech solutions.
  380. We craft high-impact web development, mobile apps, and digital
  381. services that fuel your growth and success.
  382. </p>
  383. <div class="footer-social">
  384. <span class="social-label">Follow Us</span>
  385. <div class="social-links">
  386. <a href="javascript:void(0)" class="social-link icon-transition"
  387. data-aos="zoom-in"
  388. data-aos-delay="200">
  389. <svg><use xlink:href="#twitter-x"></use></svg>
  390. </a>
  391. <a href="javascript:void(0)" class="social-link icon-transition"
  392. data-aos="zoom-in"
  393. data-aos-delay="250">
  394. <svg><use xlink:href="#facebook"></use></svg>
  395. </a>
  396. <a href="javascript:void(0)" class="social-link icon-transition"
  397. data-aos="zoom-in"
  398. data-aos-delay="300">
  399. <svg><use xlink:href="#linkedin"></use></svg>
  400. </a>
  401. <a href="javascript:void(0)" class="social-link icon-transition"
  402. data-aos="zoom-in"
  403. data-aos-delay="350">
  404. <svg><use xlink:href="#instagram"></use></svg>
  405. </a>
  406. </div>
  407. </div>
  408. </div>
  409. <!-- Navigation Links -->
  410. <div class="footer-section footer-links"
  411. data-aos="fade-up"
  412. data-aos-delay="200">
  413. <h4 class="footer-title">Navigation</h4>
  414. <ul class="footer-menu">
  415. <li><a href="index.html" class="footer-link">Home</a></li>
  416. <li><a href="about-us.html" class="footer-link">About Us</a></li>
  417. <li><a href="services.html" class="footer-link">Services</a></li>
  418. <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
  419. <li><a href="team.html" class="footer-link">Team</a></li>
  420. <li><a href="pricing.html" class="footer-link">Pricing</a></li>
  421. <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
  422. <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
  423. <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
  424. </ul>
  425. </div>
  426. <!-- Services -->
  427. <div class="footer-section footer-services"
  428. data-aos="fade-up"
  429. data-aos-delay="300">
  430. <h4 class="footer-title">Our Services</h4>
  431. <ul class="footer-menu">
  432. <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
  433. <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
  434. <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
  435. <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
  436. <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
  437. <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
  438. <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
  439. <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
  440. </ul>
  441. </div>
  442. <!-- Contact Info -->
  443. <div class="footer-section footer-contact"
  444. data-aos="fade-up"
  445. data-aos-delay="400">
  446. <h4 class="footer-title">Contact Info</h4>
  447. <div class="footer-contact-info">
  448. <div class="contact-item">
  449. <div class="contact-icon">
  450. <svg><use xlink:href="#map-marker-1"></use></svg>
  451. </div>
  452. <div class="contact-text">
  453. <span class="contact-label">Address</span>
  454. <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
  455. </div>
  456. </div>
  457. <div class="contact-item">
  458. <div class="contact-icon">
  459. <svg><use xlink:href="#phone"></use></svg>
  460. </div>
  461. <div class="contact-text">
  462. <span class="contact-label">Phone</span>
  463. <span class="contact-value">+1 (800) 987-6543</span>
  464. </div>
  465. </div>
  466. <div class="contact-item">
  467. <div class="contact-icon">
  468. <svg><use xlink:href="#envelope-1"></use></svg>
  469. </div>
  470. <div class="contact-text">
  471. <span class="contact-label">Email</span>
  472. <span class="contact-value">hello@itagency.com</span>
  473. </div>
  474. </div>
  475. <div class="contact-item">
  476. <div class="contact-icon">
  477. <svg><use xlink:href="#alarm-1"></use></svg>
  478. </div>
  479. <div class="contact-text">
  480. <span class="contact-label">Business Hours</span>
  481. <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. <!-- Newsletter -->
  487. <div class="footer-section footer-newsletter"
  488. data-aos="fade-up"
  489. data-aos-delay="500">
  490. <h4 class="footer-title">Newsletter</h4>
  491. <p class="newsletter-description">
  492. Subscribe to our newsletter for the latest tech insights and updates.
  493. </p>
  494. <form class="newsletter-form" id="newsletterForm">
  495. <div class="newsletter-input-group">
  496. <input type="email"
  497. class="newsletter-input"
  498. placeholder="Enter your email address"
  499. required>
  500. <button type="submit" class="newsletter-btn">
  501. <svg><use xlink:href="#arrow-right"></use></svg>
  502. </button>
  503. </div>
  504. <label class="newsletter-checkbox">
  505. <input name="newsletter-agreement" type="checkbox">
  506. <span class="checkmark"></span>
  507. <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
  508. </label>
  509. </form>
  510. <!-- Copyright -->
  511. <div class="footer-copyright"
  512. data-aos="fade-up"
  513. data-aos-delay="500">
  514. <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
  515. </div>
  516. </div>
  517. </div>
  518. </div>
  519. </div>
  520. </footer>
  521. <!-- Scroll to Top Button -->
  522. <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
  523. <svg viewBox="0 0 24 24">
  524. <path d="M7 14l5-5 5 5z"/>
  525. </svg>
  526. </button>
  527. <!-- JavaScript -->
  528. <script src="assets/lib/aos/aos.js"></script>
  529. <script src="assets/js/custom-isotope.js"></script>
  530. <script src="assets/js/universal-slider.js"></script>
  531. <script src="assets/js/main-01.js"></script>
  532. </body>
  533. </html>