From 06c6e2cea5c9964f87dcbc9decd9febea406e58c Mon Sep 17 00:00:00 2001
From: guhrodrrigues <gumartinsr1201@gmail.com>
Date: Tue, 7 Oct 2025 21:31:59 -0300
Subject: [PATCH] style: add mobile improvements to home page

---
 apps/web/src/app/components/page.tsx          | 2 +-
 apps/web/src/components/sections/hero.tsx     | 2 +-
 apps/web/src/components/sections/patterns.tsx | 4 ++--
 apps/web/src/illustrations/buttons.tsx        | 2 +-
 apps/web/src/illustrations/ecommerce.tsx      | 4 ++--
 apps/web/src/illustrations/gallery.tsx        | 4 ++--
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/components/page.tsx b/apps/web/src/app/components/page.tsx
index d5a8fcca8a..e1e439e452 100644
--- a/apps/web/src/app/components/page.tsx
+++ b/apps/web/src/app/components/page.tsx
@@ -86,7 +86,7 @@ export default async function ComponentsPage() {
                     <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
                     <Illustration />
                   </div>
-                  <h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
+                  <h3 className="relative z-[2] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
                     {category.name}
                   </h3>
                   <span className="relative z-[2] text-slate-11 text-xs">
diff --git a/apps/web/src/components/sections/hero.tsx b/apps/web/src/components/sections/hero.tsx
index 50d2c9ca20..92ddf2fc27 100644
--- a/apps/web/src/components/sections/hero.tsx
+++ b/apps/web/src/components/sections/hero.tsx
@@ -49,7 +49,7 @@ const HeroSection = () => {
         />
 
         {/* Left Column - Content */}
-        <div className="w-full lg:w-[44rem] z-10 px-12 pointer-events-auto">
+        <div className="w-full lg:w-[44rem] z-10 px-4 lg:px-12 pointer-events-auto">
           <div className="mb-8 flex justify-center lg:justify-start">
             <Image
               alt="React Email Logo"
diff --git a/apps/web/src/components/sections/patterns.tsx b/apps/web/src/components/sections/patterns.tsx
index f6b147e3e0..544a28fe1d 100644
--- a/apps/web/src/components/sections/patterns.tsx
+++ b/apps/web/src/components/sections/patterns.tsx
@@ -64,7 +64,7 @@ const PatternsSection = () => {
                     <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
                     <Illustration />
                   </div>
-                  <h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
+                  <h3 className="relative z-[2] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
                     {category.name}
                   </h3>
                   <span className="relative z-[2] text-slate-11 text-xs">
@@ -92,7 +92,7 @@ const PatternsSection = () => {
 
 const Content = ({ component }: { component: string }) => {
   return (
-    <div className="relative flex flex-col max-md:items-center max-md:justify-center">
+    <div className="relative flex flex-col max-md:text-center max-md:items-center max-md:justify-center">
       <ContentComponent component={component} />
       <div
         aria-hidden
diff --git a/apps/web/src/illustrations/buttons.tsx b/apps/web/src/illustrations/buttons.tsx
index bf35161b3b..6a26b9b4cb 100644
--- a/apps/web/src/illustrations/buttons.tsx
+++ b/apps/web/src/illustrations/buttons.tsx
@@ -4,7 +4,7 @@ const IllustrationButtons: React.FC = () => (
   <div className="relative flex h-6 w-[24%] items-center justify-center rounded-md border border-[#2EBDC9] bg-[#25AEBA] p-1 shadow-sm transition-transform duration-150 ease-[cubic-bezier(.42,0,.58,1.8)] md:group-hover:rotate-3">
     <div className="h-2 w-[80%] rounded-sm bg-black/30" />
     <MousePointer2Icon
-      className="-bottom-4 group-hover:-rotate-12 absolute left-[80%] transition-transform duration-150 ease-[cubic-bezier(.42,0,.58,1.8)]"
+      className="-bottom-4 md:group-hover:-rotate-12 absolute left-[80%] transition-transform duration-150 ease-[cubic-bezier(.42,0,.58,1.8)]"
       fill="currentColor"
       stroke="currentColor"
     />
diff --git a/apps/web/src/illustrations/ecommerce.tsx b/apps/web/src/illustrations/ecommerce.tsx
index d0150999e2..62e9a91b76 100644
--- a/apps/web/src/illustrations/ecommerce.tsx
+++ b/apps/web/src/illustrations/ecommerce.tsx
@@ -1,9 +1,9 @@
 import { CircleDollarSign } from 'lucide-react';
 
 const IllustrationEcommerce: React.FC = () => (
-  <div className="relative flex aspect-video w-[42%] items-center gap-2 rounded-md bg-[#0F0F10] bg-gradient-to-b from-transparent via-black/20 to-black/20 px-3 py-2 shadow-sm transition-transform duration-150 ease-[cubic-bezier(.42,0,.58,1.8)] md:md:group-hover:skew-x-2">
+  <div className="relative flex aspect-video w-[42%] items-center gap-2 rounded-md bg-[#0F0F10] bg-gradient-to-b from-transparent via-black/20 to-black/20 px-3 py-2 shadow-sm transition-transform duration-150 ease-[cubic-bezier(.42,0,.58,1.8)] md:group-hover:skew-x-2">
     <div className="flex aspect-square w-[42%] items-center justify-center rounded-sm bg-slate-4">
-      <CircleDollarSign className="opacity-10 transition-opacity group-hover:opacity-20" />
+      <CircleDollarSign className="opacity-10 transition-opacity md:group-hover:opacity-20" />
     </div>
     <div className="flex shrink grow basis-0 flex-col gap-1">
       <div className="h-2 w-[84%] rounded-sm bg-slate-5" />
diff --git a/apps/web/src/illustrations/gallery.tsx b/apps/web/src/illustrations/gallery.tsx
index c4ce17e753..d49846f729 100644
--- a/apps/web/src/illustrations/gallery.tsx
+++ b/apps/web/src/illustrations/gallery.tsx
@@ -7,8 +7,8 @@ const IllustrationGallery: React.FC = () => (
         <div className="h-full w-full rounded-sm bg-slate-3" />
       </div>
       <div className="aspect-square w-[30%] rounded-sm bg-[#0F0F10] bg-gradient-to-b from-transparent via-black/20 to-black/20 p-2 shadow-sm">
-        <div className="flex h-full w-full items-center justify-center rounded-sm bg-slate-3 transition-colors group-hover:bg-slate-4">
-          <ImageIcon className="opacity-5 transition-opacity group-hover:opacity-20" />
+        <div className="flex h-full w-full items-center justify-center rounded-sm bg-slate-3 transition-colors md:group-hover:bg-slate-4">
+          <ImageIcon className="opacity-5 transition-opacity md:group-hover:opacity-20" />
         </div>
       </div>
       <div className="aspect-square w-[30%] rounded-sm bg-[#0F0F10] bg-gradient-to-b from-transparent via-black/20 to-black/20 p-2 shadow-sm">