diff --git a/src/assets/animations/logoanimation.json b/src/assets/animations/logo.json similarity index 100% rename from src/assets/animations/logoanimation.json rename to src/assets/animations/logo.json diff --git a/src/components/LogoAnimation.tsx b/src/components/LogoAnimation.tsx index 38b9f63..3a51d2b 100644 --- a/src/components/LogoAnimation.tsx +++ b/src/components/LogoAnimation.tsx @@ -1,7 +1,7 @@ import { VStack } from "panda/jsx"; import { type ReactElement } from "react"; import LottiePlayer from "./LottiePlayer"; -import logoAnimation from "@/assets/animations/logoAnimation.json"; +import logoAnimation from "@/assets/animations/logo.json"; export function LogoAnimation(): ReactElement { return ( diff --git a/src/components/LottiePlayer.tsx b/src/components/LottiePlayer.tsx index 8e508b0..04549fc 100644 --- a/src/components/LottiePlayer.tsx +++ b/src/components/LottiePlayer.tsx @@ -23,7 +23,7 @@ export default function LottiePlayer({ const _stopAtEnd = stopAtEnd ?? false; useEffect(() => { - if (_stopAtEnd && lottieState) { + if (_stopAtEnd && lottieState != null) { const lastFrame = lottieState.totalFrames - 1; lottieState.addEventListener("complete", () => { @@ -44,11 +44,11 @@ export default function LottiePlayer({ return ( { setLottieState(instance); }} onEvent={eventHandler} - loop={!_stopAtEnd} style={{ height: "100%", }} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 8268686..a79af74 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -7,9 +7,9 @@ import headerLeft from "@/assets/svg/background/header-left.svg"; import headerRight from "@/assets/svg/background/header-right.svg"; import wakaba from "@/assets/svg/background/wakaba.svg"; import wakabaIcon from "@/assets/svg/icon/wakaba.svg"; +import { LogoAnimation } from "@/components/LogoAnimation"; import { Button } from "@/components/cva/Button"; import { Expanded } from "@/components/cva/Expanded"; -import { LogoAnimation } from "@/components/LogoAnimation"; export const Route = createFileRoute("/")({ component: () => { @@ -61,14 +61,13 @@ export const Route = createFileRoute("/")({ backgroundColor="white" display="grid" duration="1000" - slideInX="-10" height={{ base: "50vh", sm: "50vh", - lg: "50vh", xl: "50vh", }} + slideInX="-10" style={{ position: "relative", backgroundImage: `url("${headerLeft}")`, @@ -79,8 +78,8 @@ export const Route = createFileRoute("/")({ > @@ -110,9 +109,9 @@ export const Route = createFileRoute("/")({ ref={ref1} display="grid" fadeIn="2" - slideInX="100" height={{ base: "400px", sm: "600px", lg: "40vh", xl: "60vh" }} placeItems="center" + slideInX="100" style={{ backgroundImage: `url("${wakabaIcon}"), url("${decorationRight}")`, backgroundSize: "auto 15%, auto 15%",