style: feat mobile improvements to home page (#2551)

Author: guhrodrrigues

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">

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"

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

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"
     />

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" />

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">