block.json
1 month ago
index.asset.php
1 month ago
index.js
1 month ago
render.php
1 month ago
style-index-rtl.css
1 month ago
style-index.css
1 month ago
render.php
75 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Render callback for the 404 Page block. |
| 4 | * |
| 5 | * @package Author_Website_Templates |
| 6 | */ |
| 7 | |
| 8 | // Attributes |
| 9 | $heading = isset($attributes['heading']) ? $attributes['heading'] : 'Where did the story go?'; |
| 10 | $description = isset($attributes['description']) ? $attributes['description'] : 'It looks like this page got lost in the Whispering Woods! Even our bravest explorers can\'t find it.'; |
| 11 | $badge_text = isset($attributes['badgeText']) ? $attributes['badgeText'] : 'Uh-oh!'; |
| 12 | $big_number = isset($attributes['bigNumber']) ? $attributes['bigNumber'] : '404'; |
| 13 | $btn_home_label = isset($attributes['btnHomeLabel']) ? $attributes['btnHomeLabel'] : 'Go Back Home'; |
| 14 | $btn_books_label = isset($attributes['btnBooksLabel']) ? $attributes['btnBooksLabel'] : 'Read a Book Instead'; |
| 15 | $btn_contact_label = isset($attributes['btnContactLabel']) ? $attributes['btnContactLabel'] : 'Report a Problem'; |
| 16 | |
| 17 | ?> |
| 18 | <main class="flex-grow flex items-center relative overflow-hidden bg-blue-sky/10" style="min-height: 80vh;"> |
| 19 | <div class="absolute bottom-0 left-0 w-full z-0"> |
| 20 | <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> |
| 21 | <path d="M0 100H1440V0C1192.5 49.497 919.5 74.497 720 74.497C520.5 74.497 247.5 49.497 0 0V100Z" |
| 22 | fill="#FFFDF5" /> |
| 23 | </svg> |
| 24 | </div> |
| 25 | |
| 26 | <div class="container mx-auto px-6 py-20 relative z-10 text-center"> |
| 27 | <div class="mb-8 relative inline-block"> |
| 28 | <h1 |
| 29 | class="text-[150px] md:text-[200px] leading-none font-black text-yellow-sun drop-shadow-lg rotate-2 select-none"> |
| 30 | <?php echo esc_html($big_number); ?> |
| 31 | </h1> |
| 32 | <div |
| 33 | class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-6 py-2 rounded-full shadow-xl rotate-[-5deg] border-2 border-navy"> |
| 34 | <span class="text-2xl md:text-3xl font-black text-coral-pop uppercase tracking-wider"> |
| 35 | <?php echo esc_html($badge_text); ?> |
| 36 | </span> |
| 37 | </div> |
| 38 | </div> |
| 39 | |
| 40 | <h2 class="text-4xl md:text-5xl font-black text-navy mb-6"> |
| 41 | <?php echo esc_html($heading); ?> |
| 42 | </h2> |
| 43 | <p class="text-xl text-navy/80 max-w-lg mx-auto mb-10"> |
| 44 | <?php echo esc_html($description); ?> |
| 45 | </p> |
| 46 | |
| 47 | <div class="max-w-md mx-auto mb-12"> |
| 48 | <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="relative"> |
| 49 | <input type="search" name="s" |
| 50 | placeholder="<?php esc_attr_e('Try searching for a book...', 'author-website-templates'); ?>" |
| 51 | class="w-full pl-6 pr-14 py-4 rounded-full bg-white border-2 border-transparent text-navy placeholder:text-navy/50 focus:outline-none focus:ring-2 focus:ring-blue-sky shadow-lg transition-all text-lg"> |
| 52 | <button type="submit" |
| 53 | class="absolute top-2 right-2 p-2 bg-yellow-sun rounded-full text-navy hover:bg-yellow-400 transition-colors"> |
| 54 | <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| 55 | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" |
| 56 | d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> |
| 57 | </svg> |
| 58 | </button> |
| 59 | </form> |
| 60 | </div> |
| 61 | |
| 62 | <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> |
| 63 | <a href="<?php echo esc_url(home_url('/')); ?>" class="btn-fun btn-yellow"> |
| 64 | <?php echo esc_html($btn_home_label); ?> |
| 65 | </a> |
| 66 | <a href="<?php echo esc_url(get_post_type_archive_link('book')); ?>" class="btn-fun btn-white"> |
| 67 | <?php echo esc_html($btn_books_label); ?> |
| 68 | </a> |
| 69 | <a href="<?php echo esc_url(home_url('/contact')); ?>" |
| 70 | class="font-bold text-navy/70 hover:text-blue-sky mt-4 sm:mt-0 sm:ml-4 underline decoration-2 underline-offset-4"> |
| 71 | <?php echo esc_html($btn_contact_label); ?> |
| 72 | </a> |
| 73 | </div> |
| 74 | </div> |
| 75 | </main> |