Add marketing page and layout changes

2024-04-04 09:09:15 +11:00
parent bbc64b5392
commit e1b2f64d57
29 changed files with 1601 additions and 57 deletions
--- a/apps/marketing/src/components/ui/styled-input.tsx
+++ b/apps/marketing/src/components/ui/styled-input.tsx
@@ -0,0 +1,61 @@
+// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+"use client";
+import * as React from "react";
+import { cn } from "@unsend/ui/lib/utils";
+import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const StyledInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    const radius = 100; // change this to increase the rdaius of the hover effect
+    const [visible, setVisible] = React.useState(false);
+
+    let mouseX = useMotionValue(0);
+    let mouseY = useMotionValue(0);
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: any) {
+      let { left, top } = currentTarget.getBoundingClientRect();
+
+      mouseX.set(clientX - left);
+      mouseY.set(clientY - top);
+    }
+    return (
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+        radial-gradient(
+          ${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
+          #06b6d4,
+          transparent 80%
+        )
+      `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <input
+          type={type}
+          className={cn(
+            `flex h-10 w-full border-none bg-gray-50 dark:bg-zinc-800 text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent 
+          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600 
+          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
+           disabled:cursor-not-allowed disabled:opacity-50
+           dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
+           group-hover/input:shadow-none transition duration-400
+           `,
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      </motion.div>
+    );
+  }
+);
+StyledInput.displayName = "Input";
+
+export { StyledInput };