PageSourceSearch

https://ash-hq.org/

html ash-hq.org collected 2026-10-03 22:16:11 UTC 128,213 bytes, 1,841 lines download raw bytes

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!&nbspAshConf 2026
41    </a>
42    October 3rd, 2026
43    <a class="font-extralight" href="/#upcoming-events">
44      &nbsp&nbsp|&nbsp&nbsp 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, &#39;quickstart-live_view-active&#39;, 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, &#39;quickstart-live_view-inactive&#39;, 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, &#39;quickstart-react-active&#39;, 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, &#39;quickstart-react-inactive&#39;, 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, &#39;quickstart-graphql-active&#39;, 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, &#39;quickstart-graphql-inactive&#39;, 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, &#39;quickstart-json_api-active&#39;, 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, &#39;quickstart-json_api-inactive&#39;, 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, &#39;feature-phoenix-active&#39;, 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, &#39;feature-phoenix-inactive&#39;, 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, &#39;feature-graphql-active&#39;, 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, &#39;feature-graphql-inactive&#39;, 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, &#39;feature-json_api-active&#39;, 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, &#39;feature-json_api-inactive&#39;, 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, &#39;feature-ash_typescript-active&#39;, 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, &#39;feature-ash_typescript-inactive&#39;, 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, &#39;feature-postgres-active&#39;, 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, &#39;feature-postgres-inactive&#39;, 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, &#39;feature-sqlite-active&#39;, 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, &#39;feature-sqlite-inactive&#39;, 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, &#39;feature-csv-active&#39;, 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, &#39;feature-csv-inactive&#39;, 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, &#39;feature-password_auth-active&#39;, 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, &#39;feature-password_auth-inactive&#39;, 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, &#39;feature-magic_link_auth-active&#39;, 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, &#39;feature-magic_link_auth-inactive&#39;, 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, &#39;feature-api_key_auth-active&#39;, 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, &#39;feature-api_key_auth-inactive&#39;, 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, &#39;feature-oauth-active&#39;, 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, &#39;feature-oauth-inactive&#39;, 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, &#39;feature-tidewave-active&#39;, 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, &#39;feature-tidewave-inactive&#39;, 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, &#39;feature-ash_ai-active&#39;, 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, &#39;feature-ash_ai-inactive&#39;, 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, &#39;feature-usage_rules-active&#39;, 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, &#39;feature-usage_rules-inactive&#39;, 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, &#39;feature-money-active&#39;, 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, &#39;feature-money-inactive&#39;, 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, &#39;feature-double_entry-active&#39;, 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, &#39;feature-double_entry-inactive&#39;, 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, &#39;feature-oban-active&#39;, 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, &#39;feature-oban-inactive&#39;, 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, &#39;feature-state_machine-active&#39;, 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, &#39;feature-state_machine-inactive&#39;, 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, &#39;feature-ash_events-active&#39;, 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, &#39;feature-ash_events-inactive&#39;, false)">
1458                    Event Sourcing
1459
1460                  </span>
1461
1462                </div>
1463              </label>
1464            </div>
1465          </div><div data-category="Safety &amp; Security" class="feature-category p-2">
1466            <h3 class="text-lg font-bold mb-2 text-primary-light-200">Safety &amp; 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, &#39;feature-archival-active&#39;, 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, &#39;feature-archival-inactive&#39;, 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, &#39;feature-paper_trail-active&#39;, 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, &#39;feature-paper_trail-inactive&#39;, 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, &#39;feature-cloak-active&#39;, 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, &#39;feature-cloak-inactive&#39;, 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, &#39;feature-live_debugger-active&#39;, 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, &#39;feature-live_debugger-inactive&#39;, 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, &#39;feature-admin-active&#39;, 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, &#39;feature-admin-inactive&#39;, 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, &#39;feature-mishka-active&#39;, 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, &#39;feature-mishka-inactive&#39;, 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, &#39;feature-cinder-active&#39;, 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, &#39;feature-cinder-inactive&#39;, 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.