Merge pull request #16 from matheusbanqueiro/feature/responsiveness-home

Feature/responsiveness home

src/components/ContactForm/index.tsx

@@ -39,11 +39,11 @@ const ContactForm: React.FC = () => {
 
   const img = new URL('/public/home/contact-form.png', import.meta.url).href;
   return (
-    <div className="w-full h-screen bg-[#F8F8F8] relative overflow-hidden">
-      <div className="max-w-none px-4 md:pr-0 md:pl-[calc((100%-74rem)/2)] h-full flex items-center">
+    <div className="w-full h-auto md:h-screen bg-[#F8F8F8] relative overflow-hidden">
+      <div className="max-w-none px-4 md:pr-0 md:pl-[calc((100%-74rem)/2)] h-full flex items-center md:flex-row flex-col">
         {/* Form Section */}
         <div className="max-w-xl relative z-10">
-          <h2 className="text-2xl font-medium mb-2">Vamos nos conhecer?!</h2>
+          <h2 className="text-2xl font-medium mb-2 py-7 md:py-0">Vamos nos conhecer?!</h2>
           <p className="text-gray-600 mb-6 text-sm">
             Preencha as informações e nossos especialistas irão entrar em contato
           </p>
@@ -162,12 +162,12 @@ const ContactForm: React.FC = () => {
 
         {/* Image Section - Mobile */}
         <div className="block md:hidden relative w-full mt-8">
-          <div className="relative flex justify-end">
+          <div className="relative flex justify-end -right-4">
             <div className="absolute right-0 top-0 w-64 h-64 rounded-full bg-orange-500" />
             <img
               src={img}
               alt="Pessoa sorrindo"
-              className="relative z-10 w-full max-w-[300px]"
+              className="relative z-10 w-full max-w-[300px] -rigth-8"
             />
           </div>
         </div>

src/components/Footer/index.tsx

@@ -26,8 +26,8 @@ const Footer = () => {
           </div>
 
           {/* Social Links and Newsletter */}
-          <div className="flex justify-between items-start py-8">
-            <div className="flex gap-6">
+          <div className="flex-col-reverse mx-auto md:mx-0 flex md:flex-row justify-between items-center py-8">
+            <div className="flex gap-6 md:pt-0 pt-8">
               <a href="#" className="hover:opacity-80 transition-opacity">
                 <div className="bg-white rounded-full p-2">
                   <Facebook className="h-6 w-6 text-[#2B2B2B]" />
@@ -47,13 +47,13 @@ const Footer = () => {
 
             <div>
               <h3 className="text-xl mb-4">Receba promoções e novidades</h3>
-              <div className="flex gap-4">
+              <div className="flex gap-4 flex-col md:flex-row">
                 <input 
                   type="email" 
                   placeholder="E-mail" 
-                  className="px-4 py-2 rounded-full bg-white text-black w-64"
+                  className="px-4 py-2 rounded-full w-full bg-white text-black"
                 />
-                <button className="bg-[#E85D04] text-white px-8 py-2 rounded-full hover:bg-opacity-90 transition-colors flex items-center gap-2">
+                <button className="bg-[#E85D04] text-white px-8 mx-auto  py-2 rounded-full hover:bg-opacity-90 transition-colors flex items-center gap-2">
                   Enviar <span>✓</span>
                 </button>
               </div>
@@ -62,7 +62,7 @@ const Footer = () => {
 
           {/* Footer Links */}
           <div className="flex justify-center items-center pb-8">
-            <nav className="flex gap-4 items-center">
+            <nav className="flex gap-4 items-center md:text-base text-sm">
               <a href="#" className="text-white/80 hover:text-[#E85D04] transition-colors">
                 Condições gerais
               </a>

src/components/FooterCredits/index.tsx

@@ -4,7 +4,7 @@ const FooterCredits = () => {
   return (
     <div className="bg-black py-8">
       <div className="max-w-7xl mx-auto px-4 md:px-6">
-        <div className="text-sm text-white/80 space-y-2">
+        <div className="text-xs md:text-sm text-white/80 space-y-2">
           <p>© 2024 Xperience Consultoria Empresarial – Todos os direitos reservados.</p>
           <p>
             Design por{' '}

src/pages/Home/CommunitySection.tsx

@@ -4,41 +4,43 @@ const CommunitySection: React.FC = () => {
   const networkImage = new URL('/public/home/community-network.png', import.meta.url).href;
 
   return (
-    <div className="relative w-full min-h-screen bg-[#FFD54F] overflow-hidden">
+    <div className="relative w-full md:py-0 py-14 min-0 md:min-h-screen bg-[#FFD54F] overflow-hidden">
       {/* Full screen background image */}
       <img 
         src={networkImage}
         alt=""
-        className="absolute inset-0 w-full h-full object-cover"
+        className="hidden md:block md:absolute inset-0 w-full h-full object-cover"
         aria-hidden="true"
       />
 
+
       {/* Content container */}
-      <div className="relative z-10 w-full min-h-screen flex">
-        <div className="w-full max-w-7xl mx-auto px-4 md:px-8 grid grid-cols-2">
+      <div className="relative z-10 w-full min-0 md:min-h-screen flex">
+        <div className="w-full max-w-7xl mx-auto px-4 md:px-8 grid md:grid-cols-2 grid-cols-1">
           {/* Empty space for image side */}
-          <div />
+          <div className='md:block hidden' />
 
           {/* Content side */}
-          <div className="pt-32"> {/* Adicionado padding-top para mover conteúdo para cima */}
-            <h2 className="text-5xl font-bold mb-6"> {/* Reduzido margin-bottom */}
+          <div className="pt-14 md:pt-32"> {/* Adicionado padding-top para mover conteúdo para cima */}
+            <h2 className="text-4xl md:text-5xl md:text-left text-center font-bold mb-6"> {/* Reduzido margin-bottom */}
               Junte-se a nossa comunidade
             </h2>
 
-            <p className="text-xl mb-6"> {/* Reduzido margin-bottom */}
+            <p className="text-lg md:text-left text-center md:text-xl mb-6"> {/* Reduzido margin-bottom */}
               Fazendo parte do Xperience você estará ajudando a construir uma 
               comunidade empreendedora altamente engajada que se apoia e cresce 
               de forma orgânica, numa relação de ganha ganha.
             </p>
 
-            <p className="text-2xl font-bold mb-8"> {/* Reduzido margin-bottom */}
+            <p className="text-center md:text-left text-xl md:text-2xl font-bold mb-8"> {/* Reduzido margin-bottom */}
               Um lugar onde todos se beneficiam!
             </p>
-
-            <button className="bg-[#E85D04] text-white px-8 py-4 rounded-full text-xl
-                           hover:bg-opacity-90 transition-colors duration-200">
-              Entre na nossa comunidade
-            </button>
+            <div className='flex md:justify-start justify-center'>
+              <button className="bg-[#E85D04]  text-white px-8 py-4 rounded-full text-xl
+                            hover:bg-opacity-90 transition-colors duration-200">
+                Entre na nossa comunidade
+              </button>
+            </div>
           </div>
         </div>
       </div>

src/pages/Home/Hero.tsx

@@ -27,15 +27,15 @@ const Hero: React.FC<HeroProps> = ({
 }) => {
   return (
     <div className="w-full">
-      <div className="max-w-none px-4 md:pr-0 md:pl-[calc((100%-74rem)/2)] grid grid-cols-1 md:grid-cols-2 gap-8 py-24 md:py-16 items-center relative overflow-hidden">
+      <div className="max-w-none px-4 md:pr-0 md:pl-[calc((100%-74rem)/2)] grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8 py-24 md:py-16 pb-0 items-center relative overflow-hidden">
         <div className="flex flex-col max-w-2xl ml-auto">
-          <h1 className="text-white text-6xl font-normal leading-tight mb-4">
+          <h1 className="text-white md:text-6xl text-5xl font-normal leading-tight mb-4">
             {title}
             <br />
-            <span className="text-white text-[50px] font-bold block my-2">
+            <span className="text-white text-3xl md:text-[50px] font-bold block my-2">
               {highlightedText}
             </span>
-            <span className="text-white text-7xl">
+            <span className="text-white md:text-7xl text-4xl">
               {subtitle}
             </span>
           </h1>
@@ -58,7 +58,7 @@ const Hero: React.FC<HeroProps> = ({
             className="w-[500px] h-auto"
           />
         </div>
-        <div className="block md:hidden relative flex justify-end items-end">
+        <div className="block md:hidden relative flex justify-end items-end left-4">
           <img 
             src={imageSrc}
             alt={imageAlt}

src/pages/Home/IaDoEmpreendedor.tsx

@@ -24,19 +24,19 @@ const IaDoEmpreendedor: React.FC<IaDoEmpreendedorProps> = ({
   const logoSrc = new URL('/public/logo-ia-do-empreendedor.png', import.meta.url).href;
 
   return (
-    <div className="w-full bg-black min-h-screen relative overflow-hidden">
+    <div className="w-full bg-black relative overflow-hidden">
       <div className="absolute top-0 left-0 w-64 h-64 rounded-full bg-[#3D2A20] -translate-x-1/4 -translate-y-1/4" />
       <div className="absolute bottom-0 left-0 w-96 h-96 rounded-full bg-[#2A2F1E] translate-x-1/4 translate-y-1/4" />
       <div className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-[#3D2A20] translate-x-1/4 translate-y-1/4" />
 
       <div className="relative max-w-6xl mx-auto px-4 py-24 flex flex-col items-center text-center">
-        <div className="flex items-center justify-center gap-6 mb-4">
+        <div className="md:flex-row flex-col flex items-center justify-center gap-6 mb-4">
           <img 
             src={logoSrc} 
             alt={logoAlt}
             className="w-20 h-20 object-contain"
           />
-          <h2 className="text-white text-6xl font-normal">
+          <h2 className="text-white md:text-6xl text-5xl font-normal">
             {title}
           </h2>
         </div>
@@ -45,7 +45,7 @@ const IaDoEmpreendedor: React.FC<IaDoEmpreendedorProps> = ({
           {subtitle}
         </p>
 
-        <p className="text-white text-2xl max-w-4xl mx-auto mb-12 leading-relaxed">
+        <p className="text-white text-lg md:text-2xl max-w-4xl mx-auto mb-12 leading-relaxed">
           {description}
         </p>
 

src/pages/Home/Solutions.tsx

@@ -19,10 +19,10 @@ const Solutions: React.FC<SolutionsProps> = ({
 }) => {
   return (
     <div className="w-full min-h-screen bg-white relative">
-      <div className="w-full h-full grid grid-cols-1 md:grid-cols-2 gap-12 items-center relative">
+      <div className="w-full h-full grid grid-cols-1 md:grid-cols-2 gap-1 md:gap-12 items-center relative">
         {/* Imagem */}
-        <div className="relative h-screen">
-          <div className="absolute inset-0">
+        <div className="relative">
+          <div className="">
             <img 
               src={solutionsImageSrc} 
               alt={solutionsImageAlt}
@@ -32,20 +32,20 @@ const Solutions: React.FC<SolutionsProps> = ({
         </div>
 
         {/* Conteúdo */}
-        <div className="flex flex-col max-w-2xl py-24 px-4">
-          <h2 className="text-gray-900 text-5xl font-bold mb-8">
+        <div className="flex flex-col max-w-2xl py-12 md:py-24 px-4">
+          <h2 className="text-gray-900 md:text-5xl text-4xl md:text-left text-center font-bold mb-8">
             {title}
             <br />
             <span className="block mt-2">{subtitle}</span>
           </h2>
 
-          <p className="text-gray-600 text-xl mb-8">
+          <p className="text-gray-600 text-lg md:text-xl md:text-left text-center mb-8">
             {description}
           </p>
 
           <a 
             href="/solucoes" 
-            className="text-orange-500 text-xl font-semibold flex items-center hover:text-orange-600 transition-colors"
+            className="text-orange-500 text-lg md:text-xl font-semibold mx-auto md:mx-0 flex items-center hover:text-orange-600 transition-colors"
           >
             {linkText}
             <svg 

src/pages/Home/TestimonialSection.tsx

@@ -56,28 +56,29 @@ const TestimonialSection: React.FC = () => {
       {/* Background Decorations */}
       <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-[#FFF5F1] rounded-full translate-x-1/3 -translate-y-1/3" />
       <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#FFFBE5] rounded-full -translate-x-1/3 translate-y-1/3" />
-
-      <div className="max-w-[1200px] mx-auto px-8 py-24 relative flex">
-        <div className="w-full grid grid-cols-2 gap-16 items-center">
+      <div className="max-w-[1200px] mx-auto px-8 py-24 relative flex flex-col">
+        <h2 className="text-5xl md:hidden font-bold  tracking-tight uppercase">
+            Depoimentos
+        </h2>
+        <div className="w-full md:grid md:grid-cols-2 gap-16 items-center">
           {/* Image Column */}
-          <div className="relative">
-            <div className="w-[450px] h-[450px] rounded-[48px] overflow-hidden">
+            <div className="md:rounded-[48px] rounded-[38px] overflow-hidden py-6">
               <img
                 src={testimonials[currentIndex].image}
                 alt={testimonials[currentIndex].name}
                 className="w-full h-full object-cover"
               />
             </div>
-          </div>
+
 
           {/* Content Column */}
           <div className="flex flex-col">
-            <h2 className="text-[48px] font-bold mb-16 tracking-tight uppercase">
+            <h2 className="hidden md:block md:text-[48px] font-bold mb-16 tracking-tight uppercase">
               Depoimentos
             </h2>
 
             <div className="mb-12">
-              <blockquote className="text-[32px] leading-tight mb-8">
+              <blockquote className="text-2xl md:text-[32px] leading-tight mb-8">
                 <span className="text-[#E85D04] inline-block mr-2">"</span>
                 {testimonials[currentIndex].quote}
                 <span className="text-[#E85D04] inline-block ml-2">"</span>
@@ -115,15 +116,15 @@ const TestimonialSection: React.FC = () => {
                            hover:border-[#E85D04] transition-colors"
                   aria-label="Depoimento anterior"
                 >
-                  <ChevronLeft className="w-6 h-6" />
+                  <ChevronLeft className="md:w-6 w-5 h-5 md:h-6" />
                 </button>
                 <button
                   onClick={handleNext}
                   className="w-12 h-12 rounded-full border border-gray-300 flex items-center justify-center
                            hover:border-[#E85D04] transition-colors"
                   aria-label="Próximo depoimento"
                 >
-                  <ChevronRight className="w-6 h-6" />
+                  <ChevronRight className="md:w-6 w-5 h-5 md:h-6" />
                 </button>
               </div>
             </div>

src/pages/Home/WhyXperience.tsx

@@ -79,7 +79,7 @@ const WhyXperience: React.FC = () => {
   ];
 
   return (
-    <section className="bg-white h-screen flex items-center">
+    <section className="bg-white py-16 md:py-32 flex items-center">
       <div className="max-w-[1200px] mx-auto px-6">
         <div className="text-center mb-12">
           <h2 className="text-[40px] font-bold mb-4">