diff --git a/packages/fakeyou.com/public/images/landing/onboarding/hanashi-scene-thumbnail.webp b/packages/fakeyou.com/public/images/landing/onboarding/hanashi-scene-thumbnail.webp
new file mode 100644
index 0000000000..102710ba6a
Binary files /dev/null and b/packages/fakeyou.com/public/images/landing/onboarding/hanashi-scene-thumbnail.webp differ
diff --git a/packages/fakeyou.com/public/images/landing/onboarding/pirate-island-scene-thumbnail.webp b/packages/fakeyou.com/public/images/landing/onboarding/pirate-island-scene-thumbnail.webp
new file mode 100644
index 0000000000..a09c283966
Binary files /dev/null and b/packages/fakeyou.com/public/images/landing/onboarding/pirate-island-scene-thumbnail.webp differ
diff --git a/packages/fakeyou.com/public/images/landing/onboarding/spaceship-scene-thumbnail.webp b/packages/fakeyou.com/public/images/landing/onboarding/spaceship-scene-thumbnail.webp
new file mode 100644
index 0000000000..4477f05375
Binary files /dev/null and b/packages/fakeyou.com/public/images/landing/onboarding/spaceship-scene-thumbnail.webp differ
diff --git a/packages/fakeyou.com/src/components/common/Card/Card.scss b/packages/fakeyou.com/src/components/common/Card/Card.scss
index 44b0947811..cfd3625224 100644
--- a/packages/fakeyou.com/src/components/common/Card/Card.scss
+++ b/packages/fakeyou.com/src/components/common/Card/Card.scss
@@ -8,6 +8,26 @@
transition: 0.2s;
position: relative;
+ .card-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 1;
+ transition: all 0.2s;
+
+ &:hover {
+ cursor: pointer;
+ transform: scale(1.04);
+ }
+
+ &.card-bg-hover {
+ transform: scale(1.05);
+ }
+ }
+
.card-img {
width: 100%;
transition: 0.4s ease;
diff --git a/packages/fakeyou.com/src/components/common/Card/Card.tsx b/packages/fakeyou.com/src/components/common/Card/Card.tsx
index fdbd2bc034..0a9f1d4589 100644
--- a/packages/fakeyou.com/src/components/common/Card/Card.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/Card.tsx
@@ -41,9 +41,13 @@ export default function Card({
textHovered ? "bottom-text-hover" : ""
}`.trim()}
style={{
- backgroundImage: `url(${backgroundImage})`,
- backgroundSize: "cover",
- backgroundPosition: "center",
+ // ...(backgroundImage
+ // ? {
+ // backgroundImage: `url(${backgroundImage})`,
+ // backgroundSize: "cover",
+ // backgroundPosition: "center",
+ // }
+ // : {}),
height: height || "auto",
borderWidth: borderWidth || "1px",
borderStyle: "solid",
@@ -54,6 +58,13 @@ export default function Card({
onMouseLeave={onMouseLeave}
>
{children}
+ {backgroundImage && (
+
+ )}
{bottomText && (