|
| 1 | +<x-layout title="Blog"> |
| 2 | + {{-- Hero --}} |
| 3 | + <section |
| 4 | + class="mx-auto mt-10 w-full max-w-3xl px-5 md:mt-14" |
| 5 | + aria-labelledby="article-title" |
| 6 | + > |
| 7 | + <header class="relative grid place-items-center text-center"> |
| 8 | + {{-- Blurred circle - Decorative --}} |
| 9 | + <div |
| 10 | + class="absolute right-1/2 top-0 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50" |
| 11 | + aria-hidden="true" |
| 12 | + ></div> |
| 13 | + |
| 14 | + {{-- Back button --}} |
| 15 | + <div |
| 16 | + x-init=" |
| 17 | + () => { |
| 18 | + motion.inView($el, (element) => { |
| 19 | + motion.animate( |
| 20 | + $el, |
| 21 | + { |
| 22 | + opacity: [0, 1], |
| 23 | + x: [5, 0], |
| 24 | + }, |
| 25 | + { |
| 26 | + duration: 0.7, |
| 27 | + ease: motion.easeOut, |
| 28 | + }, |
| 29 | + ) |
| 30 | + }) |
| 31 | + } |
| 32 | + " |
| 33 | + > |
| 34 | + <a |
| 35 | + href="{{ route('blog') }}" |
| 36 | + class="inline-flex items-center gap-2 opacity-60 transition duration-200 will-change-transform hover:-translate-x-0.5 hover:opacity-100" |
| 37 | + aria-label="Return to blog listing" |
| 38 | + > |
| 39 | + <x-icons.right-arrow |
| 40 | + class="size-3 shrink-0 -scale-x-100" |
| 41 | + aria-hidden="true" |
| 42 | + /> |
| 43 | + <div class="text-sm">Blog</div> |
| 44 | + </a> |
| 45 | + </div> |
| 46 | + |
| 47 | + {{-- Primary Heading --}} |
| 48 | + <h1 |
| 49 | + id="article-title" |
| 50 | + x-init=" |
| 51 | + () => { |
| 52 | + motion.inView($el, (element) => { |
| 53 | + motion.animate( |
| 54 | + $el, |
| 55 | + { |
| 56 | + opacity: [0, 1], |
| 57 | + x: [-5, 0], |
| 58 | + }, |
| 59 | + { |
| 60 | + duration: 0.7, |
| 61 | + ease: motion.easeOut, |
| 62 | + }, |
| 63 | + ) |
| 64 | + }) |
| 65 | + } |
| 66 | + " |
| 67 | + class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl" |
| 68 | + > |
| 69 | + NativePHP for desktop v1 is finally here! |
| 70 | + </h1> |
| 71 | + |
| 72 | + {{-- Date --}} |
| 73 | + <div |
| 74 | + class="inline-flex items-center gap-1.5 pt-4 opacity-60" |
| 75 | + aria-label="Publication date" |
| 76 | + > |
| 77 | + <x-icons.date |
| 78 | + class="size-5 shrink-0" |
| 79 | + aria-hidden="true" |
| 80 | + /> |
| 81 | + <time |
| 82 | + datetime="2025-04-09" |
| 83 | + class="text-sm" |
| 84 | + > |
| 85 | + April 9, 2025 |
| 86 | + </time> |
| 87 | + </div> |
| 88 | + </header> |
| 89 | + |
| 90 | + {{-- Divider --}} |
| 91 | + <div |
| 92 | + x-init=" |
| 93 | + () => { |
| 94 | + motion.inView($el, (element) => { |
| 95 | + motion.animate( |
| 96 | + $el, |
| 97 | + { |
| 98 | + opacity: [0, 1], |
| 99 | + x: [5, 0], |
| 100 | + }, |
| 101 | + { |
| 102 | + duration: 0.7, |
| 103 | + ease: motion.easeOut, |
| 104 | + }, |
| 105 | + ) |
| 106 | + }) |
| 107 | + } |
| 108 | + " |
| 109 | + class="flex items-center pb-3 pt-3.5 will-change-transform" |
| 110 | + aria-hidden="true" |
| 111 | + > |
| 112 | + <div |
| 113 | + class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]" |
| 114 | + ></div> |
| 115 | + <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div> |
| 116 | + <div |
| 117 | + class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]" |
| 118 | + ></div> |
| 119 | + </div> |
| 120 | + |
| 121 | + {{-- Content --}} |
| 122 | + <article |
| 123 | + x-init=" |
| 124 | + () => { |
| 125 | + motion.inView($el, (element) => { |
| 126 | + motion.animate( |
| 127 | + $el, |
| 128 | + { |
| 129 | + opacity: [0, 1], |
| 130 | + y: [5, 0], |
| 131 | + }, |
| 132 | + { |
| 133 | + duration: 0.7, |
| 134 | + ease: motion.easeOut, |
| 135 | + }, |
| 136 | + ) |
| 137 | + }) |
| 138 | + } |
| 139 | + " |
| 140 | + class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400" |
| 141 | + aria-labelledby="article-title" |
| 142 | + > |
| 143 | + Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur |
| 144 | + facere dolore praesentium eius amet ex suscipit quam quibusdam |
| 145 | + rerum, ratione, veritatis quidem, repudiandae ipsum in. Dolore |
| 146 | + voluptatibus iusto saepe cum. Maiores tenetur nobis aliquid |
| 147 | + recusandae hic, illo, aliquam laudantium aspernatur iste commodi |
| 148 | + temporibus vero maxime, deserunt consequuntur fugiat animi dicta |
| 149 | + debitis alias quos amet facere repellendus? Nesciunt, fugiat? Vel, |
| 150 | + harum. Eos magnam, totam blanditiis nemo facilis culpa voluptate sed |
| 151 | + dolores delectus alias velit, deleniti ex id quasi. Maiores |
| 152 | + laboriosam repellendus vitae aliquam voluptas delectus deserunt |
| 153 | + provident. Saepe, ullam. Error, ipsam. Facere dolore ullam |
| 154 | + reprehenderit debitis et aperiam exercitationem numquam deserunt? |
| 155 | + Temporibus asperiores exercitationem commodi vel? Autem, optio? |
| 156 | + Tempora, dicta, pariatur dolores repudiandae corrupti beatae |
| 157 | + voluptate dignissimos omnis consectetur ratione rerum. |
| 158 | + Exercitationem eligendi, sint necessitatibus cumque voluptatum |
| 159 | + corrupti incidunt inventore natus cupiditate, obcaecati nisi unde |
| 160 | + nesciunt commodi! Eveniet itaque nihil ducimus repellendus et atque |
| 161 | + laborum quos? Nostrum, aperiam aut. Ratione, earum! Voluptate |
| 162 | + deleniti labore dolor quod nobis atque nam repellendus? Fugiat, |
| 163 | + aliquam voluptatum quam cum, veniam mollitia, autem consequatur |
| 164 | + officiis dolorem assumenda tempore. Distinctio officiis numquam |
| 165 | + omnis quos aperiam minima voluptatibus? Magnam laborum nesciunt eos |
| 166 | + qui sed repellendus tenetur harum, id, mollitia a provident |
| 167 | + accusantium sint architecto, laudantium sit dolore quia. Vel impedit |
| 168 | + quasi nam necessitatibus accusantium saepe praesentium laudantium |
| 169 | + ut. Sit dolor voluptas dignissimos doloremque qui atque dolorum. |
| 170 | + Aperiam eaque sapiente dicta nulla error laborum eius ex illum |
| 171 | + harum, dolor quae illo praesentium ad hic at dolorem iusto |
| 172 | + recusandae unde. Ipsa alias tenetur magni reprehenderit nam |
| 173 | + consequuntur pariatur consequatur quas aspernatur cumque harum ullam |
| 174 | + asperiores corporis distinctio consectetur dicta iusto, iure rem |
| 175 | + quos nobis laboriosam eos nulla accusamus et. Similique. Consectetur |
| 176 | + hic vel explicabo id assumenda, dolores quos neque asperiores ut, |
| 177 | + aperiam a blanditiis est, ullam officia cum error eligendi delectus! |
| 178 | + Cupiditate iusto est ad. Magni porro blanditiis quo delectus! |
| 179 | + Possimus quis repellat aliquam, quia repudiandae deserunt ipsum |
| 180 | + laudantium quaerat impedit veniam quibusdam rerum libero! Nam |
| 181 | + laboriosam qui blanditiis nihil soluta, magnam ut fuga voluptatem |
| 182 | + voluptatibus doloremque aut, aliquam velit? Soluta in esse dolorem |
| 183 | + harum excepturi incidunt qui omnis quidem perferendis, alias culpa |
| 184 | + ipsa quaerat delectus quam dolores nulla inventore dicta rerum enim |
| 185 | + obcaecati. Officia esse nostrum voluptate mollitia corporis. Numquam |
| 186 | + exercitationem fuga debitis soluta. Accusantium a voluptatum |
| 187 | + reprehenderit, perferendis dolorum sequi ab consequatur molestiae |
| 188 | + necessitatibus consequuntur asperiores expedita? Corporis vel fugiat |
| 189 | + distinctio sint magnam eveniet facilis. Corrupti, quisquam |
| 190 | + perferendis. Architecto recusandae dolores aspernatur eligendi |
| 191 | + laborum iure libero sit vitae optio error cupiditate illo magnam |
| 192 | + harum quam, porro debitis repellendus quis iusto nemo, atque nobis |
| 193 | + aliquam consequatur? Quo, saepe repudiandae. Rem nostrum quos illo |
| 194 | + eos cupiditate culpa eum dolorem debitis odit accusantium quibusdam |
| 195 | + eligendi ea quisquam, nam beatae, nihil vitae mollitia totam laborum |
| 196 | + necessitatibus veritatis porro error molestias. Exercitationem, |
| 197 | + soluta. Eaque suscipit amet impedit illum hic rerum nesciunt. Totam |
| 198 | + culpa, quia fuga at blanditiis dolorum rerum iusto ipsa quae |
| 199 | + distinctio a placeat dolorem omnis praesentium libero obcaecati |
| 200 | + molestiae porro aliquid. Accusantium itaque rerum nobis, quam, non |
| 201 | + numquam animi qui cupiditate repellendus repellat veritatis pariatur |
| 202 | + expedita debitis veniam beatae rem dicta vel vitae, eaque eos |
| 203 | + placeat. Consequatur, facilis commodi. Soluta, incidunt. Beatae |
| 204 | + nobis nesciunt quis reiciendis? Velit voluptatum et placeat |
| 205 | + accusantium illo suscipit id dolorum cupiditate rem fugiat! Libero |
| 206 | + esse, ad dolorum commodi officiis incidunt enim corrupti, fuga |
| 207 | + beatae aspernatur expedita? Earum rerum laborum dolore architecto? |
| 208 | + Culpa vitae at ipsum sapiente? Labore aliquid, dolor optio voluptas |
| 209 | + mollitia recusandae quas sequi tempora corporis. Ipsa voluptate |
| 210 | + fugiat omnis perferendis deserunt, itaque quos perspiciatis. |
| 211 | + Asperiores explicabo dolore, molestiae, consequatur sint soluta |
| 212 | + vitae quae iure reprehenderit hic officia aliquid omnis reiciendis |
| 213 | + voluptatibus tempora provident veniam in magni eum et exercitationem |
| 214 | + doloribus ullam. Neque, culpa temporibus. |
| 215 | + </article> |
| 216 | + </section> |
| 217 | +</x-layout> |
0 commit comments