From 21befa5cd581548098128bf71a2acbac5a553ad6 Mon Sep 17 00:00:00 2001
From: Juan <juanptomba@gmail.com>
Date: Wed, 10 Jun 2026 22:27:20 -0300
Subject: [PATCH 1/2] Responsividade na login/register page

---
 frontend/src/pages/login/index.jsx    | 23 +++++++++++------------
 frontend/src/pages/register/index.jsx | 21 ++++++++++++---------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/login/index.jsx b/frontend/src/pages/login/index.jsx
index af1c222..44db9c0 100644
--- a/frontend/src/pages/login/index.jsx
+++ b/frontend/src/pages/login/index.jsx
@@ -2,29 +2,28 @@ import { Link } from "react-router-dom";
 
 export default function Login() {
   return (
-    // celular: flex-col (empilhado) e permite rolar se a tela for muito pequena.
-    // PC: flex-row (lado a lado), trava a altura e tira a rolagem.
     <div className="flex flex-col md:flex-row min-h-screen md:h-screen w-full md:overflow-hidden">
-      {/* imagem -> celular: largura total e altura fixa (250px). PC: 50% da largura e altura total */}
-      <div className="w-full h-62.5 md:h-full md:w-1/2 bg-black shrink-0 shadow-inner">
+      
+      {/* Imagem (Some no celular, aparece no PC) */}
+      <div className="hidden md:block md:h-full md:w-1/2 bg-black shrink-0 shadow-inner relative">
         <img
           src="/gta-vi.jpg"
           alt="GTA VI"
           className="w-full h-full object-cover object-top block shadow-[inset_0_0_50px_rgba(0,0,0,0.5)]"
         />
-        <div className="absolute w-1/2 inset-0 shadow-[0_20px_20px_rgba(0,0,0,0.5)] pointer-events-none"></div>
-
+        <div className="absolute w-full inset-0 shadow-[0_20px_20px_rgba(0,0,0,0.5)] pointer-events-none"></div>
       </div>
 
-      {/* formulário -> celular: ocupa o resto do espaço. PC: 60% da largura */}
-      <div className="w-full md:w-1/2 grow bg-cinza flex flex-col justify-center items-center p-8 py-12 md:py-8">
+      {/* Formulário */}
+      <div className="w-full md:w-1/2 grow bg-cinza flex flex-col justify-center items-center p-8 py-12 md:py-8 overflow-x-hidden">
         <div className="w-full max-w-md">
-          <h1 className="text-6xl text-start mb-24 font-sans text-white">
+          {/* text-4xl no celular, text-6xl no PC. Margem menor no mobile */}
+          <h1 className="text-4xl md:text-6xl text-start mb-12 md:mb-24 font-sans text-white truncate">
             GAMERBOXD
           </h1>
 
-          <h2 className="text-roxo text-4xl text-start mb-1">Log In</h2>
-          <p className="text-sm text-white mb-5 mt-2">
+          <h2 className="text-roxo text-3xl md:text-4xl text-start mb-1">Log In</h2>
+          <p className="text-xs sm:text-sm text-white mb-5 mt-2">
             Não possui uma conta?{" "}
             <Link to="/register" className="text-roxo font-medium hover:underline">
               Cadastre-se aqui
@@ -69,4 +68,4 @@ export default function Login() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/register/index.jsx b/frontend/src/pages/register/index.jsx
index 80d7f4e..0e554d1 100644
--- a/frontend/src/pages/register/index.jsx
+++ b/frontend/src/pages/register/index.jsx
@@ -3,26 +3,29 @@ import { Link } from "react-router-dom";
 export default function Register() {
   return (
     <div className="flex flex-col md:flex-row min-h-screen md:h-[calc(100vh-80px)] w-full md:overflow-hidden">
-      {/* lado esquerdo (imagem) */}
-      <div className="w-full h-62.5 md:h-full md:w-1/2 bg-black shrink-0">
+      
+      {/* imagem -> sem no mobile, visível no desktop */}
+      <div className="hidden md:block md:h-full md:w-1/2 bg-black shrink-0 relative">
         <img
           src="/eldenring.jpg"
           alt="Elden Ring"
           className="w-full h-full object-cover object-top block"
         />
-        <div className="absolute w-1/2 inset-0 shadow-[0_20px_20px_rgba(0,0,0,0.5)] pointer-events-none"></div>
+        {/* sombra com w-full */}
+        <div className="absolute w-full inset-0 shadow-[0_20px_20px_rgba(0,0,0,0.5)] pointer-events-none"></div>
       </div>
 
-      {/* lado lireito (formulario))*/}
-      <div className="w-full md:w-1/2 grow bg-cinza flex flex-col justify-center items-center p-8 py-12 md:py-8">
+      {/* formulario -> Ocupa 100% no mobile e 50% no desktop */}
+      <div className="w-full md:w-1/2 grow bg-cinza flex flex-col justify-center items-center p-8 py-12 md:py-8 overflow-x-hidden">
         <div className="w-full max-w-md">
-          <h1 className="text-6xl text-start text-white mb-24">
+          {/* Título e margem reduzidos no celular */}
+          <h1 className="text-4xl md:text-6xl text-start mb-12 md:mb-24 font-sans text-white truncate">
             GAMERBOXD
           </h1>
 
-          <h2 className="text-[#8b7df0] text-4xl mb-1">Criar Conta</h2>
+          <h2 className="text-[#8b7df0] text-3xl md:text-4xl mb-1">Criar Conta</h2>
           <p className="text-xs text-white font-light mb-5 mt-2">
-            Já possui uma conta? {/* link aponta para o login */}
+            Já possui uma conta? {/* link para o login */}
             <Link to="/login" className="text-[#8b7df0] font-medium hover:underline">
               Faça login aqui
             </Link>
@@ -79,4 +82,4 @@ export default function Register() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From 30bc7392893eef0ad83975a4a5574ed6a1b07350 Mon Sep 17 00:00:00 2001
From: Juan <juanptomba@gmail.com>
Date: Thu, 11 Jun 2026 15:25:59 -0300
Subject: [PATCH 2/2] Responsividade da home page

---
 frontend/src/pages/home/About.jsx    |  2 +-
 frontend/src/pages/home/Features.jsx | 88 ++++++++++++----------------
 frontend/src/pages/home/Hero.jsx     | 39 +++++++-----
 frontend/src/pages/home/Social.jsx   | 29 +++++----
 frontend/src/pages/home/index.jsx    | 13 ++--
 5 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/frontend/src/pages/home/About.jsx b/frontend/src/pages/home/About.jsx
index 2479452..8a14e7f 100644
--- a/frontend/src/pages/home/About.jsx
+++ b/frontend/src/pages/home/About.jsx
@@ -32,7 +32,7 @@ const steps = [
 export default function About() {
     return (
        
-        <section id="about" className = "w-full h-screen bg-cinza text-white py-20 px-6 flex flex-col items-center text-center" >
+        <section id="about" className="w-full min-h-screen h-auto bg-cinza text-white py-20 px-6 flex flex-col items-center text-center">
             
             <h2 className="text-roxo font-bold tracking-widest uppercase text-sm mb-2">Como funciona?</h2>
             <h1 className="text-3xl md:text-5xl font-bold mb-4">Apenas 3 passos para começar</h1>
diff --git a/frontend/src/pages/home/Features.jsx b/frontend/src/pages/home/Features.jsx
index a6522b2..63dd63a 100644
--- a/frontend/src/pages/home/Features.jsx
+++ b/frontend/src/pages/home/Features.jsx
@@ -24,11 +24,10 @@ export default function Features() {
             />
 
             <motion.div
-                className="flex flex-col items-center justify-center mb-16 z-10"
+                className="flex flex-col items-center justify-center mb-16 z-10 px-4"
                 initial={{ opacity: 0, y: 40 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8, ease: "easeOut" }}
-                
             >
                 <span className="text-roxo font-bold tracking-widest uppercase text-sm mb-3">
                     Funcionalidades
@@ -42,7 +41,7 @@ export default function Features() {
             </motion.div>
 
             <motion.div
-                className="z-10 w-full flex justify-center"
+                className="z-10 w-full flex justify-center px-4"
                 initial={{ opacity: 0, y: 30 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
@@ -74,18 +73,16 @@ function SideTabs() {
                 description="Mostre para a comunidade quais jogos você já jogou e construa seu histórico."
                 badge="Biblioteca"
             >
-                {/* Preview: grid de capas de jogos */}
-                <div className="mt-4 flex flex-row gap-2 items-end justify-center">
+                <div className="mt-4 flex flex-row gap-2 items-end justify-center w-full flex-nowrap">
                     {[gowImg, gtaImg, gowImg, gtaImg].map((img, i) => (
                         <div
                             key={i}
-                            className="rounded-lg overflow-hidden border border-white/10"
-                            
+                            className="w-14 h-20 sm:w-16 sm:h-24 md:w-24 md:h-36 shrink-0 rounded-lg overflow-hidden border border-white/10"
                         >
                             <img src={img} alt="" className="w-full h-full object-cover" />
                         </div>
                     ))}
-                    <span className="text-xs text-gray-500 pb-1 ml-1">+143</span>
+                    <span className="text-xs text-gray-500 pb-1 ml-1 whitespace-nowrap">+143</span>
                 </div>
             </TabPanel>
         ),
@@ -97,10 +94,9 @@ function SideTabs() {
                 description="Dê uma nota para seus jogos e veja como sua coleção se compara."
                 badge="Avaliação"
             >
-                {/* Preview: cards com score */}
-                <div className="mt-4 flex flex-row gap-3 items-center justify-center">
+                <div className="mt-4 flex flex-row gap-4 items-start justify-start md:justify-center w-full overflow-x-auto scrollbar-hide snap-x pb-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                     {cards.map((card) => (
-                        <div key={card.id} className="flex flex-col items-center gap-1">
+                        <div key={card.id} className="shrink-0 snap-center scale-[0.85] md:scale-100 origin-top h-[320px] md:h-auto">
                             <Card game={card} status={true} />
                         </div>
                     ))}
@@ -115,8 +111,7 @@ function SideTabs() {
                 description="Descreva como foi sua experiência com os jogos que você jogou."
                 badge="Reviews"
             >
-                {/* Preview: review card mockup */}
-                <div className="mt-4 w-full rounded-xl border border-white/10 bg-white/5 p-3 text-left">
+                <div className="mt-4 w-full rounded-xl border border-white/10 bg-white/5 p-4 text-left">
                     <div className="flex items-center gap-2 mb-2">
                         <div className="w-6 h-6 rounded-full bg-roxo/40 flex items-center justify-center text-xs text-white font-bold">V</div>
                         <span className="text-xs text-gray-300 font-medium">Você</span>
@@ -140,8 +135,7 @@ function SideTabs() {
                 description="Mostre quais desafios você superou e os jogos que conseguiu completar 100%."
                 badge="Conquistas"
             >
-                {/* Preview: barra de progresso */}
-                <div className="mt-4 w-full space-y-2">
+                <div className="mt-4 w-full space-y-3">
                     {[
                         { name: "God of War", pct: 100 },
                         { name: "GTA V",      pct: 78  },
@@ -171,10 +165,9 @@ function SideTabs() {
                 description="Destaque aqueles jogos inesquecíveis que moram no seu coração."
                 badge="Top picks"
             >
-                {/* Preview: grid de favoritos com coração */}
-                <div className="mt-4 flex flex-row gap-2 items-center justify-center">
+                <div className="mt-4 flex flex-row gap-2 items-center justify-center flex-nowrap">
                     {[gowImg, gtaImg, gowImg].map((img, i) => (
-                        <div key={i} className="relative rounded-lg overflow-hidden border border-white/10 aspect-[4:5]">
+                        <div key={i} className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-24 md:h-32 shrink-0 rounded-lg overflow-hidden border border-white/10">
                             <img src={img} alt="" className="w-full h-full object-cover" />
                             <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent" />
                             <span className="absolute bottom-1 right-1 text-xs">❤️</span>
@@ -191,14 +184,13 @@ function SideTabs() {
                 description="Registre sua jornada diária, conquistas e os momentos mais épicos das suas gameplays."
                 badge="Registro"
             >
-                {/* Preview: entradas do diário */}
-                <div className="mt-4 w-full space-y-2">
+                <div className="mt-4 w-full space-y-3">
                     {[
                         { date: "Hoje",      text: "Finalmente derrotei o Kratos no modo difícil 🔥" },
                         { date: "Ontem",     text: "Comecei o NG+ de Elden Ring..." },
                     ].map(({ date, text }) => (
                         <div key={date} className="flex gap-2 items-start text-xs text-gray-400">
-                            <span className="text-roxo font-medium min-w-9">{date}</span>
+                            <span className="text-roxo font-medium min-w-[40px]">{date}</span>
                             <span className="leading-relaxed">{text}</span>
                         </div>
                     ))}
@@ -213,14 +205,13 @@ function SideTabs() {
                 description="Crie listas personalizadas para organizar seu backlog, franquias ou recomendações."
                 badge="Curadoria"
             >
-                {/* Preview: listas */}
-                <div className="mt-4 w-full space-y-2">
+                <div className="mt-4 w-full space-y-3">
                     {[
                         { name: "🎯 Backlog 2025",           count: 12 },
                         { name: "🏆 Melhores de todos os tempos", count: 8  },
                         { name: "👫 Para jogar com amigos",  count: 5  },
                     ].map(({ name, count }) => (
-                        <div key={name} className="flex justify-between items-center text-xs text-gray-400 border-b border-white/5 pb-1.5">
+                        <div key={name} className="flex justify-between items-center text-xs text-gray-400 border-b border-white/5 pb-2">
                             <span>{name}</span>
                             <span className="text-roxo font-medium">{count} jogos</span>
                         </div>
@@ -231,39 +222,38 @@ function SideTabs() {
     };
 
     return (
-        <div className="w-11/12 max-w-4xl border border-white/10 rounded-2xl bg-dark-card flex flex-row shadow-2xl shadow-black/60 overflow-hidden">
+        <div className="w-full max-w-4xl border border-white/10 rounded-2xl bg-dark-card flex flex-col md:flex-row shadow-2xl shadow-black/60 overflow-hidden">
 
-            {/* Coluna de tabs */}
-            <div className="w-5/12 md:w-4/12 py-5 px-3 flex flex-col gap-1 border-r border-white/5">
+            {/* Menu Lateral/Topo */}
+            <div className="w-full md:w-4/12 p-3 md:py-5 flex flex-row md:flex-col gap-2 border-b md:border-b-0 md:border-r border-white/5 overflow-x-auto scrollbar-hide snap-x [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                 {tabs.map((tab) => (
                     <button
                         key={tab.id}
                         onClick={() => setActiveTab(tab.id)}
                         className={`
-                            group flex items-center gap-3
-                            w-full px-3 py-2.5 rounded-xl text-left
-                            transition-all duration-200 cursor-pointer
+                            group flex items-center gap-2 md:gap-3 shrink-0 snap-start
+                            px-4 py-2 md:px-3 md:py-2.5 rounded-xl md:rounded-l-xl md:rounded-r-none text-left
+                            transition-all duration-200 cursor-pointer border-l-2
                             ${activeTab === tab.id
-                                ? "bg-roxo/10 border-l-2 border-roxo text-roxo"
-                                : "border-l-2 border-transparent text-gray-400 hover:text-white hover:bg-white/5"
+                                ? "bg-roxo/20 text-roxo border-transparent md:bg-roxo/10 md:border-roxo"
+                                : "bg-white/5 text-gray-400 border-transparent md:bg-transparent md:hover:bg-white/5 md:hover:text-white"
                             }
                         `}
                     >
-                        {/* Ícone inline na tab */}
                         <div className={`
-                            w-7 h-7 rounded-lg flex items-center justify-center shrink-0
+                            w-6 h-6 md:w-7 md:h-7 rounded-lg flex items-center justify-center shrink-0
                             transition-colors duration-200 text-sm
                             ${activeTab === tab.id ? "bg-roxo/20" : "bg-white/5 group-hover:bg-white/10"}
                         `}>
-                            <img src={tab.icon} alt="" className="w-4 h-4 opacity-80" />
+                            <img src={tab.icon} alt="" className="w-3.5 h-3.5 md:w-4 md:h-4 opacity-80" />
                         </div>
-                        <span className="font-semibold text-sm">{tab.label}</span>
+                        <span className="font-semibold text-xs md:text-sm whitespace-nowrap">{tab.label}</span>
                     </button>
                 ))}
             </div>
 
-            {/* Painel de conteúdo */}
-            <div className="flex-1 relative overflow-hidden">
+            {/* Painel de conteúdo -> Diminuí o min-h para 360px no mobile para não sobrar tanto espaço preto */}
+            <div className="flex-1 relative overflow-hidden h-auto min-h-[360px] md:min-h-[400px]">
                 <AnimatePresence mode="wait">
                     <motion.div
                         key={activeTab}
@@ -281,28 +271,26 @@ function SideTabs() {
     );
 }
 
-/* Componente reutilizável para cada painel */
 function TabPanel({ icon, title, description, badge, children }) {
     return (
         <div className="flex flex-col h-full text-white">
-            {/* Badge */}
-            <span className="self-start text-xs font-semibold tracking-widest uppercase text-roxo border border-roxo/30 bg-roxo/10 rounded-full px-3 py-0.5 mb-4">
+            <span className="self-start text-[10px] md:text-xs font-semibold tracking-widest uppercase text-roxo border border-roxo/30 bg-roxo/10 rounded-full px-3 py-0.5 mb-4">
                 {badge}
             </span>
 
-            {/* Ícone + título */}
             <div className="flex items-center gap-3 mb-2">
-                <div className="w-10 h-10 rounded-xl bg-roxo/15 border border-roxo/20 flex items-center justify-center shrink-0">
-                    <img src={icon} alt="" className="w-5 h-5" />
+                <div className="w-8 h-8 md:w-10 md:h-10 rounded-xl bg-roxo/15 border border-roxo/20 flex items-center justify-center shrink-0">
+                    <img src={icon} alt="" className="w-4 h-4 md:w-5 md:h-5" />
                 </div>
-                <h4 className="font-bold text-2xl">{title}</h4>
+                <h4 className="font-bold text-xl md:text-2xl">{title}</h4>
             </div>
 
-            {/* Descrição */}
-            <p className="text-gray-400 text-sm leading-relaxed">{description}</p>
+            <p className="text-gray-400 text-xs md:text-sm leading-relaxed mb-4">{description}</p>
 
-            {/* Slot para preview contextual */}
-            {children}
+            {/* C celular o conteúdo fica embaixo do texto, no desktop vai pra baixo) */}
+            <div className="md:mt-auto">
+                {children}
+            </div>
         </div>
     );
 }
@@ -326,4 +314,4 @@ const cards = [
         complete: false,
         id: 2,
     },
-];
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/frontend/src/pages/home/Hero.jsx b/frontend/src/pages/home/Hero.jsx
index 7d63e33..c7f34e8 100644
--- a/frontend/src/pages/home/Hero.jsx
+++ b/frontend/src/pages/home/Hero.jsx
@@ -1,11 +1,8 @@
 import HeroBg from "../../assets/imgs/hornet_landscape.jpg"
 import { ParallaxBanner } from "react-scroll-parallax";
 import { Link } from "react-router-dom";
-import About from "./About";
-import Register from "../register/index.jsx"
 
 export default function HeroParallax() {
-
     const background = {
         image: HeroBg,
         translateY: [0, 50],
@@ -31,34 +28,46 @@ export default function HeroParallax() {
         opacity: [0, 0.9],
         shouldAlwaysCompleteAnimation: true,
         expanded: false,
+        // Gradiente agora vai para "from-cinza" em vez de "from-gray-900"
         children: (
-            <div className="absolute inset-0 bg-linear-to-t from-gray-900 to-transparent pointer-events-none" />
+            <div className="absolute inset-0 bg-linear-to-t from-cinza to-transparent pointer-events-none" />
         ),
     };
 
     return (
-        <ParallaxBanner
-            id="#hero"
-            layers={[background, gradientOverlay, headline,]}
-            className="h-screen bg-gray-900"
-        />
+        <>
+            {/* mobile sem imagem */}
+            <div id="hero-mobile" className="md:hidden h-screen bg-cinza flex flex-col items-center justify-center pt-10">
+                <MainTitle />
+                <CAT />
+            </div>
+
+            {/* desktop com imagem */}
+            <div className="hidden md:block">
+                <ParallaxBanner
+                    id="#hero"
+                    layers={[background, gradientOverlay, headline]}
+                    className="h-screen bg-cinza"
+                />
+            </div>
+        </>
     );
 }
 
 function MainTitle() {
     return (
-        <div className="flex flex-col items-center mt-32 w-10/12 text-white">
-            <h2 className="font-sans font-semibold text-2xl lg:text-5xl text-center">Avalie os jogos que você jogou</h2>
-            <h1 className="font-sans font-bold text-2xl lg:text-6xl lg:mt-4 text-center">COMPARTILHE OS QUE VALEM O 100%</h1>
-            <p className="font-sans font-medium mt-5 text-center">A sua rede social para acompanhar e avaliar os seus jogos favoritos</p>
+        <div className="flex flex-col items-center mt-10 md:mt-32 w-11/12 md:w-10/12 text-white">
+            <h2 className="font-sans font-semibold text-xl md:text-2xl lg:text-5xl text-center">Avalie os jogos que você jogou</h2>
+            <h1 className="font-sans font-bold text-3xl md:text-5xl lg:text-6xl mt-2 lg:mt-4 text-center">COMPARTILHE OS QUE VALEM O 100%</h1>
+            <p className="font-sans font-medium mt-3 md:mt-5 text-center text-sm md:text-base text-gray-300">A sua rede social para acompanhar e avaliar os seus jogos favoritos</p>
         </div>
     )
 }
 
 function CAT() {
-    const animatedButton = "relative overflow-hidden bg-roxo px-8 py-4 rounded-4xl text-white font-semibold mt-10 lg:mt-40 after:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full cursor-pointer transition-colors duration-300 hover:text-black";
+    const animatedButton = "relative overflow-hidden bg-roxo px-6 md:px-8 py-3 md:py-4 rounded-4xl text-white font-semibold text-sm md:text-base mt-10 lg:mt-40 after:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full cursor-pointer transition-colors duration-300 hover:text-black";
 
-    const animatedLink = "relative text-white mt-4 after:content-[''] after:absolute after:left-0 after:-bottom-1 after:h-[2px] after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full hover:text-gray-300 transition-colors cursor-pointer";
+    const animatedLink = "relative text-white mt-6 after:content-[''] after:absolute after:left-0 after:-bottom-1 after:h-[2px] after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full hover:text-gray-300 transition-colors cursor-pointer";
 
     return (
         <div className="flex flex-col items-center">
diff --git a/frontend/src/pages/home/Social.jsx b/frontend/src/pages/home/Social.jsx
index 04a4f2e..a193c66 100644
--- a/frontend/src/pages/home/Social.jsx
+++ b/frontend/src/pages/home/Social.jsx
@@ -64,7 +64,7 @@ export default function Social() {
 
             {/* Header */}
             <motion.div
-                className="flex flex-col items-center text-center mb-16"
+                className="flex flex-col items-center text-center mb-16 px-4"
                 initial={{ opacity: 0, y: 50 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8, ease: "easeIn" }}
@@ -83,7 +83,6 @@ export default function Social() {
             {/* Stats */}
             <motion.div
                 className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl mb-16"
-
                 onViewportEnter={() => setStatsVisible(true)}
                 onViewportLeave={() => setStatsVisible(false)}
             >
@@ -98,7 +97,7 @@ export default function Social() {
                                 value={statsVisible ? stat.value : 0} 
                                 suffix={stat.suffix}
                                 trend={1}
-                                spinTiming ={{duration: 2000, easing: 'ease-out'}}
+                                spinTiming={{ duration: 2000, easing: 'ease-out' }}
                             />
                         </span>
                         <span className="text-gray-400 text-sm text-center mt-1">{stat.label}</span>
@@ -123,7 +122,7 @@ export default function Social() {
 
             {/* CTA final */}
             <motion.div
-                className="mt-20 w-full max-w-4xl bg-dark-card rounded-3xl p-12 flex flex-col items-center text-center border border-transparent hover:border-roxo/30 transition-colors duration-300"
+                className="mt-20 w-full max-w-4xl bg-dark-card rounded-3xl p-8 md:p-12 flex flex-col items-center text-center border border-transparent hover:border-roxo/30 transition-colors duration-300"
                 initial={{ opacity: 0, y: 40 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.8, ease: "easeIn" }}
@@ -135,7 +134,7 @@ export default function Social() {
                 <p className="text-gray-400 text-lg mb-8 max-w-md">
                     Crie agora sua conta e junte-se à maior rede social exclusiva para gamers do Brasil.
                 </p>
-                <Link to={"/register"} className="relative overflow-hidden bg-roxo px-10 py-4 rounded-2xl text-white font-bold text-lg after:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:bg-white/10 after:transition-all after:duration-300 hover:after:w-full cursor-pointer transition-all duration-300 hover:scale-105">
+                <Link to={"/register"} className="relative overflow-hidden bg-roxo px-8 md:px-10 py-4 rounded-2xl text-white font-bold text-base md:text-lg after:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-0 after:bg-white/10 after:transition-all after:duration-300 hover:after:w-full cursor-pointer transition-all duration-300 hover:scale-105">
                     <span className="relative z-10">Criar conta grátis</span>
                 </Link>
                 <p className="text-gray-600 text-sm mt-4">
@@ -165,12 +164,12 @@ function ReviewCard({ review }) {
             {/* Ícones de status */}
             <div className="flex items-center gap-3 mb-3">
                 <GameScore score={review.score} />
-                <div className="flex gap-2 ml-auto">
+                <div className="flex gap-2 ml-auto shrink-0">
                     {review.liked && (
-                        <Heart size={14} className="text-red-500 fill-red-500" />
+                        <Heart size={16} className="text-red-500 fill-red-500" />
                     )}
                     {review.complete && (
-                        <Trophy size={14} className="text-yellow-400 fill-yellow-400" />
+                        <Trophy size={16} className="text-yellow-400 fill-yellow-400" />
                     )}
                 </div>
             </div>
@@ -182,8 +181,8 @@ function ReviewCard({ review }) {
 
             {/* Footer */}
             <div className="flex items-center justify-between mt-4 pt-4 border-t border-white/5">
-                <div className="flex items-center gap-1 text-gray-500 text-xs">
-                    <Heart size={12} className="text-red-500 fill-red-500" />
+                <div className="flex items-center gap-1.5 text-gray-500 text-xs">
+                    <Heart size={14} className="text-red-500 fill-red-500" />
                     <span>{review.likes}</span>
                 </div>
                 <span className="text-gray-600 text-xs">{review.timeAgo}</span>
@@ -194,9 +193,15 @@ function ReviewCard({ review }) {
 
 function GameScore({ score }) {
     return (
-        <div className="flex gap-0.5">
+        <div className="flex gap-1">
+            {/* tamanho travado em w-4 h-4 (celular) e w-5 h-5 (desktop) */}
             {Array.from({ length: 5 }).map((_, i) => (
-                <img key={i} className="w-[10%]" src={notaSvg}></img>
+                <img 
+                    key={i} 
+                    className={`w-4 h-4 md:w-5 md:h-5 transition-all duration-300 ${i < score ? "" : "opacity-30 grayscale"}`} 
+                    src={notaSvg} 
+                    alt="Nota"
+                />
             ))}
         </div>
     );
diff --git a/frontend/src/pages/home/index.jsx b/frontend/src/pages/home/index.jsx
index 3120e7c..524e6d2 100644
--- a/frontend/src/pages/home/index.jsx
+++ b/frontend/src/pages/home/index.jsx
@@ -5,17 +5,19 @@ import About from "./About";
 import Features from "./Features";
 import Social from "./Social";
 
-
 export default function Home() {
     return (
-        <main>
+        // tirar linhas brancas entre containers
+        <main className="bg-cinza">
             <Hero />
             <section>
                 <Catalogo />
             </section>
-            <section className="relative z-10 bg-black mt-[-50vh]">
+            
+            <section className="relative z-10 md:mt-[-50vh]">
                 <About />
             </section>
+            
             <section>
                 <Features />
             </section>
@@ -24,7 +26,4 @@ export default function Home() {
             </section>
         </main>
     )
-}
-
-
-
+}
\ No newline at end of file