Add content to unions guide on website

Author: fabian-hiller

website/src/routes/guides/(schemas)/unions/index.mdx

@@ -1,9 +1,75 @@
 ---
 title: Unions
+description: >-
+  In relational algebra, an union represents the conjunction of two sets. Simply
+  put, it is a logical OR relationship. You can apply this concept to schemas.
 contributors:
   - fabian-hiller
 ---
 
+import { Link } from '@builder.io/qwik-city';
+
 # Unions
 
-> The content of this page is not yet ready. Check back in a few days.
+In relational algebra, an union represents the conjunction of two sets. Simply put, it is a logical OR relationship. You can apply this concept to schemas with <Link href="/api/union/">`union`</Link> and <Link href="/api/variant/">`variant`</Link>. For [discriminated unions](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) you use <Link href="/api/variant/">`variant`</Link> and in all other cases you use <Link href="/api/union/">`union`</Link>.
+
+## Union schema
+
+The schema function <Link href="/api/union/">`union`</Link> creates an OR relationship between any number of schemas that you pass as the first argument in the form of an array. On validation, the schema returns the result of the first schema that was successfully validated.
+
+```ts
+import * as v from 'valibot';
+
+const UnionSchema = v.union([v.string(), v.number()]); // string | number
+```
+
+If the input does not match any of the schemas, an issue is returned that contains the issues of each schema as subissues. This is a special case within the library, as the issues of <Link href="/api/union/">`union`</Link> can contradict each other.
+
+```ts
+[
+  {
+    reason: 'type',
+    validation: 'union',
+    origin: 'value',
+    message: 'Invalid type',
+    input: null,
+    issues: [
+      {
+        reason: 'type',
+        validation: 'string',
+        origin: 'value',
+        message: 'Invalid type',
+        input: null,
+      },
+      {
+        reason: 'type',
+        validation: 'number',
+        origin: 'value',
+        message: 'Invalid type',
+        input: null,
+      },
+    ],
+  },
+];
+```
+
+## Variant schema
+
+For better performance, more type safety, and a more targeted output of issues, you can use <Link href="/api/variant/">`variant`</Link> for discriminated unions. Therefore, I recommend using <Link href="/api/variant/">`variant`</Link> over <Link href="/api/union/">`union`</Link> whenever possible. A discriminated union is an OR relationship between objects that can be distinguished by a specific key.
+
+When you call the schema function, you first specify the discriminator key. This is used to determine the schema to use for validation based on the input. The object schemas, in the form of an array, follow as the second argument.
+
+```ts
+import * as v from 'valibot';
+
+const VariantScheme = v.variant('type', [
+  v.object({
+    type: v.literal('foo'),
+    foo: v.string(),
+  }),
+  v.object({
+    type: v.literal('bar'),
+    bar: v.number(),
+  }),
+]);
+```