From 736d198d7d0d2034c64cd0d90feb6079a7a6c653 Mon Sep 17 00:00:00 2001
From: Dominik Koch <dominik@koch-bautechnik.de>
Date: Tue, 7 Jan 2025 19:11:28 +0100
Subject: [PATCH 1/3] sync(staff): prod -> main

---
 data/staffs.json | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/data/staffs.json b/data/staffs.json
index 8221fdae..a991dea5 100644
--- a/data/staffs.json
+++ b/data/staffs.json
@@ -4,7 +4,7 @@
     "categories": ["Developers", "Translators"],
     "description": "Founder, Lead Developer, German Translator",
     "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Dominik.webp",
-    "websiteUrl": "https://dominikko.ch/"
+    "websiteUrl": "https://brickver.com/@dominik"
   },
   {
     "name": "ForGetFulSkyBro",
@@ -20,6 +20,20 @@
     "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Skeleton.webp",
     "websiteUrl": "https://github.com/nidrux"
   },
+  {
+    "name": "Taqib",
+    "categories": ["Developers"],
+    "description": "Developer",
+    "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Taqib.webp",
+    "websiteUrl": "https://taqib.dev/"
+  },
+  {
+    "name": "Woofer21",
+    "categories": ["Developers"],
+    "description": "Developer",
+    "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Woofer.webp",
+    "websiteUrl": "https://woofer21.com/"
+  },
   {
     "name": "Noam",
     "categories": ["Translators", "Beta Testers"],
@@ -55,13 +69,6 @@
     "imageUrl": "https://cdn.wouldyoubot.gg/staff/special/Finn.webp",
     "websiteUrl": "https://github.com/finnkoetting"
   },
-  {
-    "name": "Sean",
-    "categories": ["Contributors"],
-    "description": "EX-Developer",
-    "imageUrl": "https://cdn.wouldyoubot.gg/staff/special/Sean.webp",
-    "websiteUrl": "https://sattler.dev/"
-  },
   {
     "name": "NightKiller",
     "categories": ["Contributors", "Beta Testers"],
@@ -129,16 +136,9 @@
     "name": "Paulos",
     "categories": ["Developers"],
     "description": "Frontend Guy",
-    "imageUrl": "https://cdn.wouldyoubot.gg/staff/special/Paulos.webp",
+    "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Paulos.webp",
     "websiteUrl": "https://dpaulos6.com?utm_source=wouldyoubot.gg"
   },
-  {
-    "name": "Paul",
-    "categories": ["Developers"],
-    "description": "Full-stack Developer",
-    "imageUrl": "https://cdn.wouldyoubot.gg/staff/developer/Paul.webp",
-    "websiteUrl": "https://github.com/Jester0027"
-  },
   {
     "name": "Dan",
     "categories": ["Contributors"],

From 4a5d8affc83fec1027c3381329dff1f2e35f8922 Mon Sep 17 00:00:00 2001
From: Dominik Koch <dominik@koch-bautechnik.de>
Date: Tue, 7 Jan 2025 19:36:10 +0100
Subject: [PATCH 2/3] sync: full prod to staging sync

---
 .vscode/settings.json                  |   5 +-
 app/layout.tsx                         |  52 ++--
 app/page.tsx                           |   3 +-
 app/premium/page.tsx                   | 353 ++-----------------------
 components/Embeds/MainDiscordEmbed.tsx | 283 ++++++++++----------
 components/FeatureItem.tsx             |  16 +-
 components/Footer.tsx                  |  18 +-
 components/Homepage/Content.tsx        | 216 +++++++--------
 components/Premium/Content.tsx         | 305 +++++++++++++++++++++
 components/cookies/cookie-banner.tsx   |  78 ++++++
 components/cookies/cookie-dialog.tsx   | 118 +++++++++
 components/cookies/cookie-provider.tsx | 131 +++++++++
 components/cookies/index.ts            |   5 +
 components/plausible-script.tsx        |  19 ++
 helpers/hooks/useCookies.ts            |  64 ++++-
 package.json                           |   2 +-
 pnpm-lock.yaml                         |  68 +++--
 17 files changed, 1083 insertions(+), 653 deletions(-)
 create mode 100644 components/Premium/Content.tsx
 create mode 100644 components/cookies/cookie-banner.tsx
 create mode 100644 components/cookies/cookie-dialog.tsx
 create mode 100644 components/cookies/cookie-provider.tsx
 create mode 100644 components/cookies/index.ts
 create mode 100644 components/plausible-script.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b0c11a73..b654e82e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,8 @@
   "css.customData": [
     ".vscode/tailwind.json"
   ],
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f0aca701..6fb89762 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,15 @@
+import { PlausibleScript } from '@/components/plausible-script'
+import { CookieProvider } from '@/components/cookies'
+import { IdTokenJWT } from '@/helpers/oauth/types'
 import { getIdToken } from '@/helpers/oauth'
+import { ThemeProvider } from 'next-themes'
 import Footer from '@/components/Footer'
 import Navbar from '@/components/Navbar'
 import { Inter } from 'next/font/google'
 import Alert from '@/components/Alert'
-import Providers from './providers'
 import React from 'react'
 import './globals.css'
+
 const inter = Inter({ subsets: ['latin'] })
 
 export default function RootLayout({
@@ -16,30 +20,30 @@ export default function RootLayout({
 	const idToken = getIdToken()
 
 	return (
-		<html
-			lang="en"
-			suppressHydrationWarning
-		>
+		<html lang="en">
 			<body className={inter.className}>
-				<script
-					defer
-					data-domain="wouldyoubot.gg"
-					src="https://stats.wouldyoubot.gg/js/script.js"
-				/>
-				<Providers>
-					<Alert
-						href="/premium"
-						className="bg-brand-primary"
-						active
-					>
-						<b>Would You Bot</b> • Upgrade your server with Premium
-					</Alert>
-					<div className="w-full relative min-h-dvh flex flex-col">
-						<Navbar idToken={idToken} />
-						{children}
-						<Footer />
-					</div>
-				</Providers>
+				<PlausibleScript />
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<CookieProvider>
+						<Alert
+							href="/premium"
+							className="bg-brand-primary text-white"
+							active
+						>
+							<b>Would You Bot</b> • Upgrade your server with Premium
+						</Alert>
+						<div className="w-full relative min-h-dvh flex flex-col">
+							<Navbar idToken={idToken as unknown as IdTokenJWT} />
+							{children}
+							<Footer />
+						</div>
+					</CookieProvider>
+				</ThemeProvider>
 			</body>
 		</html>
 	)
diff --git a/app/page.tsx b/app/page.tsx
index f2b19e90..d770d623 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -61,7 +61,6 @@ const Home = async () => {
 
 	const serverData = await serverResponse.json()
 	const servers = JSON.parse(serverData.result ?? null) ?? []
-	const filteredServers = servers.filter((g: any) => g.name !== 'Pornhub')
 
 	return (
 		<>
@@ -70,7 +69,7 @@ const Home = async () => {
 					initialRatherQuestion={getRandomQuestion('rather')}
 					initialNhieQuestion={getRandomQuestion('nhie')}
 					serverCount={serverCount}
-					servers={filteredServers}
+					servers={servers}
 				/>
 			</main>
 			<HomeSchemaMetadata />
diff --git a/app/premium/page.tsx b/app/premium/page.tsx
index 7761c8fd..9f922975 100644
--- a/app/premium/page.tsx
+++ b/app/premium/page.tsx
@@ -1,330 +1,35 @@
-// TODO remove the use client directive in favor of a server component
-'use client'
+import Content from '@/components/Premium/Content'
+import type { Metadata, Viewport } from 'next'
 
-import {
-	ApplePay,
-	CheckIcon,
-	CloseIcon,
-	GooglePay,
-	Link,
-	MasterCard,
-	PayPal,
-	Stripe,
-	StripeSquare,
-	Visa
-} from './_components/icons'
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger
-} from '@/components/ui/dialog'
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue
-} from '@/components/ui/select'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import DiscordLoginButton from '@/components/DiscordLoginButton'
-import PlansComparison from './_components/PlansComparison'
-import { LazyMotion, domAnimation, m } from 'framer-motion'
-import CheckoutButton from './_components/checkoutButton'
-import { DiscordGuild, PricingData } from './_types'
-import { ServersListSkeleton } from './_components'
-import { useIdToken } from '@/helpers/hooks'
-import { Suspense, useState } from 'react'
-import { getServer } from '@/lib/redis'
-import Image from 'next/image'
-import Head from 'next/head'
-
-const pricingData: PricingData = {
-	price: { monthly: 2.99, yearly: 29.99 },
-	premium: {
-		'All Freemium Features': true,
-		'Unlimited Custom Questions': true,
-		'Customized Webhook Branding': true,
-		'Prevent Questions from Repeating': true,
-		'Get Rid of Button Ads': true,
-		'Auto Pin Daily Messages': true,
-		'Support the Development': true
-	}
+export const metadata: Metadata = {
+  metadataBase: new URL('https://wouldyoubot.gg'),
+  title: 'Premium - Would You Bot',
+  description: 'Get premium for Would You Bot and unlock all features!',
+  twitter: {
+    title: 'Premium - Would You Bot',
+    description: 'Get premium for Would You Bot and unlock all features!'
+  },
+  openGraph: {
+    title: 'Premium - Would You Bot',
+    description: 'Get premium for Would You Bot and unlock all features!'
+  },
+  robots: {
+    index: true,
+    follow: true
+  }
 }
 
-const data = [
-	{
-		criteria: '5 Gamemodes',
-		free: true,
-		premium: true
-	},
-	{
-		criteria: 'Question of the Day',
-		free: true,
-		premium: true
-	},
-	{
-		criteria: 'Question Repeat Prevention',
-		free: false,
-		premium: true
-	},
-	{
-		criteria: 'Thousands of Questions',
-		free: true,
-		premium: true
-	},
-	{
-		criteria: 'Custom Questions',
-		free: 'Limited (100 per category)',
-		premium: 'Unlimited'
-	},
-	{
-		criteria: 'Custom Webhook Branding',
-		free: false,
-		premium: true
-	},
-	{
-		criteria: 'Auto Pin Daily Messages',
-		free: false,
-		premium: true
-	}
-]
+export const viewport: Viewport = {
+  themeColor: '#facc15',
+  maximumScale: 5
+}
 
 export default function Premium() {
-	const [isMonthly, setIsMonthly] = useState(true)
-	const [serversData, setServersData] = useState<DiscordGuild[]>([])
-	const [serverId, setServerId] = useState<string>()
-	const idToken = useIdToken(null)
-
-	const handleChange = () => {
-		setIsMonthly(!isMonthly)
-	}
-
-	const fetchData = async () => {
-		const servers = (await getServer()) as DiscordGuild[]
-		setServersData(servers)
-	}
-
-	return (
-		<>
-			<Head>
-				<title>Would You - Premium</title>
-			</Head>
-			<main className="relative mb-40 flex w-full justify-center">
-				<div className="flex w-full max-w-8xl flex-col gap-52 px-8">
-					<LazyMotion features={domAnimation}>
-						<m.div
-							initial={{ opacity: 0 }}
-							whileInView={{ opacity: 1 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.5, delay: 0.2 }}
-						>
-							<div className="container mx-auto px-4">
-								<h1 className="text-4xl font-bold text-yellow-500 drop-shadow-gold-glow">
-									Premium
-								</h1>
-								<p className="text-customGrayText mb-6 mt-4 text-foreground/70">
-									Select the plan that suits your needs and benefit from our
-									discord bot.
-								</p>
-								<div className="mx-auto my-4 max-w-2xl text-center">
-									<label className="group relative mx-auto flex h-16 w-full max-w-[13rem] cursor-pointer items-center justify-center pl-6 pr-8 rounded-2xl bg-background-light text-xl select-none">
-										<input
-											type="checkbox"
-											className="peer appearance-none"
-											checked={!isMonthly}
-											onChange={handleChange}
-										/>
-										<span className="absolute top-0 left-2 z-10 flex h-16 w-[6rem] cursor-pointer items-center duration-300 ease-in-out after:h-12 after:w-[10rem] sm:after:w-[20rem] after:rounded-lg after:bg-brand-primary-light dark:after:bg-brand-primary after:shadow-md after:duration-300 peer-checked:after:translate-x-[6rem]"></span>
-										<div className="z-20 flex gap-10 text-base font-bold text-foreground">
-											<div className={`${!isMonthly && 'text-foreground/50'}`}>
-												Monthly
-											</div>
-											<div className={`${isMonthly && 'text-foreground/50'}`}>
-												Yearly
-											</div>
-										</div>
-									</label>
-								</div>
-								<div className="mx-auto flex w-fit flex-col">
-									<div className="mb-4 w-auto rounded-[1.7rem] bg-gradient-premium p-[4px]">
-										<div className="relative overflow-hidden rounded-3xl bg-background-dark px-8 py-8">
-											<span
-												className={`${!isMonthly ? 'top-7' : 'pointer-events-none -top-10 opacity-0'} hidden xs:flex text-mb absolute right-6 cursor-default rounded-xl bg-foreground/10 px-4 py-2 text-foreground transition-all duration-300`}
-											>
-												2 months free
-											</span>
-											<h4 className="font-heading mb-2 text-left text-2xl font-bold text-foreground 2xl:mb-4">
-												Premium
-											</h4>
-											<span
-												className={`${isMonthly && 'absolute -top-10 pointer-events-none opacity-0'} flex xs:hidden w-fit text-mb cursor-default rounded-xl bg-foreground/15 px-4 py-2 text-foreground transition-all duration-300`}
-											>
-												2 months free
-											</span>
-											<div className="flex items-end justify-start">
-												<div className="mr-2 mt-4 text-left text-4xl font-bold text-foreground sm:text-5xl">
-													{isMonthly ?
-														pricingData.price.monthly
-													:	pricingData.price.yearly}
-												</div>
-												<div className="text-foreground/60">
-													{isMonthly ? '/ month' : '/ year'}
-												</div>
-											</div>
-											<p className="mb-8 mt-1 text-left leading-loose text-foreground/60">
-												Experience the full power of our Would You bot.
-											</p>
-											<ul className="mb-16 text-foreground">
-												{Object.keys(pricingData['premium']).map(
-													(text, index) => (
-														<li
-															className="mb-4 flex items-center"
-															key={index}
-														>
-															{(
-																pricingData['premium'][
-																	text as keyof (typeof pricingData)['premium']
-																]
-															) ?
-																<CheckIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-brand-primary" />
-															:	<CloseIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-muted-foreground" />
-															}
-															<span>{text}</span>
-														</li>
-													)
-												)}
-											</ul>
-											<Dialog>
-												{idToken ?
-													<DialogTrigger
-														onClick={() => {
-															fetchData()
-														}}
-														className="flex w-full items-center justify-center gap-2 rounded-xl bg-green-500 py-2 font-bold leading-loose text-foreground transition hover:bg-green-600 focus:ring-0"
-													>
-														Continue with Stripe
-														<StripeSquare className="h-5 w-5" />
-													</DialogTrigger>
-												:	<DiscordLoginButton
-														className="rounded-xl font-bold"
-														redirect="/premium"
-													/>
-												}
-												<DialogContent className="w-fit border-none bg-background">
-													<DialogHeader>
-														<DialogTitle className="text-xl font-bold text-foreground">
-															<div>
-																Buy{' '}
-																<span className="text-brand-red-100">
-																	Would
-																</span>{' '}
-																<span className="text-brand-blue-100">You</span>
-																{isMonthly ? ' Monthly' : ' Yearly'}
-															</div>
-														</DialogTitle>
-													</DialogHeader>
-													<DialogDescription className="w-full !rounded-2xl">
-														<Select
-															onValueChange={setServerId}
-															defaultValue={serverId ? serverId : ''}
-														>
-															<SelectTrigger className="w-[300px] sm:w-[400px]">
-																<SelectValue placeholder="Select a server to continue" />
-															</SelectTrigger>
-															<SelectContent className="max-h-[40vh] max-w-[300px] sm:max-w-[400px]">
-																<Suspense fallback={<ServersListSkeleton />}>
-																	{serversData.map((server: DiscordGuild) => (
-																		<SelectItem
-																			key={server.id}
-																			value={server.id}
-																		>
-																			<div className="flex items-center gap-2">
-																				<Avatar className="h-6 w-6">
-																					<AvatarImage
-																						src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.webp`}
-																					/>
-																					<AvatarFallback>
-																						<Image
-																							src="https://cdn.discordapp.com/embed/avatars/0.png"
-																							alt="avatar example"
-																							width={90}
-																							height={90}
-																						/>
-																					</AvatarFallback>
-																				</Avatar>
-																				<span className="line-clamp-1 text-ellipsis">
-																					{server.name}
-																				</span>
-																			</div>
-																		</SelectItem>
-																	))}
-																</Suspense>
-															</SelectContent>
-														</Select>
-														<CheckoutButton
-															monthly={String(isMonthly)}
-															priceId={
-																isMonthly ?
-																	process.env
-																		.NEXT_PUBLIC_PREMIUM_MONTHLY_PRICE_ID!
-																:	process.env
-																		.NEXT_PUBLIC_PREMIUM_YEARLY_PRICE_ID!
-															}
-															serverId={serverId}
-														/>
-													</DialogDescription>
-												</DialogContent>
-												{idToken ?
-													<p className="text-foreground/60 text-center pt-3 mb-[-15] text-wrap">
-														Or click{' '}
-														<a
-															href="/api/subs/manage"
-															className="underline font-bold text-foreground/70"
-														>
-															here
-														</a>{' '}
-														to manage your subscriptions
-													</p>
-												:	null}
-											</Dialog>
-										</div>
-									</div>
-									<a
-										href="https://stripe.com/"
-										target="_blank"
-										className="flex flex-wrap justify-center gap-2 sm:gap-3"
-									>
-										<Stripe />
-										<ApplePay />
-										<GooglePay />
-										<MasterCard />
-										<Visa />
-										<PayPal />
-										<Link />
-									</a>
-								</div>
-							</div>
-						</m.div>
-					</LazyMotion>
-					<LazyMotion features={domAnimation}>
-						<m.div
-							initial={{ opacity: 0 }}
-							whileInView={{ opacity: 1 }}
-							viewport={{ once: true }}
-							transition={{ duration: 0.5, delay: 0.2 }}
-						>
-							<PlansComparison
-								data={data}
-								rowSeparator
-								colSeparator
-							/>
-						</m.div>
-					</LazyMotion>
-				</div>
-			</main>
-		</>
-	)
+  return (
+    <>
+      <main className="relative mb-40 flex w-full justify-center">
+        <Content />
+      </main>
+    </>
+  )
 }
diff --git a/components/Embeds/MainDiscordEmbed.tsx b/components/Embeds/MainDiscordEmbed.tsx
index 2756a282..a5b540f1 100644
--- a/components/Embeds/MainDiscordEmbed.tsx
+++ b/components/Embeds/MainDiscordEmbed.tsx
@@ -1,158 +1,157 @@
 'use client'
+
 import {
-	DiscordActionRow,
-	DiscordAttachments,
-	DiscordButton,
-	DiscordCommand,
-	DiscordEmbed,
-	DiscordEmbedDescription,
-	DiscordEmbedFooter,
-	DiscordMessage,
-	DiscordMessages
+  DiscordActionRow,
+  DiscordAttachments,
+  DiscordButton,
+  DiscordCommand,
+  DiscordEmbed,
+  DiscordEmbedDescription,
+  DiscordEmbedFooter,
+  DiscordMessage,
+  DiscordMessages
 } from '@skyra/discord-components-react'
 import { getRandomQuestion } from '@/helpers/getRandomQuestion'
-import { LazyMotion, domAnimation, m } from 'framer-motion'
 import profiles from '@/data/profiles.json'
 import { useTheme } from 'next-themes'
+import { motion } from 'motion/react'
 import { FC, useState } from 'react'
 
 interface MainProps {
-	initialQuestion: string
+  initialQuestion: string
 }
 
 const MainDiscordEmbed: FC<MainProps> = ({ initialQuestion }) => {
-	const { theme } = useTheme()
-	const [replayedRounds, setReplayedRounds] = useState(0)
-	const [currentQuestion, setCurrentQuestion] = useState(initialQuestion)
+  const { theme } = useTheme()
+  const [replayedRounds, setReplayedRounds] = useState(0)
+  const [currentQuestion, setCurrentQuestion] = useState(initialQuestion)
 
-	const replay = () => {
-		if (replayedRounds < 3) {
-			setCurrentQuestion(getRandomQuestion('rather'))
-			setReplayedRounds(replayedRounds + 1)
-		}
-	}
+  const replay = () => {
+    if (replayedRounds < 3) {
+      setCurrentQuestion(getRandomQuestion('rather'))
+      setReplayedRounds(replayedRounds + 1)
+    }
+  }
 
-	return (
-		<LazyMotion features={domAnimation}>
-			<m.div
-				initial={{ opacity: 0, transform: 'translateY(20px)' }}
-				whileInView={{ opacity: 1, transform: 'translateY(0)' }}
-				transition={{ duration: 0.7, ease: 'easeInOut' }}
-				viewport={{ once: true }}
-				style={{ width: '90%', marginLeft: 'auto', marginRight: 'auto' }}
-			>
-				<DiscordMessages
-					lightTheme={theme === 'light' ? true : false}
-					className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow sm:w-2/3 lg:w-auto"
-				>
-					<DiscordMessage
-						profile="wouldyou"
-						author={profiles.wouldyou.author}
-						avatar={profiles.wouldyou.avatar}
-						roleColor={profiles.wouldyou.roleColor}
-						bot={profiles.wouldyou.bot}
-						verified={profiles.wouldyou.verified}
-						edited={replayedRounds > 0}
-					>
-						<DiscordCommand
-							slot="reply"
-							profile="dominik"
-							author={profiles.dominik.author}
-							avatar={profiles.dominik.avatar}
-							roleColor={profiles.dominik.roleColor}
-							// @ts-expect-error
-							clanIcon={profiles.dominik.clanIcon}
-							clanTag={profiles.dominik.clanTag}
-							command="/wouldyourather"
-							lightTheme={theme === 'light'}
-						/>
-						<DiscordEmbed
-							slot="embeds"
-							color="#1e88e5"
-						>
-							<DiscordEmbedDescription slot="description">
-								{currentQuestion}
-							</DiscordEmbedDescription>
-							<DiscordEmbedFooter
-								slot="footer"
-								footerImage="./staff/Dominik.webp"
-							>
-								Requested by dominikdev | Type: General | ID: 64
-							</DiscordEmbedFooter>
-						</DiscordEmbed>
-						<DiscordAttachments slot="components">
-							<DiscordActionRow>
-								<DiscordButton type="secondary">Results</DiscordButton>
-								<DiscordButton type="primary">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 36 36"
-										width="36"
-										height="36"
-										className="h-5 w-5"
-									>
-										<path
-											fill="#3B88C3"
-											d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
-										/>
-										<path
-											fill="#FFF"
-											d="M16.462 11.175h-1.829c-1.488 0-2.108-1.085-2.108-2.139 0-1.085.775-2.14 2.108-2.14h4.402c1.334 0 2.078.961 2.078 2.201V26.74c0 1.551-.992 2.418-2.326 2.418-1.333 0-2.325-.867-2.325-2.418V11.175z"
-										/>
-									</svg>
-								</DiscordButton>
-								<DiscordButton type="primary">
-									<svg
-										viewBox="0 0 36 36"
-										width="36"
-										height="36"
-										className="h-5 w-5"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 36 36"
-											width="36"
-											height="36"
-										>
-											<path
-												fill="#3B88C3"
-												d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
-											/>
-											<path
-												fill="#FFF"
-												d="M23.086 24.907c1.365 0 2.42.62 2.42 2.046 0 1.427-1.055 2.047-2.233 2.047H12.917c-1.364 0-2.418-.62-2.418-2.047 0-.65.403-1.209.713-1.581 2.573-3.069 5.364-5.86 7.721-9.271.558-.806 1.085-1.768 1.085-2.884 0-1.271-.961-2.387-2.233-2.387-3.566 0-1.86 5.023-4.837 5.023-1.488 0-2.264-1.054-2.264-2.264 0-3.906 3.473-7.038 7.287-7.038 3.815 0 6.883 2.512 6.883 6.449 0 4.309-4.805 8.589-7.441 11.906h5.673z"
-											/>
-										</svg>
-									</svg>
-								</DiscordButton>
-							</DiscordActionRow>
-							<DiscordActionRow>
-								{replayedRounds < 3 ?
-									<DiscordButton
-										type="primary"
-										onClick={() => replay()}
-										emoji="/emojis/refresh.svg"
-										emojiName="refresh"
-									>
-										New Question
-									</DiscordButton>
-								:	<DiscordButton
-										type="secondary"
-										onClick={() =>
-											window.open('https://wouldyoubot.gg/invite', '_blank')
-										}
-										emoji="/emojis/external.svg"
-										emojiName="external"
-									>
-										Invite Would You
-									</DiscordButton>
-								}
-							</DiscordActionRow>
-						</DiscordAttachments>
-					</DiscordMessage>
-				</DiscordMessages>
-			</m.div>
-		</LazyMotion>
-	)
+  return (
+    <motion.div
+      initial={{ opacity: 0, transform: 'translateY(20px)' }}
+      whileInView={{ opacity: 1, transform: 'translateY(0)' }}
+      transition={{ duration: 0.7, ease: 'easeInOut' }}
+      viewport={{ once: true }}
+      style={{ width: '90%', marginLeft: 'auto', marginRight: 'auto' }}
+    >
+      <DiscordMessages
+        lightTheme={theme === 'light' ? true : false}
+        className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow sm:w-2/3 lg:w-auto"
+      >
+        <DiscordMessage
+          profile="wouldyou"
+          author={profiles.wouldyou.author}
+          avatar={profiles.wouldyou.avatar}
+          roleColor={profiles.wouldyou.roleColor}
+          bot={profiles.wouldyou.bot}
+          verified={profiles.wouldyou.verified}
+          edited={replayedRounds > 0}
+        >
+          <DiscordCommand
+            slot="reply"
+            profile="dominik"
+            author={profiles.dominik.author}
+            avatar={profiles.dominik.avatar}
+            roleColor={profiles.dominik.roleColor}
+            // @ts-expect-error
+            clanIcon={profiles.dominik.clanIcon}
+            clanTag={profiles.dominik.clanTag}
+            command="/wouldyourather"
+            lightTheme={theme === 'light'}
+          />
+          <DiscordEmbed
+            slot="embeds"
+            color="#1e88e5"
+          >
+            <DiscordEmbedDescription slot="description">
+              {currentQuestion}
+            </DiscordEmbedDescription>
+            <DiscordEmbedFooter
+              slot="footer"
+              footerImage="./staff/Dominik.webp"
+            >
+              Requested by dominikdev | Type: General | ID: 64
+            </DiscordEmbedFooter>
+          </DiscordEmbed>
+          <DiscordAttachments slot="components">
+            <DiscordActionRow>
+              <DiscordButton type="secondary">Results</DiscordButton>
+              <DiscordButton type="primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 36 36"
+                  width="36"
+                  height="36"
+                  className="h-5 w-5"
+                >
+                  <path
+                    fill="#3B88C3"
+                    d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
+                  />
+                  <path
+                    fill="#FFF"
+                    d="M16.462 11.175h-1.829c-1.488 0-2.108-1.085-2.108-2.139 0-1.085.775-2.14 2.108-2.14h4.402c1.334 0 2.078.961 2.078 2.201V26.74c0 1.551-.992 2.418-2.326 2.418-1.333 0-2.325-.867-2.325-2.418V11.175z"
+                  />
+                </svg>
+              </DiscordButton>
+              <DiscordButton type="primary">
+                <svg
+                  viewBox="0 0 36 36"
+                  width="36"
+                  height="36"
+                  className="h-5 w-5"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 36 36"
+                    width="36"
+                    height="36"
+                  >
+                    <path
+                      fill="#3B88C3"
+                      d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
+                    />
+                    <path
+                      fill="#FFF"
+                      d="M23.086 24.907c1.365 0 2.42.62 2.42 2.046 0 1.427-1.055 2.047-2.233 2.047H12.917c-1.364 0-2.418-.62-2.418-2.047 0-.65.403-1.209.713-1.581 2.573-3.069 5.364-5.86 7.721-9.271.558-.806 1.085-1.768 1.085-2.884 0-1.271-.961-2.387-2.233-2.387-3.566 0-1.86 5.023-4.837 5.023-1.488 0-2.264-1.054-2.264-2.264 0-3.906 3.473-7.038 7.287-7.038 3.815 0 6.883 2.512 6.883 6.449 0 4.309-4.805 8.589-7.441 11.906h5.673z"
+                    />
+                  </svg>
+                </svg>
+              </DiscordButton>
+            </DiscordActionRow>
+            <DiscordActionRow>
+              {replayedRounds < 3 ?
+                <DiscordButton
+                  type="primary"
+                  onClick={() => replay()}
+                  emoji="/emojis/refresh.svg"
+                  emojiName="refresh"
+                >
+                  New Question
+                </DiscordButton>
+              : <DiscordButton
+                  type="secondary"
+                  onClick={() =>
+                    window.open('https://wouldyoubot.gg/invite', '_blank')
+                  }
+                  emoji="/emojis/external.svg"
+                  emojiName="external"
+                >
+                  Invite Would You
+                </DiscordButton>
+              }
+            </DiscordActionRow>
+          </DiscordAttachments>
+        </DiscordMessage>
+      </DiscordMessages>
+    </motion.div>
+  )
 }
 export default MainDiscordEmbed
diff --git a/components/FeatureItem.tsx b/components/FeatureItem.tsx
index 3ae36ad9..c50539ae 100644
--- a/components/FeatureItem.tsx
+++ b/components/FeatureItem.tsx
@@ -1,12 +1,14 @@
-import { m } from 'framer-motion'
+'use client'
+
+import { motion } from 'motion/react'
 
 const FeatureItem: React.FC<{
 	left: React.ReactNode
 	right: React.ReactNode
 	reverse?: true
 }> = ({ left, right, reverse }) => (
-	<div className="flex w-full flex-col justify-between gap-8 md:flex-row md:gap-20">
-		<m.div
+	<div className="flex w-full flex-col justify-between gap-8 md:flex-row md:gap-20 rounded-md max-w-[300px] lg:max-w-8xl md:max-w-8xl sm:max-w-8xl">
+		<motion.div
 			initial={{ opacity: 0, transform: 'translateX(-50px)' }}
 			whileInView={{ opacity: 1, transform: 'translateX(0)' }}
 			viewport={{ once: true }}
@@ -14,18 +16,18 @@ const FeatureItem: React.FC<{
 			className="mx-auto flex flex-col justify-center gap-2 sm:w-2/3 md:w-1/2"
 		>
 			{left}
-		</m.div>
-		<m.div
+		</motion.div>
+		<motion.div
 			initial={{ opacity: 0, transform: 'translateX(50px)' }}
 			whileInView={{ opacity: 1, transform: 'translateX(0)' }}
 			viewport={{ once: true }}
 			transition={{ duration: 0.65, ease: 'easeInOut' }}
-			className={`mx-auto flex flex-col justify-center gap-2 sm:w-2/3 md:w-1/2 ${
+			className={`mx-auto flex flex-col justify-center gap-2 sm:w-2/3 md:w-1/2 rounded-md ${
 				reverse ? 'order-last md:order-first' : ''
 			}`}
 		>
 			{right}
-		</m.div>
+		</motion.div>
 	</div>
 )
 
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6c44cf30..3fd0c5f1 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,9 +1,14 @@
-'use server'
+'use client'
 
+import { useCookieContext } from './cookies'
+import { Settings } from 'lucide-react'
+import { Button } from './ui/button'
 import Image from 'next/image'
 import Link from 'next/link'
 
-const Footer = async () => {
+const Footer = () => {
+	const { showCookieDialog } = useCookieContext()
+
 	const recommendedLinks = [
 		{
 			name: 'Home',
@@ -94,6 +99,15 @@ const Footer = async () => {
 						</Link>
 						. All rights reserved.
 					</p>
+					{/* <StatusBadge /> */}
+					<Button
+						variant="ghost"
+						className="gap-1 mt-auto"
+						onClick={showCookieDialog}
+					>
+						<Settings className="size-4" />
+						Manage Cookies
+					</Button>
 				</div>
 				<div className="flex w-full flex-col items-center md:items-start">
 					<h4 className="mb-2 text-lg font-bold text-foreground">
diff --git a/components/Homepage/Content.tsx b/components/Homepage/Content.tsx
index 774fd732..effd17dd 100644
--- a/components/Homepage/Content.tsx
+++ b/components/Homepage/Content.tsx
@@ -4,7 +4,7 @@ import NeverHaveIEverEmbed from '@/components/Embeds/NeverHaveIEverEmbed'
 import DailyMessageEmbed from '@/components/Embeds/DailyMessageEmbed'
 import HigherLowerEmbed from '@/components/Embeds/HigherLowerEmbed'
 import MainDiscordEmbed from '@/components/Embeds/MainDiscordEmbed'
-import { domAnimation, LazyMotion, m } from 'framer-motion'
+import { motion } from 'motion/react'
 import ServerMarquee from '@/components/ServerMarquee'
 import { Button, buttonVariants } from '../ui/button'
 import FeatureItem from '@/components/FeatureItem'
@@ -36,67 +36,63 @@ export function HomeContent({
 	].join('/')} - Daily Message`
 
 	return (
-		<LazyMotion features={domAnimation}>
-			<section className="mt-0 sm:mt-16 lg:mt-28 flex w-full max-w-8xl flex-col items-center justify-between gap-16 px-8 text-center lg:flex-row lg:text-left">
-				<m.div
-					initial={{ opacity: 0, transform: 'translateY(20px)' }}
-					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
-					transition={{ duration: 0.7, ease: 'easeInOut' }}
-					viewport={{ once: true }}
-					className="flex flex-col items-center lg:block"
+			<><section className="mt-0 sm:mt-16 lg:mt-28 flex w-full max-w-8xl flex-col items-center justify-between gap-16 px-8 text-center lg:flex-row lg:text-left">
+			<motion.div
+				initial={{ opacity: 0, transform: 'translateY(20px)' }}
+				whileInView={{ opacity: 1, transform: 'translateY(0)' }}
+				transition={{ duration: 0.7, ease: 'easeInOut' }}
+				viewport={{ once: true }}
+				className="flex flex-col items-center lg:block"
+			>
+				<h1 className="text-[2rem] sm:text-5xl md:text-6xl font-bold leading-normal mb-8">
+					Entertain Your
+					<br />
+					<span className="text-brand-red-100 drop-shadow-red-glow">
+						Discord
+					</span>{' '}
+					<span className="text-brand-blue-100 drop-shadow-blue-glow">
+						Server
+					</span>
+				</h1>
+				<p className="text-lg text-foreground/70">
+					Play fun and entertaining games with Would You, featuring user polls
+					and customization. Play Would You Rather, Truth or Dare, Never Have
+					I Ever, Higher or Lower, and What Would You Do!
+				</p>
+				<div className="flex flex-col lg:flex-row mt-8 items-center gap-4">
+					<AvatarGroup avatars={servers.reverse().slice(0, 5)} />
+					<span className="text-muted-foreground">
+						Trusted by your favorite servers!
+					</span>
+				</div>
+				<Link
+					href="/invite"
+					target="_blank"
+					className={cn(
+						'mt-8 flex gap-2 w-fit justify-center',
+						buttonVariants({ variant: 'default' })
+					)}
 				>
-					<h1 className="text-[2rem] sm:text-5xl md:text-6xl font-bold leading-normal mb-8">
-						Entertain Your
-						<br />
-						<span className="text-brand-red-100 drop-shadow-red-glow">
-							Discord
-						</span>{' '}
-						<span className="text-brand-blue-100 drop-shadow-blue-glow">
-							Server
-						</span>
-					</h1>
-					<p className="text-lg text-foreground/70">
-						Play fun and entertaining games with Would You, featuring user polls
-						and customization. Play Would You Rather, Truth or Dare, Never Have
-						I Ever, Higher or Lower, and What Would You Do!
-					</p>
-					<div className="flex flex-col lg:flex-row mt-8 items-center gap-4">
-						<AvatarGroup avatars={servers.reverse().slice(0, 5)} />
-						<span className="text-muted-foreground">
-							Trusted by your favorite servers!
-						</span>
-					</div>
-					<Link
-						href="/invite"
-						target="_blank"
-						className={cn(
-							'mt-8 flex gap-2 w-fit justify-center',
-							buttonVariants({ variant: 'default' })
-						)}
+					Unleash the Fun
+					<svg
+						width="13"
+						height="13"
+						fillRule="evenodd"
+						clipRule="evenodd"
+						viewBox="0 0 509 511.54"
 					>
-						Unleash the Fun
-						<svg
-							width="13"
-							height="13"
-							fillRule="evenodd"
-							clipRule="evenodd"
-							viewBox="0 0 509 511.54"
-						>
-							<path
-								fillRule="nonzero"
-								fill="#fff"
-								d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z"
-							/>
-						</svg>
-					</Link>
-				</m.div>
-				<MainDiscordEmbed initialQuestion={initialRatherQuestion} />
-			</section>
-
-			<section
-				id="slider"
-				className="mt-36"
-			>
+						<path
+							fillRule="nonzero"
+							fill="#fff"
+							d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z" />
+					</svg>
+				</Link>
+			</motion.div>
+			<MainDiscordEmbed initialQuestion={initialRatherQuestion} />
+		</section><section
+			id="slider"
+			className="mt-36"
+		>
 				<LandingWave className="text-background-darker dark:text-background-dark -mb-32 min-w-[2560px]" />
 				<div className="w-full bg-background-darker dark:bg-background-dark px-8 pb-12 text-center text-3xl md:text-4xl text-foreground md:-mt-20 md:pb-28">
 					<div className="w-dvw px-8 mx-auto">
@@ -118,19 +114,15 @@ export function HomeContent({
 					<div className="w-dvw mx-auto overflow-x-hidden">
 						<ServerMarquee
 							servers={servers.slice(0, Math.ceil(servers.length / 2))}
-							speed={40}
-						/>
+							speed={40} />
 						<ServerMarquee
 							servers={servers.slice(Math.ceil(servers.length / 2))}
 							speed={30}
-							direction="right"
-						/>
+							direction="right" />
 					</div>
 				</div>
-			</section>
-
-			<section className="mt-20 flex w-full max-w-8xl flex-col items-center gap-20 px-8 text-foreground">
-				<m.div
+			</section><section className="mt-20 flex w-full max-w-8xl flex-col items-center gap-20 px-8 text-foreground">
+				<motion.div
 					initial={{ opacity: 0, transform: 'translateY(15px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
 					viewport={{ once: true }}
@@ -143,59 +135,48 @@ export function HomeContent({
 					<h3 className="mt-4 text-center text-2xl">
 						What Does Would You Offer To Your Server?
 					</h3>
-				</m.div>
+				</motion.div>
 
 				<FeatureItem
 					reverse
 					right={<DailyMessageEmbed threadName={threadName} />}
-					left={
-						<>
-							<h4 className="text-center text-3xl font-bold md:text-left">
-								Increase user engagement
-							</h4>
-							<p className="mx-auto text-center text-lg text-foreground/70 md:text-left">
-								Keep your community engaged and active with daily &quot;Would
-								You Rather&quot; messages!
-							</p>
-						</>
-					}
-				/>
+					left={<>
+						<h4 className="text-center text-3xl font-bold md:text-left">
+							Increase user engagement
+						</h4>
+						<p className="mx-auto text-center text-lg text-foreground/70 md:text-left">
+							Keep your community engaged and active with daily &quot;Would
+							You Rather&quot; messages!
+						</p>
+					</>} />
 
 				<FeatureItem
-					left={
-						<>
-							<h4 className="text-center text-3xl font-bold md:text-left">
-								Entertain your server
-							</h4>
-							<p className="text-center text-lg text-foreground/70 md:text-left">
-								Entertain your discord server with fun and interactive games
-								like Would You Rather, Truth or Dare, Never Have I Ever, Higher
-								or Lower, and What Would You Do!
-							</p>
-						</>
-					}
-					right={<HigherLowerEmbed currentDate={currentDate} />}
-				/>
+					left={<>
+						<h4 className="text-center text-3xl font-bold md:text-left">
+							Entertain your server
+						</h4>
+						<p className="text-center text-lg text-foreground/70 md:text-left">
+							Entertain your discord server with fun and interactive games
+							like Would You Rather, Truth or Dare, Never Have I Ever, Higher
+							or Lower, and What Would You Do!
+						</p>
+					</>}
+					right={<HigherLowerEmbed currentDate={currentDate} />} />
 
 				<FeatureItem
 					reverse
 					right={<NeverHaveIEverEmbed initialQuestion={initialNhieQuestion} />}
-					left={
-						<>
-							<h4 className="text-center text-3xl font-bold md:text-left">
-								Upgrade your server
-							</h4>
-							<p className="text-center text-lg text-foreground/70 md:text-left">
-								Upgrade your server with Would You, featuring a wide variety of
-								games and customized questions.
-							</p>
-						</>
-					}
-				/>
-			</section>
-
-			<section className="mt-36 w-full bg-hover-light px-9 py-12">
-				<m.h2
+					left={<>
+						<h4 className="text-center text-3xl font-bold md:text-left">
+							Upgrade your server
+						</h4>
+						<p className="text-center text-lg text-foreground/70 md:text-left">
+							Upgrade your server with Would You, featuring a wide variety of
+							games and customized questions.
+						</p>
+					</>} />
+			</section><section className="mt-36 w-full bg-hover-light px-9 py-12">
+				<motion.h2
 					initial={{ opacity: 0, transform: 'translateY(10px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
 					viewport={{ once: true }}
@@ -206,8 +187,8 @@ export function HomeContent({
 					<span className="bg-gradient-brand bg-clip-text font-bold text-transparent">
 						Would You
 					</span>
-				</m.h2>
-				<m.h3
+				</motion.h2>
+				<motion.h3
 					initial={{ opacity: 0, transform: 'translateY(10px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
 					viewport={{ once: true }}
@@ -215,8 +196,8 @@ export function HomeContent({
 					className="mt-4 text-center text-xl text-foreground/70"
 				>
 					Invite To Your Server Now!
-				</m.h3>
-				<m.div
+				</motion.h3>
+				<motion.div
 					initial={{ opacity: 0, transform: 'translateY(-20px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
 					viewport={{ once: true }}
@@ -229,8 +210,7 @@ export function HomeContent({
 					>
 						<Button>Invite</Button>
 					</Link>
-				</m.div>
-			</section>
-		</LazyMotion>
+				</motion.div>
+			</section></>
 	)
 }
diff --git a/components/Premium/Content.tsx b/components/Premium/Content.tsx
new file mode 100644
index 00000000..aa2a35d9
--- /dev/null
+++ b/components/Premium/Content.tsx
@@ -0,0 +1,305 @@
+// TODO remove the use client directive in favor of a server component
+'use client'
+
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger
+} from '@/components/ui/dialog'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from '@/components/ui/select'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import DiscordLoginButton from '@/components/DiscordLoginButton'
+import { useIdToken } from '@/helpers/hooks'
+import { Suspense, useState } from 'react'
+import { getServer } from '@/lib/redis'
+import Image from 'next/image'
+import Head from 'next/head'
+import { ServersListSkeleton } from '@/app/premium/_components'
+import CheckoutButton from '@/app/premium/_components/checkoutButton'
+import { CloseIcon, StripeSquare, ApplePay, GooglePay, MasterCard, Visa, PayPal, Stripe } from '@/app/premium/_components/icons'
+import PlansComparison from '@/app/premium/_components/PlansComparison'
+import { PricingData, DiscordGuild } from '@/app/premium/_types'
+import { CheckIcon, Link } from 'lucide-react'
+
+const pricingData: PricingData = {
+	price: { monthly: 2.99, yearly: 29.99 },
+	premium: {
+		'All Freemium Features': true,
+		'Unlimited Custom Questions': true,
+		'Customized Webhook Branding': true,
+		'Prevent Questions from Repeating': true,
+		'Get Rid of Button Ads': true,
+		'Auto Pin Daily Messages': true,
+		'Support the Development': true
+	}
+}
+
+const data = [
+	{
+		criteria: '5 Gamemodes',
+		free: true,
+		premium: true
+	},
+	{
+		criteria: 'Question of the Day',
+		free: true,
+		premium: true
+	},
+	{
+		criteria: 'Question Repeat Prevention',
+		free: false,
+		premium: true
+	},
+	{
+		criteria: 'Thousands of Questions',
+		free: true,
+		premium: true
+	},
+	{
+		criteria: 'Custom Questions',
+		free: 'Limited (100 per category)',
+		premium: 'Unlimited'
+	},
+	{
+		criteria: 'Custom Webhook Branding',
+		free: false,
+		premium: true
+	},
+	{
+		criteria: 'Auto Pin Daily Messages',
+		free: false,
+		premium: true
+	}
+]
+
+export default function Premium() {
+	const [isMonthly, setIsMonthly] = useState(true)
+	const [serversData, setServersData] = useState<DiscordGuild[]>([])
+	const [serverId, setServerId] = useState<string>()
+	const idToken = useIdToken(null)
+
+	const handleChange = () => {
+		setIsMonthly(!isMonthly)
+	}
+
+	const fetchData = async () => {
+		const servers = (await getServer()) as DiscordGuild[]
+		setServersData(servers)
+	}
+
+	return (
+		<>
+			<Head>
+				<title>Would You - Premium</title>
+			</Head>
+			<main className="relative mb-40 flex w-full justify-center">
+				<div className="flex w-full max-w-8xl flex-col gap-52 px-8">
+						<div>
+							<div className="container mx-auto px-4">
+								<h1 className="text-4xl font-bold text-yellow-500 drop-shadow-gold-glow">
+									Premium
+								</h1>
+								<p className="text-customGrayText mb-6 mt-4 text-foreground/70">
+									Select the plan that suits your needs and benefit from our
+									discord bot.
+								</p>
+								<div className="mx-auto my-4 max-w-2xl text-center">
+									<label className="group relative mx-auto flex h-16 w-full max-w-[13rem] cursor-pointer items-center justify-center pl-6 pr-8 rounded-2xl bg-background-light text-xl select-none">
+										<input
+											type="checkbox"
+											className="peer appearance-none"
+											checked={!isMonthly}
+											onChange={handleChange}
+										/>
+										<span className="absolute top-0 left-2 z-10 flex h-16 w-[6rem] cursor-pointer items-center duration-300 ease-in-out after:h-12 after:w-[10rem] sm:after:w-[20rem] after:rounded-lg after:bg-brand-primary-light dark:after:bg-brand-primary after:shadow-md after:duration-300 peer-checked:after:translate-x-[6rem]"></span>
+										<div className="z-20 flex gap-10 text-base font-bold text-foreground">
+											<div className={`${!isMonthly && 'text-foreground/50'}`}>
+												Monthly
+											</div>
+											<div className={`${isMonthly && 'text-foreground/50'}`}>
+												Yearly
+											</div>
+										</div>
+									</label>
+								</div>
+								<div className="mx-auto flex w-fit flex-col">
+									<div className="mb-4 w-auto rounded-[1.7rem] bg-gradient-premium p-[4px]">
+										<div className="relative overflow-hidden rounded-3xl bg-background-dark px-8 py-8">
+											<span
+												className={`${!isMonthly ? 'top-7' : 'pointer-events-none -top-10 opacity-0'} hidden xs:flex text-mb absolute right-6 cursor-default rounded-xl bg-foreground/10 px-4 py-2 text-foreground transition-all duration-300`}
+											>
+												2 months free
+											</span>
+											<h4 className="font-heading mb-2 text-left text-2xl font-bold text-foreground 2xl:mb-4">
+												Premium
+											</h4>
+											<span
+												className={`${isMonthly && 'absolute -top-10 pointer-events-none opacity-0'} flex xs:hidden w-fit text-mb cursor-default rounded-xl bg-foreground/15 px-4 py-2 text-foreground transition-all duration-300`}
+											>
+												2 months free
+											</span>
+											<div className="flex items-end justify-start">
+												<div className="mr-2 mt-4 text-left text-4xl font-bold text-foreground sm:text-5xl">
+													{isMonthly ?
+														pricingData.price.monthly
+													:	pricingData.price.yearly}
+												</div>
+												<div className="text-foreground/60">
+													{isMonthly ? '/ month' : '/ year'}
+												</div>
+											</div>
+											<p className="mb-8 mt-1 text-left leading-loose text-foreground/60">
+												Experience the full power of our Would You bot.
+											</p>
+											<ul className="mb-16 text-foreground">
+												{Object.keys(pricingData['premium']).map(
+													(text, index) => (
+														<li
+															className="mb-4 flex items-center"
+															key={index}
+														>
+															{(
+																pricingData['premium'][
+																	text as keyof (typeof pricingData)['premium']
+																]
+															) ?
+																<CheckIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-brand-primary" />
+															:	<CloseIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-muted-foreground" />
+															}
+															<span>{text}</span>
+														</li>
+													)
+												)}
+											</ul>
+											<Dialog>
+												{idToken ?
+													<DialogTrigger
+														onClick={() => {
+															fetchData()
+														}}
+														className="flex w-full items-center justify-center gap-2 rounded-xl bg-green-500 py-2 font-bold leading-loose text-foreground transition hover:bg-green-600 focus:ring-0"
+													>
+														Continue with Stripe
+														<StripeSquare className="h-5 w-5" />
+													</DialogTrigger>
+												:	<DiscordLoginButton
+														className="rounded-xl font-bold"
+														redirect="/premium"
+													/>
+												}
+												<DialogContent className="w-fit border-none bg-background">
+													<DialogHeader>
+														<DialogTitle className="text-xl font-bold text-foreground">
+															<div>
+																Buy{' '}
+																<span className="text-brand-red-100">
+																	Would
+																</span>{' '}
+																<span className="text-brand-blue-100">You</span>
+																{isMonthly ? ' Monthly' : ' Yearly'}
+															</div>
+														</DialogTitle>
+													</DialogHeader>
+													<DialogDescription className="w-full !rounded-2xl">
+														<Select
+															onValueChange={setServerId}
+															defaultValue={serverId ? serverId : ''}
+														>
+															<SelectTrigger className="w-[300px] sm:w-[400px]">
+																<SelectValue placeholder="Select a server to continue" />
+															</SelectTrigger>
+															<SelectContent className="max-h-[40vh] max-w-[300px] sm:max-w-[400px]">
+																<Suspense fallback={<ServersListSkeleton />}>
+																	{serversData.map((server: DiscordGuild) => (
+																		<SelectItem
+																			key={server.id}
+																			value={server.id}
+																		>
+																			<div className="flex items-center gap-2">
+																				<Avatar className="h-6 w-6">
+																					<AvatarImage
+																						src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.webp`}
+																					/>
+																					<AvatarFallback>
+																						<Image
+																							src="https://cdn.discordapp.com/embed/avatars/0.png"
+																							alt="avatar example"
+																							width={90}
+																							height={90}
+																						/>
+																					</AvatarFallback>
+																				</Avatar>
+																				<span className="line-clamp-1 text-ellipsis">
+																					{server.name}
+																				</span>
+																			</div>
+																		</SelectItem>
+																	))}
+																</Suspense>
+															</SelectContent>
+														</Select>
+														<CheckoutButton
+															monthly={String(isMonthly)}
+															priceId={
+																isMonthly ?
+																	process.env
+																		.NEXT_PUBLIC_PREMIUM_MONTHLY_PRICE_ID!
+																:	process.env
+																		.NEXT_PUBLIC_PREMIUM_YEARLY_PRICE_ID!
+															}
+															serverId={serverId}
+														/>
+													</DialogDescription>
+												</DialogContent>
+												{idToken ?
+													<p className="text-foreground/60 text-center pt-3 mb-[-15] text-wrap">
+														Or click{' '}
+														<a
+															href="/api/subs/manage"
+															className="underline font-bold text-foreground/70"
+														>
+															here
+														</a>{' '}
+														to manage your subscriptions
+													</p>
+												:	null}
+											</Dialog>
+										</div>
+									</div>
+									<a
+										href="https://stripe.com/"
+										target="_blank"
+										className="flex flex-wrap justify-center gap-2 sm:gap-3"
+									>
+										<Stripe />
+										<ApplePay />
+										<GooglePay />
+										<MasterCard />
+										<Visa />
+										<PayPal />
+										<Link />
+									</a>
+								</div>
+							</div>
+						</div>
+						<div>
+							<PlansComparison
+								data={data}
+								rowSeparator
+								colSeparator
+							/>
+						</div>
+				</div>
+			</main>
+		</>
+	)
+}
diff --git a/components/cookies/cookie-banner.tsx b/components/cookies/cookie-banner.tsx
new file mode 100644
index 00000000..49b356eb
--- /dev/null
+++ b/components/cookies/cookie-banner.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { useCookieContext, CookieDialog } from '@/components/cookies'
+import { Button } from '@/components/ui/button'
+import { useState, useEffect } from 'react'
+
+export function CookieBanner() {
+  const { setShowBanner, state, setPreferences } = useCookieContext()
+  const [showModal, setShowModal] = useState(false)
+
+  useEffect(() => {
+    const cookieString = document.cookie
+    const isCookiesSet = cookieString.includes('cookiePreferences=')
+    setShowBanner(!isCookiesSet)
+  }, [setShowBanner])
+
+  const handleAcceptAll = () => {
+    const allPreferences = {
+      necessary: true,
+      analytics: true
+    }
+    setPreferences(allPreferences)
+    setShowBanner(false)
+  }
+
+  const handleRequiredOnly = () => {
+    const requiredPreferences = {
+      necessary: true,
+      analytics: false
+    }
+    setPreferences(requiredPreferences)
+    setShowBanner(false)
+  }
+
+  if (!state.preferences.necessary) return null
+
+  return (
+    <>
+      <div className="fixed inset-x-0 bottom-0 bg-hover-light shadow-md z-50">
+        <div className="max-w-8xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-8">
+          <div className="text-sm">
+            We use cookies to enhance your browsing experience and analyze our
+            traffic.
+          </div>
+          <div className="flex flex-wrap justify-center sm:flex-nowrap gap-4">
+            <Button
+              variant="ghost"
+              className="h-10 hover:bg-foreground/5"
+              onClick={() => setShowModal(true)}
+            >
+              Customize
+            </Button>
+            <Button
+              variant="secondary"
+              className="h-10 bg-foreground/10 hover:bg-foreground/5"
+              onClick={handleRequiredOnly}
+            >
+              Required Only
+            </Button>
+            <Button
+              className="h-10 bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
+              onClick={handleAcceptAll}
+            >
+              Accept All
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <CookieDialog
+        open={showModal}
+        preferences={state.preferences}
+        onSave={setPreferences}
+        onClose={() => setShowModal(false)}
+      />
+    </>
+  )
+}
diff --git a/components/cookies/cookie-dialog.tsx b/components/cookies/cookie-dialog.tsx
new file mode 100644
index 00000000..9dfa27f1
--- /dev/null
+++ b/components/cookies/cookie-dialog.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from '@/components/ui/dialog'
+import { CookiePreferences } from '@/helpers/hooks/useCookies'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+interface CookieDialogProps {
+  preferences: CookiePreferences
+  onSave: (preferences: CookiePreferences) => void
+  onClose: () => void
+  open: boolean
+}
+
+export function CookieDialog({
+  preferences,
+  onSave,
+  onClose,
+  open
+}: CookieDialogProps) {
+  const [localPreferences, setLocalPreferences] = useState(preferences)
+  const router = useRouter()
+
+  const handleSavePreferences = () => {
+    onSave(localPreferences)
+    onClose()
+    router.refresh()
+  }
+
+  const handleReset = () => {
+    setLocalPreferences({
+      necessary: true,
+      analytics: true
+    })
+  }
+
+  const preferenceDescriptions: Record<keyof CookiePreferences, string> = {
+    necessary: 'All the necessary cookies needed to run the website.',
+    analytics: 'Optional analytics used to enhance your analytics.'
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onClose}
+    >
+      <DialogContent className="sm:max-w-[425px] rounded-md">
+        <DialogHeader>
+          <DialogTitle>Cookie Preferences</DialogTitle>
+          <DialogDescription>
+            Customize your cookie preferences here. You can enable or disable
+            different categories of cookies.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {Object.entries(localPreferences).map(
+            ([key, value]: [string, boolean]) => (
+              <div
+                key={key}
+                className="flex gap-2 items-center justify-between"
+              >
+                <div className="flex flex-col gap-2">
+                  <Label
+                    htmlFor={key}
+                    className="capitalize"
+                  >
+                    {key}
+                  </Label>
+                  <span className="text-sm text-muted-foreground">
+                    {preferenceDescriptions[key as keyof CookiePreferences]}
+                  </span>
+                </div>
+                <Switch
+                  id={key}
+                  checked={value}
+                  onCheckedChange={(checked) =>
+                    setLocalPreferences((prev) => ({
+                      ...prev,
+                      [key]: checked
+                    }))
+                  }
+                  disabled={key === 'necessary'}
+                  className="data-[state=checked]:bg-brand-primary"
+                />
+              </div>
+            )
+          )}
+        </div>
+        <DialogFooter className="gap-2">
+          <Button
+            variant="outline"
+            className="order-last sm:order-first"
+            onClick={handleReset}
+          >
+            Reset
+          </Button>
+          <Button
+            variant="secondary"
+            className="order-first sm:order-last"
+            onClick={handleSavePreferences}
+          >
+            Save Preferences
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/cookies/cookie-provider.tsx b/components/cookies/cookie-provider.tsx
new file mode 100644
index 00000000..bac423ac
--- /dev/null
+++ b/components/cookies/cookie-provider.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import React, {
+  createContext,
+  useContext,
+  useReducer,
+  useCallback,
+  useEffect
+} from 'react'
+import { CookieDialog, CookieBanner } from '@/components/cookies'
+import { CookiePreferences } from '@/helpers/hooks/useCookies'
+
+const actionTypes = {
+  SHOW_DIALOG: 'SHOW_DIALOG',
+  HIDE_DIALOG: 'HIDE_DIALOG',
+  SET_PREFERENCES: 'SET_PREFERENCES',
+  REVOKE_PERMISSIONS: 'REVOKE_PERMISSIONS',
+  SET_SHOW_BANNER: 'SET_SHOW_BANNER'
+} as const
+
+interface CookieState {
+  showDialog: boolean
+  showBanner: boolean
+  preferences: CookiePreferences
+}
+
+const initialState: CookieState = {
+  showDialog: false,
+  showBanner: false,
+  preferences: {
+    necessary: true,
+    analytics: true
+  }
+}
+
+function cookieReducer(state: CookieState, action: any): CookieState {
+  switch (action.type) {
+    case actionTypes.SHOW_DIALOG:
+      return { ...state, showDialog: true }
+    case actionTypes.HIDE_DIALOG:
+      return { ...state, showDialog: false }
+    case actionTypes.SET_PREFERENCES:
+      return { ...state, preferences: action.payload, showBanner: false }
+    case actionTypes.REVOKE_PERMISSIONS:
+      return { ...state, preferences: initialState.preferences }
+    case actionTypes.SET_SHOW_BANNER:
+      return { ...state, showBanner: action.payload }
+    default:
+      return state
+  }
+}
+
+const CookieContext = createContext<{
+  state: CookieState
+  showCookieDialog: () => void
+  hideCookieDialog: () => void
+  setPreferences: (preferences: CookiePreferences) => void
+  setShowBanner: (show: boolean) => void
+}>({
+  state: initialState,
+  showCookieDialog: () => {},
+  hideCookieDialog: () => {},
+  setPreferences: () => {},
+  setShowBanner: () => {}
+})
+
+export const CookieProvider: React.FC<{ children: React.ReactNode }> = ({
+  children
+}) => {
+  const [state, dispatch] = useReducer(cookieReducer, initialState)
+
+  const showCookieDialog = useCallback(
+    () => dispatch({ type: actionTypes.SHOW_DIALOG }),
+    []
+  )
+  const hideCookieDialog = useCallback(
+    () => dispatch({ type: actionTypes.HIDE_DIALOG }),
+    []
+  )
+
+  const setPreferences = useCallback((preferences: CookiePreferences) => {
+    dispatch({ type: actionTypes.SET_PREFERENCES, payload: preferences })
+    document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; path=/`
+  }, [])
+
+  const setShowBanner = useCallback((show: boolean) => {
+    dispatch({ type: actionTypes.SET_SHOW_BANNER, payload: show })
+  }, [])
+
+  useEffect(() => {
+    const cookieString = document.cookie
+    const cookiePreferencesMatch = cookieString.match(
+      /cookiePreferences=([^;]+)/
+    )
+
+    if (cookiePreferencesMatch) {
+      const cookiePreferences = JSON.parse(cookiePreferencesMatch[1])
+      dispatch({
+        type: actionTypes.SET_PREFERENCES,
+        payload: cookiePreferences
+      })
+    } else {
+      setShowBanner(true)
+    }
+  }, [setShowBanner])
+
+  return (
+    <CookieContext.Provider
+      value={{
+        state,
+        showCookieDialog,
+        hideCookieDialog,
+        setPreferences,
+        setShowBanner
+      }}
+    >
+      {children}
+      {state.showBanner && <CookieBanner />}
+      {state.showDialog && (
+        <CookieDialog
+          preferences={state.preferences}
+          onSave={setPreferences}
+          onClose={hideCookieDialog}
+          open={state.showDialog}
+        />
+      )}
+    </CookieContext.Provider>
+  )
+}
+
+export const useCookieContext = () => useContext(CookieContext)
diff --git a/components/cookies/index.ts b/components/cookies/index.ts
new file mode 100644
index 00000000..09ebb5a6
--- /dev/null
+++ b/components/cookies/index.ts
@@ -0,0 +1,5 @@
+import { CookieProvider, useCookieContext } from './cookie-provider'
+import { CookieBanner } from './cookie-banner'
+import { CookieDialog } from './cookie-dialog'
+
+export { CookieProvider, useCookieContext, CookieBanner, CookieDialog }
diff --git a/components/plausible-script.tsx b/components/plausible-script.tsx
new file mode 100644
index 00000000..84cdf06d
--- /dev/null
+++ b/components/plausible-script.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { useCookiePreferences } from '@/helpers/hooks/useCookies'
+
+export function PlausibleScript() {
+	const { hasAnalytics } = useCookiePreferences()
+
+	if (hasAnalytics()) {
+		return (
+			<script
+				defer
+				data-domain="wouldyoubot.gg"
+				src="https://stats.wouldyoubot.gg/js/script.js"
+			/>
+		)
+	} else {
+		return null
+	}
+}
diff --git a/helpers/hooks/useCookies.ts b/helpers/hooks/useCookies.ts
index ad5a3c8a..90c49c71 100644
--- a/helpers/hooks/useCookies.ts
+++ b/helpers/hooks/useCookies.ts
@@ -1,15 +1,59 @@
+'use client'
+
 import { useIsClient } from '@/helpers/hooks/useIsClient'
+import { useState, useEffect } from 'react'
 import { useMemo } from 'react'
 
 export function useCookies() {
-	const isClient = useIsClient()
-	const cookies_ = isClient ? window?.document?.cookie : ''
-
-	return useMemo(() => {
-		return cookies_.split(';').reduce((acc, cookie) => {
-			const [key, value] = cookie.split('=')
-			acc.set(key.trim(), value)
-			return acc
-		}, new Map<string, string>())
-	}, [cookies_])
+  const isClient = useIsClient()
+  const cookies_ = isClient ? window?.document?.cookie : ''
+
+  return useMemo(() => {
+    return cookies_.split(';').reduce((acc, cookie) => {
+      const [key, value] = cookie.split('=')
+      acc.set(key.trim(), value)
+      return acc
+    }, new Map<string, string>())
+  }, [cookies_])
+}
+
+export interface CookiePreferences {
+  necessary: boolean
+  analytics: boolean
+}
+
+export const useCookiePreferences = () => {
+  const cookies = useCookies()
+  const [data, setData] = useState<CookiePreferences>({
+    necessary: true,
+    analytics: true
+  })
+  const [showBanner, setShowBanner] = useState(true)
+
+  useEffect(() => {
+    const savedPreferences = cookies.get('cookiePreferences')
+    if (savedPreferences) {
+      setData(JSON.parse(savedPreferences))
+      setShowBanner(false)
+    }
+  }, [cookies])
+
+  const savePreferences = (preferences: typeof data) => {
+    setData(preferences)
+    const expires = new Date(Date.now() + 31 * 864e5).toUTCString()
+    document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; expires=${expires}; path=/`
+  }
+
+  const hasAnalytics = () => {
+    return data.analytics
+  }
+
+  return {
+    data,
+    setData,
+    showBanner,
+    setShowBanner,
+    savePreferences,
+    hasAnalytics
+  }
 }
diff --git a/package.json b/package.json
index 0e84f7da..0e61768e 100644
--- a/package.json
+++ b/package.json
@@ -41,11 +41,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
-    "framer-motion": "^11.5.4",
     "gray-matter": "^4.0.3",
     "grey-matter": "^0.0.0",
     "lucide-react": "^0.468.0",
     "mongoose": "^8.4.0",
+    "motion": "^11.16.0",
     "next": "15.1.3",
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65b0c375..01d386a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,9 +96,6 @@ importers:
       cmdk:
         specifier: 1.0.0
         version: 1.0.0(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      framer-motion:
-        specifier: ^11.5.4
-        version: 11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       gray-matter:
         specifier: ^4.0.3
         version: 4.0.3
@@ -111,6 +108,9 @@ importers:
       mongoose:
         specifier: ^8.4.0
         version: 8.9.2
+      motion:
+        specifier: ^11.16.0
+        version: 11.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       next:
         specifier: 15.1.3
         version: 15.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -2110,8 +2110,8 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@11.15.0:
-    resolution: {integrity: sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==}
+  framer-motion@11.16.0:
+    resolution: {integrity: sha512-oL2AWqLQuw0+CNEUa0sz3mWC/n3i147CckvpQn8bLRs30b+HxTxlRi0YR2FpHHhAbWV7DKjNdHU42KHLfBWh/g==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -2722,11 +2722,25 @@ packages:
     resolution: {integrity: sha512-mLWynmZS1v8HTeMxyLhskQncS1SkrjW1eLNuFDYGQMQ/5QrFrxTLNwWXeCRZeKT2lXyaxW8bnJC9AKPT9jYMkw==}
     engines: {node: '>=16.20.1'}
 
-  motion-dom@11.14.3:
-    resolution: {integrity: sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==}
+  motion-dom@11.16.0:
+    resolution: {integrity: sha512-4bmEwajSdrljzDAYpu6ceEdtI4J5PH25fmN8YSx7Qxk6OMrC10CXM0D5y+VO/pFZjhmCvm2bGf7Rus482kwhzA==}
 
-  motion-utils@11.14.3:
-    resolution: {integrity: sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==}
+  motion-utils@11.16.0:
+    resolution: {integrity: sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==}
+
+  motion@11.16.0:
+    resolution: {integrity: sha512-d7EhBRFFBm6Ee6Q81Od45KOr3feA7UL/eAL+OKNZmf6rQJEwiXfvc/nkM522Ahiuvole1/8rNQyOX8JHKr8QoQ==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
   mpath@0.9.0:
     resolution: {integrity: sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==}
@@ -5327,8 +5341,8 @@ snapshots:
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.3(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.1.0(eslint@8.57.1)
@@ -5347,7 +5361,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -5359,22 +5373,22 @@ snapshots:
       is-glob: 4.0.3
       stable-hash: 0.0.4
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -5385,7 +5399,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -5619,10 +5633,10 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@11.15.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+  framer-motion@11.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
-      motion-dom: 11.14.3
-      motion-utils: 11.14.3
+      motion-dom: 11.16.0
+      motion-utils: 11.16.0
       tslib: 2.8.1
     optionalDependencies:
       react: 19.0.0
@@ -6430,9 +6444,19 @@ snapshots:
       - socks
       - supports-color
 
-  motion-dom@11.14.3: {}
+  motion-dom@11.16.0:
+    dependencies:
+      motion-utils: 11.16.0
 
-  motion-utils@11.14.3: {}
+  motion-utils@11.16.0: {}
+
+  motion@11.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      framer-motion: 11.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
 
   mpath@0.9.0: {}
 

From 1dd490a2a5adfa697562ca0c1311b721a4ad5584 Mon Sep 17 00:00:00 2001
From: mezotv <mezotv@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:37:30 +0000
Subject: [PATCH 3/3] chore(style): format files

---
 app/premium/page.tsx                   |  48 +--
 components/Embeds/MainDiscordEmbed.tsx | 278 +++++++++---------
 components/Homepage/Content.tsx        | 197 +++++++------
 components/Premium/Content.tsx         | 390 +++++++++++++------------
 components/cookies/cookie-banner.tsx   | 128 ++++----
 components/cookies/cookie-dialog.tsx   | 194 ++++++------
 components/cookies/cookie-provider.tsx | 194 ++++++------
 helpers/hooks/useCookies.ts            |  90 +++---
 8 files changed, 771 insertions(+), 748 deletions(-)

diff --git a/app/premium/page.tsx b/app/premium/page.tsx
index 9f922975..7662e731 100644
--- a/app/premium/page.tsx
+++ b/app/premium/page.tsx
@@ -2,34 +2,34 @@ import Content from '@/components/Premium/Content'
 import type { Metadata, Viewport } from 'next'
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://wouldyoubot.gg'),
-  title: 'Premium - Would You Bot',
-  description: 'Get premium for Would You Bot and unlock all features!',
-  twitter: {
-    title: 'Premium - Would You Bot',
-    description: 'Get premium for Would You Bot and unlock all features!'
-  },
-  openGraph: {
-    title: 'Premium - Would You Bot',
-    description: 'Get premium for Would You Bot and unlock all features!'
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
+	metadataBase: new URL('https://wouldyoubot.gg'),
+	title: 'Premium - Would You Bot',
+	description: 'Get premium for Would You Bot and unlock all features!',
+	twitter: {
+		title: 'Premium - Would You Bot',
+		description: 'Get premium for Would You Bot and unlock all features!'
+	},
+	openGraph: {
+		title: 'Premium - Would You Bot',
+		description: 'Get premium for Would You Bot and unlock all features!'
+	},
+	robots: {
+		index: true,
+		follow: true
+	}
 }
 
 export const viewport: Viewport = {
-  themeColor: '#facc15',
-  maximumScale: 5
+	themeColor: '#facc15',
+	maximumScale: 5
 }
 
 export default function Premium() {
-  return (
-    <>
-      <main className="relative mb-40 flex w-full justify-center">
-        <Content />
-      </main>
-    </>
-  )
+	return (
+		<>
+			<main className="relative mb-40 flex w-full justify-center">
+				<Content />
+			</main>
+		</>
+	)
 }
diff --git a/components/Embeds/MainDiscordEmbed.tsx b/components/Embeds/MainDiscordEmbed.tsx
index a5b540f1..263a8c07 100644
--- a/components/Embeds/MainDiscordEmbed.tsx
+++ b/components/Embeds/MainDiscordEmbed.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import {
-  DiscordActionRow,
-  DiscordAttachments,
-  DiscordButton,
-  DiscordCommand,
-  DiscordEmbed,
-  DiscordEmbedDescription,
-  DiscordEmbedFooter,
-  DiscordMessage,
-  DiscordMessages
+	DiscordActionRow,
+	DiscordAttachments,
+	DiscordButton,
+	DiscordCommand,
+	DiscordEmbed,
+	DiscordEmbedDescription,
+	DiscordEmbedFooter,
+	DiscordMessage,
+	DiscordMessages
 } from '@skyra/discord-components-react'
 import { getRandomQuestion } from '@/helpers/getRandomQuestion'
 import profiles from '@/data/profiles.json'
@@ -18,140 +18,140 @@ import { motion } from 'motion/react'
 import { FC, useState } from 'react'
 
 interface MainProps {
-  initialQuestion: string
+	initialQuestion: string
 }
 
 const MainDiscordEmbed: FC<MainProps> = ({ initialQuestion }) => {
-  const { theme } = useTheme()
-  const [replayedRounds, setReplayedRounds] = useState(0)
-  const [currentQuestion, setCurrentQuestion] = useState(initialQuestion)
+	const { theme } = useTheme()
+	const [replayedRounds, setReplayedRounds] = useState(0)
+	const [currentQuestion, setCurrentQuestion] = useState(initialQuestion)
 
-  const replay = () => {
-    if (replayedRounds < 3) {
-      setCurrentQuestion(getRandomQuestion('rather'))
-      setReplayedRounds(replayedRounds + 1)
-    }
-  }
+	const replay = () => {
+		if (replayedRounds < 3) {
+			setCurrentQuestion(getRandomQuestion('rather'))
+			setReplayedRounds(replayedRounds + 1)
+		}
+	}
 
-  return (
-    <motion.div
-      initial={{ opacity: 0, transform: 'translateY(20px)' }}
-      whileInView={{ opacity: 1, transform: 'translateY(0)' }}
-      transition={{ duration: 0.7, ease: 'easeInOut' }}
-      viewport={{ once: true }}
-      style={{ width: '90%', marginLeft: 'auto', marginRight: 'auto' }}
-    >
-      <DiscordMessages
-        lightTheme={theme === 'light' ? true : false}
-        className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow sm:w-2/3 lg:w-auto"
-      >
-        <DiscordMessage
-          profile="wouldyou"
-          author={profiles.wouldyou.author}
-          avatar={profiles.wouldyou.avatar}
-          roleColor={profiles.wouldyou.roleColor}
-          bot={profiles.wouldyou.bot}
-          verified={profiles.wouldyou.verified}
-          edited={replayedRounds > 0}
-        >
-          <DiscordCommand
-            slot="reply"
-            profile="dominik"
-            author={profiles.dominik.author}
-            avatar={profiles.dominik.avatar}
-            roleColor={profiles.dominik.roleColor}
-            // @ts-expect-error
-            clanIcon={profiles.dominik.clanIcon}
-            clanTag={profiles.dominik.clanTag}
-            command="/wouldyourather"
-            lightTheme={theme === 'light'}
-          />
-          <DiscordEmbed
-            slot="embeds"
-            color="#1e88e5"
-          >
-            <DiscordEmbedDescription slot="description">
-              {currentQuestion}
-            </DiscordEmbedDescription>
-            <DiscordEmbedFooter
-              slot="footer"
-              footerImage="./staff/Dominik.webp"
-            >
-              Requested by dominikdev | Type: General | ID: 64
-            </DiscordEmbedFooter>
-          </DiscordEmbed>
-          <DiscordAttachments slot="components">
-            <DiscordActionRow>
-              <DiscordButton type="secondary">Results</DiscordButton>
-              <DiscordButton type="primary">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 36 36"
-                  width="36"
-                  height="36"
-                  className="h-5 w-5"
-                >
-                  <path
-                    fill="#3B88C3"
-                    d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
-                  />
-                  <path
-                    fill="#FFF"
-                    d="M16.462 11.175h-1.829c-1.488 0-2.108-1.085-2.108-2.139 0-1.085.775-2.14 2.108-2.14h4.402c1.334 0 2.078.961 2.078 2.201V26.74c0 1.551-.992 2.418-2.326 2.418-1.333 0-2.325-.867-2.325-2.418V11.175z"
-                  />
-                </svg>
-              </DiscordButton>
-              <DiscordButton type="primary">
-                <svg
-                  viewBox="0 0 36 36"
-                  width="36"
-                  height="36"
-                  className="h-5 w-5"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 36 36"
-                    width="36"
-                    height="36"
-                  >
-                    <path
-                      fill="#3B88C3"
-                      d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
-                    />
-                    <path
-                      fill="#FFF"
-                      d="M23.086 24.907c1.365 0 2.42.62 2.42 2.046 0 1.427-1.055 2.047-2.233 2.047H12.917c-1.364 0-2.418-.62-2.418-2.047 0-.65.403-1.209.713-1.581 2.573-3.069 5.364-5.86 7.721-9.271.558-.806 1.085-1.768 1.085-2.884 0-1.271-.961-2.387-2.233-2.387-3.566 0-1.86 5.023-4.837 5.023-1.488 0-2.264-1.054-2.264-2.264 0-3.906 3.473-7.038 7.287-7.038 3.815 0 6.883 2.512 6.883 6.449 0 4.309-4.805 8.589-7.441 11.906h5.673z"
-                    />
-                  </svg>
-                </svg>
-              </DiscordButton>
-            </DiscordActionRow>
-            <DiscordActionRow>
-              {replayedRounds < 3 ?
-                <DiscordButton
-                  type="primary"
-                  onClick={() => replay()}
-                  emoji="/emojis/refresh.svg"
-                  emojiName="refresh"
-                >
-                  New Question
-                </DiscordButton>
-              : <DiscordButton
-                  type="secondary"
-                  onClick={() =>
-                    window.open('https://wouldyoubot.gg/invite', '_blank')
-                  }
-                  emoji="/emojis/external.svg"
-                  emojiName="external"
-                >
-                  Invite Would You
-                </DiscordButton>
-              }
-            </DiscordActionRow>
-          </DiscordAttachments>
-        </DiscordMessage>
-      </DiscordMessages>
-    </motion.div>
-  )
+	return (
+		<motion.div
+			initial={{ opacity: 0, transform: 'translateY(20px)' }}
+			whileInView={{ opacity: 1, transform: 'translateY(0)' }}
+			transition={{ duration: 0.7, ease: 'easeInOut' }}
+			viewport={{ once: true }}
+			style={{ width: '90%', marginLeft: 'auto', marginRight: 'auto' }}
+		>
+			<DiscordMessages
+				lightTheme={theme === 'light' ? true : false}
+				className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow sm:w-2/3 lg:w-auto"
+			>
+				<DiscordMessage
+					profile="wouldyou"
+					author={profiles.wouldyou.author}
+					avatar={profiles.wouldyou.avatar}
+					roleColor={profiles.wouldyou.roleColor}
+					bot={profiles.wouldyou.bot}
+					verified={profiles.wouldyou.verified}
+					edited={replayedRounds > 0}
+				>
+					<DiscordCommand
+						slot="reply"
+						profile="dominik"
+						author={profiles.dominik.author}
+						avatar={profiles.dominik.avatar}
+						roleColor={profiles.dominik.roleColor}
+						// @ts-expect-error
+						clanIcon={profiles.dominik.clanIcon}
+						clanTag={profiles.dominik.clanTag}
+						command="/wouldyourather"
+						lightTheme={theme === 'light'}
+					/>
+					<DiscordEmbed
+						slot="embeds"
+						color="#1e88e5"
+					>
+						<DiscordEmbedDescription slot="description">
+							{currentQuestion}
+						</DiscordEmbedDescription>
+						<DiscordEmbedFooter
+							slot="footer"
+							footerImage="./staff/Dominik.webp"
+						>
+							Requested by dominikdev | Type: General | ID: 64
+						</DiscordEmbedFooter>
+					</DiscordEmbed>
+					<DiscordAttachments slot="components">
+						<DiscordActionRow>
+							<DiscordButton type="secondary">Results</DiscordButton>
+							<DiscordButton type="primary">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 36 36"
+									width="36"
+									height="36"
+									className="h-5 w-5"
+								>
+									<path
+										fill="#3B88C3"
+										d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
+									/>
+									<path
+										fill="#FFF"
+										d="M16.462 11.175h-1.829c-1.488 0-2.108-1.085-2.108-2.139 0-1.085.775-2.14 2.108-2.14h4.402c1.334 0 2.078.961 2.078 2.201V26.74c0 1.551-.992 2.418-2.326 2.418-1.333 0-2.325-.867-2.325-2.418V11.175z"
+									/>
+								</svg>
+							</DiscordButton>
+							<DiscordButton type="primary">
+								<svg
+									viewBox="0 0 36 36"
+									width="36"
+									height="36"
+									className="h-5 w-5"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 36 36"
+										width="36"
+										height="36"
+									>
+										<path
+											fill="#3B88C3"
+											d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z"
+										/>
+										<path
+											fill="#FFF"
+											d="M23.086 24.907c1.365 0 2.42.62 2.42 2.046 0 1.427-1.055 2.047-2.233 2.047H12.917c-1.364 0-2.418-.62-2.418-2.047 0-.65.403-1.209.713-1.581 2.573-3.069 5.364-5.86 7.721-9.271.558-.806 1.085-1.768 1.085-2.884 0-1.271-.961-2.387-2.233-2.387-3.566 0-1.86 5.023-4.837 5.023-1.488 0-2.264-1.054-2.264-2.264 0-3.906 3.473-7.038 7.287-7.038 3.815 0 6.883 2.512 6.883 6.449 0 4.309-4.805 8.589-7.441 11.906h5.673z"
+										/>
+									</svg>
+								</svg>
+							</DiscordButton>
+						</DiscordActionRow>
+						<DiscordActionRow>
+							{replayedRounds < 3 ?
+								<DiscordButton
+									type="primary"
+									onClick={() => replay()}
+									emoji="/emojis/refresh.svg"
+									emojiName="refresh"
+								>
+									New Question
+								</DiscordButton>
+							:	<DiscordButton
+									type="secondary"
+									onClick={() =>
+										window.open('https://wouldyoubot.gg/invite', '_blank')
+									}
+									emoji="/emojis/external.svg"
+									emojiName="external"
+								>
+									Invite Would You
+								</DiscordButton>
+							}
+						</DiscordActionRow>
+					</DiscordAttachments>
+				</DiscordMessage>
+			</DiscordMessages>
+		</motion.div>
+	)
 }
 export default MainDiscordEmbed
diff --git a/components/Homepage/Content.tsx b/components/Homepage/Content.tsx
index effd17dd..7089ee8e 100644
--- a/components/Homepage/Content.tsx
+++ b/components/Homepage/Content.tsx
@@ -4,12 +4,12 @@ import NeverHaveIEverEmbed from '@/components/Embeds/NeverHaveIEverEmbed'
 import DailyMessageEmbed from '@/components/Embeds/DailyMessageEmbed'
 import HigherLowerEmbed from '@/components/Embeds/HigherLowerEmbed'
 import MainDiscordEmbed from '@/components/Embeds/MainDiscordEmbed'
-import { motion } from 'motion/react'
 import ServerMarquee from '@/components/ServerMarquee'
 import { Button, buttonVariants } from '../ui/button'
 import FeatureItem from '@/components/FeatureItem'
 import { AvatarGroup } from '../avatar-group'
 import { LandingWave } from '../LandingWave'
+import { motion } from 'motion/react'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
 
@@ -36,63 +36,66 @@ export function HomeContent({
 	].join('/')} - Daily Message`
 
 	return (
-			<><section className="mt-0 sm:mt-16 lg:mt-28 flex w-full max-w-8xl flex-col items-center justify-between gap-16 px-8 text-center lg:flex-row lg:text-left">
-			<motion.div
-				initial={{ opacity: 0, transform: 'translateY(20px)' }}
-				whileInView={{ opacity: 1, transform: 'translateY(0)' }}
-				transition={{ duration: 0.7, ease: 'easeInOut' }}
-				viewport={{ once: true }}
-				className="flex flex-col items-center lg:block"
-			>
-				<h1 className="text-[2rem] sm:text-5xl md:text-6xl font-bold leading-normal mb-8">
-					Entertain Your
-					<br />
-					<span className="text-brand-red-100 drop-shadow-red-glow">
-						Discord
-					</span>{' '}
-					<span className="text-brand-blue-100 drop-shadow-blue-glow">
-						Server
-					</span>
-				</h1>
-				<p className="text-lg text-foreground/70">
-					Play fun and entertaining games with Would You, featuring user polls
-					and customization. Play Would You Rather, Truth or Dare, Never Have
-					I Ever, Higher or Lower, and What Would You Do!
-				</p>
-				<div className="flex flex-col lg:flex-row mt-8 items-center gap-4">
-					<AvatarGroup avatars={servers.reverse().slice(0, 5)} />
-					<span className="text-muted-foreground">
-						Trusted by your favorite servers!
-					</span>
-				</div>
-				<Link
-					href="/invite"
-					target="_blank"
-					className={cn(
-						'mt-8 flex gap-2 w-fit justify-center',
-						buttonVariants({ variant: 'default' })
-					)}
+		<>
+			<section className="mt-0 sm:mt-16 lg:mt-28 flex w-full max-w-8xl flex-col items-center justify-between gap-16 px-8 text-center lg:flex-row lg:text-left">
+				<motion.div
+					initial={{ opacity: 0, transform: 'translateY(20px)' }}
+					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
+					transition={{ duration: 0.7, ease: 'easeInOut' }}
+					viewport={{ once: true }}
+					className="flex flex-col items-center lg:block"
 				>
-					Unleash the Fun
-					<svg
-						width="13"
-						height="13"
-						fillRule="evenodd"
-						clipRule="evenodd"
-						viewBox="0 0 509 511.54"
+					<h1 className="text-[2rem] sm:text-5xl md:text-6xl font-bold leading-normal mb-8">
+						Entertain Your
+						<br />
+						<span className="text-brand-red-100 drop-shadow-red-glow">
+							Discord
+						</span>{' '}
+						<span className="text-brand-blue-100 drop-shadow-blue-glow">
+							Server
+						</span>
+					</h1>
+					<p className="text-lg text-foreground/70">
+						Play fun and entertaining games with Would You, featuring user polls
+						and customization. Play Would You Rather, Truth or Dare, Never Have
+						I Ever, Higher or Lower, and What Would You Do!
+					</p>
+					<div className="flex flex-col lg:flex-row mt-8 items-center gap-4">
+						<AvatarGroup avatars={servers.reverse().slice(0, 5)} />
+						<span className="text-muted-foreground">
+							Trusted by your favorite servers!
+						</span>
+					</div>
+					<Link
+						href="/invite"
+						target="_blank"
+						className={cn(
+							'mt-8 flex gap-2 w-fit justify-center',
+							buttonVariants({ variant: 'default' })
+						)}
 					>
-						<path
-							fillRule="nonzero"
-							fill="#fff"
-							d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z" />
-					</svg>
-				</Link>
-			</motion.div>
-			<MainDiscordEmbed initialQuestion={initialRatherQuestion} />
-		</section><section
-			id="slider"
-			className="mt-36"
-		>
+						Unleash the Fun
+						<svg
+							width="13"
+							height="13"
+							fillRule="evenodd"
+							clipRule="evenodd"
+							viewBox="0 0 509 511.54"
+						>
+							<path
+								fillRule="nonzero"
+								fill="#fff"
+								d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z"
+							/>
+						</svg>
+					</Link>
+				</motion.div>
+				<MainDiscordEmbed initialQuestion={initialRatherQuestion} />
+			</section>
+			<section
+				id="slider"
+				className="mt-36"
+			>
 				<LandingWave className="text-background-darker dark:text-background-dark -mb-32 min-w-[2560px]" />
 				<div className="w-full bg-background-darker dark:bg-background-dark px-8 pb-12 text-center text-3xl md:text-4xl text-foreground md:-mt-20 md:pb-28">
 					<div className="w-dvw px-8 mx-auto">
@@ -114,14 +117,17 @@ export function HomeContent({
 					<div className="w-dvw mx-auto overflow-x-hidden">
 						<ServerMarquee
 							servers={servers.slice(0, Math.ceil(servers.length / 2))}
-							speed={40} />
+							speed={40}
+						/>
 						<ServerMarquee
 							servers={servers.slice(Math.ceil(servers.length / 2))}
 							speed={30}
-							direction="right" />
+							direction="right"
+						/>
 					</div>
 				</div>
-			</section><section className="mt-20 flex w-full max-w-8xl flex-col items-center gap-20 px-8 text-foreground">
+			</section>
+			<section className="mt-20 flex w-full max-w-8xl flex-col items-center gap-20 px-8 text-foreground">
 				<motion.div
 					initial={{ opacity: 0, transform: 'translateY(15px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
@@ -140,42 +146,52 @@ export function HomeContent({
 				<FeatureItem
 					reverse
 					right={<DailyMessageEmbed threadName={threadName} />}
-					left={<>
-						<h4 className="text-center text-3xl font-bold md:text-left">
-							Increase user engagement
-						</h4>
-						<p className="mx-auto text-center text-lg text-foreground/70 md:text-left">
-							Keep your community engaged and active with daily &quot;Would
-							You Rather&quot; messages!
-						</p>
-					</>} />
+					left={
+						<>
+							<h4 className="text-center text-3xl font-bold md:text-left">
+								Increase user engagement
+							</h4>
+							<p className="mx-auto text-center text-lg text-foreground/70 md:text-left">
+								Keep your community engaged and active with daily &quot;Would
+								You Rather&quot; messages!
+							</p>
+						</>
+					}
+				/>
 
 				<FeatureItem
-					left={<>
-						<h4 className="text-center text-3xl font-bold md:text-left">
-							Entertain your server
-						</h4>
-						<p className="text-center text-lg text-foreground/70 md:text-left">
-							Entertain your discord server with fun and interactive games
-							like Would You Rather, Truth or Dare, Never Have I Ever, Higher
-							or Lower, and What Would You Do!
-						</p>
-					</>}
-					right={<HigherLowerEmbed currentDate={currentDate} />} />
+					left={
+						<>
+							<h4 className="text-center text-3xl font-bold md:text-left">
+								Entertain your server
+							</h4>
+							<p className="text-center text-lg text-foreground/70 md:text-left">
+								Entertain your discord server with fun and interactive games
+								like Would You Rather, Truth or Dare, Never Have I Ever, Higher
+								or Lower, and What Would You Do!
+							</p>
+						</>
+					}
+					right={<HigherLowerEmbed currentDate={currentDate} />}
+				/>
 
 				<FeatureItem
 					reverse
 					right={<NeverHaveIEverEmbed initialQuestion={initialNhieQuestion} />}
-					left={<>
-						<h4 className="text-center text-3xl font-bold md:text-left">
-							Upgrade your server
-						</h4>
-						<p className="text-center text-lg text-foreground/70 md:text-left">
-							Upgrade your server with Would You, featuring a wide variety of
-							games and customized questions.
-						</p>
-					</>} />
-			</section><section className="mt-36 w-full bg-hover-light px-9 py-12">
+					left={
+						<>
+							<h4 className="text-center text-3xl font-bold md:text-left">
+								Upgrade your server
+							</h4>
+							<p className="text-center text-lg text-foreground/70 md:text-left">
+								Upgrade your server with Would You, featuring a wide variety of
+								games and customized questions.
+							</p>
+						</>
+					}
+				/>
+			</section>
+			<section className="mt-36 w-full bg-hover-light px-9 py-12">
 				<motion.h2
 					initial={{ opacity: 0, transform: 'translateY(10px)' }}
 					whileInView={{ opacity: 1, transform: 'translateY(0)' }}
@@ -211,6 +227,7 @@ export function HomeContent({
 						<Button>Invite</Button>
 					</Link>
 				</motion.div>
-			</section></>
+			</section>
+		</>
 	)
 }
diff --git a/components/Premium/Content.tsx b/components/Premium/Content.tsx
index aa2a35d9..471e4ca3 100644
--- a/components/Premium/Content.tsx
+++ b/components/Premium/Content.tsx
@@ -9,6 +9,16 @@ import {
 	DialogTitle,
 	DialogTrigger
 } from '@/components/ui/dialog'
+import {
+	CloseIcon,
+	StripeSquare,
+	ApplePay,
+	GooglePay,
+	MasterCard,
+	Visa,
+	PayPal,
+	Stripe
+} from '@/app/premium/_components/icons'
 import {
 	Select,
 	SelectContent,
@@ -17,18 +27,17 @@ import {
 	SelectValue
 } from '@/components/ui/select'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import PlansComparison from '@/app/premium/_components/PlansComparison'
+import CheckoutButton from '@/app/premium/_components/checkoutButton'
 import DiscordLoginButton from '@/components/DiscordLoginButton'
+import { PricingData, DiscordGuild } from '@/app/premium/_types'
+import { ServersListSkeleton } from '@/app/premium/_components'
+import { CheckIcon, Link } from 'lucide-react'
 import { useIdToken } from '@/helpers/hooks'
 import { Suspense, useState } from 'react'
 import { getServer } from '@/lib/redis'
 import Image from 'next/image'
 import Head from 'next/head'
-import { ServersListSkeleton } from '@/app/premium/_components'
-import CheckoutButton from '@/app/premium/_components/checkoutButton'
-import { CloseIcon, StripeSquare, ApplePay, GooglePay, MasterCard, Visa, PayPal, Stripe } from '@/app/premium/_components/icons'
-import PlansComparison from '@/app/premium/_components/PlansComparison'
-import { PricingData, DiscordGuild } from '@/app/premium/_types'
-import { CheckIcon, Link } from 'lucide-react'
 
 const pricingData: PricingData = {
 	price: { monthly: 2.99, yearly: 29.99 },
@@ -103,201 +112,198 @@ export default function Premium() {
 			</Head>
 			<main className="relative mb-40 flex w-full justify-center">
 				<div className="flex w-full max-w-8xl flex-col gap-52 px-8">
-						<div>
-							<div className="container mx-auto px-4">
-								<h1 className="text-4xl font-bold text-yellow-500 drop-shadow-gold-glow">
-									Premium
-								</h1>
-								<p className="text-customGrayText mb-6 mt-4 text-foreground/70">
-									Select the plan that suits your needs and benefit from our
-									discord bot.
-								</p>
-								<div className="mx-auto my-4 max-w-2xl text-center">
-									<label className="group relative mx-auto flex h-16 w-full max-w-[13rem] cursor-pointer items-center justify-center pl-6 pr-8 rounded-2xl bg-background-light text-xl select-none">
-										<input
-											type="checkbox"
-											className="peer appearance-none"
-											checked={!isMonthly}
-											onChange={handleChange}
-										/>
-										<span className="absolute top-0 left-2 z-10 flex h-16 w-[6rem] cursor-pointer items-center duration-300 ease-in-out after:h-12 after:w-[10rem] sm:after:w-[20rem] after:rounded-lg after:bg-brand-primary-light dark:after:bg-brand-primary after:shadow-md after:duration-300 peer-checked:after:translate-x-[6rem]"></span>
-										<div className="z-20 flex gap-10 text-base font-bold text-foreground">
-											<div className={`${!isMonthly && 'text-foreground/50'}`}>
-												Monthly
+					<div>
+						<div className="container mx-auto px-4">
+							<h1 className="text-4xl font-bold text-yellow-500 drop-shadow-gold-glow">
+								Premium
+							</h1>
+							<p className="text-customGrayText mb-6 mt-4 text-foreground/70">
+								Select the plan that suits your needs and benefit from our
+								discord bot.
+							</p>
+							<div className="mx-auto my-4 max-w-2xl text-center">
+								<label className="group relative mx-auto flex h-16 w-full max-w-[13rem] cursor-pointer items-center justify-center pl-6 pr-8 rounded-2xl bg-background-light text-xl select-none">
+									<input
+										type="checkbox"
+										className="peer appearance-none"
+										checked={!isMonthly}
+										onChange={handleChange}
+									/>
+									<span className="absolute top-0 left-2 z-10 flex h-16 w-[6rem] cursor-pointer items-center duration-300 ease-in-out after:h-12 after:w-[10rem] sm:after:w-[20rem] after:rounded-lg after:bg-brand-primary-light dark:after:bg-brand-primary after:shadow-md after:duration-300 peer-checked:after:translate-x-[6rem]"></span>
+									<div className="z-20 flex gap-10 text-base font-bold text-foreground">
+										<div className={`${!isMonthly && 'text-foreground/50'}`}>
+											Monthly
+										</div>
+										<div className={`${isMonthly && 'text-foreground/50'}`}>
+											Yearly
+										</div>
+									</div>
+								</label>
+							</div>
+							<div className="mx-auto flex w-fit flex-col">
+								<div className="mb-4 w-auto rounded-[1.7rem] bg-gradient-premium p-[4px]">
+									<div className="relative overflow-hidden rounded-3xl bg-background-dark px-8 py-8">
+										<span
+											className={`${!isMonthly ? 'top-7' : 'pointer-events-none -top-10 opacity-0'} hidden xs:flex text-mb absolute right-6 cursor-default rounded-xl bg-foreground/10 px-4 py-2 text-foreground transition-all duration-300`}
+										>
+											2 months free
+										</span>
+										<h4 className="font-heading mb-2 text-left text-2xl font-bold text-foreground 2xl:mb-4">
+											Premium
+										</h4>
+										<span
+											className={`${isMonthly && 'absolute -top-10 pointer-events-none opacity-0'} flex xs:hidden w-fit text-mb cursor-default rounded-xl bg-foreground/15 px-4 py-2 text-foreground transition-all duration-300`}
+										>
+											2 months free
+										</span>
+										<div className="flex items-end justify-start">
+											<div className="mr-2 mt-4 text-left text-4xl font-bold text-foreground sm:text-5xl">
+												{isMonthly ?
+													pricingData.price.monthly
+												:	pricingData.price.yearly}
 											</div>
-											<div className={`${isMonthly && 'text-foreground/50'}`}>
-												Yearly
+											<div className="text-foreground/60">
+												{isMonthly ? '/ month' : '/ year'}
 											</div>
 										</div>
-									</label>
-								</div>
-								<div className="mx-auto flex w-fit flex-col">
-									<div className="mb-4 w-auto rounded-[1.7rem] bg-gradient-premium p-[4px]">
-										<div className="relative overflow-hidden rounded-3xl bg-background-dark px-8 py-8">
-											<span
-												className={`${!isMonthly ? 'top-7' : 'pointer-events-none -top-10 opacity-0'} hidden xs:flex text-mb absolute right-6 cursor-default rounded-xl bg-foreground/10 px-4 py-2 text-foreground transition-all duration-300`}
-											>
-												2 months free
-											</span>
-											<h4 className="font-heading mb-2 text-left text-2xl font-bold text-foreground 2xl:mb-4">
-												Premium
-											</h4>
-											<span
-												className={`${isMonthly && 'absolute -top-10 pointer-events-none opacity-0'} flex xs:hidden w-fit text-mb cursor-default rounded-xl bg-foreground/15 px-4 py-2 text-foreground transition-all duration-300`}
-											>
-												2 months free
-											</span>
-											<div className="flex items-end justify-start">
-												<div className="mr-2 mt-4 text-left text-4xl font-bold text-foreground sm:text-5xl">
-													{isMonthly ?
-														pricingData.price.monthly
-													:	pricingData.price.yearly}
-												</div>
-												<div className="text-foreground/60">
-													{isMonthly ? '/ month' : '/ year'}
-												</div>
-											</div>
-											<p className="mb-8 mt-1 text-left leading-loose text-foreground/60">
-												Experience the full power of our Would You bot.
-											</p>
-											<ul className="mb-16 text-foreground">
-												{Object.keys(pricingData['premium']).map(
-													(text, index) => (
-														<li
-															className="mb-4 flex items-center"
-															key={index}
-														>
-															{(
-																pricingData['premium'][
-																	text as keyof (typeof pricingData)['premium']
-																]
-															) ?
-																<CheckIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-brand-primary" />
-															:	<CloseIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-muted-foreground" />
-															}
-															<span>{text}</span>
-														</li>
-													)
-												)}
-											</ul>
-											<Dialog>
-												{idToken ?
-													<DialogTrigger
-														onClick={() => {
-															fetchData()
-														}}
-														className="flex w-full items-center justify-center gap-2 rounded-xl bg-green-500 py-2 font-bold leading-loose text-foreground transition hover:bg-green-600 focus:ring-0"
+										<p className="mb-8 mt-1 text-left leading-loose text-foreground/60">
+											Experience the full power of our Would You bot.
+										</p>
+										<ul className="mb-16 text-foreground">
+											{Object.keys(pricingData['premium']).map(
+												(text, index) => (
+													<li
+														className="mb-4 flex items-center"
+														key={index}
 													>
-														Continue with Stripe
-														<StripeSquare className="h-5 w-5" />
-													</DialogTrigger>
-												:	<DiscordLoginButton
-														className="rounded-xl font-bold"
-														redirect="/premium"
-													/>
-												}
-												<DialogContent className="w-fit border-none bg-background">
-													<DialogHeader>
-														<DialogTitle className="text-xl font-bold text-foreground">
-															<div>
-																Buy{' '}
-																<span className="text-brand-red-100">
-																	Would
-																</span>{' '}
-																<span className="text-brand-blue-100">You</span>
-																{isMonthly ? ' Monthly' : ' Yearly'}
-															</div>
-														</DialogTitle>
-													</DialogHeader>
-													<DialogDescription className="w-full !rounded-2xl">
-														<Select
-															onValueChange={setServerId}
-															defaultValue={serverId ? serverId : ''}
-														>
-															<SelectTrigger className="w-[300px] sm:w-[400px]">
-																<SelectValue placeholder="Select a server to continue" />
-															</SelectTrigger>
-															<SelectContent className="max-h-[40vh] max-w-[300px] sm:max-w-[400px]">
-																<Suspense fallback={<ServersListSkeleton />}>
-																	{serversData.map((server: DiscordGuild) => (
-																		<SelectItem
-																			key={server.id}
-																			value={server.id}
-																		>
-																			<div className="flex items-center gap-2">
-																				<Avatar className="h-6 w-6">
-																					<AvatarImage
-																						src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.webp`}
+														{(
+															pricingData['premium'][
+																text as keyof (typeof pricingData)['premium']
+															]
+														) ?
+															<CheckIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-brand-primary" />
+														:	<CloseIcon className="mr-4 flex h-5 w-5 items-center justify-center rounded-full bg-transparent text-muted-foreground" />
+														}
+														<span>{text}</span>
+													</li>
+												)
+											)}
+										</ul>
+										<Dialog>
+											{idToken ?
+												<DialogTrigger
+													onClick={() => {
+														fetchData()
+													}}
+													className="flex w-full items-center justify-center gap-2 rounded-xl bg-green-500 py-2 font-bold leading-loose text-foreground transition hover:bg-green-600 focus:ring-0"
+												>
+													Continue with Stripe
+													<StripeSquare className="h-5 w-5" />
+												</DialogTrigger>
+											:	<DiscordLoginButton
+													className="rounded-xl font-bold"
+													redirect="/premium"
+												/>
+											}
+											<DialogContent className="w-fit border-none bg-background">
+												<DialogHeader>
+													<DialogTitle className="text-xl font-bold text-foreground">
+														<div>
+															Buy{' '}
+															<span className="text-brand-red-100">Would</span>{' '}
+															<span className="text-brand-blue-100">You</span>
+															{isMonthly ? ' Monthly' : ' Yearly'}
+														</div>
+													</DialogTitle>
+												</DialogHeader>
+												<DialogDescription className="w-full !rounded-2xl">
+													<Select
+														onValueChange={setServerId}
+														defaultValue={serverId ? serverId : ''}
+													>
+														<SelectTrigger className="w-[300px] sm:w-[400px]">
+															<SelectValue placeholder="Select a server to continue" />
+														</SelectTrigger>
+														<SelectContent className="max-h-[40vh] max-w-[300px] sm:max-w-[400px]">
+															<Suspense fallback={<ServersListSkeleton />}>
+																{serversData.map((server: DiscordGuild) => (
+																	<SelectItem
+																		key={server.id}
+																		value={server.id}
+																	>
+																		<div className="flex items-center gap-2">
+																			<Avatar className="h-6 w-6">
+																				<AvatarImage
+																					src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.webp`}
+																				/>
+																				<AvatarFallback>
+																					<Image
+																						src="https://cdn.discordapp.com/embed/avatars/0.png"
+																						alt="avatar example"
+																						width={90}
+																						height={90}
 																					/>
-																					<AvatarFallback>
-																						<Image
-																							src="https://cdn.discordapp.com/embed/avatars/0.png"
-																							alt="avatar example"
-																							width={90}
-																							height={90}
-																						/>
-																					</AvatarFallback>
-																				</Avatar>
-																				<span className="line-clamp-1 text-ellipsis">
-																					{server.name}
-																				</span>
-																			</div>
-																		</SelectItem>
-																	))}
-																</Suspense>
-															</SelectContent>
-														</Select>
-														<CheckoutButton
-															monthly={String(isMonthly)}
-															priceId={
-																isMonthly ?
-																	process.env
-																		.NEXT_PUBLIC_PREMIUM_MONTHLY_PRICE_ID!
-																:	process.env
-																		.NEXT_PUBLIC_PREMIUM_YEARLY_PRICE_ID!
-															}
-															serverId={serverId}
-														/>
-													</DialogDescription>
-												</DialogContent>
-												{idToken ?
-													<p className="text-foreground/60 text-center pt-3 mb-[-15] text-wrap">
-														Or click{' '}
-														<a
-															href="/api/subs/manage"
-															className="underline font-bold text-foreground/70"
-														>
-															here
-														</a>{' '}
-														to manage your subscriptions
-													</p>
-												:	null}
-											</Dialog>
-										</div>
+																				</AvatarFallback>
+																			</Avatar>
+																			<span className="line-clamp-1 text-ellipsis">
+																				{server.name}
+																			</span>
+																		</div>
+																	</SelectItem>
+																))}
+															</Suspense>
+														</SelectContent>
+													</Select>
+													<CheckoutButton
+														monthly={String(isMonthly)}
+														priceId={
+															isMonthly ?
+																process.env
+																	.NEXT_PUBLIC_PREMIUM_MONTHLY_PRICE_ID!
+															:	process.env.NEXT_PUBLIC_PREMIUM_YEARLY_PRICE_ID!
+														}
+														serverId={serverId}
+													/>
+												</DialogDescription>
+											</DialogContent>
+											{idToken ?
+												<p className="text-foreground/60 text-center pt-3 mb-[-15] text-wrap">
+													Or click{' '}
+													<a
+														href="/api/subs/manage"
+														className="underline font-bold text-foreground/70"
+													>
+														here
+													</a>{' '}
+													to manage your subscriptions
+												</p>
+											:	null}
+										</Dialog>
 									</div>
-									<a
-										href="https://stripe.com/"
-										target="_blank"
-										className="flex flex-wrap justify-center gap-2 sm:gap-3"
-									>
-										<Stripe />
-										<ApplePay />
-										<GooglePay />
-										<MasterCard />
-										<Visa />
-										<PayPal />
-										<Link />
-									</a>
 								</div>
+								<a
+									href="https://stripe.com/"
+									target="_blank"
+									className="flex flex-wrap justify-center gap-2 sm:gap-3"
+								>
+									<Stripe />
+									<ApplePay />
+									<GooglePay />
+									<MasterCard />
+									<Visa />
+									<PayPal />
+									<Link />
+								</a>
 							</div>
 						</div>
-						<div>
-							<PlansComparison
-								data={data}
-								rowSeparator
-								colSeparator
-							/>
-						</div>
+					</div>
+					<div>
+						<PlansComparison
+							data={data}
+							rowSeparator
+							colSeparator
+						/>
+					</div>
 				</div>
 			</main>
 		</>
diff --git a/components/cookies/cookie-banner.tsx b/components/cookies/cookie-banner.tsx
index 49b356eb..9d98cd93 100644
--- a/components/cookies/cookie-banner.tsx
+++ b/components/cookies/cookie-banner.tsx
@@ -5,74 +5,74 @@ import { Button } from '@/components/ui/button'
 import { useState, useEffect } from 'react'
 
 export function CookieBanner() {
-  const { setShowBanner, state, setPreferences } = useCookieContext()
-  const [showModal, setShowModal] = useState(false)
+	const { setShowBanner, state, setPreferences } = useCookieContext()
+	const [showModal, setShowModal] = useState(false)
 
-  useEffect(() => {
-    const cookieString = document.cookie
-    const isCookiesSet = cookieString.includes('cookiePreferences=')
-    setShowBanner(!isCookiesSet)
-  }, [setShowBanner])
+	useEffect(() => {
+		const cookieString = document.cookie
+		const isCookiesSet = cookieString.includes('cookiePreferences=')
+		setShowBanner(!isCookiesSet)
+	}, [setShowBanner])
 
-  const handleAcceptAll = () => {
-    const allPreferences = {
-      necessary: true,
-      analytics: true
-    }
-    setPreferences(allPreferences)
-    setShowBanner(false)
-  }
+	const handleAcceptAll = () => {
+		const allPreferences = {
+			necessary: true,
+			analytics: true
+		}
+		setPreferences(allPreferences)
+		setShowBanner(false)
+	}
 
-  const handleRequiredOnly = () => {
-    const requiredPreferences = {
-      necessary: true,
-      analytics: false
-    }
-    setPreferences(requiredPreferences)
-    setShowBanner(false)
-  }
+	const handleRequiredOnly = () => {
+		const requiredPreferences = {
+			necessary: true,
+			analytics: false
+		}
+		setPreferences(requiredPreferences)
+		setShowBanner(false)
+	}
 
-  if (!state.preferences.necessary) return null
+	if (!state.preferences.necessary) return null
 
-  return (
-    <>
-      <div className="fixed inset-x-0 bottom-0 bg-hover-light shadow-md z-50">
-        <div className="max-w-8xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-8">
-          <div className="text-sm">
-            We use cookies to enhance your browsing experience and analyze our
-            traffic.
-          </div>
-          <div className="flex flex-wrap justify-center sm:flex-nowrap gap-4">
-            <Button
-              variant="ghost"
-              className="h-10 hover:bg-foreground/5"
-              onClick={() => setShowModal(true)}
-            >
-              Customize
-            </Button>
-            <Button
-              variant="secondary"
-              className="h-10 bg-foreground/10 hover:bg-foreground/5"
-              onClick={handleRequiredOnly}
-            >
-              Required Only
-            </Button>
-            <Button
-              className="h-10 bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
-              onClick={handleAcceptAll}
-            >
-              Accept All
-            </Button>
-          </div>
-        </div>
-      </div>
+	return (
+		<>
+			<div className="fixed inset-x-0 bottom-0 bg-hover-light shadow-md z-50">
+				<div className="max-w-8xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-8">
+					<div className="text-sm">
+						We use cookies to enhance your browsing experience and analyze our
+						traffic.
+					</div>
+					<div className="flex flex-wrap justify-center sm:flex-nowrap gap-4">
+						<Button
+							variant="ghost"
+							className="h-10 hover:bg-foreground/5"
+							onClick={() => setShowModal(true)}
+						>
+							Customize
+						</Button>
+						<Button
+							variant="secondary"
+							className="h-10 bg-foreground/10 hover:bg-foreground/5"
+							onClick={handleRequiredOnly}
+						>
+							Required Only
+						</Button>
+						<Button
+							className="h-10 bg-brand-blue-100 hover:bg-brand-blue-200 text-white"
+							onClick={handleAcceptAll}
+						>
+							Accept All
+						</Button>
+					</div>
+				</div>
+			</div>
 
-      <CookieDialog
-        open={showModal}
-        preferences={state.preferences}
-        onSave={setPreferences}
-        onClose={() => setShowModal(false)}
-      />
-    </>
-  )
+			<CookieDialog
+				open={showModal}
+				preferences={state.preferences}
+				onSave={setPreferences}
+				onClose={() => setShowModal(false)}
+			/>
+		</>
+	)
 }
diff --git a/components/cookies/cookie-dialog.tsx b/components/cookies/cookie-dialog.tsx
index 9dfa27f1..ff8b1aea 100644
--- a/components/cookies/cookie-dialog.tsx
+++ b/components/cookies/cookie-dialog.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter
 } from '@/components/ui/dialog'
 import { CookiePreferences } from '@/helpers/hooks/useCookies'
 import { Button } from '@/components/ui/button'
@@ -16,103 +16,103 @@ import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 
 interface CookieDialogProps {
-  preferences: CookiePreferences
-  onSave: (preferences: CookiePreferences) => void
-  onClose: () => void
-  open: boolean
+	preferences: CookiePreferences
+	onSave: (preferences: CookiePreferences) => void
+	onClose: () => void
+	open: boolean
 }
 
 export function CookieDialog({
-  preferences,
-  onSave,
-  onClose,
-  open
+	preferences,
+	onSave,
+	onClose,
+	open
 }: CookieDialogProps) {
-  const [localPreferences, setLocalPreferences] = useState(preferences)
-  const router = useRouter()
+	const [localPreferences, setLocalPreferences] = useState(preferences)
+	const router = useRouter()
 
-  const handleSavePreferences = () => {
-    onSave(localPreferences)
-    onClose()
-    router.refresh()
-  }
+	const handleSavePreferences = () => {
+		onSave(localPreferences)
+		onClose()
+		router.refresh()
+	}
 
-  const handleReset = () => {
-    setLocalPreferences({
-      necessary: true,
-      analytics: true
-    })
-  }
+	const handleReset = () => {
+		setLocalPreferences({
+			necessary: true,
+			analytics: true
+		})
+	}
 
-  const preferenceDescriptions: Record<keyof CookiePreferences, string> = {
-    necessary: 'All the necessary cookies needed to run the website.',
-    analytics: 'Optional analytics used to enhance your analytics.'
-  }
+	const preferenceDescriptions: Record<keyof CookiePreferences, string> = {
+		necessary: 'All the necessary cookies needed to run the website.',
+		analytics: 'Optional analytics used to enhance your analytics.'
+	}
 
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={onClose}
-    >
-      <DialogContent className="sm:max-w-[425px] rounded-md">
-        <DialogHeader>
-          <DialogTitle>Cookie Preferences</DialogTitle>
-          <DialogDescription>
-            Customize your cookie preferences here. You can enable or disable
-            different categories of cookies.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          {Object.entries(localPreferences).map(
-            ([key, value]: [string, boolean]) => (
-              <div
-                key={key}
-                className="flex gap-2 items-center justify-between"
-              >
-                <div className="flex flex-col gap-2">
-                  <Label
-                    htmlFor={key}
-                    className="capitalize"
-                  >
-                    {key}
-                  </Label>
-                  <span className="text-sm text-muted-foreground">
-                    {preferenceDescriptions[key as keyof CookiePreferences]}
-                  </span>
-                </div>
-                <Switch
-                  id={key}
-                  checked={value}
-                  onCheckedChange={(checked) =>
-                    setLocalPreferences((prev) => ({
-                      ...prev,
-                      [key]: checked
-                    }))
-                  }
-                  disabled={key === 'necessary'}
-                  className="data-[state=checked]:bg-brand-primary"
-                />
-              </div>
-            )
-          )}
-        </div>
-        <DialogFooter className="gap-2">
-          <Button
-            variant="outline"
-            className="order-last sm:order-first"
-            onClick={handleReset}
-          >
-            Reset
-          </Button>
-          <Button
-            variant="secondary"
-            className="order-first sm:order-last"
-            onClick={handleSavePreferences}
-          >
-            Save Preferences
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={onClose}
+		>
+			<DialogContent className="sm:max-w-[425px] rounded-md">
+				<DialogHeader>
+					<DialogTitle>Cookie Preferences</DialogTitle>
+					<DialogDescription>
+						Customize your cookie preferences here. You can enable or disable
+						different categories of cookies.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					{Object.entries(localPreferences).map(
+						([key, value]: [string, boolean]) => (
+							<div
+								key={key}
+								className="flex gap-2 items-center justify-between"
+							>
+								<div className="flex flex-col gap-2">
+									<Label
+										htmlFor={key}
+										className="capitalize"
+									>
+										{key}
+									</Label>
+									<span className="text-sm text-muted-foreground">
+										{preferenceDescriptions[key as keyof CookiePreferences]}
+									</span>
+								</div>
+								<Switch
+									id={key}
+									checked={value}
+									onCheckedChange={(checked) =>
+										setLocalPreferences((prev) => ({
+											...prev,
+											[key]: checked
+										}))
+									}
+									disabled={key === 'necessary'}
+									className="data-[state=checked]:bg-brand-primary"
+								/>
+							</div>
+						)
+					)}
+				</div>
+				<DialogFooter className="gap-2">
+					<Button
+						variant="outline"
+						className="order-last sm:order-first"
+						onClick={handleReset}
+					>
+						Reset
+					</Button>
+					<Button
+						variant="secondary"
+						className="order-first sm:order-last"
+						onClick={handleSavePreferences}
+					>
+						Save Preferences
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
 }
diff --git a/components/cookies/cookie-provider.tsx b/components/cookies/cookie-provider.tsx
index bac423ac..6bc1bbab 100644
--- a/components/cookies/cookie-provider.tsx
+++ b/components/cookies/cookie-provider.tsx
@@ -1,131 +1,131 @@
 'use client'
 
 import React, {
-  createContext,
-  useContext,
-  useReducer,
-  useCallback,
-  useEffect
+	createContext,
+	useContext,
+	useReducer,
+	useCallback,
+	useEffect
 } from 'react'
 import { CookieDialog, CookieBanner } from '@/components/cookies'
 import { CookiePreferences } from '@/helpers/hooks/useCookies'
 
 const actionTypes = {
-  SHOW_DIALOG: 'SHOW_DIALOG',
-  HIDE_DIALOG: 'HIDE_DIALOG',
-  SET_PREFERENCES: 'SET_PREFERENCES',
-  REVOKE_PERMISSIONS: 'REVOKE_PERMISSIONS',
-  SET_SHOW_BANNER: 'SET_SHOW_BANNER'
+	SHOW_DIALOG: 'SHOW_DIALOG',
+	HIDE_DIALOG: 'HIDE_DIALOG',
+	SET_PREFERENCES: 'SET_PREFERENCES',
+	REVOKE_PERMISSIONS: 'REVOKE_PERMISSIONS',
+	SET_SHOW_BANNER: 'SET_SHOW_BANNER'
 } as const
 
 interface CookieState {
-  showDialog: boolean
-  showBanner: boolean
-  preferences: CookiePreferences
+	showDialog: boolean
+	showBanner: boolean
+	preferences: CookiePreferences
 }
 
 const initialState: CookieState = {
-  showDialog: false,
-  showBanner: false,
-  preferences: {
-    necessary: true,
-    analytics: true
-  }
+	showDialog: false,
+	showBanner: false,
+	preferences: {
+		necessary: true,
+		analytics: true
+	}
 }
 
 function cookieReducer(state: CookieState, action: any): CookieState {
-  switch (action.type) {
-    case actionTypes.SHOW_DIALOG:
-      return { ...state, showDialog: true }
-    case actionTypes.HIDE_DIALOG:
-      return { ...state, showDialog: false }
-    case actionTypes.SET_PREFERENCES:
-      return { ...state, preferences: action.payload, showBanner: false }
-    case actionTypes.REVOKE_PERMISSIONS:
-      return { ...state, preferences: initialState.preferences }
-    case actionTypes.SET_SHOW_BANNER:
-      return { ...state, showBanner: action.payload }
-    default:
-      return state
-  }
+	switch (action.type) {
+		case actionTypes.SHOW_DIALOG:
+			return { ...state, showDialog: true }
+		case actionTypes.HIDE_DIALOG:
+			return { ...state, showDialog: false }
+		case actionTypes.SET_PREFERENCES:
+			return { ...state, preferences: action.payload, showBanner: false }
+		case actionTypes.REVOKE_PERMISSIONS:
+			return { ...state, preferences: initialState.preferences }
+		case actionTypes.SET_SHOW_BANNER:
+			return { ...state, showBanner: action.payload }
+		default:
+			return state
+	}
 }
 
 const CookieContext = createContext<{
-  state: CookieState
-  showCookieDialog: () => void
-  hideCookieDialog: () => void
-  setPreferences: (preferences: CookiePreferences) => void
-  setShowBanner: (show: boolean) => void
+	state: CookieState
+	showCookieDialog: () => void
+	hideCookieDialog: () => void
+	setPreferences: (preferences: CookiePreferences) => void
+	setShowBanner: (show: boolean) => void
 }>({
-  state: initialState,
-  showCookieDialog: () => {},
-  hideCookieDialog: () => {},
-  setPreferences: () => {},
-  setShowBanner: () => {}
+	state: initialState,
+	showCookieDialog: () => {},
+	hideCookieDialog: () => {},
+	setPreferences: () => {},
+	setShowBanner: () => {}
 })
 
 export const CookieProvider: React.FC<{ children: React.ReactNode }> = ({
-  children
+	children
 }) => {
-  const [state, dispatch] = useReducer(cookieReducer, initialState)
+	const [state, dispatch] = useReducer(cookieReducer, initialState)
 
-  const showCookieDialog = useCallback(
-    () => dispatch({ type: actionTypes.SHOW_DIALOG }),
-    []
-  )
-  const hideCookieDialog = useCallback(
-    () => dispatch({ type: actionTypes.HIDE_DIALOG }),
-    []
-  )
+	const showCookieDialog = useCallback(
+		() => dispatch({ type: actionTypes.SHOW_DIALOG }),
+		[]
+	)
+	const hideCookieDialog = useCallback(
+		() => dispatch({ type: actionTypes.HIDE_DIALOG }),
+		[]
+	)
 
-  const setPreferences = useCallback((preferences: CookiePreferences) => {
-    dispatch({ type: actionTypes.SET_PREFERENCES, payload: preferences })
-    document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; path=/`
-  }, [])
+	const setPreferences = useCallback((preferences: CookiePreferences) => {
+		dispatch({ type: actionTypes.SET_PREFERENCES, payload: preferences })
+		document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; path=/`
+	}, [])
 
-  const setShowBanner = useCallback((show: boolean) => {
-    dispatch({ type: actionTypes.SET_SHOW_BANNER, payload: show })
-  }, [])
+	const setShowBanner = useCallback((show: boolean) => {
+		dispatch({ type: actionTypes.SET_SHOW_BANNER, payload: show })
+	}, [])
 
-  useEffect(() => {
-    const cookieString = document.cookie
-    const cookiePreferencesMatch = cookieString.match(
-      /cookiePreferences=([^;]+)/
-    )
+	useEffect(() => {
+		const cookieString = document.cookie
+		const cookiePreferencesMatch = cookieString.match(
+			/cookiePreferences=([^;]+)/
+		)
 
-    if (cookiePreferencesMatch) {
-      const cookiePreferences = JSON.parse(cookiePreferencesMatch[1])
-      dispatch({
-        type: actionTypes.SET_PREFERENCES,
-        payload: cookiePreferences
-      })
-    } else {
-      setShowBanner(true)
-    }
-  }, [setShowBanner])
+		if (cookiePreferencesMatch) {
+			const cookiePreferences = JSON.parse(cookiePreferencesMatch[1])
+			dispatch({
+				type: actionTypes.SET_PREFERENCES,
+				payload: cookiePreferences
+			})
+		} else {
+			setShowBanner(true)
+		}
+	}, [setShowBanner])
 
-  return (
-    <CookieContext.Provider
-      value={{
-        state,
-        showCookieDialog,
-        hideCookieDialog,
-        setPreferences,
-        setShowBanner
-      }}
-    >
-      {children}
-      {state.showBanner && <CookieBanner />}
-      {state.showDialog && (
-        <CookieDialog
-          preferences={state.preferences}
-          onSave={setPreferences}
-          onClose={hideCookieDialog}
-          open={state.showDialog}
-        />
-      )}
-    </CookieContext.Provider>
-  )
+	return (
+		<CookieContext.Provider
+			value={{
+				state,
+				showCookieDialog,
+				hideCookieDialog,
+				setPreferences,
+				setShowBanner
+			}}
+		>
+			{children}
+			{state.showBanner && <CookieBanner />}
+			{state.showDialog && (
+				<CookieDialog
+					preferences={state.preferences}
+					onSave={setPreferences}
+					onClose={hideCookieDialog}
+					open={state.showDialog}
+				/>
+			)}
+		</CookieContext.Provider>
+	)
 }
 
 export const useCookieContext = () => useContext(CookieContext)
diff --git a/helpers/hooks/useCookies.ts b/helpers/hooks/useCookies.ts
index 90c49c71..09be593c 100644
--- a/helpers/hooks/useCookies.ts
+++ b/helpers/hooks/useCookies.ts
@@ -5,55 +5,55 @@ import { useState, useEffect } from 'react'
 import { useMemo } from 'react'
 
 export function useCookies() {
-  const isClient = useIsClient()
-  const cookies_ = isClient ? window?.document?.cookie : ''
-
-  return useMemo(() => {
-    return cookies_.split(';').reduce((acc, cookie) => {
-      const [key, value] = cookie.split('=')
-      acc.set(key.trim(), value)
-      return acc
-    }, new Map<string, string>())
-  }, [cookies_])
+	const isClient = useIsClient()
+	const cookies_ = isClient ? window?.document?.cookie : ''
+
+	return useMemo(() => {
+		return cookies_.split(';').reduce((acc, cookie) => {
+			const [key, value] = cookie.split('=')
+			acc.set(key.trim(), value)
+			return acc
+		}, new Map<string, string>())
+	}, [cookies_])
 }
 
 export interface CookiePreferences {
-  necessary: boolean
-  analytics: boolean
+	necessary: boolean
+	analytics: boolean
 }
 
 export const useCookiePreferences = () => {
-  const cookies = useCookies()
-  const [data, setData] = useState<CookiePreferences>({
-    necessary: true,
-    analytics: true
-  })
-  const [showBanner, setShowBanner] = useState(true)
-
-  useEffect(() => {
-    const savedPreferences = cookies.get('cookiePreferences')
-    if (savedPreferences) {
-      setData(JSON.parse(savedPreferences))
-      setShowBanner(false)
-    }
-  }, [cookies])
-
-  const savePreferences = (preferences: typeof data) => {
-    setData(preferences)
-    const expires = new Date(Date.now() + 31 * 864e5).toUTCString()
-    document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; expires=${expires}; path=/`
-  }
-
-  const hasAnalytics = () => {
-    return data.analytics
-  }
-
-  return {
-    data,
-    setData,
-    showBanner,
-    setShowBanner,
-    savePreferences,
-    hasAnalytics
-  }
+	const cookies = useCookies()
+	const [data, setData] = useState<CookiePreferences>({
+		necessary: true,
+		analytics: true
+	})
+	const [showBanner, setShowBanner] = useState(true)
+
+	useEffect(() => {
+		const savedPreferences = cookies.get('cookiePreferences')
+		if (savedPreferences) {
+			setData(JSON.parse(savedPreferences))
+			setShowBanner(false)
+		}
+	}, [cookies])
+
+	const savePreferences = (preferences: typeof data) => {
+		setData(preferences)
+		const expires = new Date(Date.now() + 31 * 864e5).toUTCString()
+		document.cookie = `cookiePreferences=${JSON.stringify(preferences)}; expires=${expires}; path=/`
+	}
+
+	const hasAnalytics = () => {
+		return data.analytics
+	}
+
+	return {
+		data,
+		setData,
+		showBanner,
+		setShowBanner,
+		savePreferences,
+		hasAnalytics
+	}
 }