diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index f98d12b..93ce65f 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -31,6 +31,94 @@ const themeChange = () => {
{{ underlineToHump(appStore.getTitle) }}
+
{{ t('login.consoleLabel') }}
{{ t('login.welcome') }}
@@ -81,16 +169,58 @@ const themeChange = () => {
flex-direction: column;
justify-content: space-between;
+ &::before,
&::after {
position: absolute;
- right: -80px;
- bottom: -120px;
- width: 360px;
- height: 360px;
- border: 1px solid rgb(255 255 255 / 16%);
+ border: 1px solid rgb(255 255 255 / 12%);
border-radius: 50%;
content: '';
}
+
+ &::before {
+ top: -140px;
+ left: -80px;
+ width: 420px;
+ height: 420px;
+ }
+
+ &::after {
+ right: -120px;
+ bottom: -160px;
+ width: 460px;
+ height: 460px;
+ }
+}
+
+.hero-fruits {
+ position: absolute;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.fruit {
+ position: absolute;
+ filter: drop-shadow(0 18px 24px rgb(0 0 0 / 28%));
+}
+
+.cherry {
+ top: 16%;
+ right: 14%;
+ width: 150px;
+}
+
+.mango {
+ top: 30%;
+ left: 38%;
+ width: 210px;
+}
+
+.banana {
+ top: 54%;
+ left: 12%;
+ width: 200px;
+ transform: rotate(-8deg);
}
.hero-brand {
@@ -113,13 +243,14 @@ const themeChange = () => {
.hero-copy {
position: relative;
z-index: 1;
- max-width: 460px;
+ max-width: 420px;
h1 {
- margin: 10px 0 12px;
- font-size: 40px;
- font-weight: 700;
- line-height: 1.2;
+ margin: 12px 0 0;
+ font-size: 44px;
+ font-weight: 600;
+ line-height: 1.15;
+ letter-spacing: -0.03em;
color: #fff;
}
}
@@ -191,8 +322,12 @@ const themeChange = () => {
padding: 16px 24px 20px;
}
+ .hero-fruits {
+ display: none;
+ }
+
.hero-copy h1 {
- margin: 6px 0 8px;
+ margin: 6px 0 0;
font-size: 28px;
}