The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
new home and other fixes
+46
-103
+35
-93
app/(home)/page.tsx
+35
-93
app/(home)/page.tsx
···
2
2
import Image from "next/image";
3
3
import Link from "next/link";
4
4
import { BsDiscord } from "react-icons/bs";
5
-
import { HiArrowRight, HiExternalLink, HiInformationCircle, HiPlus } from "react-icons/hi";
5
+
import { HiArrowRight, HiInformationCircle, HiPlus } from "react-icons/hi";
6
6
7
7
import ClientCountUp from "@/components/ClientCountUp";
8
8
import Highlight from "@/components/discord/Markdown";
···
10
10
import DiscordMessageEmbed from "@/components/discord/MessageEmbed";
11
11
import DiscordMessageFile from "@/components/discord/MessageFile";
12
12
import { ListTab } from "@/components/List";
13
+
import ServerGrid from "@/components/ServerGrid";
13
14
import { ApiV1StatisticsGetResponse, ApiV1TopguildsGetResponse } from "@/typings";
14
-
import { truncate } from "@/utils/truncate";
15
15
16
16
const montserrat = Montserrat({ subsets: ["latin"] });
17
17
const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" });
18
18
19
-
export default async function Home({ searchParams }: { searchParams: { ref: string } }) {
19
+
export default async function Home() {
20
20
const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, { headers: { Authorization: process.env.API_SECRET as string }, next: { revalidate: 60 * 60 } }).then((res) => res.json()) as ApiV1TopguildsGetResponse[];
21
21
const stats = await fetch(`${process.env.NEXT_PUBLIC_API}/statistics`, { headers: { Authorization: process.env.API_SECRET as string }, next: { revalidate: 60 * 60 } }).then((res) => res.json()) as ApiV1StatisticsGetResponse;
22
22
23
-
const uwus = ["UwU", "uwu", "OwO", "owo", "QwQ", "qwq", ">:(", "Femboys ❤️"];
24
-
const intl = new Intl.NumberFormat("en", { notation: "standard" });
23
+
const convertMonthToName = (monthNumber: number) => {
24
+
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
25
+
return months[monthNumber];
26
+
};
25
27
26
-
const InnerMarquee = ({ id }: { id: number }) => (
27
-
<>
28
-
{[...topGuilds, ...topGuilds, ...topGuilds, ...topGuilds].slice(id === 2 ? 10 : 0, id * 10)?.map((guild) => (
29
-
<div className="dark:bg-wamellow bg-wamellow-100 py-4 px-5 flex items-center rounded-lg w-72 drop-shadow-md" key={Math.random().toString()}>
30
-
<Image src={(guild.icon && !guild.icon.includes("null")) ? guild.icon : "/discord.png"} loading="lazy" width={52} height={52} alt="Server" className="rounded-full" />
31
-
<div className="ml-3 text-sm">
32
-
<div className="text-xl dark:text-neutral-200 text-neutral-800 font-medium">{truncate(guild.name, 16)}</div>
33
-
<div>{intl.format(guild.memberCount)} members</div>
34
-
</div>
35
-
</div>
36
-
))}
37
-
</>
38
-
);
28
+
const uwus = ["UwU", "uwu", "OwO", "owo", "QwQ", "qwq", ">:(", "Femboys ❤️"];
39
29
40
30
return (
41
31
<div className="flex items-center flex-col w-full">
42
32
43
-
<div className="lg:text-7xl px-4 text-5xl flex font-semibold relative mb-2 dark:text-neutral-100 text-neutral-900 break-words sm:text-center">
33
+
<div className="lg:text-7xl text-5xl flex font-semibold md:mb-6 mb-4 dark:text-neutral-100 text-neutral-900 break-words w-full">
44
34
<h1 className={montserrat.className}>
45
35
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent h-20 break-keep">Next-gen</span>
46
36
{" of "}
···
54
44
</div>
55
45
</div>
56
46
57
-
<div className="md:text-xl text-lg md:py-4 py-2 px-4 max-w-4xl sm:text-center flex flex-col items-center">
58
-
<span className="tracking-wide">
59
-
Experience the next-gen revolution with Wamellow, offering a list of features and extensive customization, providing a superior alternative to popular bots.
60
-
</span>
61
-
62
-
<div className="flex mt-6 justify-center gap-2 text-xl font-medium w-full">
63
-
<Link href="/login?invite=true" className="flex text-neutral-200 bg-violet-600 hover:bg-violet-600/80 py-2 px-4 rounded-md duration-200 w-1/2 sm:w-fit justify-center gap-2">
64
-
<HiPlus className="relative top-1" />
65
-
<span className="block sm:hidden">Wamellow</span>
66
-
<span className="hidden sm:block">Invite Wamellow</span>
67
-
</Link>
68
-
<Link href="/support" className="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 rounded-md duration-200 w-1/2 sm:w-fit justify-center gap-2">
69
-
<BsDiscord className="relative top-1" />
70
-
<span className="block sm:hidden">Support</span>
71
-
<span className="hidden sm:block">Join support</span>
72
-
</Link>
73
-
{/* <Link href="/dashboard" className="flex border-2 dark:border-wamellow border-wamellow-100 dark:hover:border-wamellow-light hover:border-wamellow-100-light dark:hover:text-white py-2 px-4 rounded-md duration-200">
74
-
<span className="mr-2">Dashboard</span>
75
-
<HiArrowRight className="relative top-1" />
76
-
</Link> */}
77
-
</div>
78
-
47
+
<ServerGrid guilds={topGuilds} />
79
48
80
-
<span className={`flex gap-2 text-neutral-500 tracking-wider ${handwritten.className} mt-3 opacity-80 pl-24 rotate-2`}>
81
-
<Image src="/arroww.webp" width={24} height={24} alt="arrow up" className="h-5 w-5 relative top-px" draggable={false} />
82
-
Get started here in seconds
49
+
<div className="md:text-xl text-lg lg:flex w-full mt-4">
50
+
<span className="tracking-wide">
51
+
Experience the next-gen revolution, offering a list of features and extensive customization, providing a superior alternative to popular bots.
83
52
</span>
84
53
85
-
</div>
86
-
87
-
<div className="lg:mt-24 mt-14" />
54
+
<div className="flex flex-col min-w-full lg:min-w-[420px]">
88
55
89
-
{false &&
90
-
<span className="w-full text-neutral-100 bg-violet-400/25 py-3 px-5 mb-6 rounded-md md:flex items-center">
91
-
<div className="flex gap-2 items-center">
92
-
<HiInformationCircle className="h-6 w-6" />
93
-
<span className="text-lg font-medium">Learn more about what Wamellow.com will do with Waya.one</span>
56
+
<div className="lg:ml-auto flex gap-2 text-xl font-medium mt-4 lg:mt-0">
57
+
<Link href="/login?invite=true" className="flex text-neutral-200 bg-violet-600 hover:bg-violet-600/80 py-2 px-4 rounded-md duration-200 w-1/2 lg:w-fit justify-center gap-2">
58
+
<HiPlus className="relative top-1" />
59
+
<span className="block sm:hidden">Wamellow</span>
60
+
<span className="hidden sm:block">Invite Wamellow</span>
61
+
</Link>
62
+
<Link href="/support" className="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 rounded-md duration-200 w-1/2 lg:w-fit justify-center gap-2">
63
+
<BsDiscord className="relative top-1" />
64
+
<span className="block sm:hidden">Support</span>
65
+
<span className="hidden sm:block">Join support</span>
66
+
</Link>
94
67
</div>
95
68
96
-
<Link href="/new" className="ml-auto md:mt-0 mt-3 w-fit flex text-blue-400 hover:text-blue-500 duration-300 items-center gap-2">
97
-
<span>View article</span>
98
-
<HiExternalLink className="h-5 w-5" />
99
-
</Link>
100
69
101
-
</span>
102
-
}
103
-
104
-
<div className="max-w-full w-full">
105
-
<h2 className={`${montserrat.className} lg:text-4xl text-3xl dark:text-neutral-100 text-neutral-900 font-semibold underline decoration-violet-400`}>Widely used by you</h2>
106
-
<div className="md:text-xl text-lg mt-3">
107
-
Wamellow is widely embraced across diverse servers, setting it apart as the go-to choice.
108
-
</div>
109
-
110
-
<div className="relative flex overflow-x-hidden mt-[-32px]">
111
-
<div className="py-12 animate-marquee whitespace-nowrap flex gap-3">
112
-
<InnerMarquee id={1} />
113
-
</div>
114
-
<div className="absolute top-0 py-12 animate-marquee2 whitespace-nowrap ml-3 flex gap-3">
115
-
<InnerMarquee id={1} />
116
-
</div>
117
-
</div>
70
+
<span className={`lg:ml-auto flex gap-2 text-neutral-500 tracking-wider ${handwritten.className} mt-3 opacity-80 pl-20 lg:pr-20 rotate-2`}>
71
+
<Image src="/arroww.webp" width={24} height={24} alt="arrow up" className="h-5 w-5 relative top-px" draggable={false} />
72
+
Get started here in seconds
73
+
</span>
118
74
119
-
<div className="relative flex overflow-x-hidden mt-[-78px]">
120
-
<div className="py-12 animate-marquee-reverse whitespace-nowrap flex gap-3">
121
-
<InnerMarquee id={2} />
122
-
</div>
123
-
<div className="absolute top-0 py-12 animate-marquee-reverse2 whitespace-nowrap ml-3 flex gap-3">
124
-
<InnerMarquee id={2} />
125
-
</div>
126
75
</div>
127
76
128
-
<div className="relative">
129
-
<div className="absolute bottom-12 w-full h-[190px]" style={{ background: "linear-gradient(90deg, var(--background-rgb) 0%, rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, var(--background-rgb) 100%)" }} />
130
-
</div>
131
77
</div>
132
78
79
+
<div className="lg:mt-14 mt-10" />
80
+
133
81
<article itemScope itemType="http://schema.org/Article" className="flex flex-col gap-24 mb-16">
134
82
135
83
<div className="flex flex-col md:flex-row gap-8 items-center">
···
189
137
mode={"DARK"}
190
138
user={{
191
139
username: "Wamellow",
192
-
avatar: "/waya-legacy1.png",
140
+
avatar: "/waya-v3.webp",
193
141
bot: true
194
142
}}
195
143
>
···
250
198
mode={"DARK"}
251
199
user={{
252
200
username: "Wamellow",
253
-
avatar: "/waya-legacy1.png",
201
+
avatar: "/waya-v3.webp",
254
202
bot: true
255
203
}}
256
204
>
···
260
208
color={0xbc7ed4}
261
209
author={{
262
210
text: "@mwlica",
263
-
icon_url: "/_next/image?url=https%3A%2F%2Fcdn.discordapp.com%2Favatars%2F821472922140803112%2Fa_cdc8644a3b252476c2cd801760d57180.webp%3Fsize%3D64&w=128&q=75"
211
+
icon_url: "/_next/image?url=https%3A%2F%2Fcdn.discordapp.com%2Favatars%2F821472922140803112%2Fee0026a578a9b2a0844ffa0efe9e3cf4.webp%3Fsize%3D64&w=128&q=75"
264
212
}}
265
213
image="/_next/image?url=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F883817635081506886%2F1113058694347894865%2FIMG_6864.png&w=640&q=75"
266
214
>
···
286
234
mode={"DARK"}
287
235
user={{
288
236
username: "Wamellow",
289
-
avatar: "/waya-legacy1.png",
237
+
avatar: "/waya-v3.webp",
290
238
bot: true
291
239
}}
292
240
>
···
367
315
368
316
</div>
369
317
);
370
-
}
371
-
372
-
function convertMonthToName(monthNumber: number): string {
373
-
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
374
-
375
-
return months[monthNumber];
376
318
}
+1
app/dashboard/page.tsx
+1
app/dashboard/page.tsx
+5
-5
app/layout.tsx
+5
-5
app/layout.tsx
···
28
28
template: "%s"
29
29
},
30
30
31
-
description: description,
31
+
description,
32
32
keywords: ["discord", "bot", "discord bot", "waya", "waya bot", "waya.one", "mwya", "wamellow", "mwlica", "lunish.nl", "Luna-devv", "mee6 alternative", "arcane alternative", "dyno alternative", "starboard", "ranks", "leaderboards", "text to speech", "tts", "free", "customizable", "next-gen", "next generation"],
33
-
themeColor: "#bc7ed4",
33
+
themeColor: "#945682",
34
34
35
35
alternates: {
36
36
canonical: getBaseUrl()
···
41
41
default: title,
42
42
template: "%s on Wamellow"
43
43
},
44
-
description: description,
44
+
description,
45
45
type: "website",
46
46
url: getBaseUrl(),
47
47
images: `${getBaseUrl()}/waya-v3.jpg`
···
50
50
twitter: {
51
51
card: "summary",
52
52
site: "wamellow.com",
53
-
title: title,
54
-
description: description,
53
+
title,
54
+
description,
55
55
images: `${getBaseUrl()}/waya-v3.jpg`
56
56
},
57
57
+4
-4
app/profile/rank/page.tsx
+4
-4
app/profile/rank/page.tsx
···
137
137
<div className={`border-2 ${user?.extended?.rank?.useLeaderboardList ? "dark:border-neutral-700 hover:border-neutral-500 border-neutral-300 " : "dark:border-violet-400/60 dark:hover:border-violet-400 border-violet-600/60 hover:border-violet-600"} duration-200 rounded-md group p-6 mt-1 grid grid-rows-5 grid-cols-2 gap-3`}>
138
138
{new Array(10).fill("").map((_, i) =>
139
139
<div key={i} className="flex gap-2">
140
-
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"} duration-200 h-6 w-6 aspect-square rounded-full`} />
141
-
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-6 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
140
+
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300/90 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"} duration-200 h-6 w-6 aspect-square rounded-full`} />
141
+
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300/80 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-6 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
142
142
</div>
143
143
)}
144
144
</div>
···
175
175
<div className={`border-2 ${!user?.extended?.rank?.useLeaderboardList ? "dark:border-neutral-700 hover:border-neutral-500 border-neutral-300 " : "dark:border-violet-400/60 dark:hover:border-violet-400 border-violet-600/60 hover:border-violet-600"} duration-200 rounded-md p-4 mt-1 flex flex-col gap-2 group`}>
176
176
{new Array(8).fill("").map((_, i) =>
177
177
<div key={i} className="flex gap-2">
178
-
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"}duration-200 h-4 w-4 aspect-square rounded-full`} />
179
-
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-4 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
178
+
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300/90 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"} duration-200 h-4 w-4 aspect-square rounded-full`} />
179
+
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300/80 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-4 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
180
180
</div>
181
181
)}
182
182
</div>
+1
-1
components/Modal.tsx
+1
-1
components/Modal.tsx
···
52
52
}}
53
53
className="
54
54
md:relative fixed bottom-0 min-h-[333px] md:min-h-fit m-2
55
-
w-full md:w-[480px] bg-[var(--background-rgb)] rounded-md shadow-md
55
+
w-full md:w-[480px] bg-[var(--background-rgb)] rounded-xl shadow-md
56
56
max-sm:[--y-closed:16px] [--opacity-closed:0%] sm:[--scale-closed:90%]
57
57
max-sm:[--y-open:0px] [--opacity-open:100%] sm:[--scale-open:100%]
58
58
"