make the landing page look beautiful 😍😍😍

src/components/misc/GradientBorder.tsx

@@ -0,0 +1,40 @@
+import { component$, CSSProperties, QwikIntrinsicElements, Slot } from "@builder.io/qwik";
+
+type GradientProps = {
+    size: string;
+    from: string;
+    to: string;
+    direction?: string;
+};
+
+export default component$((props: GradientProps & QwikIntrinsicElements["div"]) => {
+    const {
+        size,
+        from,
+        to,
+        direction,
+        style: userStyle,
+        ...rest
+    } = props;
+
+    const borderStyle: CSSProperties = {
+        padding: size,
+        background: `linear-gradient(${direction || "to bottom"}, ${from}, ${to})`,
+        display: "inline-block",
+    };
+
+    // Only spread userStyle if it's an object
+    const mergedStyle =
+        userStyle && typeof userStyle === "object"
+            ? { ...borderStyle, ...userStyle }
+            : borderStyle;
+
+    return (
+        <div
+            style={mergedStyle}
+            {...rest}
+        >
+            <Slot />
+        </div>
+    );
+});