Merge version_2 into main #2
298
src/app/page.tsx
298
src/app/page.tsx
@@ -2,200 +2,142 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLarge"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Sobre", id: "about" },
|
||||
{ name: "Serviços", id: "features" },
|
||||
{ name: "Depoimentos", id: "testimonials" },
|
||||
{ name: "Contato", id: "contact" },
|
||||
]}
|
||||
brandName="Ethos Medical"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Sobre", id: "about" },
|
||||
{ name: "Serviços", id: "features" },
|
||||
{ name: "Resultados", id: "metrics" },
|
||||
{ name: "Contato", id: "contact" },
|
||||
]}
|
||||
brandName="Ethos Medical"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Marketing Médico com Estratégia de Elite"
|
||||
description="Transformamos sua autoridade clínica em resultados concretos. Marketing de alta performance para o médico que busca excelência."
|
||||
buttons={[
|
||||
{
|
||||
text: "Agendar Consulta", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/notepad-wireless-keyboard-with-stethoscope-medicines-surface_23-2148213962.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Marketing Médico de Alta Precisão"
|
||||
description="Elevamos o patamar de autoridade da sua prática clínica através de estratégias digitais futuristas e tecnologia de ponta."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Agendar Estratégia", href: "#contact" }]}
|
||||
leftCarouselItems={[{ imageSrc: "https://img.b2bpic.net/free-photo/doctor-working-with-digital-tablet_23-2148213962.jpg" }]}
|
||||
rightCarouselItems={[{ imageSrc: "https://img.b2bpic.net/free-photo/futuristic-digital-stethoscope-with-abstract-medical-data-background_482257-4877.jpg" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Ethos Medical entende a complexidade do setor de saúde"
|
||||
buttons={[
|
||||
{
|
||||
text: "Saiba Mais", href: "#features"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[{ type: "text", content: "Tecnologia e Medicina em Sintonia" }]}
|
||||
buttons={[{ text: "Conheça a Ethos", href: "#features" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1", title: "Gestão de Tráfego", author: "Equipe Ethos", description: "Ads qualificados para pacientes ideais.", tags: ["Performance"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-businessmen-analyzing-bar-charts-laptop_1098-344.jpg"},
|
||||
{
|
||||
id: "f2", title: "Branding Médico", author: "Equipe Ethos", description: "Construção de marca e autoridade.", tags: ["Estratégia"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-laptop-with-eyeglass-stitched-heart-cup-tea-stethoscope-against-yellow-background_23-2148214044.jpg"},
|
||||
{
|
||||
id: "f3", title: "CRM e Retenção", author: "Equipe Ethos", description: "Transforme interessados em pacientes.", tags: ["Conversão"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/surgeon-holding-tablet_23-2147646730.jpg"},
|
||||
]}
|
||||
title="Serviços de Marketing Especializado"
|
||||
description="Ferramentas e estratégias desenhadas para o cenário médico atual."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
title="Ecossistema de Alta Performance"
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Growth Hacking", description: "Metodologias ágeis para aquisição de pacientes.", imageSrc: "https://img.b2bpic.net/free-photo/top-view-businessmen-analyzing-bar-charts-laptop_1098-344.jpg", titleImageSrc: "", buttonText: "Saiba mais" },
|
||||
{ title: "Branding Tecnológico", description: "Design e identidade de elite para o setor médico.", imageSrc: "https://img.b2bpic.net/free-photo/digital-medical-branding-abstract_23-2148214044.jpg", titleImageSrc: "", buttonText: "Saiba mais" },
|
||||
{ title: "CRM Inteligente", description: "Retenção e automação focada em resultados.", imageSrc: "https://img.b2bpic.net/free-photo/surgeon-holding-tablet_23-2147646730.jpg", titleImageSrc: "", buttonText: "Saiba mais" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Dr. Silva", handle: "Cirurgião", testimonial: "Transformação completa no fluxo do consultório.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-patient-man-looking-into-camera-waiting-doctors-start-stomatology-surgery-sitting-dental-chair_482257-4877.jpg"},
|
||||
{
|
||||
id: "2", name: "Dra. Costa", handle: "Dermatologista", testimonial: "O marketing que realmente entende de medicina.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crazy-chef-happy-expression_1194-1355.jpg"},
|
||||
{
|
||||
id: "3", name: "Dr. Pereira", handle: "Ortopedista", testimonial: "A Ethos elevou o nível da minha autoridade digital.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-tilting-head-middle-aged-man-wearing-white-t-shirt-with-tie-crossing-hands-isolated-orange-wall_141793-103462.jpg"},
|
||||
{
|
||||
id: "4", name: "Dra. Souza", handle: "Ginecologista", testimonial: "Atendimento primoroso e resultados rápidos.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-staff-standing-airport_107420-85078.jpg"},
|
||||
{
|
||||
id: "5", name: "Dr. Oliveira", handle: "Cardiologista", testimonial: "Indico para todos os meus colegas de profissão.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-doctor-is-unhappy-posing_179666-43652.jpg"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="O que dizem os especialistas"
|
||||
description="Resultados comprovados no mercado médico nacional."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Performance em Tempo Real"
|
||||
tag="Dados de Alta Precisão"
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", value: "98%", description: "Eficiência no ROI" },
|
||||
{ id: "m2", value: "150+", description: "Clínicas de Elite" },
|
||||
{ id: "m3", value: "4.9/5", description: "Avaliação média" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "+150%", title: "Aumento no fluxo", items: ["Agendamentos", "Pacientes"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "4.9", title: "Nota média", items: ["Satisfaction", "Feedback"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "80+", title: "Clínicas Ativas", items: ["Brasil", "Estratégia"],
|
||||
},
|
||||
]}
|
||||
title="Nossa Performance em Números"
|
||||
description="Impacto direto no crescimento de clínicas."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="A Ethos Medical mudou a forma como enxergamos nosso marketing. Resultado, autoridade e tecnologia em um só lugar."
|
||||
rating={5}
|
||||
author="Dr. Carlos Eduardo"
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="opacity"
|
||||
avatars={[{ src: "https://img.b2bpic.net/free-photo/doctor-posing-with-arms-crossed_141793-103462.jpg", alt: "Dr. Carlos" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Como funciona?", content: "Análise completa do seu perfil."},
|
||||
{
|
||||
id: "q2", title: "Qual o prazo?", content: "Resultados visíveis nos primeiros 30 dias."},
|
||||
{
|
||||
id: "q3", title: "Atende em todo Brasil?", content: "Sim, atendimento remoto premium."},
|
||||
]}
|
||||
sideTitle="Dúvidas Frequentes"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Perguntas e Respostas"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Por que a Ethos?", content: "Somos especialistas em marketing médico com foco em tecnologia e autoridade." },
|
||||
{ id: "q2", title: "Como é o contato?", content: "Você pode falar conosco diretamente pelo telefone 9399225145." }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"MedClinic", "TechHealth", "GlobalMedicine", "VitaLife", "BioCare", "AdvanceMed", "FutureHealth"]}
|
||||
title="Presença em Grandes Congressos"
|
||||
description="Marcas que confiam na Ethos Medical."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Pronto para evoluir?"
|
||||
description="Entre em contato conosco e transforme sua autoridade médica. Estamos prontos para escalar."
|
||||
inputs={[
|
||||
{ name: "nome", type: "text", placeholder: "Seu nome" },
|
||||
{ name: "whatsapp", type: "tel", placeholder: "(00) 9399225145" }
|
||||
]}
|
||||
textarea={{ name: "mensagem", placeholder: "Conte um pouco sobre sua clínica" }}
|
||||
buttonText="Enviar Solicitação"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/abstract-digital-technology-background_23-2148213962.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
text="Pronto para escalar sua clínica? Entre em contato agora: 9399225145"
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp", href: "https://wa.me/9399225145"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Ethos Medical"
|
||||
columns={[
|
||||
{
|
||||
title: "Contato", items: [
|
||||
{
|
||||
label: "9399225145", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "Instagram", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Ethos Medical", items: [{ label: "Sobre", href: "#about" }, { label: "Contato: 9399225145", href: "tel:9399225145" }] },
|
||||
{ title: "Soluções", items: [{ label: "Growth", href: "#" }, { label: "Branding", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2025 Ethos Medical"
|
||||
bottomRightText="Inovação em Marketing Médico"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #15479c;
|
||||
--background: #010912;
|
||||
--card: #152840;
|
||||
--foreground: #e6f0ff;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #0e1a29;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #c4c4c4;
|
||||
--accent: #004a93;
|
||||
--background-accent: #3f5c79;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user