The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add passport demo
+110
-11
+54
-8
app/(home)/page.tsx
+54
-8
app/(home)/page.tsx
···
3
3
import Image from "next/image";
4
4
import Link from "next/link";
5
5
import { BsDiscord } from "react-icons/bs";
6
-
import { HiArrowRight, HiBadgeCheck, HiCash, HiChevronRight, HiFingerPrint, HiFire, HiHashtag, HiInformationCircle, HiUserAdd } from "react-icons/hi";
6
+
import { HiArrowRight, HiBadgeCheck, HiCash, HiChevronRight, HiFingerPrint, HiFire, HiHashtag, HiInformationCircle, HiLockOpen, HiUserAdd } from "react-icons/hi";
7
7
8
8
import Badge from "@/components/badge";
9
9
import Box from "@/components/box";
···
18
18
import { ServerButton } from "@/components/server-button";
19
19
import AiPic from "@/public/ai.webp";
20
20
import ArrowPic from "@/public/arroww.webp";
21
+
import CaptchaPic from "@/public/captcha.webp";
21
22
import LeaderboardPic from "@/public/leaderboard.webp";
22
23
import SpacePic from "@/public/space.webp";
23
24
import WaifuPic from "@/public/waifu.webp";
···
217
218
</div>
218
219
</div>
219
220
220
-
<div className="w-full md:w-1/2 px-8 py-4 rounded-lg flex gap-4 items-center" style={{ backgroundColor: "rgb(43, 45, 49)" }}>
221
+
<div className="w-full md:w-1/2 px-8 py-4 rounded-lg flex flex-col sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center gap-4 min-h-56" style={{ backgroundColor: "rgb(43, 45, 49)" }}>
221
222
<DiscordChannelCategory name="#/voice/dev/null">
222
223
<DiscordChannelVoice name="• Public">
223
224
<DiscordUser username="mwlica" avatar="/luna-small.webp" />
···
225
226
</DiscordChannelVoice>
226
227
</DiscordChannelCategory>
227
228
228
-
<div className="dark:bg-wamellow-light bg-wamellow-100-light w-0.5 h-28 rounded-full ml-2" />
229
+
<div className="bg-[#313338] h-0.5 w-full sm:w-0.5 sm:h-32 md:h-0.5 md:w-full lg:w-0.5 lg:h-32 rounded-full ml-2" />
229
230
230
231
<DiscordMessage {...messageProps("tts voice")}>
231
232
<Highlight mode={"DARK"} text="Now talking..." />
···
334
335
</div>
335
336
336
337
<div>
338
+
<h2 className={styles.h2}>Verify members w/ Passport</h2>
339
+
<div className="my-8 max-w-md font-medium">
340
+
Secure your server from raider attacks and ensure that only verified members can access your channels.
341
+
</div>
342
+
343
+
<Box className="flex flex-col md:flex-row gap-10 items-center">
344
+
<div className="md:w-1/2">
345
+
<Badge
346
+
before={<HiFingerPrint />}
347
+
text="Of course it's free"
348
+
classname="mr-auto ml-0 mb-4"
349
+
/>
350
+
<h3 className={styles.h3}>Captcha verification</h3>
351
+
<div className="pt-6">
352
+
Protect your server from unwanted attacks such as bot-raids with our captcha verification system.
353
+
Ensure that only verified members can access your channels, safeguarding your server from raider attacks and ensuring a safe and secure environment for all your members.
354
+
</div>
355
+
<div className="flex gap-2 mt-6">
356
+
<Invite />
357
+
<ServerButton
358
+
as={Link}
359
+
className="bg-wamellow-light"
360
+
startContent={<HiLockOpen />}
361
+
href="/passport/1125063180801036329"
362
+
>
363
+
Try it out
364
+
</ServerButton>
365
+
<ServerButton
366
+
as={Link}
367
+
className="bg-wamellow-light"
368
+
startContent={<HiArrowRight />}
369
+
href="/dashboard?to=greeting"
370
+
>
371
+
Setup
372
+
</ServerButton>
373
+
</div>
374
+
</div>
375
+
376
+
<div className="w-full md:w-1/2 flex justify-center">
377
+
<Image src={CaptchaPic} itemProp="image" alt="" height={1024 / 2} width={2048 / 2} loading="lazy" className="max-w-56" />
378
+
</div>
379
+
</Box>
380
+
</div>
381
+
382
+
<div>
337
383
<h2 className={styles.h2}>Watchin{"'"} Anime ❤️</h2>
338
384
<div className="my-8 max-w-md font-medium">
339
385
They{"'"}re like windows to stories that provide the perfect distraction, letting you take a breather before diving back into the real world.
340
386
</div>
341
387
342
-
<Box className="flex flex-col md:flex-row gap-10 items-center">
388
+
<Box className="flex flex-col md:flex-row-reverse gap-10 items-center">
343
389
<div className="md:w-1/2">
344
390
<Badge
345
391
before={<HiCash />}
···
372
418
<Highlight mode={"DARK"} text="Please help us on [top.gg](https://top.gg/bot/1125449347451068437/vote), only takes a few seconds" />
373
419
<Image
374
420
alt=""
375
-
className="rounded-md shadow-md w-56 sm:w-64 md:w-unset max-w-xs mt-2"
421
+
className="rounded-md shadow-md w-64 md:w-56 lg:w-72 md:w-unset max-w-xs mt-2"
376
422
height={512}
377
423
itemProp="image"
378
424
loading="lazy"
···
390
436
Unlock complimentary access to a variety of image generation models directly within your Discord server. Without paying a shit ton to MEE6.
391
437
</div>
392
438
393
-
<Box className="flex flex-col md:flex-row-reverse gap-10 items-center">
439
+
<Box className="flex flex-col md:flex-row gap-10 items-center">
394
440
<div className="md:w-1/2">
395
441
<Badge
396
442
before={<HiCash />}
···
430
476
<Highlight mode={"DARK"} text="Please help us on [top.gg](https://top.gg/bot/1125449347451068437/vote), only takes a few seconds" />
431
477
<Image
432
478
alt=""
433
-
className="rounded-md shadow-md w-64 sm:w-72 md:w-unset max-w-md mt-2"
479
+
className="rounded-md shadow-md w-64 md:w-56 lg:w-72 md:w-unset max-w-md mt-2"
434
480
height={512}
435
481
itemProp="image"
436
482
loading="lazy"
···
448
494
Level up your Discord support game with Wamellow{"'"}s custom respones, called tags!
449
495
</div>
450
496
451
-
<Box className="flex flex-col md:flex-row gap-10 items-center">
497
+
<Box className="flex flex-col md:flex-row-reverse gap-10 items-center">
452
498
<div className="md:w-1/2">
453
499
<Badge
454
500
before={<HiCash />}
+18
-2
app/passport/[guildId]/page.tsx
+18
-2
app/passport/[guildId]/page.tsx
···
1
1
import { Metadata } from "next";
2
2
import Image from "next/image";
3
+
import Link from "next/link";
3
4
import { BsDiscord } from "react-icons/bs";
4
5
import { HiChartBar, HiCheck, HiLightningBolt, HiLockClosed, HiStar, HiUsers, HiX } from "react-icons/hi";
5
6
6
-
import ErrorBanner from "@/components/Error";
7
7
import ImageReduceMotion from "@/components/image-reduce-motion";
8
8
import { ListFeature } from "@/components/list";
9
+
import Notice, { NoticeType } from "@/components/notice";
9
10
import OverviewLinkComponent from "@/components/OverviewLinkComponent";
11
+
import { ServerButton } from "@/components/server-button";
10
12
import paintPic from "@/public/paint.webp";
11
13
import decimalToRgb from "@/utils/decimalToRgb";
12
14
import { getCanonicalUrl } from "@/utils/urls";
···
69
71
}
70
72
71
73
{typeof passport === "object" && "statusCode" in passport &&
72
-
<ErrorBanner message={(passport as Record<string, string>).message} removeButton />
74
+
<Notice type={NoticeType.Error} message={(passport as Record<string, string>).message} />
75
+
}
76
+
77
+
{guild.id === "1125063180801036329" &&
78
+
<Notice type={NoticeType.Info} message="This is a demo server to test out passport verification." >
79
+
<ServerButton
80
+
as={Link}
81
+
color="secondary"
82
+
href="https://discord.gg/2nrK8DfjPt"
83
+
target="_blank"
84
+
startContent={<BsDiscord />}
85
+
>
86
+
Join Server
87
+
</ServerButton>
88
+
</Notice>
73
89
}
74
90
75
91
<div className="grid md:flex gap-6">
+2
app/passport/[guildId]/verify.component.tsx
+2
app/passport/[guildId]/verify.component.tsx
+3
components/Error.tsx
+3
components/Error.tsx
···
9
9
type?: "error" | "info"
10
10
}
11
11
12
+
/**
13
+
* @deprecated
14
+
*/
12
15
const ErrorBanner: FunctionComponent<Props> = ({ message, removeButton, type }) => {
13
16
return (
14
17
<span className={`w-full text-neutral-100 ${type === "info" ? "bg-blue-400/40" : "bg-red-400/40"} py-2 px-4 mb-6 rounded-md flex gap-2 items-center`}>
+1
-1
components/image-grid.tsx
+1
-1
components/image-grid.tsx
···
15
15
<div className="w-full h-52 overflow-hidden rounded-xl">
16
16
<div className="grid grid-flow-col grid-rows-3 w-full md:gap-4 gap-3 rotate-6 relative right-8 bottom-10 md:bottom-20">
17
17
{images.map((image, i) => (
18
-
<div key={"imageGrid-" + image.id + i} className="md:h-32 h-24 md:w-32 w-24">
18
+
<div key={"imageGrid-" + image.id + i} className="relative md:h-32 h-24 md:w-32 w-24 hover:scale-110 duration-200">
19
19
{image.url.includes("discordapp.net")
20
20
?
21
21
<ImageReduceMotion
+32
components/notice.tsx
+32
components/notice.tsx
···
1
+
import { HiExclamation, HiExclamationCircle } from "react-icons/hi";
2
+
3
+
export enum NoticeType {
4
+
Error = "error",
5
+
Info = "info"
6
+
}
7
+
8
+
interface Props {
9
+
message: string;
10
+
type?: NoticeType;
11
+
children?: React.ReactNode;
12
+
}
13
+
14
+
export default function Notice({
15
+
message,
16
+
type,
17
+
children
18
+
}: Props) {
19
+
20
+
return (
21
+
<div className={`w-full text-neutral-100 ${type === NoticeType.Info ? "bg-violet-400/40" : "bg-red-400/40"} py-2 px-4 mb-6 rounded-md flex gap-2 items-center`}>
22
+
{type === NoticeType.Info ? <HiExclamationCircle className="h-5 w-5" /> : <HiExclamation className="h-5 w-5" />}
23
+
<div className="text-lg">{message}</div>
24
+
25
+
{children &&
26
+
<div className="ml-auto">
27
+
{children}
28
+
</div>
29
+
}
30
+
</div>
31
+
);
32
+
}
public/captcha.png
public/captcha.png
This is a binary file and will not be displayed.
public/captcha.webp
public/captcha.webp
This is a binary file and will not be displayed.
public/welcome.png
public/welcome.png
This is a binary file and will not be displayed.
public/welcome.webp
public/welcome.webp
This is a binary file and will not be displayed.