Files
371a5191-e2fd-47ff-8fc7-d32…/src/app/page.tsx
2026-05-13 21:25:09 +00:00

228 lines
9.5 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, CheckCircle, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSmall"
background="aurora"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Inicio", id: "hero"},
{
name: "Sobre Nosotros", id: "about"},
{
name: "Principios", id: "features"},
{
name: "Contacto", id: "contact"},
]}
brandName="Silver City"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{
variant: "gradient-bars"}}
title="Somos Personas de Mandamiento"
description="Un espacio informativo dedicado a compartir nuestros valores, principios y la misión que guía nuestras acciones diarias en Silver City."
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desk-with-laptop-mouse_23-2148291124.jpg", imageAlt: "informative website hero background"},
{
imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-people-discussing-business-office_1268-21455.jpg", imageAlt: "community support informative design"},
{
imageSrc: "http://img.b2bpic.net/free-photo/facade-view-modern-entrance_1359-373.jpg", imageAlt: "urban city architecture modern"},
{
imageSrc: "http://img.b2bpic.net/free-photo/colorful-arrow-symbols-mobile-phone-pen-blue-backdrop_23-2147875665.jpg", imageAlt: "Colorful arrow symbols; mobile phone; and pen on blue backdrop"},
{
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-colourful-workspace-desing_23-2148226832.jpg", imageAlt: "Flat lay colourful workspace desing"},
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Nuestra Esencia"
metrics={[
{
icon: Users,
label: "Miembros Activos", value: "150+"},
{
icon: Award,
label: "Años de Compromiso", value: "12"},
{
icon: CheckCircle,
label: "Proyectos Completados", value: "500"},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardEight
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Integridad", description: "Actuamos con transparencia y rectitud en cada paso que damos.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=29fyix"},
{
title: "Servicio", description: "Nuestra razón de ser es brindar apoyo constante a quienes lo necesitan.", imageSrc: "http://img.b2bpic.net/free-photo/teamworking-colleagues-data-center-replacing-storage-rackmounts-components_482257-122041.jpg"},
{
title: "Compromiso", description: "Mantenemos firme nuestra palabra en el cumplimiento de cada objetivo.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-people-working-together_23-2150384880.jpg"},
]}
title="Nuestros Pilares"
description="Principios fundamentales que definen nuestra identidad y cómo servimos a la comunidad."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1", value: "95%", title: "Satisfacción", items: [
"Servicio de alta calidad", "Respuesta eficiente", "Atención personalizada"],
},
{
id: "m2", value: "800", title: "Personas Impactadas", items: [
"Historias de éxito", "Familias apoyadas", "Vidas transformadas"],
},
{
id: "m3", value: "24/7", title: "Disponibilidad", items: [
"Soporte permanente", "Acceso constante", "Atención ininterrumpida"],
},
]}
title="Impacto Comunitario"
description="Resultados tangibles de nuestro trabajo y dedicación en Silver City."
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
textboxLayout="default"
useInvertedBackground={false}
animationType="blur-reveal"
team={[
{
id: "t1", name: "Ana Rodríguez", role: "Directora", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg"},
{
id: "t2", name: "Carlos Méndez", role: "Coordinador", imageSrc: "http://img.b2bpic.net/free-photo/bearded-male-manager-formal-suit-his-female-assistant_273609-4719.jpg"},
{
id: "t3", name: "Sofía López", role: "Estratega", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149097942.jpg"},
]}
title="Nuestro Equipo"
description="Profesionales comprometidos con la visión y los valores de nuestra organización."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
useInvertedBackground={true}
testimonial="La dedicación del equipo de Silver City ha sido transformadora para nuestra comunidad. Son verdaderas personas de mandamiento."
rating={5}
author="Elena Vargas"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", alt: "Elena"},
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Ricardo"},
{
src: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg", alt: "María"},
{
src: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg", alt: "Jorge"},
{
src: "http://img.b2bpic.net/free-photo/smiley-woman-office-holding-tablet_23-2148356266.jpg", alt: "Ana"},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1", title: "¿Qué significa ser personas de mandamiento?", content: "Significa regir nuestras acciones basándonos en principios de honestidad y responsabilidad social."},
{
id: "f2", title: "¿Cómo puedo formar parte?", content: "Puedes contactarnos a través de nuestros canales oficiales para conocer las formas de participación."},
{
id: "f3", title: "¿Dónde operan?", content: "Nuestra base principal se encuentra en Silver City, sirviendo a toda la región."},
]}
sideTitle="Preguntas Frecuentes"
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "rotated-rays-animated"}}
text="¿Quieres saber más sobre nuestro trabajo en Silver City? Ponte en contacto con nosotros hoy."
buttons={[
{
text: "Contactar", href: "mailto:info@silvercity.com"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/aerial-view-gold-coast-skyline-residential-waterways-australia_1308-189563.jpg"
logoText="Silver City"
columns={[
{
title: "Enlaces", items: [
{
label: "Inicio", href: "#hero"},
{
label: "Sobre Nosotros", href: "#about"},
],
},
{
title: "Legal", items: [
{
label: "Privacidad", href: "#"},
{
label: "Términos", href: "#"},
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}