✨ feat: Add qwik-react (#103)

This adds the following pages:

The landing page (/)
The pricing page (/pricing)
The contact page (/contact)
The changelog page (/changelog)
Terms Of Service page (/terms)
Privacy Policy (/privacy)

packages/ui/src/input.tsx

@@ -0,0 +1,35 @@
+import {
+    form,
+    cn,
+    type InputProps as InputVariants,
+} from "@/design"
+import { type QwikIntrinsicElements, component$ } from '@builder.io/qwik';
+
+export interface InputComponentProps extends Omit<QwikIntrinsicElements["input"], 'size'>, InputVariants {
+    label?: string;
+    includeName?: string;
+    labelFor?: string;
+    description?: string;
+}
+
+export const Input = component$(({ labelFor,description, label, variant = "mixed", fancy = false, size = "md", includeName, class: className, ...props }: InputComponentProps) => {
+    const { input } = form();
+
+    return (
+        <div class="text-start w-full gap-2 flex flex-col" >{
+            label && labelFor && <label for={labelFor} class='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'>{label}</label>
+        }
+            {description && <p class='text-[0.8rem]'>{description}</p>}
+            <div class="flex flex-row w-full h-max relative" >
+                {includeName && <p class="absolute top-1/2 -translate-y-1/2 left-3 text-gray-950 dark:text-gray-50" >{includeName}&nbsp;</p>}
+                <input
+                    id={labelFor}
+                    class={input({ variant, fancy, size, className: cn("rounded-md w-full data-[invalid]:animate-shake", className as any) })}
+                    {...props}
+                />
+            </div>
+        </div>
+    )
+})
+
+// export const Input = qwikify$(ReactInput)