Files
615950d4-44ff-429c-80f0-8ec…/src/app/page.tsx
2026-05-12 03:32:46 +00:00

241 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { ShieldCheck, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Solución", id: "about"},
{
name: "Ventajas", id: "features"},
{
name: "Confianza", id: "social-proof"},
{
name: "FAQ", id: "faq"},
]}
brandName="Xplouse"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars"}}
title="Tu equipo decide. La IA ejecuta."
description="Orquesta agentes, datos y decisiones críticas en un solo ecosistema gobernado. Con auditoría, trazabilidad y control end-to-end. Sin reemplazar lo que ya tienes."
kpis={[
{
value: "100%", label: "Trazabilidad"},
{
value: "48h", label: "Diagnóstico"},
{
value: "ISO", label: "Compliance"},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Agendar diagnóstico técnico de 30 min", href: "#contact"},
]}
imageSrc="http://img.b2bpic.net/free-photo/male-tourist-flying-with-airplane-using-laptop-browse-internet-website-sunset-flight-man-travelling-economy-class-arrive-holiday-destination-aerial-transport_482257-46702.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system-using-voice-controlled-sma_482257-2844.jpg", alt: "Equipo tech"},
{
src: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg", alt: "Especialista"},
{
src: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg", alt: "Desarrollador"},
{
src: "http://img.b2bpic.net/free-photo/smart-application-tablet-placed-kitchen-desk-empty-house-automation-system-turning-l_482257-2747.jpg", alt: "Analista"},
{
src: "http://img.b2bpic.net/free-photo/green-screen-mockup-laptop-accountant-working-office_482257-126537.jpg", alt: "Consultor"},
]}
avatarText="Más de 500+ expertos confían en Xplouse"
marqueeItems={[
{
type: "text", text: "Auditoría en tiempo real"},
{
type: "text-icon", text: "Cumplimiento normativo", icon: ShieldCheck,
},
{
type: "text", text: "Integración nativa"},
{
type: "text-icon", text: "Orquestación escalable", icon: Star,
},
{
type: "text", text: "Control de datos"},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="IA Gobernada, Operación Asegurada"
description="Xplouse transforma flujos de trabajo aislados en una orquestación centralizada. Proporcionamos la capa de control necesaria para ejecutar procesos financieros, legales y operativos sin fricción."
bulletPoints={[
{
title: "Orquestación Centralizada", description: "Conecta todos tus agentes y sistemas en una capa de control coherente."},
{
title: "Auditoría Real", description: "Historial completo de cada decisión tomada por la IA con control total."},
{
title: "Continuidad Operativa", description: "Implementa inteligencia sin desmantelar tu infraestructura técnica actual."},
]}
imageSrc="http://img.b2bpic.net/free-photo/conceptual-cloud-server-business-with-wooden-blocks-with-icons-dark-color-table-flat-lay_176474-10483.jpg"
mediaAnimation="opacity"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "f1", title: "Orquestación de Agentes", subtitle: "Coordina múltiples agentes IA para ejecución compleja.", category: "Ejecución", value: "Sincronizado"},
{
id: "f2", title: "Capa de Gobernanza", subtitle: "Control y cumplimiento integrados en cada nodo.", category: "Gobernanza", value: "Auditable"},
{
id: "f3", title: "Compatibilidad Técnica", subtitle: "Se integra con tu stack financiero y legal existente.", category: "Integración", value: "Native"},
]}
title="El Ecosistema Xplouse"
description="Potencia operativa diseñada para empresas que requieren precisión técnica y escala."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1", value: "99.9%", title: "Disponibilidad", items: [
"SLA-backed", "Entornos seguros"],
},
{
id: "m2", value: "48h", title: "Diagnóstico", items: [
"Deep dive", "Stack fit"],
},
{
id: "m3", value: "5x", title: "Escalabilidad", items: [
"Menos fricción", "Automatización"],
},
]}
title="Impacto Operativo"
description="Resultados cuantificables en la eficiencia de procesos críticos."
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"FinTech Alpha", "LegalTech Solutions", "RetailOps LATAM", "Private Health", "BankSecure", "Global Logistics", "Operations Hub"]}
title="Empresas en Confianza"
description="Líderes en LATAM que operan su gobernanza IA con Xplouse."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Carla Mendez", handle: "COO, FinTech", testimonial: "Xplouse nos dio la visibilidad que necesitábamos para escalar procesos críticos sin errores.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-her-office-businesswoman-sitting-with-her-notebook-writing-making_1258-194709.jpg"},
{
id: "2", name: "Jorge Arana", handle: "CTO, Retail", testimonial: "Integrar Xplouse en nuestro stack actual fue impecable. La gobernanza es inigualable.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-using-laptop_23-2149284668.jpg"},
{
id: "3", name: "Elena Torres", handle: "CEO, LegalTech", testimonial: "La trazabilidad total de cada decisión IA nos permite operar con total confianza.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg"},
{
id: "4", name: "Luis Rivera", handle: "Legal Ops", testimonial: "Cumplimiento normativo y velocidad operativa en un solo lugar. Esencial.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-business-leader-sitting-table_1262-4870.jpg"},
{
id: "5", name: "Maria Silva", handle: "Finance Dir", testimonial: "Reducción de cuellos de botella mediante una orquestación precisa.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-with-digital-tablet_1098-651.jpg"},
]}
showRating={true}
title="Visión de Liderazgo"
description="Lo que los directivos opinan sobre nuestra gobernanza operativa."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "q1", title: "¿Tengo que reemplazar mis sistemas actuales?", content: "No. Xplouse es una capa de gobernanza que se integra con tu stack existente."},
{
id: "q2", title: "¿Cómo garantizan la trazabilidad?", content: "Cada acción y decisión de los agentes es auditada mediante logs inalterables."},
{
id: "q3", title: "¿Qué tipos de procesos podemos automatizar?", content: "Principalmente procesos de alto valor técnico y legal donde el control es crítico."},
]}
sideTitle="Preguntas Frecuentes"
sideDescription="Dudas sobre nuestra metodología de gobernanza técnica."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Contacto"
title="Agenda tu diagnóstico técnico"
description="Recibe un reporte de ajuste técnico para tu ecosistema de agentes IA en 48 horas."
inputPlaceholder="tu-email@empresa.com"
buttonText="Comenzar Auditoría Gratuita"
imageSrc="http://img.b2bpic.net/free-photo/cybersecurity-concept-secure-data-transfer_23-2152001135.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Xplouse"
copyrightText="© 2025 Xplouse. Todos los derechos reservados."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}