faqs.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  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>FAQs - Frequently Asked Questions | ITAgency</title>
  7. <meta name="description" content="Find quick answers to the most common questions about ITAgency's services, support, project timelines, pricing, and more. We're here to help you understand our process better.">
  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. <link rel="stylesheet" href="assets/css/faq-accordion.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. <!-- Page Header Section -->
  106. <section class="page-header">
  107. <div class="page-header-bg">
  108. <!-- Animated particles/dots background -->
  109. <div class="particles-container">
  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 class="particle"></div>
  122. </div>
  123. <!-- Geometric patterns overlay -->
  124. <div class="geometric-overlay">
  125. <div class="geometric-shape shape-1"></div>
  126. <div class="geometric-shape shape-2"></div>
  127. <div class="geometric-shape shape-3"></div>
  128. <div class="geometric-shape shape-4"></div>
  129. </div>
  130. <!-- Digital grid pattern -->
  131. <div class="digital-grid"></div>
  132. </div>
  133. <div class="page-header-content">
  134. <div>
  135. <div class="breadcrumb"
  136. data-aos="fade-down"
  137. data-aos-duration="600"
  138. data-aos-delay="0">
  139. <a href="index.html" class="breadcrumb-link">Home</a>
  140. <span class="breadcrumb-separator">
  141. <svg viewBox="0 0 24 24">
  142. <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
  143. </svg>
  144. </span>
  145. <span class="breadcrumb-current">FAQs</span>
  146. </div>
  147. <h1 class="page-title"
  148. data-aos="fade-up"
  149. data-aos-duration="600"
  150. data-aos-delay="100">FAQs</h1>
  151. <p class="page-description"
  152. data-aos="fade-up"
  153. data-aos-duration="600"
  154. data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique doloremque molestiae quae.</p>
  155. </div>
  156. </div>
  157. <!-- Floating elements -->
  158. <div class="floating-elements">
  159. <div class="floating-circle floating-circle-1"></div>
  160. <div class="floating-circle floating-circle-2"></div>
  161. <div class="floating-circle floating-circle-3"></div>
  162. </div>
  163. </section>
  164. <!-- Main 1 -->
  165. <div class="main d-flex-center pt-8 pb-8">
  166. <!-- Main Content -->
  167. <div class="container main-content">
  168. <!-- Faq section -->
  169. <section class="faq-section"
  170. data-faq
  171. data-color="var(--color-primary)"
  172. data-bg="var(--color-surface)"
  173. data-title-color="var(--color-primary)"
  174. data-text-color="var(--color-text-primary)"
  175. data-border="1px solid var(--color-primary)"
  176. data-multiple="false">
  177. <div class="container">
  178. <div class="faq-content">
  179. <div class="faq-item"
  180. data-aos="fade-up"
  181. data-aos-delay="100">
  182. <div class="faq-question">
  183. <h3 class="question-text">What services do you offer?</h3>
  184. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  185. <svg class="faq-icon">
  186. <use xlink:href="#chevron-down"></use>
  187. </svg>
  188. </button>
  189. </div>
  190. <div class="faq-answer">
  191. <div class="answer-content">
  192. <p>We offer a comprehensive range of IT services including web development, mobile app development, cloud solutions, cybersecurity, and digital transformation consulting. Our team specializes in creating custom solutions tailored to your business needs.</p>
  193. </div>
  194. </div>
  195. </div>
  196. <div class="faq-item"
  197. data-aos="fade-up"
  198. data-aos-delay="200">
  199. <div class="faq-question">
  200. <h3 class="question-text">How long does a typical project take?</h3>
  201. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  202. <svg class="faq-icon">
  203. <use xlink:href="#chevron-down"></use>
  204. </svg>
  205. </button>
  206. </div>
  207. <div class="faq-answer">
  208. <div class="answer-content">
  209. <p>Project timelines vary depending on complexity and scope. A simple website might take 2-4 weeks, while complex enterprise applications can take 3-6 months. We provide detailed timelines during our initial consultation and keep you updated throughout the development process.</p>
  210. </div>
  211. </div>
  212. </div>
  213. <div class="faq-item"
  214. data-aos="fade-up"
  215. data-aos-delay="300">
  216. <div class="faq-question">
  217. <h3 class="question-text">Do you provide ongoing support and maintenance?</h3>
  218. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  219. <svg class="faq-icon">
  220. <use xlink:href="#chevron-down"></use>
  221. </svg>
  222. </button>
  223. </div>
  224. <div class="faq-answer">
  225. <div class="answer-content">
  226. <p>Yes, we offer comprehensive maintenance and support packages. This includes regular updates, security patches, performance monitoring, and technical support. We believe in building long-term relationships with our clients.</p>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="faq-item"
  231. data-aos="fade-up"
  232. data-aos-delay="400">
  233. <div class="faq-question">
  234. <h3 class="question-text">What is your pricing model?</h3>
  235. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  236. <svg class="faq-icon">
  237. <use xlink:href="#chevron-down"></use>
  238. </svg>
  239. </button>
  240. </div>
  241. <div class="faq-answer">
  242. <div class="answer-content">
  243. <p>Our pricing is project-based and depends on the scope, complexity, and timeline. We offer transparent pricing with no hidden fees. After understanding your requirements, we provide a detailed quote with breakdown of costs for each phase of the project.</p>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="faq-item"
  248. data-aos="fade-up"
  249. data-aos-delay="500">
  250. <div class="faq-question">
  251. <h3 class="question-text">Can you work with our existing team?</h3>
  252. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  253. <svg class="faq-icon">
  254. <use xlink:href="#chevron-down"></use>
  255. </svg>
  256. </button>
  257. </div>
  258. <div class="faq-answer">
  259. <div class="answer-content">
  260. <p>Absolutely! We frequently collaborate with in-house teams and can integrate seamlessly with your existing workflows. We're flexible in our approach and can work as an extension of your team or provide guidance and training to your staff.</p>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="faq-item"
  265. data-aos="fade-up"
  266. data-aos-delay="600">
  267. <div class="faq-question">
  268. <h3 class="question-text">Do you sign NDAs and ensure data security?</h3>
  269. <button class="faq-toggle" aria-expanded="false" aria-label="Toggle answer">
  270. <svg class="faq-icon">
  271. <use xlink:href="#chevron-down"></use>
  272. </svg>
  273. </button>
  274. </div>
  275. <div class="faq-answer">
  276. <div class="answer-content">
  277. <p>Yes, we take data security very seriously. We're happy to sign NDAs and follow strict security protocols. All our processes are compliant with industry standards, and we implement robust security measures to protect your sensitive information throughout the project lifecycle.</p>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. </section>
  284. </div>
  285. </div>
  286. <!-- Footer -->
  287. <footer class="footer pb-5">
  288. <div class="footer-main">
  289. <div class="container">
  290. <div class="footer-content">
  291. <!-- Company Info -->
  292. <div class="footer-section footer-about"
  293. data-aos="fade-up"
  294. data-aos-delay="100">
  295. <div class="footer-logo">
  296. <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
  297. </div>
  298. <p class="footer-description">
  299. Empowering businesses with smart, innovative tech solutions.
  300. We craft high-impact web development, mobile apps, and digital
  301. services that fuel your growth and success.
  302. </p>
  303. <div class="footer-social">
  304. <span class="social-label">Follow Us</span>
  305. <div class="social-links">
  306. <a href="javascript:void(0)" class="social-link icon-transition"
  307. data-aos="zoom-in"
  308. data-aos-delay="200">
  309. <svg><use xlink:href="#twitter-x"></use></svg>
  310. </a>
  311. <a href="javascript:void(0)" class="social-link icon-transition"
  312. data-aos="zoom-in"
  313. data-aos-delay="250">
  314. <svg><use xlink:href="#facebook"></use></svg>
  315. </a>
  316. <a href="javascript:void(0)" class="social-link icon-transition"
  317. data-aos="zoom-in"
  318. data-aos-delay="300">
  319. <svg><use xlink:href="#linkedin"></use></svg>
  320. </a>
  321. <a href="javascript:void(0)" class="social-link icon-transition"
  322. data-aos="zoom-in"
  323. data-aos-delay="350">
  324. <svg><use xlink:href="#instagram"></use></svg>
  325. </a>
  326. </div>
  327. </div>
  328. </div>
  329. <!-- Navigation Links -->
  330. <div class="footer-section footer-links"
  331. data-aos="fade-up"
  332. data-aos-delay="200">
  333. <h4 class="footer-title">Navigation</h4>
  334. <ul class="footer-menu">
  335. <li><a href="index.html" class="footer-link">Home</a></li>
  336. <li><a href="about-us.html" class="footer-link">About Us</a></li>
  337. <li><a href="services.html" class="footer-link">Services</a></li>
  338. <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
  339. <li><a href="team.html" class="footer-link">Team</a></li>
  340. <li><a href="pricing.html" class="footer-link">Pricing</a></li>
  341. <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
  342. <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
  343. <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
  344. </ul>
  345. </div>
  346. <!-- Services -->
  347. <div class="footer-section footer-services"
  348. data-aos="fade-up"
  349. data-aos-delay="300">
  350. <h4 class="footer-title">Our Services</h4>
  351. <ul class="footer-menu">
  352. <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
  353. <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
  354. <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
  355. <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
  356. <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
  357. <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
  358. <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
  359. <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
  360. </ul>
  361. </div>
  362. <!-- Contact Info -->
  363. <div class="footer-section footer-contact"
  364. data-aos="fade-up"
  365. data-aos-delay="400">
  366. <h4 class="footer-title">Contact Info</h4>
  367. <div class="footer-contact-info">
  368. <div class="contact-item">
  369. <div class="contact-icon">
  370. <svg><use xlink:href="#map-marker-1"></use></svg>
  371. </div>
  372. <div class="contact-text">
  373. <span class="contact-label">Address</span>
  374. <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
  375. </div>
  376. </div>
  377. <div class="contact-item">
  378. <div class="contact-icon">
  379. <svg><use xlink:href="#phone"></use></svg>
  380. </div>
  381. <div class="contact-text">
  382. <span class="contact-label">Phone</span>
  383. <span class="contact-value">+1 (800) 987-6543</span>
  384. </div>
  385. </div>
  386. <div class="contact-item">
  387. <div class="contact-icon">
  388. <svg><use xlink:href="#envelope-1"></use></svg>
  389. </div>
  390. <div class="contact-text">
  391. <span class="contact-label">Email</span>
  392. <span class="contact-value">hello@itagency.com</span>
  393. </div>
  394. </div>
  395. <div class="contact-item">
  396. <div class="contact-icon">
  397. <svg><use xlink:href="#alarm-1"></use></svg>
  398. </div>
  399. <div class="contact-text">
  400. <span class="contact-label">Business Hours</span>
  401. <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <!-- Newsletter -->
  407. <div class="footer-section footer-newsletter"
  408. data-aos="fade-up"
  409. data-aos-delay="500">
  410. <h4 class="footer-title">Newsletter</h4>
  411. <p class="newsletter-description">
  412. Subscribe to our newsletter for the latest tech insights and updates.
  413. </p>
  414. <form class="newsletter-form" id="newsletterForm">
  415. <div class="newsletter-input-group">
  416. <input type="email"
  417. class="newsletter-input"
  418. placeholder="Enter your email address"
  419. required>
  420. <button type="submit" class="newsletter-btn">
  421. <svg><use xlink:href="#arrow-right"></use></svg>
  422. </button>
  423. </div>
  424. <label class="newsletter-checkbox">
  425. <input name="newsletter-agreement" type="checkbox">
  426. <span class="checkmark"></span>
  427. <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
  428. </label>
  429. </form>
  430. <!-- Copyright -->
  431. <div class="footer-copyright"
  432. data-aos="fade-up"
  433. data-aos-delay="500">
  434. <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </footer>
  441. <!-- Scroll to Top Button -->
  442. <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
  443. <svg viewBox="0 0 24 24">
  444. <path d="M7 14l5-5 5 5z"/>
  445. </svg>
  446. </button>
  447. <!-- JavaScript -->
  448. <script src="assets/lib/aos/aos.js"></script>
  449. <script src="assets/js/faq-accordion.js"></script>
  450. <script src="assets/js/custom-isotope.js"></script>
  451. <script src="assets/js/universal-slider.js"></script>
  452. <script src="assets/js/main-01.js"></script>
  453. </body>
  454. </html>