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 && ( + Thumbnail + )} {bottomText && (
{ history.push("/studio-intro/m_ejhs95fc5aybp36h4a79k7523ds6an"); }, }, { - text: "Scene 2", - backgroundImage: "", + text: "Pirate Island", + backgroundImage: + "/images/landing/onboarding/pirate-island-scene-thumbnail.webp", onClick: () => { - history.push("/studio-intro"); + history.push("/studio-intro/m_0tmgwem7x4k47w4cq96ja8psnvnaw5"); }, }, { - text: "Scene 3", - backgroundImage: "", + text: "Spaceship", + backgroundImage: + "/images/landing/onboarding/spaceship-scene-thumbnail.webp", onClick: () => { - history.push("/studio-intro"); + history.push("/studio-intro/m_16cc8b0dtp5fmjgb3yh85hnxyd695c"); }, }, { - text: "Scene 4", - backgroundImage: "", + text: "Hanashi", + backgroundImage: + "/images/landing/onboarding/hanashi-scene-thumbnail.webp", onClick: () => { - history.push("/studio-intro"); + history.push("/studio-intro/m_r4025m9dq0hppqzh8t6tmpmxv47yyv"); }, }, ];