Нет описания
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

zeno-aio-landing.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  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. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link href="./dist/css/plugins/aos.css" rel="stylesheet" />
  8. <link rel="stylesheet" href="./all.css" />
  9. <script src="https://cdn.tailwindcss.com"></script>
  10. <title>Anwi</title>
  11. </head>
  12. <body>
  13. <!-- navbar -->
  14. <!-- <auth-loader></auth-loader> -->
  15. <div id="navbar-head" class=""></div>
  16. <!-- end-navbar -->
  17. <!-- main-body -->
  18. <main class="main-body home-main-container loading-main" id="home-main-container">
  19. <!-- banner section -->
  20. <section>
  21. <div class="container px-0">
  22. <img src="./dist/assets/imgs/zeno/aio/banner-1-DT.jpg" alt="">
  23. <h2 class="md:text-7xl text-4xl text-center font-semibold">Anwi Zeno AIO</h2>
  24. <h4 class="md:text-5xl text-2xl text-center my-3">Sleek Elegance,<span class="font-semibold"> Powerful
  25. Performance</span>
  26. </h4>
  27. <p class="text-center max-w-5xl md:text-2xl m-auto md:my-5 my-2"><strong>We don’t just build
  28. machines;</strong>
  29. we
  30. create tools that
  31. make
  32. your
  33. life easier and better. Every product is made with love, understanding what
  34. you really need.</p>
  35. </div>
  36. </section>
  37. <!-- stand section -->
  38. <section>
  39. <div class="container bg-black md:py-20 py-12 md:my-24 my-12">
  40. <div class="md:grid grid-cols-5 max-w-7xl my-5 mx-auto">
  41. <div class="text-white col-span-2 flex flex-col justify-center">
  42. <h2 class="text-3xl font-semibold">View Flexibly</h2>
  43. <p class="text-xl mt-3">Rotate Zeno's Screen 180°, Horizontal to Landscape.</p>
  44. </div>
  45. <div class="col-span-3 flex justify-center max-sm:mt-24">
  46. <img src="./dist/assets/imgs/zeno/aio/stand.png" alt="" class="w-4/6">
  47. </div>
  48. </div>
  49. </div>
  50. </section>
  51. <!-- display section -->
  52. <section>
  53. <div class="container px-0">
  54. <div class=" max-w-5xl m-auto md:text-center my-5 relative">
  55. <h2 class="text-2xl uppercase "><span
  56. class="text-cyan-700 tracking-widest border-t-2 border-cyan-700 pt-2">Display</span>
  57. </h2>
  58. <h3 class="md:text-5xl text-3xl font-semibold my-4"><span>Display of brilliance</span></h3>
  59. <div class="md:text-xl font-medium">The space-saving ANWI Zeno is remarkably slim and
  60. light,
  61. and
  62. its NanoEdge
  63. display<sup class="footnote-num"><a href="#footnote-3" aria-label="Footnote 3">3</a></sup>
  64. features
  65. a
  66. thin bezel for edge-to-edge viewing and an impressive up to 88% screen-to-body ratio. This
  67. stunning widescreen display includes 178<sup class="sign-deg">°</sup> viewing angles and 100%
  68. sRGB color gamut for vivid and realistic-looking colors. The 24-inch touchscreen<sup
  69. class="footnote-num"><a href="#footnote-2" aria-label="Footnote 2">2</a></sup> also boasts
  70. 1920x1080 resolution and features an anti-glare coating and certified by TÜV Rheinland for eye
  71. comfort and low blue-light emissions — so your eyes stay fresh during long viewing sessions.
  72. </div>
  73. <div class="grid md:grid-cols-5 grid-cols-2 my-12 font-bold">
  74. <div class="flex flex-col space-y-3">
  75. <div class="md:text-5xl text-3xl font-medium text-[#3b6b74]">24”</div>
  76. <div class=""><span class="">FHD NanoEdge display</span>
  77. </div>
  78. </div>
  79. <div class="flex flex-col space-y-3">
  80. <div class="md:text-5xl text-3xl font-medium text-[#3b6b74]">88%</div>
  81. <div class=""><span>screen-to-body ratio</span>
  82. </div>
  83. </div>
  84. <div class="flex flex-col space-y-3">
  85. <div class="md:text-5xl text-3xl font-medium text-[#3b6b74]">100%</div>
  86. <div class=""><span>sRGB color gamut</span>
  87. </div>
  88. </div>
  89. <div class="flex flex-col space-y-3">
  90. <div class=""><img class="m-auto" src="./dist/assets/imgs/zeno/aio/tuv.png" alt="eye care">
  91. </div>
  92. <div class=""><span>TÜV Rheinland- <br> certified eye care</span>
  93. </div>
  94. </div>
  95. <div class="flex flex-col space-y-3">
  96. <div class=""><img class="m-auto" src="./dist/assets/imgs/zeno/aio/anti-glare.png"
  97. alt="An icon for anti-glare display">
  98. </div>
  99. <div class=""><span>anti-glare display</span>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="md:mt-[-300px] mt-[-100px]">
  105. <img src="./dist/assets/imgs/zeno/aio/Banner-2-DT.jpg" alt="">
  106. </div>
  107. </div>
  108. </section>
  109. <!-- audio section -->
  110. <section>
  111. <div class="relative container px-0">
  112. <div>
  113. <img src="./dist/assets/imgs/zeno/aio/audio.jpg" alt="">
  114. </div>
  115. <div class="md:absolute left-2/3 bottom-1/3">
  116. <h2 class="uppercase tracking-widest"><span
  117. class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Audio</span>
  118. </h2>
  119. <h3 class="md:text-5xl text-3xl font-semibold leading-snug my-4"><span>High-fidelity SonicMaster
  120. sound, expertly
  121. optimized</span>
  122. </h3>
  123. <div class="font-medium md:text-xl">ANWI SonicMaster, developed by the ANWI Golden Ear team,
  124. empowers
  125. ANWI
  126. Zeno with
  127. quality audio that delivers wider frequency range for clearer vocals and rich, deep bass.
  128. SonicMaster is a tailored mix of superior hardware and clever software designed to give you full
  129. audio controls for truly immersive sound for movies, music and games.</div>
  130. </div>
  131. </div>
  132. </section>
  133. <!-- beginners section -->
  134. <section>
  135. <div class="container my-5 px-0">
  136. <div class="grid md:grid-cols-2 gap-5 mx-3">
  137. <div class=""><img
  138. src="https://in-files.apjonlinecdn.com/landingpages/content-pages/hp-aio-desktop/images/w100_everyday_img2_v2.jpg"
  139. alt="Desktops For Beginners" data-src="" class="img_width_100">
  140. <div class=" show-in-mobile"></div>
  141. </div>
  142. <div class="md:me-44">
  143. <h3 class="text-blue-800 text-xl">Engage More</h3>
  144. <h5 class="text-2xl font-medium">Optional Touchscreen Perfect for Interactive
  145. Displays, Kiosks.</h5>
  146. <ul class="space-y-3 divide-y-2 divide-black">
  147. <li>Designed for eye comfort</li>
  148. <li>Big, anti-glare screen</li>
  149. <li>Safe for kids privacy with HD Wide Vision
  150. Camera</li>
  151. <li class="mt-4 pt-4">
  152. Starting from <span class="lowest_price">
  153. <span class="price">₹36,499</span> </span>
  154. </li>
  155. </ul>
  156. <div class="mt-8">
  157. <a href="#" class="bg-black text-white px-3 py-2 mt-8" tabindex="0">Shop
  158. Now</a>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </section>
  164. <!-- ports section -->
  165. <section>
  166. <div class="container">
  167. <div class="md:mt-5 pt-5 md:text-center">
  168. <h2 class="uppercase tracking-widest"><span
  169. class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Connectivity</span>
  170. </h2>
  171. <h3 class="md:text-5xl text-3xl font-semibold my-3">
  172. <span>Fast, reliable connectivity</span>
  173. </h3>
  174. <div class="max-w-4xl m-auto md:text-xl font-medium">
  175. ANWI Zeno is loaded with the latest connectivity, including an HDMI-in port that lets you
  176. hook up video and audio from an external source — enabling amazing big-screen experiences for
  177. your laptop, mobile device, game console or even a set-top TV box. There are also three USB 3.2
  178. Gen 1 ports for connecting all your peripherals, an HDMI-out port for attaching an external
  179. display and an SD card reader<sup class="footnote-num"><a href="#"
  180. aria-label="Footnote 2">2</a></sup> for everyday convenience. ANWI Zeno also has
  181. integrated security, with a built-in Kensington lock slot for simple and effective physical
  182. protection.</div>
  183. <div
  184. class="grid md:grid-cols-4 grid-cols-2 gap-8 text-center max-w-4xl mx-auto md:my-24 my-8 font-medium">
  185. <div class="flex flex-col justify-between space-y-4">
  186. <div><img class="m-auto" src="./dist/assets/imgs/zeno/aio/icon_typea.png"
  187. alt="An icon for USB 3.2 Gen 1 Type-A x 3">
  188. </div>
  189. <div class=""><span class="font-bold">USB 3.2 Gen 1 Type-A x 3</span>
  190. </div>
  191. </div>
  192. <div class="flex flex-col justify-between space-y-4">
  193. <div><img class="m-auto" src="./dist/assets/imgs/zeno/aio/icon_typec.png"
  194. alt="icon for USB-C">
  195. </div>
  196. <div class=""><span class="font-bold">USB-C<sup role="img" aria-label="registered">®</sup>
  197. 3.2 Gen 1</span>
  198. </div>
  199. </div>
  200. <div class="flex flex-col justify-between space-y-4">
  201. <div class="text-5xl font-normal text-cyan-700 ">10x</div>
  202. <div class=""><span class="font-bold">faster than USB 2.0</span>
  203. </div>
  204. </div>
  205. <div class="flex flex-col justify-between space-y-4">
  206. <div class="text-5xl font-medium text-cyan-700 text-center"><img class="m-auto"
  207. src="./dist/assets/imgs/zeno/aio/icon_typed.png" alt="An icon for HDMI-in Port">
  208. </div>
  209. <div class=""><span class="font-bold">HDMI-in Port</span>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. <img src="./dist/assets/imgs/zeno/aio/ports.png" alt="" class="mt-5">
  215. </div>
  216. </section>
  217. <!-- secure section -->
  218. <section>
  219. <div class="container max-sm:my-12 px-0">
  220. <div class="relative">
  221. <img src="./dist/assets/imgs/zeno/aio/security.jpg" alt="" class="">
  222. <div class="md:absolute top-16 max-w-xl right-16">
  223. <h2 class="uppercase tracking-widest"><span
  224. class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Secure Your Data</span>
  225. </h2>
  226. <h3 class="my-6 md:text-5xl text-3xl font-semibold">
  227. <span>Optional Fingerprint Scanner for Peace of Mind.</span>
  228. </h3>
  229. <div class="md:text-xl font-medium">Remote working is
  230. accelerating, and with it the need to keep your crucial data safe. That’s why ANWI Zeno
  231. is equipped with first-class security. The camera’s shutter slides across in a moment for
  232. instant privacy, whenever you need it. There’s also the all-new Microsoft Pluton chip that
  233. bakes security into the CPU core, ensuring both code integrity and the latest protection —
  234. virtually eliminating the risk of leaks through hacking. ANWI Zeno also has a Kensington
  235. slot that provides a way to physically safeguard the machine, preventing theft of the PC
  236. from unsupervised locations.</div>
  237. </div>
  238. </div>
  239. </div>
  240. </section>
  241. <!-- power backup section -->
  242. <section>
  243. <div class="container max-w-5xl">
  244. <div class="content">
  245. <div class="text-center space-y-5">
  246. <h3 class="text-4xl text-red-800 font-semibold">Never Stop</h3>
  247. <h4 class="text-3xl font-normal text-black">Zeno's 60-Min Power Backup Keeps You
  248. Productive.</h4>
  249. </div>
  250. </div>
  251. <div>
  252. <div>
  253. <img src="./dist/assets/imgs/zeno/aio/power-backup.jpg" alt="">
  254. </div>
  255. </div>
  256. <div class="d-none">
  257. <div>
  258. <div>
  259. <div>100W</div>
  260. <p>Type-C Portable Hyper Charger*</p>
  261. <p>*Type-C Charger is not available in India.</p>
  262. </div>
  263. <div>
  264. <div>10 Hours</div>
  265. <p>1080P Video Playing</p>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </section>
  271. <!-- sleek section -->
  272. <section>
  273. <div class=" text-center container max-w-7xl m-auto">
  274. <div class="my-12 md:my-24 max-w-5xl mx-auto">
  275. <h2 class="uppercase tracking-widest"><span
  276. class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Sleek</span>
  277. </h2>
  278. <h3 class="my-6 md:text-5xl text-3xl font-semibold"><span>Minimalist aesthetic</span>
  279. </h3>
  280. <div class="font-medium text-xl">ASUS M3402WFA has a fresh and minimalist aesthetic look to
  281. complement
  282. vibrant
  283. lifestyles, with a beautiful integrated stand. Designed for complete stability and a
  284. sleek appearance, it fits perfectly almost anywhere — from modern homes to home offices.
  285. </div>
  286. </div>
  287. <div><img class="w-full" src="./dist/assets/imgs/zeno/aio/sleek.jpg" alt="">
  288. </div>
  289. </div>
  290. </section>
  291. <section>
  292. <div class="container p-3 max-w-6xl my-12 md:my-24">
  293. <h2 class="font-semibold text-2xl md:text-4xl">
  294. Zeno: Experience Desktop Power
  295. </h2>
  296. <div class="md:grid grid-cols-2">
  297. <h3 class="flex flex-col justify-center text-xl md:text-3xl">
  298. Upgradability in <br>
  299. <div class="pt-2 font-semibold">Sleek
  300. All-in-One</div> Design
  301. </h3>
  302. <div class="ms-5">
  303. <img src="./dist/assets/imgs/zeno/aio/aio.png" alt="" class="w-100">
  304. </div>
  305. </div>
  306. </div>
  307. </section>
  308. <section>
  309. <div class="container px-0">
  310. <img src="./dist/assets/imgs/zeno/aio/inner-panel.jpeg" alt="">
  311. </div>
  312. </section>
  313. <section>
  314. <div class="container px-0">
  315. <img src="./dist/assets/imgs/zeno/aio/rear.jpeg" alt="">
  316. </div>
  317. </section>
  318. </main>
  319. <!-- footer -->
  320. <div id="footer-head"></div>
  321. <!-- end-footer -->
  322. <!-- <script src="https://player.vimeo.com/api/player.js"></script> -->
  323. <script src="./dist/js/components/authloader/authloader.js"></script>
  324. <script src="./dist/js/jquery.min.js"></script>
  325. <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  326. <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
  327. <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
  328. <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
  329. <script src="./dist/js/plugins/jquery-ui.js"></script>
  330. <script src="./dist/js/plugins/magnific-popup.js"></script>
  331. <script src="./dist/js/navbar.js"></script>
  332. <script src="./dist/js/footer.js"></script>
  333. <script src="./dist/js/main.js"></script>
  334. <script src="./dist/js/plugins/aos.js"></script>
  335. <script>
  336. AOS.init();
  337. $('#navbar-head').addClass('absolute w-100 shadow-none');
  338. </script>
  339. </body>
  340. </html>