Skip to content

Commit 4ae4ce6

Browse files
DaeunYoonvaliafetisovLukSteib
authored
feat: Improve landing page (#626)
Co-authored-by: Valia Fetisov <contact@valiafetisov.com> Co-authored-by: Luciando <36229155+LukSteib@users.noreply.github.com>
1 parent b8203a8 commit 4ae4ce6

15 files changed

+286
-149
lines changed

‎.dockerignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ kubernetes
33
reverse-proxy
44
.drone.yml
55
screenshot.jpg
6+
screenshot.png
67
**/Dockerfile
78
**/.env
89

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
![Screenshot of the application](./screenshot.jpg)
1+
![Screenshot of the application](./screenshot.png)
22

33
# Unified Auctions UI
44

‎frontend/assets/styles/ant-design.less

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@modal-body-padding: 0px;
66
@dropdown-selected-color: @text-color;
77
@border-width-base: 2px;
8+
@body-background: #eee;
89

910
.anticon {
1011
vertical-align: 0.125em !important;

‎frontend/components/common/inputs/BaseButton.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,11 @@ export default Vue.extend({
7575
@apply inline-flex items-center p-0 h-auto leading-4;
7676
}
7777
78-
.Link span {
78+
.Link >>> span {
7979
@apply text-primary underline overflow-auto transition-colors;
8080
}
8181
82-
.Link:hover span {
82+
.Link:hover >>> span {
8383
@apply text-primary-light no-underline;
8484
}
8585
</style>

‎frontend/components/common/inputs/LinkButton.vue

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
<template>
22
<component :is="isLocalLink ? 'nuxt-link' : 'a'" :href="link" :to="link" :target="linkTarget">
3-
<button
4-
:type="type"
5-
:class="{ Primary: type === 'primary', Secondary: type === 'secondary' }"
6-
class="rounded-full"
7-
>
8-
<div class="flex items-center px-2 my-0.5">
9-
<slot /> <ExternalLink class="w-5 h-5 ml-0.5 -mr-0.5 fill-current" />
10-
</div>
3+
<button :class="type" class="rounded-full flex items-center px-4 py-1.5 font-semibold text-left">
4+
<slot class="flex-1" />
5+
<ExternalLink v-if="!isLocalLink" class="w-5 h-5 ml-0.5 -mr-0.5 fill-current flex-shrink-0" />
116
</button>
127
</component>
138
</template>
@@ -42,11 +37,16 @@ export default Vue.extend({
4237
</script>
4338

4439
<style scoped>
45-
.Primary {
46-
@apply bg-primary-light border-2 border-primary hover:text-white text-gray-700;
40+
button {
41+
@apply text-gray-700 dark:text-gray-200 transition duration-300;
4742
}
48-
49-
.Secondary {
50-
@apply border-2 border-gray-300 text-gray-700 hover:text-gray-400 dark:text-gray-200 dark:hover:text-gray-400;
43+
button.primary {
44+
@apply bg-primary-light bg-opacity-80 hover:bg-opacity-100;
45+
}
46+
button.secondary {
47+
@apply bg-gray-200 dark:bg-opacity-60 bg-opacity-80 hover:bg-opacity-100;
48+
}
49+
button.link {
50+
@apply p-0 m-0;
5151
}
5252
</style>

‎frontend/components/layout/Header.vue

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
<template>
22
<div>
33
<StagingBanner v-if="stagingBannerUrl" :url="stagingBannerUrl" />
4-
<!-- Sky banner -->
5-
<div class="w-full p-2 text-center bg-banner-red">
6-
<h1 class="text-white">
7-
MakerDAO is now Sky — the next evolution of DeFi. Explore
8-
<a class="underline" href="https://sky.money/" target="_blank">Sky.money</a> and get rewarded for
9-
saving without giving up control.
10-
</h1>
11-
</div>
124
<header class="bg-gradient-to-b from-primary to-primary-purple dark:from-primary-dark dark:to-primary">
135
<nav class="flex items-center py-2 px-4 md:px-10">
146
<HeaderLogo :network="network" :page-name="pageName" />
157

168
<div class="flex-1 flex justify-end space-x-4 items-center">
179
<label
18-
v-if="!isMinimalPage"
10+
v-if="isAuctionsPortal || isDefaultHeader"
1911
class="flex items-center space-x-2 cursor-pointer select-none pt-1 md:pt-0"
2012
>
2113
<BaseSwitch

‎frontend/components/layout/HeroSection.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="HeroSection">
3+
<LandingCard class="relative flex flex-col pt-10 sm:py-5">
4+
<h2
5+
class="
6+
max-w-xl
7+
md:max-w-3xl
8+
text-3xl
9+
sm:text-7xl
10+
font-semibold
11+
text-balance
12+
whitespace-pre-line
13+
text-white
14+
dark:text-gray-200
15+
"
16+
>
17+
{{
18+
`The unified platform
19+
to participate
20+
in Sky auctions`
21+
}}
22+
</h2>
23+
</LandingCard>
24+
</div>
25+
</template>
26+
27+
<script lang="ts">
28+
import Vue from 'vue';
29+
import LandingCard from '~/components/layout/LandingCard.vue';
30+
31+
export default Vue.extend({
32+
components: {
33+
LandingCard,
34+
},
35+
});
36+
</script>
37+
<style scoped>
38+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@14..32,600&display=swap');
39+
.HeroSection {
40+
@apply w-full h-full;
41+
}
42+
h2 {
43+
letter-spacing: 0;
44+
line-height: 1.05;
45+
font-family: 'Inter', sans-serif;
46+
font-optical-sizing: auto;
47+
font-weight: 600;
48+
font-style: normal;
49+
}
50+
</style>

‎frontend/components/layout/HomeBackground.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div class="HomeContainer">
3+
<div class="relative z-10">
4+
<slot />
5+
</div>
6+
7+
<svg
8+
class="HomeBackground absolute inset-0 w-full h-full"
9+
viewBox="0 0 100 100"
10+
preserveAspectRatio="xMidYMid slice"
11+
>
12+
<defs>
13+
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
14+
<animate attributeName="fx" dur="49s" values="0%;3%;0%" repeatCount="indefinite" />
15+
<stop offset="0%" stop-color="#faf" />
16+
<stop offset="100%" stop-color="#faf0" />
17+
</radialGradient>
18+
<radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
19+
<animate attributeName="fx" dur="38.5s" values="0%;3%;0%" repeatCount="indefinite" />
20+
<stop offset="0%" stop-color="#aaf" />
21+
<stop offset="100%" stop-color="#aaf0" />
22+
</radialGradient>
23+
<radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
24+
<animate attributeName="fx" dur="36.5s" values="0%;3%;0%" repeatCount="indefinite" />
25+
<stop offset="0%" stop-color="#0df" />
26+
<stop offset="100%" stop-color="#0df0" />
27+
</radialGradient>
28+
</defs>
29+
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
30+
<animate attributeName="x" dur="35s" values="25%;0%;25%" repeatCount="indefinite" />
31+
<animate attributeName="y" dur="36s" values="0%;25%;0%" repeatCount="indefinite" />
32+
<animateTransform
33+
attributeName="transform"
34+
type="rotate"
35+
from="0 50 50"
36+
to="360 50 50"
37+
dur="22s"
38+
repeatCount="indefinite"
39+
/>
40+
</rect>
41+
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
42+
<animate attributeName="x" dur="38s" values="-25%;0%;-25%" repeatCount="indefinite" />
43+
<animate attributeName="y" dur="39s" values="0%;50%;0%" repeatCount="indefinite" />
44+
<animateTransform
45+
attributeName="transform"
46+
type="rotate"
47+
from="0 50 50"
48+
to="360 50 50"
49+
dur="23s"
50+
repeatCount="indefinite"
51+
/>
52+
</rect>
53+
<rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
54+
<animate attributeName="x" dur="40s" values="0%;25%;0%" repeatCount="indefinite" />
55+
<animate attributeName="y" dur="41s" values="0%;25%;0%" repeatCount="indefinite" />
56+
<animateTransform
57+
attributeName="transform"
58+
type="rotate"
59+
from="360 50 50"
60+
to="0 50 50"
61+
dur="24s"
62+
repeatCount="indefinite"
63+
/>
64+
</rect>
65+
</svg>
66+
</div>
67+
</template>
68+
69+
<script lang="ts">
70+
import Vue from 'vue';
71+
72+
export default Vue.extend({
73+
name: 'HomeBackground',
74+
});
75+
</script>
76+
77+
<style scoped>
78+
.HomeContainer {
79+
@apply relative w-full bg-primary-light dark:bg-dark;
80+
}
81+
</style>

‎frontend/components/layout/LandingBlock.vue

+6-8
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,14 @@ export default Vue.extend({
4242
@apply relative flex h-full text-center items-center w-full;
4343
}
4444
.ButtonBase {
45-
@apply rounded-full border-2;
46-
@apply text-primary dark:text-gray-100 !important;
47-
}
48-
.SecondaryButton {
49-
@apply ButtonBase hover:border-primary dark:bg-gray-600 dark:border-gray-600 dark:text-white dark:hover:bg-gray-500;
50-
@apply border-gray-500 hover:border-primary hover:bg-white hover:text-primary focus:text-primary !important;
45+
@apply border-none rounded-full flex items-center px-4 py-1.5 font-semibold text-left;
46+
@apply text-gray-700 dark:text-gray-200 transition duration-300 !important;
5147
}
5248
.PrimaryButton {
53-
@apply ButtonBase bg-primary-light border-primary focus:bg-primary-light dark:bg-primary-dark dark:border-primary-dark dark:text-white dark:hover:bg-primary;
54-
@apply hover:bg-white hover:border-primary hover:text-primary focus:text-primary !important;
49+
@apply ButtonBase bg-primary-light bg-opacity-80 hover:bg-opacity-100;
50+
}
51+
.SecondaryButton {
52+
@apply ButtonBase bg-gray-200 dark:bg-opacity-60 bg-opacity-80 hover:bg-opacity-100;
5553
}
5654
.LandingTitle {
5755
@apply text-4xl font-bold text-gray-800 dark:text-gray-100 px-4;

‎frontend/components/layout/LandingCard.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="w-full max-w-7xl px-5 md:px-16 mx-auto">
3+
<slot />
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import Vue from 'vue';
9+
10+
export default Vue.extend({
11+
name: 'LandingCard',
12+
});
13+
</script>

0 commit comments

Comments
 (0)