The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix new landing for mobile users
+60
-61
+4
-4
app/(home)/page.tsx
+4
-4
app/(home)/page.tsx
···
91
91
return (
92
92
<div className="flex items-center flex-col w-full">
93
93
94
-
<div className="flex w-full items-center gap-8 mb-20 md:mb-12" style={{ height: "calc(100svh - 20rem)" }}>
94
+
<div className="flex w-full items-center gap-8 mb-16 md:mb-12 min-h-96 h-[calc(100svh-16rem)] md:h-[calc(100svh-20rem)]">
95
95
<div className="min-w-96 w-full md:w-2/3 xl:w-1/2 flex flex-col space-y-6">
96
96
97
97
<Chip
···
102
102
<span className="font-semibold">Everything for free</span>
103
103
</Chip>
104
104
105
-
<h1 className={cn(montserrat.className, "lg:text-7xl text-6xl font-semibold dark:text-neutral-100 text-neutral-900 break-words")}>
105
+
<h1 className={cn(montserrat.className, "lg:text-7xl md:text-6xl text-5xl font-semibold dark:text-neutral-100 text-neutral-900 break-words")}>
106
106
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent h-20 break-keep">Next generation</span>
107
107
{" of "}
108
108
<span className="underline decoration-blurple break-keep">discord bots</span>
···
193
193
</div>
194
194
195
195
<div className="flex flex-col items-center space-x-2">
196
-
<div className="animate-scroll">
196
+
<div className="animate-scroll rounded-lg rotate-180 md:rounded-3xl md:rotate-0">
197
197
<div className="animate-scroll-wheel" />
198
198
</div>
199
-
<span className="text-lg font-medium mt-2 text-neutral-500/50">Scroll down...</span>
199
+
<span className="hidden md:block text-lg font-medium mt-2 text-neutral-500/50">Scroll down...</span>
200
200
</div>
201
201
202
202
<article
+56
-57
app/globals.css
+56
-57
app/globals.css
···
3
3
@tailwind utilities;
4
4
5
5
:root {
6
-
--background-rgb: rgb(246, 246, 246);
7
-
--wamellow-rgb: rgb(226, 232, 240);
6
+
--background-rgb: rgb(246, 246, 246);
7
+
--wamellow-rgb: rgb(226, 232, 240);
8
8
}
9
9
10
10
.dark:root {
11
-
--background-rgb: rgb(7, 5, 12);
12
-
--wamellow-rgb: rgba(255, 255, 255, 0.16);
11
+
--background-rgb: rgb(7, 5, 12);
12
+
--wamellow-rgb: rgba(255, 255, 255, 0.16);
13
13
}
14
14
15
15
html {
16
-
min-height: 100vh;
17
-
min-height: 100svh;
18
-
scroll-behavior: smooth;
19
-
background: var(--background-rgb) !important;
16
+
min-height: 100vh;
17
+
min-height: 100svh;
18
+
scroll-behavior: smooth;
19
+
background: var(--background-rgb) !important;
20
20
}
21
21
22
22
div[id="bg"] {
23
-
background-image: linear-gradient(175deg, rgb(33, 21, 63, 0.8) 0%, var(--background-rgb) 65%);
23
+
background-image: linear-gradient(175deg, rgb(33, 21, 63, 0.8) 0%, var(--background-rgb) 65%);
24
24
}
25
25
26
26
@keyframes ScaleBlink {
27
-
50% {
28
-
transform: scale(1.2) rotate(12deg);
29
-
}
27
+
50% {
28
+
transform: scale(1.2) rotate(12deg);
29
+
}
30
30
}
31
31
32
32
.svg-max svg {
33
-
height: 100%;
34
-
width: 100%;
33
+
height: 100%;
34
+
width: 100%;
35
35
}
36
36
37
37
.scrollbar-none::-webkit-scrollbar {
38
-
display: none;
38
+
display: none;
39
39
}
40
40
41
41
.scrollbar-none {
42
-
-ms-overflow-style: none;
43
-
scrollbar-width: none;
42
+
-ms-overflow-style: none;
43
+
scrollbar-width: none;
44
44
}
45
45
46
46
::selection {
47
-
background-color: rgba(139, 92, 246, 0.6);
47
+
background-color: rgba(139, 92, 246, 0.6);
48
48
}
49
49
50
50
::-webkit-scrollbar {
51
-
width: 4px;
52
-
background: var(--background-rgb);
51
+
width: 4px;
52
+
background: var(--background-rgb);
53
53
}
54
54
55
55
::-webkit-scrollbar-thumb {
56
-
background: rgba(139, 92, 246, 0.6);
57
-
border-radius: 2px;
56
+
background: rgba(139, 92, 246, 0.6);
57
+
border-radius: 2px;
58
58
}
59
59
60
60
::-webkit-scrollbar-thumb:hover {
61
-
background: rgb(139, 92, 246, 1);
61
+
background: rgb(139, 92, 246, 1);
62
62
}
63
63
64
64
.animate-scroll {
65
-
border: 2px solid rgb(139, 92, 246, 1);
66
-
border-radius: 22px;
67
-
height: 2.2rem;
68
-
position: relative;
69
-
width: 20px;
65
+
border: 2px solid rgb(139, 92, 246, 1);
66
+
height: 2.2rem;
67
+
position: relative;
68
+
width: 20px;
70
69
}
71
70
72
71
.animate-scroll-wheel {
73
-
animation: scroll 2.5s ease infinite;
74
-
background: rgb(139, 92, 246, 1);
75
-
border-radius: 1rem;
76
-
height: 0.5rem;
77
-
left: calc(50% - 1.5px);
78
-
position: absolute;
79
-
right: 50%;
80
-
top: 8px;
81
-
width: 3px;
72
+
animation: scroll 2.5s ease infinite;
73
+
background: rgb(139, 92, 246, 1);
74
+
border-radius: 1rem;
75
+
height: 0.5rem;
76
+
left: calc(50% - 1.5px);
77
+
position: absolute;
78
+
right: 50%;
79
+
top: 8px;
80
+
width: 3px;
82
81
}
83
82
84
83
@keyframes scroll {
85
-
0% {
86
-
transform: translateY(0);
87
-
}
84
+
0% {
85
+
transform: translateY(0);
86
+
}
88
87
89
-
50% {
90
-
transform: translateY(0.5rem);
91
-
}
88
+
50% {
89
+
transform: translateY(0.5rem);
90
+
}
92
91
93
-
51% {
94
-
opacity: 1;
95
-
}
92
+
51% {
93
+
opacity: 1;
94
+
}
96
95
97
-
100% {
98
-
opacity: 0;
99
-
transform: translateY(0);
100
-
}
96
+
100% {
97
+
opacity: 0;
98
+
transform: translateY(0);
99
+
}
101
100
}
102
101
103
102
button.subpixel-antialiased:not(.w-unit-10):not(.default):not(.bg-secondary):not(.button-primary):not(.button-blurple):not(.button-underline),
104
103
a[role="button"]:not(.w-unit-10):not(.default):not(.bg-secondary):not(.button-primary):not(.button-blurple):not(.button-underline) {
105
-
@apply py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
104
+
@apply py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
106
105
}
107
106
108
107
.text-sm button.subpixel-antialiased,
109
108
.text-sm a[role="button"] {
110
-
font-size: 0.875rem;
111
-
line-height: 1.25rem;
109
+
font-size: 0.875rem;
110
+
line-height: 1.25rem;
112
111
}
113
112
114
113
.button {
115
-
@apply flex dark:text-neutral-300 text-neutral-700 dark:bg-wamellow bg-wamellow-100 dark:hover:bg-wamellow-light hover:bg-wamellow-100-light py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
114
+
@apply flex dark:text-neutral-300 text-neutral-700 dark:bg-wamellow bg-wamellow-100 dark:hover:bg-wamellow-light hover:bg-wamellow-100-light py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
116
115
}
117
116
118
117
.button-primary {
119
-
@apply flex text-neutral-200 bg-violet-600 hover:bg-violet-600/80 py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
118
+
@apply flex text-neutral-200 bg-violet-600 hover:bg-violet-600/80 py-2 px-4 duration-200 justify-center gap-2 items-center text-medium
120
119
}
121
120
122
121
.button-blurple {
123
-
@apply flex text-neutral-100 bg-blurple hover:bg-blurple-dark py-2 px-4 duration-200 justify-center gap-2 items-center font-medium text-medium
122
+
@apply flex text-neutral-100 bg-blurple hover:bg-blurple-dark py-2 px-4 duration-200 justify-center gap-2 items-center font-medium text-medium
124
123
}
125
124
126
125
.button-underline {
127
-
@apply dark:text-neutral-300/90 text-neutral-700/90 border-b border-transparent hover:border-neutral-300/90 my-1.5 mx-3 flex items-center gap-2 w-min text-medium
126
+
@apply dark:text-neutral-300/90 text-neutral-700/90 border-b border-transparent hover:border-neutral-300/90 my-1.5 mx-3 flex items-center gap-2 w-min text-medium
128
127
}