{intl.formatMessage({
diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
new file mode 100644
index 000000000..0b880784d
--- /dev/null
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
@@ -0,0 +1,196 @@
+import {
+ type CSSProperties,
+ type MouseEvent,
+ type TouchEvent,
+ useEffect,
+ useRef,
+ useState,
+} from "react"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { debounce } from "@/utils/debounce"
+
+import styles from "./digitalTeamMemberCard.module.css"
+
+import type { User } from "@/types/user"
+
+interface DigitalTeamMemberCardCardProps {
+ user: User
+}
+
+export default function DigitalTeamMemberCardContent({
+ user,
+}: DigitalTeamMemberCardCardProps) {
+ const intl = useIntl()
+ const cardRef = useRef
(null)
+ const [isHovering, setIsHovering] = useState(false)
+ const [coords, setCoords] = useState({ x: 0, y: 0 })
+ const [rect, setRect] = useState({
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ height: 0,
+ width: 0,
+ x: 0,
+ y: 0,
+ toJSON() {},
+ })
+ let ticking = false
+ let animationFrame = 0
+
+ useEffect(() => {
+ const observer = new ResizeObserver(
+ debounce(() => {
+ const el = cardRef.current
+ if (!el) return
+ const rect = el.getBoundingClientRect()
+ setRect(rect)
+ })
+ )
+ observer.observe(document.body)
+ return () => {
+ observer.unobserve(document.body)
+ }
+ }, [])
+
+ function requestTick(
+ evt: MouseEvent | TouchEvent
+ ) {
+ if (!ticking) {
+ animationFrame = requestAnimationFrame(update(evt))
+ }
+ ticking = true
+ }
+
+ function onInteractionMove(
+ evt: MouseEvent | TouchEvent
+ ) {
+ requestTick(evt)
+ }
+
+ function update(
+ evt: MouseEvent | TouchEvent
+ ) {
+ return () => {
+ let x, y
+ if ("touches" in evt) {
+ x = evt.touches[0].clientX - rect.left
+ y = evt.touches[0].clientY - rect.top
+ } else {
+ x = evt.clientX - rect.left
+ y = evt.clientY - rect.top
+ }
+ setCoords({ x, y })
+ }
+ }
+
+ function renderShimmer(): CSSProperties {
+ const { x, y } = coords
+ const oppositeX = 100 - (x / rect.width) * 100
+ const oppositeY = 100 - (y / rect.height) * 100
+ return {
+ background: `radial-gradient(circle at ${oppositeX}% ${oppositeY}%, rgb(233 171 163 / 40%) 0%, rgb(255 255 255 / 0%) 50%)`,
+ opacity: isHovering ? 1 : 0,
+ }
+ }
+
+ function renderSkew(): CSSProperties {
+ const { x, y } = coords
+ const centerX = rect.width / 2
+ const centerY = rect.height / 2
+ const rotateY = ((x - centerX) / centerX) * 5 // Max 5 degrees
+ const rotateX = ((centerY - y) / centerY) * 5 // Max 5 degrees
+
+ return {
+ transform: isHovering
+ ? `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+ : "rotateX(0) rotateY(0)",
+ }
+ }
+
+ function handleInteractionStart() {
+ setIsHovering(true)
+ }
+
+ function handleInteractionEnd() {
+ setIsHovering(false)
+ cancelAnimationFrame(animationFrame)
+ }
+
+ return (
+
+
+
+
+
+
+
+ {intl.formatMessage({ defaultMessage: "Team Member" })}
+
+
+
+ {/* TODO: Should display country of employment */}
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+ SWE
+
+
+
+
+
+ {/* TODO: Should display employee number */}
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+ 123 456
+
+
+
+
+
+
+ {user.firstName} {user.lastName}
+
+
+
+
+
+
+ {/* TODO: Should display department of employment */}
+ {/* eslint-disable formatjs/no-literal-string-in-jsx */}
+ Haymarket by Scandic
+ {/* eslint-enable */}
+
+
+
+ {/* TODO: Should display current state of employment */}
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+ Employee
+
+
+
+
+