Update src/app/page.tsx

Merge version_10 into main

src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Calendar, Zap, Lightbulb, Home, Sun, TrendingUp, HelpCircle, Mail } from 'lucide-react';
+import { Calendar, Zap, Lightbulb, Home, Sun, TrendingUp, HelpCircle, Mail, MessageCircle } from 'lucide-react';
 import { useState } from 'react';
 import Input from '@/components/form/Input';
 
@@ -34,6 +34,11 @@ export default function LandingPage() {
 
   const savings = calculateSavings();
 
+  const handleWhatsAppClick = () => {
+    const message = encodeURIComponent('Olá! Gostaria de saber mais sobre energia solar fotovoltaica.');
+    window.open(`https://wa.me/5515988033907?text=${message}`, '_blank');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -65,16 +70,16 @@ export default function LandingPage() {
           title="Energia Solar Fotovoltaica para Sorocaba"
           description="Transforme sua conta de energia com soluções de energia solar fotovoltaica profissionais. Instalação, projeto, homologação e manutenção em todo território brasileiro."
           background={{ variant: "sparkles-gradient" }}
-          tag="Energia Renovável Desde 2019"
+          tag="Energia Renovável Desde 2023"
           tagIcon={Zap}
-          avatarText="Confiança por 1000+ clientes"
+          avatarText="Confiança por 30+ clientes"
           avatars={[
             { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AleAYJVuZaVjviN7tEK4F5SJ6k/professional-portrait-of-satisfied-custo-1773171516633-a9739c56.png", alt: "Cliente Eletrosolartec" },
             { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AleAYJVuZaVjviN7tEK4F5SJ6k/another-professional-portrait-of-satisfi-1773171517296-7bfddf1b.png", alt: "Cliente Eletrosolartec" },
             { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AleAYJVuZaVjviN7tEK4F5SJ6k/professional-headshot-of-another-satisfi-1773171517163-b04595bc.png", alt: "Cliente Eletrosolartec" }
           ]}
           buttons={[
-            { text: "Simule A sua Economia Grátis", onClick: () => setShowCalculator(!showCalculator) },
+            { text: "Simule A sua Economia Grátis", onClick: () => setShowCalculator(true) },
             { text: "Saiba Mais", href: "about" }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AleAYJVuZaVjviN7tEK4F5SJ6k/modern-solar-photovoltaic-panels-install-1773171517232-83f497e5.png"
@@ -89,49 +94,79 @@ export default function LandingPage() {
       </div>
 
       {showCalculator && (
-        <div id="calculator" data-section="calculator" className="py-16 px-6 bg-card rounded-lg max-w-2xl mx-auto">
-          <div className="text-center mb-8">
-            <h2 className="text-3xl font-bold mb-4">Calculadora de Economia Solar</h2>
-            <p className="text-foreground opacity-75">Digite sua conta de energia atual e veja quanto você pode economizar com painéis solares Eletrotech</p>
-          </div>
-          
-          <div className="space-y-6">
-            <div>
-              <label className="block text-sm font-medium mb-2">Sua Conta de Energia Mensal (R$)</label>
-              <Input
-                value={billValue}
-                onChange={setBillValue}
-                type="number"
-                placeholder="Ex: 250.00"
-                required
-              />
-            </div>
-
-            {savings && (
-              <div className="bg-background rounded-lg p-6 border border-accent">
-                <h3 className="text-xl font-semibold mb-4">Sua Economia Estimada com Eletrotech</h3>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="text-center p-4 bg-card rounded-lg">
-                    <p className="text-sm text-foreground opacity-75 mb-2">Economia Mensal</p>
-                    <p className="text-2xl font-bold text-primary-cta">R$ {savings.monthly}</p>
-                  </div>
-                  <div className="text-center p-4 bg-card rounded-lg">
-                    <p className="text-sm text-foreground opacity-75 mb-2">Economia Anual</p>
-                    <p className="text-2xl font-bold text-primary-cta">R$ {savings.yearly}</p>
-                  </div>
-                </div>
-                <p className="text-xs text-foreground opacity-60 mt-4 text-center">
-                  *Estimativa baseada em 70% de redução com sistemas solares Eletrotech. Consulte nossos especialistas para análise personalizada.
-                </p>
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div id="calculator" data-section="calculator" className="bg-card rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-lg">
+            <div className="p-8">
+              <div className="text-center mb-8">
+                <h2 className="text-3xl font-bold mb-4">Calculadora de Economia Solar</h2>
+                <p className="text-foreground opacity-75">Digite sua conta de energia atual e veja quanto você pode economizar com painéis solares Eletrotech</p>
               </div>
-            )}
+              
+              <div className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">Sua Conta de Energia Mensal (R$)</label>
+                  <Input
+                    value={billValue}
+                    onChange={setBillValue}
+                    type="number"
+                    placeholder="Ex: 250.00"
+                    required
+                  />
+                </div>
 
-            <button
-              onClick={() => setShowCalculator(false)}
-              className="w-full py-3 px-4 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity"
-            >
-              Fechar Calculadora
-            </button>
+                {savings && (
+                  <div className="bg-background rounded-lg p-6 border border-accent">
+                    <h3 className="text-xl font-semibold mb-4">Sua Economia Estimada com Eletrotech</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="text-center p-4 bg-card rounded-lg">
+                        <p className="text-sm text-foreground opacity-75 mb-2">Economia Mensal</p>
+                        <p className="text-2xl font-bold text-primary-cta">R$ {savings.monthly}</p>
+                      </div>
+                      <div className="text-center p-4 bg-card rounded-lg">
+                        <p className="text-sm text-foreground opacity-75 mb-2">Economia Anual</p>
+                        <p className="text-2xl font-bold text-primary-cta">R$ {savings.yearly}</p>
+                      </div>
+                    </div>
+                    <p className="text-xs text-foreground opacity-60 mt-4 text-center">
+                      *Estimativa baseada em 70% de redução com sistemas solares Eletrotech. Consulte nossos especialistas para análise personalizada.
+                    </p>
+                    <div className="mt-6 flex gap-3">
+                      <button
+                        onClick={handleWhatsAppClick}
+                        className="flex-1 py-3 px-4 bg-primary-cta text-primary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
+                      >
+                        <MessageCircle size={18} />
+                        Contato WhatsApp
+                      </button>
+                      <button
+                        onClick={() => setShowCalculator(false)}
+                        className="flex-1 py-3 px-4 bg-secondary-cta text-secondary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity border border-accent"
+                      >
+                        Fechar
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {!savings && billValue && (
+                  <button
+                    onClick={() => setShowCalculator(false)}
+                    className="w-full py-3 px-4 bg-secondary-cta text-secondary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity border border-accent"
+                  >
+                    Fechar Calculadora
+                  </button>
+                )}
+
+                {!savings && !billValue && (
+                  <button
+                    onClick={() => setShowCalculator(false)}
+                    className="w-full py-3 px-4 bg-secondary-cta text-secondary-cta-text rounded-lg font-medium hover:opacity-90 transition-opacity border border-accent"
+                  >
+                    Fechar Calculadora
+                  </button>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       )}
@@ -192,10 +227,10 @@ export default function LandingPage() {
           gridVariant="uniform-all-items-equal"
           metrics={[
             {
-              id: "1",              value: "6",              title: "Anos",              description: "De experiência em energia solar fotovoltaica",              icon: Calendar
+              id: "1",              value: "3",              title: "Anos",              description: "De experiência em energia solar fotovoltaica",              icon: Calendar
             },
             {
-              id: "2",              value: "1000",              title: "Instalações",              description: "Sistemas solares instalados com sucesso",              icon: Zap
+              id: "2",              value: "30",              title: "Instalações",              description: "Sistemas solares instalados com sucesso",              icon: Zap
             },
             {
               id: "3",              value: "100",              title: "MWh",              description: "Energia gerada mensalmente para nossos clientes",              icon: Lightbulb
@@ -260,7 +295,7 @@ export default function LandingPage() {
         <ContactCenter
           tag="Vamos Conversar"
           title="Solicite seu Orçamento"
-          description="Entre em contato conosco para avaliar sua propriedade e receber uma proposta personalizada de energia solar. Nossa equipe está pronta para responder suas dúvidas."
+          description="Entre em contato conosco para avaliar sua propriedade e receber uma proposta personalizada de energia solar. Nossa equipe está pronta para responder suas dúvidas. WhatsApp: (15) 98803-3907"
           tagIcon={Mail}
           background={{ variant: "rotated-rays-animated" }}
           useInvertedBackground={false}
@@ -295,7 +330,7 @@ export default function LandingPage() {
               title: "Legal",              items: [
                 { label: "Política de Privacidade", href: "#" },
                 { label: "Termos de Serviço", href: "#" },
-                { label: "Telefone", href: "#" },
+                { label: "(15) 98803-3907", href: "https://wa.me/5515988033907" },
                 { label: "Sorocaba, SP", href: "#" }
               ]
             }
@@ -304,4 +339,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}