320 lines
16 KiB
TypeScript
320 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
import { Award, Sparkles, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-stagger"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="smallMedium"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="gradient-bordered"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{
|
||
name: "Início", id: "#hero"},
|
||
{
|
||
name: "Sobre", id: "#about"},
|
||
{
|
||
name: "Serviços", id: "#features"},
|
||
{
|
||
name: "Resultados", id: "#metrics"},
|
||
{
|
||
name: "Equipe", id: "#team"},
|
||
{
|
||
name: "Contato", id: "#contact"},
|
||
]}
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ESTgaBFNeXHGAr7vM2mz6W3OKp/uploaded-1780171119136-vovcnbqt.jpg"
|
||
logoAlt="Vision Dope Logo"
|
||
brandName="Vision Dope"
|
||
button={{
|
||
text: "Mostre-nos sua visão", href: "#contact"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDualMedia
|
||
background={{
|
||
variant: "sparkles-gradient"}}
|
||
title="Design que torna as marcas irresistíveis"
|
||
description="Criamos peças criativas ousadas e premium que transformam visões ambiciosas em domínio de mercado. Estratégia, design e storytelling que realmente convertem."
|
||
tag="Agência Premium"
|
||
buttons={[
|
||
{
|
||
text: "Mostre-nos sua visão", href: "#contact"},
|
||
]}
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/textured-gold-background_53876-88777.jpg", imageAlt: "Abstract digital creativity representing design agency innovation"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-goal-mission-plan-strategy-icon-symbol_53876-122767.jpg", imageAlt: "Dynamic visual representing data analytics and market dominance with eye motif"}
|
||
]}
|
||
mediaAnimation="slide-up"
|
||
rating={5}
|
||
ratingText="Excelência em Design e Marketing"
|
||
tagIcon={Sparkles}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextSplitAbout
|
||
useInvertedBackground={true}
|
||
title="Elevando Marcas com Visão Estratégica"
|
||
description={[
|
||
"Na Vision Dope, acreditamos que o design e o marketing são mais do que apenas estética – são a espinha dorsal do sucesso de uma marca. Nossa agência premium combina arte e análise para criar identidades inesquecíveis e campanhas que geram resultados tangíveis.", "Trabalhamos com diretores de criação e líderes de marketing que buscam excelência, startups de tecnologia que precisam de um parceiro para escalar sua presença e marcas de luxo que exigem um posicionamento impecável. Nosso foco é a transparência, a expertise da equipe e um ROI comprovado, para que sua visão se torne domínio de mercado."]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwelve
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "design-inovador", label: "Design Inovador", title: "Identidades Visuais Cativantes", items: [
|
||
"Branding Estratégico", "UI/UX de Alta Performance", "Design Gráfico Premium", "Motion Graphics e Animação"],
|
||
buttons: [
|
||
{
|
||
text: "Ver Portfólio", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
id: "marketing-estrategico", label: "Marketing Estratégico", title: "Campanhas que Convertem", items: [
|
||
"Estratégia de Conteúdo", "SEO e SEM Avançados", "Marketing de Mídias Sociais", "Automação e CRM"],
|
||
buttons: [
|
||
{
|
||
text: "Nossos Resultados", href: "#metrics"},
|
||
],
|
||
},
|
||
{
|
||
id: "consultoria-premium", label: "Consultoria Premium", title: "Orientação para o Crescimento", items: [
|
||
"Análise de Mercado", "Planejamento de Marca", "Workshops Personalizados", "Otimização de Conversão"],
|
||
buttons: [
|
||
{
|
||
text: "Agendar Consulta", href: "#contact"},
|
||
],
|
||
},
|
||
]}
|
||
title="Nossos Serviços Premium"
|
||
description="Oferecemos uma gama completa de soluções criativas e estratégicas para elevar sua marca e garantir domínio de mercado."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
names={[
|
||
"InnovateTech Solutions", "Luxus Brands Group", "Global FinCorp", "Apex Digital Media", "Future Foods Co.", "Veridian Health Systems", "Quantum Robotics", "Elite Automotive", "Stellar Ventures"]}
|
||
title="Parcerias que Impulsionam o Sucesso"
|
||
description="Orgulhosamente colaboramos com marcas ambiciosas em diversos setores, transformando suas visões em realidade."
|
||
showCard={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardEleven
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "growth", value: "+200%", title: "Crescimento de Engajamento", description: "Impulsionamos o engajamento da audiência com estratégias de conteúdo e social media inovadoras.", imageSrc: "http://img.b2bpic.net/free-photo/motivation-is-important_1098-16025.jpg", imageAlt: "Growth chart showing over 200% increase"},
|
||
{
|
||
id: "roi", value: "4.5x", title: "Retorno Sobre Investimento", description: "Nossas campanhas geram um retorno significativamente alto para nossos clientes.", imageSrc: "http://img.b2bpic.net/free-photo/analysis-data-information-insight-plan-process-concept_53876-121051.jpg", imageAlt: "Magnifying glass over data showing ROI"},
|
||
{
|
||
id: "satisfaction", value: "98%", title: "Satisfação do Cliente", description: "Foco total na experiência do cliente, resultando em parcerias duradouras e bem-sucedidas.", imageSrc: "http://img.b2bpic.net/free-photo/jewish-shape-star-with-shadow_23-2148330479.jpg", imageAlt: "Trophy symbolizing client satisfaction"},
|
||
]}
|
||
title="Resultados Comprovados"
|
||
description="Métricas que demonstram o impacto real e mensurável do nosso trabalho para nossos clientes."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
carouselMode="buttons"
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Dr. Helena Costa", role: "CEO", company: "InnovateTech Solutions", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-walking-outside-modern-office-building_1139-1079.jpg", imageAlt: "Dr. Helena Costa"},
|
||
{
|
||
id: "2", name: "Marcos Silva", role: "Diretor de Marketing", company: "Luxus Brands Group", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-businesswoman-looking-statistic-data-thinking-confident-experienced-thoughtful-female-manager-holding-marker-standing-office-room-strategy-business-management-concept_74855-6740.jpg", imageAlt: "Marcos Silva"},
|
||
{
|
||
id: "3", name: "Ana Paula Rodrigues", role: "Fundadora", company: "Future Foods Co.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-professional-elegant-businessman_23-2150917102.jpg", imageAlt: "Ana Paula Rodrigues"},
|
||
{
|
||
id: "4", name: "Carlos Eduardo Mello", role: "Gerente de Marca", company: "Quantum Robotics", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-passing-by-woman-using-mobile-phone_23-2147876765.jpg", imageAlt: "Carlos Eduardo Mello"},
|
||
{
|
||
id: "5", name: "Juliana Barros", role: "Head de Criação", company: "Apex Digital Media", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379217.jpg", imageAlt: "Juliana Barros"},
|
||
]}
|
||
title="O que Nossos Clientes Dizem"
|
||
description="Depoimentos de líderes que transformaram suas marcas e alcançaram o domínio de mercado conosco."
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardFive
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
team={[
|
||
{
|
||
id: "1", name: "Alexandre Castro", role: "Diretor Criativo Executivo", imageSrc: "http://img.b2bpic.net/free-photo/creative-designers-working-project-together_58466-11710.jpg", imageAlt: "Alexandre Castro, Diretor Criativo Executivo"},
|
||
{
|
||
id: "2", name: "Sofia Mendes", role: "Estrategista de Marketing Sênior", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-14781.jpg", imageAlt: "Sofia Mendes, Estrategista de Marketing Sênior"},
|
||
{
|
||
id: "3", name: "Lucas Pereira", role: "Lead Designer UX/UI", imageSrc: "http://img.b2bpic.net/free-photo/lights-prisms-effect-close-up_23-2148917886.jpg", imageAlt: "Lucas Pereira, Lead Designer UX/UI"},
|
||
{
|
||
id: "4", name: "Isabela Santos", role: "Gerente de Marca & Comunicação", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-stands-house-design-sketch-ready-renovation_273609-37348.jpg", imageAlt: "Isabela Santos, Gerente de Marca & Comunicação"},
|
||
]}
|
||
title="Conheça a Equipe Visionária"
|
||
description="Nossos especialistas combinam talento criativo com expertise estratégica para entregar resultados excepcionais."
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
plans={[
|
||
{
|
||
id: "essencial", badge: "Início", badgeIcon: Sparkles,
|
||
price: "Personalizado", subtitle: "Para quem busca uma base sólida e premium.", buttons: [
|
||
{
|
||
text: "Fale Conosco", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Consultoria Estratégica Inicial", "Design de Marca Essencial", "Gestão Básica de Redes Sociais", "Relatórios de Performance Mensais"],
|
||
},
|
||
{
|
||
id: "crescimento", badge: "Popular", badgeIcon: Star,
|
||
price: "Sob Medida", subtitle: "Ideal para escalar e expandir sua presença no mercado.", buttons: [
|
||
{
|
||
text: "Agende Uma Reunião", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Estratégia de Marketing Completa", "Desenvolvimento UI/UX Avançado", "Campanhas de Mídia Paga", "Otimização SEO Abrangente", "Suporte Dedicado"],
|
||
},
|
||
{
|
||
id: "dominio", badge: "Exclusivo", badgeIcon: Award,
|
||
price: "Solução Customizada", subtitle: "A parceria definitiva para o domínio total de mercado.", buttons: [
|
||
{
|
||
text: "Descubra Mais", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Branding 360º", "Estratégia de Lançamento de Produto", "Inteligência de Mercado e Insights", "Marketing de Influência", "Acompanhamento Estratégico Contínuo"],
|
||
},
|
||
]}
|
||
title="Planos Personalizados para Cada Visão"
|
||
description="Escolha o nível de parceria que melhor se adapta às suas ambições e necessidades, sempre com a garantia de excelência Vision Dope."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Vamos Conversar Sobre Sua Próxima Grande Ideia"
|
||
description="Entre em contato para discutir como podemos elevar sua marca a novos patamares com design ousado e marketing estratégico."
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Seu Nome Completo", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Seu Melhor E-mail", required: true,
|
||
},
|
||
{
|
||
name: "company", type: "text", placeholder: "Sua Empresa (Opcional)"},
|
||
{
|
||
name: "subject", type: "text", placeholder: "Assunto da Mensagem", required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Sua Mensagem", rows: 5,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/businessman-using-digital-tablet-while-sitting-airport-terminal_107420-85113.jpg"
|
||
imageAlt="Digital interface with a contact form"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
buttonText="Enviar Mensagem"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Serviços", items: [
|
||
{
|
||
label: "Branding", href: "#features"},
|
||
{
|
||
label: "Marketing Digital", href: "#features"},
|
||
{
|
||
label: "UI/UX Design", href: "#features"},
|
||
{
|
||
label: "Estratégia", href: "#features"},
|
||
],
|
||
},
|
||
{
|
||
title: "Agência", items: [
|
||
{
|
||
label: "Sobre Nós", href: "#about"},
|
||
{
|
||
label: "Nossa Equipe", href: "#team"},
|
||
{
|
||
label: "Resultados", href: "#metrics"},
|
||
{
|
||
label: "Contato", href: "#contact"},
|
||
],
|
||
},
|
||
{
|
||
title: "Recursos", items: [
|
||
{
|
||
label: "Blog", href: "#"},
|
||
{
|
||
label: "FAQ", href: "#"},
|
||
{
|
||
label: "Estudos de Caso", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="© 2024 Vision Dope. Todos os direitos reservados."
|
||
bottomRightText="Política de Privacidade | Termos de Serviço"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|