The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
update pro/premium page
+37
-33
+37
-33
app/(home)/pro/page.tsx
+37
-33
app/(home)/pro/page.tsx
···
2
2
import { Metadata } from "next";
3
3
import { Montserrat } from "next/font/google";
4
4
import Link from "next/link";
5
-
import { BsDiscord, BsQuestionLg } from "react-icons/bs";
6
-
import { HiLightningBolt, HiOutlineCheck, HiX } from "react-icons/hi";
5
+
import { BsQuestionLg } from "react-icons/bs";
6
+
import { HiLightningBolt, HiOutlineCheck, HiUserAdd, HiX } from "react-icons/hi";
7
7
import { IoMdInfinite } from "react-icons/io";
8
8
9
9
import Comment from "@/components/comment";
10
10
import ImageGrid from "@/components/image-grid";
11
11
import { ApiV1TopguildsGetResponse } from "@/typings";
12
+
import { cn } from "@/utils/cn";
12
13
import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
13
14
14
15
const maybe = null;
···
50
51
export default async function Home() {
51
52
const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, fetchOptions).then((res) => res.json()) as ApiV1TopguildsGetResponse[];
52
53
53
-
const buttons = (
54
-
<>
55
-
<Button
56
-
as={Link}
57
-
className="w-1/2 font-medium"
58
-
href="/login?invite=true"
59
-
prefetch={false}
60
-
startContent={<BsDiscord />}
61
-
>
54
+
const buttons = (<>
55
+
<Button
56
+
as={Link}
57
+
className="w-1/2 font-medium"
58
+
href="/login?invite=true"
59
+
prefetch={false}
60
+
startContent={<HiUserAdd />}
61
+
>
62
62
Get started
63
-
</Button>
64
-
<Button
65
-
as={Link}
66
-
color="secondary"
67
-
className="w-1/2 font-medium"
68
-
href="https://lunish.nl/kofi"
69
-
startContent={<HiLightningBolt />}
70
-
>
63
+
</Button>
64
+
<Button
65
+
as={Link}
66
+
color="secondary"
67
+
className="w-1/2 font-medium"
68
+
href="https://lunish.nl/kofi"
69
+
startContent={<HiLightningBolt />}
70
+
>
71
71
Subscribe
72
-
</Button>
73
-
</>
74
-
);
72
+
</Button>
73
+
</>);
75
74
76
75
const displayState = (is: string | number | boolean | null) => {
77
76
if (typeof is === "boolean" || is === null) {
···
87
86
return (
88
87
<div className="flex items-center flex-col w-full">
89
88
90
-
<div className="md:text-5xl text-4xl font-semibold md:mb-6 mb-4 dark:text-neutral-100 text-neutral-900 flex gap-2 w-full">
91
-
<h1 className={montserrat.className}>
89
+
<div className="md:text-5xl text-4xl font-semibold md:mb-6 mb-4 dark:text-neutral-100 text-neutral-900 flex gap-2 items-center w-full">
90
+
<h1 className={cn("flex gap-4", montserrat.className)}>
91
+
<span className="hidden md:block">Wamellow</span>
92
92
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent break-keep block md:hidden">Pro</span>
93
93
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent break-keep hidden md:block">Professional</span>
94
94
</h1>
···
127
127
</div>
128
128
129
129
{[
130
-
{ title: "Price", free: "$0 /month", pro: "$3.21 /month" },
130
+
{ title: "Price", free: "$0 /month", pro: "$3.99 /month" },
131
131
{ title: "Custom commands", free: 30, pro: Infinity },
132
-
{ title: "Stickymessages", free: 10, pro: 50 },
133
-
{ title: "Custom footers", free: false, pro: true },
132
+
{ title: "Social notifications", free: 30, pro: Infinity },
133
+
{ title: "Dailyposts", free: 30, pro: Infinity },
134
+
// { title: "Stickymessages", free: 10, pro: 50 },
135
+
// { title: "Custom footers", free: false, pro: true },
134
136
{ title: "Welcome roles", free: 5, pro: 10 },
135
137
{ title: "Welcome pings", free: 5, pro: 15 },
136
-
{ title: "Level roles", free: 15, pro: 25 },
138
+
// { title: "Level roles", free: 15, pro: 25 },
137
139
{ title: "Spotify control", free: maybe, pro: true, url: "/profile/spotify" },
138
-
{ title: "Custom rank sub-text", free: false, pro: true },
139
-
{ title: "Display user as webhook", free: false, pro: true },
140
+
{ title: "Custom /rank sub-text", free: false, pro: true },
141
+
// { title: "Display user as webhook", free: false, pro: true },
140
142
{ title: "Passport bypass", free: false, pro: true },
141
-
{ title: "Custom page color", free: false, pro: true },
142
-
{ title: "Statistics & Analytics", free: false, pro: true }
143
+
// { title: "Custom page color", free: false, pro: true },
144
+
// { title: "Statistics & Analytics", free: false, pro: true },
145
+
{ title: "Crosspost social notifications", free: false, pro: true }
143
146
].map((item) => (
144
147
<div key={item.title} className="flex items-center py-4">
145
148
<span className="md:text-base text-sm font-medium w-2/4 md:pr-0 pr-4">{item.title}</span>
···
154
157
))}
155
158
156
159
<div className="flex items-center pt-4">
157
-
<div className="hidden md:flex w-2/4 gap-4">
160
+
<div className="w-1/2" />
161
+
<div className="hidden md:flex w-1/2 gap-4">
158
162
{buttons}
159
163
</div>
160
164
</div>