-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
stack.astro
153 lines (147 loc) · 9.36 KB
/
stack.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
---
import PageSection from "../pageSection.astro";
import Feature from "./card.astro";
---
<PageSection size={"24"} id="stack">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 text-t3-purple-100">
<div class="lg:text-center md:text-center mb-10">
<h2
class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200"
>
The best of the full stack TypeScript ecosystem...
</h2>
<h3
class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50"
>
...but ONLY the parts you need
</h3>
<p
class="mt-4 text-base lg:text-lg md:text-lg text-t3-purple-200 max-w-[40ch] mx-auto"
>
Take what you want and nothing more!
</p>
</div>
<div>
<div
class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 md:grid-cols-3 sm:grid-rows-3 md:grid-rows-2 sm:grid-flow-col sm:gap-x-6 sm:gap-y-14 lg:gap-x-8"
>
<Feature title="Next.js" href="https://nextjs.org/">
<svg
slot="icon"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="h-10 aspect-square fill-white py-1"
>
<title>Next.js</title>
<path
d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z"
>
</path>
</svg>
<Fragment slot="description">
Next.js offers a lightly opinionated, heavily optimized approach to
creating applications using React. It's the industry standard and
we're proud to build on top of it :)
</Fragment>
</Feature>
<Feature title="Prisma" href="https://www.prisma.io/">
<svg
slot="icon"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="h-10 fill-white py-1"
>
<title>Prisma</title>
<path
d="M21.8068 18.2848L13.5528.7565c-.207-.4382-.639-.7273-1.1286-.7541-.5023-.0293-.9523.213-1.2062.6253L2.266 15.1271c-.2773.4518-.2718 1.0091.0158 1.4555l4.3759 6.7786c.2608.4046.7127.6388 1.1823.6388.1332 0 .267-.0188.3987-.0577l12.7019-3.7568c.3891-.1151.7072-.3904.8737-.7553s.1633-.7828-.0075-1.1454zm-1.8481.7519L9.1814 22.2242c-.3292.0975-.6448-.1873-.5756-.5194l3.8501-18.4386c.072-.3448.5486-.3996.699-.0803l7.1288 15.138c.1344.2856-.019.6224-.325.7128z"
></path>
</svg>
<Fragment slot="description">
Prisma is the best way to work with databases in TypeScript. It
provides a simple, type-safe API to query your database, and it can
be used with most SQL dialects (and Mongo too!).
</Fragment>
</Feature>
<Feature title="TypeScript" href="https://www.typescriptlang.org/">
<svg
slot="icon"
version="1.1"
viewBox="0 0 512 512"
class="h-10 aspect-square py-1"
xmlns="http://www.w3.org/2000/svg"
>
<title>TypeScript</title>
<rect width="512" height="512" rx="50" fill="#3178c6"></rect>
<path
d="m317 407v50c8.1 4.2 18 7.3 29 9.4s23 3.1 35 3.1c12 0 23-1.1 34-3.4 11-2.3 20-6.1 28-11 8.1-5.3 15-12 19-21s7.1-19 7.1-32c0-9.1-1.4-17-4.1-24s-6.6-13-12-18c-5.1-5.3-11-10-18-14s-15-8.2-24-12c-6.6-2.7-12-5.3-18-7.9-5.2-2.6-9.7-5.2-13-7.8-3.7-2.7-6.5-5.5-8.5-8.4-2-3-3-6.3-3-10 0-3.4 0.89-6.5 2.7-9.3s4.3-5.1 7.5-7.1c3.2-2 7.2-3.5 12-4.6 4.7-1.1 9.9-1.6 16-1.6 4.2 0 8.6 0.31 13 0.94 4.6 0.63 9.3 1.6 14 2.9 4.7 1.3 9.3 2.9 14 4.9 4.4 2 8.5 4.3 12 6.9v-47c-7.6-2.9-16-5.1-25-6.5s-19-2.1-31-2.1c-12 0-23 1.3-34 3.8s-20 6.5-28 12c-8.1 5.4-14 12-19 21-4.7 8.4-7 18-7 30 0 15 4.3 28 13 38 8.6 11 22 19 39 27 6.9 2.8 13 5.6 19 8.3s11 5.5 15 8.4c4.3 2.9 7.7 6.1 10 9.5 2.5 3.4 3.8 7.4 3.8 12 0 3.2-0.78 6.2-2.3 9s-3.9 5.2-7.1 7.2-7.1 3.6-12 4.8c-4.7 1.1-10 1.7-17 1.7-11 0-22-1.9-32-5.7-11-3.8-21-9.5-30-17zm-84-123h64v-41h-179v41h64v183h51z"
clip-rule="evenodd"
fill="#fff"
fill-rule="evenodd"
style="fill:#fff"></path>
</svg>
<Fragment slot="description">
We firmly believe TypeScript will help you be a better web
developer. Whether you're new to JS or a seasoned pro, the
"strictness" of TypeScript leads to smoother building.
</Fragment>
</Feature>
<Feature title="Tailwind CSS" href="https://tailwindcss.com/">
<svg
slot="icon"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="h-10 aspect-square fill-[#06B6D4] py-1"
>
<title>Tailwind CSS</title>
<path
d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
></path>
</svg>
<Fragment slot="description">
Tailwind CSS is a utility-first CSS framework that helps you build
beautiful, responsive designs without any extra configuration. It’s
built with utility-first principles, and is completely customizable
and extendable.
</Fragment>
</Feature>
<Feature title="tRPC" href="https://trpc.io/">
<svg
slot="icon"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
class="h-10 aspect-square fill-[#398CCB] py-1"
>
<rect width="512" height="512" rx="150" fill="#398CCB"></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z"
fill="white"></path>
</svg>
<Fragment slot="description">
If your frontend and backend are TypeScript, it's really hard to
beat the DX of tRPC. Kinda like GraphQL but without the work -
seriously this lib is magic.
</Fragment>
</Feature>
<Feature title="NextAuth.js" href="https://next-auth.js.org/">
<img
src="/images/nextauth.webp"
slot="icon"
height={40}
width={32}
alt="NextAuth.js"
/>
<Fragment slot="description">
When you need flexible, secure, and scalable auth, NextAuth.js is
top notch. It ties into your existing database and provides a simple
API to manage users and sessions.
</Fragment>
</Feature>
</div>
</div>
</div>
</PageSection>