From 47b3fd5898785ced18e2cd4981e42ad66ff86fbb Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Mon, 9 Mar 2026 09:53:04 -0300
Subject: [PATCH 01/17] feat: Add movie discovery onboarding page with a
 swipeable movie card interface.

---
 apps/web/package.json                         |   2 +
 .../_components/onboarding-swiper.tsx         | 428 ++++++++++++++++++
 apps/web/src/app/[lang]/onboarding/page.tsx   |  16 +
 pnpm-lock.yaml                                | 418 ++++++++++++++++-
 4 files changed, 847 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/page.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 0293af43..805636cf 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-spring/web": "^10.0.3",
     "@stripe/stripe-js": "^8.6.0",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-table": "^8.21.3",
@@ -83,6 +84,7 @@
     "react-intersection-observer": "^10.0.0",
     "react-masonry-css": "^1.0.16",
     "react-simple-maps": "^3.0.0",
+    "react-tinder-card": "^1.6.4",
     "react-tooltip": "^5.30.0",
     "recharts": "^3.6.0",
     "sharp": "^0.34.5",
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
new file mode 100644
index 00000000..70f2babc
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -0,0 +1,428 @@
+'use client'
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
+import { Bookmark, Check, X as XIcon } from 'lucide-react'
+import Image from 'next/image'
+import { useCallback, useMemo, useState } from 'react'
+import { tmdb } from '@/services/tmdb'
+import { tmdbImage } from '@/utils/tmdb/image'
+
+type SwipeDirection = 'left' | 'right' | 'up' | null
+
+type Movie = {
+  id: number
+  title: string
+  poster_path: string
+  backdrop_path: string
+  release_date: string
+  vote_average: number
+  overview: string
+}
+
+type OnboardingSwiperProps = {
+  lang: string
+}
+
+const SWIPE_THRESHOLD = 120
+const CARD_STYLES = [
+  { scale: 1, rotation: 0, offsetX: 0, offsetY: 0 },
+  { scale: 0.93, rotation: 10, offsetX: 12, offsetY: 4 },
+  { scale: 0.86, rotation: -18, offsetX: -20, offsetY: 8 },
+]
+
+function getSwipeDirection(offsetX: number, offsetY: number): SwipeDirection {
+  const absX = Math.abs(offsetX)
+  const absY = Math.abs(offsetY)
+
+  if (absX < 40 && absY < 40) return null
+
+  // Vertical takes priority if clearly vertical
+  if (offsetY < -40 && absY > absX * 0.8) return 'up'
+  if (offsetX > 40 && absX > absY * 0.6) return 'right'
+  if (offsetX < -40 && absX > absY * 0.6) return 'left'
+
+  return null
+}
+
+function getSwipeConfig(dir: SwipeDirection) {
+  switch (dir) {
+    case 'right':
+      return {
+        icon: Bookmark,
+        label: 'Quero assistir',
+        colorClass: 'text-blue-500',
+        bgClass: 'border-blue-500/60',
+      }
+    case 'left':
+      return {
+        icon: XIcon,
+        label: 'Não interessado',
+        colorClass: 'text-red-400',
+        bgClass: 'border-red-400/60',
+      }
+    case 'up':
+      return {
+        icon: Check,
+        label: 'Já assisti',
+        colorClass: 'text-green-500',
+        bgClass: 'border-green-500/60',
+      }
+    default:
+      return null
+  }
+}
+
+// ─── Swipeable Card ────────────────────────────────────────────────────
+function SwipeCard({
+  movie,
+  onSwipe,
+  onDirectionChange,
+}: {
+  movie: Movie
+  onSwipe: (dir: SwipeDirection) => void
+  onDirectionChange: (dir: SwipeDirection, progress: number) => void
+}) {
+  const handleDrag = useCallback(
+    (_: unknown, info: PanInfo) => {
+      const dir = getSwipeDirection(info.offset.x, info.offset.y)
+      const dist = Math.sqrt(info.offset.x ** 2 + info.offset.y ** 2)
+      const progress = Math.min(dist / SWIPE_THRESHOLD, 1)
+      onDirectionChange(dir, progress)
+    },
+    [onDirectionChange]
+  )
+
+  const handleDragEnd = useCallback(
+    (_: unknown, info: PanInfo) => {
+      const dir = getSwipeDirection(info.offset.x, info.offset.y)
+      const dist = Math.sqrt(info.offset.x ** 2 + info.offset.y ** 2)
+
+      if (dir && dist > SWIPE_THRESHOLD) {
+        onSwipe(dir)
+      } else {
+        onDirectionChange(null, 0)
+      }
+    },
+    [onSwipe, onDirectionChange]
+  )
+
+  return (
+    <motion.div
+      className="absolute inset-0 cursor-grab active:cursor-grabbing touch-none select-none"
+      style={{ zIndex: 10 }}
+      drag
+      dragSnapToOrigin
+      dragMomentum={false}
+      onDrag={handleDrag}
+      onDragEnd={handleDragEnd}
+      whileDrag={{ scale: 1.02 }}
+    >
+      <div className="pointer-events-none relative h-full w-full overflow-hidden rounded-[32px] border border-border/30 shadow-xl shadow-black/20">
+        {movie.poster_path ? (
+          <Image
+            src={tmdbImage(movie.poster_path, 'w500')}
+            alt={movie.title}
+            fill
+            priority
+            draggable={false}
+            className="object-cover pointer-events-none"
+            sizes="(max-width: 640px) 70vw, 280px"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-muted">
+            <span className="text-muted-foreground text-sm">Sem poster</span>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+// ─── Exit animation card ─────────────────────────────────────────────
+function ExitCard({
+  movie,
+  direction,
+  onComplete,
+}: {
+  movie: Movie
+  direction: SwipeDirection
+  onComplete: () => void
+}) {
+  const exitX = direction === 'right' ? 500 : direction === 'left' ? -500 : 0
+  const exitY = direction === 'up' ? -600 : 0
+  const exitRotation =
+    direction === 'right' ? 25 : direction === 'left' ? -25 : 0
+
+  return (
+    <motion.div
+      className="absolute inset-0"
+      initial={{ x: 0, y: 0, rotate: 0, opacity: 1 }}
+      animate={{
+        x: exitX,
+        y: exitY,
+        rotate: exitRotation,
+        opacity: 0,
+      }}
+      transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+      onAnimationComplete={onComplete}
+      style={{ zIndex: 20 }}
+    >
+      <div className="relative h-full w-full overflow-hidden rounded-[32px] border border-border/30 shadow-xl shadow-black/20">
+        {movie.poster_path && (
+          <Image
+            src={tmdbImage(movie.poster_path, 'w500')}
+            alt={movie.title}
+            fill
+            className="object-cover"
+            sizes="(max-width: 640px) 70vw, 280px"
+          />
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+// ─── Pill Overlay ────────────────────────────────────────────────────
+function SwipePillOverlay({
+  direction,
+  progress,
+}: {
+  direction: SwipeDirection
+  progress: number
+}) {
+  const config = getSwipeConfig(direction)
+  if (!config || progress < 0.3) return null
+
+  const Icon = config.icon
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: Math.min(progress * 1.5, 1), scale: 1 }}
+      exit={{ opacity: 0, scale: 0.8 }}
+      className="absolute inset-0 z-30 flex items-center justify-center pointer-events-none"
+    >
+      <div
+        className={`flex items-center gap-2 rounded-full border-2 ${config.bgClass} bg-black/80 px-5 py-2.5 backdrop-blur-sm`}
+      >
+        <Icon className={`h-5 w-5 ${config.colorClass}`} />
+        <span className="text-sm font-semibold text-white">{config.label}</span>
+      </div>
+    </motion.div>
+  )
+}
+
+export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
+  const language = lang || 'en-US'
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [swipeDirection, setSwipeDirection] = useState<SwipeDirection>(null)
+  const [swipeProgress, setSwipeProgress] = useState(0)
+  const [exitingCard, setExitingCard] = useState<{
+    movie: Movie
+    direction: SwipeDirection
+  } | null>(null)
+  const [counts, setCounts] = useState({ watchlist: 0, watched: 0, skipped: 0 })
+
+  const { data, fetchNextPage } = useInfiniteQuery({
+    queryKey: ['onboarding-movies', language],
+    queryFn: ({ pageParam }) =>
+      tmdb.movies.discover({
+        filters: { sort_by: 'popularity.desc', 'vote_count.gte': '200' },
+        language,
+        page: pageParam,
+      }),
+    getNextPageParam: lastPage => lastPage.page + 1,
+    initialPageParam: 1,
+  })
+
+  const movies = useMemo(
+    () => (data?.pages.flatMap(p => p.results) ?? []) as Movie[],
+    [data]
+  )
+
+  const visibleCards = movies.slice(currentIndex, currentIndex + 3)
+  const currentMovie = visibleCards[0]
+
+  const handleSwipe = useCallback(
+    (dir: SwipeDirection) => {
+      if (!currentMovie || exitingCard) return
+
+      setSwipeDirection(null)
+      setSwipeProgress(0)
+      setExitingCard({ movie: currentMovie, direction: dir })
+
+      setCounts(prev => ({
+        watchlist: dir === 'right' ? prev.watchlist + 1 : prev.watchlist,
+        watched: dir === 'up' ? prev.watched + 1 : prev.watched,
+        skipped: dir === 'left' ? prev.skipped + 1 : prev.skipped,
+      }))
+    },
+    [currentMovie, exitingCard]
+  )
+
+  const handleExitComplete = useCallback(() => {
+    setExitingCard(null)
+    setCurrentIndex(prev => {
+      const next = prev + 1
+      if (movies.length - next < 5) {
+        fetchNextPage()
+      }
+      return next
+    })
+  }, [movies.length, fetchNextPage])
+
+  const handleDirectionChange = useCallback(
+    (dir: SwipeDirection, progress: number) => {
+      setSwipeDirection(dir)
+      setSwipeProgress(progress)
+    },
+    []
+  )
+
+  const total = counts.watchlist + counts.watched + counts.skipped
+
+  if (!currentMovie && !exitingCard) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="flex flex-col items-center gap-4">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <p className="text-sm text-muted-foreground">Carregando filmes...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative flex min-h-screen w-full flex-col items-center overflow-hidden bg-background px-4 pb-10 pt-8">
+      <div className="flex w-full max-w-sm flex-col items-center gap-2">
+        <h1 className="text-2xl font-bold tracking-tight">
+          Descubra seus filmes
+        </h1>
+        <p className="text-sm text-muted-foreground text-center">
+          Arraste para os lados para adicionar à sua lista
+        </p>
+      </div>
+
+      <div
+        className="relative mx-auto mt-6 w-full select-none"
+        style={{ maxWidth: 280, aspectRatio: '2/3' }}
+      >
+        {visibleCards
+          .slice(1, 3)
+          .reverse()
+          .map((movie, reversedIdx) => {
+            const stackIdx = visibleCards.length <= 2 ? 1 : 2 - reversedIdx
+            const style = CARD_STYLES[stackIdx] ?? CARD_STYLES[2]
+
+            return (
+              <div
+                key={movie.id}
+                className="absolute inset-0 overflow-hidden rounded-[32px] border border-border/20 shadow-lg"
+                style={{
+                  transform: `scale(${style.scale}) rotate(${style.rotation}deg) translate(${style.offsetX}px, ${style.offsetY}px)`,
+                  zIndex: 3 - stackIdx,
+                }}
+              >
+                {movie.poster_path && (
+                  <Image
+                    src={tmdbImage(movie.poster_path, 'w500')}
+                    alt={movie.title}
+                    fill
+                    className="object-cover"
+                    sizes="280px"
+                  />
+                )}
+              </div>
+            )
+          })}
+
+        {currentMovie && !exitingCard && (
+          <SwipeCard
+            key={currentMovie.id}
+            movie={currentMovie}
+            onSwipe={handleSwipe}
+            onDirectionChange={handleDirectionChange}
+          />
+        )}
+
+        <AnimatePresence>
+          {exitingCard && (
+            <ExitCard
+              key={`exit-${exitingCard.movie.id}`}
+              movie={exitingCard.movie}
+              direction={exitingCard.direction}
+              onComplete={handleExitComplete}
+            />
+          )}
+        </AnimatePresence>
+
+        <AnimatePresence>
+          {swipeDirection && swipeProgress > 0.3 && !exitingCard && (
+            <SwipePillOverlay
+              key="pill"
+              direction={swipeDirection}
+              progress={swipeProgress}
+            />
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="mt-8 flex flex-wrap items-center justify-center gap-2">
+        <button
+          type="button"
+          onClick={() => handleSwipe('up')}
+          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+        >
+          <Check className="h-4 w-4 text-green-500" />
+          <span>Já assisti</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => handleSwipe('right')}
+          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+        >
+          <Bookmark className="h-4 w-4 text-blue-500" />
+          <span>Quero assistir</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => handleSwipe('left')}
+          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+        >
+          <XIcon className="h-4 w-4 text-red-400" />
+          <span>Não interessado</span>
+        </button>
+      </div>
+
+      {total > 0 && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mt-4 flex items-center gap-4 text-xs text-muted-foreground"
+        >
+          {counts.watched > 0 && (
+            <span className="flex items-center gap-1">
+              <Check className="h-3 w-3 text-green-500" />
+              {counts.watched}
+            </span>
+          )}
+          {counts.watchlist > 0 && (
+            <span className="flex items-center gap-1">
+              <Bookmark className="h-3 w-3 text-blue-500" />
+              {counts.watchlist}
+            </span>
+          )}
+          {counts.skipped > 0 && (
+            <span className="flex items-center gap-1">
+              <XIcon className="h-3 w-3 text-red-400" />
+              {counts.skipped}
+            </span>
+          )}
+        </motion.div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/page.tsx b/apps/web/src/app/[lang]/onboarding/page.tsx
new file mode 100644
index 00000000..c41a4f1e
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/page.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next'
+import type { PageProps } from '@/types/languages'
+import { OnboardingSwiper } from './_components/onboarding-swiper'
+
+export const metadata: Metadata = {
+  title: 'Onboarding • Plotwist',
+  description: 'Tell us what movies you love.',
+}
+
+const OnboardingPage = async (props: PageProps) => {
+  const { lang } = await props.params
+
+  return <OnboardingSwiper lang={lang} />
+}
+
+export default OnboardingPage
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7513941a..92dfbfa3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -251,10 +251,10 @@ importers:
         version: 1.5.9(@swc/core@1.15.13)(rollup@4.59.0)
       vite-tsconfig-paths:
         specifier: ^6.0.3
-        version: 6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       vitest:
         specifier: ^4.0.16
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
       zod:
         specifier: ^4.3.5
         version: 4.3.6
@@ -360,6 +360,9 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.2.8
         version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@react-spring/web':
+        specifier: ^10.0.3
+        version: 10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@stripe/stripe-js':
         specifier: ^8.6.0
         version: 8.8.0
@@ -474,6 +477,9 @@ importers:
       react-simple-maps:
         specifier: ^3.0.0
         version: 3.0.0(prop-types@15.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react-tinder-card:
+        specifier: ^1.6.4
+        version: 1.6.4(@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       react-tooltip:
         specifier: ^5.30.0
         version: 5.30.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -540,7 +546,7 @@ importers:
         version: 3.0.6
       '@vitejs/plugin-react':
         specifier: ^5.1.2
-        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/coverage-istanbul':
         specifier: ^4.0.16
         version: 4.0.18(vitest@4.0.18)
@@ -567,7 +573,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.16
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   packages/typescript-config: {}
 
@@ -739,6 +745,9 @@ importers:
         specifier: ^4.3.5
         version: 4.3.6
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.2.1
+        version: 4.2.1
       '@types/node':
         specifier: ^25.0.3
         version: 25.3.0
@@ -3733,6 +3742,33 @@ packages:
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
+  '@react-spring/animated@10.0.3':
+    resolution: {integrity: sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@react-spring/core@10.0.3':
+    resolution: {integrity: sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@react-spring/rafz@10.0.3':
+    resolution: {integrity: sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==}
+
+  '@react-spring/shared@10.0.3':
+    resolution: {integrity: sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@react-spring/types@10.0.3':
+    resolution: {integrity: sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==}
+
+  '@react-spring/web@10.0.3':
+    resolution: {integrity: sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -4397,6 +4433,94 @@ packages:
       zod:
         optional: true
 
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.1':
+    resolution: {integrity: sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==}
+
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
@@ -5767,6 +5891,10 @@ packages:
     resolution: {integrity: sha512-2RZdgEbXmp5+dVbRm0P7HQUImZpICccJy7rN7Tv+SFa55pH+lxnuw6/K1ZxxBfHoYpSkHLAO92oa8O4SwFXA2A==}
     engines: {node: '>=10.2.0'}
 
+  enhanced-resolve@5.20.0:
+    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -6716,6 +6844,76 @@ packages:
   light-my-request@6.6.0:
     resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
 
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -7399,6 +7597,9 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-sleep@1.1.0:
+    resolution: {integrity: sha512-bwP3GKZirBUYMtiUuBrheLUQdRXVeE/pmHOaLpNJzNfAD4b5AjDn6l823brXcQFade4G/g7GMNQ3KV86E8EaEw==}
+
   pac-proxy-agent@7.2.0:
     resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
     engines: {node: '>= 14'}
@@ -7819,6 +8020,18 @@ packages:
       '@types/react':
         optional: true
 
+  react-tinder-card@1.6.4:
+    resolution: {integrity: sha512-IC6YXoBZ+51jm7XsT8i+8G/ov8rvAob+kBRdp9unQyjsLc7jmuYb1cNfu95Q3mdFDgwE0AzTIyl1o2Klm61+aQ==}
+    peerDependencies:
+      '@react-spring/native': ^9.5.5
+      '@react-spring/web': ^9.5.5
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@react-spring/native':
+        optional: true
+      '@react-spring/web':
+        optional: true
+
   react-tooltip@5.30.0:
     resolution: {integrity: sha512-Yn8PfbgQ/wmqnL7oBpz1QiDaLKrzZMdSUUdk7nVeGTwzbxCAJiJzR4VSYW+eIO42F1INt57sPUmpgKv0KwJKtg==}
     peerDependencies:
@@ -8438,6 +8651,10 @@ packages:
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -12602,6 +12819,38 @@ snapshots:
     dependencies:
       react: 19.2.4
 
+  '@react-spring/animated@10.0.3(react@19.2.4)':
+    dependencies:
+      '@react-spring/shared': 10.0.3(react@19.2.4)
+      '@react-spring/types': 10.0.3
+      react: 19.2.4
+
+  '@react-spring/core@10.0.3(react@19.2.4)':
+    dependencies:
+      '@react-spring/animated': 10.0.3(react@19.2.4)
+      '@react-spring/shared': 10.0.3(react@19.2.4)
+      '@react-spring/types': 10.0.3
+      react: 19.2.4
+
+  '@react-spring/rafz@10.0.3': {}
+
+  '@react-spring/shared@10.0.3(react@19.2.4)':
+    dependencies:
+      '@react-spring/rafz': 10.0.3
+      '@react-spring/types': 10.0.3
+      react: 19.2.4
+
+  '@react-spring/types@10.0.3': {}
+
+  '@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@react-spring/animated': 10.0.3(react@19.2.4)
+      '@react-spring/core': 10.0.3(react@19.2.4)
+      '@react-spring/shared': 10.0.3(react@19.2.4)
+      '@react-spring/types': 10.0.3
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -13398,6 +13647,75 @@ snapshots:
       typescript: 5.9.3
       zod: 4.3.6
 
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/postcss@4.2.1':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      postcss: 8.5.6
+      tailwindcss: 4.2.1
+
   '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       postcss-selector-parser: 6.0.10
@@ -13666,7 +13984,7 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
@@ -13674,7 +13992,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -13690,7 +14008,7 @@ snapshots:
       magicast: 0.5.2
       obug: 2.1.1
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -13706,7 +14024,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/expect@4.0.18':
     dependencies:
@@ -13717,14 +14035,14 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/mocker@4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 4.0.18
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
       msw: 2.12.10(@types/node@25.3.0)(typescript@5.9.3)
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/pretty-format@4.0.18':
     dependencies:
@@ -13752,7 +14070,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@4.0.18':
     dependencies:
@@ -14743,6 +15061,11 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  enhanced-resolve@5.20.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -15949,6 +16272,55 @@ snapshots:
       process-warning: 4.0.1
       set-cookie-parser: 2.7.2
 
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
   lilconfig@3.1.3: {}
 
   limiter@1.1.5: {}
@@ -16807,6 +17179,8 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
+  p-sleep@1.1.0: {}
+
   pac-proxy-agent@7.2.0:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
@@ -17307,6 +17681,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
+  react-tinder-card@1.6.4(@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
+    dependencies:
+      p-sleep: 1.1.0
+      react: 19.2.4
+    optionalDependencies:
+      '@react-spring/web': 10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
   react-tooltip@5.30.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@floating-ui/dom': 1.7.5
@@ -18116,6 +18497,8 @@ snapshots:
 
   tailwindcss@4.2.1: {}
 
+  tapable@2.3.0: {}
+
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4
@@ -18571,17 +18954,17 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.9.3)
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -18593,13 +18976,14 @@ snapshots:
       '@types/node': 25.3.0
       fsevents: 2.3.3
       jiti: 2.6.1
+      lightningcss: 1.31.1
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2):
+  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/mocker': 4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/pretty-format': 4.0.18
       '@vitest/runner': 4.0.18
       '@vitest/snapshot': 4.0.18
@@ -18616,7 +19000,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0

From b5a1c3edb8736a8fe188b4294bffe8580ef56335 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Wed, 11 Mar 2026 00:18:04 -0300
Subject: [PATCH 02/17] feat(web): add layout wrapper to cleanly isolate
 onboarding view

---
 apps/web/src/app/[lang]/layout.tsx         | 39 +++++++++++-----------
 apps/web/src/components/layout-wrapper.tsx | 36 ++++++++++++++++++++
 2 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 apps/web/src/components/layout-wrapper.tsx

diff --git a/apps/web/src/app/[lang]/layout.tsx b/apps/web/src/app/[lang]/layout.tsx
index ecaea837..eef913d4 100644
--- a/apps/web/src/app/[lang]/layout.tsx
+++ b/apps/web/src/app/[lang]/layout.tsx
@@ -7,6 +7,7 @@ import { HtmlLangSetter } from '@/components/html-lang-setter'
 import { ProBadge } from '@/components/pro-badge'
 import { SonnerProvider, ThemeProvider } from '@/components/providers'
 import { LanguageContextProvider } from '@/context/language'
+import { LayoutWrapper } from '@/components/layout-wrapper'
 import { ListsContextProvider } from '@/context/lists'
 import { SessionContextProvider } from '@/context/session'
 import { UserPreferencesContextProvider } from '@/context/user-preferences'
@@ -57,26 +58,24 @@ export default async function RootLayout({
           <LanguageContextProvider language={lang} dictionary={dictionary}>
             <UserPreferencesContextProvider userPreferences={userPreferences}>
               <ListsContextProvider>
-                <div className="flex flex-col">
-                  <div className="mx-auto w-full max-w-6xl border-b bg-background px-4 py-2 lg:my-4 lg:rounded-full lg:border">
-                    <Header />
-                  </div>
-
-                  <main className="w-full min-h-screen">{children}</main>
-
-                  <Footer dictionary={dictionary} language={lang} />
-                </div>
-
-                {session?.user.subscriptionType !== 'PRO' && (
-                  <Link
-                    href={`/${lang}/pricing`}
-                    className="fixed bottom-4 right-4 border bg-background rounded-full py-2 px-4"
-                  >
-                    <span className="flex gap-2 items-center text-center text-sm">
-                      {dictionary.get_14_days_free_pro} <ProBadge />
-                    </span>
-                  </Link>
-                )}
+                <LayoutWrapper
+                  header={<Header />}
+                  footer={<Footer dictionary={dictionary} language={lang} />}
+                  proBadge={
+                    session?.user.subscriptionType !== 'PRO' ? (
+                      <Link
+                        href={`/${lang}/pricing`}
+                        className="fixed bottom-4 right-4 border bg-background rounded-full py-2 px-4 z-50"
+                      >
+                        <span className="flex gap-2 items-center text-center text-sm">
+                          {dictionary.get_14_days_free_pro} <ProBadge />
+                        </span>
+                      </Link>
+                    ) : null
+                  }
+                >
+                  {children}
+                </LayoutWrapper>
               </ListsContextProvider>
             </UserPreferencesContextProvider>
           </LanguageContextProvider>
diff --git a/apps/web/src/components/layout-wrapper.tsx b/apps/web/src/components/layout-wrapper.tsx
new file mode 100644
index 00000000..5db6e796
--- /dev/null
+++ b/apps/web/src/components/layout-wrapper.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export function LayoutWrapper({
+  header,
+  footer,
+  children,
+  proBadge,
+}: {
+  header: React.ReactNode
+  footer: React.ReactNode
+  children: React.ReactNode
+  proBadge?: React.ReactNode
+}) {
+  const pathname = usePathname()
+  const isOnboarding = pathname?.includes('/onboarding')
+
+  return (
+    <>
+      <div className="flex flex-col">
+        {!isOnboarding && (
+          <div className="mx-auto w-full max-w-6xl border-b bg-background px-4 py-2 lg:my-4 lg:rounded-full lg:border">
+            {header}
+          </div>
+        )}
+
+        <main className="w-full min-h-screen">{children}</main>
+
+        {!isOnboarding && footer}
+      </div>
+
+      {!isOnboarding && proBadge}
+    </>
+  )
+}

From 36acb127d848fd54bd7be91b8aa86aeb927f1440 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Wed, 11 Mar 2026 00:18:04 -0300
Subject: [PATCH 03/17] feat(locales): add onboarding translation keys across
 all language dictionaries

---
 apps/web/public/dictionaries/de-DE.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/en-US.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/es-ES.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/fr-FR.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/it-IT.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/ja-JP.json | 31 ++++++++++++++++++++++++-
 apps/web/public/dictionaries/pt-BR.json | 31 ++++++++++++++++++++++++-
 7 files changed, 210 insertions(+), 7 deletions(-)

diff --git a/apps/web/public/dictionaries/de-DE.json b/apps/web/public/dictionaries/de-DE.json
index 8ea1b61c..56285323 100644
--- a/apps/web/public/dictionaries/de-DE.json
+++ b/apps/web/public/dictionaries/de-DE.json
@@ -887,5 +887,34 @@
   "feature_stats_title": "Sieh dir deine Statistiken an",
   "feature_stats_description": "Visualisiere deine Gewohnheiten mit detaillierten Statistiken und Einblicken.",
   "app_section_title": "Nimm Plotwist mit",
-  "app_section_subtitle": "Verfolge unterwegs mit der Plotwist iOS-App. Wische zum Entdecken, verfolge Episoden und verpasse nie einen Titel."
+  "app_section_subtitle": "Verfolge unterwegs mit der Plotwist iOS-App. Wische zum Entdecken, verfolge Episoden und verpasse nie einen Titel.",
+  "onboarding": {
+    "welcome_title": "Verfolge, entdecke und verpasse keinen Titel",
+    "welcome_subtitle": "Tritt der Gemeinschaft der Film- und Serienliebhaber bei.",
+    "get_started": "Los geht's",
+    "name_title": "Sag uns deinen Namen, um Plotwist zu deinem zu machen",
+    "name_placeholder": "Dein Name",
+    "content_types_title": "Was schaust du am liebsten?",
+    "content_types_movie": "Filme",
+    "content_types_tv": "Serien",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "Dorama",
+    "genres_title": "Wähle deine Lieblingsgenres",
+    "genres_subtitle": "Wähle mindestens ein Genre",
+    "genres_select_prompt": "Wähle ein Genre",
+    "swiper_title": "Titel entdecken",
+    "swiper_subtitle": "Wische zur Seite, um zu deiner Liste hinzuzufügen",
+    "swiper_watched": "Gesehen",
+    "swiper_watching": "Laufend",
+    "swiper_want_to_watch": "Möchte ich sehen",
+    "swiper_skip": "Überspringen",
+    "swiper_empty": "Keine Titel mit diesen Einstellungen gefunden.",
+    "swiper_fetching": "Suche Titel...",
+    "swiper_finish_ready": "Los geht's!",
+    "swiper_finish_remaining": "Titel übrig",
+    "celebration_title": "Alles bereit!",
+    "celebration_subtitle": "Dein Profil ist fertig. Lass uns anfangen.",
+    "celebration_cta": "Zur Startseite",
+    "continue": "Weiter"
+  }
 }
diff --git a/apps/web/public/dictionaries/en-US.json b/apps/web/public/dictionaries/en-US.json
index 1aa780b4..ff58fe37 100644
--- a/apps/web/public/dictionaries/en-US.json
+++ b/apps/web/public/dictionaries/en-US.json
@@ -889,5 +889,34 @@
   "feature_stats_title": "See your stats",
   "feature_stats_description": "Visualize your watching habits with detailed statistics and insights.",
   "app_section_title": "Take Plotwist with you",
-  "app_section_subtitle": "Track on the go with the Plotwist iOS app. Swipe to discover, track episodes, and never miss a title."
+  "app_section_subtitle": "Track on the go with the Plotwist iOS app. Swipe to discover, track episodes, and never miss a title.",
+  "onboarding": {
+    "welcome_title": "Track, discover and never miss a title",
+    "welcome_subtitle": "Join the community of movie and TV show lovers.",
+    "get_started": "Get started",
+    "name_title": "Tell us your name so we can make Plotwist feel like yours",
+    "name_placeholder": "Your name",
+    "content_types_title": "What do you like to watch?",
+    "content_types_movie": "Movies",
+    "content_types_tv": "TV Series",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "K-Drama",
+    "genres_title": "Pick your favorite genres",
+    "genres_subtitle": "Select at least one genre",
+    "genres_select_prompt": "Select a genre",
+    "swiper_title": "Discover titles",
+    "swiper_subtitle": "Swipe sideways to add to your list",
+    "swiper_watched": "Watched",
+    "swiper_watching": "Watching",
+    "swiper_want_to_watch": "Want to watch",
+    "swiper_skip": "Skip",
+    "swiper_empty": "No titles found with these preferences.",
+    "swiper_fetching": "Fetching titles...",
+    "swiper_finish_ready": "Let's go!",
+    "swiper_finish_remaining": "titles to go",
+    "celebration_title": "You're all set!",
+    "celebration_subtitle": "Your profile is ready. Let's start tracking.",
+    "celebration_cta": "Go to Home",
+    "continue": "Continue"
+  }
 }
diff --git a/apps/web/public/dictionaries/es-ES.json b/apps/web/public/dictionaries/es-ES.json
index b647d487..b8aa8c4c 100644
--- a/apps/web/public/dictionaries/es-ES.json
+++ b/apps/web/public/dictionaries/es-ES.json
@@ -891,5 +891,34 @@
   "feature_stats_title": "Mira tus estadísticas",
   "feature_stats_description": "Visualiza tus hábitos con estadísticas detalladas e insights.",
   "app_section_title": "Lleva Plotwist contigo",
-  "app_section_subtitle": "Sigue desde cualquier lugar con la app de Plotwist para iOS. Desliza para descubrir, sigue episodios y nunca te pierdas un título."
+  "app_section_subtitle": "Sigue desde cualquier lugar con la app de Plotwist para iOS. Desliza para descubrir, sigue episodios y nunca te pierdas un título.",
+  "onboarding": {
+    "welcome_title": "Sigue, descubre y no te pierdas ningún título",
+    "welcome_subtitle": "Únete a la comunidad de amantes del cine y series.",
+    "get_started": "Empezar",
+    "name_title": "Dinos tu nombre para hacer que Plotwist sea tuyo",
+    "name_placeholder": "Tu nombre",
+    "content_types_title": "¿Qué prefieres ver?",
+    "content_types_movie": "Películas",
+    "content_types_tv": "Series",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "Dorama",
+    "genres_title": "Elige tus géneros favoritos",
+    "genres_subtitle": "Selecciona al menos un género",
+    "genres_select_prompt": "Selecciona un género",
+    "swiper_title": "Descubre títulos",
+    "swiper_subtitle": "Desliza hacia los lados para agregar a tu lista",
+    "swiper_watched": "Visto",
+    "swiper_watching": "Viendo",
+    "swiper_want_to_watch": "Quiero ver",
+    "swiper_skip": "Saltar",
+    "swiper_empty": "No se encontraron títulos con estas preferencias.",
+    "swiper_fetching": "Buscando títulos...",
+    "swiper_finish_ready": "¡Vamos!",
+    "swiper_finish_remaining": "títulos faltan",
+    "celebration_title": "¡Todo listo!",
+    "celebration_subtitle": "Tu perfil está listo. Empecemos.",
+    "celebration_cta": "Ir a Inicio",
+    "continue": "Continuar"
+  }
 }
diff --git a/apps/web/public/dictionaries/fr-FR.json b/apps/web/public/dictionaries/fr-FR.json
index 87b01ddd..cd20d894 100644
--- a/apps/web/public/dictionaries/fr-FR.json
+++ b/apps/web/public/dictionaries/fr-FR.json
@@ -893,5 +893,34 @@
   "feature_stats_title": "Consultez vos statistiques",
   "feature_stats_description": "Visualisez vos habitudes avec des statistiques détaillées.",
   "app_section_title": "Emportez Plotwist avec vous",
-  "app_section_subtitle": "Suivez vos titres partout avec l'app Plotwist pour iOS. Glissez pour découvrir, suivez les épisodes et ne manquez jamais un titre."
+  "app_section_subtitle": "Suivez vos titres partout avec l'app Plotwist pour iOS. Glissez pour découvrir, suivez les épisodes et ne manquez jamais un titre.",
+  "onboarding": {
+    "welcome_title": "Suivez, découvrez et ne manquez jamais un titre",
+    "welcome_subtitle": "Rejoignez la communauté des amateurs de films et séries.",
+    "get_started": "Commencer",
+    "name_title": "Dites-nous votre nom pour personnaliser Plotwist",
+    "name_placeholder": "Votre nom",
+    "content_types_title": "Que préférez-vous regarder ?",
+    "content_types_movie": "Films",
+    "content_types_tv": "Séries",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "Dramas",
+    "genres_title": "Choisissez vos genres préférés",
+    "genres_subtitle": "Sélectionnez au moins un genre",
+    "genres_select_prompt": "Sélectionnez un genre",
+    "swiper_title": "Découvrez des titres",
+    "swiper_subtitle": "De glisser sur les côtés pour ajouter à votre liste",
+    "swiper_watched": "Vu",
+    "swiper_watching": "En cours",
+    "swiper_want_to_watch": "À voir",
+    "swiper_skip": "Passer",
+    "swiper_empty": "Aucun titre trouvé avec ces préférences.",
+    "swiper_fetching": "Recherche de titres...",
+    "swiper_finish_ready": "Allons-y !",
+    "swiper_finish_remaining": "titres restants",
+    "celebration_title": "Tout est prêt !",
+    "celebration_subtitle": "Votre profil est prêt. Commençons.",
+    "celebration_cta": "Aller à l'accueil",
+    "continue": "Continuer"
+  }
 }
diff --git a/apps/web/public/dictionaries/it-IT.json b/apps/web/public/dictionaries/it-IT.json
index c59a25b0..92303b24 100644
--- a/apps/web/public/dictionaries/it-IT.json
+++ b/apps/web/public/dictionaries/it-IT.json
@@ -890,5 +890,34 @@
   "feature_stats_title": "Guarda le tue statistiche",
   "feature_stats_description": "Visualizza le tue abitudini con statistiche dettagliate.",
   "app_section_title": "Porta Plotwist con te",
-  "app_section_subtitle": "Segui ovunque con l'app Plotwist per iOS. Scorri per scoprire, segui gli episodi e non perdere mai un titolo."
+  "app_section_subtitle": "Segui ovunque con l'app Plotwist per iOS. Scorri per scoprire, segui gli episodi e non perdere mai un titolo.",
+  "onboarding": {
+    "welcome_title": "Tieni traccia, scopri e non perdere mai un titolo",
+    "welcome_subtitle": "Unisciti alla comunità degli amanti di film e serie TV.",
+    "get_started": "Inizia",
+    "name_title": "Dicci il tuo nome per rendere Plotwist tuo",
+    "name_placeholder": "Il tuo nome",
+    "content_types_title": "Cosa preferisci guardare?",
+    "content_types_movie": "Film",
+    "content_types_tv": "Serie",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "Dorama",
+    "genres_title": "Scegli i tuoi generi preferiti",
+    "genres_subtitle": "Seleziona almeno un genere",
+    "genres_select_prompt": "Seleziona un genere",
+    "swiper_title": "Scopri titoli",
+    "swiper_subtitle": "Scorri di lato per aggiungere alla tua lista",
+    "swiper_watched": "Visto",
+    "swiper_watching": "In corso",
+    "swiper_want_to_watch": "Voglio vedere",
+    "swiper_skip": "Salta",
+    "swiper_empty": "Nessun titolo trovato con queste preferenze.",
+    "swiper_fetching": "Ricerca titoli...",
+    "swiper_finish_ready": "Andiamo!",
+    "swiper_finish_remaining": "titoli mancanti",
+    "celebration_title": "Tutto pronto!",
+    "celebration_subtitle": "Il tuo profilo è pronto. Iniziamo.",
+    "celebration_cta": "Vai alla Home",
+    "continue": "Continua"
+  }
 }
diff --git a/apps/web/public/dictionaries/ja-JP.json b/apps/web/public/dictionaries/ja-JP.json
index 1aa88ef0..bf6d3f27 100644
--- a/apps/web/public/dictionaries/ja-JP.json
+++ b/apps/web/public/dictionaries/ja-JP.json
@@ -893,5 +893,34 @@
   "feature_stats_title": "統計を確認",
   "feature_stats_description": "詳細な統計とインサイトで視聴習慣を可視化。",
   "app_section_title": "Plotwistを持ち歩こう",
-  "app_section_subtitle": "Plotwist iOSアプリでどこでも追跡。スワイプで発見、エピソードを追跡、タイトルを見逃さない。"
+  "app_section_subtitle": "Plotwist iOSアプリでどこでも追跡。スワイプで発見、エピソードを追跡、タイトルを見逃さない。",
+  "onboarding": {
+    "welcome_title": "記録して、発見して、見逃さない",
+    "welcome_subtitle": "映画やドラマ好きのコミュニティに参加しよう。",
+    "get_started": "はじめる",
+    "name_title": "Plotwistをあなたらしくするために名前を教えてください",
+    "name_placeholder": "あなたの名前",
+    "content_types_title": "何を見るのが好きですか？",
+    "content_types_movie": "映画",
+    "content_types_tv": "ドラマ・アニメ",
+    "content_types_anime": "アニメ",
+    "content_types_dorama": "韓国ドラマ",
+    "genres_title": "好きなジャンルを選んでください",
+    "genres_subtitle": "少なくとも1つのジャンルを選択してください",
+    "genres_select_prompt": "ジャンルを選択",
+    "swiper_title": "タイトルを発見",
+    "swiper_subtitle": "左右にスワイプしてリストに追加",
+    "swiper_watched": "見た",
+    "swiper_watching": "見ている",
+    "swiper_want_to_watch": "見たい",
+    "swiper_skip": "スキップ",
+    "swiper_empty": "これらの設定で見つかったタイトルはありません。",
+    "swiper_fetching": "タイトルを検索中...",
+    "swiper_finish_ready": "行こう！",
+    "swiper_finish_remaining": "タイトル残り",
+    "celebration_title": "準備完了！",
+    "celebration_subtitle": "プロフィールが完成しました。始めましょう。",
+    "celebration_cta": "ホームへ",
+    "continue": "続ける"
+  }
 }
diff --git a/apps/web/public/dictionaries/pt-BR.json b/apps/web/public/dictionaries/pt-BR.json
index 9c24decb..5de02859 100644
--- a/apps/web/public/dictionaries/pt-BR.json
+++ b/apps/web/public/dictionaries/pt-BR.json
@@ -892,5 +892,34 @@
   "feature_stats_title": "Veja suas estatísticas",
   "feature_stats_description": "Visualize seus hábitos com estatísticas detalhadas e insights.",
   "app_section_title": "Leve o Plotwist com você",
-  "app_section_subtitle": "Acompanhe de qualquer lugar com o app Plotwist para iOS. Deslize para descobrir, acompanhe episódios e nunca perca um título."
+  "app_section_subtitle": "Acompanhe de qualquer lugar com o app Plotwist para iOS. Deslize para descobrir, acompanhe episódios e nunca perca um título.",
+  "onboarding": {
+    "welcome_title": "Acompanhe, descubra e nunca perca um título",
+    "welcome_subtitle": "Junte-se à comunidade de amantes de filmes e séries.",
+    "get_started": "Começar",
+    "name_title": "Diga-nos seu nome para tornar o Plotwist a sua cara",
+    "name_placeholder": "Seu nome",
+    "content_types_title": "O que você prefere assistir?",
+    "content_types_movie": "Filmes",
+    "content_types_tv": "Séries",
+    "content_types_anime": "Anime",
+    "content_types_dorama": "Dorama",
+    "genres_title": "Escolha seus gêneros favoritos",
+    "genres_subtitle": "Selecione ao menos um gênero",
+    "genres_select_prompt": "Selecione um gênero",
+    "swiper_title": "Descubra títulos",
+    "swiper_subtitle": "Arraste para os lados para adicionar à sua lista",
+    "swiper_watched": "Já assisti",
+    "swiper_watching": "Assistindo",
+    "swiper_want_to_watch": "Quero assistir",
+    "swiper_skip": "Pular",
+    "swiper_empty": "Nenhum título localizado com essas preferências.",
+    "swiper_fetching": "Buscando títulos...",
+    "swiper_finish_ready": "Vamos lá!",
+    "swiper_finish_remaining": "títulos faltando",
+    "celebration_title": "Tudo pronto!",
+    "celebration_subtitle": "Seu perfil está pronto. Vamos começar.",
+    "celebration_cta": "Ir para o Início",
+    "continue": "Continuar"
+  }
 }

From 11ed021fed6abe67081cf898311cab80720b9e60 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Wed, 11 Mar 2026 00:18:04 -0300
Subject: [PATCH 04/17] feat(web): implement fully localized multi-step
 onboarding with swiper

---
 .../_components/onboarding-context.tsx        | 138 +++++++++
 .../_components/onboarding-stepper.tsx        |  76 +++++
 .../_components/onboarding-swiper.tsx         | 272 +++++++++++++-----
 .../steps/onboarding-celebration.tsx          |  33 +++
 .../steps/onboarding-content-types.tsx        | 131 +++++++++
 .../_components/steps/onboarding-genres.tsx   | 110 +++++++
 .../_components/steps/onboarding-name.tsx     |  69 +++++
 .../_components/steps/onboarding-welcome.tsx  | 113 ++++++++
 apps/web/src/app/[lang]/onboarding/page.tsx   |  11 +-
 9 files changed, 872 insertions(+), 81 deletions(-)
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
 create mode 100644 apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx

diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
new file mode 100644
index 00000000..f2b3adfe
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+
+export type ContentType = 'movie' | 'tv' | 'anime' | 'dorama'
+
+export interface OnboardingState {
+  currentStep: number
+  userName: string
+  contentTypes: ContentType[]
+  genres: number[]
+  savedTitlesCount: number
+}
+
+interface OnboardingContextType extends OnboardingState {
+  setUserName: (name: string) => void
+  setContentTypes: (types: ContentType[]) => void
+  setGenres: (genres: number[]) => void
+  incrementSavedTitles: () => void
+  nextStep: () => void
+  prevStep: () => void
+  goToStep: (step: number) => void
+  completeOnboarding: () => void
+  isLoaded: boolean
+  dictionary?: Record<string, string>
+}
+
+const defaultState: OnboardingState = {
+  currentStep: 0,
+  userName: '',
+  contentTypes: [],
+  genres: [],
+  savedTitlesCount: 0,
+}
+
+const OnboardingContext = createContext<OnboardingContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'plotwist-onboarding-state'
+
+export function OnboardingProvider({ 
+  children,
+  dictionary
+}: { 
+  children: ReactNode
+  dictionary?: Record<string, string>
+}) {
+  const router = useRouter()
+  const [state, setState] = useState<OnboardingState>(defaultState)
+  const [isLoaded, setIsLoaded] = useState(false)
+
+
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved)
+
+        setState(prev => ({ ...prev, ...parsed }))
+      } catch (e) {
+        console.error('Failed to parse onboarding state', e)
+      }
+    }
+    setIsLoaded(true)
+  }, [])
+
+
+  useEffect(() => {
+    if (isLoaded) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        ...state,
+
+        currentStep: state.currentStep > 4 ? 4 : state.currentStep 
+      }))
+    }
+  }, [state, isLoaded])
+
+  const setUserName = useCallback((userName: string) => {
+    setState(s => ({ ...s, userName }))
+  }, [])
+
+  const setContentTypes = useCallback((contentTypes: ContentType[]) => {
+    setState(s => ({ ...s, contentTypes }))
+  }, [])
+
+  const setGenres = useCallback((genres: number[]) => {
+    setState(s => ({ ...s, genres }))
+  }, [])
+
+  const incrementSavedTitles = useCallback(() => {
+    setState(s => ({ ...s, savedTitlesCount: s.savedTitlesCount + 1 }))
+  }, [])
+
+  const nextStep = useCallback(() => {
+    setState(s => ({ ...s, currentStep: Math.min(s.currentStep + 1, 5) }))
+  }, [])
+
+  const prevStep = useCallback(() => {
+    setState(s => ({ ...s, currentStep: Math.max(s.currentStep - 1, 0) }))
+  }, [])
+
+  const goToStep = useCallback((step: number) => {
+    setState(s => ({ ...s, currentStep: step }))
+  }, [])
+
+  const completeOnboarding = useCallback(() => {
+    localStorage.setItem('plotwist-onboarding-complete', 'true')
+    router.push('/')
+  }, [router])
+
+  return (
+    <OnboardingContext.Provider
+      value={{
+        ...state,
+        setUserName,
+        setContentTypes,
+        setGenres,
+        incrementSavedTitles,
+        nextStep,
+        prevStep,
+        goToStep,
+        completeOnboarding,
+        isLoaded,
+        dictionary,
+      }}
+    >
+      {children}
+    </OnboardingContext.Provider>
+  )
+}
+
+export function useOnboarding() {
+  const context = useContext(OnboardingContext)
+  if (context === undefined) {
+    throw new Error('useOnboarding must be used within an OnboardingProvider')
+  }
+  return context
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
new file mode 100644
index 00000000..aa8611fd
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import { ChevronLeft } from 'lucide-react'
+import { useOnboarding } from './onboarding-context'
+import { OnboardingWelcome } from './steps/onboarding-welcome'
+import { OnboardingName } from './steps/onboarding-name'
+import { OnboardingContentTypes } from './steps/onboarding-content-types'
+import { OnboardingGenres } from './steps/onboarding-genres'
+import { OnboardingSwiper } from './onboarding-swiper'
+import { OnboardingCelebration } from './steps/onboarding-celebration'
+
+const TOTAL_STEPS = 4 // Steps 1-4 (Welcome is 0, Celebration is 5)
+
+export function OnboardingStepper({ lang }: { lang: string }) {
+  const { currentStep, prevStep, isLoaded } = useOnboarding()
+
+  if (!isLoaded) return null // Prevent hydration mismatch
+
+  const isWelcomeScreen = currentStep === 0
+  const isCelebrationScreen = currentStep === 5
+
+  return (
+    <div className="relative flex min-h-screen w-full flex-col bg-background">
+      {!isWelcomeScreen && !isCelebrationScreen && (
+        <header className="absolute inset-x-0 top-0 z-50 flex items-center justify-between px-6 py-6 md:px-12 w-full max-w-6xl mx-auto">
+          <button
+            type="button"
+            onClick={prevStep}
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/50 transition-colors hover:bg-muted"
+            aria-label="Go back"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+
+          <div className="flex flex-1 items-center justify-end gap-3 px-8 md:max-w-md ml-auto">
+            {Array.from({ length: TOTAL_STEPS }).map((_, i) => (
+              <div
+                key={i}
+                className={`h-2 flex-1 rounded-full ${
+                  i < currentStep ? 'bg-foreground' : 'bg-muted'
+                }`}
+              />
+            ))}
+          </div>
+        </header>
+      )}
+
+      <main className={`flex flex-1 flex-col overflow-x-hidden relative z-20 ${!isWelcomeScreen ? 'pt-24 md:pt-32 pb-12 w-full max-w-6xl mx-auto' : ''}`}>
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={currentStep}
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+            className="flex flex-1 flex-col h-full"
+          >
+            {currentStep === 0 && <OnboardingWelcome lang={lang} />}
+            {currentStep === 1 && <OnboardingName lang={lang} />}
+            {currentStep === 2 && <OnboardingContentTypes lang={lang} />}
+            {currentStep === 3 && <OnboardingGenres lang={lang} />}
+            {currentStep === 4 && <OnboardingSwiper lang={lang} />}
+            {currentStep === 5 && <OnboardingCelebration lang={lang} />}
+          </motion.div>
+        </AnimatePresence>
+      </main>
+
+      {isWelcomeScreen && (
+        <main className="flex flex-1 flex-col absolute inset-0 z-10">
+          <OnboardingWelcome lang={lang} />
+        </main>
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index 70f2babc..c96eb702 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -2,13 +2,13 @@
 
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
-import { Bookmark, Check, X as XIcon } from 'lucide-react'
+import { Bookmark, Check, X as XIcon, Eye } from 'lucide-react'
 import Image from 'next/image'
 import { useCallback, useMemo, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
 import { tmdbImage } from '@/utils/tmdb/image'
 
-type SwipeDirection = 'left' | 'right' | 'up' | null
+type SwipeDirection = 'left' | 'right' | 'up' | 'down' | null
 
 type Movie = {
   id: number
@@ -37,50 +37,58 @@ function getSwipeDirection(offsetX: number, offsetY: number): SwipeDirection {
 
   if (absX < 40 && absY < 40) return null
 
-  // Vertical takes priority if clearly vertical
+
   if (offsetY < -40 && absY > absX * 0.8) return 'up'
+  if (offsetY > 40 && absY > absX * 0.8) return 'down'
   if (offsetX > 40 && absX > absY * 0.6) return 'right'
   if (offsetX < -40 && absX > absY * 0.6) return 'left'
 
   return null
 }
 
-function getSwipeConfig(dir: SwipeDirection) {
+function getSwipeConfig(dir: SwipeDirection, dictionary?: Record<string, string>) {
   switch (dir) {
     case 'right':
       return {
         icon: Bookmark,
-        label: 'Quero assistir',
+        label: dictionary?.swiper_want_to_watch || 'Quero assistir',
         colorClass: 'text-blue-500',
         bgClass: 'border-blue-500/60',
       }
     case 'left':
       return {
         icon: XIcon,
-        label: 'Não interessado',
+        label: dictionary?.swiper_skip || 'Pular',
         colorClass: 'text-red-400',
         bgClass: 'border-red-400/60',
       }
     case 'up':
       return {
         icon: Check,
-        label: 'Já assisti',
+        label: dictionary?.swiper_watched || 'Já assisti',
         colorClass: 'text-green-500',
         bgClass: 'border-green-500/60',
       }
+    case 'down':
+      return {
+        icon: Eye,
+        label: dictionary?.swiper_watching || 'Assistindo',
+        colorClass: 'text-yellow-500',
+        bgClass: 'border-yellow-500/60',
+      }
     default:
       return null
   }
 }
 
-// ─── Swipeable Card ────────────────────────────────────────────────────
+
 function SwipeCard({
   movie,
   onSwipe,
   onDirectionChange,
 }: {
   movie: Movie
-  onSwipe: (dir: SwipeDirection) => void
+  onSwipe: (dir: SwipeDirection, velocityInfo?: { x: number; y: number }) => void
   onDirectionChange: (dir: SwipeDirection, progress: number) => void
 }) {
   const handleDrag = useCallback(
@@ -99,7 +107,7 @@ function SwipeCard({
       const dist = Math.sqrt(info.offset.x ** 2 + info.offset.y ** 2)
 
       if (dir && dist > SWIPE_THRESHOLD) {
-        onSwipe(dir)
+        onSwipe(dir, { x: info.offset.x, y: info.offset.y })
       } else {
         onDirectionChange(null, 0)
       }
@@ -139,25 +147,32 @@ function SwipeCard({
   )
 }
 
-// ─── Exit animation card ─────────────────────────────────────────────
+
 function ExitCard({
   movie,
   direction,
+  initialOffset,
   onComplete,
 }: {
   movie: Movie
   direction: SwipeDirection
+  initialOffset?: { x: number; y: number }
   onComplete: () => void
 }) {
   const exitX = direction === 'right' ? 500 : direction === 'left' ? -500 : 0
-  const exitY = direction === 'up' ? -600 : 0
+  const exitY = direction === 'up' ? -600 : direction === 'down' ? 600 : 0
   const exitRotation =
     direction === 'right' ? 25 : direction === 'left' ? -25 : 0
 
   return (
     <motion.div
-      className="absolute inset-0"
-      initial={{ x: 0, y: 0, rotate: 0, opacity: 1 }}
+      className="absolute inset-0 pointer-events-none"
+      initial={{ 
+        x: initialOffset?.x || 0, 
+        y: initialOffset?.y || 0, 
+        rotate: initialOffset ? (initialOffset.x / window.innerWidth) * 50 : 0, 
+        opacity: 1 
+      }}
       animate={{
         x: exitX,
         y: exitY,
@@ -183,15 +198,17 @@ function ExitCard({
   )
 }
 
-// ─── Pill Overlay ────────────────────────────────────────────────────
+
 function SwipePillOverlay({
   direction,
   progress,
+  dictionary,
 }: {
   direction: SwipeDirection
   progress: number
+  dictionary?: Record<string, string>
 }) {
-  const config = getSwipeConfig(direction)
+  const config = getSwipeConfig(direction, dictionary)
   if (!config || progress < 0.3) return null
 
   const Icon = config.icon
@@ -213,26 +230,118 @@ function SwipePillOverlay({
   )
 }
 
+import { useOnboarding } from './onboarding-context'
+
+// ... existing code ...
+import type { Language } from '@/types/languages'
+
+// ... existing code ...
 export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
-  const language = lang || 'en-US'
+  const language = (lang as Language) || 'en-US'
+  const { genres, contentTypes, incrementSavedTitles, savedTitlesCount, nextStep, dictionary } = useOnboarding()
+  
+  const title = dictionary?.swiper_title || 'Discover titles'
+  const subtitle = dictionary?.swiper_subtitle || 'Swipe sideways to add to your list'
+  const emptyText = dictionary?.swiper_empty || 'No titles found with these preferences.'
+  const fetchingText = dictionary?.swiper_fetching || 'Fetching titles...'
+
   const [currentIndex, setCurrentIndex] = useState(0)
   const [swipeDirection, setSwipeDirection] = useState<SwipeDirection>(null)
   const [swipeProgress, setSwipeProgress] = useState(0)
   const [exitingCard, setExitingCard] = useState<{
     movie: Movie
     direction: SwipeDirection
+    initialOffset?: { x: number; y: number }
   } | null>(null)
-  const [counts, setCounts] = useState({ watchlist: 0, watched: 0, skipped: 0 })
-
-  const { data, fetchNextPage } = useInfiniteQuery({
-    queryKey: ['onboarding-movies', language],
-    queryFn: ({ pageParam }) =>
-      tmdb.movies.discover({
-        filters: { sort_by: 'popularity.desc', 'vote_count.gte': '200' },
-        language,
+  
+  const { data, fetchNextPage, isFetching } = useInfiniteQuery({
+    queryKey: ['onboarding-swiper-movies', language, genres.join(','), contentTypes.join(',')],
+    queryFn: async ({ pageParam }) => {
+      const fetchMovies = contentTypes.includes('movie')
+      const fetchTV = contentTypes.includes('tv')
+      const fetchAnime = contentTypes.includes('anime')
+      const fetchDorama = contentTypes.includes('dorama')
+
+
+      const fetchDefault = !fetchMovies && !fetchTV && !fetchAnime && !fetchDorama
+
+      const promises: Promise<{ type: 'movie' | 'tv'; data: any }>[] = []
+      
+
+      const baseFilters = { 
+        sort_by: 'vote_count.desc', 
+        with_genres: genres.length > 0 ? genres.join('|') : undefined,
+      }
+
+      if (fetchMovies || fetchDefault) {
+        promises.push(
+          tmdb.movies.discover({ filters: baseFilters, language, page: pageParam as number })
+          .then(data => ({ type: 'movie', data }))
+        )
+      }
+
+      if (fetchTV) {
+        promises.push(
+          tmdb.tv.discover({ filters: baseFilters, language, page: pageParam as number })
+          .then(data => ({ type: 'tv', data }))
+        )
+      }
+
+      if (fetchAnime) {
+
+        const animeFilters = { ...baseFilters, with_original_language: 'ja', with_genres: genres.includes(16) ? genres.join('|') : (genres.length > 0 ? `${genres.join('|')}|16` : '16') }
+        promises.push(
+          tmdb.tv.discover({ filters: animeFilters as any, language, page: pageParam as number })
+          .then(data => ({ type: 'tv', data }))
+        )
+      }
+
+      if (fetchDorama) {
+
+        const doramaFilters = { ...baseFilters, with_original_language: 'ko' }
+        promises.push(
+          tmdb.tv.discover({ filters: doramaFilters as any, language, page: pageParam as number })
+          .then(data => ({ type: 'tv', data }))
+        )
+      }
+
+      const results = await Promise.all(promises)
+      const combinedResults: any[] = []
+
+      for (const res of results) {
+        if (!res.data || !res.data.results) continue
+        
+        if (res.type === 'movie') {
+          combinedResults.push(
+            ...res.data.results.map((item: any) => ({
+              ...item,
+              title: item.title,
+              release_date: item.release_date
+            }))
+          )
+        } else {
+          combinedResults.push(
+            ...res.data.results.map((item: any) => ({
+              ...item,
+              title: item.name || item.title,
+              release_date: item.first_air_date || item.release_date
+            }))
+          )
+        }
+      }
+
+
+      const uniqueResults = Array.from(new Map(combinedResults.map(item => [item.id, item])).values())
+
+
+      uniqueResults.sort((a, b) => (b.vote_count || 0) - (a.vote_count || 0))
+
+      return {
         page: pageParam,
-      }),
-    getNextPageParam: lastPage => lastPage.page + 1,
+        results: uniqueResults
+      }
+    },
+    getNextPageParam: lastPage => (lastPage.page as number) + 1,
     initialPageParam: 1,
   })
 
@@ -245,20 +354,19 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
   const currentMovie = visibleCards[0]
 
   const handleSwipe = useCallback(
-    (dir: SwipeDirection) => {
+    (dir: SwipeDirection, velocityInfo?: { x: number; y: number }) => {
       if (!currentMovie || exitingCard) return
 
       setSwipeDirection(null)
       setSwipeProgress(0)
-      setExitingCard({ movie: currentMovie, direction: dir })
+      setExitingCard({ movie: currentMovie, direction: dir, initialOffset: velocityInfo })
+
 
-      setCounts(prev => ({
-        watchlist: dir === 'right' ? prev.watchlist + 1 : prev.watchlist,
-        watched: dir === 'up' ? prev.watched + 1 : prev.watched,
-        skipped: dir === 'left' ? prev.skipped + 1 : prev.skipped,
-      }))
+      if (dir === 'right' || dir === 'up' || dir === 'down') {
+        incrementSavedTitles()
+      }
     },
-    [currentMovie, exitingCard]
+    [currentMovie, exitingCard, incrementSavedTitles]
   )
 
   const handleExitComplete = useCallback(() => {
@@ -280,33 +388,35 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
     []
   )
 
-  const total = counts.watchlist + counts.watched + counts.skipped
+  const canContinue = savedTitlesCount >= 5
 
   if (!currentMovie && !exitingCard) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="flex min-h-[40vh] flex-col items-center justify-center">
         <div className="flex flex-col items-center gap-4">
           <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          <p className="text-sm text-muted-foreground">Carregando filmes...</p>
+          <p className="text-sm text-muted-foreground">
+            {isFetching ? fetchingText : emptyText}
+          </p>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="relative flex min-h-screen w-full flex-col items-center overflow-hidden bg-background px-4 pb-10 pt-8">
-      <div className="flex w-full max-w-sm flex-col items-center gap-2">
-        <h1 className="text-2xl font-bold tracking-tight">
-          Descubra seus filmes
+    <div className="relative flex flex-1 flex-col items-center overflow-hidden bg-background px-4 pb-6 pt-4">
+      <div className="flex w-full flex-col items-center gap-1">
+        <h1 className="text-2xl font-bold tracking-tight text-center md:text-3xl">
+          {title}
         </h1>
-        <p className="text-sm text-muted-foreground text-center">
-          Arraste para os lados para adicionar à sua lista
+        <p className="text-xs text-muted-foreground text-center md:text-sm">
+          {subtitle}
         </p>
       </div>
 
       <div
-        className="relative mx-auto mt-6 w-full select-none"
-        style={{ maxWidth: 280, aspectRatio: '2/3' }}
+        className="relative mx-auto mt-4 w-full select-none max-w-[240px] sm:max-w-[280px] md:max-w-[300px]"
+        style={{ aspectRatio: '2/3' }}
       >
         {visibleCards
           .slice(1, 3)
@@ -318,7 +428,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
             return (
               <div
                 key={movie.id}
-                className="absolute inset-0 overflow-hidden rounded-[32px] border border-border/20 shadow-lg"
+                className="absolute inset-0 overflow-hidden rounded-[32px] border border-border bg-muted shadow-lg"
                 style={{
                   transform: `scale(${style.scale}) rotate(${style.rotation}deg) translate(${style.offsetX}px, ${style.offsetY}px)`,
                   zIndex: 3 - stackIdx,
@@ -352,6 +462,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
               key={`exit-${exitingCard.movie.id}`}
               movie={exitingCard.movie}
               direction={exitingCard.direction}
+              initialOffset={exitingCard.initialOffset}
               onComplete={handleExitComplete}
             />
           )}
@@ -363,66 +474,69 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
               key="pill"
               direction={swipeDirection}
               progress={swipeProgress}
+              dictionary={dictionary}
             />
           )}
         </AnimatePresence>
       </div>
 
-      <div className="mt-8 flex flex-wrap items-center justify-center gap-2">
+      <div className="mt-4 sm:mt-6 flex flex-wrap items-center justify-center gap-2 md:gap-3 max-w-lg w-full">
         <button
           type="button"
           onClick={() => handleSwipe('up')}
-          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+          className="flex items-center gap-1.5 rounded-full border border-green-500/30 bg-green-500/10 px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium transition-transform hover:bg-green-500/20 active:scale-95"
+          title={`${dictionary?.swiper_watched || 'Já assisti'} (Cima)`}
         >
           <Check className="h-4 w-4 text-green-500" />
-          <span>Já assisti</span>
+          <span className="text-green-500 hidden sm:inline">{dictionary?.swiper_watched || 'Já assisti'}</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => handleSwipe('down')}
+          className="flex items-center gap-1.5 rounded-full border border-yellow-500/30 bg-yellow-500/10 px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium transition-transform hover:bg-yellow-500/20 active:scale-95"
+          title={`${dictionary?.swiper_watching || 'Assistindo'} (Baixo)`}
+        >
+          <Eye className="h-4 w-4 text-yellow-500" />
+          <span className="text-yellow-500 hidden sm:inline">{dictionary?.swiper_watching || 'Assistindo'}</span>
         </button>
 
         <button
           type="button"
           onClick={() => handleSwipe('right')}
-          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+          className="flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium transition-transform hover:bg-blue-500/20 active:scale-95"
+          title={`${dictionary?.swiper_want_to_watch || 'Quero assistir'} (Direita)`}
         >
           <Bookmark className="h-4 w-4 text-blue-500" />
-          <span>Quero assistir</span>
+          <span className="text-blue-500 hidden sm:inline">{dictionary?.swiper_want_to_watch || 'Quero assistir'}</span>
         </button>
 
         <button
           type="button"
           onClick={() => handleSwipe('left')}
-          className="flex items-center gap-1.5 rounded-xl bg-muted/80 px-4 py-2.5 text-sm font-medium transition-all hover:bg-muted active:scale-95"
+          className="flex items-center gap-1.5 rounded-full border border-red-500/30 bg-red-500/10 px-3 md:px-4 py-2 md:py-2.5 text-xs md:text-sm font-medium transition-transform hover:bg-red-500/20 active:scale-95"
+          title={`${dictionary?.swiper_skip || 'Pular'} (Esquerda)`}
         >
-          <XIcon className="h-4 w-4 text-red-400" />
-          <span>Não interessado</span>
+          <XIcon className="h-4 w-4 text-red-500" />
+          <span className="text-red-500 hidden sm:inline">{dictionary?.swiper_skip || 'Pular'}</span>
         </button>
       </div>
 
-      {total > 0 && (
-        <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mt-4 flex items-center gap-4 text-xs text-muted-foreground"
+      <div className="mt-auto pt-4 pb-2 w-full max-w-sm">
+        <button
+          onClick={nextStep}
+          disabled={!canContinue}
+          className="w-full flex flex-col items-center justify-center rounded-full bg-foreground py-3 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
         >
-          {counts.watched > 0 && (
-            <span className="flex items-center gap-1">
-              <Check className="h-3 w-3 text-green-500" />
-              {counts.watched}
-            </span>
-          )}
-          {counts.watchlist > 0 && (
-            <span className="flex items-center gap-1">
-              <Bookmark className="h-3 w-3 text-blue-500" />
-              {counts.watchlist}
-            </span>
-          )}
-          {counts.skipped > 0 && (
-            <span className="flex items-center gap-1">
-              <XIcon className="h-3 w-3 text-red-400" />
-              {counts.skipped}
-            </span>
+          {canContinue ? (
+            <span>{dictionary?.swiper_finish_ready || "Let's go!"}</span>
+          ) : (
+            <div className="text-center text-sm md:text-base">
+              <span>{Math.max(0, 5 - savedTitlesCount)} {dictionary?.swiper_finish_remaining || "titles to go"}</span>
+            </div>
           )}
-        </motion.div>
-      )}
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
new file mode 100644
index 00000000..f72eb5df
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useOnboarding } from '../onboarding-context'
+import { CheckCircle } from 'lucide-react'
+
+export function OnboardingCelebration({ lang }: { lang: string }) {
+  const { completeOnboarding, dictionary } = useOnboarding()
+
+  const title = dictionary?.celebration_title || "You're all set!"
+  const subtitle = dictionary?.celebration_subtitle || "Your profile is ready. Let's start tracking."
+  const cta = dictionary?.celebration_cta || "Go to Home"
+
+  return (
+    <div className="flex flex-1 h-full flex-col items-center justify-center px-6">
+      <div className="flex flex-col items-center gap-6 text-center">
+        <CheckCircle className="h-24 w-24 text-green-500 animate-in zoom-in duration-500" />
+        <h1 className="text-4xl font-bold tracking-tight">
+          {title}
+        </h1>
+        <p className="text-muted-foreground">
+          {subtitle}
+        </p>
+
+        <button
+          onClick={completeOnboarding}
+          className="mt-8 w-full max-w-sm rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95"
+        >
+          {cta}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
new file mode 100644
index 00000000..94ae1fe8
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
@@ -0,0 +1,131 @@
+import { useOnboarding, type ContentType } from '../onboarding-context'
+import { useQuery } from '@tanstack/react-query'
+import { tmdb } from '@/services/tmdb'
+import { tmdbImage } from '@/utils/tmdb/image'
+import Image from 'next/image'
+import { CheckCircle } from 'lucide-react'
+import type { Language } from '@/types/languages'
+
+
+
+export function OnboardingContentTypes({ lang }: { lang: string }) {
+  const { contentTypes, setContentTypes, nextStep, dictionary } = useOnboarding()
+  const language = (lang as Language) || 'en-US'
+
+  const title = dictionary?.content_types_title || 'What do you like to watch?'
+  const subtitle = dictionary?.content_types_subtitle || 'Select at least one to continue.'
+  const cta = dictionary?.continue || 'Continue'
+
+  const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
+    movie: dictionary?.content_types_movie || 'Movies',
+    tv: dictionary?.content_types_tv || 'TV Series',
+    anime: dictionary?.content_types_anime || 'Anime',
+    dorama: dictionary?.content_types_dorama || 'K-Drama'
+  }
+
+
+  const { data: backdrops } = useQuery({
+    queryKey: ['onboarding-content-type-backdrops', language],
+    queryFn: async () => {
+      const [movies, tvs, animes, doramas] = await Promise.all([
+        tmdb.movies.discover({ filters: { sort_by: 'vote_count.desc' }, language, page: 1 }),
+        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc' }, language, page: 1 }),
+
+        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc', with_original_language: 'ja', with_genres: '16' } as any, language, page: 1 }),
+
+        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc', with_original_language: 'ko' } as any, language, page: 1 }),
+      ])
+
+      return {
+        movie: movies.results[0]?.backdrop_path,
+        tv: tvs.results[0]?.backdrop_path,
+        anime: animes.results[0]?.backdrop_path,
+        dorama: doramas.results[0]?.backdrop_path,
+      }
+    },
+    staleTime: Infinity,
+  })
+
+  const toggleType = (type: ContentType) => {
+    if (contentTypes.includes(type)) {
+      setContentTypes(contentTypes.filter(t => t !== type))
+    } else {
+      setContentTypes([...contentTypes, type])
+    }
+  }
+
+  const canContinue = contentTypes.length > 0
+
+  return (
+    <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
+      <div className="flex flex-col gap-4 text-center mt-4 md:mt-2">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+          {title}
+        </h1>
+
+        <div className="grid grid-cols-2 gap-3 md:gap-4 mt-4 max-w-2xl mx-auto w-full">
+          {(['movie', 'tv', 'anime', 'dorama'] as ContentType[]).map(type => {
+            const isSelected = contentTypes.includes(type)
+            const backdrop = backdrops?.[type]
+
+            return (
+              <button
+                key={type}
+                onClick={() => toggleType(type)}
+                className={`group relative aspect-[4/3] w-full overflow-hidden rounded-2xl border-2 text-left transition-all active:scale-95 ${
+                  isSelected ? 'border-foreground shadow-lg shadow-foreground/20' : 'border-transparent'
+                }`}
+              >
+                <div className="absolute inset-0 bg-muted">
+                  {backdrop && (
+                    <Image
+                      src={tmdbImage(backdrop, 'w500')}
+                      alt={CONTENT_TYPE_LABELS[type]}
+                      fill
+                      className="object-cover transition-transform duration-700 group-hover:scale-105"
+                      sizes="(max-width: 640px) 50vw, 200px"
+                    />
+                  )}
+                </div>
+
+                <div 
+                  className={`absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity ${
+                    isSelected ? 'opacity-100' : 'opacity-70 group-hover:opacity-90'
+                  }`} 
+                />
+
+                {isSelected && (
+                  <div className="absolute inset-0 bg-foreground/20" />
+                )}
+
+                <div className="absolute inset-0 flex flex-col p-3">
+                  {isSelected && (
+                    <div className="flex justify-end animate-in zoom-in duration-200">
+                      <CheckCircle className="h-6 w-6 text-white bg-foreground rounded-full" />
+                    </div>
+                  )}
+                  
+                  <div className="mt-auto">
+                    <span className="font-semibold text-white drop-shadow-md">
+                      {CONTENT_TYPE_LABELS[type]}
+                    </span>
+                  </div>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="mt-8 mx-auto w-full max-w-sm">
+        <button
+          onClick={nextStep}
+          disabled={!canContinue}
+          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+        >
+          {cta}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
new file mode 100644
index 00000000..9e1040f4
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
@@ -0,0 +1,110 @@
+import { useOnboarding } from '../onboarding-context'
+import { useQuery } from '@tanstack/react-query'
+import { tmdb } from '@/services/tmdb'
+import type { Language } from '@/types/languages'
+import { useMemo } from 'react'
+
+export function OnboardingGenres({ lang }: { lang: string }) {
+  const { genres, setGenres, contentTypes, nextStep, dictionary } = useOnboarding()
+  const language = (lang as Language) || 'en-US'
+
+  const title = dictionary?.genres_title || 'Pick your favorite genres'
+  const subtitle = dictionary?.genres_subtitle || 'Select at least one genre'
+  const cta = dictionary?.continue || 'Continue'
+  const selectPrompt = dictionary?.genres_select_prompt || 'Select a genre'
+
+
+  const { data: movieGenresData } = useQuery({
+    queryKey: ['tmdb-genres-movie', language],
+    queryFn: () => tmdb.genres('movie', language),
+    staleTime: Infinity,
+  })
+
+  const { data: tvGenresData } = useQuery({
+    queryKey: ['tmdb-genres-tv', language],
+    queryFn: () => tmdb.genres('tv', language),
+    staleTime: Infinity,
+  })
+
+
+  const availableGenres = useMemo(() => {
+    let combined: { id: number; name: string }[] = []
+    
+
+    if (contentTypes.includes('movie')) {
+      combined = [...combined, ...(movieGenresData?.genres || [])]
+    }
+    
+
+    if (contentTypes.includes('tv') || contentTypes.includes('dorama')) {
+      combined = [...combined, ...(tvGenresData?.genres || [])]
+    }
+
+
+    if (contentTypes.includes('anime') && !contentTypes.includes('tv')) {
+
+      const animationGenre = tvGenresData?.genres.find(g => g.id === 16)
+      if (animationGenre) {
+         combined.push(animationGenre)
+      }
+    }
+
+
+    const unique = Array.from(new Map(combined.map(item => [item.id, item])).values())
+    
+
+    return unique.sort((a, b) => a.name.localeCompare(b.name))
+  }, [contentTypes, movieGenresData, tvGenresData])
+
+  const toggleGenre = (id: number) => {
+    if (genres.includes(id)) {
+      setGenres(genres.filter(g => g !== id))
+    } else {
+      setGenres([...genres, id])
+    }
+  }
+
+  const canContinue = genres.length > 0
+
+  return (
+    <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
+      <div className="flex flex-col gap-4 text-center mt-4 md:mt-2">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+          {title}
+        </h1>
+        <p className="text-muted-foreground text-sm md:text-base">
+          {subtitle}
+        </p>
+
+        <div className="flex flex-wrap items-center justify-center gap-2.5 md:gap-3 mt-4 max-w-3xl mx-auto w-full">
+          {availableGenres.map(genre => {
+            const isSelected = genres.includes(genre.id)
+            return (
+              <button
+                key={genre.id}
+                onClick={() => toggleGenre(genre.id)}
+                className={`px-5 py-2.5 rounded-full border transition-all active:scale-95 ${
+                  isSelected 
+                    ? 'bg-foreground text-background border-foreground font-medium scale-105' 
+                    : 'bg-muted border-border font-normal hover:bg-muted/80'
+                }`}
+              >
+                {genre.name}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="mt-8 mx-auto w-full max-w-sm">
+        <button
+          onClick={nextStep}
+          disabled={!canContinue}
+          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+        >
+          {canContinue ? cta : selectPrompt}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
new file mode 100644
index 00000000..7063bd1d
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import { useOnboarding } from '../onboarding-context'
+
+export function OnboardingName({ lang }: { lang: string }) {
+  const { userName, setUserName, nextStep, dictionary } = useOnboarding()
+  const [name, setName] = useState(userName)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+
+    const timer = setTimeout(() => {
+      inputRef.current?.focus()
+    }, 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const canContinue = name.trim().length > 0
+
+  const handleContinue = () => {
+    if (canContinue) {
+      setUserName(name.trim())
+      nextStep()
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleContinue()
+    }
+  }
+
+  const title = dictionary?.name_title || 'Tell us your name so we can make Plotwist feel like yours'
+  const placeholderText = dictionary?.name_placeholder || 'Your name'
+  const cta = dictionary?.continue || 'Continue'
+
+  return (
+    <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
+      <div className="flex flex-col gap-6 text-center mt-12 md:mt-16 max-w-xl mx-auto w-full">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+          {title}
+        </h1>
+
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder={placeholderText}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={handleKeyDown}
+          autoCapitalize="words"
+          autoCorrect="off"
+          className="w-full rounded-xl bg-muted p-4 text-lg outline-none transition-colors border border-transparent focus:border-border mt-2 md:mt-4"
+        />
+      </div>
+
+      <div className="mt-8 mx-auto w-full max-w-sm">
+        <button
+          onClick={handleContinue}
+          disabled={!canContinue}
+          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+        >
+          {cta}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
new file mode 100644
index 00000000..94afce24
--- /dev/null
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -0,0 +1,113 @@
+import { useOnboarding } from '../onboarding-context'
+import { useQuery } from '@tanstack/react-query'
+import { tmdb } from '@/services/tmdb'
+import { tmdbImage } from '@/utils/tmdb/image'
+import Image from 'next/image'
+import { motion } from 'framer-motion'
+import { Logo } from '@/components/logo'
+import type { Language } from '@/types/languages'
+
+export function OnboardingWelcome({ lang }: { lang: string }) {
+  const { nextStep, dictionary } = useOnboarding()
+  const language = (lang as Language) || 'en-US'
+
+  const title = dictionary?.welcome_title || 'Track, discover and never miss a title'
+  const subtitle = dictionary?.welcome_subtitle || 'Join the community of movie and TV show lovers.'
+  const cta = dictionary?.get_started || 'Get started'
+
+
+  const { data } = useQuery({
+    queryKey: ['onboarding-welcome-posters', language],
+    queryFn: () => tmdb.movies.discover({
+      filters: { sort_by: 'vote_count.desc' },
+      language,
+      page: 1,
+    }),
+  })
+
+
+  const posters = data?.results.slice(0, 20).map(m => m.poster_path).filter(Boolean) as string[] ?? []
+
+
+  const col1 = posters.filter((_, i) => i % 5 === 0)
+  const col2 = posters.filter((_, i) => i % 5 === 1)
+  const col3 = posters.filter((_, i) => i % 5 === 2)
+  const col4 = posters.filter((_, i) => i % 5 === 3)
+  const col5 = posters.filter((_, i) => i % 5 === 4)
+
+  const Column = ({ images, duration, delayOffset, className }: any) => (
+    <div
+      className={`flex flex-col gap-4 min-w-[140px] md:min-w-[180px] lg:min-w-[220px] will-change-transform animate-scroll-up ${className}`}
+      style={{ 
+        '--duration': `${duration}s`, 
+
+        animationDelay: `-${delayOffset}s` 
+      } as React.CSSProperties}
+    >
+      {[...images, ...images].map((path, i) => (
+        <div key={`${i}`} className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl">
+          <Image src={tmdbImage(path as string, 'w500')} alt="" fill className="object-cover" unoptimized />
+        </div>
+      ))}
+    </div>
+  )
+
+  return (
+    <div className="relative flex flex-1 h-screen w-full flex-col bg-black overflow-hidden">
+      <style>{`
+        @keyframes scroll-up {
+          0% { transform: translateY(0); }
+          100% { transform: translateY(calc(-50% - 0.5rem)); }
+        }
+        .animate-scroll-up {
+          animation: scroll-up var(--duration, 40s) linear infinite;
+        }
+      `}</style>
+      
+      <div className="absolute inset-0 z-0 opacity-40 md:opacity-30">
+        <div className="flex w-full justify-center gap-4 p-4" style={{ transform: 'rotate(-5deg) scale(1.25) translateY(-5%)' }}>
+          <Column images={col1} duration={40} delayOffset={10} className="hidden lg:flex" />
+          <Column images={col2} duration={45} delayOffset={25} className="hidden md:flex pt-12" />
+          <Column images={col3} duration={38} delayOffset={5} className="pt-6" />
+          <Column images={col4} duration={42} delayOffset={20} className="" />
+          <Column images={col5} duration={35} delayOffset={15} className="pt-16" />
+          <Column images={col1} duration={39} delayOffset={8} className="hidden md:flex pt-8" />
+          <Column images={col2} duration={48} delayOffset={30} className="hidden lg:flex pt-2" />
+        </div>
+      </div>
+
+      <div className="absolute inset-0 z-10 bg-gradient-to-t from-black via-black/80 to-transparent md:bg-gradient-to-t md:from-black md:via-black/60 md:to-black/30" />
+      <div className="absolute inset-0 z-10 hidden md:block bg-[radial-gradient(circle_at_center,_transparent_0%,_black_100%)] opacity-70" />
+
+      <div className="relative z-20 flex flex-1 flex-col justify-end md:justify-center items-start md:items-center px-6 pb-12 md:pb-0 text-left md:text-center w-full max-w-6xl mx-auto">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="flex flex-col items-start md:items-center w-full"
+        >
+          <div className="mb-6 md:mb-8 bg-app-foreground flex items-center justify-center rounded-2xl shadow-2xl p-4 md:p-6 opacity-90 transition-opacity hover:opacity-100">
+             <div className="brightness-0 invert"><Logo size={42} /></div>
+          </div>
+          
+          <h1 className="mb-4 text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white max-w-3xl drop-shadow-xl text-balance">
+            {title}
+          </h1>
+          
+          <p className="mb-10 text-lg md:text-xl text-neutral-300 max-w-xl drop-shadow-md">
+            {subtitle}
+          </p>
+          
+          <div className="w-full max-w-sm">
+            <button
+              onClick={nextStep}
+              className="w-full rounded-full bg-white py-4 md:py-5 text-center text-lg font-bold text-black transition-transform active:scale-95 shadow-xl hover:bg-neutral-200"
+            >
+              {cta}
+            </button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/[lang]/onboarding/page.tsx b/apps/web/src/app/[lang]/onboarding/page.tsx
index c41a4f1e..a608e58a 100644
--- a/apps/web/src/app/[lang]/onboarding/page.tsx
+++ b/apps/web/src/app/[lang]/onboarding/page.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import type { PageProps } from '@/types/languages'
-import { OnboardingSwiper } from './_components/onboarding-swiper'
+import { OnboardingProvider } from './_components/onboarding-context'
+import { OnboardingStepper } from './_components/onboarding-stepper'
+import { getDictionary } from '@/utils/dictionaries'
 
 export const metadata: Metadata = {
   title: 'Onboarding • Plotwist',
@@ -9,8 +11,13 @@ export const metadata: Metadata = {
 
 const OnboardingPage = async (props: PageProps) => {
   const { lang } = await props.params
+  const dictionary = await getDictionary(lang)
 
-  return <OnboardingSwiper lang={lang} />
+  return (
+    <OnboardingProvider dictionary={dictionary.onboarding}>
+      <OnboardingStepper lang={lang} />
+    </OnboardingProvider>
+  )
 }
 
 export default OnboardingPage

From 980e64ff09209c17b01e7958fd9f110d98fce121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Alves?= <joaopealves.dev@gmail.com>
Date: Thu, 12 Mar 2026 01:53:09 -0300
Subject: [PATCH 05/17] chore: update pnpm lock

---
 pnpm-lock.yaml | 176 +------------------------------------------------
 1 file changed, 1 insertion(+), 175 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 385a648d..6164f348 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -745,9 +745,6 @@ importers:
         specifier: ^4.3.5
         version: 4.3.6
     devDependencies:
-      '@tailwindcss/postcss':
-        specifier: ^4.2.1
-        version: 4.2.1
       '@types/node':
         specifier: ^25.0.3
         version: 25.3.0
@@ -4351,94 +4348,6 @@ packages:
       zod:
         optional: true
 
-  '@tailwindcss/node@4.2.1':
-    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
-
-  '@tailwindcss/oxide-android-arm64@4.2.1':
-    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.1':
-    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.2.1':
-    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.1':
-    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
-    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
-    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
-    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
-    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
-    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
-    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
-    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
-    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.2.1':
-    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
-    engines: {node: '>= 20'}
-
-  '@tailwindcss/postcss@4.2.1':
-    resolution: {integrity: sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==}
-
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
@@ -5716,10 +5625,6 @@ packages:
     resolution: {integrity: sha512-2RZdgEbXmp5+dVbRm0P7HQUImZpICccJy7rN7Tv+SFa55pH+lxnuw6/K1ZxxBfHoYpSkHLAO92oa8O4SwFXA2A==}
     engines: {node: '>=10.2.0'}
 
-  enhanced-resolve@5.20.0:
-    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
-    engines: {node: '>=10.13.0'}
-
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -8131,10 +8036,6 @@ packages:
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
-    engines: {node: '>=6'}
-
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -12876,75 +12777,6 @@ snapshots:
       typescript: 5.9.3
       zod: 4.3.6
 
-  '@tailwindcss/node@4.2.1':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.0
-      jiti: 2.6.1
-      lightningcss: 1.31.1
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.1
-
-  '@tailwindcss/oxide-android-arm64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide@4.2.1':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.1
-      '@tailwindcss/oxide-darwin-arm64': 4.2.1
-      '@tailwindcss/oxide-darwin-x64': 4.2.1
-      '@tailwindcss/oxide-freebsd-x64': 4.2.1
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
-
-  '@tailwindcss/postcss@4.2.1':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.2.1
-      '@tailwindcss/oxide': 4.2.1
-      postcss: 8.5.6
-      tailwindcss: 4.2.1
-
   '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       postcss-selector-parser: 6.0.10
@@ -14189,11 +14021,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  enhanced-resolve@5.20.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -15218,6 +15045,7 @@ snapshots:
       lightningcss-linux-x64-musl: 1.31.1
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
+    optional: true
 
   lilconfig@3.1.3: {}
 
@@ -17115,8 +16943,6 @@ snapshots:
 
   tailwindcss@4.2.1: {}
 
-  tapable@2.3.0: {}
-
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4

From da0b153260663755f5f900023283f83956bc6210 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Alves?= <joaopealves.dev@gmail.com>
Date: Thu, 12 Mar 2026 01:53:47 -0300
Subject: [PATCH 06/17] refactor(onboarding): reorganize imports and improve
 code formatting for better readability

---
 apps/web/src/app/[lang]/layout.tsx            |   2 +-
 .../_components/onboarding-context.tsx        |  34 ++--
 .../_components/onboarding-stepper.tsx        |  12 +-
 .../_components/onboarding-swiper.tsx         | 154 ++++++++++++------
 .../steps/onboarding-celebration.tsx          |  16 +-
 .../steps/onboarding-content-types.tsx        |  68 +++++---
 .../_components/steps/onboarding-genres.tsx   |  29 ++--
 .../_components/steps/onboarding-name.tsx     |   9 +-
 .../_components/steps/onboarding-welcome.tsx  | 119 ++++++++++----
 apps/web/src/app/[lang]/onboarding/page.tsx   |   2 +-
 10 files changed, 290 insertions(+), 155 deletions(-)

diff --git a/apps/web/src/app/[lang]/layout.tsx b/apps/web/src/app/[lang]/layout.tsx
index 7542a95b..7943cf27 100644
--- a/apps/web/src/app/[lang]/layout.tsx
+++ b/apps/web/src/app/[lang]/layout.tsx
@@ -4,10 +4,10 @@ import { getUserPreferences } from '@/api/users'
 import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
 import { HtmlLangSetter } from '@/components/html-lang-setter'
+import { LayoutWrapper } from '@/components/layout-wrapper'
 import { ProBadge } from '@/components/pro-badge'
 import { SonnerProvider, ThemeProvider } from '@/components/providers'
 import { LanguageContextProvider } from '@/context/language'
-import { LayoutWrapper } from '@/components/layout-wrapper'
 import { ListsContextProvider } from '@/context/lists'
 import { SessionContextProvider } from '@/context/session'
 import { UserPreferencesContextProvider } from '@/context/user-preferences'
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index f2b3adfe..64d14dae 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -1,7 +1,14 @@
 'use client'
 
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 
 export type ContentType = 'movie' | 'tv' | 'anime' | 'dorama'
 
@@ -34,14 +41,16 @@ const defaultState: OnboardingState = {
   savedTitlesCount: 0,
 }
 
-const OnboardingContext = createContext<OnboardingContextType | undefined>(undefined)
+const OnboardingContext = createContext<OnboardingContextType | undefined>(
+  undefined
+)
 
 const STORAGE_KEY = 'plotwist-onboarding-state'
 
-export function OnboardingProvider({ 
+export function OnboardingProvider({
   children,
-  dictionary
-}: { 
+  dictionary,
+}: {
   children: ReactNode
   dictionary?: Record<string, string>
 }) {
@@ -49,7 +58,6 @@ export function OnboardingProvider({
   const [state, setState] = useState<OnboardingState>(defaultState)
   const [isLoaded, setIsLoaded] = useState(false)
 
-
   useEffect(() => {
     const saved = localStorage.getItem(STORAGE_KEY)
     if (saved) {
@@ -64,14 +72,16 @@ export function OnboardingProvider({
     setIsLoaded(true)
   }, [])
 
-
   useEffect(() => {
     if (isLoaded) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify({
-        ...state,
-
-        currentStep: state.currentStep > 4 ? 4 : state.currentStep 
-      }))
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({
+          ...state,
+
+          currentStep: state.currentStep > 4 ? 4 : state.currentStep,
+        })
+      )
     }
   }, [state, isLoaded])
 
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
index aa8611fd..324d1d5f 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -3,12 +3,12 @@
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeft } from 'lucide-react'
 import { useOnboarding } from './onboarding-context'
-import { OnboardingWelcome } from './steps/onboarding-welcome'
-import { OnboardingName } from './steps/onboarding-name'
-import { OnboardingContentTypes } from './steps/onboarding-content-types'
-import { OnboardingGenres } from './steps/onboarding-genres'
 import { OnboardingSwiper } from './onboarding-swiper'
 import { OnboardingCelebration } from './steps/onboarding-celebration'
+import { OnboardingContentTypes } from './steps/onboarding-content-types'
+import { OnboardingGenres } from './steps/onboarding-genres'
+import { OnboardingName } from './steps/onboarding-name'
+import { OnboardingWelcome } from './steps/onboarding-welcome'
 
 const TOTAL_STEPS = 4 // Steps 1-4 (Welcome is 0, Celebration is 5)
 
@@ -46,7 +46,9 @@ export function OnboardingStepper({ lang }: { lang: string }) {
         </header>
       )}
 
-      <main className={`flex flex-1 flex-col overflow-x-hidden relative z-20 ${!isWelcomeScreen ? 'pt-24 md:pt-32 pb-12 w-full max-w-6xl mx-auto' : ''}`}>
+      <main
+        className={`flex flex-1 flex-col overflow-x-hidden relative z-20 ${!isWelcomeScreen ? 'pt-24 md:pt-32 pb-12 w-full max-w-6xl mx-auto' : ''}`}
+      >
         <AnimatePresence mode="wait">
           <motion.div
             key={currentStep}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index c96eb702..8de6a04a 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -2,7 +2,7 @@
 
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
-import { Bookmark, Check, X as XIcon, Eye } from 'lucide-react'
+import { Bookmark, Check, Eye, X as XIcon } from 'lucide-react'
 import Image from 'next/image'
 import { useCallback, useMemo, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
@@ -37,7 +37,6 @@ function getSwipeDirection(offsetX: number, offsetY: number): SwipeDirection {
 
   if (absX < 40 && absY < 40) return null
 
-
   if (offsetY < -40 && absY > absX * 0.8) return 'up'
   if (offsetY > 40 && absY > absX * 0.8) return 'down'
   if (offsetX > 40 && absX > absY * 0.6) return 'right'
@@ -46,7 +45,10 @@ function getSwipeDirection(offsetX: number, offsetY: number): SwipeDirection {
   return null
 }
 
-function getSwipeConfig(dir: SwipeDirection, dictionary?: Record<string, string>) {
+function getSwipeConfig(
+  dir: SwipeDirection,
+  dictionary?: Record<string, string>
+) {
   switch (dir) {
     case 'right':
       return {
@@ -81,14 +83,16 @@ function getSwipeConfig(dir: SwipeDirection, dictionary?: Record<string, string>
   }
 }
 
-
 function SwipeCard({
   movie,
   onSwipe,
   onDirectionChange,
 }: {
   movie: Movie
-  onSwipe: (dir: SwipeDirection, velocityInfo?: { x: number; y: number }) => void
+  onSwipe: (
+    dir: SwipeDirection,
+    velocityInfo?: { x: number; y: number }
+  ) => void
   onDirectionChange: (dir: SwipeDirection, progress: number) => void
 }) {
   const handleDrag = useCallback(
@@ -147,7 +151,6 @@ function SwipeCard({
   )
 }
 
-
 function ExitCard({
   movie,
   direction,
@@ -167,11 +170,11 @@ function ExitCard({
   return (
     <motion.div
       className="absolute inset-0 pointer-events-none"
-      initial={{ 
-        x: initialOffset?.x || 0, 
-        y: initialOffset?.y || 0, 
-        rotate: initialOffset ? (initialOffset.x / window.innerWidth) * 50 : 0, 
-        opacity: 1 
+      initial={{
+        x: initialOffset?.x || 0,
+        y: initialOffset?.y || 0,
+        rotate: initialOffset ? (initialOffset.x / window.innerWidth) * 50 : 0,
+        opacity: 1,
       }}
       animate={{
         x: exitX,
@@ -198,7 +201,6 @@ function ExitCard({
   )
 }
 
-
 function SwipePillOverlay({
   direction,
   progress,
@@ -230,19 +232,27 @@ function SwipePillOverlay({
   )
 }
 
-import { useOnboarding } from './onboarding-context'
-
 // ... existing code ...
 import type { Language } from '@/types/languages'
+import { useOnboarding } from './onboarding-context'
 
 // ... existing code ...
 export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
   const language = (lang as Language) || 'en-US'
-  const { genres, contentTypes, incrementSavedTitles, savedTitlesCount, nextStep, dictionary } = useOnboarding()
-  
+  const {
+    genres,
+    contentTypes,
+    incrementSavedTitles,
+    savedTitlesCount,
+    nextStep,
+    dictionary,
+  } = useOnboarding()
+
   const title = dictionary?.swiper_title || 'Discover titles'
-  const subtitle = dictionary?.swiper_subtitle || 'Swipe sideways to add to your list'
-  const emptyText = dictionary?.swiper_empty || 'No titles found with these preferences.'
+  const subtitle =
+    dictionary?.swiper_subtitle || 'Swipe sideways to add to your list'
+  const emptyText =
+    dictionary?.swiper_empty || 'No titles found with these preferences.'
   const fetchingText = dictionary?.swiper_fetching || 'Fetching titles...'
 
   const [currentIndex, setCurrentIndex] = useState(0)
@@ -253,55 +263,85 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
     direction: SwipeDirection
     initialOffset?: { x: number; y: number }
   } | null>(null)
-  
+
   const { data, fetchNextPage, isFetching } = useInfiniteQuery({
-    queryKey: ['onboarding-swiper-movies', language, genres.join(','), contentTypes.join(',')],
+    queryKey: [
+      'onboarding-swiper-movies',
+      language,
+      genres.join(','),
+      contentTypes.join(','),
+    ],
     queryFn: async ({ pageParam }) => {
       const fetchMovies = contentTypes.includes('movie')
       const fetchTV = contentTypes.includes('tv')
       const fetchAnime = contentTypes.includes('anime')
       const fetchDorama = contentTypes.includes('dorama')
 
-
-      const fetchDefault = !fetchMovies && !fetchTV && !fetchAnime && !fetchDorama
+      const fetchDefault =
+        !fetchMovies && !fetchTV && !fetchAnime && !fetchDorama
 
       const promises: Promise<{ type: 'movie' | 'tv'; data: any }>[] = []
-      
 
-      const baseFilters = { 
-        sort_by: 'vote_count.desc', 
+      const baseFilters = {
+        sort_by: 'vote_count.desc',
         with_genres: genres.length > 0 ? genres.join('|') : undefined,
       }
 
       if (fetchMovies || fetchDefault) {
         promises.push(
-          tmdb.movies.discover({ filters: baseFilters, language, page: pageParam as number })
-          .then(data => ({ type: 'movie', data }))
+          tmdb.movies
+            .discover({
+              filters: baseFilters,
+              language,
+              page: pageParam as number,
+            })
+            .then(data => ({ type: 'movie', data }))
         )
       }
 
       if (fetchTV) {
         promises.push(
-          tmdb.tv.discover({ filters: baseFilters, language, page: pageParam as number })
-          .then(data => ({ type: 'tv', data }))
+          tmdb.tv
+            .discover({
+              filters: baseFilters,
+              language,
+              page: pageParam as number,
+            })
+            .then(data => ({ type: 'tv', data }))
         )
       }
 
       if (fetchAnime) {
-
-        const animeFilters = { ...baseFilters, with_original_language: 'ja', with_genres: genres.includes(16) ? genres.join('|') : (genres.length > 0 ? `${genres.join('|')}|16` : '16') }
+        const animeFilters = {
+          ...baseFilters,
+          with_original_language: 'ja',
+          with_genres: genres.includes(16)
+            ? genres.join('|')
+            : genres.length > 0
+              ? `${genres.join('|')}|16`
+              : '16',
+        }
         promises.push(
-          tmdb.tv.discover({ filters: animeFilters as any, language, page: pageParam as number })
-          .then(data => ({ type: 'tv', data }))
+          tmdb.tv
+            .discover({
+              filters: animeFilters as any,
+              language,
+              page: pageParam as number,
+            })
+            .then(data => ({ type: 'tv', data }))
         )
       }
 
       if (fetchDorama) {
-
         const doramaFilters = { ...baseFilters, with_original_language: 'ko' }
         promises.push(
-          tmdb.tv.discover({ filters: doramaFilters as any, language, page: pageParam as number })
-          .then(data => ({ type: 'tv', data }))
+          tmdb.tv
+            .discover({
+              filters: doramaFilters as any,
+              language,
+              page: pageParam as number,
+            })
+            .then(data => ({ type: 'tv', data }))
         )
       }
 
@@ -310,13 +350,13 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
 
       for (const res of results) {
         if (!res.data || !res.data.results) continue
-        
+
         if (res.type === 'movie') {
           combinedResults.push(
             ...res.data.results.map((item: any) => ({
               ...item,
               title: item.title,
-              release_date: item.release_date
+              release_date: item.release_date,
             }))
           )
         } else {
@@ -324,21 +364,21 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
             ...res.data.results.map((item: any) => ({
               ...item,
               title: item.name || item.title,
-              release_date: item.first_air_date || item.release_date
+              release_date: item.first_air_date || item.release_date,
             }))
           )
         }
       }
 
-
-      const uniqueResults = Array.from(new Map(combinedResults.map(item => [item.id, item])).values())
-
+      const uniqueResults = Array.from(
+        new Map(combinedResults.map(item => [item.id, item])).values()
+      )
 
       uniqueResults.sort((a, b) => (b.vote_count || 0) - (a.vote_count || 0))
 
       return {
         page: pageParam,
-        results: uniqueResults
+        results: uniqueResults,
       }
     },
     getNextPageParam: lastPage => (lastPage.page as number) + 1,
@@ -359,8 +399,11 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
 
       setSwipeDirection(null)
       setSwipeProgress(0)
-      setExitingCard({ movie: currentMovie, direction: dir, initialOffset: velocityInfo })
-
+      setExitingCard({
+        movie: currentMovie,
+        direction: dir,
+        initialOffset: velocityInfo,
+      })
 
       if (dir === 'right' || dir === 'up' || dir === 'down') {
         incrementSavedTitles()
@@ -488,7 +531,9 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_watched || 'Já assisti'} (Cima)`}
         >
           <Check className="h-4 w-4 text-green-500" />
-          <span className="text-green-500 hidden sm:inline">{dictionary?.swiper_watched || 'Já assisti'}</span>
+          <span className="text-green-500 hidden sm:inline">
+            {dictionary?.swiper_watched || 'Já assisti'}
+          </span>
         </button>
 
         <button
@@ -498,7 +543,9 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_watching || 'Assistindo'} (Baixo)`}
         >
           <Eye className="h-4 w-4 text-yellow-500" />
-          <span className="text-yellow-500 hidden sm:inline">{dictionary?.swiper_watching || 'Assistindo'}</span>
+          <span className="text-yellow-500 hidden sm:inline">
+            {dictionary?.swiper_watching || 'Assistindo'}
+          </span>
         </button>
 
         <button
@@ -508,7 +555,9 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_want_to_watch || 'Quero assistir'} (Direita)`}
         >
           <Bookmark className="h-4 w-4 text-blue-500" />
-          <span className="text-blue-500 hidden sm:inline">{dictionary?.swiper_want_to_watch || 'Quero assistir'}</span>
+          <span className="text-blue-500 hidden sm:inline">
+            {dictionary?.swiper_want_to_watch || 'Quero assistir'}
+          </span>
         </button>
 
         <button
@@ -518,7 +567,9 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_skip || 'Pular'} (Esquerda)`}
         >
           <XIcon className="h-4 w-4 text-red-500" />
-          <span className="text-red-500 hidden sm:inline">{dictionary?.swiper_skip || 'Pular'}</span>
+          <span className="text-red-500 hidden sm:inline">
+            {dictionary?.swiper_skip || 'Pular'}
+          </span>
         </button>
       </div>
 
@@ -532,7 +583,10 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
             <span>{dictionary?.swiper_finish_ready || "Let's go!"}</span>
           ) : (
             <div className="text-center text-sm md:text-base">
-              <span>{Math.max(0, 5 - savedTitlesCount)} {dictionary?.swiper_finish_remaining || "titles to go"}</span>
+              <span>
+                {Math.max(0, 5 - savedTitlesCount)}{' '}
+                {dictionary?.swiper_finish_remaining || 'titles to go'}
+              </span>
             </div>
           )}
         </button>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
index f72eb5df..a45bcb6f 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -1,25 +1,23 @@
 'use client'
 
-import { useOnboarding } from '../onboarding-context'
 import { CheckCircle } from 'lucide-react'
+import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingCelebration({ lang }: { lang: string }) {
   const { completeOnboarding, dictionary } = useOnboarding()
 
   const title = dictionary?.celebration_title || "You're all set!"
-  const subtitle = dictionary?.celebration_subtitle || "Your profile is ready. Let's start tracking."
-  const cta = dictionary?.celebration_cta || "Go to Home"
+  const subtitle =
+    dictionary?.celebration_subtitle ||
+    "Your profile is ready. Let's start tracking."
+  const cta = dictionary?.celebration_cta || 'Go to Home'
 
   return (
     <div className="flex flex-1 h-full flex-col items-center justify-center px-6">
       <div className="flex flex-col items-center gap-6 text-center">
         <CheckCircle className="h-24 w-24 text-green-500 animate-in zoom-in duration-500" />
-        <h1 className="text-4xl font-bold tracking-tight">
-          {title}
-        </h1>
-        <p className="text-muted-foreground">
-          {subtitle}
-        </p>
+        <h1 className="text-4xl font-bold tracking-tight">{title}</h1>
+        <p className="text-muted-foreground">{subtitle}</p>
 
         <button
           onClick={completeOnboarding}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
index 94ae1fe8..5030341c 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
@@ -1,39 +1,61 @@
-import { useOnboarding, type ContentType } from '../onboarding-context'
 import { useQuery } from '@tanstack/react-query'
-import { tmdb } from '@/services/tmdb'
-import { tmdbImage } from '@/utils/tmdb/image'
-import Image from 'next/image'
 import { CheckCircle } from 'lucide-react'
+import Image from 'next/image'
+import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
-
-
+import { tmdbImage } from '@/utils/tmdb/image'
+import { type ContentType, useOnboarding } from '../onboarding-context'
 
 export function OnboardingContentTypes({ lang }: { lang: string }) {
-  const { contentTypes, setContentTypes, nextStep, dictionary } = useOnboarding()
+  const { contentTypes, setContentTypes, nextStep, dictionary } =
+    useOnboarding()
   const language = (lang as Language) || 'en-US'
 
   const title = dictionary?.content_types_title || 'What do you like to watch?'
-  const subtitle = dictionary?.content_types_subtitle || 'Select at least one to continue.'
+  const subtitle =
+    dictionary?.content_types_subtitle || 'Select at least one to continue.'
   const cta = dictionary?.continue || 'Continue'
 
   const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
     movie: dictionary?.content_types_movie || 'Movies',
     tv: dictionary?.content_types_tv || 'TV Series',
     anime: dictionary?.content_types_anime || 'Anime',
-    dorama: dictionary?.content_types_dorama || 'K-Drama'
+    dorama: dictionary?.content_types_dorama || 'K-Drama',
   }
 
-
   const { data: backdrops } = useQuery({
     queryKey: ['onboarding-content-type-backdrops', language],
     queryFn: async () => {
       const [movies, tvs, animes, doramas] = await Promise.all([
-        tmdb.movies.discover({ filters: { sort_by: 'vote_count.desc' }, language, page: 1 }),
-        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc' }, language, page: 1 }),
-
-        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc', with_original_language: 'ja', with_genres: '16' } as any, language, page: 1 }),
-
-        tmdb.tv.discover({ filters: { sort_by: 'vote_count.desc', with_original_language: 'ko' } as any, language, page: 1 }),
+        tmdb.movies.discover({
+          filters: { sort_by: 'vote_count.desc' },
+          language,
+          page: 1,
+        }),
+        tmdb.tv.discover({
+          filters: { sort_by: 'vote_count.desc' },
+          language,
+          page: 1,
+        }),
+
+        tmdb.tv.discover({
+          filters: {
+            sort_by: 'vote_count.desc',
+            with_original_language: 'ja',
+            with_genres: '16',
+          } as any,
+          language,
+          page: 1,
+        }),
+
+        tmdb.tv.discover({
+          filters: {
+            sort_by: 'vote_count.desc',
+            with_original_language: 'ko',
+          } as any,
+          language,
+          page: 1,
+        }),
       ])
 
       return {
@@ -73,7 +95,9 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
                 key={type}
                 onClick={() => toggleType(type)}
                 className={`group relative aspect-[4/3] w-full overflow-hidden rounded-2xl border-2 text-left transition-all active:scale-95 ${
-                  isSelected ? 'border-foreground shadow-lg shadow-foreground/20' : 'border-transparent'
+                  isSelected
+                    ? 'border-foreground shadow-lg shadow-foreground/20'
+                    : 'border-transparent'
                 }`}
               >
                 <div className="absolute inset-0 bg-muted">
@@ -88,10 +112,12 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
                   )}
                 </div>
 
-                <div 
+                <div
                   className={`absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity ${
-                    isSelected ? 'opacity-100' : 'opacity-70 group-hover:opacity-90'
-                  }`} 
+                    isSelected
+                      ? 'opacity-100'
+                      : 'opacity-70 group-hover:opacity-90'
+                  }`}
                 />
 
                 {isSelected && (
@@ -104,7 +130,7 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
                       <CheckCircle className="h-6 w-6 text-white bg-foreground rounded-full" />
                     </div>
                   )}
-                  
+
                   <div className="mt-auto">
                     <span className="font-semibold text-white drop-shadow-md">
                       {CONTENT_TYPE_LABELS[type]}
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
index 9e1040f4..2d20ca9c 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
@@ -1,11 +1,12 @@
-import { useOnboarding } from '../onboarding-context'
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
-import { useMemo } from 'react'
+import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingGenres({ lang }: { lang: string }) {
-  const { genres, setGenres, contentTypes, nextStep, dictionary } = useOnboarding()
+  const { genres, setGenres, contentTypes, nextStep, dictionary } =
+    useOnboarding()
   const language = (lang as Language) || 'en-US'
 
   const title = dictionary?.genres_title || 'Pick your favorite genres'
@@ -13,7 +14,6 @@ export function OnboardingGenres({ lang }: { lang: string }) {
   const cta = dictionary?.continue || 'Continue'
   const selectPrompt = dictionary?.genres_select_prompt || 'Select a genre'
 
-
   const { data: movieGenresData } = useQuery({
     queryKey: ['tmdb-genres-movie', language],
     queryFn: () => tmdb.genres('movie', language),
@@ -26,32 +26,27 @@ export function OnboardingGenres({ lang }: { lang: string }) {
     staleTime: Infinity,
   })
 
-
   const availableGenres = useMemo(() => {
     let combined: { id: number; name: string }[] = []
-    
 
     if (contentTypes.includes('movie')) {
       combined = [...combined, ...(movieGenresData?.genres || [])]
     }
-    
 
     if (contentTypes.includes('tv') || contentTypes.includes('dorama')) {
       combined = [...combined, ...(tvGenresData?.genres || [])]
     }
 
-
     if (contentTypes.includes('anime') && !contentTypes.includes('tv')) {
-
       const animationGenre = tvGenresData?.genres.find(g => g.id === 16)
       if (animationGenre) {
-         combined.push(animationGenre)
+        combined.push(animationGenre)
       }
     }
 
-
-    const unique = Array.from(new Map(combined.map(item => [item.id, item])).values())
-    
+    const unique = Array.from(
+      new Map(combined.map(item => [item.id, item])).values()
+    )
 
     return unique.sort((a, b) => a.name.localeCompare(b.name))
   }, [contentTypes, movieGenresData, tvGenresData])
@@ -72,9 +67,7 @@ export function OnboardingGenres({ lang }: { lang: string }) {
         <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
           {title}
         </h1>
-        <p className="text-muted-foreground text-sm md:text-base">
-          {subtitle}
-        </p>
+        <p className="text-muted-foreground text-sm md:text-base">{subtitle}</p>
 
         <div className="flex flex-wrap items-center justify-center gap-2.5 md:gap-3 mt-4 max-w-3xl mx-auto w-full">
           {availableGenres.map(genre => {
@@ -84,8 +77,8 @@ export function OnboardingGenres({ lang }: { lang: string }) {
                 key={genre.id}
                 onClick={() => toggleGenre(genre.id)}
                 className={`px-5 py-2.5 rounded-full border transition-all active:scale-95 ${
-                  isSelected 
-                    ? 'bg-foreground text-background border-foreground font-medium scale-105' 
+                  isSelected
+                    ? 'bg-foreground text-background border-foreground font-medium scale-105'
                     : 'bg-muted border-border font-normal hover:bg-muted/80'
                 }`}
               >
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
index 7063bd1d..9c6f91e6 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingName({ lang }: { lang: string }) {
@@ -9,7 +9,6 @@ export function OnboardingName({ lang }: { lang: string }) {
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
-
     const timer = setTimeout(() => {
       inputRef.current?.focus()
     }, 500)
@@ -31,7 +30,9 @@ export function OnboardingName({ lang }: { lang: string }) {
     }
   }
 
-  const title = dictionary?.name_title || 'Tell us your name so we can make Plotwist feel like yours'
+  const title =
+    dictionary?.name_title ||
+    'Tell us your name so we can make Plotwist feel like yours'
   const placeholderText = dictionary?.name_placeholder || 'Your name'
   const cta = dictionary?.continue || 'Continue'
 
@@ -47,7 +48,7 @@ export function OnboardingName({ lang }: { lang: string }) {
           type="text"
           placeholder={placeholderText}
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          onChange={e => setName(e.target.value)}
           onKeyDown={handleKeyDown}
           autoCapitalize="words"
           autoCorrect="off"
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
index 94afce24..b3714524 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -1,33 +1,38 @@
-import { useOnboarding } from '../onboarding-context'
 import { useQuery } from '@tanstack/react-query'
-import { tmdb } from '@/services/tmdb'
-import { tmdbImage } from '@/utils/tmdb/image'
-import Image from 'next/image'
 import { motion } from 'framer-motion'
+import Image from 'next/image'
 import { Logo } from '@/components/logo'
+import { tmdb } from '@/services/tmdb'
 import type { Language } from '@/types/languages'
+import { tmdbImage } from '@/utils/tmdb/image'
+import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingWelcome({ lang }: { lang: string }) {
   const { nextStep, dictionary } = useOnboarding()
   const language = (lang as Language) || 'en-US'
 
-  const title = dictionary?.welcome_title || 'Track, discover and never miss a title'
-  const subtitle = dictionary?.welcome_subtitle || 'Join the community of movie and TV show lovers.'
+  const title =
+    dictionary?.welcome_title || 'Track, discover and never miss a title'
+  const subtitle =
+    dictionary?.welcome_subtitle ||
+    'Join the community of movie and TV show lovers.'
   const cta = dictionary?.get_started || 'Get started'
 
-
   const { data } = useQuery({
     queryKey: ['onboarding-welcome-posters', language],
-    queryFn: () => tmdb.movies.discover({
-      filters: { sort_by: 'vote_count.desc' },
-      language,
-      page: 1,
-    }),
+    queryFn: () =>
+      tmdb.movies.discover({
+        filters: { sort_by: 'vote_count.desc' },
+        language,
+        page: 1,
+      }),
   })
 
-
-  const posters = data?.results.slice(0, 20).map(m => m.poster_path).filter(Boolean) as string[] ?? []
-
+  const posters =
+    (data?.results
+      .slice(0, 20)
+      .map(m => m.poster_path)
+      .filter(Boolean) as string[]) ?? []
 
   const col1 = posters.filter((_, i) => i % 5 === 0)
   const col2 = posters.filter((_, i) => i % 5 === 1)
@@ -38,15 +43,26 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
   const Column = ({ images, duration, delayOffset, className }: any) => (
     <div
       className={`flex flex-col gap-4 min-w-[140px] md:min-w-[180px] lg:min-w-[220px] will-change-transform animate-scroll-up ${className}`}
-      style={{ 
-        '--duration': `${duration}s`, 
+      style={
+        {
+          '--duration': `${duration}s`,
 
-        animationDelay: `-${delayOffset}s` 
-      } as React.CSSProperties}
+          animationDelay: `-${delayOffset}s`,
+        } as React.CSSProperties
+      }
     >
       {[...images, ...images].map((path, i) => (
-        <div key={`${i}`} className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl">
-          <Image src={tmdbImage(path as string, 'w500')} alt="" fill className="object-cover" unoptimized />
+        <div
+          key={`${i}`}
+          className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl"
+        >
+          <Image
+            src={tmdbImage(path as string, 'w500')}
+            alt=""
+            fill
+            className="object-cover"
+            unoptimized
+          />
         </div>
       ))}
     </div>
@@ -63,16 +79,49 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
           animation: scroll-up var(--duration, 40s) linear infinite;
         }
       `}</style>
-      
+
       <div className="absolute inset-0 z-0 opacity-40 md:opacity-30">
-        <div className="flex w-full justify-center gap-4 p-4" style={{ transform: 'rotate(-5deg) scale(1.25) translateY(-5%)' }}>
-          <Column images={col1} duration={40} delayOffset={10} className="hidden lg:flex" />
-          <Column images={col2} duration={45} delayOffset={25} className="hidden md:flex pt-12" />
-          <Column images={col3} duration={38} delayOffset={5} className="pt-6" />
+        <div
+          className="flex w-full justify-center gap-4 p-4"
+          style={{ transform: 'rotate(-5deg) scale(1.25) translateY(-5%)' }}
+        >
+          <Column
+            images={col1}
+            duration={40}
+            delayOffset={10}
+            className="hidden lg:flex"
+          />
+          <Column
+            images={col2}
+            duration={45}
+            delayOffset={25}
+            className="hidden md:flex pt-12"
+          />
+          <Column
+            images={col3}
+            duration={38}
+            delayOffset={5}
+            className="pt-6"
+          />
           <Column images={col4} duration={42} delayOffset={20} className="" />
-          <Column images={col5} duration={35} delayOffset={15} className="pt-16" />
-          <Column images={col1} duration={39} delayOffset={8} className="hidden md:flex pt-8" />
-          <Column images={col2} duration={48} delayOffset={30} className="hidden lg:flex pt-2" />
+          <Column
+            images={col5}
+            duration={35}
+            delayOffset={15}
+            className="pt-16"
+          />
+          <Column
+            images={col1}
+            duration={39}
+            delayOffset={8}
+            className="hidden md:flex pt-8"
+          />
+          <Column
+            images={col2}
+            duration={48}
+            delayOffset={30}
+            className="hidden lg:flex pt-2"
+          />
         </div>
       </div>
 
@@ -80,24 +129,26 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
       <div className="absolute inset-0 z-10 hidden md:block bg-[radial-gradient(circle_at_center,_transparent_0%,_black_100%)] opacity-70" />
 
       <div className="relative z-20 flex flex-1 flex-col justify-end md:justify-center items-start md:items-center px-6 pb-12 md:pb-0 text-left md:text-center w-full max-w-6xl mx-auto">
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.2 }}
           className="flex flex-col items-start md:items-center w-full"
         >
           <div className="mb-6 md:mb-8 bg-app-foreground flex items-center justify-center rounded-2xl shadow-2xl p-4 md:p-6 opacity-90 transition-opacity hover:opacity-100">
-             <div className="brightness-0 invert"><Logo size={42} /></div>
+            <div className="brightness-0 invert">
+              <Logo size={42} />
+            </div>
           </div>
-          
+
           <h1 className="mb-4 text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white max-w-3xl drop-shadow-xl text-balance">
             {title}
           </h1>
-          
+
           <p className="mb-10 text-lg md:text-xl text-neutral-300 max-w-xl drop-shadow-md">
             {subtitle}
           </p>
-          
+
           <div className="w-full max-w-sm">
             <button
               onClick={nextStep}
diff --git a/apps/web/src/app/[lang]/onboarding/page.tsx b/apps/web/src/app/[lang]/onboarding/page.tsx
index a608e58a..4354eb2c 100644
--- a/apps/web/src/app/[lang]/onboarding/page.tsx
+++ b/apps/web/src/app/[lang]/onboarding/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next'
 import type { PageProps } from '@/types/languages'
+import { getDictionary } from '@/utils/dictionaries'
 import { OnboardingProvider } from './_components/onboarding-context'
 import { OnboardingStepper } from './_components/onboarding-stepper'
-import { getDictionary } from '@/utils/dictionaries'
 
 export const metadata: Metadata = {
   title: 'Onboarding • Plotwist',

From f5df6c1a535b5c92f4bb81cd41b8669b7072baa0 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Thu, 12 Mar 2026 12:44:17 -0300
Subject: [PATCH 07/17] feat: Enhance onboarding flow with user item saving,
 updated genre selection logic, and general UI refinements across steps.

---
 apps/web/public/dictionaries/de-DE.json       |   3 +-
 apps/web/public/dictionaries/en-US.json       |   3 +-
 apps/web/public/dictionaries/es-ES.json       |   3 +-
 apps/web/public/dictionaries/fr-FR.json       |   3 +-
 apps/web/public/dictionaries/it-IT.json       |   3 +-
 apps/web/public/dictionaries/ja-JP.json       |   3 +-
 apps/web/public/dictionaries/pt-BR.json       |   3 +-
 .../_components/onboarding-context.tsx        |  20 +-
 .../_components/onboarding-stepper.tsx        |   5 -
 .../_components/onboarding-swiper.tsx         |  33 +++-
 .../steps/onboarding-celebration.tsx          |  43 ++++-
 .../steps/onboarding-content-types.tsx        |  12 +-
 .../_components/steps/onboarding-genres.tsx   |  21 +--
 .../_components/steps/onboarding-name.tsx     |  10 +-
 .../_components/steps/onboarding-welcome.tsx  |  12 +-
 pnpm-lock.yaml                                | 176 +-----------------
 16 files changed, 120 insertions(+), 233 deletions(-)

diff --git a/apps/web/public/dictionaries/de-DE.json b/apps/web/public/dictionaries/de-DE.json
index 56285323..f9922ef0 100644
--- a/apps/web/public/dictionaries/de-DE.json
+++ b/apps/web/public/dictionaries/de-DE.json
@@ -915,6 +915,7 @@
     "celebration_title": "Alles bereit!",
     "celebration_subtitle": "Dein Profil ist fertig. Lass uns anfangen.",
     "celebration_cta": "Zur Startseite",
-    "continue": "Weiter"
+    "continue": "Weiter",
+    "syncing": "Profil wird gespeichert..."
   }
 }
diff --git a/apps/web/public/dictionaries/en-US.json b/apps/web/public/dictionaries/en-US.json
index ff58fe37..b0a591a9 100644
--- a/apps/web/public/dictionaries/en-US.json
+++ b/apps/web/public/dictionaries/en-US.json
@@ -917,6 +917,7 @@
     "celebration_title": "You're all set!",
     "celebration_subtitle": "Your profile is ready. Let's start tracking.",
     "celebration_cta": "Go to Home",
-    "continue": "Continue"
+    "continue": "Continue",
+    "syncing": "Saving profile..."
   }
 }
diff --git a/apps/web/public/dictionaries/es-ES.json b/apps/web/public/dictionaries/es-ES.json
index b8aa8c4c..e1bc7d8a 100644
--- a/apps/web/public/dictionaries/es-ES.json
+++ b/apps/web/public/dictionaries/es-ES.json
@@ -919,6 +919,7 @@
     "celebration_title": "¡Todo listo!",
     "celebration_subtitle": "Tu perfil está listo. Empecemos.",
     "celebration_cta": "Ir a Inicio",
-    "continue": "Continuar"
+    "continue": "Continuar",
+    "syncing": "Guardando perfil..."
   }
 }
diff --git a/apps/web/public/dictionaries/fr-FR.json b/apps/web/public/dictionaries/fr-FR.json
index cd20d894..4e96eff9 100644
--- a/apps/web/public/dictionaries/fr-FR.json
+++ b/apps/web/public/dictionaries/fr-FR.json
@@ -921,6 +921,7 @@
     "celebration_title": "Tout est prêt !",
     "celebration_subtitle": "Votre profil est prêt. Commençons.",
     "celebration_cta": "Aller à l'accueil",
-    "continue": "Continuer"
+    "continue": "Continuer",
+    "syncing": "Enregistrement du profil..."
   }
 }
diff --git a/apps/web/public/dictionaries/it-IT.json b/apps/web/public/dictionaries/it-IT.json
index 92303b24..8ff2deb6 100644
--- a/apps/web/public/dictionaries/it-IT.json
+++ b/apps/web/public/dictionaries/it-IT.json
@@ -918,6 +918,7 @@
     "celebration_title": "Tutto pronto!",
     "celebration_subtitle": "Il tuo profilo è pronto. Iniziamo.",
     "celebration_cta": "Vai alla Home",
-    "continue": "Continua"
+    "continue": "Continua",
+    "syncing": "Salvataggio profilo..."
   }
 }
diff --git a/apps/web/public/dictionaries/ja-JP.json b/apps/web/public/dictionaries/ja-JP.json
index bf6d3f27..776cda2c 100644
--- a/apps/web/public/dictionaries/ja-JP.json
+++ b/apps/web/public/dictionaries/ja-JP.json
@@ -921,6 +921,7 @@
     "celebration_title": "準備完了！",
     "celebration_subtitle": "プロフィールが完成しました。始めましょう。",
     "celebration_cta": "ホームへ",
-    "continue": "続ける"
+    "continue": "続ける",
+    "syncing": "プロフィールを保存中..."
   }
 }
diff --git a/apps/web/public/dictionaries/pt-BR.json b/apps/web/public/dictionaries/pt-BR.json
index 5de02859..2b7e64d1 100644
--- a/apps/web/public/dictionaries/pt-BR.json
+++ b/apps/web/public/dictionaries/pt-BR.json
@@ -920,6 +920,7 @@
     "celebration_title": "Tudo pronto!",
     "celebration_subtitle": "Seu perfil está pronto. Vamos começar.",
     "celebration_cta": "Ir para o Início",
-    "continue": "Continuar"
+    "continue": "Continuar",
+    "syncing": "Salvando perfil..."
   }
 }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index f2b3adfe..38ee48ae 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -5,12 +5,19 @@ import { useRouter } from 'next/navigation'
 
 export type ContentType = 'movie' | 'tv' | 'anime' | 'dorama'
 
+export interface SwipedItem {
+  tmdbId: number
+  mediaType: 'MOVIE' | 'TV_SHOW'
+  status: 'WATCHED' | 'WATCHING' | 'WATCHLIST' | 'DROPPED'
+}
+
 export interface OnboardingState {
   currentStep: number
   userName: string
   contentTypes: ContentType[]
   genres: number[]
   savedTitlesCount: number
+  swipedItems: SwipedItem[]
 }
 
 interface OnboardingContextType extends OnboardingState {
@@ -18,10 +25,11 @@ interface OnboardingContextType extends OnboardingState {
   setContentTypes: (types: ContentType[]) => void
   setGenres: (genres: number[]) => void
   incrementSavedTitles: () => void
+  addSwipedItem: (item: SwipedItem) => void
   nextStep: () => void
   prevStep: () => void
   goToStep: (step: number) => void
-  completeOnboarding: () => void
+  completeOnboarding: (lang?: string) => void
   isLoaded: boolean
   dictionary?: Record<string, string>
 }
@@ -32,6 +40,7 @@ const defaultState: OnboardingState = {
   contentTypes: [],
   genres: [],
   savedTitlesCount: 0,
+  swipedItems: [],
 }
 
 const OnboardingContext = createContext<OnboardingContextType | undefined>(undefined)
@@ -91,6 +100,10 @@ export function OnboardingProvider({
     setState(s => ({ ...s, savedTitlesCount: s.savedTitlesCount + 1 }))
   }, [])
 
+  const addSwipedItem = useCallback((item: SwipedItem) => {
+    setState(s => ({ ...s, swipedItems: [...s.swipedItems, item] }))
+  }, [])
+
   const nextStep = useCallback(() => {
     setState(s => ({ ...s, currentStep: Math.min(s.currentStep + 1, 5) }))
   }, [])
@@ -103,9 +116,9 @@ export function OnboardingProvider({
     setState(s => ({ ...s, currentStep: step }))
   }, [])
 
-  const completeOnboarding = useCallback(() => {
+  const completeOnboarding = useCallback((lang: string = 'en-US') => {
     localStorage.setItem('plotwist-onboarding-complete', 'true')
-    router.push('/')
+    router.push(`/${lang}/home`)
   }, [router])
 
   return (
@@ -116,6 +129,7 @@ export function OnboardingProvider({
         setContentTypes,
         setGenres,
         incrementSavedTitles,
+        addSwipedItem,
         nextStep,
         prevStep,
         goToStep,
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
index aa8611fd..a83577a3 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -66,11 +66,6 @@ export function OnboardingStepper({ lang }: { lang: string }) {
         </AnimatePresence>
       </main>
 
-      {isWelcomeScreen && (
-        <main className="flex flex-1 flex-col absolute inset-0 z-10">
-          <OnboardingWelcome lang={lang} />
-        </main>
-      )}
     </div>
   )
 }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index c96eb702..e1e4d81e 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -18,6 +18,7 @@ type Movie = {
   release_date: string
   vote_average: number
   overview: string
+  mediaType?: 'MOVIE' | 'TV_SHOW'
 }
 
 type OnboardingSwiperProps = {
@@ -238,7 +239,7 @@ import type { Language } from '@/types/languages'
 // ... existing code ...
 export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
   const language = (lang as Language) || 'en-US'
-  const { genres, contentTypes, incrementSavedTitles, savedTitlesCount, nextStep, dictionary } = useOnboarding()
+  const { genres, contentTypes, incrementSavedTitles, savedTitlesCount, nextStep, dictionary, addSwipedItem } = useOnboarding()
   
   const title = dictionary?.swiper_title || 'Discover titles'
   const subtitle = dictionary?.swiper_subtitle || 'Swipe sideways to add to your list'
@@ -315,6 +316,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           combinedResults.push(
             ...res.data.results.map((item: any) => ({
               ...item,
+              mediaType: 'MOVIE',
               title: item.title,
               release_date: item.release_date
             }))
@@ -323,6 +325,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           combinedResults.push(
             ...res.data.results.map((item: any) => ({
               ...item,
+              mediaType: 'TV_SHOW',
               title: item.name || item.title,
               release_date: item.first_air_date || item.release_date
             }))
@@ -362,7 +365,33 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
       setExitingCard({ movie: currentMovie, direction: dir, initialOffset: velocityInfo })
 
 
-      if (dir === 'right' || dir === 'up' || dir === 'down') {
+      // Extract the direction and item info
+      const tmdbId = currentMovie.id
+      const mediaType = currentMovie.mediaType // We will add this mapping below
+      
+      let status: 'WATCHED' | 'WATCHING' | 'WATCHLIST' | 'DROPPED' | null = null
+      
+      switch (dir) {
+        case 'right':
+          status = 'WATCHLIST'
+          break
+        case 'up':
+          status = 'WATCHED'
+          break
+        case 'down':
+          status = 'WATCHING'
+          break
+        case 'left':
+          // Skip, do not save
+          break
+      }
+
+      if (status) {
+        addSwipedItem({
+          tmdbId,
+          mediaType: mediaType as 'MOVIE' | 'TV_SHOW',
+          status,
+        })
         incrementSavedTitles()
       }
     },
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
index f72eb5df..dd70af39 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -1,10 +1,33 @@
 'use client'
 
 import { useOnboarding } from '../onboarding-context'
-import { CheckCircle } from 'lucide-react'
+import { CheckCircle, Loader2 } from 'lucide-react'
+import { useState } from 'react'
+import { usePutUserItem } from '@/api/user-items'
 
 export function OnboardingCelebration({ lang }: { lang: string }) {
-  const { completeOnboarding, dictionary } = useOnboarding()
+  const { completeOnboarding, dictionary, swipedItems } = useOnboarding()
+  const putUserItem = usePutUserItem()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const handleComplete = async () => {
+    try {
+      setIsSubmitting(true)
+      
+      const promises = swipedItems.map(item => 
+        putUserItem.mutateAsync({
+           data: { mediaType: item.mediaType, tmdbId: item.tmdbId, status: item.status }
+        })
+      )
+      
+      await Promise.allSettled(promises)
+    } catch (e) {
+      console.error('Failed to sync swiped items', e)
+    } finally {
+      setIsSubmitting(false)
+      completeOnboarding(lang)
+    }
+  }
 
   const title = dictionary?.celebration_title || "You're all set!"
   const subtitle = dictionary?.celebration_subtitle || "Your profile is ready. Let's start tracking."
@@ -12,20 +35,22 @@ export function OnboardingCelebration({ lang }: { lang: string }) {
 
   return (
     <div className="flex flex-1 h-full flex-col items-center justify-center px-6">
-      <div className="flex flex-col items-center gap-6 text-center">
-        <CheckCircle className="h-24 w-24 text-green-500 animate-in zoom-in duration-500" />
-        <h1 className="text-4xl font-bold tracking-tight">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <CheckCircle className="h-16 w-16 text-green-500 animate-in zoom-in duration-500" />
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
           {title}
         </h1>
-        <p className="text-muted-foreground">
+        <p className="text-sm text-muted-foreground max-w-sm">
           {subtitle}
         </p>
 
         <button
-          onClick={completeOnboarding}
-          className="mt-8 w-full max-w-sm rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95"
+          onClick={handleComplete}
+          disabled={isSubmitting}
+          className="mt-6 w-full max-w-xs rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 flex items-center justify-center space-x-2"
         >
-          {cta}
+          {isSubmitting ? <Loader2 className="animate-spin h-4 w-4" /> : null}
+          <span>{isSubmitting ? (dictionary?.syncing || "Saving profile...") : cta}</span>
         </button>
       </div>
     </div>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
index 94ae1fe8..c3374e68 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
@@ -59,7 +59,7 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
   return (
     <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
       <div className="flex flex-col gap-4 text-center mt-4 md:mt-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+        <h1 className="text-xl md:text-2xl font-bold tracking-tight">
           {title}
         </h1>
 
@@ -72,7 +72,7 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
               <button
                 key={type}
                 onClick={() => toggleType(type)}
-                className={`group relative aspect-[4/3] w-full overflow-hidden rounded-2xl border-2 text-left transition-all active:scale-95 ${
+                className={`group relative aspect-[4/3] w-full overflow-hidden rounded-xl border-2 text-left transition-all active:scale-95 ${
                   isSelected ? 'border-foreground shadow-lg shadow-foreground/20' : 'border-transparent'
                 }`}
               >
@@ -101,12 +101,12 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
                 <div className="absolute inset-0 flex flex-col p-3">
                   {isSelected && (
                     <div className="flex justify-end animate-in zoom-in duration-200">
-                      <CheckCircle className="h-6 w-6 text-white bg-foreground rounded-full" />
+                      <CheckCircle className="h-5 w-5 text-white bg-foreground rounded-full" />
                     </div>
                   )}
                   
                   <div className="mt-auto">
-                    <span className="font-semibold text-white drop-shadow-md">
+                    <span className="text-sm font-semibold text-white drop-shadow-md">
                       {CONTENT_TYPE_LABELS[type]}
                     </span>
                   </div>
@@ -117,11 +117,11 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
         </div>
       </div>
 
-      <div className="mt-8 mx-auto w-full max-w-sm">
+      <div className="mt-8 mx-auto w-full max-w-xs">
         <button
           onClick={nextStep}
           disabled={!canContinue}
-          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+          className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
         >
           {cta}
         </button>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
index 9e1040f4..af83628b 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
@@ -36,20 +36,11 @@ export function OnboardingGenres({ lang }: { lang: string }) {
     }
     
 
-    if (contentTypes.includes('tv') || contentTypes.includes('dorama')) {
+    if (contentTypes.includes('tv') || contentTypes.includes('dorama') || contentTypes.includes('anime')) {
       combined = [...combined, ...(tvGenresData?.genres || [])]
     }
 
 
-    if (contentTypes.includes('anime') && !contentTypes.includes('tv')) {
-
-      const animationGenre = tvGenresData?.genres.find(g => g.id === 16)
-      if (animationGenre) {
-         combined.push(animationGenre)
-      }
-    }
-
-
     const unique = Array.from(new Map(combined.map(item => [item.id, item])).values())
     
 
@@ -69,10 +60,10 @@ export function OnboardingGenres({ lang }: { lang: string }) {
   return (
     <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
       <div className="flex flex-col gap-4 text-center mt-4 md:mt-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+        <h1 className="text-xl md:text-2xl font-bold tracking-tight">
           {title}
         </h1>
-        <p className="text-muted-foreground text-sm md:text-base">
+        <p className="text-muted-foreground text-xs md:text-sm">
           {subtitle}
         </p>
 
@@ -83,7 +74,7 @@ export function OnboardingGenres({ lang }: { lang: string }) {
               <button
                 key={genre.id}
                 onClick={() => toggleGenre(genre.id)}
-                className={`px-5 py-2.5 rounded-full border transition-all active:scale-95 ${
+                className={`px-4 py-2 text-sm rounded-full border transition-all active:scale-95 ${
                   isSelected 
                     ? 'bg-foreground text-background border-foreground font-medium scale-105' 
                     : 'bg-muted border-border font-normal hover:bg-muted/80'
@@ -96,11 +87,11 @@ export function OnboardingGenres({ lang }: { lang: string }) {
         </div>
       </div>
 
-      <div className="mt-8 mx-auto w-full max-w-sm">
+      <div className="mt-8 mx-auto w-full max-w-xs">
         <button
           onClick={nextStep}
           disabled={!canContinue}
-          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+          className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
         >
           {canContinue ? cta : selectPrompt}
         </button>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
index 7063bd1d..01e53e02 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
@@ -37,8 +37,8 @@ export function OnboardingName({ lang }: { lang: string }) {
 
   return (
     <div className="flex flex-1 flex-col justify-between px-6 pb-8 pt-4">
-      <div className="flex flex-col gap-6 text-center mt-12 md:mt-16 max-w-xl mx-auto w-full">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+      <div className="flex flex-col gap-4 text-center mt-12 md:mt-16 max-w-md mx-auto w-full">
+        <h1 className="text-xl md:text-2xl font-bold tracking-tight">
           {title}
         </h1>
 
@@ -51,15 +51,15 @@ export function OnboardingName({ lang }: { lang: string }) {
           onKeyDown={handleKeyDown}
           autoCapitalize="words"
           autoCorrect="off"
-          className="w-full rounded-xl bg-muted p-4 text-lg outline-none transition-colors border border-transparent focus:border-border mt-2 md:mt-4"
+          className="w-full rounded-xl bg-muted p-3 text-sm outline-none transition-colors border border-transparent focus:border-border mt-2 md:mt-4"
         />
       </div>
 
-      <div className="mt-8 mx-auto w-full max-w-sm">
+      <div className="mt-8 mx-auto w-full max-w-xs">
         <button
           onClick={handleContinue}
           disabled={!canContinue}
-          className="w-full rounded-full bg-foreground py-4 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
+          className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
         >
           {cta}
         </button>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
index 94afce24..b0e0eb8d 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -86,22 +86,22 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="flex flex-col items-start md:items-center w-full"
         >
-          <div className="mb-6 md:mb-8 bg-app-foreground flex items-center justify-center rounded-2xl shadow-2xl p-4 md:p-6 opacity-90 transition-opacity hover:opacity-100">
-             <div className="brightness-0 invert"><Logo size={42} /></div>
+          <div className="mb-4 md:mb-6 bg-app-foreground flex items-center justify-center rounded-xl shadow-lg p-3 md:p-4 opacity-90 transition-opacity hover:opacity-100">
+             <div className="brightness-0 invert"><Logo size={32} /></div>
           </div>
           
-          <h1 className="mb-4 text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white max-w-3xl drop-shadow-xl text-balance">
+          <h1 className="mb-3 text-2xl md:text-4xl lg:text-5xl font-bold tracking-tight text-white max-w-2xl drop-shadow-xl text-balance">
             {title}
           </h1>
           
-          <p className="mb-10 text-lg md:text-xl text-neutral-300 max-w-xl drop-shadow-md">
+          <p className="mb-8 text-sm md:text-base text-neutral-400 max-w-md drop-shadow-md">
             {subtitle}
           </p>
           
-          <div className="w-full max-w-sm">
+          <div className="w-full max-w-xs">
             <button
               onClick={nextStep}
-              className="w-full rounded-full bg-white py-4 md:py-5 text-center text-lg font-bold text-black transition-transform active:scale-95 shadow-xl hover:bg-neutral-200"
+              className="w-full rounded-full bg-white py-3 text-center text-sm font-semibold text-black transition-transform active:scale-95 shadow-lg hover:bg-neutral-200"
             >
               {cta}
             </button>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1549c63..8d30af77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -748,9 +748,6 @@ importers:
         specifier: ^4.3.5
         version: 4.3.6
     devDependencies:
-      '@tailwindcss/postcss':
-        specifier: ^4.2.1
-        version: 4.2.1
       '@types/node':
         specifier: ^25.0.3
         version: 25.3.0
@@ -4436,94 +4433,6 @@ packages:
       zod:
         optional: true
 
-  '@tailwindcss/node@4.2.1':
-    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
-
-  '@tailwindcss/oxide-android-arm64@4.2.1':
-    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.1':
-    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.2.1':
-    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.1':
-    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
-    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
-    engines: {node: '>= 20'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
-    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
-    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
-    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
-    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
-    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
-    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
-    engines: {node: '>= 20'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
-    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
-    engines: {node: '>= 20'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.2.1':
-    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
-    engines: {node: '>= 20'}
-
-  '@tailwindcss/postcss@4.2.1':
-    resolution: {integrity: sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==}
-
   '@tailwindcss/typography@0.5.19':
     resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
     peerDependencies:
@@ -5888,10 +5797,6 @@ packages:
     resolution: {integrity: sha512-2RZdgEbXmp5+dVbRm0P7HQUImZpICccJy7rN7Tv+SFa55pH+lxnuw6/K1ZxxBfHoYpSkHLAO92oa8O4SwFXA2A==}
     engines: {node: '>=10.2.0'}
 
-  enhanced-resolve@5.20.0:
-    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
-    engines: {node: '>=10.13.0'}
-
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -8634,10 +8539,6 @@ packages:
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
-    engines: {node: '>=6'}
-
   tar-fs@2.1.4:
     resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
@@ -13630,75 +13531,6 @@ snapshots:
       typescript: 5.9.3
       zod: 4.3.6
 
-  '@tailwindcss/node@4.2.1':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.20.0
-      jiti: 2.6.1
-      lightningcss: 1.31.1
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.2.1
-
-  '@tailwindcss/oxide-android-arm64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
-    optional: true
-
-  '@tailwindcss/oxide@4.2.1':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.2.1
-      '@tailwindcss/oxide-darwin-arm64': 4.2.1
-      '@tailwindcss/oxide-darwin-x64': 4.2.1
-      '@tailwindcss/oxide-freebsd-x64': 4.2.1
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
-      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
-      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
-      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
-      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
-      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
-
-  '@tailwindcss/postcss@4.2.1':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.2.1
-      '@tailwindcss/oxide': 4.2.1
-      postcss: 8.5.6
-      tailwindcss: 4.2.1
-
   '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       postcss-selector-parser: 6.0.10
@@ -15040,11 +14872,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  enhanced-resolve@5.20.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -16295,6 +16122,7 @@ snapshots:
       lightningcss-linux-x64-musl: 1.31.1
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
+    optional: true
 
   lilconfig@3.1.3: {}
 
@@ -18454,8 +18282,6 @@ snapshots:
 
   tailwindcss@4.2.1: {}
 
-  tapable@2.3.0: {}
-
   tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4

From 5d0c3b3955d8c8cdfc4c07ed837501c02629cdd8 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Thu, 12 Mar 2026 14:38:12 -0300
Subject: [PATCH 08/17] refactor: Add explicit type="button" to all buttons in
 onboarding steps and refactor minor code styles.

---
 .../_components/onboarding-context.tsx        | 11 +++++---
 .../_components/onboarding-stepper.tsx        |  1 -
 .../_components/onboarding-swiper.tsx         | 26 ++++++++++++++-----
 .../steps/onboarding-celebration.tsx          | 23 +++++++++-------
 .../steps/onboarding-content-types.tsx        |  4 +--
 .../_components/steps/onboarding-genres.tsx   | 16 +++++++-----
 .../_components/steps/onboarding-name.tsx     |  3 ++-
 .../_components/steps/onboarding-welcome.tsx  | 13 ++++++----
 8 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index b2618c9d..c110084f 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -126,10 +126,13 @@ export function OnboardingProvider({
     setState(s => ({ ...s, currentStep: step }))
   }, [])
 
-  const completeOnboarding = useCallback((lang: string = 'en-US') => {
-    localStorage.setItem('plotwist-onboarding-complete', 'true')
-    router.push(`/${lang}/home`)
-  }, [router])
+  const completeOnboarding = useCallback(
+    (lang: string = 'en-US') => {
+      localStorage.setItem('plotwist-onboarding-complete', 'true')
+      router.push(`/${lang}/home`)
+    },
+    [router]
+  )
 
   return (
     <OnboardingContext.Provider
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
index 20e7ad88..feaa83f1 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -67,7 +67,6 @@ export function OnboardingStepper({ lang }: { lang: string }) {
           </motion.div>
         </AnimatePresence>
       </main>
-
     </div>
   )
 }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index 0419b994..759ff089 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -240,8 +240,16 @@ import { useOnboarding } from './onboarding-context'
 // ... existing code ...
 export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
   const language = (lang as Language) || 'en-US'
-  const { genres, contentTypes, incrementSavedTitles, savedTitlesCount, nextStep, dictionary, addSwipedItem } = useOnboarding()
-  
+  const {
+    genres,
+    contentTypes,
+    incrementSavedTitles,
+    savedTitlesCount,
+    nextStep,
+    dictionary,
+    addSwipedItem,
+  } = useOnboarding()
+
   const title = dictionary?.swiper_title || 'Discover titles'
   const subtitle =
     dictionary?.swiper_subtitle || 'Swipe sideways to add to your list'
@@ -395,15 +403,18 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
 
       setSwipeDirection(null)
       setSwipeProgress(0)
-      setExitingCard({ movie: currentMovie, direction: dir, initialOffset: velocityInfo })
-
+      setExitingCard({
+        movie: currentMovie,
+        direction: dir,
+        initialOffset: velocityInfo,
+      })
 
       // Extract the direction and item info
       const tmdbId = currentMovie.id
       const mediaType = currentMovie.mediaType // We will add this mapping below
-      
+
       let status: 'WATCHED' | 'WATCHING' | 'WATCHLIST' | 'DROPPED' | null = null
-      
+
       switch (dir) {
         case 'right':
           status = 'WATCHLIST'
@@ -428,7 +439,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
         incrementSavedTitles()
       }
     },
-    [currentMovie, exitingCard, incrementSavedTitles]
+    [currentMovie, exitingCard, incrementSavedTitles, addSwipedItem]
   )
 
   const handleExitComplete = useCallback(() => {
@@ -594,6 +605,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
 
       <div className="mt-auto pt-4 pb-2 w-full max-w-sm">
         <button
+          type="button"
           onClick={nextStep}
           disabled={!canContinue}
           className="w-full flex flex-col items-center justify-center rounded-full bg-foreground py-3 text-center font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
index 5e295466..33bb759d 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { useOnboarding } from '../onboarding-context'
 import { CheckCircle, Loader2 } from 'lucide-react'
 import { useState } from 'react'
 import { usePutUserItem } from '@/api/user-items'
+import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingCelebration({ lang }: { lang: string }) {
   const { completeOnboarding, dictionary, swipedItems } = useOnboarding()
@@ -13,13 +13,17 @@ export function OnboardingCelebration({ lang }: { lang: string }) {
   const handleComplete = async () => {
     try {
       setIsSubmitting(true)
-      
-      const promises = swipedItems.map(item => 
+
+      const promises = swipedItems.map(item =>
         putUserItem.mutateAsync({
-           data: { mediaType: item.mediaType, tmdbId: item.tmdbId, status: item.status }
+          data: {
+            mediaType: item.mediaType,
+            tmdbId: item.tmdbId,
+            status: item.status,
+          },
         })
       )
-      
+
       await Promise.allSettled(promises)
     } catch (e) {
       console.error('Failed to sync swiped items', e)
@@ -42,17 +46,18 @@ export function OnboardingCelebration({ lang }: { lang: string }) {
         <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
           {title}
         </h1>
-        <p className="text-sm text-muted-foreground max-w-sm">
-          {subtitle}
-        </p>
+        <p className="text-sm text-muted-foreground max-w-sm">{subtitle}</p>
 
         <button
+          type="button"
           onClick={handleComplete}
           disabled={isSubmitting}
           className="mt-6 w-full max-w-xs rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 flex items-center justify-center space-x-2"
         >
           {isSubmitting ? <Loader2 className="animate-spin h-4 w-4" /> : null}
-          <span>{isSubmitting ? (dictionary?.syncing || "Saving profile...") : cta}</span>
+          <span>
+            {isSubmitting ? dictionary?.syncing || 'Saving profile...' : cta}
+          </span>
         </button>
       </div>
     </div>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
index f72d8640..4cb61e3f 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-content-types.tsx
@@ -12,8 +12,6 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
   const language = (lang as Language) || 'en-US'
 
   const title = dictionary?.content_types_title || 'What do you like to watch?'
-  const subtitle =
-    dictionary?.content_types_subtitle || 'Select at least one to continue.'
   const cta = dictionary?.continue || 'Continue'
 
   const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
@@ -92,6 +90,7 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
 
             return (
               <button
+                type="button"
                 key={type}
                 onClick={() => toggleType(type)}
                 className={`group relative aspect-[4/3] w-full overflow-hidden rounded-2xl border-2 text-left transition-all active:scale-95 ${
@@ -145,6 +144,7 @@ export function OnboardingContentTypes({ lang }: { lang: string }) {
 
       <div className="mt-8 mx-auto w-full max-w-xs">
         <button
+          type="button"
           onClick={nextStep}
           disabled={!canContinue}
           className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
index cb44b283..910d2da1 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-genres.tsx
@@ -33,7 +33,11 @@ export function OnboardingGenres({ lang }: { lang: string }) {
       combined = [...combined, ...(movieGenresData?.genres || [])]
     }
 
-    if (contentTypes.includes('tv') || contentTypes.includes('dorama') || contentTypes.includes('anime')) {
+    if (
+      contentTypes.includes('tv') ||
+      contentTypes.includes('dorama') ||
+      contentTypes.includes('anime')
+    ) {
       combined = [...combined, ...(tvGenresData?.genres || [])]
     }
 
@@ -67,20 +71,19 @@ export function OnboardingGenres({ lang }: { lang: string }) {
         <h1 className="text-xl md:text-2xl font-bold tracking-tight">
           {title}
         </h1>
-        <p className="text-muted-foreground text-xs md:text-sm">
-          {subtitle}
-        </p>
+        <p className="text-muted-foreground text-xs md:text-sm">{subtitle}</p>
 
         <div className="flex flex-wrap items-center justify-center gap-2.5 md:gap-3 mt-4 max-w-3xl mx-auto w-full">
           {availableGenres.map(genre => {
             const isSelected = genres.includes(genre.id)
             return (
               <button
+                type="button"
                 key={genre.id}
                 onClick={() => toggleGenre(genre.id)}
                 className={`px-4 py-2 text-sm rounded-full border transition-all active:scale-95 ${
-                  isSelected 
-                    ? 'bg-foreground text-background border-foreground font-medium scale-105' 
+                  isSelected
+                    ? 'bg-foreground text-background border-foreground font-medium scale-105'
                     : 'bg-muted border-border font-normal hover:bg-muted/80'
                 }`}
               >
@@ -93,6 +96,7 @@ export function OnboardingGenres({ lang }: { lang: string }) {
 
       <div className="mt-8 mx-auto w-full max-w-xs">
         <button
+          type="button"
           onClick={nextStep}
           disabled={!canContinue}
           className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
index e9881d7d..a0e8c30a 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-name.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useOnboarding } from '../onboarding-context'
 
-export function OnboardingName({ lang }: { lang: string }) {
+export function OnboardingName({ lang: _lang }: { lang: string }) {
   const { userName, setUserName, nextStep, dictionary } = useOnboarding()
   const [name, setName] = useState(userName)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -58,6 +58,7 @@ export function OnboardingName({ lang }: { lang: string }) {
 
       <div className="mt-8 mx-auto w-full max-w-xs">
         <button
+          type="button"
           onClick={handleContinue}
           disabled={!canContinue}
           className="w-full rounded-full bg-foreground py-3 text-center text-sm font-semibold text-background transition-transform active:scale-95 disabled:opacity-50 disabled:active:scale-100"
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
index 8f23cd40..83820851 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -53,7 +53,7 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
     >
       {[...images, ...images].map((path, i) => (
         <div
-          key={`${i}`}
+          key={`${path}-${i}`}
           className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl"
         >
           <Image
@@ -136,19 +136,22 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
           className="flex flex-col items-start md:items-center w-full"
         >
           <div className="mb-4 md:mb-6 bg-app-foreground flex items-center justify-center rounded-xl shadow-lg p-3 md:p-4 opacity-90 transition-opacity hover:opacity-100">
-             <div className="brightness-0 invert"><Logo size={32} /></div>
+            <div className="brightness-0 invert">
+              <Logo size={32} />
+            </div>
           </div>
-          
+
           <h1 className="mb-3 text-2xl md:text-4xl lg:text-5xl font-bold tracking-tight text-white max-w-2xl drop-shadow-xl text-balance">
             {title}
           </h1>
-          
+
           <p className="mb-8 text-sm md:text-base text-neutral-400 max-w-md drop-shadow-md">
             {subtitle}
           </p>
-          
+
           <div className="w-full max-w-xs">
             <button
+              type="button"
               onClick={nextStep}
               className="w-full rounded-full bg-white py-3 text-center text-sm font-semibold text-black transition-transform active:scale-95 shadow-lg hover:bg-neutral-200"
             >

From 9d497115b6b9a6823a9a7a6e559ef211ee56c531 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Thu, 19 Mar 2026 14:28:07 -0300
Subject: [PATCH 09/17] refactor(onboarding): fix biome key errors and screen
 transition flicker

---
 apps/web/next-env.d.ts                        |  2 +-
 apps/web/package.json                         |  1 +
 apps/web/public/dictionaries/de-DE.json       |  2 +-
 apps/web/public/dictionaries/en-US.json       |  2 +-
 apps/web/public/dictionaries/es-ES.json       |  2 +-
 apps/web/public/dictionaries/fr-FR.json       |  2 +-
 apps/web/public/dictionaries/it-IT.json       |  2 +-
 apps/web/public/dictionaries/ja-JP.json       |  2 +-
 apps/web/public/dictionaries/pt-BR.json       |  2 +-
 apps/web/src/actions/auth/sign-in.ts          | 25 ++++-
 .../_components/onboarding-context.tsx        | 21 ++--
 .../_components/onboarding-stepper.tsx        | 44 ++++++---
 .../_components/onboarding-swiper.tsx         | 98 ++++++++++++++++---
 .../steps/onboarding-celebration.tsx          | 17 +++-
 .../_components/steps/onboarding-welcome.tsx  |  6 +-
 apps/web/src/app/[lang]/onboarding/page.tsx   | 28 +++++-
 pnpm-lock.yaml                                | 11 +--
 17 files changed, 210 insertions(+), 57 deletions(-)

diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 9edff1c7..c4b7818f 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/package.json b/apps/web/package.json
index 2ef22b5b..5bc5ab5e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -116,6 +116,7 @@
     "jsdom": "^27.4.0",
     "msw": "^2.12.7",
     "orval": "^8.5.3",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   }
diff --git a/apps/web/public/dictionaries/de-DE.json b/apps/web/public/dictionaries/de-DE.json
index f9922ef0..be0ea09e 100644
--- a/apps/web/public/dictionaries/de-DE.json
+++ b/apps/web/public/dictionaries/de-DE.json
@@ -914,7 +914,7 @@
     "swiper_finish_remaining": "Titel übrig",
     "celebration_title": "Alles bereit!",
     "celebration_subtitle": "Dein Profil ist fertig. Lass uns anfangen.",
-    "celebration_cta": "Zur Startseite",
+    "celebration_cta": "Zum Profil",
     "continue": "Weiter",
     "syncing": "Profil wird gespeichert..."
   }
diff --git a/apps/web/public/dictionaries/en-US.json b/apps/web/public/dictionaries/en-US.json
index b0a591a9..9d518f8e 100644
--- a/apps/web/public/dictionaries/en-US.json
+++ b/apps/web/public/dictionaries/en-US.json
@@ -916,7 +916,7 @@
     "swiper_finish_remaining": "titles to go",
     "celebration_title": "You're all set!",
     "celebration_subtitle": "Your profile is ready. Let's start tracking.",
-    "celebration_cta": "Go to Home",
+    "celebration_cta": "Go to Profile",
     "continue": "Continue",
     "syncing": "Saving profile..."
   }
diff --git a/apps/web/public/dictionaries/es-ES.json b/apps/web/public/dictionaries/es-ES.json
index e1bc7d8a..4d6f1d77 100644
--- a/apps/web/public/dictionaries/es-ES.json
+++ b/apps/web/public/dictionaries/es-ES.json
@@ -918,7 +918,7 @@
     "swiper_finish_remaining": "títulos faltan",
     "celebration_title": "¡Todo listo!",
     "celebration_subtitle": "Tu perfil está listo. Empecemos.",
-    "celebration_cta": "Ir a Inicio",
+    "celebration_cta": "Ir a Perfil",
     "continue": "Continuar",
     "syncing": "Guardando perfil..."
   }
diff --git a/apps/web/public/dictionaries/fr-FR.json b/apps/web/public/dictionaries/fr-FR.json
index 4e96eff9..480a88a9 100644
--- a/apps/web/public/dictionaries/fr-FR.json
+++ b/apps/web/public/dictionaries/fr-FR.json
@@ -920,7 +920,7 @@
     "swiper_finish_remaining": "titres restants",
     "celebration_title": "Tout est prêt !",
     "celebration_subtitle": "Votre profil est prêt. Commençons.",
-    "celebration_cta": "Aller à l'accueil",
+    "celebration_cta": "Aller au profil",
     "continue": "Continuer",
     "syncing": "Enregistrement du profil..."
   }
diff --git a/apps/web/public/dictionaries/it-IT.json b/apps/web/public/dictionaries/it-IT.json
index 8ff2deb6..399c42fb 100644
--- a/apps/web/public/dictionaries/it-IT.json
+++ b/apps/web/public/dictionaries/it-IT.json
@@ -917,7 +917,7 @@
     "swiper_finish_remaining": "titoli mancanti",
     "celebration_title": "Tutto pronto!",
     "celebration_subtitle": "Il tuo profilo è pronto. Iniziamo.",
-    "celebration_cta": "Vai alla Home",
+    "celebration_cta": "Vai al Profilo",
     "continue": "Continua",
     "syncing": "Salvataggio profilo..."
   }
diff --git a/apps/web/public/dictionaries/ja-JP.json b/apps/web/public/dictionaries/ja-JP.json
index 776cda2c..d06cd4ec 100644
--- a/apps/web/public/dictionaries/ja-JP.json
+++ b/apps/web/public/dictionaries/ja-JP.json
@@ -920,7 +920,7 @@
     "swiper_finish_remaining": "タイトル残り",
     "celebration_title": "準備完了！",
     "celebration_subtitle": "プロフィールが完成しました。始めましょう。",
-    "celebration_cta": "ホームへ",
+    "celebration_cta": "プロフィールへ",
     "continue": "続ける",
     "syncing": "プロフィールを保存中..."
   }
diff --git a/apps/web/public/dictionaries/pt-BR.json b/apps/web/public/dictionaries/pt-BR.json
index 2b7e64d1..b266c9ce 100644
--- a/apps/web/public/dictionaries/pt-BR.json
+++ b/apps/web/public/dictionaries/pt-BR.json
@@ -919,7 +919,7 @@
     "swiper_finish_remaining": "títulos faltando",
     "celebration_title": "Tudo pronto!",
     "celebration_subtitle": "Seu perfil está pronto. Vamos começar.",
-    "celebration_cta": "Ir para o Início",
+    "celebration_cta": "Ir para o Perfil",
     "continue": "Continuar",
     "syncing": "Salvando perfil..."
   }
diff --git a/apps/web/src/actions/auth/sign-in.ts b/apps/web/src/actions/auth/sign-in.ts
index 76b4f837..07ca9e3c 100644
--- a/apps/web/src/actions/auth/sign-in.ts
+++ b/apps/web/src/actions/auth/sign-in.ts
@@ -26,7 +26,28 @@ export async function signIn({ login, password, redirectTo }: SignInInput) {
 
   await createSession({ token })
 
-  if (redirectTo) {
-    redirect(redirectTo)
+  let finalRedirectTo = redirectTo
+
+  try {
+    // Import dynamically or ensure 'setAuthToken' and 'getMe' are available
+    const { setAuthToken } = await import('@/services/api-client')
+    const { getMe } = await import('@/api/users')
+    
+    setAuthToken(token)
+    const { data } = await getMe()
+    
+    if (data?.user && !data.user.displayName) {
+      if (redirectTo) {
+        const parts = redirectTo.split('/')
+        const lang = parts[1] || 'en-US'
+        finalRedirectTo = `/${lang}/onboarding`
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch user during sign in for onboarding check', error)
+  }
+
+  if (finalRedirectTo) {
+    redirect(finalRedirectTo)
   }
 }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index c110084f..7d960bb3 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -54,21 +54,24 @@ const OnboardingContext = createContext<OnboardingContextType | undefined>(
   undefined
 )
 
-const STORAGE_KEY = 'plotwist-onboarding-state'
-
+const getStorageKey = (username?: string) => `plotwist-onboarding-state-${username || 'guest'}`
 export function OnboardingProvider({
   children,
   dictionary,
+  username,
 }: {
   children: ReactNode
   dictionary?: Record<string, string>
+  username?: string
 }) {
   const router = useRouter()
   const [state, setState] = useState<OnboardingState>(defaultState)
   const [isLoaded, setIsLoaded] = useState(false)
 
+  const storageKey = getStorageKey(username)
+
   useEffect(() => {
-    const saved = localStorage.getItem(STORAGE_KEY)
+    const saved = localStorage.getItem(storageKey)
     if (saved) {
       try {
         const parsed = JSON.parse(saved)
@@ -79,12 +82,12 @@ export function OnboardingProvider({
       }
     }
     setIsLoaded(true)
-  }, [])
+  }, [storageKey])
 
   useEffect(() => {
     if (isLoaded) {
       localStorage.setItem(
-        STORAGE_KEY,
+        storageKey,
         JSON.stringify({
           ...state,
 
@@ -92,7 +95,7 @@ export function OnboardingProvider({
         })
       )
     }
-  }, [state, isLoaded])
+  }, [state, isLoaded, storageKey])
 
   const setUserName = useCallback((userName: string) => {
     setState(s => ({ ...s, userName }))
@@ -128,10 +131,10 @@ export function OnboardingProvider({
 
   const completeOnboarding = useCallback(
     (lang: string = 'en-US') => {
-      localStorage.setItem('plotwist-onboarding-complete', 'true')
-      router.push(`/${lang}/home`)
+      localStorage.setItem(`plotwist-onboarding-complete-${username || 'guest'}`, 'true')
+      router.push(`/${lang}/${username || 'home'}`)
     },
-    [router]
+    [router, username]
   )
 
   return (
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
index feaa83f1..b561fc6e 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -21,7 +21,7 @@ export function OnboardingStepper({ lang }: { lang: string }) {
   const isCelebrationScreen = currentStep === 5
 
   return (
-    <div className="relative flex min-h-screen w-full flex-col bg-background">
+    <div className={`relative flex min-h-screen w-full flex-col ${isWelcomeScreen ? 'bg-black' : 'bg-background'}`}>
       {!isWelcomeScreen && !isCelebrationScreen && (
         <header className="absolute inset-x-0 top-0 z-50 flex items-center justify-between px-6 py-6 md:px-12 w-full max-w-6xl mx-auto">
           <button
@@ -33,15 +33,35 @@ export function OnboardingStepper({ lang }: { lang: string }) {
             <ChevronLeft className="h-6 w-6" />
           </button>
 
-          <div className="flex flex-1 items-center justify-end gap-3 px-8 md:max-w-md ml-auto">
-            {Array.from({ length: TOTAL_STEPS }).map((_, i) => (
-              <div
-                key={i}
-                className={`h-2 flex-1 rounded-full ${
-                  i < currentStep ? 'bg-foreground' : 'bg-muted'
-                }`}
-              />
-            ))}
+          <div className="flex flex-1 items-center justify-end gap-2 px-8 md:max-w-md ml-auto">
+            {Array.from({ length: TOTAL_STEPS }).map((_, i) => {
+              const stepIndex = i + 1
+              const isActive = stepIndex === currentStep
+              const isCompleted = stepIndex < currentStep
+
+              return (
+                <motion.div
+                  key={stepIndex}
+                  layout
+                  className={`flex-1 rounded-full ${
+                    isCompleted
+                      ? 'bg-foreground'
+                      : isActive
+                        ? 'bg-foreground'
+                        : 'bg-muted'
+                  }`}
+                  animate={{
+                    height: isActive ? 6 : 4,
+                    opacity: isActive ? 1 : isCompleted ? 0.7 : 0.3,
+                  }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 500,
+                    damping: 30,
+                  }}
+                />
+              )
+            })}
           </div>
         </header>
       )}
@@ -52,9 +72,9 @@ export function OnboardingStepper({ lang }: { lang: string }) {
         <AnimatePresence mode="wait">
           <motion.div
             key={currentStep}
-            initial={{ opacity: 0, x: 20 }}
+            initial={{ opacity: 0, x: currentStep <= 1 ? 0 : 20 }}
             animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            exit={{ opacity: 0, x: currentStep === 0 ? 0 : -20 }}
             transition={{ duration: 0.3, ease: 'easeOut' }}
             className="flex flex-1 flex-col h-full"
           >
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index 759ff089..04bf0352 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -2,9 +2,9 @@
 
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { AnimatePresence, motion, type PanInfo } from 'framer-motion'
-import { Bookmark, Check, Eye, X as XIcon } from 'lucide-react'
+import { Bookmark, Check, Eye, Pointer, X as XIcon } from 'lucide-react'
 import Image from 'next/image'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
 import { tmdbImage } from '@/utils/tmdb/image'
 
@@ -233,11 +233,50 @@ function SwipePillOverlay({
   )
 }
 
-// ... existing code ...
 import type { Language } from '@/types/languages'
 import { useOnboarding } from './onboarding-context'
 
-// ... existing code ...
+function SwipeHintOverlay() {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="absolute inset-0 z-30 flex items-center justify-center pointer-events-none"
+    >
+      <motion.div
+        animate={{
+          scale: [1, 1.12, 1.06, 1],
+          x: [0, 0, 55, 0],
+          y: [0, -3, 0, 0],
+          rotate: [0, 0, -6, 0],
+        }}
+        transition={{
+          duration: 1.5,
+          ease: 'easeInOut',
+          times: [0, 0.2, 0.6, 1],
+          repeat: Infinity,
+          repeatDelay: 1,
+        }}
+        className="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 border border-white/30 backdrop-blur-md shadow-lg"
+      >
+        <motion.div
+          animate={{ opacity: [0.6, 0.9, 0.9, 0.6] }}
+          transition={{
+            duration: 1.5,
+            ease: 'easeInOut',
+            times: [0, 0.2, 0.6, 1],
+            repeat: Infinity,
+            repeatDelay: 1,
+          }}
+        >
+          <Pointer className="h-5 w-5 text-white" />
+        </motion.div>
+      </motion.div>
+    </motion.div>
+  )
+}
+
 export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
   const language = (lang as Language) || 'en-US'
   const {
@@ -266,6 +305,26 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
     initialOffset?: { x: number; y: number }
   } | null>(null)
 
+  // Drag hint state
+  const [showHint, setShowHint] = useState(false)
+  const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const startIdleTimer = useCallback(() => {
+    if (idleTimerRef.current) clearTimeout(idleTimerRef.current)
+    idleTimerRef.current = setTimeout(() => setShowHint(true), 2000)
+  }, [])
+
+  useEffect(() => {
+    const t = setTimeout(() => setShowHint(true), 1000)
+    return () => clearTimeout(t)
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (idleTimerRef.current) clearTimeout(idleTimerRef.current)
+    }
+  }, [])
+
   const { data, fetchNextPage, isFetching } = useInfiniteQuery({
     queryKey: [
       'onboarding-swiper-movies',
@@ -409,9 +468,8 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
         initialOffset: velocityInfo,
       })
 
-      // Extract the direction and item info
       const tmdbId = currentMovie.id
-      const mediaType = currentMovie.mediaType // We will add this mapping below
+      const mediaType = currentMovie.mediaType
 
       let status: 'WATCHED' | 'WATCHING' | 'WATCHLIST' | 'DROPPED' | null = null
 
@@ -524,11 +582,27 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           <SwipeCard
             key={currentMovie.id}
             movie={currentMovie}
-            onSwipe={handleSwipe}
-            onDirectionChange={handleDirectionChange}
+            onSwipe={(dir, vel) => {
+              setShowHint(false)
+              startIdleTimer()
+              handleSwipe(dir, vel)
+            }}
+            onDirectionChange={(dir, progress) => {
+              if (dir) {
+                setShowHint(false)
+                if (idleTimerRef.current) clearTimeout(idleTimerRef.current)
+              }
+              handleDirectionChange(dir, progress)
+            }}
           />
         )}
 
+        <AnimatePresence>
+          {showHint && !exitingCard && !swipeDirection && (
+            <SwipeHintOverlay key="swipe-hint" />
+          )}
+        </AnimatePresence>
+
         <AnimatePresence>
           {exitingCard && (
             <ExitCard
@@ -561,7 +635,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_watched || 'Já assisti'} (Cima)`}
         >
           <Check className="h-4 w-4 text-green-500" />
-          <span className="text-green-500 hidden sm:inline">
+          <span className="text-green-500">
             {dictionary?.swiper_watched || 'Já assisti'}
           </span>
         </button>
@@ -573,7 +647,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_watching || 'Assistindo'} (Baixo)`}
         >
           <Eye className="h-4 w-4 text-yellow-500" />
-          <span className="text-yellow-500 hidden sm:inline">
+          <span className="text-yellow-500">
             {dictionary?.swiper_watching || 'Assistindo'}
           </span>
         </button>
@@ -585,7 +659,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_want_to_watch || 'Quero assistir'} (Direita)`}
         >
           <Bookmark className="h-4 w-4 text-blue-500" />
-          <span className="text-blue-500 hidden sm:inline">
+          <span className="text-blue-500">
             {dictionary?.swiper_want_to_watch || 'Quero assistir'}
           </span>
         </button>
@@ -597,7 +671,7 @@ export const OnboardingSwiper = ({ lang }: OnboardingSwiperProps) => {
           title={`${dictionary?.swiper_skip || 'Pular'} (Esquerda)`}
         >
           <XIcon className="h-4 w-4 text-red-500" />
-          <span className="text-red-500 hidden sm:inline">
+          <span className="text-red-500">
             {dictionary?.swiper_skip || 'Pular'}
           </span>
         </button>
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
index 33bb759d..253cee57 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -6,7 +6,7 @@ import { usePutUserItem } from '@/api/user-items'
 import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingCelebration({ lang }: { lang: string }) {
-  const { completeOnboarding, dictionary, swipedItems } = useOnboarding()
+  const { completeOnboarding, dictionary, swipedItems, userName } = useOnboarding()
   const putUserItem = usePutUserItem()
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -14,7 +14,7 @@ export function OnboardingCelebration({ lang }: { lang: string }) {
     try {
       setIsSubmitting(true)
 
-      const promises = swipedItems.map(item =>
+      const promises: Promise<unknown>[] = swipedItems.map(item =>
         putUserItem.mutateAsync({
           data: {
             mediaType: item.mediaType,
@@ -24,9 +24,20 @@ export function OnboardingCelebration({ lang }: { lang: string }) {
         })
       )
 
+      if (userName) {
+        promises.push(
+          import('@/services/api-client').then(({ customFetch }) =>
+            customFetch('/user', {
+              method: 'PATCH',
+              body: JSON.stringify({ displayName: userName }),
+            })
+          )
+        )
+      }
+
       await Promise.allSettled(promises)
     } catch (e) {
-      console.error('Failed to sync swiped items', e)
+      console.error('Failed to sync onboarding data', e)
     } finally {
       setIsSubmitting(false)
       completeOnboarding(lang)
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
index 83820851..71456e91 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -51,13 +51,13 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
         } as React.CSSProperties
       }
     >
-      {[...images, ...images].map((path, i) => (
+      {[...images.map((p: string) => ({ path: p, copy: 'a' })), ...images.map((p: string) => ({ path: p, copy: 'b' }))].map((item: { path: string; copy: string }) => (
         <div
-          key={`${path}-${i}`}
+          key={`${item.path}-${item.copy}`}
           className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl"
         >
           <Image
-            src={tmdbImage(path as string, 'w500')}
+            src={tmdbImage(item.path as string, 'w500')}
             alt=""
             fill
             className="object-cover"
diff --git a/apps/web/src/app/[lang]/onboarding/page.tsx b/apps/web/src/app/[lang]/onboarding/page.tsx
index 4354eb2c..cb05b248 100644
--- a/apps/web/src/app/[lang]/onboarding/page.tsx
+++ b/apps/web/src/app/[lang]/onboarding/page.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
 import type { PageProps } from '@/types/languages'
 import { getDictionary } from '@/utils/dictionaries'
+import { verifySession } from '@/app/lib/dal'
 import { OnboardingProvider } from './_components/onboarding-context'
 import { OnboardingStepper } from './_components/onboarding-stepper'
 
@@ -12,9 +14,33 @@ export const metadata: Metadata = {
 const OnboardingPage = async (props: PageProps) => {
   const { lang } = await props.params
   const dictionary = await getDictionary(lang)
+  const session = await verifySession()
+
+  if (!session) {
+    redirect(`/${lang}/sign-in`)
+  }
+
+  if (session.user.displayName) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4 w-full">
+        <h1 className="text-2xl font-bold mb-4">
+          {dictionary.onboarding.celebration_title || 'You’re all set!'}
+        </h1>
+        <p className="text-muted-foreground mb-8">
+          {dictionary.onboarding.celebration_subtitle || 'Your profile is ready. Let’s start tracking.'}
+        </p>
+        <a 
+          href={`/${lang}/${session.user.username}`} 
+          className="px-8 py-3 bg-foreground text-background rounded-full font-semibold transition-transform active:scale-95"
+        >
+          {dictionary.onboarding.celebration_cta || 'Go to Profile'}
+        </a>
+      </div>
+    )
+  }
 
   return (
-    <OnboardingProvider dictionary={dictionary.onboarding}>
+    <OnboardingProvider dictionary={dictionary.onboarding} username={session.user.username}>
       <OnboardingStepper lang={lang} />
     </OnboardingProvider>
   )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6164f348..f5b30627 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -500,7 +500,7 @@ importers:
         version: 20.3.1(@types/node@25.3.0)
       tailwind-variants:
         specifier: ^3.2.2
-        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1)
+        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))
       uuid:
         specifier: ^13.0.0
         version: 13.0.0
@@ -568,6 +568,9 @@ importers:
       orval:
         specifier: ^8.5.3
         version: 8.5.3(@faker-js/faker@10.3.0)(prettier@3.8.1)(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -16903,12 +16906,6 @@ snapshots:
     optionalDependencies:
       tailwind-merge: 3.5.0
 
-  tailwind-variants@3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1):
-    dependencies:
-      tailwindcss: 4.2.1
-    optionalDependencies:
-      tailwind-merge: 3.5.0
-
   tailwindcss-animate@1.0.7(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)

From bed31e0386fceead42aeb63da0abe1e48dfe4e92 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:24:29 -0300
Subject: [PATCH 10/17] fix(auth): extract language from cookies and apply
 unconditional redirect

---
 apps/web/src/actions/auth/sign-in.ts | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/actions/auth/sign-in.ts b/apps/web/src/actions/auth/sign-in.ts
index 07ca9e3c..f5edcc9b 100644
--- a/apps/web/src/actions/auth/sign-in.ts
+++ b/apps/web/src/actions/auth/sign-in.ts
@@ -1,8 +1,11 @@
 'use server'
 
+import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { postLogin } from '@/api/auth'
+import { getMe } from '@/api/users'
 import { createSession } from '@/app/lib/session'
+import { setAuthToken } from '@/services/api-client'
 
 type SignInInput = {
   login: string
@@ -29,22 +32,22 @@ export async function signIn({ login, password, redirectTo }: SignInInput) {
   let finalRedirectTo = redirectTo
 
   try {
-    // Import dynamically or ensure 'setAuthToken' and 'getMe' are available
-    const { setAuthToken } = await import('@/services/api-client')
-    const { getMe } = await import('@/api/users')
-    
     setAuthToken(token)
     const { data } = await getMe()
-    
+
     if (data?.user && !data.user.displayName) {
-      if (redirectTo) {
-        const parts = redirectTo.split('/')
-        const lang = parts[1] || 'en-US'
-        finalRedirectTo = `/${lang}/onboarding`
-      }
+      const cookieStore = await cookies()
+      const lang =
+        cookieStore.get('NEXT_LOCALE')?.value ||
+        cookieStore.get('i18next')?.value ||
+        'en-US'
+      finalRedirectTo = `/${lang}/onboarding`
     }
   } catch (error) {
-    console.error('Failed to fetch user during sign in for onboarding check', error)
+    console.error(
+      'Failed to fetch user during sign in for onboarding check',
+      error
+    )
   }
 
   if (finalRedirectTo) {

From 0f2b372dcf09e71316d041367a42be378496d148 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:24:30 -0300
Subject: [PATCH 11/17] refactor(layout): evaluate onboarding path in server
 component

---
 apps/web/src/app/[lang]/layout.tsx         | 9 ++++++---
 apps/web/src/components/layout-wrapper.tsx | 8 ++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/[lang]/layout.tsx b/apps/web/src/app/[lang]/layout.tsx
index 7943cf27..7331e9f5 100644
--- a/apps/web/src/app/[lang]/layout.tsx
+++ b/apps/web/src/app/[lang]/layout.tsx
@@ -1,3 +1,4 @@
+import { headers } from 'next/headers'
 import { Link } from 'next-view-transitions'
 import type { GetUserPreferences200 } from '@/api/endpoints.schemas'
 import { getUserPreferences } from '@/api/users'
@@ -20,9 +21,6 @@ export async function generateStaticParams() {
   return SUPPORTED_LANGUAGES.map(lang => ({ lang: lang.value }))
 }
 
-// Note: This layout is automatically dynamic due to cookies() usage in verifySession()
-// Removed explicit 'force-dynamic' to allow child pages to use ISR/static when possible
-
 type RootLayoutProps = {
   children: React.ReactNode
   params: Promise<{ lang: string }>
@@ -45,6 +43,10 @@ export default async function RootLayout({
     userPreferences = data?.userPreferences ?? null
   }
 
+  const headersList = await headers()
+  const pathname = headersList.get('x-current-path') || ''
+  const isOnboarding = pathname.includes('/onboarding')
+
   return (
     <ThemeProvider
       attribute="class"
@@ -61,6 +63,7 @@ export default async function RootLayout({
                 <LayoutWrapper
                   header={<Header />}
                   footer={<Footer dictionary={dictionary} language={lang} />}
+                  isOnboarding={isOnboarding}
                   proBadge={
                     session?.user.subscriptionType !== 'PRO' ? (
                       <Link
diff --git a/apps/web/src/components/layout-wrapper.tsx b/apps/web/src/components/layout-wrapper.tsx
index 5db6e796..b0c3ced4 100644
--- a/apps/web/src/components/layout-wrapper.tsx
+++ b/apps/web/src/components/layout-wrapper.tsx
@@ -1,20 +1,16 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-
 export function LayoutWrapper({
   header,
   footer,
   children,
   proBadge,
+  isOnboarding,
 }: {
   header: React.ReactNode
   footer: React.ReactNode
   children: React.ReactNode
   proBadge?: React.ReactNode
+  isOnboarding?: boolean
 }) {
-  const pathname = usePathname()
-  const isOnboarding = pathname?.includes('/onboarding')
 
   return (
     <>

From 7948b1751773d6f7623c28685c660ca0056fa345 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:24:30 -0300
Subject: [PATCH 12/17] fix(onboarding): adjust step cap, window fallback, and
 cleanup unused dependencies

---
 apps/web/package.json                         |  3 ---
 .../_components/onboarding-context.tsx        |  2 +-
 .../_components/onboarding-stepper.tsx        |  8 ++++---
 .../_components/onboarding-swiper.tsx         | 21 +++++++++++--------
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 5bc5ab5e..2210e35e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,7 +46,6 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@react-spring/web": "^10.0.3",
     "@stripe/stripe-js": "^8.6.0",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-table": "^8.21.3",
@@ -84,7 +83,6 @@
     "react-intersection-observer": "^10.0.0",
     "react-masonry-css": "^1.0.16",
     "react-simple-maps": "^3.0.0",
-    "react-tinder-card": "^1.6.4",
     "react-tooltip": "^5.30.0",
     "recharts": "^3.6.0",
     "sharp": "^0.34.5",
@@ -116,7 +114,6 @@
     "jsdom": "^27.4.0",
     "msw": "^2.12.7",
     "orval": "^8.5.3",
-    "tailwindcss": "^3.4.17",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index 7d960bb3..de538f25 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -91,7 +91,7 @@ export function OnboardingProvider({
         JSON.stringify({
           ...state,
 
-          currentStep: state.currentStep > 4 ? 4 : state.currentStep,
+          currentStep: state.currentStep > 5 ? 5 : state.currentStep,
         })
       )
     }
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
index b561fc6e..1bb52854 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-stepper.tsx
@@ -10,18 +10,20 @@ import { OnboardingGenres } from './steps/onboarding-genres'
 import { OnboardingName } from './steps/onboarding-name'
 import { OnboardingWelcome } from './steps/onboarding-welcome'
 
-const TOTAL_STEPS = 4 // Steps 1-4 (Welcome is 0, Celebration is 5)
+const TOTAL_STEPS = 4
 
 export function OnboardingStepper({ lang }: { lang: string }) {
   const { currentStep, prevStep, isLoaded } = useOnboarding()
 
-  if (!isLoaded) return null // Prevent hydration mismatch
+  if (!isLoaded) return null
 
   const isWelcomeScreen = currentStep === 0
   const isCelebrationScreen = currentStep === 5
 
   return (
-    <div className={`relative flex min-h-screen w-full flex-col ${isWelcomeScreen ? 'bg-black' : 'bg-background'}`}>
+    <div
+      className={`relative flex min-h-screen w-full flex-col ${isWelcomeScreen ? 'bg-black' : 'bg-background'}`}
+    >
       {!isWelcomeScreen && !isCelebrationScreen && (
         <header className="absolute inset-x-0 top-0 z-50 flex items-center justify-between px-6 py-6 md:px-12 w-full max-w-6xl mx-auto">
           <button
diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
index 04bf0352..816d2162 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-swiper.tsx
@@ -6,7 +6,9 @@ import { Bookmark, Check, Eye, Pointer, X as XIcon } from 'lucide-react'
 import Image from 'next/image'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { tmdb } from '@/services/tmdb'
+import type { Language } from '@/types/languages'
 import { tmdbImage } from '@/utils/tmdb/image'
+import { useOnboarding } from './onboarding-context'
 
 type SwipeDirection = 'left' | 'right' | 'up' | 'down' | null
 
@@ -54,28 +56,28 @@ function getSwipeConfig(
     case 'right':
       return {
         icon: Bookmark,
-        label: dictionary?.swiper_want_to_watch || 'Quero assistir',
+        label: dictionary?.swiper_want_to_watch || 'Want to watch',
         colorClass: 'text-blue-500',
         bgClass: 'border-blue-500/60',
       }
     case 'left':
       return {
         icon: XIcon,
-        label: dictionary?.swiper_skip || 'Pular',
+        label: dictionary?.swiper_skip || 'Skip',
         colorClass: 'text-red-400',
         bgClass: 'border-red-400/60',
       }
     case 'up':
       return {
         icon: Check,
-        label: dictionary?.swiper_watched || 'Já assisti',
+        label: dictionary?.swiper_watched || 'Watched',
         colorClass: 'text-green-500',
         bgClass: 'border-green-500/60',
       }
     case 'down':
       return {
         icon: Eye,
-        label: dictionary?.swiper_watching || 'Assistindo',
+        label: dictionary?.swiper_watching || 'Watching',
         colorClass: 'text-yellow-500',
         bgClass: 'border-yellow-500/60',
       }
@@ -144,7 +146,7 @@ function SwipeCard({
           />
         ) : (
           <div className="flex h-full w-full items-center justify-center bg-muted">
-            <span className="text-muted-foreground text-sm">Sem poster</span>
+            <span className="text-muted-foreground text-sm">No poster</span>
           </div>
         )}
       </div>
@@ -174,7 +176,11 @@ function ExitCard({
       initial={{
         x: initialOffset?.x || 0,
         y: initialOffset?.y || 0,
-        rotate: initialOffset ? (initialOffset.x / window.innerWidth) * 50 : 0,
+        rotate: initialOffset
+          ? (initialOffset.x /
+              (typeof window !== 'undefined' ? window.innerWidth : 375)) *
+            50
+          : 0,
         opacity: 1,
       }}
       animate={{
@@ -233,9 +239,6 @@ function SwipePillOverlay({
   )
 }
 
-import type { Language } from '@/types/languages'
-import { useOnboarding } from './onboarding-context'
-
 function SwipeHintOverlay() {
   return (
     <motion.div

From 08cdeaef12675c428d39ec85da1275e9d1757935 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:24:31 -0300
Subject: [PATCH 13/17] feat(i18n): update onboarding dictionaries and
 celebration copy

---
 apps/web/public/dictionaries/de-DE.json     |  2 +-
 apps/web/public/dictionaries/en-US.json     |  2 +-
 apps/web/public/dictionaries/es-ES.json     |  2 +-
 apps/web/public/dictionaries/fr-FR.json     |  2 +-
 apps/web/public/dictionaries/it-IT.json     |  2 +-
 apps/web/public/dictionaries/ja-JP.json     |  2 +-
 apps/web/public/dictionaries/pt-BR.json     |  2 +-
 apps/web/src/app/[lang]/onboarding/page.tsx | 16 ++++++++++------
 8 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/web/public/dictionaries/de-DE.json b/apps/web/public/dictionaries/de-DE.json
index be0ea09e..b42827ec 100644
--- a/apps/web/public/dictionaries/de-DE.json
+++ b/apps/web/public/dictionaries/de-DE.json
@@ -914,7 +914,7 @@
     "swiper_finish_remaining": "Titel übrig",
     "celebration_title": "Alles bereit!",
     "celebration_subtitle": "Dein Profil ist fertig. Lass uns anfangen.",
-    "celebration_cta": "Zum Profil",
+    "go_to_profile": "Zum Profil",
     "continue": "Weiter",
     "syncing": "Profil wird gespeichert..."
   }
diff --git a/apps/web/public/dictionaries/en-US.json b/apps/web/public/dictionaries/en-US.json
index 9d518f8e..88afd901 100644
--- a/apps/web/public/dictionaries/en-US.json
+++ b/apps/web/public/dictionaries/en-US.json
@@ -916,7 +916,7 @@
     "swiper_finish_remaining": "titles to go",
     "celebration_title": "You're all set!",
     "celebration_subtitle": "Your profile is ready. Let's start tracking.",
-    "celebration_cta": "Go to Profile",
+    "go_to_profile": "Go to Profile",
     "continue": "Continue",
     "syncing": "Saving profile..."
   }
diff --git a/apps/web/public/dictionaries/es-ES.json b/apps/web/public/dictionaries/es-ES.json
index 4d6f1d77..93d25c20 100644
--- a/apps/web/public/dictionaries/es-ES.json
+++ b/apps/web/public/dictionaries/es-ES.json
@@ -918,7 +918,7 @@
     "swiper_finish_remaining": "títulos faltan",
     "celebration_title": "¡Todo listo!",
     "celebration_subtitle": "Tu perfil está listo. Empecemos.",
-    "celebration_cta": "Ir a Perfil",
+    "go_to_profile": "Ir a Perfil",
     "continue": "Continuar",
     "syncing": "Guardando perfil..."
   }
diff --git a/apps/web/public/dictionaries/fr-FR.json b/apps/web/public/dictionaries/fr-FR.json
index 480a88a9..557bef8e 100644
--- a/apps/web/public/dictionaries/fr-FR.json
+++ b/apps/web/public/dictionaries/fr-FR.json
@@ -920,7 +920,7 @@
     "swiper_finish_remaining": "titres restants",
     "celebration_title": "Tout est prêt !",
     "celebration_subtitle": "Votre profil est prêt. Commençons.",
-    "celebration_cta": "Aller au profil",
+    "go_to_profile": "Aller au profil",
     "continue": "Continuer",
     "syncing": "Enregistrement du profil..."
   }
diff --git a/apps/web/public/dictionaries/it-IT.json b/apps/web/public/dictionaries/it-IT.json
index 399c42fb..5f7945c9 100644
--- a/apps/web/public/dictionaries/it-IT.json
+++ b/apps/web/public/dictionaries/it-IT.json
@@ -917,7 +917,7 @@
     "swiper_finish_remaining": "titoli mancanti",
     "celebration_title": "Tutto pronto!",
     "celebration_subtitle": "Il tuo profilo è pronto. Iniziamo.",
-    "celebration_cta": "Vai al Profilo",
+    "go_to_profile": "Vai al Profilo",
     "continue": "Continua",
     "syncing": "Salvataggio profilo..."
   }
diff --git a/apps/web/public/dictionaries/ja-JP.json b/apps/web/public/dictionaries/ja-JP.json
index d06cd4ec..b0a174ed 100644
--- a/apps/web/public/dictionaries/ja-JP.json
+++ b/apps/web/public/dictionaries/ja-JP.json
@@ -920,7 +920,7 @@
     "swiper_finish_remaining": "タイトル残り",
     "celebration_title": "準備完了！",
     "celebration_subtitle": "プロフィールが完成しました。始めましょう。",
-    "celebration_cta": "プロフィールへ",
+    "go_to_profile": "プロフィールへ",
     "continue": "続ける",
     "syncing": "プロフィールを保存中..."
   }
diff --git a/apps/web/public/dictionaries/pt-BR.json b/apps/web/public/dictionaries/pt-BR.json
index b266c9ce..c680f46e 100644
--- a/apps/web/public/dictionaries/pt-BR.json
+++ b/apps/web/public/dictionaries/pt-BR.json
@@ -919,7 +919,7 @@
     "swiper_finish_remaining": "títulos faltando",
     "celebration_title": "Tudo pronto!",
     "celebration_subtitle": "Seu perfil está pronto. Vamos começar.",
-    "celebration_cta": "Ir para o Perfil",
+    "go_to_profile": "Ir para o Perfil",
     "continue": "Continuar",
     "syncing": "Salvando perfil..."
   }
diff --git a/apps/web/src/app/[lang]/onboarding/page.tsx b/apps/web/src/app/[lang]/onboarding/page.tsx
index cb05b248..2ed6bea2 100644
--- a/apps/web/src/app/[lang]/onboarding/page.tsx
+++ b/apps/web/src/app/[lang]/onboarding/page.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
+import { verifySession } from '@/app/lib/dal'
 import type { PageProps } from '@/types/languages'
 import { getDictionary } from '@/utils/dictionaries'
-import { verifySession } from '@/app/lib/dal'
 import { OnboardingProvider } from './_components/onboarding-context'
 import { OnboardingStepper } from './_components/onboarding-stepper'
 
@@ -27,20 +27,24 @@ const OnboardingPage = async (props: PageProps) => {
           {dictionary.onboarding.celebration_title || 'You’re all set!'}
         </h1>
         <p className="text-muted-foreground mb-8">
-          {dictionary.onboarding.celebration_subtitle || 'Your profile is ready. Let’s start tracking.'}
+          {dictionary.onboarding.celebration_subtitle ||
+            'Your profile is ready. Let’s start tracking.'}
         </p>
-        <a 
-          href={`/${lang}/${session.user.username}`} 
+        <a
+          href={`/${lang}/${session.user.username}`}
           className="px-8 py-3 bg-foreground text-background rounded-full font-semibold transition-transform active:scale-95"
         >
-          {dictionary.onboarding.celebration_cta || 'Go to Profile'}
+          {dictionary.onboarding.go_to_profile}
         </a>
       </div>
     )
   }
 
   return (
-    <OnboardingProvider dictionary={dictionary.onboarding} username={session.user.username}>
+    <OnboardingProvider
+      dictionary={dictionary.onboarding}
+      username={session.user.username}
+    >
       <OnboardingStepper lang={lang} />
     </OnboardingProvider>
   )

From aeb8cc3f6f82856d227b3b11269ad02eeef7d125 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:30:00 -0300
Subject: [PATCH 14/17] fix: lint biome

---
 .../[lang]/onboarding/_components/onboarding-context.tsx  | 8 ++++++--
 .../_components/steps/onboarding-celebration.tsx          | 3 ++-
 .../onboarding/_components/steps/onboarding-welcome.tsx   | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
index de538f25..9344fa5b 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/onboarding-context.tsx
@@ -54,7 +54,8 @@ const OnboardingContext = createContext<OnboardingContextType | undefined>(
   undefined
 )
 
-const getStorageKey = (username?: string) => `plotwist-onboarding-state-${username || 'guest'}`
+const getStorageKey = (username?: string) =>
+  `plotwist-onboarding-state-${username || 'guest'}`
 export function OnboardingProvider({
   children,
   dictionary,
@@ -131,7 +132,10 @@ export function OnboardingProvider({
 
   const completeOnboarding = useCallback(
     (lang: string = 'en-US') => {
-      localStorage.setItem(`plotwist-onboarding-complete-${username || 'guest'}`, 'true')
+      localStorage.setItem(
+        `plotwist-onboarding-complete-${username || 'guest'}`,
+        'true'
+      )
       router.push(`/${lang}/${username || 'home'}`)
     },
     [router, username]
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
index 253cee57..ff3d4f04 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-celebration.tsx
@@ -6,7 +6,8 @@ import { usePutUserItem } from '@/api/user-items'
 import { useOnboarding } from '../onboarding-context'
 
 export function OnboardingCelebration({ lang }: { lang: string }) {
-  const { completeOnboarding, dictionary, swipedItems, userName } = useOnboarding()
+  const { completeOnboarding, dictionary, swipedItems, userName } =
+    useOnboarding()
   const putUserItem = usePutUserItem()
   const [isSubmitting, setIsSubmitting] = useState(false)
 
diff --git a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
index 71456e91..1d36e5c5 100644
--- a/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
+++ b/apps/web/src/app/[lang]/onboarding/_components/steps/onboarding-welcome.tsx
@@ -51,7 +51,10 @@ export function OnboardingWelcome({ lang }: { lang: string }) {
         } as React.CSSProperties
       }
     >
-      {[...images.map((p: string) => ({ path: p, copy: 'a' })), ...images.map((p: string) => ({ path: p, copy: 'b' }))].map((item: { path: string; copy: string }) => (
+      {[
+        ...images.map((p: string) => ({ path: p, copy: 'a' })),
+        ...images.map((p: string) => ({ path: p, copy: 'b' })),
+      ].map((item: { path: string; copy: string }) => (
         <div
           key={`${item.path}-${item.copy}`}
           className="relative aspect-[2/3] w-full overflow-hidden rounded-2xl bg-neutral-800 shadow-xl"

From 70e11e60dc5397b0ccb474b9008a5e3c16987dbf Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:31:06 -0300
Subject: [PATCH 15/17] fix: pnpm lock

---
 pnpm-lock.yaml | 100 ++++---------------------------------------------
 1 file changed, 7 insertions(+), 93 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5b30627..2caada0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -363,9 +363,6 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.2.8
         version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@react-spring/web':
-        specifier: ^10.0.3
-        version: 10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@stripe/stripe-js':
         specifier: ^8.6.0
         version: 8.8.0
@@ -477,9 +474,6 @@ importers:
       react-simple-maps:
         specifier: ^3.0.0
         version: 3.0.0(prop-types@15.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      react-tinder-card:
-        specifier: ^1.6.4
-        version: 1.6.4(@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       react-tooltip:
         specifier: ^5.30.0
         version: 5.30.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -500,7 +494,7 @@ importers:
         version: 20.3.1(@types/node@25.3.0)
       tailwind-variants:
         specifier: ^3.2.2
-        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))
+        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1)
       uuid:
         specifier: ^13.0.0
         version: 13.0.0
@@ -568,9 +562,6 @@ importers:
       orval:
         specifier: ^8.5.3
         version: 8.5.3(@faker-js/faker@10.3.0)(prettier@3.8.1)(typescript@5.9.3)
-      tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -3702,33 +3693,6 @@ packages:
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
-  '@react-spring/animated@10.0.3':
-    resolution: {integrity: sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@react-spring/core@10.0.3':
-    resolution: {integrity: sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@react-spring/rafz@10.0.3':
-    resolution: {integrity: sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==}
-
-  '@react-spring/shared@10.0.3':
-    resolution: {integrity: sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  '@react-spring/types@10.0.3':
-    resolution: {integrity: sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==}
-
-  '@react-spring/web@10.0.3':
-    resolution: {integrity: sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   '@reduxjs/toolkit@2.11.2':
     resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
     peerDependencies:
@@ -7082,9 +7046,6 @@ packages:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  p-sleep@1.1.0:
-    resolution: {integrity: sha512-bwP3GKZirBUYMtiUuBrheLUQdRXVeE/pmHOaLpNJzNfAD4b5AjDn6l823brXcQFade4G/g7GMNQ3KV86E8EaEw==}
-
   pac-proxy-agent@7.2.0:
     resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
     engines: {node: '>= 14'}
@@ -7501,18 +7462,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-tinder-card@1.6.4:
-    resolution: {integrity: sha512-IC6YXoBZ+51jm7XsT8i+8G/ov8rvAob+kBRdp9unQyjsLc7jmuYb1cNfu95Q3mdFDgwE0AzTIyl1o2Klm61+aQ==}
-    peerDependencies:
-      '@react-spring/native': ^9.5.5
-      '@react-spring/web': ^9.5.5
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@react-spring/native':
-        optional: true
-      '@react-spring/web':
-        optional: true
-
   react-tooltip@5.30.0:
     resolution: {integrity: sha512-Yn8PfbgQ/wmqnL7oBpz1QiDaLKrzZMdSUUdk7nVeGTwzbxCAJiJzR4VSYW+eIO42F1INt57sPUmpgKv0KwJKtg==}
     peerDependencies:
@@ -12078,38 +12027,6 @@ snapshots:
     dependencies:
       react: 19.2.4
 
-  '@react-spring/animated@10.0.3(react@19.2.4)':
-    dependencies:
-      '@react-spring/shared': 10.0.3(react@19.2.4)
-      '@react-spring/types': 10.0.3
-      react: 19.2.4
-
-  '@react-spring/core@10.0.3(react@19.2.4)':
-    dependencies:
-      '@react-spring/animated': 10.0.3(react@19.2.4)
-      '@react-spring/shared': 10.0.3(react@19.2.4)
-      '@react-spring/types': 10.0.3
-      react: 19.2.4
-
-  '@react-spring/rafz@10.0.3': {}
-
-  '@react-spring/shared@10.0.3(react@19.2.4)':
-    dependencies:
-      '@react-spring/rafz': 10.0.3
-      '@react-spring/types': 10.0.3
-      react: 19.2.4
-
-  '@react-spring/types@10.0.3': {}
-
-  '@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@react-spring/animated': 10.0.3(react@19.2.4)
-      '@react-spring/core': 10.0.3(react@19.2.4)
-      '@react-spring/shared': 10.0.3(react@19.2.4)
-      '@react-spring/types': 10.0.3
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-
   '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.4)(redux@5.0.1))(react@19.2.4)':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -15807,8 +15724,6 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
-  p-sleep@1.1.0: {}
-
   pac-proxy-agent@7.2.0:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
@@ -16295,13 +16210,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  react-tinder-card@1.6.4(@react-spring/web@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
-    dependencies:
-      p-sleep: 1.1.0
-      react: 19.2.4
-    optionalDependencies:
-      '@react-spring/web': 10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-
   react-tooltip@5.30.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@floating-ui/dom': 1.7.5
@@ -16906,6 +16814,12 @@ snapshots:
     optionalDependencies:
       tailwind-merge: 3.5.0
 
+  tailwind-variants@3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1):
+    dependencies:
+      tailwindcss: 4.2.1
+    optionalDependencies:
+      tailwind-merge: 3.5.0
+
   tailwindcss-animate@1.0.7(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)

From ccdf74e099f436bc1fb1fe9278eff9517759be52 Mon Sep 17 00:00:00 2001
From: LuizGarbini <garbasneto@gmail.com>
Date: Tue, 24 Mar 2026 22:59:05 -0300
Subject: [PATCH 16/17] fix: tailwind-version

---
 apps/web/package.json |   1 +
 pnpm-lock.yaml        | 141 +++++++++++++++++++++---------------------
 2 files changed, 70 insertions(+), 72 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 2210e35e..7316e7cc 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -114,6 +114,7 @@
     "jsdom": "^27.4.0",
     "msw": "^2.12.7",
     "orval": "^8.5.3",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2caada0b..f4f863da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -254,10 +254,10 @@ importers:
         version: 1.5.9(@swc/core@1.15.13)(rollup@4.59.0)
       vite-tsconfig-paths:
         specifier: ^6.0.3
-        version: 6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))
       vitest:
         specifier: ^4.0.16
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
       zod:
         specifier: ^4.3.5
         version: 4.3.6
@@ -494,7 +494,7 @@ importers:
         version: 20.3.1(@types/node@25.3.0)
       tailwind-variants:
         specifier: ^3.2.2
-        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1)
+        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2))
       uuid:
         specifier: ^13.0.0
         version: 13.0.0
@@ -540,7 +540,7 @@ importers:
         version: 3.0.6
       '@vitejs/plugin-react':
         specifier: ^5.1.2
-        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/coverage-istanbul':
         specifier: ^4.0.16
         version: 4.0.18(vitest@4.0.18)
@@ -562,12 +562,15 @@ importers:
       orval:
         specifier: ^8.5.3
         version: 8.5.3(@faker-js/faker@10.3.0)(prettier@3.8.1)(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^3.4.19
+        version: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
       vitest:
         specifier: ^4.0.16
-        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+        version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   packages/typescript-config: {}
 
@@ -6377,74 +6380,74 @@ packages:
   light-my-request@6.6.0:
     resolution: {integrity: sha512-CHYbu8RtboSIoVsHZ6Ye4cj4Aw/yg2oAFimlF7mNvfDV192LR7nDiKtSIfCuLT7KokPSTn/9kfVLm5OGN0A28A==}
 
-  lightningcss-android-arm64@1.31.1:
-    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.31.1:
-    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.31.1:
-    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.31.1:
-    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.31.1:
-    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.31.1:
-    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.31.1:
-    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.31.1:
-    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.31.1:
-    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.31.1:
-    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.31.1:
-    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.31.1:
-    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
   lilconfig@3.1.3:
@@ -12957,7 +12960,7 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@babel/core': 7.29.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
@@ -12965,7 +12968,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.3
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -12981,7 +12984,7 @@ snapshots:
       magicast: 0.5.2
       obug: 2.1.1
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -12997,7 +13000,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/expect@4.0.18':
     dependencies:
@@ -13008,14 +13011,14 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
+  '@vitest/mocker@4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 4.0.18
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
       msw: 2.12.10(@types/node@25.3.0)(typescript@5.9.3)
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/pretty-format@4.0.18':
     dependencies:
@@ -13043,7 +13046,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@4.0.18':
     dependencies:
@@ -14917,54 +14920,54 @@ snapshots:
       process-warning: 4.0.1
       set-cookie-parser: 2.7.2
 
-  lightningcss-android-arm64@1.31.1:
+  lightningcss-android-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-arm64@1.31.1:
+  lightningcss-darwin-arm64@1.32.0:
     optional: true
 
-  lightningcss-darwin-x64@1.31.1:
+  lightningcss-darwin-x64@1.32.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.31.1:
+  lightningcss-freebsd-x64@1.32.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.31.1:
+  lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.31.1:
+  lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.31.1:
+  lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.31.1:
+  lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.31.1:
+  lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.31.1:
+  lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.31.1:
+  lightningcss-win32-x64-msvc@1.32.0:
     optional: true
 
-  lightningcss@1.31.1:
+  lightningcss@1.32.0:
     dependencies:
       detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-android-arm64: 1.31.1
-      lightningcss-darwin-arm64: 1.31.1
-      lightningcss-darwin-x64: 1.31.1
-      lightningcss-freebsd-x64: 1.31.1
-      lightningcss-linux-arm-gnueabihf: 1.31.1
-      lightningcss-linux-arm64-gnu: 1.31.1
-      lightningcss-linux-arm64-musl: 1.31.1
-      lightningcss-linux-x64-gnu: 1.31.1
-      lightningcss-linux-x64-musl: 1.31.1
-      lightningcss-win32-arm64-msvc: 1.31.1
-      lightningcss-win32-x64-msvc: 1.31.1
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
     optional: true
 
   lilconfig@3.1.3: {}
@@ -16814,12 +16817,6 @@ snapshots:
     optionalDependencies:
       tailwind-merge: 3.5.0
 
-  tailwind-variants@3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.1):
-    dependencies:
-      tailwindcss: 4.2.1
-    optionalDependencies:
-      tailwind-merge: 3.5.0
-
   tailwindcss-animate@1.0.7(tailwindcss@3.4.19(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       tailwindcss: 3.4.19(tsx@4.21.0)(yaml@2.8.2)
@@ -17261,17 +17258,17 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)):
+  vite-tsconfig-paths@6.1.1(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.9.3)
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2):
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -17283,14 +17280,14 @@ snapshots:
       '@types/node': 25.3.0
       fsevents: 2.3.3
       jiti: 2.6.1
-      lightningcss: 1.31.1
+      lightningcss: 1.32.0
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2):
+  vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@25.3.0)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.32.0)(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
+      '@vitest/mocker': 4.0.18(msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/pretty-format': 4.0.18
       '@vitest/runner': 4.0.18
       '@vitest/snapshot': 4.0.18
@@ -17307,7 +17304,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0

From 6c61337f0e010d17e87f3117ad0c01e3c96f14d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Alves?= <joaopealves.dev@gmail.com>
Date: Mon, 30 Mar 2026 16:49:45 -0300
Subject: [PATCH 17/17] Add local settings configuration and update LocalStack
 version in tests

---
 .claude/settings.local.json           | 7 +++++++
 apps/backend/src/test/global-setup.ts | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000..65b7a62d
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm run:*)"
+    ]
+  }
+}
diff --git a/apps/backend/src/test/global-setup.ts b/apps/backend/src/test/global-setup.ts
index 94740aed..371d2a5c 100644
--- a/apps/backend/src/test/global-setup.ts
+++ b/apps/backend/src/test/global-setup.ts
@@ -140,13 +140,13 @@ async function setupDatabase() {
 }
 
 async function setupLocalStack() {
-  const container = await new GenericContainer('localstack/localstack:latest')
+  const container = await new GenericContainer('localstack/localstack:3')
     .withEnvironment({
       SERVICES: 'sqs',
       DOCKER_HOST: 'unix:///var/run/docker.sock',
     })
     .withExposedPorts(4566)
-    .withWaitStrategy(Wait.forLogMessage(/.*Ready.*/))
+    .withWaitStrategy(Wait.forHttp('/_localstack/health', 4566))
     .start()
 
   localstackConfig = {