up

govinda777 · Jan 1, 2025 · e338b3d · e338b3d
1 parent b2be4a9
commit e338b3d
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 42 deletions.
diff --git a/public/home/solutions.png b/public/home/solutions.png
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -0,0 +1,73 @@
+
+// components/Hero/index.tsx
+import React from 'react';
+
+interface HeroProps {
+  title: string;
+  highlightedText: string;
+  subtitle: string;
+  description: string;
+  emphasizedText: string;
+  buttonText: string;
+  buttonIcon?: React.ReactNode;
+  imageSrc: string;
+  imageAlt: string;
+}
+
+const Hero: React.FC<HeroProps> = ({
+  title,
+  highlightedText,
+  subtitle,
+  description,
+  emphasizedText,
+  buttonText,
+  buttonIcon = "✨",
+  imageSrc,
+  imageAlt
+}) => {
+  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="flex flex-col max-w-2xl ml-auto">
+          <h1 className="text-white text-6xl font-normal leading-tight mb-4">
+            {title}
+            <br />
+            <span className="text-white text-[50px] font-bold block my-2">
+              {highlightedText}
+            </span>
+            <span className="text-white text-7xl">
+              {subtitle}
+            </span>
+          </h1>
+
+          <p className="text-white text-2xl mb-12 max-w-2xl">
+            {description}
+            <span className="font-bold">{emphasizedText}</span>
+          </p>
+
+          <button className="bg-black text-white text-2xl font-medium rounded-full px-12 py-4 w-fit flex items-center gap-2 hover:shadow-lg transition-all">
+            {buttonText}
+            <span className="inline-block ml-1">{buttonIcon}</span>
+          </button>
+        </div>
+
+        <div className="absolute right-0 bottom-0 hidden md:block">
+          <img 
+            src={imageSrc}
+            alt={imageAlt} 
+            className="w-[500px] h-auto"
+          />
+        </div>
+        <div className="block md:hidden relative flex justify-end items-end">
+          <img 
+            src={imageSrc}
+            alt={imageAlt}
+            className="w-full max-w-[500px] h-auto"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/src/pages/Home/Solutions.tsx b/src/pages/Home/Solutions.tsx
@@ -0,0 +1,72 @@
+// Home/Solutions.tsx
+import React from 'react';
+
+interface SolutionsProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  linkText: string;
+  solutionsImageSrc: string;
+  solutionsImageAlt?: string;
+}
+
+const Solutions: React.FC<SolutionsProps> = ({
+  title,
+  subtitle,
+  description,
+  linkText,
+  solutionsImageSrc,
+  solutionsImageAlt = "Equipe trabalhando",
+}) => {
+  return (
+    <div className="w-full bg-white relative overflow-hidden">
+      <div className="max-w-none grid grid-cols-1 md:grid-cols-2 gap-12 items-center relative">
+        {/* Imagem */}
+        <div className="relative h-full">
+          <div className="absolute inset-0">
+            <img 
+              src={solutionsImageSrc} 
+              alt={solutionsImageAlt}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+
+        {/* Conteúdo */}
+        <div className="flex flex-col max-w-2xl py-24 px-4 md:pr-[calc((100%-74rem)/2)]">
+          <h2 className="text-gray-900 text-5xl font-bold mb-8">
+            {title}
+            <br />
+            <span className="block mt-2">{subtitle}</span>
+          </h2>
+
+          <p className="text-gray-600 text-xl mb-8">
+            {description}
+          </p>
+
+          <a 
+            href="/solucoes" 
+            className="text-orange-500 text-xl font-semibold flex items-center hover:text-orange-600 transition-colors"
+          >
+            {linkText}
+            <svg 
+              className="ml-2 w-6 h-6" 
+              fill="none" 
+              stroke="currentColor" 
+              viewBox="0 0 24 24"
+            >
+              <path 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                strokeWidth={2} 
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Solutions;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,49 +1,32 @@
+// pages/Home/index.tsx
 import React from 'react';
+import Hero from '../../components/Hero';
+import Solutions from './Solutions';
 
-const Home = () => {
+const Home: React.FC = () => {
   const heroImage = new URL('/public/home/hero.png', import.meta.url).href;
-  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="flex flex-col max-w-2xl ml-auto">
-          <h1 className="text-white text-6xl font-normal leading-tight mb-4">
-            Explore nossa
-            <br />
-            <span className="text-white text-[50px] font-bold block my-2">
-              "IA do empreendedor"
-            </span>
-            <span className="text-white text-7xl">
-              e avalie o seu negócio
-            </span>
-          </h1>
-
-          <p className="text-white text-2xl mb-12 max-w-2xl">
-            Descubra como valorizar sua empresa e encantar seus clientes de forma rápida e
-            <span className="font-bold"> GRATUITA</span>.
-          </p>
-
-          <button className="bg-black text-white text-2xl font-medium rounded-full px-12 py-4 w-fit flex items-center gap-2 hover:shadow-lg transition-all">
-            Descubra
-            <span className="inline-block ml-1">✨</span>
-          </button>
-        </div>
+  const solutionsImage = new URL('/public/home/solutions.png', import.meta.url).href;
 
-        <div className="absolute right-0 bottom-0 hidden md:block">
-          <img 
-            src={heroImage}
-            alt="Empreendedor" 
-            className="w-[500px] h-auto"
-          />
-        </div>
-        <div className="block md:hidden relative flex justify-end items-end">
-          <img 
-            src={heroImage}
-            alt="Empreendedor"
-            className="w-full max-w-[500px] h-auto"
-          />
-        </div>
-      </div>
-    </div>
+  return (
+    <>
+      <Hero 
+        title="Explore nossa"
+        highlightedText='"IA do empreendedor"'
+        subtitle="e avalie o seu negócio"
+        description="Descubra como valorizar sua empresa e encantar seus clientes de forma rápida e"
+        emphasizedText=" GRATUITA"
+        buttonText="Descubra"
+        imageSrc={heroImage}
+        imageAlt="Empreendedor"
+      />
+      <Solutions
+        title="Impulsione seu"
+        subtitle="negócio com soluções práticas e inovadoras"
+        description="Na Xperience Consultoria Empresarial, oferecemos soluções práticas e imediatas para pequenos e empreendedores, combinando a experiência humana com a inovação da Inteligência Artificial. Somos especialistas em ajudar pequenos empreendedores a otimizar seus negócios de forma simples, eficiente e de impacto imediato."
+        linkText="Conheça todas as soluções"
+        solutionsImageSrc={solutionsImage}
+      />
+    </>
   );
 };