@@ -244,9 +289,12 @@ export function Pricing() {
: "lg:py-8",
)}
>
-
diff --git a/apps/website/components/ui/animated-shiny-text.tsx b/apps/website/components/ui/animated-shiny-text.tsx
new file mode 100644
index 000000000..174e4d194
--- /dev/null
+++ b/apps/website/components/ui/animated-shiny-text.tsx
@@ -0,0 +1,40 @@
+import type { CSSProperties, FC, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface AnimatedShinyTextProps {
+ children: ReactNode;
+ className?: string;
+ shimmerWidth?: number;
+}
+
+const AnimatedShinyText: FC = ({
+ children,
+ className,
+ shimmerWidth = 100,
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AnimatedShinyText;
diff --git a/apps/website/components/ui/hover-border-gradient.tsx b/apps/website/components/ui/hover-border-gradient.tsx
new file mode 100644
index 000000000..c8bc25094
--- /dev/null
+++ b/apps/website/components/ui/hover-border-gradient.tsx
@@ -0,0 +1,100 @@
+"use client";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+
+type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT";
+
+export function HoverBorderGradient({
+ children,
+ containerClassName,
+ className,
+ as: Tag = "button",
+ duration = 1,
+ clockwise = true,
+ ...props
+}: React.PropsWithChildren<
+ {
+ as?: React.ElementType;
+ containerClassName?: string;
+ className?: string;
+ duration?: number;
+ clockwise?: boolean;
+ } & React.HTMLAttributes
+>) {
+ const [hovered, setHovered] = useState(false);
+ const [direction, setDirection] = useState("TOP");
+
+ const rotateDirection = (currentDirection: Direction): Direction => {
+ const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"];
+ const currentIndex = directions.indexOf(currentDirection);
+ const nextIndex = clockwise
+ ? (currentIndex - 1 + directions.length) % directions.length
+ : (currentIndex + 1) % directions.length;
+ return directions[nextIndex];
+ };
+
+ const movingMap: Record = {
+ TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ BOTTOM:
+ "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ RIGHT:
+ "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ };
+
+ const highlight =
+ "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)";
+
+ useEffect(() => {
+ if (!hovered) {
+ const interval = setInterval(() => {
+ setDirection((prevState) => rotateDirection(prevState));
+ }, duration * 1000);
+ return () => clearInterval(interval);
+ }
+ }, [hovered]);
+ return (
+ ) => {
+ setHovered(true);
+ }}
+ onMouseLeave={() => setHovered(false)}
+ className={cn(
+ "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit",
+ containerClassName,
+ )}
+ {...props}
+ >
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
index 87e094bd9..d8fb0446e 100644
--- a/apps/website/tailwind.config.ts
+++ b/apps/website/tailwind.config.ts
@@ -10,9 +10,6 @@ const config = {
],
prefix: "",
theme: {
- // fontFamily: {
- // sans: ["var(--font-sans)", ...fontFamily.sans],
- // },
fontSize: {
xs: ["0.75rem", { lineHeight: "1rem" }],
sm: ["0.875rem", { lineHeight: "1.5rem" }],
@@ -29,7 +26,7 @@ const config = {
"9xl": ["8rem", { lineHeight: "1" }],
},
container: {
- center: true,
+ center: "true",
padding: "2rem",
screens: {
"2xl": "1400px",
@@ -75,7 +72,6 @@ const config = {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
-
"4xl": "2rem",
},
fontFamily: {
@@ -84,17 +80,34 @@ const config = {
},
keyframes: {
"accordion-down": {
- from: { height: "0" },
- to: { height: "var(--radix-accordion-content-height)" },
+ from: {
+ height: "0",
+ },
+ to: {
+ height: "var(--radix-accordion-content-height)",
+ },
},
"accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: "0" },
+ from: {
+ height: "var(--radix-accordion-content-height)",
+ },
+ to: {
+ height: "0",
+ },
+ },
+ "shiny-text": {
+ "0%, 90%, 100%": {
+ "background-position": "calc(-100% - var(--shiny-width)) 0",
+ },
+ "30%, 60%": {
+ "background-position": "calc(100% + var(--shiny-width)) 0",
+ },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
+ "shiny-text": "shiny-text 8s infinite",
},
},
},