Update src/app/page.tsx

Merge version_19 into main

src/app/page.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
@@ -60,49 +61,56 @@ export default function LandingPage() {
       </div>
 
       <div id="specialties" data-section="specialties">
-        <div style={{ padding: "var(--vw-3) var(--vw-1_5)", textAlign: "center", backgroundColor: "var(--background-accent)" }}>
-          <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem", fontWeight: "bold" }}>Tabela de Exames e Serviços</h2>
-          <div style={{ overflowX: "auto", margin: "0 auto", maxWidth: "100%" }}>
-            <table style={{
-              width: "100%",              borderCollapse: "collapse",              backgroundColor: "var(--card)",              borderRadius: "8px",              overflow: "hidden",              boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
-            }}>
-              <thead>
-                <tr style={{ backgroundColor: "var(--primary-cta)", color: "var(--primary-cta-text)" }}>
-                  <th style={{ padding: "1rem", textAlign: "left", borderRight: "1px solid var(--accent)" }}>Exame/Serviço</th>
-                  <th style={{ padding: "1rem", textAlign: "left", borderRight: "1px solid var(--accent)" }}>Descrição</th>
-                  <th style={{ padding: "1rem", textAlign: "left" }}>Indicação</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Consulta Oftalmológica</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Avaliação completa da saúde ocular com anamnese detalhada e testes de visão.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Para todos que desejam verificar a saúde dos olhos</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Exame de Vista</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Diagnóstico para correção visual adequada e prescrição de óculos ou lentes de contato.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Dificuldade para enxergar, visão borrada ou embaçada</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Diagnóstico de Doenças Oculares</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Identificação e tratamento de glaucoma, catarata, inflamações e outras patologias.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Suspeita de glaucoma, catarata ou outras doenças oculares</td>
-                </tr>
-                <tr style={{ borderBottom: "1px solid var(--accent)" }}>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Acompanhamento Visual</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Monitoramento contínuo da saúde ocular ao longo do tempo para prevenção e controle.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Pacientes com histórico de doenças oculares ou idosos</td>
-                </tr>
-                <tr>
-                  <td style={{ padding: "1rem", fontWeight: "bold", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Avaliação para Óculos</td>
-                  <td style={{ padding: "1rem", borderRight: "1px solid var(--accent)", color: "var(--foreground)" }}>Determinação precisa da receita ideal com conforto visual máximo.</td>
-                  <td style={{ padding: "1rem", color: "var(--foreground)" }}>Necessidade de correção visual ou atualização de prescrição</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <FeatureCardOne
+          title="Especialidades e Serviços"
+          description="Oferecemos uma gama completa de serviços oftalmológicos com diagnóstico preciso e tratamento eficaz."
+          tag="Serviços"
+          features={[
+            {
+              title: "Consulta Oftalmológica",              description: "Avaliação completa da saúde ocular com anamnese detalhada, teste de acuidade visual, e avaliação do estado geral dos olhos para identificar qualquer problema de visão ou doença ocular.",              imageSrc: "http://img.b2bpic.net/free-photo/woman-having-eye-problem-pain-doctor-working-office-listening-patient-she-is-explaining-her-symptoms-healtcare-assistance-concept_657921-837.jpg",              imageAlt: "consulta médico paciente consultório oftalmologia"
+            },
+            {
+              title: "Teste de Refração",              description: "Diagnóstico preciso de miopia, hipermetropia e astigmatismo para prescrição correta de óculos ou lentes de contato com máximo conforto visual.",              imageSrc: "http://img.b2bpic.net/free-photo/eye-doctor-with-female-patient-examination-modern-clinic-ophthalmologist-is-using-special-medical-equipment-eye-health_657921-161.jpg",              imageAlt: "exame vista oftalmológico óptico tecnologia"
+            },
+            {
+              title: "Tonometria (Medição da Pressão Intraocular)",              description: "Teste essencial para avaliação do risco de glaucoma através da medição não invasiva da pressão dos olhos utilizando equipamento de última geração.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-eye-sight-check_23-2149082434.jpg",              imageAlt: "tonometria pressão intraocular glaucoma"
+            },
+            {
+              title: "Avaliação de Catarata",              description: "Diagnóstico e avaliação de opacidade do cristalino com recomendação de tratamento adequado, incluindo possibilidade de cirurgia quando necessário.",              imageSrc: "http://img.b2bpic.net/free-photo/doctor-testing-patient-eyesight_23-2149230018.jpg",              imageAlt: "avaliação catarata cristalino diagnóstico"
+            },
+            {
+              title: "Exame de Campo Visual",              description: "Teste especializado que mapeia toda a visão periférica e central para detectar danos ao nervo óptico e outras condições oculares graves.",              imageSrc: "http://img.b2bpic.net/free-photo/glasses-male-hands-workplace-front-computer_169016-18822.jpg",              imageAlt: "exame campo visual computador teste"
+            },
+            {
+              title: "Retinografia (Fotografia da Retina)",              description: "Captura de imagens de alta resolução da retina para documentação e monitoramento de condições como retinopatia diabética e degeneração macular.",              imageSrc: "http://img.b2bpic.net/free-photo/woman-having-eye-problem-pain-doctor-working-office-listening-patient-she-is-explaining-her-symptoms-healtcare-assistance-concept_657921-837.jpg",              imageAlt: "retinografia fotografia retina fundo de olho"
+            },
+            {
+              title: "Avaliação de Retinopatia Diabética",              description: "Exame completo e monitoramento de complicações oculares em pacientes diabéticos, com detecção precoce de lesões vasculares na retina.",              imageSrc: "http://img.b2bpic.net/free-photo/eye-doctor-with-female-patient-examination-modern-clinic-ophthalmologist-is-using-special-medical-equipment-eye-health_657921-161.jpg",              imageAlt: "retinopatia diabética retina complicações"
+            },
+            {
+              title: "Avaliação de Degeneração Macular",              description: "Diagnóstico e monitoramento de problemas na mácula com recomendações de tratamento para preservar a visão central.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-eye-sight-check_23-2149082434.jpg",              imageAlt: "degeneração macular visão central"
+            },
+            {
+              title: "Avaliação de Glaucoma",              description: "Diagnóstico completo e acompanhamento especializado de glaucoma com avaliação do nervo óptico, pressão intraocular e campo visual.",              imageSrc: "http://img.b2bpic.net/free-photo/doctor-testing-patient-eyesight_23-2149230018.jpg",              imageAlt: "glaucoma nervo óptico diagnóstico avaliação"
+            },
+            {
+              title: "Avaliação de Inflamação Ocular (Uveíte)",              description: "Diagnóstico e tratamento de inflamações dentro do olho com investigação da causa e prescrição de terapia adequada.",              imageSrc: "http://img.b2bpic.net/free-photo/glasses-male-hands-workplace-front-computer_169016-18822.jpg",              imageAlt: "uveíte inflamação ocular diagnóstico"
+            },
+            {
+              title: "Prescrição de Óculos e Lentes de Contato",              description: "Determinação precisa da receita ideal com conforto visual máximo, oferecendo opções adequadas de óculos e lentes de contato para cada caso.",              imageSrc: "http://img.b2bpic.net/free-photo/woman-having-eye-problem-pain-doctor-working-office-listening-patient-she-is-explaining-her-symptoms-healtcare-assistance-concept_657921-837.jpg",              imageAlt: "óculos lentes de contato receita prescrição"
+            },
+            {
+              title: "Acompanhamento de Saúde Ocular",              description: "Monitoramento contínuo da saúde visual ao longo do tempo com avaliações periódicas para prevenção e controle de condições oculares.",              imageSrc: "http://img.b2bpic.net/free-photo/eye-doctor-with-female-patient-examination-modern-clinic-ophthalmologist-is-using-special-medical-equipment-eye-health_657921-161.jpg",              imageAlt: "acompanhamento saúde visual monitoramento"
+            },
+            {
+              title: "Orientação em Saúde Visual e Prevenção",              description: "Educação e recomendações personalizadas para proteção dos olhos, prevenção de doenças oculares e manutenção de uma boa saúde visual ao longo da vida.",              imageSrc: "http://img.b2bpic.net/free-photo/man-having-eye-sight-check_23-2149082434.jpg",              imageAlt: "orientação saúde visual prevenção educação"
+            }
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
       </div>
 
       <div id="testimonials" data-section="testimonials">