up

govinda777 · Jan 5, 2025 · 756c871 · 756c871
1 parent 5b6cd61
commit 756c871
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 19 deletions.
diff --git a/public/solutions/consulting-intro.png b/public/solutions/consulting-intro.png
diff --git a/src/components/BannerIntro/index.tsx b/src/components/BannerIntro/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface BannerIntroProps {
+  imageSrc: string;
+  title: string;
+  highlightedText: string;
+  backgroundColor?: string;
+  textColor?: string;
+}
+
+const BannerIntro: React.FC<BannerIntroProps> = ({
+  imageSrc,
+  title,
+  highlightedText,
+  backgroundColor = '',
+  textColor = '#FFFFFF',
+}) => {
+  return (
+    <div
+      style={{ backgroundColor }}
+      className="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 para a imagem (metade da tela) */}
+        <div className="w-1/2 flex justify-center">
+          <img
+            src={imageSrc}
+            alt="Mascote"
+            style={{ width: '300px', height: '300px' }}
+          />
+        </div>
+
+        {/* Div para o texto (metade da tela) */}
+        <div className="w-1/2 flex flex-col items-start justify-center">
+          <h2
+            className="text-5xl font-bold mb-4"
+            style={{ color: textColor }}
+          >
+            {title}{' '}
+            <span
+              className="relative"
+              style={{ color: textColor }}
+            >
+              {highlightedText}
+              <div className="absolute bottom-0 left-0 w-full h-2 bg-yellow-300"></div>
+            </span>
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BannerIntro;
diff --git a/src/components/IntroSection/index.tsx b/src/components/IntroSection/index.tsx
@@ -20,12 +20,12 @@ const IntroSection: React.FC<IntroSectionProps> = ({
   className = ""
 }) => {
   return (
-    <section className={`w-full h-auto ${className}`}>
-      {/* Image Container */}
-      <div className="w-full bg-white py-8 md:py-12">
-        <div className="max-w-7xl mx-auto px-4">
-          <div className="w-full h-[250px] rounded-3xl overflow-hidden">
-            <img 
+    <section className={`w-full 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 h-[200px] md:h-[300px] rounded-3xl overflow-hidden">
+            <img
               src={imageSrc}
               alt={imageAlt}
               className="w-full h-full object-cover object-center"
@@ -34,32 +34,32 @@ const IntroSection: React.FC<IntroSectionProps> = ({
         </div>
       </div>
 
-      {/* Content Container */}
-      <div className="w-full bg-[#FFF1E7] relative overflow-hidden">
-        <div className="max-w-7xl mx-auto px-4 py-8 md:py-12">
-          <div className="max-w-4xl relative z-10">
-            <h1 className="text-3xl md:text-[2.5rem] font-bold text-gray-900 mb-6 leading-tight">
+      {/* 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">
               {title}
             </h1>
 
-            <p className="text-base md:text-lg text-gray-700 mb-4">
+            <p className="text-base md:text-lg text-gray-700 mb-6 leading-relaxed">
               {description}
             </p>
 
             {objectiveText && (
-              <p className="text-base md:text-lg text-gray-800 mb-3">
+              <p className="text-lg md:text-xl text-gray-900 font-semibold mb-4">
                 {objectiveText}
               </p>
             )}
 
-            <p className="text-xl md:text-2xl font-bold text-[#F34A0D]">
+            <p className="text-lg md:text-xl font-bold text-[#F34A0D]">
               {highlightedText}
             </p>
           </div>
 
-          {/* Decorative Circle */}
-          <div 
-            className="absolute bottom-0 right-0 w-48 h-48 md:w-72 md:h-72 bg-yellow-200 rounded-full opacity-50 translate-x-1/3 translate-y-1/3" 
+          {/* Círculo decorativo */}
+          <div
+            className="absolute bottom-0 right-0 w-40 h-40 md:w-56 md:h-56 bg-yellow-400 rounded-full opacity-80 translate-x-12 translate-y-12"
             aria-hidden="true"
           />
         </div>
@@ -68,4 +68,4 @@ const IntroSection: React.FC<IntroSectionProps> = ({
   );
 };
 
-export default IntroSection;
+export default IntroSection;
diff --git a/src/pages/Solutions/index.tsx b/src/pages/Solutions/index.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import Hero from './Hero';
 import IntroSection from '../../components/IntroSection';
+import BannerIntro from '../../components/BannerIntro';
 
 const Solutions: React.FC = () => {
 
@@ -16,7 +17,12 @@ const Solutions: React.FC = () => {
         title="Consultoria empresarial sob medida para pequenos empreendedores"
         description="A Xperience oferece serviços inovadores, projetados para atender as principais necessidades de pequenos negócios, desde organização de processos até estratégias de expansão."
         highlightedText="trazer resultados rápidos e eficientes, com soluções práticas e acessíveis!!!"
-        className='bg-[#FFFF]'
+      />
+      <BannerIntro 
+        imageSrc={new URL('/public/solutions/consulting-intro.png', import.meta.url).href}
+        title="Soluções"
+        highlightedText="personalizadas"
+        textColor="#FFFFFF"
       />
     </div>
   );