Files
2a11f29b-9786-4b51-8284-847…/src/app/services/page.tsx

114 lines
5.0 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, BarChart3, Rocket } from "lucide-react";
export default function ServicesPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleApple brandName="LogisticsPro" navItems={navItems} />
</div>
<div id="services-detail" data-section="services-detail">
<FeatureCardSeven
title="Complete Logistics Solutions"
description="Comprehensive services designed to optimize every aspect of your supply chain operations and reduce overhead costs."
tag="Our Service Suite"
tagIcon={Zap}
tagAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: 1,
title: "Express Freight Forwarding", description: "Fast and reliable international freight services with guaranteed delivery windows and full tracking capabilities.", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-international-trade_23-2149164061.jpg", imageAlt: "Express freight forwarding"},
{
id: 2,
title: "Inventory Management Solutions", description: "Automated warehouse management systems with real-time inventory tracking and smart replenishment strategies.", imageSrc: "http://img.b2bpic.net/free-photo/home-business-employees-preparing-products-boxes-local-delivery_482257-132083.jpg", imageAlt: "Inventory management"},
{
id: 3,
title: "Same-Day Local Delivery", description: "Urgent local deliveries with real-time driver tracking and customer notifications for maximum transparency.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-delivery-people_23-2149103420.jpg", imageAlt: "Same-day delivery"},
]}
animationType="blur-reveal"
buttons={[{ text: "Request Quote", href: "/contact" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="service-metrics" data-section="service-metrics">
<MetricCardTwo
title="Service Performance Metrics"
description="Delivering excellence through measurable performance standards and continuous optimization."
tag="Performance Stats"
tagIcon={BarChart3}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1", value: "99.2%", description: "Service Reliability"},
{
id: "2", value: "4.8/5.0", description: "Customer Rating"},
{
id: "3", value: "2hr avg", description: "Response Time"},
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
buttons={[{ text: "View SLAs", href: "#" }]}
buttonAnimation="slide-up"
/>
</div>
<div id="services-cta" data-section="services-cta">
<ContactCTA
tag="Ready to Optimize Your Supply Chain?"
tagIcon={Rocket}
tagAnimation="slide-up"
title="Get Your Custom Logistics Plan"
description="Our logistics experts will assess your needs and create a tailored solution that maximizes efficiency and minimizes costs."
buttons={[
{ text: "Book Consultation", href: "/contact" },
{ text: "Download Brochure", onClick: () => {} },
]}
buttonAnimation="slide-up"
background={{ variant: "gradient-bars" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="LogisticsPro"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}