feat:init

src/components/title/index.tsx

@@ -0,0 +1,50 @@
+import { cn, getBackgroundImage } from "@/lib/utils";
+
+/**
+ * 两个标题（主标题、副标题）
+ * title: 主标题
+ * subtitle: 副标题
+ */
+interface TitleProps {
+  title: string;
+  subtitle: string;
+  className?: string;
+  subtitleClassName?: string;
+}
+
+const Title = ({
+  title,
+  subtitle,
+  className,
+  subtitleClassName,
+}: TitleProps) => {
+  return (
+    <div
+      className={cn(
+        "w-[1168px] h-[149px] bg-cover bg-center bg-no-repeat relative",
+        "flex justify-center items-center",
+        className
+      )}
+      style={{
+        backgroundImage: getBackgroundImage(`components/title`),
+      }}
+    >
+      <div
+        className={cn(
+          "absolute -top-5 left-1/2 -translate-x-1/2 text-white text-5xl font-bold",
+          "[text-shadow:_-4px_-4px_0_#ae6400,_4px_-4px_0_#ae6400,_-4px_4px_0_#ae6400,_4px_4px_0_#ae6400,_-5px_0_0_#ae6400,_5px_0_0_#ae6400,_0_-5px_0_#ae6400,_0_5px_0_#ae6400,_0_0_20px_rgba(255,215,0,1),_0_0_40px_rgba(255,215,0,0.8),_0_0_60px_rgba(255,215,0,0.5)]"
+        )}
+      >
+        {title}
+      </div>
+      {/* 副标题 */}
+      <div
+        className={cn("text-[#5C3A1E] text-5xl font-bold", subtitleClassName)}
+      >
+        {subtitle}
+      </div>
+    </div>
+  );
+};
+
+export { Title };