fix: premium price header

app/(home)/premium/page.tsx

···
 import Comment from "@/components/comment";
-import ImageGrid from "@/components/image-grid";
 import { OverviewLink } from "@/components/overview-link";
 import { UserAvatar } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { InputBaseAdornment, InputBaseAdornmentButton } from "@/components/ui/input-base";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { defaultFetchOptions } from "@/lib/api";
 import type User from "@/lib/discord/user";
 import { getUser } from "@/lib/discord/user";
 import BotStylePic from "@/public/docs-assets/bot-style.webp";
 import NotificationsStylePic from "@/public/docs-assets/notifications-style.webp";
-import type { ApiV1TopguildsGetResponse } from "@/typings";
 import { cn } from "@/utils/cn";
 import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
 import type { Metadata } from "next";
···
 const bots = ["1125449347451068437", "985213199248924722", "1097907896987160666"].map((userId) => getUser(userId));
 
 const items = [
-    { title: "Price", free: "€0 /forever", premium: "€4 /month" },
+    { title: "Price", free: 0, premium: 4, unit: "€/month" },
 
     { title: "Your Benefits", icon: <HiUser /> },
     { title: "Text to Speech", free: Infinity, premium: Infinity, unit: "chars /month" },
···
     };
 };
 
-export default async function Home() {
-    const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, defaultFetchOptions).then((res) => res.json()) as ApiV1TopguildsGetResponse[];
-
+export default function Home() {
     return (
         <div className="w-full">
 
···
                 </span>
             </div>
 
-            {topGuilds && (
-                <ImageGrid
-                    images={
-                        topGuilds
-                            .sort((a, b) => b.memberCount - a.memberCount)
-                            .map((guild) => ({
-                                id: guild.id,
-                                url: (guild.icon || "/discord.webp").replace("gif", "webp"),
-                                link: getCanonicalUrl("leaderboard", guild.id)
-                            }))
-                    }
-                />
-            ) }
-
-            <div className="dark:bg-wamellow bg-wamellow-100 dark:text-neutral-300 text-neutral-700 mt-10 w-full rounded-xl overflow-hidden">
+            <div className="dark:bg-wamellow bg-wamellow-100 dark:text-neutral-300 text-neutral-700 mt-2 w-full rounded-xl overflow-hidden">
 
                 <div className="flex items-center pb-4 text-2xl p-4 font-semibold bg-wamellow">
                     <span className="dark:text-neutral-100 text-neutral-900 w-2/4 block md:hidden">Features</span>
···
             />
 
             <div className="p-2 fixed z-10 bottom-0 left-0 w-full md:hidden">
-                <div className="dark:bg-wamellow bg-wamellow-100 backdrop-blur-lg backdrop-brightness-50 rounded-lg shadow-md w-full flex flex-col gap-2 items-center justify-center p-3">
-
-                    <div className="flex gap-2 items-center">
-                        <span className="dark:text-neutral-200 text-neutral-800 font-medium text-sm">Upgrade your experience further!</span>
-                        <Badge
-                            variant="flat"
-                            radius="rounded"
-                        >
-                            €4 /month
-                        </Badge>
-                    </div>
-
-                    <Subscribe />
+                <div className="dark:bg-wamellow bg-wamellow-100 backdrop-blur-lg backdrop-brightness-50 rounded-lg shadow-md w-full p-3 ">
+                    <Subscribe header />
                 </div>
             </div>
 
···
 
     if (typeof is === "number") {
         return (<>
-            {is === Infinity ? <IoMdInfinite className="w-7 h-7" title="Infinite" /> : is.toLocaleString()}
+            {is === Infinity ? <IoMdInfinite className="size-7" title="Infinite" /> : is.toLocaleString()}
             <span className="text-sm text-muted-foreground ml-1">{unit}</span>
         </>);
     }

app/(home)/premium/subscribe.component.tsx

···
 "use client";
 import { userStore } from "@/common/user";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { InputBase, InputBaseAdornment, InputBaseAdornmentButton, InputBaseControl, InputBaseInput } from "@/components/ui/input-base";
-import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import Link from "next/link";
 import { type HTMLProps, useState } from "react";
 import { HiArrowDown, HiArrowUp, HiLightningBolt, HiOutlineInformationCircle } from "react-icons/hi";
 
-export function Subscribe() {
+export function Subscribe({ header }: { header?: boolean; }) {
     const premium = userStore((u) => u?.premium || false);
     const [donation, setDonation] = useState(0);
 
···
 
     return (
         <div className="w-full">
+            {header && (
+                <div className="flex gap-2 justify-center mb-2">
+                    <span className="dark:text-neutral-200 text-neutral-800 font-medium text-sm">Upgrade your experience further!</span>
+                    <Badge
+                        variant="flat"
+                        radius="rounded"
+                    >
+                        €{donation + 4} /month
+                    </Badge>
+                </div>
+            )}
+
             <div className="w-full relative overflow-hidden rounded-lg border border-border group p-px h-fit">
                 <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] bg-[conic-gradient(from_90deg_at_0%_50%,#8b5cf6_50%,hsl(var(--input)/30)_7%)]" />
                 <Button
                     asChild
-                    className='w-full px-2 backdrop-blur-xs backdrop-brightness-50 md:backdrop-brightness-25 bg-none rounded-[6px] hover:bg-[#8b5cf6]/50'
+                    className='w-full px-2 backdrop-blur-xs backdrop-brightness-50 md:backdrop-brightness-25 bg-none rounded-md hover:bg-[#8b5cf6]/50'
                 >
                     <Link
                         prefetch={false}
···
                 </Button>
             </div>
 
-            <div className="relative w-full gap-2 h-3">
-                <Separator className="w-full mt-4" />
-                <span className="absolute bg-[#0d0d0d] px-2 -top-1.5 left-1/2 -translate-x-1/2 text-muted-foreground font-medium text-xs uppercase">choose what to pay</span>
+            <div className="w-full flex justify-center my-2">
+                <span className="text-muted-foreground font-medium text-xs uppercase">choose what to pay</span>
             </div>
 
-            <div className="flex gap-1 w-full mt-2">
+            <div className="flex gap-1 w-full">
                 {[4, 8, 12, 18, 25].map((amount) => (
                     <Button
                         key={amount}