|
| 1 | +<script lang="ts"> |
| 2 | + let count = 0; |
| 3 | + |
| 4 | + function increment() { |
| 5 | + count++; |
| 6 | + } |
| 7 | +</script> |
| 8 | + |
| 9 | +<template class="flex min-h-screen flex-col text-zinc-900 bg-zinc-50 px-4 pt-8 pb-32"> |
| 10 | + <main class="flex-1 mx-auto"> |
| 11 | + <section class="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32"> |
| 12 | + <div class="flex max-w-[64rem] flex-col items-center gap-4 text-center"> |
| 13 | + <img |
| 14 | + class="h-12 w-12" |
| 15 | + src="https://analogjs.org/img/logos/analog-logo.svg" |
| 16 | + alt="AnalogJs logo. Two red triangles and a white analog wave in front" |
| 17 | + /> |
| 18 | + <a |
| 19 | + class="rounded-2xl bg-zinc-200 px-4 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" |
| 20 | + target="_blank" |
| 21 | + href="https://twitter.com/analogjs" |
| 22 | + > |
| 23 | + Follow along on Twitter |
| 24 | + </a> |
| 25 | + <h1 class="font-heading font-medium text-3xl sm:text-5xl md:text-6xl lg:text-7xl"> |
| 26 | + <span class="text-[#DD0031]">Analog.</span> |
| 27 | + The fullstack Angular meta-framework |
| 28 | + </h1> |
| 29 | + <p class="max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8"> |
| 30 | + Analog is for building applications and websites with Angular. |
| 31 | + <br /> |
| 32 | + Powered by Vite. |
| 33 | + </p> |
| 34 | + <div class="space-x-4"> |
| 35 | + <a |
| 36 | + class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background bg-zinc-950 text-zinc-50 hover:bg-zinc-950/90 h-11 px-8 rounded-md" |
| 37 | + href="https://analogjs.org" |
| 38 | + > |
| 39 | + Read the docs |
| 40 | + </a> |
| 41 | + <a |
| 42 | + target="_blank" |
| 43 | + rel="noreferrer" |
| 44 | + class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-zinc-100 hover:text-zinc-950 h-11 px-8 rounded-md" |
| 45 | + href="https://github.com/analogjs/analog" |
| 46 | + > |
| 47 | + Star on GitHub |
| 48 | + </a> |
| 49 | + </div> |
| 50 | + </div> |
| 51 | + </section> |
| 52 | + <section id="counter-demo" class="container py-8 md:py-12 lg:py-24"> |
| 53 | + <div class="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center"> |
| 54 | + <h2 class="text-[#DD0031] font-medium text-3xl leading-[1.1]">Counter</h2> |
| 55 | + <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7"> |
| 56 | + This is a simple interactive counter. Powered by Angular. |
| 57 | + </p> |
| 58 | + <button |
| 59 | + (click)="increment()" |
| 60 | + class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border border-input hover:bg-zinc-100 hover:text-zinc-950 h-11 px-8 rounded-md" |
| 61 | + > |
| 62 | + Count: |
| 63 | + <span class="ml-1 font-mono">{{ count }}</span> |
| 64 | + </button> |
| 65 | + </div> |
| 66 | + </section> |
| 67 | + </main> |
| 68 | +</template> |
0 commit comments