1<!DOCTYPE html> 2<html lang="en" class="dark"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta content="cVVCRBl9EAY_JAc7PAsHAVUVH10bRSgU4d5saLRaxOQYSJi53Wm8OwfZ" name="csrf-token"> 8 <title> 9 Ash Framework 10 </title> 11 12
12<script defer data-domain="ash-hq.org" src="https://plausible.io/js/script.outbound-links.tagged-events.js"> 13 </script>
13 14
14<script> 15 window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } 16 </script>
16 17 18 <meta property="og:type" content="text/html"> 19 <meta property="og:image" content="https://ash-hq.org/images/ash-logo-side.png"> 20 <meta property="og:site_name" content="Ash HQ"> 21 <meta property="twitter:card" content="summary_large_image"> 22 <meta property="twitter:domain" content="ash-hq.org"> 23 <meta property="twitter:site" content="@AshFramework"> 24 <!-- Need to adjust this for future blog writers --> 25 <meta property="twitter:creator" content="@ZachSDaniel1"> 26 27 <meta property="og:title" content="Ash Framework"> 28 <meta property="og:description" content="Model your domain, derive the rest."> 29 <link phx-track-static rel="stylesheet" href="/assets/app-42c05c4510ade93d982c5aa232daffaa.css?vsn=d"> 30
30<script async defer src="https://buttons.github.io/buttons.js"> 31 </script>
31 32
32<script src="https://buttons.github.io/buttons.js"> 33 </script>
33 34 </head> 35 <body class="bg-slate-950 text-white min-h-screen dark flex flex-col"> 36 <div class="flex-1"> 37 <nav class="fixed top-0 w-full z-50 backdrop-blur-lg bg-slate-950/50 border-b border-slate-500/20"> 38 <div class="bg-fuchsia-900 w-full py-1 text-center"> 39 <a class="font-bold mr-2" href="https://luma.com/wz4z0iz6" target="_blank"> 40 Register Now! AshConf 2026 41 </a> 42 October 3rd, 2026 43 <a class="font-extralight" href="/#upcoming-events"> 44   |   See all upcoming events 45 </a> 46 </div> 47 <div class="py-2 leading-loose px-4 sm:px-6 lg:px-8"> 48 <div class="hidden md:block relative"> 49 <a href="/" title="Home" class="absolute top-0 left-0"> 50 <img src="/images/ash_logo_orange.svg" alt="Ash Framework" class="h-8"> 51 </a> 52 <div class="space-x-7 text-center"> 53 <a href="https://hexdocs.pm/ash" class="text-white hover:text-primary-light-400 transition-colors" title="Documentation"> 54 Documentation 55 </a> 56 <a href="/community" class="text-white hover:text-primary-light-400 transition-colors" title="Community"> 57 Community 58 </a> 59 <a href="/media" class="text-white hover:text-primary-light-400 transition-colors" title="Media"> 60 Media 61 </a> 62 </div> 63 64 <a href="https://alembic.com.au/services/ash-framework-premium-support" class="absolute top-0 right-0 text-primary-light-400 hover:text-primary-light-600 transition-colors" title="Premium Support"> 65 Premium Support 66 </a> 67 </div> 68 69 <div class="flex md:hidden justify-between items-center"> 70 <a href="/" title="Home"> 71 <img src="/images/ash_logo_orange.svg" alt="Ash Framework" class="h-8"> 72 </a> 73 74 <a href="https://hexdocs.pm/ash" class="hover:text-white text-primary-light-400 transition-colors flex flex-col items-center" title="Documentation"> 75 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> 76 <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"></path> 77 </svg> 78 79 <span class="font-extralight text-xs"> 80 Docs 81 </span> 82 </a> 83 84 <a href="/community" class="hover:text-white text-primary-light-400 transition-colors flex flex-col items-center" title="Community"> 85 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> 86 <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"></path> 87 </svg> 88 <span class="font-extralight text-xs"> 89 Community 90 </span> 91 </a> 92 93 <a href="/media" class="hover:text-white text-primary-light-400 transition-colors flex flex-col items-center" title="Media"> 94 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> 95 <path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0 1 18 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.
95004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0 1 18 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 0 1 6 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5"></path> 96 </svg> 97 98 <span class="font-extralight text-xs"> 99 Media 100 </span> 101 </a> 102 103 <a href="https://alembic.com.au/services/ash-framework-premium-support" class="hover:text-white text-primary-light-400 transition-colors flex flex-col items-center" title="Premium Support"> 104 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> 105 <path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 0 1 1.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 0 0-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 0 1 0 9.424m-4.138-5.976a3.736 3.736 0 0 0-.88-1.388 3.737 3.737 0 0 0-1.388-.88m2.268 2.268a3.765 3.765 0 0 1 0 2.528m-2.268-4.796a3.765 3.765 0 0 0-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 0 1-1.388.88m2.268-2.268 4.138 3.448m0 0a9.027 9.027 0 0 1-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0-3.448-4.138m3.448 4.138a9.014 9.014 0 0 1-9.424 0m5.976-4.138a3.765 3.765 0 0 1-2.528 0m0 0a3.736 3.736 0 0 1-1.388-.88 3.737 3.737 0 0 1-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 0 1-1.652-1.306 9.027 9.027 0 0 1-1.306-1.652m0 0 4.138-3.448M4.33 16.712a9.014 9.014 0 0 1 0-9.424m4.138 5.976a3.765 3.765 0 0 1 0-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 0 1 1.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 0 0-1.652 1.306A9.025 9.025 0 0 0 4.33 7.288"></path> 106 </svg> 107 108 <span class="font-extralight text-xs"> 109 Support 110 </span> 111 </a> 112 </div> 113 </div> 114</nav> 115 116<div class="relative min-h-screen flex items-center justify-center overflow-hidden"> 117 <div class="absolute inset-0 bg-gradient-to-b from-primary-light-900/20 via-primary-dark-900/10 to-primary-light-900/20"> 118 </div> 119 120 <div class="absolute inset-0 bg-[linear-gradient(rgba(254,19,19,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(254,19,19,0.2)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,black,transparent)]"> 121 </div> 122 123 <div class="absolute bottom-0 left-0 right-0 h-[40vh] bg-gradient-to-t to-transparent perspective-grid"> 124 </div> 125 126 <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-3xl mt-32 sm:mt-24 flex flex-col items-center"> 127 <div class=""> 128 <img src="/images/ash-logo-side.svg" alt="Ash Framework" class="w-96 mx-auto mb-2 sm:mb-3 drop-shadow-[0_0_15px_rgba(255, 87, 87, 0.5)]"> 129 </div> 130 <h1 class="text-3xl sm:text-4xl font-bold mb-6 mt-2 sm:mt-3 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]"> 131 Model your domain,
132 <span class="bg-gradient-to-r from-primary-dark-500 to-primary-light-500 bg-clip-text text-transparent"> 133 derive the rest 134 </span> 135 </h1> 136 <p class="text-base sm:text-xl text-primary-light-200 mb-4"> 137 The <span class="text-orange-500">Elixir</span> 138 backend framework for <span class="text-orange-500">unparalleled productivity</span>. 139 <span class="text-orange-500">Declarative tools</span> 140 that let you <span class="text-orange-500">stop wasting time</span>. 141 Use with <span class="text-orange-500">Phoenix LiveView</span> 142 or build <span class="text-orange-500">APIs in minutes</span> 143 for your front-end of choice. 144 </p> 145 146 <a id="temporal-resources-announcement" href="/blog/introducing-temporal-resources" class="group relative mt-2 mb-8 block w-full max-w-xl overflow-hidden rounded-2xl border border-primary-light-500/40 bg-slate-950/80 text-left shadow-[0_0_40px_rgba(255,87,87,0.15)] transition-all duration-300 hover:-translate-y-0.5 hover:border-primary-light-400 hover:shadow-[0_0_50px_rgba(255,87,87,0.3)]"> 147 <div class="pointer-events-none absolute -right-24 top-1/2 h-72 w-72 -translate-y-1/2 opacity-80 transition-opacity duration-300 group-hover:opacity-100 sm:-right-16 sm:h-80 sm:w-80"> 148 <svg viewBox="-50 -50 100 100" class="absolute inset-0 h-full w-full animate-[spin_240s_linear_infinite]"> 149 <circle r="49" fill="none" stroke="#FF914D" stroke-opacity="0.25" stroke-width="0.3"></circle> 150 <line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(0)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(6)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(12)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(18)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(24)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(30)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(36)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(42)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(48)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(54)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(60)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(66)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(72)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(78)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(84)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(90)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(96)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(102)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(108)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(114)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(120)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(126)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(132)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(138)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(144)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(150)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(156)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(162)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(168)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(174)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(180)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(186)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(192)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(198)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(204)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(210)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(216)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(222)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(228)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(234)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(240)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(246)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(252)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(258)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(264)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(270)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(276)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(282)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(288)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(294)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(300)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(306)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(312)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(318)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(324)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-43" transform="rotate(330)" stroke="#FF914D" stroke-opacity="0.55" stroke-width="0.6" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(336)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(342)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(348)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line><line x1="0" y1="-47.5" x2="0" y2="-45.5" transform="rotate(354)" stroke="#FF914D" stroke-opacity="0.3" stroke-width="0.35" stroke-linecap="round"></line> 151 </svg> 152 <svg viewBox="-50 -50 100 100" class="absolute inset-0 h-full w-full animate-[spin_150s_linear_infinite] [animation-direction:reverse]"> 153 <circle r="39" fill="none" stroke="#FFBD59" stroke-opacity="0.18" stroke-width="0.25"></circle> 154 <text transform="rotate(0) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 155 XII 156 </text><text transform="rotate(30) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 157 I 158 </text><text transform="rotate(60) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 159 II 160 </text><text transform="rotate(90) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 161 III 162 </text><text transform="rotate(120) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 163 IV 164 </text><text transform="rotate(150) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 165 V 166 </text><text transform="rotate(180) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 167 VI 168 </text><text transform="rotate(210) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 169 VII 170 </text><text transform="rotate(240) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 171 VIII 172 </text><text transform="rotate(270) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 173 IX 174 </text><text transform="rotate(300) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 175 X 176 </text><text transform="rotate(330) translate(0 -34.5)" text-anchor="middle" dominant-baseline="middle" fill="#FFBD59" fill-opacity="0.45" font-size="4" font-family="ui-serif, Georgia, serif"> 177 XI 178 </text> 179 <circle r="24" fill="none" stroke="#FF5757" stroke-opacity="0.3" stroke-width="0.3" stroke-dasharray="6 2 0.6 2"></circle> 180 </svg> 181 <div class="absolute inset-0 animate-[spin_60s_linear_infinite]"> 182 <div class="absolute inset-[2%] rounded-full bg-[conic-gradient(from_-50deg,transparent_0deg,rgba(255,145,77,0.18)_50deg,transparent_50deg)]"> 183 </div> 184 <svg viewBox="-50 -50 100 100" class="absolute inset-0 h-full w-full"> 185 <line x1="0" y1="3" x2="0" y2="-46" stroke="#FF914D" stroke-opacity="0.8" stroke-width="0.5" stroke-linecap="round"></line> 186 <circle r="1.2" fill="#FF914D"></circle> 187 </svg> 188 </div> 189 </div> 190 191 <div class="relative p-6 pr-32 sm:p-8 sm:pr-60">
192 <span class="inline-block rounded-full bg-gradient-to-r from-primary-light-600 to-primary-dark-500 px-2.5 py-0.5 text-xs font-semibold text-white"> 193 New 194 </span> 195 <h2 class="mt-3 font-serif text-3xl font-light leading-tight sm:text-4xl bg-gradient-to-r from-[#FF5757] via-[#FF914D] to-[#FFBD59] bg-clip-text text-transparent"> 196 Temporal Resources 197 </h2> 198 <p class="mt-2 text-sm text-primary-light-200 sm:text-base"> 199 Read and write your data at any point in time, past, present or future. 200 </p> 201 <span class="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-white"> 202 Read the announcement 203 <span class="transition-transform group-hover:translate-x-1" aria-hidden="true">â</span> 204 </span> 205 </div> 206 </a> 207 <div class="flex flex-col items-center gap-4 mt-2"> 208 <div class="flex flex-col items-center gap-4"> 209 <div class="flex flex-col sm:flex-row gap-3 items-center justify-center"> 210 <a href="#ash-animation" class="inline-flex justify-center items-center text-center px-6 py-3 rounded-full bg-gradient-to-r from-primary-light-600 to-primary-dark-600 text-white font-medium hover:from-primary-light-700 hover:to-primary-dark-700 transition-all transform hover:scale-105 shadow-[0_0_20px_#FF5757]"> 211 Learn More 212 </a> 213 214 <a href="#get-started" class="inline-flex justify-center items-center text-center px-6 py-3 rounded-full border border-primary-light-500 text-primary-light-400 font-medium hover:bg-primary-light-500/10 hover:border-primary-light-400 hover:text-primary-light-300 transition-all transform hover:scale-105"> 215 Install Now 216 </a> 217 </div> 218 219 <div class="flex items-center gap-3"> 220 <a id="github-stars-btn" href="https://github.com/ash-project/ash" class="inline-flex h-9 items-center gap-2 px-4 rounded-full border border-gray-500 text-sm text-gray-300 font-medium hover:bg-gray-700/30 hover:border-gray-400 hover:text-white transition-all transform hover:scale-105" target="_blank" rel="noopener noreferrer"> 221 <svg class="h-4 w-4 fill-current" viewBox="0 0 24 24" aria-hidden="true"> 222 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> 223 </svg> 224 <span>GitHub</span> 225 </a> 226 227 <a href="https://livebook.dev/run?url=https%3A%2F%2Fgithub.com%2Fash-project%2Fash_tutorial%2Fblob%2Fmaster%2Foverview.livemd" class="inline-flex h-9 items-center gap-2 px-4 rounded-full border border-gray-500 text-sm text-gray-300 font-medium hover:bg-gray-700/30 hover:border-gray-400 hover:text-white transition-all transform hover:scale-105 hidden sm:inline-flex"> 228 <span class="hero-book-open h-4 w-4" aria-hidden="true"></span> 229 <span>Run in Livebook</span> 230 </a> 231 </div> 232 </div> 233 234 <a href="#eef-partner" class="mt-6 inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary-light-500/40 bg-slate-900/60 text-sm text-primary-light-200 hover:border-primary-light-400 hover:bg-slate-900/80 hover:text-white transition-all"> 235 <svg class="w-6 h-6 sm:w-5 sm:h-5 shrink-0 text-primary-light-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 236 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"></path> 237 </svg>
238 <span> 239 Ash partners with the 240 <span class="text-primary-light-400 font-semibold">Erlang Ecosystem Foundation</span> 241 â donate to support the BEAM community 242 </span> 243 <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 244 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> 245 </svg> 246 </a> 247 </div> 248 </div> 249</div> 250 251<!-- Interactive Animation Section --> 252<div id="ash-animation" class="relative py-16"> 253 <!-- Desktop Animation Content --> 254 <div class="hidden lg:block"> 255 <div class="absolute inset-0 bg-gradient-to-b from-primary-light-900/20 via-primary-dark-900/10 to-primary-light-900/20"> 256 </div> 257 258 <div class="absolute inset-0 bg-[linear-gradient(rgba(254,19,19,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(254,19,19,0.2)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,black,transparent)]"> 259 </div> 260 261 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 262 <div class="backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-8"> 263 264<!-- Main Content Container with Fixed Height --> 265 <div class="h-[650px]"> 266 <!-- Stage Description Panel --> 267 <div id="stage-description" class="mb-6 mx-0 lg:mx-16 xl:mx-24 p-4 bg-slate-800/50 rounded-lg border border-primary-dark-500/20 transition-all duration-500 ease-in-out h-[130px]" style="display: none;"> 268 <h3 id="stage-title" class="text-lg font-semibold text-primary-light-400 mb-2"></h3> 269 <p id="stage-text" class="text-sm text-gray-300 leading-relaxed overflow-hidden"></p> 270 </div> 271 <div class="grid lg:grid-cols-2 gap-8"> 272 <!-- Code Editor --> 273 <div class="relative"> 274 <div class="bg-slate-900/80 rounded-lg p-4 font-mono text-sm lg:text-xs overflow-clip border border-primary-dark-500/20 h-[492px]"> 275 <div class="flex items-center gap-2 mb-2 pb-2 border-b border-primary-dark-500/20"> 276 <div class="w-3 h-3 rounded-full bg-red-500/80"></div> 277 <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div> 278 <div class="w-3 h-3 rounded-full bg-green-500/80"></div> 279 <span class="ml-2 text-gray-500 text-xs">lib/my_app/blog/post.ex</span> 280 </div> 281 <pre id="code-display" class="text-gray-300"><code></code></pre> 282 </div> 283 </div> 284 <!-- Visualization Panel --> 285 <div id="visualization-panel" class="relative min-h-[400px]"></div> 286 </div> 287 </div> 288 <!-- Progress indicator and controls --> 289 <div class="mt-6 flex items-center justify-center gap-4"> 290 <button id="prev-stage" class="p-2 rounded-full bg-primary-dark-600 hover:bg-primary-dark-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all" disabled> 291 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 292 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"> 293 </path> 294 </svg> 295 </button> 296 <button id="play-pause" class="p-2 rounded-full bg-green-600 hover:bg-green-700 transition-all"> 297 <svg id="play-icon" class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 298 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"> 299 </path> 300 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"> 301 </path> 302 </svg> 303 <svg id="pause-icon" class="w-5 h-5 text-white hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 304 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"> 305 </path> 306 </svg> 307 </button> 308 <div class="flex gap-2"> 309 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="1"> 310 </div> 311 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="2"> 312 </div> 313 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="3"> 314 </div> 315 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="4"> 316 </div> 317 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="5"> 318 </div> 319 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="6"> 320 </div> 321 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="7"> 322 </div> 323 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="8"> 324 </div> 325 <div class="stage-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="9"> 326 </div> 327 </div> 328 <button id="next-stage" class="p-2 rounded-full bg-primary-dark-600 hover:bg-primary-dark-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all"> 329 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 330 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"> 331 </path> 332 </svg> 333 </button> 334 335 <button id="link-stage" class="p-2 rounded-full bg-gray-600 hover:bg-gray-700 transition-all ml-4" title="Copy link to this stage"> 336 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 337 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"> 338 </path> 339 </svg> 340 </button> 341 </div> 342 </div> 343 </div> 344 </div> 345 346<!-- Mobile Swipeable Stages --> 347 <div class="lg:hidden"> 348 <div class="relative z-10 max-w-4xl mx-auto px-2 sm:px-6"> 349 <div class="backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-2"> 350 <h2 class="text-2xl font-bold text-primary-light-200 mb-6 text-center"> 351 Discover Ash Features 352 </h2> 353 354<!-- Mobile Stage Container --> 355 <div id="mobile-stages" class="relative overflow-hidden h-[650px]"> 356 <!-- Swipe Container --> 357 <div id="mobile-stage-track" class="flex transition-transform duration-300 ease-out h-full"> 358 359<!-- Stage 0: Resources & Actions --> 360 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="0"> 361 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 362 <div class="flex items-center gap-2 mb-3"> 363 <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 364 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"> 365 </path> 366 </svg> 367 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 368 Resources & Actions 369 </h3> 370 </div> 371 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 372 Actions are fully typed and introspectable. Extensions can automatically understand and build on top of them. 373 </p> 374 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 375 <pre class="mobile-code-display"><code></code></pre> 376 </div> 377 <div class="text-xs text-gray-400 mobile-stage-summary">
378 <span class="text-primary-light-300">â </span>Creates a functional interface that returns reading time in minutes 379 </div> 380 </div> 381 </div> 382 383<!-- Stage 1: Persistence --> 384 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="1"> 385 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 386 <div class="flex items-center gap-2 mb-3"> 387 <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24"> 388 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path> 389 </svg> 390 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 391 Persistence 392 </h3> 393 </div> 394 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 395 Add persistent storage while keeping existing behavior. Your resource combines behavior and state. 396 </p> 397 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 398 <pre class="mobile-code-display"><code></code></pre> 399 </div> 400 <div class="text-xs text-gray-400 mobile-stage-summary"> 401 <span class="text-primary-light-300">â </span>Creates "posts" table with automatic migrations 402 </div> 403 </div> 404 </div> 405 406<!-- Stage 2: GraphQL --> 407 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="2"> 408 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 409 <div class="flex items-center gap-2 mb-3"> 410 <svg class="w-5 h-5 text-pink-500" fill="currentColor" viewBox="0 0 24 24"> 411 <path d="M12,2 L2,7 L12,12 L22,7 L12,2 Z M2,17 L12,22 L22,17 L22,7 L12,12 L2,7 L2,17 Z"></path> 412 </svg> 413 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 414 GraphQL 415 </h3> 416 </div> 417 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 418 Add a full GraphQL API with minimal configuration. Automatically generates queries, mutations, and types. 419 </p> 420 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 421 <pre class="mobile-code-display"><code></code></pre> 422 </div> 423 <div class="text-xs text-gray-400 mobile-stage-summary"> 424 <span class="text-primary-light-300">â </span>Full GraphQL API with introspectable schema 425 </div> 426 </div> 427 </div> 428 429<!-- Stage 3: JSON:API --> 430 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="3"> 431 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 432 <div class="flex items-center gap-2 mb-3"> 433 <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 434 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"> 435 </path> 436 </svg> 437 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 438 JSON:API 439 </h3> 440 </div> 441 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 442 Add a REST JSON:API alongside GraphQL. Expose your domain through multiple API
442standards. 443 </p> 444 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 445 <pre class="mobile-code-display"><code></code></pre> 446 </div> 447 <div class="text-xs text-gray-400 mobile-stage-summary"> 448 <span class="text-primary-light-300">â </span>REST endpoints at /posts with JSON:API format 449 </div> 450 </div> 451 </div> 452 453<!-- Stage 4: Policies --> 454 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="4"> 455 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 456 <div class="flex items-center gap-2 mb-3"> 457 <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 458 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5-2a9 9 0 11-18 0 9 9 0 0118 0z"> 459 </path> 460 </svg> 461 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 462 Policies 463 </h3> 464 </div> 465 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 466 Add fine-grained authorization with policies. Control who can perform actions and filter data transparently. 467 </p> 468 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 469 <pre class="mobile-code-display"><code></code></pre> 470 </div> 471 <div class="text-xs text-gray-400 mobile-stage-summary"> 472 <span class="text-primary-light-300">â </span>Role-based access control with data filtering 473 </div> 474 </div> 475 </div> 476 477<!-- Stage 5: Encryption --> 478 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="5"> 479 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 480 <div class="flex items-center gap-2 mb-3"> 481 <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 482 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"> 483 </path> 484 </svg> 485 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 486 Encryption 487 </h3> 488 </div> 489 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 490 Add encryption at rest with Cloak integration. Content is automatically encrypted when stored and decrypted when read. 491 </p> 492 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 493 <pre class="mobile-code-display"><code></code></pre> 494 </div> 495 <div class="text-xs text-gray-400 mobile-stage-summary"> 496 <span class="text-primary-light-300">â </span>Transparent encryption - no API changes needed 497 </div> 498 </div> 499 </div> 500 501<!-- Stage 6: AI Tools --> 502 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="6"> 503 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 504 <div class="flex items-center gap-2 mb-3"> 505 <svg class="w-5 h-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 506 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"> 507 </path> 508 </svg> 509 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 510 AI Tools 511 </h3> 512 </div> 513 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 514 Add AI-powered actions and expose your domain as tools for LLMs. Perfect for building AI features or MCP servers. 515 </p> 516 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 517 <pre class="mobile-code-display"><code></code></pre> 518 </div> 519 <div class="text-xs text-gray-400 mobile-stage-summary">
520 <span class="text-primary-light-300">â </span>Prompt-backed actions with LLM integration 521 </div> 522 </div> 523 </div> 524 525<!-- Stage 7: State Machine --> 526 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="7"> 527 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 528 <div class="flex items-center gap-2 mb-3"> 529 <svg class="w-5 h-5 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 530 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"> 531 </path> 532 </svg> 533 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 534 State Machine 535 </h3> 536 </div> 537 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 538 Add declarative state validations and transitions. Each extension builds on previous ones seamlessly. 539 </p> 540 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 541 <pre class="mobile-code-display"><code></code></pre> 542 </div> 543 <div class="text-xs text-gray-400 mobile-stage-summary"> 544 <span class="text-primary-light-300">â </span>Declarative state validations and transitions 545 </div> 546 </div> 547 </div> 548 549<!-- Stage 8: Authentication --> 550 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="8"> 551 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 552 <div class="flex items-center gap-2 mb-3"> 553 <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 554 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"> 555 </path> 556 </svg> 557 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 558 Authentication 559 </h3> 560 </div> 561 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 562 Complete user authentication with password and OAuth strategies. Built-in support for multiple providers. 563 </p> 564 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 565 <pre class="mobile-code-display"><code></code></pre> 566 </div> 567 <div class="text-xs text-gray-400 mobile-stage-summary"> 568 <span class="text-primary-light-300">â </span>Password, OAuth, magic links, and more 569 </div> 570 </div> 571 </div> 572 573<!-- Stage 9: Background Jobs --> 574 <div class="w-full flex-shrink-0 px-1 h-full" data-mobile-stage="9"> 575 <div class="bg-slate-900/80 rounded-lg p-4 border border-primary-dark-500/20 h-full flex flex-col justify-between"> 576 <div class="flex items-center gap-2 mb-3"> 577 <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 578 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"> 579 </path> 580 </svg> 581 <h3 class="text-lg font-semibold text-primary-light-400 mobile-stage-title"> 582 Background Jobs 583 </h3> 584 </div> 585 <p class="text-sm text-gray-300 mb-3 mobile-stage-description"> 586 Add reliable background job processing with triggers and scheduled actions. Perfect for notifications and maintenance tasks. 587 </p> 588 <div class="bg-slate-800/70 rounded p-3 font-mono text-xs text-gray-300 mb-3"> 589 <pre class="mobile-code-display"><code></code></pre> 590 </div> 591 <a href="https://oban.pro" target="_blank" class="text-xs text-gray-400 mobile-stage-summary hover:text-primary-light-300 transition-colors block">
592 <span class="text-primary-light-300">â </span>Powered by 593 <span class="text-primary-light-400 underline">Oban</span> 594 for reliable job processing 595 </a> 596 </div> 597 </div> 598 </div> 599 </div> 600 601<!-- Mobile Navigation --> 602 <div class="flex items-center justify-center mt-6 gap-4"> 603 <button id="mobile-prev" class="p-2 rounded-full bg-primary-dark-600 hover:bg-primary-dark-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all"> 604 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 605 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"> 606 </path> 607 </svg> 608 </button> 609 610 <div class="flex gap-2"> 611 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-light-500 transition-all duration-300" data-stage="0"> 612 </div> 613 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="1"> 614 </div> 615 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="2"> 616 </div> 617 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="3"> 618 </div> 619 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="4"> 620 </div> 621 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="5"> 622 </div> 623 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="6"> 624 </div> 625 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="7"> 626 </div> 627 <div class="mobile-dot w-2 h-2 rounded-full bg-primary-dark-500/30 transition-all duration-300" data-stage="8"> 628 </div> 629 </div> 630 631 <button id="mobile-next" class="p-2 rounded-full bg-primary-dark-600 hover:bg-primary-dark-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all"> 632 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 633 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"> 634 </path> 635 </svg> 636 </button> 637 </div> 638 639 <div class="text-xs text-gray-400 mt-4 text-center"> 640 View on a larger screen for an interactive introduction 641 </div> 642 </div> 643 </div> 644 </div> 645 646<!-- Book and Newsletter Section --> 647 <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mt-8"> 648 <div class="backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-8"> 649 <div class="text-center"> 650 <div class="mb-8"> 651 <a href="https://pragprog.com/titles/ldash/ash-framework/" class="inline-block"> 652 <img src="images/book-beta.jpg" alt="New Book Cover" class="w-48 mx-auto shadow-[0_0_30px] rounded-2xl shadow-fuchsia-900"> 653 <h2 class="text-2xl font-bold mt-4 bg-gradient-to-r from-purple-700 via-fuchsia-500 to-purple-700 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]"> 654 Get the book! 655 </h2> 656 </a> 657 </div> 658 659 <a href="https://ashchronicle.substack.com/" class="inline-block bg-slate-800/50 rounded-lg border border-primary-dark-500/20 p-6"> 660 Check out the <span class="text-orange-500">Ash Chronicle</span> newsletter! 661 </a> 662 </div> 663 </div> 664 </div> 665</div> 666 667<!-- Ash Ecosystem Section --> 668<div class="relative py-16"> 669 <div class="absolute inset-0 bg-gradient-to-b from-primary-light-900/20 via-primary-dark-900/10 to-primary-light-900/20"> 670 </div> 671 672 <div class="absolute inset-0 bg-[linear-gradient(rgba(254,19,19,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(254,19,19,0.2)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_8
6720%_at_50%_50%,black,transparent)]"> 673 </div> 674 675 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 676 <div class="text-center mb-12"> 677 <h2 class="text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]"> 678 The Ash 679 <span class="bg-gradient-to-r from-primary-dark-500 to-primary-light-500 bg-clip-text text-transparent"> 680 Ecosystem 681 </span> 682 </h2> 683 <p class="text-lg text-gray-300 max-w-3xl mx-auto"> 684 Powerful extensions that integrate seamlessly with your resources. Build everything from APIs to admin interfaces with declarative configuration. 685 </p> 686 </div> 687 688 <div class="backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-8"> 689 <div class="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-2"> 690 <!-- Ash Core --> 691 <a href="https://hexdocs.pm/ash/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-red-300 dark:hover:border-red-600 transition-all cursor-pointer group"> 692 <div class="flex items-center gap-2 mb-2"> 693 <div class="w-3 h-3 bg-red-500 rounded-full"></div> 694 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-red-600 dark:group-hover:text-red-400"> 695 Ash 696 </span> 697 </div> 698 <p class="text-xs text-gray-600 dark:text-gray-400">Core framework</p> 699 </a> 700 701<!-- Core Extensions --> 702 <a href="https://hexdocs.pm/ash_postgres/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all cursor-pointer group"> 703 <div class="flex items-center gap-2 mb-2"> 704 <div class="w-3 h-3 bg-blue-600 rounded-full"></div> 705 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400"> 706 AshPostgres 707 </span> 708 </div> 709 <p class="text-xs text-gray-600 dark:text-gray-400">PostgreSQL data layer</p> 710 </a> 711 712 <a href="https://hexdocs.pm/ash_phoenix/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-orange-300 dark:hover:border-orange-600 transition-all cursor-pointer group"> 713 <div class="flex items-center gap-2 mb-2"> 714 <div class="w-3 h-3 bg-orange-600 rounded-full"></div> 715 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-orange-600 dark:group-hover:text-orange-400"> 716 AshPhoenix 717 </span> 718 </div> 719 <p class="text-xs text-gray-600 dark:text-gray-400">Phoenix integration</p> 720 </a> 721 722 <a href="https://hexdocs.pm/ash_graphql/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-pink-300 dark:hover:border-pink-600 transition-all cursor-pointer group"> 723 <div class="flex items-center gap-2 mb-2"> 724 <div class="w-3 h-3 bg-pink-600 rounded-full"></div> 725 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-pink-400"> 726 AshGraphQL 727 </span> 728 </div> 729 <p class="text-xs text-gray-600 dark:text-gray-400">GraphQL API extension</p> 730 </a> 731 732 <a href="https://hexdocs.pm/ash_json_api/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-green-300 dark:hover:border-green-600 transition-all cursor-pointer group"> 733 <div class="flex items-center gap-2 mb-2"> 734 <div class="w-3 h-3 bg-green-600 rounded-full"></div>
735 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-green-600 dark:group-hover:text-green-400"> 736 AshJsonApi 737 </span> 738 </div> 739 <p class="text-xs text-gray-600 dark:text-gray-400">JSON:API extension</p> 740 </a> 741 742<!-- Workflows & Orchestration --> 743 <a href="https://hexdocs.pm/reactor/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all cursor-pointer group"> 744 <div class="flex items-center gap-2 mb-2"> 745 <div class="w-3 h-3 bg-blue-500 rounded-full"></div> 746 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400"> 747 Reactor 748 </span> 749 </div> 750 <p class="text-xs text-gray-600 dark:text-gray-400">Workflows & Sagas</p> 751 </a> 752 753<!-- Authentication --> 754 <a href="https://hexdocs.pm/ash_authentication/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-red-300 dark:hover:border-red-600 transition-all cursor-pointer group"> 755 <div class="flex items-center gap-2 mb-2"> 756 <div class="w-3 h-3 bg-red-600 rounded-full"></div> 757 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-red-600 dark:group-hover:text-red-400"> 758 AshAuthentication 759 </span> 760 </div> 761 <p class="text-xs text-gray-600 dark:text-gray-400">Authentication</p> 762 </a> 763 764<!-- Admin & UI --> 765 <a href="https://hexdocs.pm/ash_admin/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600 transition-all cursor-pointer group"> 766 <div class="flex items-center gap-2 mb-2"> 767 <div class="w-3 h-3 bg-purple-600 rounded-full"></div> 768 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400"> 769 AshAdmin 770 </span> 771 </div> 772 <p class="text-xs text-gray-600 dark:text-gray-400">Admin interface</p> 773 </a> 774 775<!-- Data Processing --> 776 <a href="https://hexdocs.pm/ash_oban/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-indigo-300 dark:hover:border-indigo-600 transition-all cursor-pointer group"> 777 <div class="flex items-center gap-2 mb-2"> 778 <div class="w-3 h-3 bg-indigo-600 rounded-full"></div> 779 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400"> 780 AshOban 781 </span> 782 </div> 783 <p class="text-xs text-gray-600 dark:text-gray-400">Background jobs</p> 784 </a> 785 786 <a href="https://hexdocs.pm/ash_state_machine/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-teal-300 dark:hover:border-teal-600 transition-all cursor-pointer group"> 787 <div class="flex items-center gap-2 mb-2"> 788 <div class="w-3 h-3 bg-teal-600 rounded-full"></div> 789 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-teal-600 dark:group-hover:text-teal-400"> 790 AshStateMachine 791 </span> 792 </div> 793 <p class="text-xs text-gray-600 dark:text-gray-400">State machines</p> 794 </a> 795 796<!-- Data Management --> 797 <a href="https://hexdocs.pm/ash_archival/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-yellow-300 dark:hover:border-yellow-600 transition-all cursor-pointer group"> 798 <div class="flex items-center gap-2 mb-2"> 799 <div class="w-3 h-3 bg-yellow-600 rounded-full"></div>
800 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-yellow-600 dark:group-hover:text-yellow-400"> 801 AshArchival 802 </span> 803 </div> 804 <p class="text-xs text-gray-600 dark:text-gray-400">Soft deletion</p> 805 </a> 806 807 <a href="https://hexdocs.pm/ash_paper_trail/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 transition-all cursor-pointer group"> 808 <div class="flex items-center gap-2 mb-2"> 809 <div class="w-3 h-3 bg-gray-600 rounded-full"></div> 810 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-gray-600 dark:group-hover:text-gray-400"> 811 AshPaperTrail 812 </span> 813 </div> 814 <p class="text-xs text-gray-600 dark:text-gray-400">Audit logs</p> 815 </a> 816 817 <a href="https://hexdocs.pm/ash_rate_limiter/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 transition-all cursor-pointer group"> 818 <div class="flex items-center gap-2 mb-2"> 819 <div class="w-3 h-3 bg-gray-600 rounded-full"></div> 820 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-gray-600 dark:group-hover:text-gray-400"> 821 AshRateLimiter 822 </span> 823 </div> 824 <p class="text-xs text-gray-600 dark:text-gray-400">Rate Limiting</p> 825 </a> 826 827 <a href="https://hexdocs.pm/ash_csv/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-emerald-300 dark:hover:border-emerald-600 transition-all cursor-pointer group"> 828 <div class="flex items-center gap-2 mb-2"> 829 <div class="w-3 h-3 bg-emerald-600 rounded-full"></div> 830 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-400"> 831 AshCsv 832 </span> 833 </div> 834 <p class="text-xs text-gray-600 dark:text-gray-400">CSV data layer</p> 835 </a> 836 837<!-- Financial --> 838 <a href="https://hexdocs.pm/ash_money/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-green-300 dark:hover:border-green-600 transition-all cursor-pointer group"> 839 <div class="flex items-center gap-2 mb-2"> 840 <div class="w-3 h-3 bg-green-700 rounded-full"></div> 841 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-green-600 dark:group-hover:text-green-400"> 842 AshMoney 843 </span> 844 </div> 845 <p class="text-xs text-gray-600 dark:text-gray-400">Financial data types</p> 846 </a> 847 848 <a href="https://hexdocs.pm/ash_double_entry/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-lime-300 dark:hover:border-lime-600 transition-all cursor-pointer group"> 849 <div class="flex items-center gap-2 mb-2"> 850 <div class="w-3 h-3 bg-lime-600 rounded-full"></div> 851 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-lime-600 dark:group-hover:text-lime-400"> 852 AshDoubleEntry 853 </span> 854 </div> 855 <p class="text-xs text-gray-600 dark:text-gray-400">Double-entry accounting</p> 856 </a> 857 858<!-- Security --> 859 <a href="https://hexdocs.pm/ash_cloak/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-slate-300 dark:hover:border-slate-600 transition-all cursor-pointer group"> 860 <div class="flex items-center gap-2 mb-2"> 861 <div class="w-3 h-3 bg-slate-600 rounded-full"></div>
862 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-slate-600 dark:group-hover:text-slate-400"> 863 AshCloak 864 </span> 865 </div> 866 <p class="text-xs text-gray-600 dark:text-gray-400">Encryption</p> 867 </a> 868 869<!-- Data Layers --> 870 <a href="https://hexdocs.pm/ash_sqlite/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-sky-300 dark:hover:border-sky-600 transition-all cursor-pointer group"> 871 <div class="flex items-center gap-2 mb-2"> 872 <div class="w-3 h-3 bg-sky-600 rounded-full"></div> 873 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-sky-600 dark:group-hover:text-sky-400"> 874 AshSqlite 875 </span> 876 </div> 877 <p class="text-xs text-gray-600 dark:text-gray-400">SQLite data layer</p> 878 </a> 879 880 <a href="https://hexdocs.pm/ash_cubdb/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-amber-300 dark:hover:border-amber-600 transition-all cursor-pointer group"> 881 <div class="flex items-center gap-2 mb-2"> 882 <div class="w-3 h-3 bg-amber-600 rounded-full"></div> 883 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-amber-600 dark:group-hover:text-amber-400"> 884 AshCubDB 885 </span> 886 </div> 887 <p class="text-xs text-gray-600 dark:text-gray-400">CubDB data layer</p> 888 </a> 889 890<!-- Geospatial --> 891 <a href="https://hexdocs.pm/ash_geo/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-teal-300 dark:hover:border-teal-600 transition-all cursor-pointer group"> 892 <div class="flex items-center gap-2 mb-2"> 893 <div class="w-3 h-3 bg-teal-700 rounded-full"></div> 894 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-teal-600 dark:group-hover:text-teal-400"> 895 AshGeo 896 </span> 897 </div> 898 <p class="text-xs text-gray-600 dark:text-gray-400">Geospatial data</p> 899 </a> 900 901<!-- AI & Machine Learning --> 902 <a href="https://hexdocs.pm/ash_ai/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-violet-300 dark:hover:border-violet-600 transition-all cursor-pointer group"> 903 <div class="flex items-center gap-2 mb-2"> 904 <div class="w-3 h-3 bg-violet-600 rounded-full"></div> 905 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-violet-600 dark:group-hover:text-violet-400"> 906 AshAi 907 </span> 908 </div> 909 <p class="text-xs text-gray-600 dark:text-gray-400">LLM features</p> 910 </a> 911 912 <a href="https://hexdocs.pm/usage_rules/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-emerald-300 dark:hover:border-emerald-600 transition-all cursor-pointer group"> 913 <div class="flex items-center gap-2 mb-2"> 914 <div class="w-3 h-3 bg-emerald-600 rounded-full"></div> 915 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-400"> 916 UsageRules 917 </span> 918 </div> 919 <p class="text-xs text-gray-600 dark:text-gray-400">Usage guidelines</p> 920 </a> 921 922 <a href="https://hexdocs.pm/ash_typescript/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all cursor-pointer group"> 923 <div class="flex items-center gap-2 mb-2"> 924 <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
925 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400"> 926 AshTypescript 927 </span> 928 </div> 929 <p class="text-xs text-gray-600 dark:text-gray-400">TypeScript generation</p> 930 </a> 931 932<!-- Monitoring --> 933 <a href="https://hexdocs.pm/ash_appsignal/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600 transition-all cursor-pointer group"> 934 <div class="flex items-center gap-2 mb-2"> 935 <div class="w-3 h-3 bg-purple-500 rounded-full"></div> 936 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400"> 937 AshAppSignal 938 </span> 939 </div> 940 <p class="text-xs text-gray-600 dark:text-gray-400">APM monitoring</p> 941 </a> 942 943 <a href="https://hexdocs.pm/opentelemetry_ash/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-indigo-300 dark:hover:border-indigo-600 transition-all cursor-pointer group"> 944 <div class="flex items-center gap-2 mb-2"> 945 <div class="w-3 h-3 bg-indigo-500 rounded-full"></div> 946 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400"> 947 OpentelemetryAsh 948 </span> 949 </div> 950 <p class="text-xs text-gray-600 dark:text-gray-400">Telemetry tracing</p> 951 </a> 952 953<!-- Event Sourcing --> 954 <a href="https://hexdocs.pm/ash_events/" target="_blank" class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg hover:border-emerald-300 dark:hover:border-emerald-600 transition-all cursor-pointer group"> 955 <div class="flex items-center gap-2 mb-2"> 956 <div class="w-3 h-3 bg-emerald-500 rounded-full"></div> 957 <span class="font-semibold text-sm text-gray-900 dark:text-gray-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-400"> 958 AshEvents 959 </span> 960 </div> 961 <p class="text-xs text-gray-600 dark:text-gray-400">Event sourcing</p> 962 </a> 963 </div> 964 965 <div class="mt-8 text-center"> 966 <a href="https://hex.pm/packages?search=depends%3Ahexpm%3Aash&sort=total_downloads" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-800 dark:to-blue-800 rounded-full"> 967 <span class="text-lg font-semibold text-purple-700 dark:text-purple-300"> 968 And many more on Hex.pm! 969 </span> 970 <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 971 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"> 972 </path> 973 </svg> 974 </a> 975 </div> 976 </div> 977 </div> 978 979 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mt-8"> 980 <h2 class="text-2xl font-bold text-primary-light-200 mb-4"> 981 Looking for a tutorial? 982 </h2> 983 984 <div class="backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-8"> 985 <p class="text-gray-300 mb-6 leading-relaxed"> 986 Follow our comprehensive getting started guide to build your first Ash application. 987 Learn the fundamentals and get up and running in minutes. 988 </p> 989 <a href="https://hexdocs.pm/ash/get-started.html" target="_blank" rel="noopener noreferrer" class="inline-flex justify-center items-center px-8 py-4 rounded-full bg-gradient-to-r from-primary-light-600 to-primary-dark-600 text-white font-medium hover:from-primary-light-700 hover:to-primary-dark-700 transition-all transform hover:scale-105 shadow-[0_0_20px_#FF5757]"> 990 Get Started Guide 991 <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 992 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> 993 </svg> 994 </a> 995 </div> 996 </div> 997</div> 998 999<!-- Erlang Ecosystem Foundation Partnership Section --> 1000<div class="relative py-16"> 1001 <div class="absolute inset-0 bg-gradient-to-b from-primary-light-900/20 via-primary-dark-900/10 to-primary-light-900/20"> 1002 </div> 1003 1004 <div class="absolute inset-0 bg-[linear-gradient(rgba(254,19,19,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(254,19,19,0.2)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_8
10040%_at_50%_50%,black,transparent)]"> 1005 </div> 1006 1007 <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> 1008 <div class="backdrop-blur-lg bg-slate-950/60 rounded-2xl border border-primary-light-500/30 p-8 sm:p-12"> 1009 <div class="text-center mb-8"> 1010 <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary-dark-900/50 border border-primary-dark-500/40 text-xs font-semibold uppercase tracking-wider text-primary-light-300 mb-4"> 1011 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1012 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"></path> 1013 </svg> 1014 Proud Partner 1015 </div> 1016 <div id="eef-partner" class="flex justify-center mb-6"> 1017 <a href="https://erlef.org/" target="_blank" rel="noopener noreferrer"> 1018 <img src="/images/eef-logo.svg" alt="Erlang Ecosystem Foundation" class="h-24 sm:h-28 invert brightness-200"> 1019 </a> 1020 </div> 1021 <p class="text-lg text-gray-300 max-w-3xl mx-auto leading-relaxed"> 1022 The EEF is the 501(c)(3) non-profit that stewards the BEAM ecosystem we all build on. 1023 Their working groups make Elixir, Erlang, and the wider BEAM safer and more sustainable for everyone. 1024 </p> 1025 </div> 1026 1027 <div class="grid md:grid-cols-3 gap-6 mb-8"> 1028 <div class="bg-slate-900/70 rounded-xl border border-primary-dark-500/20 p-6"> 1029 <div class="flex items-center gap-3 mb-3"> 1030 <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-dark-900/60 border border-primary-dark-500/40"> 1031 <svg class="w-5 h-5 text-primary-light-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1032 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> 1033 </svg> 1034 </div> 1035 <h3 class="text-xl font-semibold text-primary-light-200">Securing the ecosystem</h3> 1036 </div> 1037 <p class="text-gray-300 text-sm leading-relaxed"> 1038 The EEF Security Working Group identifies vulnerabilities, publishes guidance, and funds independent audits â including the recent Hex.pm security audit that protects every package in the ecosystem, Ash included. 1039 </p> 1040 </div> 1041 1042 <div class="bg-slate-900/70 rounded-xl border border-primary-dark-500/20 p-6"> 1043 <div class="flex items-center gap-3 mb-3"> 1044 <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-dark-900/60 border border-primary-dark-500/40"> 1045 <svg class="w-5 h-5 text-primary-light-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1046 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-5a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path> 1047 </svg> 1048 </div> 1049 <h3 class="text-xl font-semibold text-primary-light-200">Supporting the community</h3> 1050 </div> 1051 <p class="text-gray-300 text-sm leading-relaxed"> 1052 Working groups for build tools, observability, education, ML, and infrastructure â plus fellowships, stipends, conferences, and the documentation that newcomers and experts rely on every day. 1053 </p> 1054 </div> 1055 1056 <div class="bg-slate-900/70 rounded-xl border border-primary-dark-500/20 p-6"> 1057 <div class="flex items-center gap-3 mb-3"> 1058 <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary-dark-900/60 border border-primary-dark-500/40"> 1059 <svg class="w-5 h-5 text-primary-light-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1060 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> 1061 </svg> 1062 </div> 1063 <h3 class="text-xl font-semibold text-primary-light-200">Becoming a member</h3> 1064 </div> 1065 <p class="text-gray-300 text-sm leading-relaxed"> 1066 Individuals and companies can join as members starting at modest annual dues. Membership funds the working groups directly, gives you a voice in governance, and keeps the BEAM independent and community-driven. 1067 </p> 1068 </div> 1069 </div> 1070 1071 <div class="text-center"> 1072 <div class="flex flex-col sm:flex-row gap-3 items-center justify-center"> 1073 <a href="https://www.every.org/erlang-ecosystem-foundation-inc" target="_blank" rel="noopener noreferrer" class="inline-flex justify-center items-center px-8 py-4 rounded-full bg-gradient-to-r from-primary-light-600 to-primary-dark-600 text-white font-medium hover:from-primary-light-700 hover:to-primary-dark-700 transition-all transform hover:scale-105 shadow-[0_0_20px_#FF5757]"> 1074 Donate to the EEF 1075 <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1076 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> 1077 </svg> 1078 </a> 1079 <a href="https://members.erlef.org/join-us" target="_blank" rel="noopener noreferrer" class="inline-flex justify-center items-center px-8 py-4 rounded-full border border-primary-light-500 text-primary-light-300 font-medium hover:bg-primary-light-500/10 hover:border-primary-light-400 hover:text-primary-light-200 transition-all transform hover:scale-105"> 1080 Become a Member 1081 <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1082 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> 1083 </svg> 1084 </a> 1085 </div> 1086 <p class="mt-4 text-sm text-gray-400"> 1087 Learn more at 1088 <a href="https://erlef.org/" target="_blank" rel="noopener noreferrer" class="text-primary-light-400 hover:text-primary-light-300 underline"> 1089 erlef.org 1090 </a> 1091 â every contribution and member helps secure and sustain the BEAM. 1092 </p> 1093 </div> 1094 </div> 1095 </div> 1096</div> 1097 1098<div class="relative py-24"> 1099 <div class="absolute inset-0 bg-gradient-to-b from-primary-light-900/20 via-primary-dark-900/10 to-primary-light-900/20"> 1100 </div> 1101 1102 <div class="absolute inset-0 bg-[linear-gradient(rgba(254,19,19,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(254,19,19,0.2)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_80%_8
11020%_at_50%_50%,black,transparent)]"> 1103 </div> 1104 <div class="absolute top-0 left-0 right-0 h-[40vh] bg-gradient-to-b to-transparent perspective-grid-reverse"> 1105 </div> 1106 1107 <div id="get-started" class="max-w-5xl mx-auto text-center lg:px-8 backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-4"> 1108 <div> 1109 <h2 class="text-3xl font-bold text-primary-light-200">Get Your Installer</h2> 1110 <div id="installer" data-phoenix-version="1.8.15"> 1111 <div class="flex flex-col justify-center mt-2"> 1112 <label for="app-name">Project Name</label> 1113 <div> 1114 <input type="text" id="app-name" value="Elixir Lizards" class="text-white bg-transparent mt-1 w-64 rounded-lg p-2 shadow-[0_0_20px_#FF5757] ring-1 border-0 outline-none ring ring-[#FF5757] mb-3 text-center" placeholder="Project Name" oninput="window.appNameChanged(this)"> 1115 </div> 1116 </div> 1117 1118<!-- Installation Mode Selector --> 1119 <div class="flex flex-col items-center gap-3 mb-4"> 1120 <div class="inline-flex rounded-lg border border-primary-dark-500/40 p-1 bg-slate-800/50"> 1121 <button id="mode-new-project" class="mode-button px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 bg-primary-dark-600 text-white" onclick="window.setProjectMode('new-project')"> 1122 New Project 1123 </button> 1124 <button id="mode-existing-app" class="mode-button px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 text-primary-light-300 hover:text-white" onclick="window.setProjectMode('existing-app')"> 1125 Existing App 1126 </button> 1127 </div> 1128 1129<!-- Install Elixir Checkbox (only shown for new projects) --> 1130 <div id="install-elixir-option" class="flex items-center gap-2"> 1131 <input type="checkbox" id="install-elixir-checkbox" checked class="w-4 h-4 text-primary-dark-600 bg-slate-800 border-primary-dark-500/40 rounded focus:ring-primary-dark-500 focus:ring-2" onchange="window.toggleInstallElixir()"> 1132 <label for="install-elixir-checkbox" class="text-sm text-primary-light-300 cursor-pointer"> 1133 Install Elixir for me 1134 </label> 1135 </div> 1136 </div> 1137 1138 <div class="flex flex-col sm:flex-row gap-3 justify-center items-center mt-4 mb-4"> 1139 <div id="show-advanced"> 1140 <button class="inline-flex items-center px-4 py-2 rounded-lg bg-slate-700/50 text-primary-light-200 font-medium hover:bg-slate-600/60 transition-all duration-200 border border-slate-600/40 hover:border-slate-500/60" onclick="window.showAdvanced()"> 1141 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1142 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"> 1143 </path> 1144 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"> 1145 </path> 1146 </svg> 1147 Advanced Options 1148 </button> 1149 </div> 1150 <div id="hide-advanced" class="hidden"> 1151 <button class="inline-flex items-center px-4 py-2 rounded-lg bg-slate-700/50 text-primary-light-200 font-medium hover:bg-slate-600/60 transition-all duration-200 border border-slate-600/40 hover:border-slate-500/60" onclick="window.hideAdvanced()"> 1152 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1153 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"> 1154 </path> 1155 </svg> 1156 Simple Options 1157 </button> 1158 </div> 1159 </div> 1160 </div> 1161 1162 <h2 id="presets-label" class="text-xl font-bold text-primary-light-200">Presets</h2> 1163 <div id="quickstarts-list" class="flex flex-row flex-wrap gap-2 justify-center mt-2 mb-4"> 1164 <div class="flex flex-row flex-wrap justify-center gap-2 gap-x-2 gap-y-5"> 1165 <label id="quickstart-live_view">
1166 <span id="quickstart-live_view-inactive" data-name="live_view" class="inactive-quickstart relative rounded px-4 py-2 border border-primary-dark-500/40 hover:bg-primary-dark-900/50 hover:border-primary-dark-400/60 hover:text-primary-light-300 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-live_view-active', true)"> 1167 Phoenix LiveView 1168 </span> 1169 <span id="quickstart-live_view-active" data-name="live_view" class="active-quickstart relative hidden rounded px-4 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 hover:bg-primary-dark-400/80 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-live_view-inactive', false)"> 1170 Phoenix LiveView 1171 </span> 1172 </label><label id="quickstart-react"> 1173 <span id="quickstart-react-inactive" data-name="react" class="inactive-quickstart relative rounded px-4 py-2 border border-primary-dark-500/40 hover:bg-primary-dark-900/50 hover:border-primary-dark-400/60 hover:text-primary-light-300 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-react-active', true)"> 1174 React + TypeScript 1175 </span> 1176 <span id="quickstart-react-active" data-name="react" class="active-quickstart relative hidden rounded px-4 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 hover:bg-primary-dark-400/80 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-react-inactive', false)"> 1177 React + TypeScript 1178 </span> 1179 </label><label id="quickstart-graphql"> 1180 <span id="quickstart-graphql-inactive" data-name="graphql" class="inactive-quickstart relative rounded px-4 py-2 border border-primary-dark-500/40 hover:bg-primary-dark-900/50 hover:border-primary-dark-400/60 hover:text-primary-light-300 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-graphql-active', true)"> 1181 GraphQL 1182 </span> 1183 <span id="quickstart-graphql-active" data-name="graphql" class="active-quickstart relative hidden rounded px-4 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 hover:bg-primary-dark-400/80 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-graphql-inactive', false)"> 1184 GraphQL 1185 </span> 1186 </label><label id="quickstart-json_api"> 1187 <span id="quickstart-json_api-inactive" data-name="json_api" class="inactive-quickstart relative rounded px-4 py-2 border border-primary-dark-500/40 hover:bg-primary-dark-900/50 hover:border-primary-dark-400/60 hover:text-primary-light-300 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-json_api-active', true)"> 1188 JSON:API 1189 </span> 1190 <span id="quickstart-json_api-active" data-name="json_api" class="active-quickstart relative hidden rounded px-4 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 hover:bg-primary-dark-400/80 cursor-pointer transition-all duration-200" onclick="window.quickStartClicked(this, 'quickstart-json_api-inactive', false)"> 1191 JSON:API 1192 </span> 1193 </label> 1194 </div> 1195 </div> 1196 1197 <div id="advanced-features" class="hidden border-t border-primary-dark-500/40"> 1198 <div class="flex flex-wrap justify-center gap-2"> 1199 <div data-category="Web" class="feature-category p-2"> 1200 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Web</h3> 1201 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1202 <label id="feature-phoenix" class="feature"> 1203 <div class="flex flex-col"> 1204 <span id="feature-phoenix-inactive" data-name="phoenix" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-phoenix-active', true)"> 1205 Phoenix 1206 1207 </span>
1208 <span id="feature-phoenix-active" data-name="phoenix" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-phoenix-inactive', false)"> 1209 Phoenix 1210 1211 </span> 1212 1213 </div> 1214 </label><label id="feature-graphql" class="feature"> 1215 <div class="flex flex-col"> 1216 <span id="feature-graphql-inactive" data-name="graphql" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-graphql-active', true)"> 1217 GraphQL 1218 1219 </span> 1220 <span id="feature-graphql-active" data-name="graphql" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-graphql-inactive', false)"> 1221 GraphQL 1222 1223 </span> 1224 1225 </div> 1226 </label><label id="feature-json_api" class="feature"> 1227 <div class="flex flex-col"> 1228 <span id="feature-json_api-inactive" data-name="json_api" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-json_api-active', true)"> 1229 JSON:API 1230 1231 </span> 1232 <span id="feature-json_api-active" data-name="json_api" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-json_api-inactive', false)"> 1233 JSON:API 1234 1235 </span> 1236 1237 </div> 1238 </label><label id="feature-ash_typescript" class="feature"> 1239 <div class="flex flex-col"> 1240 <span id="feature-ash_typescript-inactive" data-name="ash_typescript" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-ash_typescript-active', true)"> 1241 TypeScript 1242 1243 </span> 1244 <span id="feature-ash_typescript-active" data-name="ash_typescript" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-ash_typescript-inactive', false)"> 1245 TypeScript 1246 1247 </span> 1248 1249 </div> 1250 </label> 1251 </div> 1252 </div><div data-category="Data Layers" class="feature-category p-2"> 1253 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Data Layers</h3> 1254 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1255 <label id="feature-postgres" class="feature"> 1256 <div class="flex flex-col"> 1257 <span id="feature-postgres-inactive" data-name="postgres" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-postgres-active', true)"> 1258 Postgres 1259 1260 </span> 1261 <span id="feature-postgres-active" data-name="postgres" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-postgres-inactive', false)"> 1262 Postgres 1263 1264 </span> 1265 1266 </div> 1267 </label><label id="feature-sqlite" class="feature"> 1268 <div class="flex flex-col"> 1269 <span id="feature-sqlite-inactive" data-name="sqlite" class="relative inactive-feature roun
1269ded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-sqlite-active', true)"> 1270 SQLite 1271 1272 </span> 1273 <span id="feature-sqlite-active" data-name="sqlite" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-sqlite-inactive', false)"> 1274 SQLite 1275 1276 </span> 1277 1278 </div> 1279 </label><label id="feature-csv" class="feature"> 1280 <div class="flex flex-col"> 1281 <span id="feature-csv-inactive" data-name="csv" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-csv-active', true)"> 1282 CSV 1283 1284 </span> 1285 <span id="feature-csv-active" data-name="csv" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-csv-inactive', false)"> 1286 CSV 1287 1288 </span> 1289 1290 </div> 1291 </label> 1292 </div> 1293 </div><div data-category="Authentication" class="feature-category p-2"> 1294 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Authentication</h3> 1295 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1296 <label id="feature-password_auth" class="feature"> 1297 <div class="flex flex-col"> 1298 <span id="feature-password_auth-inactive" data-name="password_auth" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-password_auth-active', true)"> 1299 Password 1300 1301 </span> 1302 <span id="feature-password_auth-active" data-name="password_auth" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-password_auth-inactive', false)"> 1303 Password 1304 1305 </span> 1306 1307 </div> 1308 </label><label id="feature-magic_link_auth" class="feature"> 1309 <div class="flex flex-col"> 1310 <span id="feature-magic_link_auth-inactive" data-name="magic_link_auth" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-magic_link_auth-active', true)"> 1311 Magic Link 1312 1313 </span> 1314 <span id="feature-magic_link_auth-active" data-name="magic_link_auth" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-magic_link_auth-inactive', false)"> 1315 Magic Link 1316 1317 </span> 1318 1319 </div> 1320 </label><label id="feature-api_key_auth" class="feature"> 1321 <div class="flex flex-col"> 1322 <span id="feature-api_key_auth-inactive" data-name="api_key_auth" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-api_key_auth-active', true)"> 1323 API Keys 1324 1325 </span> 1326 <span id="feature-api_key_auth-active" data-name="api_key_auth" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-api_key_auth-inactive', false)"> 1327 API Keys 1328 1329 </span> 1330 1331 </div> 1332 </label><label id="feature-oauth" class="feature"> 1333 <div class="flex flex-col">
1334 <span id="feature-oauth-inactive" data-name="oauth" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-oauth-active', true)"> 1335 OAuth2 1336 1337 </span> 1338 <span id="feature-oauth-active" data-name="oauth" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-oauth-inactive', false)"> 1339 OAuth2 1340 1341 </span> 1342 1343 </div> 1344 </label> 1345 </div> 1346 </div><div data-category="AI" class="feature-category p-2"> 1347 <h3 class="text-lg font-bold mb-2 text-primary-light-200">AI</h3> 1348 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1349 <label id="feature-tidewave" class="feature"> 1350 <div class="flex flex-col"> 1351 <span id="feature-tidewave-inactive" data-name="tidewave" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-tidewave-active', true)"> 1352 Tidewave 1353 1354 <sup>*</sup> 1355 1356 </span> 1357 <span id="feature-tidewave-active" data-name="tidewave" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-tidewave-inactive', false)"> 1358 Tidewave 1359 1360 <sup>*</sup> 1361 1362 </span> 1363 1364 </div> 1365 </label><label id="feature-ash_ai" class="feature"> 1366 <div class="flex flex-col"> 1367 <span id="feature-ash_ai-inactive" data-name="ash_ai" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-ash_ai-active', true)"> 1368 Ash AI 1369 1370 </span> 1371 <span id="feature-ash_ai-active" data-name="ash_ai" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-ash_ai-inactive', false)"> 1372 Ash AI 1373 1374 </span> 1375 1376 </div> 1377 </label><label id="feature-usage_rules" class="feature"> 1378 <div class="flex flex-col"> 1379 <span id="feature-usage_rules-inactive" data-name="usage_rules" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-usage_rules-active', true)"> 1380 Usage Rules 1381 1382 </span> 1383 <span id="feature-usage_rules-active" data-name="usage_rules" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-usage_rules-inactive', false)"> 1384 Usage Rules 1385 1386 </span> 1387 1388 </div> 1389 </label> 1390 </div> 1391 </div><div data-category="Finance" class="feature-category p-2"> 1392 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Finance</h3> 1393 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1394 <label id="feature-money" class="feature"> 1395 <div class="flex flex-col"> 1396 <span id="feature-money-inactive" data-name="money" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-money-active', true)"> 1397 Money 1398 1399 </span>
1400 <span id="feature-money-active" data-name="money" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-money-inactive', false)"> 1401 Money 1402 1403 </span> 1404 1405 </div> 1406 </label><label id="feature-double_entry" class="feature"> 1407 <div class="flex flex-col"> 1408 <span id="feature-double_entry-inactive" data-name="double_entry" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-double_entry-active', true)"> 1409 Double Entry Accounting 1410 1411 </span> 1412 <span id="feature-double_entry-active" data-name="double_entry" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-double_entry-inactive', false)"> 1413 Double Entry Accounting 1414 1415 </span> 1416 1417 </div> 1418 </label> 1419 </div> 1420 </div><div data-category="Automation" class="feature-category p-2"> 1421 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Automation</h3> 1422 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1423 <label id="feature-oban" class="feature"> 1424 <div class="flex flex-col"> 1425 <span id="feature-oban-inactive" data-name="oban" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-oban-active', true)"> 1426 Oban 1427 1428 <sup>*</sup> 1429 1430 </span> 1431 <span id="feature-oban-active" data-name="oban" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-oban-inactive', false)"> 1432 Oban 1433 1434 <sup>*</sup> 1435 1436 </span> 1437 1438 </div> 1439 </label><label id="feature-state_machine" class="feature"> 1440 <div class="flex flex-col"> 1441 <span id="feature-state_machine-inactive" data-name="state_machine" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-state_machine-active', true)"> 1442 State Machines 1443 1444 </span> 1445 <span id="feature-state_machine-active" data-name="state_machine" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-state_machine-inactive', false)"> 1446 State Machines 1447 1448 </span> 1449 1450 </div> 1451 </label><label id="feature-ash_events" class="feature"> 1452 <div class="flex flex-col"> 1453 <span id="feature-ash_events-inactive" data-name="ash_events" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-ash_events-active', true)"> 1454 Event Sourcing 1455 1456 </span> 1457 <span id="feature-ash_events-active" data-name="ash_events" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-ash_events-inactive', false)"> 1458 Event Sourcing 1459 1460 </span> 1461 1462 </div> 1463 </label> 1464 </div> 1465 </div><div data-category="Safety & Security" class="feature-category p-2"> 1466 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Safety & Security</h3> 1467 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1468 <label id="feature-archival" class="feature"> 1469 <div class="flex flex-col">
1470 <span id="feature-archival-inactive" data-name="archival" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-archival-active', true)"> 1471 Archival 1472 1473 </span> 1474 <span id="feature-archival-active" data-name="archival" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-archival-inactive', false)"> 1475 Archival 1476 1477 </span> 1478 1479 </div> 1480 </label><label id="feature-paper_trail" class="feature"> 1481 <div class="flex flex-col"> 1482 <span id="feature-paper_trail-inactive" data-name="paper_trail" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-paper_trail-active', true)"> 1483 Paper Trail 1484 1485 </span> 1486 <span id="feature-paper_trail-active" data-name="paper_trail" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-paper_trail-inactive', false)"> 1487 Paper Trail 1488 1489 </span> 1490 1491 </div> 1492 </label><label id="feature-cloak" class="feature"> 1493 <div class="flex flex-col"> 1494 <span id="feature-cloak-inactive" data-name="cloak" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-cloak-active', true)"> 1495 Encryption 1496 1497 </span> 1498 <span id="feature-cloak-active" data-name="cloak" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-cloak-inactive', false)"> 1499 Encryption 1500 1501 </span> 1502 1503 </div> 1504 </label> 1505 </div> 1506 </div><div data-category="Dev Tools" class="feature-category p-2"> 1507 <h3 class="text-lg font-bold mb-2 text-primary-light-200">Dev Tools</h3> 1508 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1509 <label id="feature-live_debugger" class="feature"> 1510 <div class="flex flex-col"> 1511 <span id="feature-live_debugger-inactive" data-name="live_debugger" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-live_debugger-active', true)"> 1512 Live Debugger 1513 1514 <sup>*</sup> 1515 1516 </span> 1517 <span id="feature-live_debugger-active" data-name="live_debugger" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-live_debugger-inactive', false)"> 1518 Live Debugger 1519 1520 <sup>*</sup> 1521 1522 </span> 1523 1524 </div> 1525 </label><label id="feature-admin" class="feature"> 1526 <div class="flex flex-col"> 1527 <span id="feature-admin-inactive" data-name="admin" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-admin-active', true)"> 1528 Admin UI 1529 1530 </span> 1531 <span id="feature-admin-active" data-name="admin" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-admin-inactive', false)"> 1532 Admin UI 1533 1534 </span> 1535 1536 </div> 1537 </label> 1538 </div> 1539 </div><div data-category="UI Components" class="feature-category p-2"> 1540 <h3 class="text-lg font-bold mb-2 text-primary-light-200">UI Components</h3> 1541 <div class="flex flex-wrap gap-2 gap-y-2 justify-center"> 1542 <label id="feature-mishka" class="feature"> 1543 <div class="flex flex-col">
1544 <span id="feature-mishka-inactive" data-name="mishka" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-mishka-active', true)"> 1545 Mishka Chelekom 1546 1547 <sup>*</sup> 1548 1549 </span> 1550 <span id="feature-mishka-active" data-name="mishka" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-mishka-inactive', false)"> 1551 Mishka Chelekom 1552 1553 <sup>*</sup> 1554 1555 </span> 1556 1557 </div> 1558 </label><label id="feature-cinder" class="feature"> 1559 <div class="flex flex-col"> 1560 <span id="feature-cinder-inactive" data-name="cinder" class="relative inactive-feature rounded px-2 py-2 border hover:bg-primary-dark-900/50 cursor-pointer border-primary-dark-500/40" onclick="window.featureClicked(this, 'feature-cinder-active', true)"> 1561 Cinder 1562 1563 </span> 1564 <span id="feature-cinder-active" data-name="cinder" class="relative active-feature hidden rounded px-2 py-2 border border-primary-dark-500/40 bg-primary-dark-500/80 cursor-pointer" onclick="window.featureClicked(this, 'feature-cinder-inactive', false)"> 1565 Cinder 1566 1567 </span> 1568 1569 </div> 1570 </label> 1571 </div> 1572 </div> 1573 </div> 1574 </div> 1575 <div id="asterisk-warning" class="hidden text-xs text-slate-400 text-center mt-1 mb-2"> 1576 <sup>*</sup> Is or contains an external package, not maintained by the Ash team. 1577 </div> 1578 1579 <div id="igniter-instruction" class="hidden text-center mb-4"> 1580 <p class="text-primary-light-200"> 1581 Uses 1582 <a target="_blank" href="https://hexdocs.pm/igniter" class="text-primary-dark-400 underline hover:text-primary-dark-300"> 1583 igniter 1584 </a> 1585 to install Ash into your application 1586 </p> 1587 </div> 1588 1589 <div class="my-4 text-primary-light-200 bg-slate-900/70 rounded-lg text-white py-4 flex justify-center"> 1590 <pre id="selected-features" class="overflow-auto text-left"> 1591sh <(curl 'https://ash-hq.org/install/elixir_lizards') \ 1592 && cd elixir_lizards</pre> 1593 </div> 1594 <div id="manual-setup-box" class="flex flex-col hidden mb-8"> 1595 <h2 class="text-1xl font-bold mb-6 text-primary-light-200"> 1596 Some selected features require manual setup: 1597 </h2> 1598 <div id="manual-setup-links" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mx-[30%] gap-2"> 1599 </div> 1600 </div> 1601 <div id="read-more-box" class="hidden flex flex-col mb-8"> 1602 <h2 class="text-1xl font-bold mb-6 text-primary-light-200"> 1603 Read the docs: 1604 </h2> 1605 <div id="read-more-links" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mx-[30%] gap-2"> 1606 </div> 1607 </div> 1608 <button id="copy-url-button" onclick="window.copyUrl()" class="plausible-event-name=Install inline-flex items-center px-6 py-3 rounded-full bg-primary-dark-600 text-white font-medium hover:bg-primary-dark-700 transition-all transform hover:scale-105 [&:not(.was-clicked)]:shadow-[0_0_20px_#FF5757] transition-all duration-300 hover:bg-red-600 [&.was-clicked]:scale-95 [&.was-clicked]:bg-green-500"> 1609 <span id="copy-url-button-icon" class="hero-clipboard"></span> 1610 <span id="copy-url-button-text" class="ml-2"> 1611 Copy 1612 </span> 1613 </button> 1614 </div> 1615 </div> 1616 1617 <div class="mt-12"> 1618 <div class="max-w-5xl mx-auto text-center px-4 sm:px-6 lg:px-8"> 1619 <h2 class="text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]"> 1620 Trusted 1621 <span class="bg-gradient-to-r from-primary-dark-500 to-primary-light-500 bg-clip-text text-transparent"> 1622 in production 1623 </span> 1624 </h2> 1625 <div class="bg-slate-950/50 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-4 backdrop-blur-lg"> 1626 <div class="grid grid-cols-3 gap-0.5 justify-center justify-items-center my-12"> 1627 1628 1629 <a href="https://remedymeds.com/" class="content-center w-full py-2 max-w-36"> 1630 <img class="w-full h-[90%] object-contain" src="/images/remedy.svg" alt="Remedy" title="Remedy"> 1631 </a> 1632 1633 1634 1635 <a href="https://www.alembic.com.au" class="content-center w-full py-2 max-w-36"> 1636 <img class="w-full h-[90%] object-contain" src="images/alembic.svg" alt="Alembic" title="Alembic"> 1637 </a> 1638 1639 1640 1641 <a href="https://www.daylite.app" class="content-center w-full py-2 max-w-36"> 1642 <img class="w-full h-[90%] object-contain" src="/images/daylite-logo.svg" alt="Daylite" title="Daylite"> 1643 </a> 1644 1645 1646 1647 <a href="https://www.heretask.com/" class="content-center w-full py-2 max-w-36"> 1648 <img class="w-full h-[90%] object-contain" src="/images/heretask-logo-light.svg" alt="Heretask" title="Heretask"> 1649 </a> 1650 1651 1652 1653 <a href="https://www.groupflow.app/developers?utm_source=ash" class="content-center w-full py-2 max-w-36"> 1654 <img class="w-full h-[90%] object-contain" src="/images/groupflow-logo.svg" alt="GroupFlow" title="GroupFlow"> 1655 </a> 1656 1657 1658 1659 <a href="https://www.zoonect.com/en/homepage" class="content-center w-full py-2 max-w-36"> 1660 <img class="w-full h-[90%] object-contain" src="/images/zoonect-dark.svg" alt="Zoonect" title="Zoonect"> 1661 </a> 1662 1663 1664 1665 <a href="https://www.scribblevet.com/" class="content-center w-full py-2 max-w-36"> 1666 <img class="w-full h-[90%] object-contain" src="/images/scribble-vet-logo.png" alt="ScribbleVet" title="ScribbleVet"> 1667 </a> 1668 1669 1670 1671 <a href="https://www.plangora.com" class="content-center w-full py-2 max-w-36"> 1672 <img class="w-full h-[90%] object-contain" src="images/plangora-logo-dark.png" alt="Plangora" title="Plangora"> 1673 </a> 1674 1675 1676 1677 <a href="https://coinbits.app" class="content-center w-full py-2 max-w-36"> 1678 <img class="w-full h-[90%] object-contain" src="/images/coinbits-logo.png" alt="Coinbits" title="Coinbits"> 1679 </a> 1680 1681 1682 1683 <a href="https://www.wintermeyer-consulting.de/" class="content-center w-full py-2 max-w-36"> 1684 <img class="w-full h-[90%] object-contain" src="/images/wintermeyer-logo-dark.svg" alt="Wintermeyer Consulting" title="Wintermeyer Consulting"> 1685 </a> 1686 1687 1688 1689 <a href="https://boringbusinessleads.com" class="content-center w-full py-2 max-w-36"> 1690 <img class="w-full h-[90%] object-contain" src="/images/self-storage-leads-logo-light.svg" alt="Boring Business Leads" title="Boring Business Leads"> 1691 </a> 1692 1693 1694 1695 <a href="https://linguavid.net" class="content-center w-full py-2 max-w-36"> 1696 <img class="w-full h-[90%] object-contain" src="/images/linguavid-logo.png" alt="Linguavid" title="Linguavid"> 1697 </a> 1698 1699 1700 1701 <a href="https://communities.support/" class="content-center w-full py-2 max-w-36"> 1702 <img class="w-full h-[90%] object-contain" src="/images/communities-logo.svg" alt="Communities" title="Communities"> 1703 </a> 1704 1705 1706 1707 <a href="https://www.intcube.io/en" class="content-center w-full py-2 max-w-36"> 1708 <img class="w-full h-[90%] object-contain" src="/images/intcube.
1708svg" alt="Intcube" title="Intcube"> 1709 </a> 1710 1711 1712 1713 <a href="https://saleshood.com/" class="content-center w-full py-2 max-w-36"> 1714 <img class="w-full h-[90%] object-contain" src="/images/saleshood.png" alt="SalesHood" title="SalesHood"> 1715 </a> 1716 1717 1718 1719 <div></div> 1720 1721 1722 </div> 1723 </div> 1724 </div> 1725 </div> 1726 1727 <div class="mt-6 z-10" id="upcoming-events"> 1728 <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> 1729 <h2 class="text-center text-3xl sm:text-4xl font-bold mb-6 bg-gradient-to-r from-primary-light-400 via-primary-dark-500 to-primary-light-600 bg-clip-text text-transparent drop-shadow-[0_0_10px_rgba(255,87,87,0.3)]"> 1730 Upcoming 1731 <span class="bg-gradient-to-r from-primary-dark-500 to-primary-light-500 bg-clip-text text-transparent"> 1732 events 1733 </span> 1734 </h2> 1735 <ul class="divide-primary-light-500/30 divide-y relative"> 1736 <li class="py-4"> 1737 <a href="https://luma.com/wz4z0iz6" class="text-xl font-bold hover:text-primary-light-500" target="_blank"> 1738 AshConf 2026 1739 </a> 1740 <p class="text-sm text-gray-400">Date: October 3rd, 2026</p> 1741 <p class="text-md mt-3"> 1742 <p class="font-bold"> 1743 A full day of Ash talks 1744</p> 1745<p> 1746 A one day conference in Varberg, Sweden, featuring Ash core team members, key contributors and expert users. Free for EEF members, or with a donation to the Ash Project. 1747</p> 1748 1749 </p> 1750 </li> 1751 </ul> 1752 </div> 1753 </div> 1754</div> 1755 </div> 1756 <footer class="bg-slate-900 border-t border-slate-500/20 mt-auto"> 1757 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> 1758 <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> 1759 <!-- Logo and Description --> 1760 <div class="col-span-1 md:col-span-2"> 1761 <img src="/images/ash_logo_orange.svg" alt="Ash Framework" class="h-8 mb-4"> 1762 <p class="text-slate-400 text-sm max-w-md"> 1763 A declarative, resource-oriented application framework for Elixir. 1764 Model your domain, derive the rest. 1765 </p> 1766 </div> 1767 1768<!-- Documentation Links --> 1769 <div> 1770 <h3 class="text-white font-semibold text-sm mb-4">Documentation</h3> 1771 <ul class="space-y-2 text-sm"> 1772 <li> 1773 <a href="https://hexdocs.pm/ash/get-started.html" class="text-slate-400 hover:text-primary-light-400 transition-colors"> 1774 Getting Started 1775 </a> 1776 </li> 1777 <li> 1778 <a href="https://hexdocs.pm/ash/readme.html" class="text-slate-400 hover:text-primary-light-400 transition-colors"> 1779 Guides 1780 </a> 1781 </li> 1782 <li> 1783 <a href="https://hexdocs.pm/ash/Ash.html" class="text-slate-400 hover:text-primary-light-400 transition-colors"> 1784 API Reference 1785 </a> 1786 </li> 1787 </ul> 1788 </div> 1789 1790<!-- Help & Support --> 1791 <div> 1792 <h3 class="text-white font-semibold text-sm mb-4">Help & Support</h3> 1793 <ul class="space-y-2 text-sm"> 1794 <li> 1795 <a href="/community" class="text-slate-400 hover:text-primary-light-400 transition-colors"> 1796 Community 1797 </a> 1798 </li> 1799 <li> 1800 <a href="https://github.com/ash-project/ash/issues/new?template=bug_report.md" class="text-slate-400 hover:text-primary-light-400 transition-colors" target="_blank" rel="noopener noreferrer"> 1801 Report a Bug 1802 </a> 1803 </li> 1804 <li> 1805 <a href="https://github.com/ash-project/ash?tab=security-ov-file#readme" class="text-slate-400 hover:text-primary-light-400 transition-colors" target="_blank" rel="noopener noreferrer"> 1806 Security Policy 1807 </a> 1808 </li> 1809 <li> 1810 <a href="https://alembic.com.au/services/ash-framework-premium-support" class="text-slate-400 hover:text-primary-light-400 transition-colors" target="_blank" rel="noopener noreferrer"> 1811 Premium Support 1812 </a> 1813 </li> 1814 </ul> 1815 </div> 1816 </div> 1817 1818<!-- Bottom section --> 1819 <div class="mt-8 pt-8 border-t border-slate-500/20 flex flex-col md:flex-row justify-between items-center"> 1820 <p class="text-slate-400 text-sm"> 1821 © 2026 Ash Framework. Open source and built with â¤ï¸ 1822 </p> 1823 <div class="flex space-x-6 mt-4 md:mt-0"> 1824 <a href="https://github.com/ash-project/ash" class="text-slate-400 hover:text-primary-light-400 transition-colors" target="_blank" rel="noopener noreferrer" title="GitHub"> 1825 <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> 1826 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path> 1827 </svg> 1828 </a> 1829 <a href="https://bsky.app/profile/ash-hq.org" class="text-slate-400 hover:text-primary-light-400 transition-colors" target="_blank" rel="noopener noreferrer" title="Bluesky"> 1830 <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 64 57"> 1831 <path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.
1831111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"></path> 1832 </svg> 1833 </a> 1834 </div> 1835 </div> 1836 </div> 1837</footer> 1838
1838<script defer phx-track-static type="text/javascript" src="/assets/app-69827d3ab630e9afe6bb67e913d94655.js?vsn=d"> 1839 </script>
1839 1840 </body> 1841</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.