feat: logo autoplay and loop

src/components/common/Logo.tsx

@@ -7,7 +7,9 @@ export const Logo: React.FC<{
   type: "svg" | "png" | "lottie"
   width?: number
   height?: number
-}> = ({ type, width, height }) => {
+  loop?: boolean
+  autoplay?: boolean
+}> = ({ type, width, height, loop, autoplay }) => {
   const ref = useRef<LottieRefCurrentProps>(null)
 
   switch (type) {
@@ -33,7 +35,8 @@ export const Logo: React.FC<{
       return (
         <Lottie
           animationData={LogoLottieJSON}
-          loop={false}
+          loop={loop ?? false}
+          autoplay={autoplay ?? true}
           lottieRef={ref}
           onMouseEnter={() => ref.current?.goToAndPlay(0)}
           style={{

src/components/main/MainLayout.tsx

@@ -35,7 +35,7 @@ export function MainLayout({
         <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
           <div className="text-2xl font-extrabold flex items-center">
             <div className="inline-block w-9 h-9 mr-3">
-              <Logo type="lottie" width={36} height={36} />
+              <Logo type="lottie" width={36} height={36} autoplay={false} />
             </div>
             xLog
           </div>

src/components/site/SiteFooter.tsx

@@ -24,7 +24,7 @@ export const SiteFooter: React.FC<{
         href={SITE_URL}
         className="inline-flex items-center align-text-top mx-1"
       >
-        <Logo type={logoType} width={20} height={20} />
+        <Logo type={logoType} width={20} height={20} autoplay={false} />
       </UniLink>
     )
   }

src/pages/dashboard/[subdomain]/index.tsx

@@ -66,7 +66,7 @@ export default function SubdomainIndex() {
     <DashboardMain>
       <div className="prose min-w-[270px] max-w-screen-md">
         <div className="w-14 h-14 mb-8">
-          <Logo type="lottie" width={100} height={100} />
+          <Logo type="lottie" width={56} height={56} />
         </div>
         <p className="text-2xl font-bold">{t("Site Stats")}</p>
         <div className="grid gap-4 sm:grid-cols-3 grid-cols-2 mb-8">

src/pages/index.tsx

@@ -549,7 +549,7 @@ export default function Home() {
           </div>
           <div className="my-20 text-center">
             <div className="w-20 h-20 mx-auto mb-10">
-              <Logo type="lottie" width={100} height={100} />
+              <Logo type="lottie" width={100} height={100} loop={true} />
             </div>
             {isConnected ? (
               <UniLink