✨ 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/react/title-section.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable qwik/no-react-props */
+/** @jsxImportSource react */
+import { qwikify$ } from "@builder.io/qwik-react";
+import { motion } from "framer-motion"
+import { ReactDisplay } from "@/react/display"
+// type Props = {
+//     children?: React.ReactElement[]
+// }
+
+const transition = {
+    type: "spring",
+    stiffness: 100,
+    damping: 15,
+    restDelta: 0.001,
+    duration: 0.01,
+}
+
+type Props = {
+    title: string
+    description: string | string[]
+}
+
+export function ReactTitleSection({ title, description }: Props) {
+    return (
+        <>
+            <section className="px-4" >
+                <header className="overflow-hidden mx-auto max-w-xl pt-20 pb-4">
+                    <motion.img
+                        initial={{
+                            opacity: 0,
+                            y: 120
+                        }}
+                        whileInView={{
+                            y: 0,
+                            opacity: 1
+                        }}
+                        transition={{
+                            ...transition
+                        }}
+                        viewport={{ once: true }}
+                        src="/logo.webp" alt="Nestri Logo" height={80} width={80} draggable={false} className="w-[70px] md:w-[80px] aspect-[90/69]" />
+                    <div className="my-4 sm:my-8">
+                        <ReactDisplay className="mb-4 sm:text-8xl text-[3.5rem] text-balance tracking-tight leading-none" >
+                            <motion.span
+                                initial={{
+                                    opacity: 0,
+                                    y: 100
+                                }}
+                                whileInView={{
+                                    y: 0,
+                                    opacity: 1
+                                }}
+                                transition={{
+                                    delay: 0.1,
+                                    ...transition
+                                }}
+                                viewport={{ once: true }}
+                                className="inline-block" >
+                                {title}
+                            </motion.span>
+                        </ReactDisplay>
+                        <motion.p
+                            initial={{
+                                opacity: 0,
+                                y: 50
+                            }}
+                            transition={{
+                                delay: 0.3,
+                                ...transition
+                            }}
+                            whileInView={{
+                                y: 0,
+                                opacity: 1
+                            }}
+                            viewport={{ once: true }}
+                            className="dark:text-primary-50/70 text-primary-950/70 text-lg font-normal tracking-tight sm:text-xl"
+                        >
+                            {Array.isArray(description) ? description.map((item, index) => {
+                                return <span key={`id-${index}`}>{item} <br /> </span>
+                            }) : description}
+                        </motion.p>
+                    </div>
+                </header>
+            </section>
+        </>
+    )
+}
+export const TitleSection = qwikify$(ReactTitleSection)