Skip to content

Commit

Permalink
docs: improve landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@atinux
atinux committed Aug 20, 2024
1 parent ab4a627 commit a777038
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 458 deletions.
8 changes: 4 additions & 4 deletions docs/components/AppHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,16 @@ const navLinks = links.map((link) => {
<UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
<UContentSearchButton :label="null" />
</UTooltip>
<UButton variant="ghost" label="Log in" to="https://admin.hub.nuxt.com/" color="black" size="md" class="hidden sm:block" external />
<UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" size="md" class="hidden sm:block" external />
<UButton variant="ghost" label="Log in" to="https://admin.hub.nuxt.com/" color="black" class="hidden sm:block" external />
<UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" class="hidden sm:block" external />
</template>

<template #panel>
<UNavigationTree :links="navLinks" :default-open="1" :multiple="false" :ui="{ accordion: { button: { label: 'font-normal' } } }" />

<div class="flex flex-col gap-y-2 mt-4">
<UButton variant="solid" label="Log in" to="https://admin.hub.nuxt.com/" color="white" size="md" class="flex justify-center sm:hidden" external />
<UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" size="md" class="flex justify-center text-gray-900 bg-primary sm:hidden" external />
<UButton variant="solid" label="Log in" to="https://admin.hub.nuxt.com/" color="white" class="flex justify-center sm:hidden" external />
<UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" class="flex justify-center text-gray-900 bg-primary sm:hidden" external />
</div>
</template>
</UHeader>
Expand Down
134 changes: 0 additions & 134 deletions docs/components/HeroDark.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
<script setup lang="ts">
const timeoutIds = ref([])
const outline = ref<SVGPathElement>()
const lines = ref<SVGPathElement>()
const topLight = ref<SVGElement>()
const bottomLight = ref<SVGElement>()
const logo = ref<SVGElement>()
onMounted(() => {
const timeoutIdA = setTimeout(() => {
outline.value.classList.add('animate-border')
lines.value.classList.add('opacity-0')
topLight.value.classList.add('opacity-0')
bottomLight.value.classList.add('opacity-0')
logo.value.classList.remove('opacity-0')
logo.value.classList.add('opacity-1')
const timeoutIdB = setTimeout(() => {
lines.value.classList.add('animate-lines')
lines.value.classList.remove('opacity-0')
lines.value.classList.add('opacity-1')
const timeoutIdC = setTimeout(() => {
topLight.value.classList.add('animate-light')
bottomLight.value.classList.add('animate-light')
}, 500)
timeoutIds.value.push(timeoutIdC)
}, 1000)
timeoutIds.value.push(timeoutIdB)
}, 300)
timeoutIds.value.push(timeoutIdA)
})
onBeforeUnmount(() => {
timeoutIds.value.map(id => clearTimeout(id))
})
</script>

<template>
<svg viewBox="0 0 1439 872" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_414_4477)">
Expand Down Expand Up @@ -182,60 +144,6 @@ onBeforeUnmount(() => {
<circle cx="691" cy="418" r="2" fill="url(#paint219_radial_414_4477)" />
<circle cx="726" cy="393" r="2" fill="url(#paint220_radial_414_4477)" />
</g>
<g ref="logo" class="opacity-0 hidden lg:block">

<rect x="1031" y="185" width="370" height="370" fill="url(#paint221_radial_414_4477)" fill-opacity="0.7" />
<mask
id="mask0_414_4477" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1089" y="286" width="254"
height="169"
>
<path
ref="outline"
d="M1231.33 448.196H1320.66C1323.5 448.196 1326.3 447.476 1328.77 446.107C1331.24 444.739 1333.28 442.771 1334.71 440.401C1336.13 438.03 1336.88 435.342 1336.88 432.605C1336.88 429.869 1336.13 427.181 1334.7 424.812L1274.48 324.594C1273.05 322.224 1271 320.257 1268.54 318.888C1266.07 317.52 1263.27 316.8 1260.43 316.8C1257.58 316.8 1254.78 317.52 1252.31 318.888C1249.85 320.257 1247.8 322.224 1246.38 324.594L1230.98 350.236L1200.87 300.094C1199.44 297.724 1197.4 295.757 1194.93 294.389C1192.46 293.021 1189.66 292.301 1186.82 292.301C1183.97 292.301 1181.17 293.021 1178.7 294.389C1176.24 295.757 1174.19 297.724 1172.76 300.094L1097.82 424.812C1096.39 427.181 1095.64 429.869 1095.64 432.605C1095.64 435.342 1096.39 438.03 1097.81 440.401C1099.23 442.771 1101.28 444.739 1103.75 446.107C1106.22 447.476 1109.01 448.196 1111.86 448.196H1168.16C1190.46 448.196 1206.91 438.783 1218.23 420.421L1245.7 374.703L1260.42 350.236L1304.59 423.729H1245.7L1231.33 448.196ZM1167.24 423.704L1127.95 423.695L1186.84 325.711L1216.22 374.703L1196.55 407.449C1189.04 419.363 1180.5 423.704 1167.24 423.704Z"
stroke="url(#paint222_linear_414_4477)" stroke-width="12"
/>
</mask>
<g mask="url(#mask0_414_4477)">
<path
d="M1231.33 448.196H1320.66C1323.5 448.196 1326.3 447.476 1328.77 446.107C1331.24 444.739 1333.28 442.771 1334.71 440.401C1336.13 438.03 1336.88 435.342 1336.88 432.605C1336.88 429.869 1336.13 427.181 1334.7 424.812L1274.48 324.594C1273.05 322.224 1271 320.257 1268.54 318.888C1266.07 317.52 1263.27 316.8 1260.43 316.8C1257.58 316.8 1254.78 317.52 1252.31 318.888C1249.85 320.257 1247.8 322.224 1246.38 324.594L1230.98 350.236L1200.87 300.094C1199.44 297.724 1197.4 295.757 1194.93 294.389C1192.46 293.021 1189.66 292.301 1186.82 292.301C1183.97 292.301 1181.17 293.021 1178.7 294.389C1176.24 295.757 1174.19 297.724 1172.76 300.094L1097.82 424.812C1096.39 427.181 1095.64 429.869 1095.64 432.605C1095.64 435.342 1096.39 438.03 1097.81 440.401C1099.23 442.771 1101.28 444.739 1103.75 446.107C1106.22 447.476 1109.01 448.196 1111.86 448.196H1168.16C1190.46 448.196 1206.91 438.783 1218.23 420.421L1245.7 374.703L1260.42 350.236L1304.59 423.729H1245.7L1231.33 448.196ZM1167.24 423.704L1127.95 423.695L1186.84 325.711L1216.22 374.703L1196.55 407.449C1189.04 419.363 1180.5 423.704 1167.24 423.704Z"
fill="url(#paint223_linear_414_4477)"
/>
</g>
<path
ref="lines"
d="M1260.5 346.5L1286.77 351.512L1299.84 372.963L1312.55 395.198L1309 427M1260.5 346.5L1243.05 337.633L1231.55 356.005M1260.5 346.5L1263.25 317.83M1309 427H1332.5M1309 427L1276 444.279L1246.08 428.167M1100.07 440.306L1122.96 425.886M1122.96 425.886V389.284L1138.87 361.57L1157.59 332.479L1186.39 317.868M1122.96 425.886L1145.18 445.019H1165.67C1165.67 445.019 1169.82 445.118 1176 444.5C1186 443.5 1198.5 436.5 1198.5 436.5V412.005L1221.56 407.083L1220.12 374.31L1231.55 356.005M1186.39 317.868L1174.03 300.836M1186.39 317.868L1202.07 309.277L1213.28 326.879L1231.55 356.005"
stroke="url(#paint224_linear_414_4477)" stroke-width="6"
/>

<g ref="topLight">
<g filter="url(#filter2_f_414_4477)">
<path
d="M1216.8 416C1201.41 446.111 1177.72 445.166 1166.9 444.942L1194.05 436.743L1216.8 416Z"
fill="#75EDAE"
/>
</g>
<g filter="url(#filter3_f_414_4477)">
<path
d="M1216.8 416C1201.41 446.111 1176.82 445.166 1166 444.942L1194.05 436.743L1216.8 416Z"
fill="#75EDAE"
/>
</g>
</g>
<g ref="bottomLight">
<g filter="url(#filter4_f_414_4477)">
<path
d="M1239.1 339.851C1247.47 313.465 1273.21 316.039 1276.75 331.484L1258.41 320.866L1239.1 339.851Z"
fill="#75EDAE"
/>
</g>
<g filter="url(#filter5_f_414_4477)">
<path
d="M1239.1 337.275C1247.47 310.89 1274.82 314.43 1278.36 333.415L1258.73 320.221L1239.1 337.275Z"
fill="#75EDAE"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
Expand Down Expand Up @@ -1921,45 +1829,3 @@ onBeforeUnmount(() => {
</defs>
</svg>
</template>

<style lang="postcss">
@keyframes animateBorderHeight {
0% {
stroke-width: 0;
}
100% {
stroke-width: 12.4079;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-lines {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: dash 5s linear forwards;
}
.animate-border {
animation: animateBorderHeight 1s ease forwards;
}
.animate-light {
animation: opacity 2s ease forwards;
}
</style>
80 changes: 0 additions & 80 deletions docs/components/HeroLight.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,3 @@
<script setup lang="ts">
const timeoutIds = ref([])
const outline = ref<SVGPathElement>()
const lines = ref<SVGPathElement>()
const logo = ref<SVGElement>()
onMounted(() => {
const timeoutIdA = setTimeout(() => {
outline.value.classList.add('animate-border')
lines.value.classList.add('opacity-0')
logo.value.classList.remove('opacity-0')
logo.value.classList.add('opacity-1')
const timeoutIdB = setTimeout(() => {
lines.value.classList.add('animate-lines')
lines.value.classList.remove('opacity-0')
lines.value.classList.add('opacity-1')
}, 1000)
timeoutIds.value.push(timeoutIdB)
}, 200)
timeoutIds.value.push(timeoutIdA)
})
onBeforeUnmount(() => {
timeoutIds.value.map(id => clearTimeout(id))
})
</script>

<template>
<svg viewBox="0 0 1439 872" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_414_4971)">
Expand Down Expand Up @@ -170,30 +142,6 @@ onBeforeUnmount(() => {
<circle cx="800" cy="376" r="2" fill="url(#paint218_radial_414_4971)" />
<circle cx="691" cy="418" r="2" fill="url(#paint219_radial_414_4971)" />
<circle cx="726" cy="393" r="2" fill="url(#paint220_radial_414_4971)" />
<g ref="logo" class="hidden lg:block opacity-0">
<rect opacity="0.8" x="1031" y="185" width="370" height="370" fill="url(#paint221_radial_414_4971)" />
<mask
id="mask0_414_4971" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1089" y="286" width="254"
height="169"
>
<path
ref="outline"
d="M1231.33 448.196H1320.66C1323.5 448.196 1326.3 447.476 1328.77 446.107C1331.24 444.739 1333.28 442.771 1334.71 440.401C1336.13 438.03 1336.88 435.342 1336.88 432.605C1336.88 429.869 1336.13 427.181 1334.7 424.812L1274.48 324.594C1273.05 322.224 1271 320.257 1268.54 318.888C1266.07 317.52 1263.27 316.8 1260.43 316.8C1257.58 316.8 1254.78 317.52 1252.31 318.888C1249.85 320.257 1247.8 322.224 1246.38 324.594L1230.98 350.236L1200.87 300.094C1199.44 297.724 1197.4 295.757 1194.93 294.389C1192.46 293.021 1189.66 292.301 1186.82 292.301C1183.97 292.301 1181.17 293.021 1178.7 294.389C1176.24 295.757 1174.19 297.724 1172.76 300.094L1097.82 424.812C1096.39 427.181 1095.64 429.869 1095.64 432.605C1095.64 435.342 1096.39 438.03 1097.81 440.401C1099.23 442.771 1101.28 444.739 1103.75 446.107C1106.22 447.476 1109.01 448.196 1111.86 448.196H1168.16C1190.46 448.196 1206.91 438.783 1218.23 420.421L1245.7 374.703L1260.42 350.236L1304.59 423.729H1245.7L1231.33 448.196ZM1167.24 423.704L1127.95 423.695L1186.84 325.711L1216.22 374.703L1196.55 407.449C1189.04 419.363 1180.5 423.704 1167.24 423.704Z"
stroke="url(#paint222_linear_414_4971)" stroke-width="12"
/>
</mask>
<g mask="url(#mask0_414_4971)">
<path
d="M1231.33 448.196H1320.66C1323.5 448.196 1326.3 447.476 1328.77 446.107C1331.24 444.739 1333.28 442.771 1334.71 440.401C1336.13 438.03 1336.88 435.342 1336.88 432.605C1336.88 429.869 1336.13 427.181 1334.7 424.812L1274.48 324.594C1273.05 322.224 1271 320.257 1268.54 318.888C1266.07 317.52 1263.27 316.8 1260.43 316.8C1257.58 316.8 1254.78 317.52 1252.31 318.888C1249.85 320.257 1247.8 322.224 1246.38 324.594L1230.98 350.236L1200.87 300.094C1199.44 297.724 1197.4 295.757 1194.93 294.389C1192.46 293.021 1189.66 292.301 1186.82 292.301C1183.97 292.301 1181.17 293.021 1178.7 294.389C1176.24 295.757 1174.19 297.724 1172.76 300.094L1097.82 424.812C1096.39 427.181 1095.64 429.869 1095.64 432.605C1095.64 435.342 1096.39 438.03 1097.81 440.401C1099.23 442.771 1101.28 444.739 1103.75 446.107C1106.22 447.476 1109.01 448.196 1111.86 448.196H1168.16C1190.46 448.196 1206.91 438.783 1218.23 420.421L1245.7 374.703L1260.42 350.236L1304.59 423.729H1245.7L1231.33 448.196ZM1167.24 423.704L1127.95 423.695L1186.84 325.711L1216.22 374.703L1196.55 407.449C1189.04 419.363 1180.5 423.704 1167.24 423.704Z"
fill="url(#paint223_linear_414_4971)"
/>
</g>
<path
ref="lines"
d="M1260.5 346.5L1286.77 351.512L1299.84 372.963L1312.55 395.198L1308.5 427M1260.5 346.5L1243.05 337.633L1231.55 356.005M1260.5 346.5L1263.25 317.83M1308.5 427H1332.5M1308.5 427L1276 444.279L1246.08 428.167M1100.07 440.306L1122.96 425.886M1122.96 425.886V389.284L1138.87 361.57L1157.59 332.479L1186.39 317.868M1122.96 425.886L1145.18 445.019H1165.67C1165.67 445.019 1169.82 445.118 1176 444.5C1186 443.5 1198.5 436.5 1198.5 436.5V412.005L1221.56 407.083L1220.12 374.31L1231.55 356.005M1186.39 317.868L1174.03 300.836M1186.39 317.868L1202.07 309.277L1213.28 326.879L1231.55 356.005"
stroke="url(#paint224_linear_414_4971)" stroke-width="6"
/>
</g>
</g>
<defs>
<filter
Expand Down Expand Up @@ -1847,31 +1795,3 @@ onBeforeUnmount(() => {
</defs>
</svg>
</template>

<style lang="postcss">
@keyframes animateBorderHeight {
0% {
stroke-width: 0;
}
100% {
stroke-width: 12.4079;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.animate-lines {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: dash 5s linear forwards;
}
.animate-border {
animation: animateBorderHeight 1s ease forwards;
}
</style>
Loading

0 comments on commit a777038

Please sign in to comment.