Fix incosistencies in the custom commission types

src/app/(normal)/commissions/page.tsx

@@ -42,6 +42,10 @@ export default async function CommissionsPage() {
     <div className="mx-auto w-full max-w-6xl px-4 py-8 flex flex-col gap-8">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <h1 className="text-3xl font-bold">Commission Pricing</h1>
+        <div className="flex flex-wrap gap-3">
+          <Button asChild>
+            <a href="#commission-request-form">Get to the request form</a>
+          </Button>
           {guidelines?.exampleImageUrl ? (
             <Dialog>
               <DialogTrigger asChild>
@@ -65,6 +69,7 @@ export default async function CommissionsPage() {
             </Dialog>
           ) : null}
         </div>
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
         {commissions.map((commission) => (
           <CommissionCard key={commission.id} commission={commission} />
@@ -75,7 +80,9 @@ export default async function CommissionsPage() {
         <CommissionGuidelines />
       </div>
       <hr />
-      <h2 className="text-2xl font-semibold">Request a Commission</h2>
+      <h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
+        Request a Commission
+      </h2>
       <CommissionOrderForm types={commissions} customCards={customCards} />
     </div>
   );

src/components/commissions/CommissionCustomCard.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 import Image from "next/image";
 
 type CustomCardOption = {
@@ -43,9 +44,17 @@ export function CommissionCustomCard({
 }) {
   return (
     <div className="flex flex-col h-full">
-      <Card className="flex flex-col flex-1 relative overflow-hidden border-2 border-primary/50 shadow-sm">
+      <div className="overflow-hidden h-full">
+        <Card
+          className={cn(
+            "flex flex-col h-full relative shadow-sm",
+            card.isSpecialOffer
+              ? "border-2 border-primary/50"
+              : "border-border"
+          )}
+        >
           {card.isSpecialOffer ? (
-          <div className="pointer-events-none absolute right-0 top-0 z-10">
+            <div className="pointer-events-none absolute right-0 top-0 z-10 overflow-visible">
               <div className="absolute right-0 top-16 h-7 w-36 origin-top-right translate-x-10 rotate-45 bg-primary text-primary-foreground shadow-md">
                 <span className="flex h-full w-full items-center justify-center text-xs font-semibold uppercase tracking-wide">
                   Special
@@ -95,7 +104,7 @@ export function CommissionCustomCard({
             ) : null}
           </CardHeader>
 
-        <CardContent className="flex flex-col justify-start gap-4">
+          <CardContent className="flex flex-1 flex-col justify-start gap-4">
             <div>
               <h4 className="font-semibold">Options</h4>
               <ul className="pl-4 list-disc">
@@ -136,5 +145,6 @@ export function CommissionCustomCard({
           </CardContent>
         </Card>
       </div>
+    </div>
   );
 }

src/components/commissions/CommissionOrderForm.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -13,10 +14,10 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import type {
-  CommissionCustomInput,
   CommissionCustomCard,
   CommissionCustomCardExtra,
   CommissionCustomCardOption,
+  CommissionCustomInput,
   CommissionExtra,
   CommissionOption,
   CommissionType,
@@ -319,8 +320,15 @@ export function CommissionOrderForm({ types, customCards }: Props) {
               <FormItem>
                 <FormLabel>Your Name</FormLabel>
                 <FormControl>
-                  <Input placeholder="Nickname, real name, how you want to be called..." {...field} disabled={isSubmitting} />
+                  <Input
+                    placeholder="Nickname, real name, how you want to be called..."
+                    {...field}
+                    disabled={isSubmitting}
+                  />
                 </FormControl>
+                <FormDescription>
+                  This name will be visible on the commission status page.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -339,6 +347,9 @@ export function CommissionOrderForm({ types, customCards }: Props) {
                     disabled={isSubmitting}
                   />
                 </FormControl>
+                <FormDescription>
+                  Will be used for sending the invoice via paypal
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -357,6 +368,9 @@ export function CommissionOrderForm({ types, customCards }: Props) {
                     disabled={isSubmitting}
                   />
                 </FormControl>
+                <FormDescription>
+                  Optional. But if filled out, we need handle and which platform. Currently supported are fediverse, bsky and telegram
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}