refactor(dokploy): add analytics and pricing section to website

2025-06-26 18:27:59 +00:00 · 2024-10-26 22:44:21 -06:00
parent d6fa416a3f
commit b123baafa4
9 changed files with 377 additions and 132 deletions
--- a/apps/docs/app/[lang]/layout.tsx
+++ b/apps/docs/app/[lang]/layout.tsx
@@ -14,6 +14,7 @@ import {
 	PlugZapIcon,
 	TerminalIcon,
 } from "lucide-react";
+import Script from "next/script";
 const inter = Inter({
 	subsets: ["latin"],
 });
@@ -63,13 +64,10 @@ export default function Layout({
 			className={inter.className}
 			suppressHydrationWarning
 		>
-			<head>
-				<script
-					defer
-					src="https://umami.dokploy.com/script.js"
-					data-website-id="6ad2aa56-6d38-4f39-97a8-1a8fcdda8d51"
-				/>
-			</head>
+			<Script
+				src="https://umami.dokploy.com/script.js"
+				data-website-id="6ad2aa56-6d38-4f39-97a8-1a8fcdda8d51"
+			/>
 			<GoogleAnalytics />
 			<body>
 				<I18nProvider
--- a/apps/dokploy/pages/_app.tsx
+++ b/apps/dokploy/pages/_app.tsx
@@ -36,15 +36,15 @@ const MyApp = ({
      `}</style>
 			<Head>
 				<title>Dokploy</title>
-				{process.env.NEXT_PUBLIC_UMAMI_HOST &&
-					process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
-						<Script
-							defer
-							src={process.env.NEXT_PUBLIC_UMAMI_HOST}
-							data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-						/>
-					)}
 			</Head>
+			{process.env.NEXT_PUBLIC_UMAMI_HOST &&
+				process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+					<Script
+						src={process.env.NEXT_PUBLIC_UMAMI_HOST}
+						data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+					/>
+				)}
+
 			<ThemeProvider
 				attribute="class"
 				defaultTheme="system"
--- a/apps/website/components/Footer.tsx
+++ b/apps/website/components/Footer.tsx
@@ -1,11 +1,40 @@
-import Link from "next/link";
+"use client";

-import { useTranslations } from "next-intl";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from "@/components/ui/select";
+import { Link, useRouter } from "@/i18n/routing";
+import { useLocale, useTranslations } from "next-intl";
+import type { SVGProps } from "react";
 import { Container } from "./Container";
 import { NavLink } from "./NavLink";
 import { Logo } from "./shared/Logo";
+import { buttonVariants } from "./ui/button";
+
+const I18nIcon = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={24}
+		height={24}
+		fill="currentColor"
+		stroke="currentColor"
+		strokeWidth={0}
+		viewBox="0 0 512 512"
+		{...props}
+	>
+		<path
+			stroke="none"
+			d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
+		/>
+	</svg>
+);

 export function Footer() {
+	const router = useRouter();
+	const locale = useLocale();
 	const t = useTranslations("HomePage");
 	const linkT = useTranslations("Link");

@@ -31,7 +60,7 @@ export function Footer() {
 					</nav>
 				</div>
 				<div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
-					<div className="flex gap-x-6">
+					<div className="flex gap-x-6 items-center">
 						<Link
 							href="https://x.com/getdokploy"
 							className="group"
@@ -56,6 +85,30 @@ export function Footer() {
 								<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
 							</svg>
 						</Link>
+						<Select
+							onValueChange={(locale) => {
+								router.replace("/", {
+									locale: locale as "en" | "zh-Hans",
+								});
+							}}
+							value={locale}
+						>
+							<SelectTrigger
+								className={buttonVariants({
+									variant: "outline",
+									className:
+										" flex items-center gap-2 !rounded-full visited:outline-none focus-within:outline-none focus:outline-none",
+								})}
+							>
+								<I18nIcon width={20} height={20} />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem value="en">{t("navigation.i18nEn")}</SelectItem>
+								<SelectItem value="zh-Hans">
+									{t("navigation.i18nZh-Hans")}
+								</SelectItem>
+							</SelectContent>
+						</Select>
 					</div>
 					<p className="mt-6 text-sm text-muted-foreground sm:mt-0">
 						{t("footer.copyright", {
--- a/apps/website/components/Header.tsx
+++ b/apps/website/components/Header.tsx
@@ -1,16 +1,10 @@
 "use client";

-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-} from "@/components/ui/select";
-import { Link, useRouter } from "@/i18n/routing";
+import { Link } from "@/i18n/routing";
 import { cn } from "@/lib/utils";
 import { Popover, Transition } from "@headlessui/react";
 import { HeartIcon } from "lucide-react";
-import { useLocale, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import { Fragment, type JSX, type SVGProps } from "react";
 import { Container } from "./Container";
 import { NavLink } from "./NavLink";
@@ -125,10 +119,7 @@ function MobileNavigation() {
 						as="div"
 						className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl border border-border bg-background p-4 text-lg tracking-tight  text-primary shadow-xl ring-1 ring-border/5"
 					>
-						<MobileNavLink href="/#features">
-							{t("navigation.features")}
-						</MobileNavLink>
-						{/* <MobileNavLink href="/#testimonials">Testimonials</MobileNavLink> */}
+						<MobileNavLink href="/pricing">Pricing</MobileNavLink>
 						<MobileNavLink href="/#faqs">{t("navigation.faqs")}</MobileNavLink>
 						<MobileNavLink href={linkT("docs.intro")} target="_blank">
 							{t("navigation.docs")}
@@ -141,8 +132,6 @@ function MobileNavigation() {
 }

 export function Header() {
-	const router = useRouter();
-	const locale = useLocale();
 	const t = useTranslations("HomePage");
 	const linkT = useTranslations("Link");

@@ -155,8 +144,7 @@ export function Header() {
 							<Logo className="h-10 w-auto" />
 						</Link>
 						<div className="hidden md:flex md:gap-x-6">
-							<NavLink href="/#features">{t("navigation.features")}</NavLink>
-							{/* <NavLink href="/#testimonials">Testimonials</NavLink> */}
+							<NavLink href="/pricing">Pricing</NavLink>
 							<NavLink href="/#faqs">{t("navigation.faqs")}</NavLink>
 							<NavLink href={linkT("docs.intro")} target="_blank">
 								{t("navigation.docs")}
@@ -164,31 +152,6 @@ export function Header() {
 						</div>
 					</div>
 					<div className="flex items-center gap-x-2 md:gap-x-5">
-						<Select
-							onValueChange={(locale) => {
-								router.replace("/", {
-									locale: locale as "en" | "zh-Hans",
-								});
-							}}
-							value={locale}
-						>
-							<SelectTrigger
-								className={buttonVariants({
-									variant: "outline",
-									className:
-										" flex items-center gap-2 !rounded-full visited:outline-none focus-within:outline-none focus:outline-none",
-								})}
-							>
-								<I18nIcon width={20} height={20} />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="en">{t("navigation.i18nEn")}</SelectItem>
-								<SelectItem value="zh-Hans">
-									{t("navigation.i18nZh-Hans")}
-								</SelectItem>
-							</SelectContent>
-						</Select>
-
 						<Link
 							className={buttonVariants({
 								variant: "outline",
@@ -202,25 +165,14 @@ export function Header() {
 							</span>
 							<HeartIcon className="animate-heartbeat size-4 fill-red-600 text-red-500 " />
 						</Link>
-						<Button
-							className="rounded-full bg-[#5965F2] hover:bg-[#4A55E0]"
-							asChild
-						>
+						<Button className="rounded-xl" asChild>
 							<Link
-								href="https://discord.gg/2tBnJ3jDJc"
+								href="https://app.dokploy.com"
 								aria-label="Dokploy on GitHub"
 								target="_blank"
-								className="flex flex-row items-center gap-2 text-white"
+								// className="flex flex-row items-center gap-2 text-white"
 							>
-								<svg
-									role="img"
-									className="h-6 w-6 fill-white"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-								</svg>
-								{t("navigation.discord")}
+								Dashboard
 							</Link>
 						</Button>
 						<div className="-mr-1 md:hidden">
--- a/apps/website/components/Hero.tsx
+++ b/apps/website/components/Hero.tsx
@@ -1,10 +1,13 @@
 "use client";
-import { Check, Copy } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ArrowRight, ArrowRightIcon, Check, Copy } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Container } from "./Container";
+import AnimatedShinyText from "./ui/animated-shiny-text";
 import { Button } from "./ui/button";
+import { HoverBorderGradient } from "./ui/hover-border-gradient";

 const ProductHunt = () => {
 	return (
@@ -69,6 +72,21 @@ export function Hero() {
 			</div>

 			<div className="relative">
+				<Link href="/pricing" className="relative z-10">
+					<div className="flex items-center justify-center">
+						<div
+							className={cn(
+								"group rounded-full border border-black/5 bg-neutral-100 text-sm font-medium text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
+							)}
+						>
+							<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out text-neutral-800 hover:text-neutral-900 hover:duration-300 hover:dark:text-neutral-400">
+								<span>🚀 Introducing Dokploy Cloud </span>
+								<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+							</AnimatedShinyText>
+						</div>
+					</div>
+				</Link>
+
 				<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight  text-muted-foreground  sm:text-7xl">
 					{t("hero.deploy")}{" "}
 					<span className="relative whitespace-nowrap  text-primary">
@@ -125,7 +143,9 @@ export function Hero() {
 								Discord
 							</Link>
 						</Button> */}
-						<Button className="rounded-xl" asChild>
+					</div>
+					<div className="flex flex-wrap items-center justify-center gap-3 md:flex-nowrap max-w-sm mx-auto w-full">
+						<Button className="rounded-xl  w-full" asChild>
 							<Link
 								href="https://github.com/dokploy/dokploy"
 								aria-label="Dokploy on GitHub"
@@ -138,6 +158,27 @@ export function Hero() {
 								Github
 							</Link>
 						</Button>
+						<Button
+							className="rounded-xl bg-[#5965F2] hover:bg-[#4A55E0]  w-full"
+							asChild
+						>
+							<Link
+								href="https://discord.gg/2tBnJ3jDJc"
+								aria-label="Dokploy on GitHub"
+								target="_blank"
+								className="flex flex-row items-center gap-2 text-white"
+							>
+								<svg
+									role="img"
+									className="h-6 w-6 fill-white"
+									viewBox="0 0 24 24"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+								</svg>
+								{t("navigation.discord")}
+							</Link>
+						</Button>
 					</div>
 				</div>
 				<div className="mt-16 flex flex-row justify-center gap-x-8 rounded-lg sm:gap-x-0  sm:gap-y-10 xl:gap-x-12 xl:gap-y-0">
--- a/apps/website/components/pricing.tsx
+++ b/apps/website/components/pricing.tsx
--- a/apps/website/components/ui/animated-shiny-text.tsx
+++ 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<AnimatedShinyTextProps> = ({
+	children,
+	className,
+	shimmerWidth = 100,
+}) => {
+	return (
+		<p
+			style={
+				{
+					"--shiny-width": `${shimmerWidth}px`,
+				} as CSSProperties
+			}
+			className={cn(
+				"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+				// Shine effect
+				"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+				// Shine gradient
+				"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+				className,
+			)}
+		>
+			{children}
+		</p>
+	);
+};
+
+export default AnimatedShinyText;
--- a/apps/website/components/ui/hover-border-gradient.tsx
+++ 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<HTMLElement>
+>) {
+	const [hovered, setHovered] = useState<boolean>(false);
+	const [direction, setDirection] = useState<Direction>("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<Direction, string> = {
+		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 (
+		<Tag
+			onMouseEnter={(event: React.MouseEvent<HTMLDivElement>) => {
+				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}
+		>
+			<div
+				className={cn(
+					"w-auto text-white z-10 bg-black px-4 py-2 rounded-[inherit]",
+					className,
+				)}
+			>
+				{children}
+			</div>
+			<motion.div
+				className={cn(
+					"flex-none inset-0 overflow-hidden absolute z-0 rounded-[inherit]",
+				)}
+				style={{
+					filter: "blur(2px)",
+					position: "absolute",
+					width: "100%",
+					height: "100%",
+				}}
+				initial={{ background: movingMap[direction] }}
+				animate={{
+					background: hovered
+						? [movingMap[direction], highlight]
+						: movingMap[direction],
+				}}
+				transition={{ ease: "linear", duration: duration ?? 1 }}
+			/>
+			<div className="bg-black absolute z-1 flex-none inset-[2px] rounded-[100px]" />
+		</Tag>
+	);
+}
--- 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",
 			},
 		},
 	},