Skip to content

Commit a1938ba

Browse files
justin-schroederjustin-schroeder
committed
feat: adds footer
1 parent d4e4997 commit a1938ba

File tree

3 files changed

+136
-5
lines changed

3 files changed

+136
-5
lines changed

Diff for: ‎docs/components/TheFooter.vue

+132-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,136 @@
11
<script lang="ts" setup></script>
22

33
<template>
4-
<footer>The footer should go here...</footer>
4+
<footer class="bg-footer py-8">
5+
<div class="w-[calc(100%-4em)] max-w-3xl mx-auto my-16">
6+
<div class="sm:flex items-start justify-between">
7+
<div class="mb-8">
8+
<ClockFont
9+
chars="tempo"
10+
:start="true"
11+
:delay="0"
12+
class="text-sky-500 text-3xl mb-4"
13+
/>
14+
<NuxtLink
15+
to="https://formkit.com"
16+
class="head-message text-sm grayscale flex text-stone-400 hover:text-stone-800 transition-all hover:grayscale-0"
17+
>
18+
<LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by the
19+
FormKit team.
20+
</NuxtLink>
21+
</div>
22+
<div>
23+
<h4 class="font-bold mb-4 text-stone-700">Our Projects</h4>
24+
<ul class="text-stone-600 mb-8 sm:mr-20">
25+
<li class="mb-2">
26+
<a
27+
href="https://formkit.com"
28+
class="border-b-2 border-stone-300 hover:border-stone-500"
29+
>FormKit</a
30+
>
31+
</li>
32+
<li class="mb-2">
33+
<a
34+
href="https://auto-animate.formkit.com"
35+
class="border-b-2 border-stone-300 hover:border-stone-500"
36+
>AutoAnimate</a
37+
>
38+
</li>
39+
<li class="mb-2">
40+
<a
41+
href="https://arrowjs.com"
42+
class="border-b-2 border-stone-300 hover:border-stone-500"
43+
>ArrowJS</a
44+
>
45+
</li>
46+
</ul>
47+
</div>
48+
<div class="">
49+
<h4 class="font-bold mb-4 text-stone-700">Connect</h4>
50+
<ul class="socials mb-4 text-stone-400">
51+
<li class="mb-2">
52+
<a
53+
href="https://x.com/formkit"
54+
class="hover:text-stone-500 flex items-center gap-2"
55+
>
56+
<svg
57+
width="1200"
58+
height="1227"
59+
viewBox="0 0 1200 1227"
60+
fill="currentColor"
61+
class="h-5 w-auto"
62+
xmlns="http://www.w3.org/2000/svg"
63+
>
64+
<path
65+
d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
66+
/>
67+
</svg>
68+
@FormKit
69+
</a>
70+
</li>
71+
72+
<li class="mb-2">
73+
<a
74+
href="https://discord.gg/Vhu97pAC76"
75+
class="hover:text-stone-500 flex items-center gap-2"
76+
>
77+
<svg
78+
xmlns="http://www.w3.org/2000/svg"
79+
viewBox="0 0 127.14 96.36"
80+
fill="currentColor"
81+
class="h-4 w-auto"
82+
>
83+
<path
84+
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
85+
/>
86+
</svg>
87+
Discord
88+
</a>
89+
</li>
90+
<li class="mb-2">
91+
<a
92+
href="https://www.youtube.com/formkit"
93+
class="hover:text-stone-500 flex items-center gap-2"
94+
>
95+
<svg
96+
xmlns="http://www.w3.org/2000/svg"
97+
viewBox="0 0 576 512"
98+
class="h-5 w-auto"
99+
fill="currentColor"
100+
>
101+
<path
102+
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
103+
></path>
104+
</svg>
105+
YouTube
106+
</a>
107+
</li>
108+
<li class="mb-2">
109+
<a
110+
href="https://github.com/formkit/tempo"
111+
class="hover:text-stone-500 flex items-center gap-2"
112+
>
113+
<svg
114+
xmlns="http://www.w3.org/2000/svg"
115+
viewBox="0 0 496 512"
116+
class="h-5 w-auto"
117+
fill="currentColor"
118+
>
119+
<path
120+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
121+
></path>
122+
</svg>
123+
GitHub
124+
</a>
125+
</li>
126+
</ul>
127+
</div>
128+
</div>
129+
130+
<span class="text-stone-400 block mt-4 text-sm">
131+
Released under the MIT License. &copy;
132+
{{ new Date().getFullYear() }} FormKit. All rights reserved.
133+
</span>
134+
</div>
135+
</footer>
5136
</template>

Diff for: ‎docs/components/TheLogo.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
const uuid = Math.floor(100000 + Math.random() * 900000)
2+
const uuid = useId()
33
</script>
44

55
<template>
@@ -21,14 +21,13 @@ const uuid = Math.floor(100000 + Math.random() * 900000)
2121
<stop stop-color="#F7CE68" offset="100%" />
2222
</linearGradient>
2323
</defs>
24-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
24+
<g stroke="none" stroke-width="1">
2525
<g transform="translate(-49.000000, -47.000000)">
2626
<g transform="translate(49.000000, 47.000000)">
2727
<path
2828
class="word-mark"
2929
d="M30.730531,21.01824 L30.730531,12.5312 L38.790371,12.5312 L38.790371,9.85408 L30.730531,9.85408 L30.730531,3.78784 L39.473891,3.78784 L39.473891,1.08224 L27.654691,1.08224 L27.654691,21.01824 L30.730531,21.01824 Z M48.2635914,21.38848 C52.8203914,21.38848 56.1240714,18.02784 56.1240714,13.58496 C56.1240714,9.14208 52.8773514,5.75296 48.2920714,5.75296 C43.7067914,5.75296 40.4031114,9.1136 40.4031114,13.58496 C40.4031114,18.05632 43.6783114,21.38848 48.2635914,21.38848 Z M48.2635914,18.68288 C45.4725514,18.68288 43.4504714,16.54688 43.4504714,13.58496 C43.4504714,10.65152 45.4440714,8.48704 48.2635914,8.48704 C51.0831114,8.48704 53.0767114,10.62304 53.0767114,13.58496 C53.0767114,16.5184 51.0831114,18.68288 48.2635914,18.68288 Z M61.5246517,21.01824 L61.5246517,13.6704 C61.5246517,10.90784 62.9771317,8.99968 65.5118517,8.99968 L66.9073717,8.99968 L66.9073717,6.09472 L65.5972917,6.09472 C63.4897717,6.09472 62.0657717,7.51872 61.6100917,8.71488 L61.4107317,8.71488 L61.4107317,6.1232 L58.5342517,6.1232 L58.5342517,21.01824 L61.5246517,21.01824 Z M72.1370721,21.01824 L72.1370721,12.2464 C72.1370721,10.05344 73.6180321,8.544 75.4977121,8.544 C77.3773921,8.544 78.7159521,9.85408 78.7159521,11.93312 L78.7159521,21.01824 L81.7063521,21.01824 L81.7063521,12.33184 C81.7063521,9.93952 83.2157921,8.544 85.0954721,8.544 C87.0605921,8.544 88.2282721,9.85408 88.2282721,12.27488 L88.2282721,21.01824 L91.2186721,21.01824 L91.2186721,11.2496 C91.2186721,8.03136 89.0541921,5.75296 85.7789921,5.75296 C83.7569121,5.75296 82.1905121,6.49344 81.1937121,8.2592 L80.9943521,8.2592 C80.1399521,6.74976 78.5735521,5.75296 76.4375521,5.75296 C74.3015521,5.75296 72.9060321,6.8352 72.2509921,8.08832 L72.0516321,8.08832 L72.0516321,6.1232 L69.1466721,6.1232 L69.1466721,21.01824 L72.1370721,21.01824 Z M97.5875724,21.01824 L97.5875724,14.6672 L100.093812,11.73376 L105.789812,21.01824 L109.463732,21.01824 L102.144372,9.31296 L109.178932,1.08224 L105.391092,1.08224 L97.7584524,10.28128 L97.5875724,10.28128 L97.5875724,1.08224 L94.5117324,1.08224 L94.5117324,21.01824 L97.5875724,21.01824 Z M112.671353,3.78784 C113.839033,3.78784 114.664953,3.01888 114.664953,1.87968 C114.664953,0.79744 113.839033,-2.84217094e-14 112.671353,-2.84217094e-14 C111.532153,-2.84217094e-14 110.706233,0.79744 110.706233,1.87968 C110.706233,3.01888 111.532153,3.78784 112.671353,3.78784 Z M114.152313,21.01824 L114.152313,6.1232 L111.161913,6.1232 L111.161913,21.01824 L114.152313,21.01824 Z M125.875453,21.01824 L125.875453,18.48352 L123.853373,18.48352 C122.286973,18.48352 121.688893,17.62912 121.688893,16.20512 L121.688893,8.57248 L126.017853,8.57248 L126.017853,6.1232 L121.688893,6.1232 L121.688893,1.90816 L118.869373,1.90816 L118.869373,5.18336 C118.869373,5.78144 118.499133,6.15168 117.986493,6.15168 L116.021373,6.15168 L116.021373,8.57248 L118.698493,8.57248 L118.698493,16.29056 C118.698493,19.39488 120.464253,21.01824 123.397693,21.01824 L125.875453,21.01824 Z"
30-
fill="#111111"
31-
fill-rule="nonzero"
30+
fill="currentColor"
3231
/>
3332
<path
3433
d="M24,21.01824 L24,25.01824 L12,25.01824 L12,21.01824 L24,21.01824 Z M4,17.01824 L4,21.01824 L0,21.01824 L0,17.01824 L4,17.01824 Z M8,13.01824 L8,17.01824 L4,17.01824 L4,13.01824 L8,13.01824 Z M12,9.01824 L12,13.01824 L8,13.01824 L8,9.01824 L12,9.01824 Z M8,5.01824 L8,9.01824 L4,9.01824 L4,5.01824 L8,5.01824 Z M4,1.01824 L4,5.01824 L0,5.01824 L0,1.01824 L4,1.01824 Z"

Diff for: ‎docs/tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
extend: {
1313
colors: {
1414
body: "#efefef",
15+
footer: "#e2e2e2",
1516
lcd: "#e1eaee",
1617
},
1718
screens: {

0 commit comments

Comments
 (0)