flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
4.0 kB
106 lines
1---
2import { Image } from "astro:assets";
3
4import BaseLayout from "$layouts/BaseLayout.astro";
5import config from "../config";
6
7import Header from "$components/Header.astro";
8import CommandPalette from "$components/search/CommandPalette.svelte";
9
10import screenlight from "$assets/screen-light.png";
11import screendark from "$assets/screen-dark.png";
12import { getSortedDocs } from "src/utils";
13import PrimaryButton from "$components/buttons/PrimaryButton.astro";
14
15const docs = await getSortedDocs();
16---
17
18<BaseLayout title={config.SITE_NAME} description={config.SITE_DESCRIPTION}>
19 <div class="fixed top-0 left-0 right-0 h-16 z-30">
20 <Header />
21 </div>
22
23 <CommandPalette client:load />
24
25 <div
26 class="relative isolate overflow-hidden bg-base-50 dark:bg-base-950 w-full"
27 >
28 <div
29 class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
30 aria-hidden="true"
31 >
32 <div
33 class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-accent-300 to-accent-600 opacity-20"
34 style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)"
35 >
36 </div>
37 </div>
38 <div
39 class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40"
40 >
41 <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
42 <div class="mt-32 sm:mt-44 lg:mt-24">
43 <!-- <a href="#" class="inline-flex space-x-6">
44 <span
45 class="rounded-full bg-accent-400/10 dark:bg-accent-500/10 px-3 py-1 text-sm/6 font-semibold text-accent-600 dark:text-accent-400 ring-1 ring-inset ring-accent-500/20"
46 >What's new</span
47 >
48 <span
49 class="inline-flex items-center space-x-2 text-sm/6 font-medium text-base-700 dark:text-base-300"
50 >
51 <span>Just shipped v1.0</span>
52 <svg
53 class="size-5 text-base-500"
54 viewBox="0 0 20 20"
55 fill="currentColor"
56 aria-hidden="true"
57 data-slot="icon"
58 >
59 <path
60 fill-rule="evenodd"
61 d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
62 clip-rule="evenodd"></path>
63 </svg>
64 </span>
65 </a> -->
66 </div>
67 <h1
68 class="mt-10 text-pretty text-4xl sm:text-5xl font-semibold tracking-tight text-base-900 dark:text-white md:text-7xl"
69 >
70 {config.SITE_FAVICON}
71 {config.SITE_NAME}
72 </h1>
73 <p
74 class="mt-8 text-pretty text-lg font-medium text-base-600 dark:text-base-400 sm:text-xl/8"
75 >
76 {config.SITE_DESCRIPTION}
77 </p>
78 <div class="mt-10 flex items-center gap-x-6">
79 <PrimaryButton href={`${config.BASE}/docs/${docs[0].id}`}>
80 {docs[0].data.title}
81 </PrimaryButton>
82 </div>
83 </div>
84 <div
85 class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32"
86 >
87 <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
88 <Image
89 src={screenlight}
90 alt="App screenshot"
91 width="2432"
92 height="1442"
93 class="w-[76rem] rounded-2xl bg-base-900/5 shadow-2xl ring-1 ring-base-800/10 dark:hidden"
94 />
95 <Image
96 src={screendark}
97 alt="App screenshot"
98 width="2432"
99 height="1442"
100 class="w-[76rem] rounded-2xl bg-white/5 shadow-2xl ring-1 ring-white/10 dark:block hidden"
101 />
102 </div>
103 </div>
104 </div>
105 </div>
106</BaseLayout>