feat: ✨ solucoes responsiveness

govinda777 · Jan 31, 2025 · a7674d6 · a7674d6
1 parent 9f36fad
commit a7674d6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git a/src/components/BannerIntro/index.tsx b/src/components/BannerIntro/index.tsx
@@ -18,27 +18,27 @@ const BannerIntro: React.FC<BannerIntroProps> = ({
   return (
     <div
       style={{ backgroundColor }}
-      className="relative w-full h-96 overflow-hidden"
+      className="py-10 relative w-full h-96 overflow-hidden"
     >
       {/* Círculos decorativos (maiores para se aproximar ao design Figma) */}
       <div className="absolute w-[600px] h-[600px] bg-orange-300/20 rounded-full -left-64 -top-64"></div>
       <div className="absolute w-[500px] h-[500px] bg-orange-300/20 rounded-full -right-64 -bottom-64"></div>
 
       {/* Container principal em linha (mascote e texto) */}
-      <div className="relative z-10 flex flex-row items-center w-full h-full p-8">
+      <div className="relative z-10 flex md:flex-row flex-col md:items-center md:w-full md:h-full">
         {/* Div para a imagem (metade da tela) */}
-        <div className="w-1/2 flex justify-center">
+        <div className="md:w-1/2 flex justify-center">
           <img
             src={imageSrc}
             alt="Mascote"
-            style={{ width: '300px', height: '300px' }}
+            className='md:w-[300px] md:h-[300px] w-[200px] h-[200px]'
           />
         </div>
 
         {/* Div para o texto (metade da tela) */}
-        <div className="w-1/2 flex flex-col items-start justify-center">
+        <div className="w-1/2 mx-auto flex flex-col md:items-start items-center justify-center">
           <h2
-            className="text-5xl font-bold mb-4"
+            className="text-4xl md:text-5xl font-bold md:mb-4"
             style={{ color: textColor }}
           >
             {title}{' '}

diff --git a/src/components/IntroSection/index.tsx b/src/components/IntroSection/index.tsx
@@ -20,10 +20,10 @@ const IntroSection: React.FC<IntroSectionProps> = ({
   className = ""
 }) => {
   return (
-    <section className={`w-full h-screen overflow-hidden flex flex-col ${className}`}>
+    <section className={`w-full md:h-screen overflow-hidden flex flex-col ${className}`}>
       {/* Top Section (Imagem) */}
       <div className="flex-1 bg-gradient-to-b from-[#F34A0D] to-[#FFF1E7] flex items-center justify-center">
-        <div className="max-w-7xl w-full px-4">
+        <div className="w-full px-4">
           <div className="w-full h-[200px] md:h-[300px] rounded-3xl overflow-hidden">
             <img
               src={imageSrc}
@@ -37,8 +37,8 @@ const IntroSection: React.FC<IntroSectionProps> = ({
       {/* Bottom Section (Texto) */}
       <div className="flex-1 bg-[#FFF1E7] relative overflow-hidden flex items-center">
         <div className="max-w-7xl w-full px-4 py-6 md:py-8">
-          <div className="max-w-4xl mx-auto relative z-10 text-left px-4 md:px-6 lg:px-8">
-            <h1 className="text-4xl md:text-[3rem] font-extrabold text-gray-900 mb-6 leading-tight">
+          <div className="max-w-4xl mx-auto relative z-10 text-center md:text-left px-4 md:px-6 lg:px-8">
+            <h1 className="text-3xl md:text-[3rem] font-extrabold text-gray-900 mb-6 leading-tight">
               {title}
             </h1>
 

diff --git a/src/pages/Solutions/Hero.tsx b/src/pages/Solutions/Hero.tsx
@@ -4,7 +4,7 @@ const Hero: React.FC = () => {
   const heroImage = new URL('/public/solutions/hero.png', import.meta.url).href;
 
   return (
-    <div className="w-full min-h-screen relative flex items-center overflow-hidden">
+    <div className="w-full md:min-h-screen md:py-0 py-10 relative flex items-center overflow-hidden">
       {/* Background Image Container */}
       <div className="absolute inset-0 w-full h-full">
         <div className="absolute top-1/2 right-0 -translate-y-1/2 
@@ -25,22 +25,22 @@ const Hero: React.FC = () => {
         <div className="max-w-4xl space-y-8">
           <div className="space-y-6">
             <h1 className="text-white leading-tight">
-              <span className="block text-5xl md:text-6xl">
+              <span className="block text-4xl md:text-6xl">
                 Soluções Inovadoras para o
               </span>
-              <span className="block text-5xl md:text-6xl mt-2">
+              <span className="block text-4xl md:text-6xl mt-2">
                 Crescimento do Seu Negócio
               </span>
             </h1>
 
-            <p className="text-xl text-white/90 leading-relaxed">
+            <p className="text-lg md:text-xl text-white/90 leading-relaxed">
               Na Xperience, utilizamos nossa expertise e a inovação da{' '}
               <span className="font-semibold">IA do Empreendedor</span>
               {' '}para identificar e aplicar as melhores estratégias para pequenos empreendedores.
             </p>
           </div>
 
-          <button className="bg-black text-white text-lg px-8 py-4 rounded-full 
+          <button className="bg-black text-white text-base md:text-lg px-8 py-4 rounded-full 
                            hover:bg-gray-900 transition-colors duration-300 
                            hover:shadow-lg">
             Agendar mentoria

diff --git a/src/pages/Solutions/IaDoEmpreendedorBanner.tsx b/src/pages/Solutions/IaDoEmpreendedorBanner.tsx
@@ -19,7 +19,7 @@ const IaDoEmpreendedorBanner: React.FC<IaDoEmpreendedorBannerProps> = ({
   const logoSrc = new URL('/public/logo-ia-do-empreendedor.png', import.meta.url).href;
 
   return (
-    <div className="relative bg-[#F8B195] w-full min-h-screen flex items-center justify-center p-4 md:p-8 overflow-hidden">
+    <div className="relative bg-[#F8B195] w-full md:min-h-screen flex items-center justify-center px-4 py-10 md:px-8 md:py-8 overflow-hidden">
 
       {/* Bolinhas de fundo */}
       <div
@@ -43,7 +43,7 @@ const IaDoEmpreendedorBanner: React.FC<IaDoEmpreendedorBannerProps> = ({
           <img
             src={logoSrc}
             alt="Ícone IA do Empreendedor"
-            className="w-64 md:w-72 h-auto object-contain mb-4"
+            className="w-52 md:w-72 h-auto object-contain mb-4"
           />
           <h2 className="text-4xl md:text-5xl font-bold text-gray-800 leading-tight">
             {title}
@@ -54,7 +54,7 @@ const IaDoEmpreendedorBanner: React.FC<IaDoEmpreendedorBannerProps> = ({
         </div>
 
         {/* Coluna Direita: Descrição, Destaque e Botão (alinhados à esquerda) */}
-        <div className="flex flex-col text-left mx-auto md:mx-0">
+        <div className="flex flex-col text-center md:text-left mx-auto md:mx-0">
           <p className="text-base md:text-lg text-gray-800 mb-4 max-w-xl leading-relaxed">
             {description}
           </p>