Update src/app/page.tsx
This commit is contained in:
230
src/app/page.tsx
230
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
@@ -11,9 +12,18 @@ import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll'
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Award, CheckCircle, Shield, Star, TrendingUp, Zap, MessageSquare, Phone } from "lucide-react";
|
||||
import { CheckCircle, Shield, Zap, MessageSquare, Phone, Palette } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [bgVariant, setBgVariant] = useState<any>("noiseDiagonalGradient");
|
||||
|
||||
const backgroundOptions = [
|
||||
"noiseDiagonalGradient",
|
||||
"floatingGradient",
|
||||
"grid",
|
||||
"aurora"
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
@@ -21,122 +31,136 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmall"
|
||||
background="noiseDiagonalGradient"
|
||||
background={bgVariant}
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Metrics", id: "#metrics" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="InnovatePro"
|
||||
/>
|
||||
</div>
|
||||
<div className="fixed bottom-6 right-6 z-50 flex gap-2">
|
||||
{backgroundOptions.map((opt) => (
|
||||
<button
|
||||
key={opt}
|
||||
onClick={() => setBgVariant(opt)}
|
||||
className={`w-10 h-10 rounded-full border-2 transition-all ${bgVariant === opt ? 'border-foreground scale-110' : 'border-transparent opacity-60'}`}
|
||||
style={{ background: opt === 'noiseDiagonalGradient' ? '#ccc' : opt === 'floatingGradient' ? 'linear-gradient(45deg, #6139e6, #b3a8e8)' : '#333' }}
|
||||
aria-label={`Set background to ${opt}`}
|
||||
>
|
||||
<Palette className="mx-auto" size={16} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Empowering Your Digital Transformation / Transformación Digital"
|
||||
description="We deliver high-end software solutions designed to scale your business and streamline your operations with modern, intuitive design. / Entregamos soluciones de software de alta gama diseñadas para escalar su negocio y optimizar sus operaciones."
|
||||
buttons={[{ text: "Get Started / Empezar", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
|
||||
imageAlt="Hero digital software interface"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Metrics", id: "#metrics" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="InnovatePro"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Why Choose InnovatePro? / ¿Por qué elegir InnovatePro?"
|
||||
metrics={[
|
||||
{ icon: CheckCircle, label: "Projects / Proyectos", value: "200+" },
|
||||
{ icon: Shield, label: "Security / Seguridad", value: "100%" },
|
||||
{ icon: Zap, label: "Performance / Rendimiento", value: "45%" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Empowering Your Digital Transformation / Transformación Digital"
|
||||
description="We deliver high-end software solutions designed to scale your business and streamline your operations with modern, intuitive design. / Entregamos soluciones de software de alta gama diseñadas para escalar su negocio y optimizar sus operaciones."
|
||||
buttons={[{ text: "Get Started / Empezar", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797748.jpg?_wi=1"
|
||||
imageAlt="Hero digital software interface"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Legacy overhead / Sistemas obsoletos", "Slow deployment / Despliegue lento", "Security risks / Riesgos de seguridad"] }}
|
||||
positiveCard={{ items: ["Automation / Automatización", "Scalable Cloud / Nube escalable", "Enterprise Security / Seguridad empresarial"] }}
|
||||
title="Modern Solutions, Real Results / Soluciones Modernas, Resultados Reales"
|
||||
description="Helping you grow effectively. / Ayudándole a crecer de manera efectiva."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Why Choose InnovatePro? / ¿Por qué elegir InnovatePro?"
|
||||
metrics={[
|
||||
{ icon: CheckCircle, label: "Projects / Proyectos", value: "200+" },
|
||||
{ icon: Shield, label: "Security / Seguridad", value: "100%" },
|
||||
{ icon: Zap, label: "Performance / Rendimiento", value: "45%" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="blur-reveal"
|
||||
title="Proven Scalability / Escalabilidad Probada"
|
||||
description="Numbers speak for our performance across all global markets. / Los números hablan de nuestro desempeño en todos los mercados globales."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", title: "Satisfaction / Satisfacción", value: "99%", description: "High client retention. / Alta retención.", imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-concept_23-2149157297.jpg" },
|
||||
{ id: "m2", title: "Awards / Premios", value: "15", description: "Industry recognition. / Reconocimiento.", imageSrc: "https://img.b2bpic.net/free-photo/gold-trophy-dark-background_23-2149021235.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Legacy overhead / Sistemas obsoletos", "Slow deployment / Despliegue lento", "Security risks / Riesgos de seguridad"] }}
|
||||
positiveCard={{ items: ["Automation / Automatización", "Scalable Cloud / Nube escalable", "Enterprise Security / Seguridad empresarial"] }}
|
||||
title="Modern Solutions, Real Results / Soluciones Modernas, Resultados Reales"
|
||||
description="Helping you grow effectively. / Ayudándole a crecer de manera efectiva."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Trusted by Industry Leaders / Líderes de la industria"
|
||||
description="Our clients share their success stories. / Historias de éxito de nuestros clientes."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", date: "2024-05", title: "CTO", quote: "Exceptional delivery. / Entrega excepcional.", tag: "Enterprise", avatarSrc: "https://i.pravatar.cc/100?u=1", imageSrc: "https://img.b2bpic.net/free-photo/people-working-office_23-2149021255.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="blur-reveal"
|
||||
title="Proven Scalability / Escalabilidad Probada"
|
||||
description="Numbers speak for our performance across all global markets. / Los números hablan de nuestro desempeño en todos los mercados globales."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", title: "Satisfaction / Satisfacción", value: "99%", description: "High client retention. / Alta retención.", imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-concept_23-2149157297.jpg" },
|
||||
{ id: "m2", title: "Awards / Premios", value: "15", description: "Industry recognition. / Reconocimiento.", imageSrc: "https://img.b2bpic.net/free-photo/gold-trophy-dark-background_23-2149021235.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Questions? / ¿Preguntas?"
|
||||
description="Get the answers you need in English or Spanish. / Encuentre respuestas en inglés o español."
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long? / ¿Cuánto tiempo?", content: "4-6 weeks / 4-6 semanas" },
|
||||
{ id: "f2", title: "Support? / ¿Soporte?", content: "24/7 global support / Soporte global 24/7" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Trusted by Industry Leaders / Líderes de la industria"
|
||||
description="Our clients share their success stories. / Historias de éxito de nuestros clientes."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", date: "2024-05", title: "CTO", quote: "Exceptional delivery. / Entrega excepcional.", tag: "Enterprise", avatarSrc: "https://i.pravatar.cc/100?u=1", imageSrc: "https://img.b2bpic.net/free-photo/people-working-office_23-2149021255.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Let's Innovate Together / Innovamos Juntos"
|
||||
description="Reach out in your preferred language. / Contáctenos en su idioma preferido."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/close-up-businessman-shaking-hands_23-2149021288.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Questions? / ¿Preguntas?"
|
||||
description="Get the answers you need in English or Spanish. / Encuentre respuestas en inglés o español."
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How long? / ¿Cuánto tiempo?", content: "4-6 weeks / 4-6 semanas" },
|
||||
{ id: "f2", title: "Support? / ¿Soporte?", content: "24/7 global support / Soporte global 24/7" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="InnovatePro"
|
||||
copyrightText="© 2025 InnovatePro | Global Solutions"
|
||||
socialLinks={[
|
||||
{ icon: MessageSquare, href: "#", ariaLabel: "Social" },
|
||||
{ icon: Phone, href: "#", ariaLabel: "Phone" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Let's Innovate Together / Innovamos Juntos"
|
||||
description="Reach out in your preferred language. / Contáctenos en su idioma preferido."
|
||||
background={{ variant: "animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/close-up-businessman-shaking-hands_23-2149021288.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="InnovatePro"
|
||||
copyrightText="© 2025 InnovatePro | Global Solutions"
|
||||
socialLinks={[
|
||||
{ icon: MessageSquare, href: "#", ariaLabel: "Social" },
|
||||
{ icon: Phone, href: "#", ariaLabel: "Phone" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user