259 lines
18 KiB
TypeScript
259 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { CheckCircle, Clock, Sparkles, Star, TrendingDown, Truck, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="ProTrack Rentals"
|
|
navItems={[
|
|
{ name: "Equipment | Equipo", id: "equipment" },
|
|
{ name: "Pricing | Precios", id: "pricing" },
|
|
{ name: "Why Us | Por Qué", id: "why-us" },
|
|
{ name: "Contact | Contacto", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Quote | Cotización", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="ProTrack Rentals"
|
|
description="Professional Skid Steer Loader Rentals | Alquileres Profesionales de Cargadores de Dirección Deslizante"
|
|
buttons={[
|
|
{ text: "View Equipment | Ver Equipo", href: "equipment" },
|
|
{ text: "Request Quote | Solicitar Cotización", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-professional-skid-steer-loader-on-a-mo-1772553433968-e4af3058.png"
|
|
imageAlt="Skid steer loader on construction site | Cargador de dirección deslizante en sitio de construcción"
|
|
frameStyle="card"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Trusted Equipment Rental Partner | Socio Confiable de Alquiler de Equipos"
|
|
metrics={[
|
|
{ icon: Truck, label: "Equipment Available | Equipos Disponibles", value: "50+" },
|
|
{ icon: Users, label: "Happy Customers | Clientes Satisfechos", value: "500+" },
|
|
{ icon: Clock, label: "Years Experience | Años de Experiencia", value: "15+" },
|
|
{ icon: CheckCircle, label: "On-Time Delivery | Entrega Puntual", value: "99%" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="equipment" data-section="equipment">
|
|
<FeatureCardThree
|
|
title="Our Equipment | Nuestro Equipo"
|
|
description="Reliable and well-maintained skid steer loaders for every project size. | Cargadores de dirección deslizante confiables y bien mantenidos para proyectos de cualquier tamaño."
|
|
tag="Premium Fleet | Flota Premium"
|
|
features={[
|
|
{
|
|
id: "01", title: "Compact Track Loader | Cargador Compacto", description: "Perfect for grading, excavation, and landscaping projects with precision control. | Perfecto para proyectos de nivelación, excavación y paisajismo con control de precisión.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-modern-compact-track-loader-on-a-lands-1772553435942-6f22b734.png", imageAlt: "Compact track loader | Cargador compacto"
|
|
},
|
|
{
|
|
id: "02", title: "Skid Steer Loader | Cargador de Dirección Deslizante", description: "Powerful and versatile for construction, demolition, and material handling tasks. | Potente y versátil para tareas de construcción, demolición y manejo de materiales.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-yellow-and-brown-skid-steer-loader-pos-1772553434607-1d47f15b.png", imageAlt: "Skid steer loader | Cargador de dirección deslizante"
|
|
},
|
|
{
|
|
id: "03", title: "Equipment Attachments | Accesorios de Equipos", description: "Buckets, augers, trenchers, pallet forks and more to expand your capabilities. | Baldes, barrenas, excavadoras, horquillas de paletas y más para expandir sus capacidades.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-collection-of-skid-steer-loader-attach-1772553434351-80b20cd1.png", imageAlt: "Equipment attachments | Accesorios de equipos"
|
|
},
|
|
{
|
|
id: "04", title: "Daily Rentals | Alquileres Diarios", description: "Flexible daily rental options with competitive rates and quick delivery service. | Opciones de alquiler diario flexible con tarifas competitivas y servicio de entrega rápida.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-skid-steer-loader-ready-for-rental-del-1772553435835-dc5fb69f.png", imageAlt: "Daily rental equipment | Equipo de alquiler diario"
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "View Pricing | Ver Precios", href: "pricing" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Flexible Rental Plans | Planes de Alquiler Flexibles"
|
|
description="Choose the perfect rental period for your project needs. All plans include delivery and basic maintenance. | Elija el período de alquiler perfecto para las necesidades de su proyecto. Todos los planes incluyen entrega y mantenimiento básico."
|
|
tag="Transparent Pricing | Precios Transparentes"
|
|
plans={[
|
|
{
|
|
id: "daily", badge: "Best for Short Projects | Mejor para Proyectos Cortos", badgeIcon: Zap,
|
|
price: "$350/day | $350/día", subtitle: "Perfect for daily job site needs | Perfecto para necesidades diarias de obra", features: [
|
|
"Compact Track Loader included | Cargador compacto incluido", "Free local delivery | Entrega local gratuita", "Basic operation support | Soporte operativo básico", "Fuel not included | Combustible no incluido"
|
|
]
|
|
},
|
|
{
|
|
id: "weekly", badge: "Most Popular | Más Popular", badgeIcon: Star,
|
|
price: "$1,750/week | $1,750/semana", subtitle: "Great value for ongoing projects | Gran valor para proyectos en curso", features: [
|
|
"Your choice of equipment | Su opción de equipo", "Free delivery & pickup | Entrega y recogida gratuitas", "Operator assistance available | Asistencia del operador disponible", "Preventive maintenance included | Mantenimiento preventivo incluido"
|
|
]
|
|
},
|
|
{
|
|
id: "monthly", badge: "Best Savings | Mejor Ahorro", badgeIcon: TrendingDown,
|
|
price: "$5,000/month | $5,000/mes", subtitle: "Ideal for long-term contracts | Ideal para contratos a largo plazo", features: [
|
|
"Multiple equipment options | Múltiples opciones de equipo", "Unlimited delivery passes | Entregas ilimitadas", "Full maintenance coverage | Cobertura de mantenimiento completo", "Priority support line | Línea de soporte prioritario"
|
|
]
|
|
},
|
|
{
|
|
id: "custom", badge: "Contact Us | Contáctenos", badgeIcon: Sparkles,
|
|
price: "Custom Quote | Cotización Personalizada", subtitle: "Tailored solutions for unique needs | Soluciones personalizadas para necesidades únicas", features: [
|
|
"Bulk rental discounts | Descuentos por alquiler a granel", "Specialized equipment available | Equipos especializados disponibles", "Flexible payment terms | Términos de pago flexibles", "Dedicated account manager | Gerente de cuenta dedicado"
|
|
]
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Request Custom Quote | Solicitar Cotización Personalizada", href: "contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<FeatureCardThree
|
|
title="Why Choose ProTrack | Por Qué Elegir ProTrack"
|
|
description="We combine reliability, professionalism, and customer service excellence. | Combinamos confiabilidad, profesionalismo y excelencia en servicio al cliente."
|
|
tag="Our Commitment | Nuestro Compromiso"
|
|
features={[
|
|
{
|
|
id: "01", title: "Well-Maintained Fleet | Flota Bien Mantenida", description: "All equipment undergoes regular maintenance and safety inspections to ensure peak performance. | Todo el equipo se somete a mantenimiento regular e inspecciones de seguridad para garantizar el rendimiento máximo.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-professional-maintenance-facility-or-w-1772553433781-a2c199c9.png", imageAlt: "Maintenance facility | Instalación de mantenimiento"
|
|
},
|
|
{
|
|
id: "02", title: "Fast Delivery | Entrega Rápida", description: "Same-day delivery available in the metro area. Reliable and on-time service guaranteed. | Entrega el mismo día disponible en el área metropolitana. Servicio confiable y puntual garantizado.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-professional-delivery-truck-or-flatbed-1772553433868-9e5b5def.png", imageAlt: "Fast delivery truck | Camión de entrega rápida"
|
|
},
|
|
{
|
|
id: "03", title: "Flexible Terms | Términos Flexibles", description: "Daily, weekly, and monthly options. No long-term contracts required for short-term needs. | Opciones diarias, semanales y mensuales. No se requieren contratos a largo plazo para necesidades a corto plazo.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-calendar-or-schedule-display-showing-d-1772553433997-994d4cfc.png", imageAlt: "Flexible rental terms | Términos de alquiler flexible"
|
|
},
|
|
{
|
|
id: "04", title: "Expert Support | Soporte Experto", description: "Bilingual support team available to assist with equipment operation and troubleshooting. | Equipo de soporte bilingüe disponible para ayudarlo con la operación del equipo y la resolución de problemas.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-professional-technician-or-operator-pr-1772553433724-91b05f87.png", imageAlt: "Expert support | Soporte experto"
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Clients Say | Lo Que Dicen Nuestros Clientes"
|
|
description="Real feedback from contractors and project managers who trust ProTrack for their equipment needs. | Comentarios reales de contratistas y gerentes de proyectos que confían en ProTrack para sus necesidades de equipos."
|
|
tag="Customer Reviews | Opiniones de Clientes"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Carlos Rodriguez", role: "Project Manager | Gerente de Proyecto", company: "BuildRight Construction", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/professional-portrait-photo-of-a-hispani-1772553432741-b6f0860b.png", imageAlt: "Carlos Rodriguez"
|
|
},
|
|
{
|
|
id: "2", name: "Jessica Martinez", role: "Site Supervisor | Supervisor de Sitio", company: "Landscape Innovations", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/professional-portrait-photo-of-a-female--1772553433519-0a8b30c1.png", imageAlt: "Jessica Martinez"
|
|
},
|
|
{
|
|
id: "3", name: "Michael Thompson", role: "Fleet Manager | Gerente de Flota", company: "Thompson Development", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/professional-portrait-of-a-male-fleet-ma-1772553433111-ead22dee.png", imageAlt: "Michael Thompson"
|
|
},
|
|
{
|
|
id: "4", name: "Sofia Hernandez", role: "Operations Director | Directora de Operaciones", company: "Eco Construction Group", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/professional-portrait-of-a-female-operat-1772553433195-a81e4611.png", imageAlt: "Sofia Hernandez"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "500+", label: "Successful Rentals | Alquileres Exitosos" },
|
|
{ value: "4.9/5", label: "Average Rating | Calificación Promedio" },
|
|
{ value: "98%", label: "On-Time Delivery | Entrega Puntual" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get Your Quote Today | Obtenga Su Cotización Hoy"
|
|
description="Fill out the form below and our team will contact you within 24 hours with a custom quote. | Complete el formulario a continuación y nuestro equipo se pondrá en contacto con usted dentro de 24 horas."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Full Name | Nombre Completo", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address | Correo Electrónico", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number | Número de Teléfono", required: true },
|
|
{ name: "company", type: "text", placeholder: "Company Name | Nombre de la Empresa", required: false }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Project Details / Equipment Needed | Detalles del Proyecto / Equipo Necesario", rows: 5, required: true }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARO0myy2Q0cEbmnux5fNOMbxJj/a-well-maintained-skid-steer-loader-in-e-1772553433767-9d40e5ae.png"
|
|
imageAlt="Skid steer loader ready for rental | Cargador de dirección deslizante listo para alquiler"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
buttonText="Request Quote | Solicitar Cotización"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="ProTrack Rentals"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Equipment | Equipo", href: "equipment" },
|
|
{ label: "Pricing | Precios", href: "pricing" },
|
|
{ label: "Why Us | Por Qué", href: "why-us" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact | Contacto", href: "contact" },
|
|
{ label: "Phone | Teléfono", href: "tel:+15551234567" },
|
|
{ label: "Email", href: "mailto:info@protrackrentals.com" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Español", href: "#" },
|
|
{ label: "English", href: "#" },
|
|
{ label: "Bilingual Support | Soporte Bilingüe", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy | Política de Privacidad", href: "#" },
|
|
{ label: "Terms of Service | Términos de Servicio", href: "#" },
|
|
{ label: "Rental Agreement | Acuerdo de Alquiler", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|