Files
9b864aaa-e8d2-451b-88c5-3be…/src/app/page.tsx
2026-03-13 16:53:05 +00:00

296 lines
19 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, CheckCircle, Mail, Shield, Sparkles, Star, TrendingUp, Users, Zap } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="none"
cardStyle="outline"
primaryButtonStyle="double-inset"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Pax Libera Mining"
navItems={[
{ name: "About", id: "about" },
{ name: "Operations", id: "operations" },
{ name: "Leadership", id: "leadership" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Explore Operations", href: "#hero"
}}
/>
</div>
<div id="hero" data-section="hero" className="relative bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 overflow-hidden">
<HeroSplitTestimonial
title="Powering Industry Through Responsible Mining"
description="Pax Libera Mining Inc develops Philippine mineral resources with environmental stewardship, regulatory excellence, and sustainable practices that strengthen national infrastructure and industrial supply chains"
tag="Global Mineral Resource Leader"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Explore Our Operations", href: "#operations" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
testimonials={[
{
name: "Manuel Santos", handle: "@industrialpartner", testimonial: "Pax Libera's consistent mineral supply and transparent operations have been crucial to our manufacturing expansion. Their commitment to sustainability aligns perfectly with our corporate values.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g919qb&_wi=1", imageAlt: "industrial partner testimonial mining"
},
{
name: "Dr. Elena Reyes", handle: "@regulatory_authority", testimonial: "The company's adherence to Philippine mining regulations and environmental compliance standards sets a benchmark for the industry. Their transparency in reporting is exemplary.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7b188r&_wi=1", imageAlt: "government official mining sector"
},
{
name: "Robert Chen", handle: "@mining_investor", testimonial: "Pax Libera demonstrates strong operational efficiency and responsible growth trajectory. A reliable partner for long-term mining sector investments in Southeast Asia.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jrd0ks&_wi=1", imageAlt: "mining investor professional portrait"
}
]}
testimonialRotationInterval={5000}
useInvertedBackground={false}
mediaAnimation="opacity"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eww11h"
imageAlt="Pax Libera Mining operations in the Philippines"
imagePosition="right"
className="hero-section-main"
containerClassName="hero-container-luxury"
titleClassName="text-5xl font-bold tracking-tight"
descriptionClassName="text-lg leading-relaxed opacity-90"
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm"
buttonContainerClassName="flex gap-4 flex-wrap"
buttonClassName="px-6 py-3 rounded-lg font-semibold transition-all"
mediaWrapperClassName="relative rounded-2xl overflow-hidden shadow-2xl"
/>
</div>
<div id="about" data-section="about" className="bg-stone-100 relative">
<TestimonialAboutCard
tag="Who We Are"
tagIcon={Shield}
tagAnimation="blur-reveal"
title="Mineral Resource Excellence in the Philippines"
description="Pax Libera Mining Inc is a Philippine-based mineral exploration and development company dedicated to extracting high-quality mineral resources while maintaining the highest standards of environmental responsibility and regulatory compliance."
subdescription="With a commitment to sustainable mining practices, transparent governance, and operational excellence, we serve as a trusted partner for industrial companies, government agencies, and investors seeking reliable mineral supply chains anchored in Southeast Asia."
icon={Zap}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hg7pzc"
imageAlt="Pax Libera Mining facility showcasing modern sustainable operations"
mediaAnimation="slide-up"
useInvertedBackground={true}
containerClassName="about-section-container py-20"
cardClassName="about-card-elegant rounded-2xl border border-stone-300 shadow-lg"
titleClassName="text-4xl font-bold text-stone-900 mb-6"
descriptionClassName="text-lg text-stone-700 leading-relaxed mb-4"
subdescriptionClassName="text-base text-stone-600 leading-relaxed"
iconClassName="w-12 h-12 text-stone-800"
/>
</div>
<div id="features" data-section="features" className="bg-stone-50 py-24">
<FeatureCardSeven
title="Core Operational Pillars"
description="Our commitment to excellence is built on three foundational pillars that define our operations and partnerships"
tag="Why Choose Pax Libera"
tagIcon={Award}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "Environmental Stewardship", description: "We implement industry-leading environmental restoration programs and reclamation initiatives. Every mining site is designed with post-extraction rehabilitation, ensuring sustainable land recovery and biodiversity protection aligned with Philippine environmental standards.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=upjcjz", imageAlt: "Environmental restoration and sustainable mining practices"
},
{
id: 2,
title: "Regulatory Excellence", description: "Full compliance with Philippine mining regulations, environmental impact assessments, and safety standards. Our transparent reporting and certification processes demonstrate commitment to government oversight and industry best practices.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=23rz3h", imageAlt: "Regulatory compliance and mining safety standards"
},
{
id: 3,
title: "Operational Excellence", description: "Advanced extraction technologies and efficient resource management maximize mineral yield while minimizing operational disruption. Our supply chain ensures consistent, high-quality mineral delivery to industrial and manufacturing partners.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h5ix6u", imageAlt: "Modern mining operations and equipment efficiency"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="feature-section-container py-24"
cardClassName="feature-card-professional rounded-xl border border-stone-300 shadow-md hover:shadow-lg transition-shadow"
textBoxTitleClassName="text-3xl font-bold text-stone-900 mb-4"
textBoxDescriptionClassName="text-base text-stone-700 leading-relaxed"
imageContainerClassName="rounded-lg overflow-hidden h-64 mb-4"
imageClassName="w-full h-full object-cover"
/>
</div>
<div id="metrics" data-section="metrics" className="bg-stone-100">
<MetricCardTwo
title="Operational Impact & Growth"
description="Our metrics demonstrate consistent growth, operational reliability, and commitment to sustainable resource development"
tag="Performance Metrics"
tagIcon={TrendingUp}
tagAnimation="blur-reveal"
metrics={[
{ id: "metric-production", value: "500K+ MT", description: "Annual Mineral Production Capacity" },
{ id: "metric-compliance", value: "100%", description: "Regulatory Compliance Rate" },
{ id: "metric-partners", value: "45+", description: "Industrial Partners Worldwide" },
{ id: "metric-reclamation", value: "2,400 ha", description: "Land Reclaimed & Restored" }
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
containerClassName="metrics-section-container py-24"
cardClassName="metric-card-display rounded-lg border border-stone-300 shadow-md text-center p-8"
textBoxTitleClassName="text-3xl font-bold text-stone-900 mb-4"
textBoxDescriptionClassName="text-base text-stone-700"
valueClassName="text-5xl font-bold text-stone-900 mb-2"
metricDescriptionClassName="text-sm text-stone-600 leading-relaxed"
/>
</div>
<div id="team" data-section="team" className="bg-stone-50">
<TeamCardOne
title="Leadership & Expertise"
description="Our executive team brings decades of combined experience in mining operations, environmental management, regulatory affairs, and strategic business development"
tag="Meet Our Team"
tagIcon={Users}
tagAnimation="slide-up"
members={[
{
id: "ceo", name: "Jose Miguel Rodrigo", role: "Chief Executive Officer & Founder", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=r8x6l0"
},
{
id: "ops", name: "Fernando Gutierrez", role: "Chief Operations Officer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6lyqk3"
},
{
id: "sustainability", name: "Maria Santos", role: "Vice President, Sustainability & Compliance", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jn0hqo"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="opacity"
textboxLayout="default"
useInvertedBackground={false}
containerClassName="team-section-container py-24"
cardClassName="team-card-member rounded-xl border border-stone-300 shadow-md overflow-hidden hover:shadow-lg transition-shadow"
textBoxTitleClassName="text-3xl font-bold text-stone-900 mb-4"
textBoxDescriptionClassName="text-base text-stone-700 leading-relaxed mb-8"
nameClassName="text-xl font-semibold text-stone-900 mb-1"
roleClassName="text-sm text-stone-600 font-medium"
imageClassName="w-full h-80 object-cover rounded-lg"
/>
</div>
<div id="testimonials" data-section="testimonials" className="bg-stone-100">
<TestimonialCardTwo
title="Trusted by Industry Leaders"
description="Hear from our partners, regulatory bodies, investors, and service providers about their experience with Pax Libera Mining"
tag="Client Testimonials"
tagIcon={Star}
tagAnimation="blur-reveal"
testimonials={[
{
id: "testimonial-1", name: "Manuel Santos", role: "Procurement Director, Metro Infrastructure Corp", testimonial: "Pax Libera's consistent mineral supply quality and transparent operations have become instrumental to our manufacturing expansion. Their commitment to sustainability mirrors our corporate responsibility goals perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g919qb&_wi=2", icon: CheckCircle
},
{
id: "testimonial-2", name: "Dr. Elena Reyes", role: "Regional Mining Inspector, DENR Philippines", testimonial: "The company's adherence to Philippine mining regulations and environmental compliance standards sets an industry benchmark. Their transparency in regulatory reporting and environmental assessments is exemplary.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7b188r&_wi=2", icon: Shield
},
{
id: "testimonial-3", name: "Robert Chen", role: "Portfolio Manager, Asia Mining Ventures", testimonial: "Pax Libera demonstrates strong operational efficiency, transparent governance, and reliable growth trajectory. A solid partner for long-term mining sector investments across Southeast Asia.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jrd0ks&_wi=2", icon: TrendingUp
},
{
id: "testimonial-4", name: "Angela Torres", role: "Supply Chain Director, Advanced Equipment Solutions", testimonial: "Working with Pax Libera as a equipment logistics supplier has been seamless. Their operational planning and communication are professional and reliable. A trustworthy long-term partner.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uc20gj", icon: Zap
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
containerClassName="testimonial-section-container py-24"
cardClassName="testimonial-card-review rounded-lg border border-stone-300 shadow-md p-6 hover:shadow-lg transition-shadow"
textBoxTitleClassName="text-3xl font-bold text-stone-900 mb-4"
textBoxDescriptionClassName="text-base text-stone-700 leading-relaxed mb-8"
testimonialClassName="text-base text-stone-700 leading-relaxed italic mb-4"
nameClassName="text-lg font-semibold text-stone-900"
roleClassName="text-sm text-stone-600 font-medium"
imageClassName="w-16 h-16 rounded-full object-cover border-2 border-stone-300"
/>
</div>
<div id="contact" data-section="contact" className="bg-gradient-to-b from-stone-50 to-stone-100">
<ContactCenter
tag="Get in Touch"
title="Explore Partnership Opportunities"
description="Contact our business development team to discuss mineral supply partnerships, investment opportunities, or regulatory collaboration"
tagIcon={Mail}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
inputPlaceholder="Enter your business email"
buttonText="Send Inquiry"
termsText="By submitting your inquiry, you agree to our Terms of Service and Privacy Policy. We will respond within 24 hours."
containerClassName="contact-section-container py-24"
contentClassName="text-center max-w-2xl mx-auto"
titleClassName="text-4xl font-bold text-stone-900 mb-4"
descriptionClassName="text-lg text-stone-700 leading-relaxed mb-8"
formWrapperClassName="flex flex-col gap-4"
inputClassName="px-4 py-3 border border-stone-300 rounded-lg focus:outline-none focus:border-stone-600"
buttonClassName="px-6 py-3 bg-stone-900 text-white rounded-lg font-semibold hover:bg-stone-800 transition-colors"
termsClassName="text-xs text-stone-600 leading-relaxed"
/>
</div>
<div id="footer" data-section="footer" className="bg-stone-900 text-white py-12">
<FooterLogoEmphasis
logoText="Pax Libera Mining Inc"
columns={[
{
items: [
{ label: "About", href: "#about" },
{ label: "Operations", href: "#features" },
{ label: "Leadership", href: "#team" },
{ label: "Impact", href: "#metrics" }
]
},
{
items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Business Inquiries", href: "mailto:inquiry@paxliberamining.com" },
{ label: "Partnerships", href: "#contact" },
{ label: "Regulatory Compliance", href: "#" }
]
},
{
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Sustainability Report", href: "#" },
{ label: "Environmental Standards", href: "#" }
]
}
]}
containerClassName="footer-container py-16 border-t border-stone-300"
logoClassName="text-2xl font-bold text-stone-900 mb-8"
columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12"
columnClassName="flex flex-col gap-4"
itemClassName="text-stone-700 hover:text-stone-900 transition-colors text-sm"
/>
</div>
</ThemeProvider>
);
}