Fix incosistencies in the custom commission types

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

@@ -42,28 +42,33 @@ 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>
-        {guidelines?.exampleImageUrl ? (
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button variant="secondary">View example</Button>
-            </DialogTrigger>
-            <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
-              <DialogHeader className="sr-only">
-                <DialogTitle>Commission example</DialogTitle>
-              </DialogHeader>
-              <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
-                <Image
-                  src={guidelines.exampleImageUrl}
-                  alt="Commission example"
-                  width={1600}
-                  height={1200}
-                  sizes="85vw"
-                  className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
-                />
-              </div>
-            </DialogContent>
-          </Dialog>
-        ) : null}
+        <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>
+                <Button variant="secondary">View example</Button>
+              </DialogTrigger>
+              <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
+                <DialogHeader className="sr-only">
+                  <DialogTitle>Commission example</DialogTitle>
+                </DialogHeader>
+                <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
+                  <Image
+                    src={guidelines.exampleImageUrl}
+                    alt="Commission example"
+                    width={1600}
+                    height={1200}
+                    sizes="85vw"
+                    className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
+                  />
+                </div>
+              </DialogContent>
+            </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) => (
@@ -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,98 +44,107 @@ 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">
-        {card.isSpecialOffer ? (
-          <div className="pointer-events-none absolute right-0 top-0 z-10">
-            <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
-              </span>
+      <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 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
+                </span>
+              </div>
             </div>
-          </div>
-        ) : null}
-        <CardHeader className="gap-2">
-          <CardTitle className="text-xl font-bold">{card.name}</CardTitle>
-          <p className="text-muted-foreground text-sm">{card.description}</p>
-          {card.referenceImageUrl ? (
-            <Dialog>
-              <DialogTrigger asChild>
-                <button
-                  type="button"
-                  className="group relative overflow-hidden rounded-lg border border-border/60 bg-muted/40"
-                >
-                  <Image
-                    src={card.referenceImageUrl}
-                    alt={`${card.name} reference`}
-                    width={800}
-                    height={600}
-                    sizes="(max-width: 768px) 90vw, 400px"
-                    className="h-auto w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
-                  />
-                  <span className="absolute inset-x-0 bottom-0 bg-background/70 px-2 py-1 text-xs text-foreground/80">
-                    Click to enlarge
-                  </span>
-                </button>
-              </DialogTrigger>
-              <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
-                <DialogHeader className="sr-only">
-                  <DialogTitle>{card.name} reference</DialogTitle>
-                </DialogHeader>
-                <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
-                  <Image
-                    src={card.referenceImageUrl}
-                    alt={`${card.name} reference`}
-                    width={1600}
-                    height={1200}
-                    sizes="85vw"
-                    className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
-                  />
-                </div>
-              </DialogContent>
-            </Dialog>
           ) : null}
-        </CardHeader>
-
-        <CardContent className="flex flex-col justify-start gap-4">
-          <div>
-            <h4 className="font-semibold">Options</h4>
-            <ul className="pl-4 list-disc">
-              {card.options.map((option) => (
-                <li key={option.id}>
-                  {option.option?.name}:{" "}
-                  {option.price && option.price !== 0
-                    ? `${option.price}€`
-                    : option.pricePercent
-                      ? `+${option.pricePercent}%`
-                      : option.priceRange && option.priceRange !== "0–0"
-                        ? `${option.priceRange}€`
-                        : "Included"}
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          <div>
-            {card.extras.length > 0 ? (
-              <h4 className="font-semibold">Extras</h4>
+          <CardHeader className="gap-2">
+            <CardTitle className="text-xl font-bold">{card.name}</CardTitle>
+            <p className="text-muted-foreground text-sm">{card.description}</p>
+            {card.referenceImageUrl ? (
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button
+                    type="button"
+                    className="group relative overflow-hidden rounded-lg border border-border/60 bg-muted/40"
+                  >
+                    <Image
+                      src={card.referenceImageUrl}
+                      alt={`${card.name} reference`}
+                      width={800}
+                      height={600}
+                      sizes="(max-width: 768px) 90vw, 400px"
+                      className="h-auto w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+                    />
+                    <span className="absolute inset-x-0 bottom-0 bg-background/70 px-2 py-1 text-xs text-foreground/80">
+                      Click to enlarge
+                    </span>
+                  </button>
+                </DialogTrigger>
+                <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
+                  <DialogHeader className="sr-only">
+                    <DialogTitle>{card.name} reference</DialogTitle>
+                  </DialogHeader>
+                  <div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
+                    <Image
+                      src={card.referenceImageUrl}
+                      alt={`${card.name} reference`}
+                      width={1600}
+                      height={1200}
+                      sizes="85vw"
+                      className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
+                    />
+                  </div>
+                </DialogContent>
+              </Dialog>
             ) : null}
-            <ul className="pl-4 list-disc">
-              {card.extras.map((extra) => (
-                <li key={extra.id}>
-                  {extra.extra?.name}:{" "}
-                  {extra.price && extra.price !== 0
-                    ? `${extra.price}€`
-                    : extra.pricePercent
-                      ? `+${extra.pricePercent}%`
-                      : extra.priceRange && extra.priceRange !== "0–0"
-                        ? `${extra.priceRange}€`
-                        : "Included"}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </CardContent>
-      </Card>
+          </CardHeader>
+
+          <CardContent className="flex flex-1 flex-col justify-start gap-4">
+            <div>
+              <h4 className="font-semibold">Options</h4>
+              <ul className="pl-4 list-disc">
+                {card.options.map((option) => (
+                  <li key={option.id}>
+                    {option.option?.name}:{" "}
+                    {option.price && option.price !== 0
+                      ? `${option.price}€`
+                      : option.pricePercent
+                        ? `+${option.pricePercent}%`
+                        : option.priceRange && option.priceRange !== "0–0"
+                          ? `${option.priceRange}€`
+                          : "Included"}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div>
+              {card.extras.length > 0 ? (
+                <h4 className="font-semibold">Extras</h4>
+              ) : null}
+              <ul className="pl-4 list-disc">
+                {card.extras.map((extra) => (
+                  <li key={extra.id}>
+                    {extra.extra?.name}:{" "}
+                    {extra.price && extra.price !== 0
+                      ? `${extra.price}€`
+                      : extra.pricePercent
+                        ? `+${extra.pricePercent}%`
+                        : extra.priceRange && extra.priceRange !== "0–0"
+                          ? `${extra.priceRange}€`
+                          : "Included"}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </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>
             )}