feat: added utility components

src/components/utilities/gradient-bg.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+
+export type GradientBGType = ComponentProps<'div'> & {
+  colors: [string, string, string, string];
+};
+export default function GradientBG({
+  colors,
+  className,
+  ...props
+}: GradientBGType) {
+  return (
+    <div
+      className={className}
+      style={{
+        background: `linear-gradient(-45deg,${colors[0]},${colors[1]},${colors[2]},${colors[3]})`,
+        backgroundSize: '400% 400%',
+      }}
+      {...props}
+    />
+  );
+}

src/components/utilities/underline-text.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+import colors from 'tailwindcss/colors';
+import GradientBG from './gradient-bg';
+
+type UnderlineType = ComponentProps<'span'>;
+export default function Underline({
+  className,
+  children,
+  ...props
+}: UnderlineType) {
+  return (
+    <span className={`relative pb-1 ${className || ``}`} {...props}>
+      {children}
+      <GradientBG
+        colors={[
+          colors.cyan[500],
+          colors.blue[600],
+          colors.pink[400],
+          colors.yellow[400],
+        ]}
+        className="pointer-events-none absolute inset-x-0 top-full h-1 w-full animate-bg-shift rounded-full"
+      />
+    </span>
+  );
+}