Skip to content

Commit b94d200

Browse files
prplwtfprplwtf
authored
Merge pull request #3 from BlueprintFramework/redesign-footer
Redesign footer
2 parents 8924529 + 24c58b0 commit b94d200

File tree

6 files changed

+160
-21
lines changed

6 files changed

+160
-21
lines changed

‎apps/frontend/public/img/bluething.jpeg‎

1.5 MB
Loading

‎apps/frontend/src/components/elements/Accordion.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@click="toggleAccordion(index)"
1111
@mousedown.prevent
1212
>
13-
<h2>
13+
<h2 class="text-start">
1414
{{ item.title }}
1515
</h2>
1616
<client-only>

‎apps/frontend/src/components/ui/footer/Container.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div class="bg-stripes border-t border-neutral-700">
3+
<div class="container">
4+
<div class="border-x border-neutral-700 bg-neutral-950">
5+
<div class="border-b border-neutral-700 p-6">
6+
<UiFooterHeader />
7+
</div>
8+
<UiFooter />
9+
</div>
10+
</div>
11+
</div>
12+
</template>

‎apps/frontend/src/components/ui/Footer.vue‎ renamed to ‎apps/frontend/src/components/ui/footer/Header.vue‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<template>
2-
<div
3-
:class="props.class"
4-
class="flex items-center justify-between pb-[var(--extend-footer)] text-neutral-500"
5-
>
6-
<div class="flex gap-3">
7-
<BrandEmblem />
2+
<div class="flex items-center justify-between">
3+
<div class="flex items-center gap-2.5">
4+
<BrandEmblem class="text-brand-50" />
85
<div class="flex items-center gap-1">
96
<Icon name="memory:alpha-c" />
107
<span>
@@ -18,17 +15,8 @@
1815
</span>
1916
</div>
2017
</div>
21-
<span class="hidden text-lg md:inline">
18+
<span class="hidden text-lg lg:inline">
2219
The modding platform for Pterodactyl
2320
</span>
2421
</div>
2522
</template>
26-
27-
<script setup lang="ts">
28-
const props = defineProps({
29-
class: {
30-
type: String,
31-
required: false,
32-
},
33-
})
34-
</script>

‎apps/frontend/src/components/ui/footer/index.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<div
3+
class="flex flex-col divide-neutral-700 max-lg:divide-y lg:flex-row lg:divide-x"
4+
>
5+
<div
6+
class="grid grid-cols-1 gap-6 p-6 max-lg:w-full sm:grid-cols-2 lg:w-[500px] lg:grid-cols-1 lg:grid-rows-2"
7+
>
8+
<NuxtLink
9+
to="/guides/admin/install"
10+
class="group relative block h-full cursor-pointer overflow-hidden rounded-2xl border border-neutral-700 outline-0 transition-colors hover:border-neutral-500 focus:border-neutral-500"
11+
@mousedown.prevent
12+
>
13+
<NuxtImg
14+
src="/img/bluething.jpeg"
15+
:width="200"
16+
:height="50"
17+
class="h-full w-full object-cover transition-all group-hover:scale-105 group-hover:opacity-75 group-focus:scale-105 group-focus:opacity-75"
18+
/>
19+
<div
20+
class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 transform"
21+
>
22+
<div class="flex flex-col items-center">
23+
<div class="flex items-center gap-1">
24+
<span
25+
class="group-hover:text-brand-50 group-focus:text-brand-50 text-xl font-bold transition-colors"
26+
>Install Blueprint</span
27+
>
28+
<Icon
29+
name="memory:chevron-right"
30+
class="group-hover:text-brand-50 group-focus:text-brand-50 transition-colors"
31+
:size="24"
32+
/>
33+
</div>
34+
</div>
35+
</div>
36+
</NuxtLink>
37+
38+
<NuxtLink
39+
to="/releases"
40+
class="group relative block h-full w-full cursor-pointer overflow-hidden rounded-2xl border border-neutral-700 outline-0 transition-colors hover:border-neutral-500 focus:border-neutral-500"
41+
@mousedown.prevent
42+
>
43+
<NuxtImg
44+
src="/img/releases/latest.png"
45+
:width="200"
46+
:height="50"
47+
class="h-full w-full object-cover transition-all group-hover:scale-105 group-hover:opacity-75 group-focus:scale-105 group-focus:opacity-75"
48+
/>
49+
<div
50+
class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 transform"
51+
>
52+
<div class="flex flex-col items-center">
53+
<div class="flex items-center gap-1">
54+
<span
55+
class="group-hover:text-brand-50 group-focus:text-brand-50 text-xl font-bold transition-colors"
56+
>Release notes</span
57+
>
58+
<Icon
59+
name="memory:chevron-right"
60+
class="group-hover:text-brand-50 group-focus:text-brand-50 transition-colors"
61+
:size="24"
62+
/>
63+
</div>
64+
</div>
65+
</div>
66+
</NuxtLink>
67+
</div>
68+
<div
69+
class="grid w-full grid-cols-1 gap-4 p-6 sm:grid-cols-2 md:grid-cols-4"
70+
>
71+
<div class="flex flex-col gap-1 text-neutral-400 decoration-transparent">
72+
<p class="text-default-font mb-2 text-xl font-bold">Blueprint</p>
73+
<NuxtLink to="/browse" class="text-link"> Extensions </NuxtLink>
74+
<NuxtLink to="/guides" class="text-link"> Guides </NuxtLink>
75+
<NuxtLink to="/guides" class="text-link"> Documentation </NuxtLink>
76+
<NuxtLink to="/releases" class="text-link"> Releases </NuxtLink>
77+
<NuxtLink to="/api" :external="true" class="text-link">
78+
API docs
79+
</NuxtLink>
80+
</div>
81+
82+
<div class="flex flex-col gap-1 text-neutral-400 decoration-transparent">
83+
<p class="text-default-font mb-2 text-xl font-bold">Donate</p>
84+
<NuxtLink
85+
to="https://hcb.hackclub.com/donations/start/blueprint"
86+
class="text-link"
87+
>
88+
Donate via HCB
89+
</NuxtLink>
90+
<NuxtLink to="https://github.com/sponsors/blueprint" class="text-link">
91+
Donate via GitHub Sponsors
92+
</NuxtLink>
93+
<NuxtLink to="https://hcb.hackclub.com/blueprint" class="text-link">
94+
Transparent finances
95+
</NuxtLink>
96+
</div>
97+
98+
<div class="flex flex-col gap-1 text-neutral-400 decoration-transparent">
99+
<p class="text-default-font mb-2 text-xl font-bold">Agreements</p>
100+
<NuxtLink to="/legal/terms" class="text-link">
101+
Terms of Service
102+
</NuxtLink>
103+
<NuxtLink to="/legal/privacy" class="text-link">
104+
Privacy Policy
105+
</NuxtLink>
106+
<NuxtLink to="/legal/conduct" class="text-link">
107+
Code of Conduct
108+
</NuxtLink>
109+
</div>
110+
111+
<div class="flex flex-col gap-1 text-neutral-400 decoration-transparent">
112+
<p class="text-default-font mb-2 text-xl font-bold">Social</p>
113+
<NuxtLink
114+
to="https://discord.com/servers/blueprint-1063548024825057451"
115+
class="text-link"
116+
>
117+
Discord community
118+
</NuxtLink>
119+
<NuxtLink to="https://bsky.app/profile/blueprint.zip" class="text-link">
120+
Bluesky profile
121+
</NuxtLink>
122+
<NuxtLink to="https://github.com/blueprintframework" class="text-link">
123+
GitHub organization
124+
</NuxtLink>
125+
</div>
126+
</div>
127+
</div>
128+
</template>
129+
130+
<script setup lang="ts">
131+
const props = defineProps({
132+
class: {
133+
type: String,
134+
required: false,
135+
},
136+
})
137+
</script>

‎apps/frontend/src/layouts/default.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<template>
2-
<UiNavigation />
3-
<div class="container space-y-12 py-12">
4-
<slot />
5-
<UiFooter />
2+
<div class="flex min-h-screen flex-col">
3+
<UiNavigation />
4+
<div class="container flex-grow space-y-12 py-12">
5+
<slot />
6+
</div>
7+
<UiFooterContainer />
68
</div>
79
</template>
810

0 commit comments

Comments
 (0)