Merge version_2 into main #7
@@ -1,22 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
|
||||
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
|
||||
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Mail } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TeamCardSix from "@/components/sections/team/TeamCardSix";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Mail, TrendingUp, Users, Award, Zap, Shield } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
@@ -33,94 +34,76 @@ export default function AboutPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: "Get in Touch", href: "contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@webild.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="About Webild Logistics"
|
||||
description="Our mission, vision, and values shaping the future of African logistics"
|
||||
tag="Our Story"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop", imageAlt: "Team collaboration"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop", imageAlt: "Operations"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop", imageAlt: "Innovation"
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="Team collaboration"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "mission" },
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
{ text: "Contact Us", href: "contact-cta" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="mission" data-section="mission">
|
||||
<MediaAbout
|
||||
<SplitAbout
|
||||
title="Our Mission & Vision"
|
||||
description="We are committed to transforming logistics across Africa by providing reliable, innovative, and customer-focused transportation solutions that connect businesses and drive economic growth."
|
||||
tag="Vision 2030"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Reliability", description: "Dependable service you can trust", icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Innovation", description: "Cutting-edge logistics technology", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Sustainability", description: "Committed to environmental responsibility", icon: TrendingUp,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
|
||||
imageAlt="Our vision for African logistics"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Our Values", href: "values" },
|
||||
{ text: "Get Started", href: "contact" },
|
||||
{ text: "Get Started", href: "contact-cta" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="values" data-section="values">
|
||||
<FeatureCardTwelve
|
||||
<FeatureCardTwentyFour
|
||||
features={[
|
||||
{
|
||||
id: "reliability", label: "Reliability", title: "Dependable service you can trust", items: [
|
||||
"On-time delivery guarantee", "24/7 operational excellence", "Consistent quality standards", "Transparent communication"
|
||||
],
|
||||
buttons: [
|
||||
{ text: "Track Shipment", onClick: () => {} },
|
||||
{ text: "Contact", href: "contact" },
|
||||
],
|
||||
},
|
||||
id: "reliability", title: "Reliability - Dependable Service You Can Trust", author: "Core Value", description:
|
||||
"On-time delivery guarantee with 24/7 operational excellence and consistent quality standards.", tags: ["Reliability", "Quality"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop", imageAlt: "Reliability"},
|
||||
{
|
||||
id: "innovation", label: "Innovation", title: "Cutting-edge logistics technology", items: [
|
||||
"Real-time tracking systems", "AI-powered route optimization", "Digital documentation", "Continuous improvement culture"
|
||||
],
|
||||
buttons: [
|
||||
{ text: "Our Tech", onClick: () => {} },
|
||||
{ text: "Learn More", href: "services" },
|
||||
],
|
||||
},
|
||||
id: "innovation", title: "Innovation - Cutting-Edge Logistics Technology", author: "Core Value", description:
|
||||
"Real-time tracking systems, AI-powered route optimization, and continuous improvement culture.", tags: ["Innovation", "Technology"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "Innovation"},
|
||||
{
|
||||
id: "sustainability", label: "Sustainability", title: "Committed to environmental responsibility", items: [
|
||||
"Carbon-efficient routing", "Fleet modernization", "Eco-friendly packaging", "Regional economic growth"
|
||||
],
|
||||
buttons: [
|
||||
{ text: "Green Initiative", onClick: () => {} },
|
||||
{ text: "Details", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "people", label: "People-Centric", title: "Empowering our team and communities", items: [
|
||||
"Professional development programs", "Fair employment practices", "Community investments", "Diverse & inclusive culture"
|
||||
],
|
||||
buttons: [
|
||||
{ text: "Careers", onClick: () => {} },
|
||||
{ text: "Join Us", href: "#" },
|
||||
],
|
||||
},
|
||||
id: "sustainability", title: "Sustainability - Environmental Responsibility", author: "Core Value", description:
|
||||
"Carbon-efficient routing, fleet modernization, and eco-friendly packaging for a better future.", tags: ["Sustainability", "Environment"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Sustainability"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Our Core Values"
|
||||
@@ -131,258 +114,151 @@ export default function AboutPage() {
|
||||
</div>
|
||||
|
||||
<div id="objectives" data-section="objectives">
|
||||
<TimelineProcessFlow
|
||||
<TimelinePhoneView
|
||||
title="Strategic Objectives"
|
||||
description="Our roadmap to becoming Africa's leading logistics provider"
|
||||
tag="2024-2030"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
items={[
|
||||
{
|
||||
id: "1", reverse: false,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=500&h=500&fit=crop"
|
||||
alt="Expansion"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
trigger: "trigger-1", content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Regional Expansion</h3>
|
||||
<p className="text-lg">Establish operations in 15+ African countries and create a seamless pan-African logistics network.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Open regional hubs in key markets</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Build strategic partnerships</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Invest in local infrastructure</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg">
|
||||
Establish operations in 15+ African countries
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
imageOne:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=500&h=500&fit=crop", imageAltOne: "Expansion", imageTwo:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=500&h=500&fit=crop", imageAltTwo: "Growth"},
|
||||
{
|
||||
id: "2", reverse: true,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=500&h=500&fit=crop"
|
||||
alt="Technology"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
trigger: "trigger-2", content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Technology Leadership</h3>
|
||||
<p className="text-lg">Implement AI and IoT solutions for predictive logistics and enhanced customer experience.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Deploy advanced tracking systems</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Develop mobile platform</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Enable blockchain transparency</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg">Implement AI and IoT solutions for logistics</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
imageOne:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=500&h=500&fit=crop", imageAltOne: "Technology", imageTwo:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=500&h=500&fit=crop", imageAltTwo: "Innovation"},
|
||||
{
|
||||
id: "3", reverse: false,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=500&h=500&fit=crop"
|
||||
alt="Capacity"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
trigger: "trigger-3", content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Capacity Enhancement</h3>
|
||||
<p className="text-lg">Double fleet capacity and warehouse space to serve growing demand across Africa.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Modernize vehicle fleet</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Build new warehousing facilities</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Expand team capacity</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg">Double fleet capacity and warehouse space</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
imageOne:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=500&h=500&fit=crop", imageAltOne: "Capacity", imageTwo:
|
||||
"https://images.unsplash.com/photo-1587863882176-e58e87a00d38?w=500&h=500&fit=crop", imageAltTwo: "Expansion"},
|
||||
{
|
||||
id: "4", reverse: true,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1587863882176-e58e87a00d38?w=500&h=500&fit=crop"
|
||||
alt="Sustainability"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
trigger: "trigger-4", content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Sustainability & Impact</h3>
|
||||
<p className="text-lg">Achieve carbon neutrality and create positive social impact across African communities.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Transition to green vehicles</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Support local employment</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">→</span>
|
||||
<span>Reduce environmental impact</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg">Achieve carbon neutrality and create positive impact</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
imageOne:
|
||||
"https://images.unsplash.com/photo-1587863882176-e58e87a00d38?w=500&h=500&fit=crop", imageAltOne: "Sustainability", imageTwo:
|
||||
"https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop", imageAltTwo: "Impact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Our Impact in Numbers"
|
||||
tag="Growth Metrics"
|
||||
tagAnimation="slide-up"
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50,000+", description:
|
||||
"Successful shipments delivered across Angola and African continent annually"
|
||||
id: "1", value: "50k", title: "Shipments", description:
|
||||
"Successful shipments delivered across Africa annually", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "2", value: "99.2%", description:
|
||||
"On-time delivery rate maintaining consistent excellence in service"
|
||||
id: "2", value: "99.2%", title: "On-Time", description:
|
||||
"On-time delivery rate maintaining consistent excellence", icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "3", value: "500+", description:
|
||||
"Professional team members dedicated to customer success"
|
||||
id: "3", value: "500+", title: "Team", description:
|
||||
"Professional team members dedicated to customer success", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "4", value: "12", description:
|
||||
"African countries served with established operations and partnerships"
|
||||
id: "4", value: "12", title: "Countries", description:
|
||||
"African countries served with established operations", icon: Award,
|
||||
},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "João Silva", role: "Founder & CEO", description:
|
||||
"20+ years in logistics and supply chain management across Africa. Former director at major international freight company.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop", socialLinks: [
|
||||
{
|
||||
icon: () => null,
|
||||
url: "https://linkedin.com"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", name: "Maria Costa", role: "COO", description:
|
||||
"Operations expert with proven track record in scaling logistics operations across multiple African markets.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop", socialLinks: [
|
||||
{
|
||||
icon: () => null,
|
||||
url: "https://linkedin.com"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", name: "Samuel Okafor", role: "Technology Lead", description:
|
||||
"Tech innovator specializing in logistics automation and IoT solutions for African supply chains.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop", socialLinks: [
|
||||
{
|
||||
icon: () => null,
|
||||
url: "https://linkedin.com"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", name: "Amara Diallo", role: "Regional Manager", description:
|
||||
"Strategic leader managing operations across West and Central Africa with deep regional knowledge.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&h=500&fit=crop", socialLinks: [
|
||||
{
|
||||
icon: () => null,
|
||||
url: "https://linkedin.com"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Leadership Team"
|
||||
description="Experienced professionals dedicated to transforming African logistics"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Our Impact in Numbers"
|
||||
description="Key metrics that showcase our growth and excellence"
|
||||
tag="Growth Metrics"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Join Our Journey"
|
||||
description="Whether you are a customer looking for logistics solutions or interested in joining our team, we would love to hear from you."
|
||||
buttons={[
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
{ text: "View Careers", onClick: () => {} },
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "João Silva", role: "Founder & CEO", imageSrc:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "2", name: "Maria Costa", role: "COO", imageSrc:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "3", name: "Samuel Okafor", role: "Technology Lead", imageSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "4", name: "Amara Diallo", role: "Regional Manager", imageSrc:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&h=500&fit=crop"},
|
||||
]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Our Leadership Team"
|
||||
description="Experienced professionals dedicated to transforming African logistics"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoEmphasis
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Join Our Journey"
|
||||
description="Whether you are a customer looking for logistics solutions or interested in joining our team, we would love to hear from you."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Webild Logistics"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "Our Mission", href: "mission" },
|
||||
{ label: "Our Values", href: "values" },
|
||||
{ label: "Leadership", href: "team" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
{ label: "Contact", href: "contact-cta" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Webild Logistics"
|
||||
copyrightText="© 2025 Webild Logistics. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -1,297 +1,99 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/providers/theme-provider';
|
||||
import { NavbarLayoutFloatingInline } from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { TextBox } from '@/components/Textbox';
|
||||
import { Input } from '@/components/form/Input';
|
||||
import { ButtonDirectionalHover } from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
|
||||
import { FooterMedia } from '@/components/sections/footer/FooterMedia';
|
||||
import { Mail, Phone, MapPin, Linkedin, Twitter, Globe } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '#services' },
|
||||
{ label: 'Pricing', href: '#' },
|
||||
{ label: 'Security', href: '#' },
|
||||
{ label: 'Roadmap', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '#about' },
|
||||
{ label: 'Blog', href: '#' },
|
||||
{ label: 'Careers', href: '#' },
|
||||
{ label: 'Press', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{ label: 'Documentation', href: '#' },
|
||||
{ label: 'Community', href: '#' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
{ label: 'Support', href: '#' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleInputChange = (field: keyof FormData, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Form submitted:', formData);
|
||||
setSubmitted(true);
|
||||
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||
setTimeout(() => setSubmitted(false), 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header Section */}
|
||||
<div className="mb-16">
|
||||
<TextBox
|
||||
title="Get in Touch"
|
||||
description="We're here to help and answer any question you might have. Reach out to our team and let's create something amazing together."
|
||||
textboxLayout="default"
|
||||
center={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
|
||||
{/* Contact Form */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-8">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-foreground">Send us a Message</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Name</label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={(value) => handleInputChange('name', value)}
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Email</label>
|
||||
<Input
|
||||
value={formData.email}
|
||||
onChange={(value) => handleInputChange('email', value)}
|
||||
type="email"
|
||||
placeholder="your.email@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Subject</label>
|
||||
<Input
|
||||
value={formData.subject}
|
||||
onChange={(value) => handleInputChange('subject', value)}
|
||||
type="text"
|
||||
placeholder="How can we help?"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Message</label>
|
||||
<textarea
|
||||
value={formData.message}
|
||||
onChange={(e) => handleInputChange('message', e.target.value)}
|
||||
placeholder="Tell us more about your inquiry..."
|
||||
required
|
||||
rows={6}
|
||||
className="w-full px-4 py-3 rounded-lg bg-secondary-cta/10 text-foreground placeholder:text-foreground/50 border border-secondary-cta/20 focus:border-primary-cta/50 focus:outline-none resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-xs text-foreground/60">We'll get back to you within 24 hours.</p>
|
||||
<ButtonDirectionalHover
|
||||
text={submitted ? 'Message Sent!' : 'Send Message'}
|
||||
type="submit"
|
||||
bgClassName="bg-primary-cta hover:bg-primary-cta/90"
|
||||
textClassName="text-white"
|
||||
circleClassName="bg-primary-cta/20"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Details & Location */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
{/* Contact Information */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 text-foreground">Contact Information</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Email</p>
|
||||
<a href="mailto:hello@webild.io" className="text-foreground/70 hover:text-primary-cta transition">
|
||||
hello@webild.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Phone</p>
|
||||
<a href="tel:+1234567890" className="text-foreground/70 hover:text-primary-cta transition">
|
||||
+1 (234) 567-890
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-primary-cta flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Address</p>
|
||||
<p className="text-foreground/70">123 Business Ave, Suite 100<br/>San Francisco, CA 94102</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Business Hours */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 text-foreground">Business Hours</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">Monday - Friday</span>
|
||||
<span className="text-foreground font-medium">9:00 AM - 6:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">Saturday</span>
|
||||
<span className="text-foreground font-medium">10:00 AM - 4:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground/70">Sunday</span>
|
||||
<span className="text-foreground font-medium">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="bg-card border border-foreground/10 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 text-foreground">Follow Us</h3>
|
||||
<div className="flex gap-3">
|
||||
<a
|
||||
href="https://twitter.com/webild"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-primary-cta/10 text-primary-cta hover:bg-primary-cta hover:text-white transition"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://linkedin.com/company/webild"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-primary-cta/10 text-primary-cta hover:bg-primary-cta hover:text-white transition"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<Linkedin className="w-5 h-5" />
|
||||
</a>
|
||||
<a
|
||||
href="https://webild.io"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-primary-cta/10 text-primary-cta hover:bg-primary-cta hover:text-white transition"
|
||||
aria-label="Website"
|
||||
>
|
||||
<Globe className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map/Location Section */}
|
||||
<div className="mb-16">
|
||||
<div className="bg-card border border-foreground/10 rounded-lg overflow-hidden h-96">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameBorder="0"
|
||||
title="Webild Location"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019946566829!2d-122.41941592346046!3d37.77492897125849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f47b3%3A0xb10ed6d9b5050b69!2s123%20Business%20Ave%2C%20San%20Francisco%2C%20CA%2094102!5e0!3m2!1sen!2sus!4v1234567890"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@webild.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920&h=400&fit=crop"
|
||||
imageAlt="Footer background"
|
||||
columns={footerColumns}
|
||||
logoText="Webild"
|
||||
copyrightText="© 2025 | Webild. All rights reserved."
|
||||
onPrivacyClick={() => console.log('Privacy policy clicked')}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Get in Touch With Webild"
|
||||
description="We're here to help with your logistics needs. Reach out to our team and we'll respond within 24 hours."
|
||||
tag="Contact Us"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="Contact us"
|
||||
buttons={[
|
||||
{ text: "Send Email", href: "contact-form" },
|
||||
{ text: "Learn More", href: "/services" },
|
||||
]}
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactCenter
|
||||
tag="Contact Information"
|
||||
tagIcon={Mail}
|
||||
title="Let's Connect"
|
||||
description="Send us a message and join hundreds of African businesses already benefiting from Webild's logistics solutions."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Get in Touch"
|
||||
onSubmit={(email) => console.log("Contact email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Webild Logistics"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Contact", href: "contact-form" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Webild Logistics. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { ServiceWrapper } from '@/providers/service-wrapper';
|
||||
import { Tag } from '@/components/tag';
|
||||
|
||||
const inter = Inter({
|
||||
variable: '--font-inter',
|
||||
subsets: ['latin'],
|
||||
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
|
||||
});
|
||||
import type { Metadata } from "next";
|
||||
import "./styles/globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Webild - Professional Web Solutions',
|
||||
description: 'Create beautiful, responsive web experiences with our professional services',
|
||||
keywords: 'web design, development, responsive, professional',
|
||||
authors: [{ name: 'Webild' }],
|
||||
openGraph: {
|
||||
title: 'Webild - Professional Web Solutions',
|
||||
description: 'Create beautiful, responsive web experiences with our professional services',
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
title: "Webild", description: "African logistics solutions"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -30,26 +10,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${inter.variable} antialiased`}>
|
||||
<ServiceWrapper>
|
||||
<Tag />
|
||||
{children}
|
||||
</ServiceWrapper>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
try {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
} catch (e) {}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<html lang="en">
|
||||
<body>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
||||
533
src/app/page.tsx
533
src/app/page.tsx
@@ -1,397 +1,296 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/providers/theme-provider';
|
||||
import { NavbarLayoutFloatingInline } from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { HeroBillboard } from '@/components/sections/hero/HeroBillboard';
|
||||
import { TextAbout } from '@/components/sections/about/TextAbout';
|
||||
import { FeatureBorderGlow } from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import { PricingCardTwo } from '@/components/sections/pricing/PricingCardTwo';
|
||||
import { MetricCardSeven } from '@/components/sections/metrics/MetricCardSeven';
|
||||
import { TeamCardTwo } from '@/components/sections/team/TeamCardTwo';
|
||||
import { TestimonialCardOne } from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import { FaqSplitText } from '@/components/sections/faq/FaqSplitText';
|
||||
import { ContactSplit } from '@/components/sections/contact/ContactSplit';
|
||||
import { FooterMedia } from '@/components/sections/footer/FooterMedia';
|
||||
import { Sparkles, Zap, Shield, Rocket, Users, TrendingUp, Twitter, Linkedin, Globe } from 'lucide-react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TeamCardSix from "@/components/sections/team/TeamCardSix";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Mail, TrendingUp, Users, Award, Zap, Shield } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Lightning Fast',
|
||||
description: 'Optimized performance with minimal overhead and blazing fast load times',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Secure by Default',
|
||||
description: 'Built with security best practices and enterprise-grade protection',
|
||||
},
|
||||
{
|
||||
icon: Rocket,
|
||||
title: 'Easy to Scale',
|
||||
description: 'Designed to grow with your business without compromise',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Team Collaboration',
|
||||
description: 'Built-in tools for seamless team communication and workflow',
|
||||
},
|
||||
];
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
id: '1',
|
||||
badge: 'Starter',
|
||||
price: '$29/mo',
|
||||
subtitle: 'Perfect for small teams',
|
||||
buttons: [
|
||||
{ text: 'Get Started', href: '/contact' },
|
||||
{ text: 'Learn More', href: '#' },
|
||||
],
|
||||
features: ['Up to 5 team members', '50GB storage', 'Email support', 'Basic analytics'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
badge: 'Professional',
|
||||
badgeIcon: Sparkles,
|
||||
price: '$79/mo',
|
||||
subtitle: 'For growing businesses',
|
||||
buttons: [
|
||||
{ text: 'Get Started', href: '/contact' },
|
||||
{ text: 'Chat to Sales', href: '#' },
|
||||
],
|
||||
features: ['Up to 20 team members', '500GB storage', 'Priority support', 'Advanced analytics', 'Custom integrations'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
badge: 'Enterprise',
|
||||
price: 'Custom',
|
||||
subtitle: 'For large organizations',
|
||||
buttons: [
|
||||
{ text: 'Contact Sales', href: '/contact' },
|
||||
{ text: 'Schedule Demo', href: '#' },
|
||||
],
|
||||
features: ['Unlimited team members', 'Unlimited storage', '24/7 phone support', 'Custom analytics', 'Dedicated account manager', 'SLA guarantee'],
|
||||
},
|
||||
];
|
||||
|
||||
const metrics = [
|
||||
{
|
||||
id: '1',
|
||||
value: '15+',
|
||||
title: 'Years in business consulting',
|
||||
items: ['8+ industries served', '5+ countries reached', '500+ successful projects'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
value: '500+',
|
||||
title: 'Projects completed worldwide',
|
||||
items: ['98% client satisfaction', 'Award-winning designs', 'Industry recognition'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
value: '10K+',
|
||||
title: 'Happy customers globally',
|
||||
items: ['24/7 support available', 'Money-back guarantee', 'Risk-free trial'],
|
||||
},
|
||||
];
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Alisa Hester',
|
||||
role: 'Founder & CEO',
|
||||
description: 'Former co-founder of Opendoor. Early staff at Spotify and Clearbit.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
|
||||
socialLinks: [
|
||||
{ icon: Twitter, url: 'https://twitter.com' },
|
||||
{ icon: Linkedin, url: 'https://linkedin.com' },
|
||||
{ icon: Globe, url: 'https://example.com' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Jasper Johnson',
|
||||
role: 'Head of Design',
|
||||
description: 'Award-winning designer with 10+ years of experience in UX/UI design.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||
socialLinks: [
|
||||
{ icon: Twitter, url: 'https://twitter.com' },
|
||||
{ icon: Linkedin, url: 'https://linkedin.com' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Sofia Martinez',
|
||||
role: 'Lead Developer',
|
||||
description: 'Full-stack developer passionate about creating scalable solutions.',
|
||||
imageSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
|
||||
socialLinks: [
|
||||
{ icon: Twitter, url: 'https://twitter.com' },
|
||||
{ icon: Linkedin, url: 'https://linkedin.com' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Alisa Hester',
|
||||
role: 'PM, Hourglass',
|
||||
company: 'Web Design Agency',
|
||||
rating: 5,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Jasper Johnson',
|
||||
role: 'Designer, Figma',
|
||||
company: 'Design Studio',
|
||||
rating: 5,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Sofia Martinez',
|
||||
role: 'CTO, TechFlow',
|
||||
company: 'Software Company',
|
||||
rating: 5,
|
||||
imageSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
id: '1',
|
||||
title: 'What is Webild and how can it help my business?',
|
||||
content: 'Webild is a comprehensive platform designed to help businesses create beautiful, responsive web experiences. We provide tools, resources, and services to streamline your web development process and improve your online presence.',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'How much does Webild cost?',
|
||||
content: 'Webild offers flexible pricing plans starting from $29/month for small teams up to enterprise solutions with custom pricing. Each plan includes different features and support levels to match your business needs.',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Is there a free trial available?',
|
||||
content: 'Yes! We offer a 14-day free trial of all our features. No credit card required to get started. You can explore all the capabilities and see if Webild is the right fit for your team.',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'What kind of support do you provide?',
|
||||
content: 'We provide email support for all plans, priority support for Professional and Enterprise plans, and 24/7 phone support for Enterprise customers. Our support team is dedicated to helping you succeed.',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'Can I upgrade or downgrade my plan?',
|
||||
content: 'Absolutely! You can change your plan at any time. If you upgrade, you will be charged the difference prorated for the remainder of your billing cycle. Downgrades take effect at the next billing cycle.',
|
||||
},
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '#services' },
|
||||
{ label: 'Pricing', href: '#' },
|
||||
{ label: 'Security', href: '#' },
|
||||
{ label: 'Roadmap', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '#about' },
|
||||
{ label: 'Blog', href: '#' },
|
||||
{ label: 'Careers', href: '#' },
|
||||
{ label: 'Press', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{ label: 'Documentation', href: '#' },
|
||||
{ label: 'Community', href: '#' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
{ label: 'Support', href: '#' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@webild.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
title="Welcome to Webild"
|
||||
description="Create beautiful, responsive web experiences that drive results for your business"
|
||||
tag="New Release"
|
||||
tagIcon={Sparkles}
|
||||
avatars={[
|
||||
{ src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop', alt: 'User 1' },
|
||||
{ src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop', alt: 'User 2' },
|
||||
{ src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop', alt: 'User 3' },
|
||||
]}
|
||||
avatarText="Trusted by 1,000+ businesses"
|
||||
imageSrc="https://images.unsplash.com/photo-1460925895917-aeb19be489c1?w=800&h=600&fit=crop"
|
||||
imageAlt="Hero banner"
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "aurora" }}
|
||||
title="African Logistics Reimagined"
|
||||
description="Connecting businesses across Africa with reliable, innovative, and customer-focused transportation solutions."
|
||||
tag="Next Generation Logistics"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="Logistics operations"
|
||||
buttons={[
|
||||
{ text: 'Get Started', href: '/contact' },
|
||||
{ text: 'Learn More', href: '#about' },
|
||||
{ text: "Get Started", href: "contact-cta" },
|
||||
{ text: "Learn More", href: "about" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="About Us"
|
||||
title="We build products that empower teams to create exceptional digital experiences"
|
||||
<SplitAbout
|
||||
title="About Webild Logistics"
|
||||
description="We are committed to transforming logistics across Africa by providing reliable, innovative, and customer-focused transportation solutions."
|
||||
tag="Our Mission"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Reliable Delivery", description: "On-time delivery guarantee with 24/7 operational excellence", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
title: "Innovation First", description: "Real-time tracking and AI-powered route optimization", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Trusted Partners", description: "Serving 12+ African countries with consistent excellence", icon: Shield,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
|
||||
imageAlt="About Webild"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: 'Explore Services', href: '#services' },
|
||||
{ text: 'View Pricing', href: '#' },
|
||||
{ text: "Our Story", href: "services" },
|
||||
{ text: "Contact Us", href: "contact-cta" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBorderGlow
|
||||
features={features}
|
||||
<FeatureCardTwentyFour
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Express Logistics Solutions Across Africa", author: "Webild Team", description:
|
||||
"Fast and reliable freight services connecting major African cities with real-time tracking and predictive delivery.", tags: ["Express", "Regional"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "Express logistics service"},
|
||||
{
|
||||
id: "2", title: "Warehouse Management & Distribution", author: "Webild Team", description:
|
||||
"Strategic warehouse placement and inventory management for optimized supply chain efficiency across the continent.", tags: ["Warehouse", "Distribution"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Warehouse management"},
|
||||
{
|
||||
id: "3", title: "Last-Mile Delivery Excellence", author: "Webild Team", description:
|
||||
"Specialized last-mile solutions ensuring packages reach their final destination safely and on schedule.", tags: ["Delivery", "Last-Mile"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=800&h=600&fit=crop", imageAlt: "Last-mile delivery"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Our Powerful Features"
|
||||
description="Everything you need to build, deploy, and scale your web projects"
|
||||
tag="Services"
|
||||
tagIcon={Sparkles}
|
||||
title="Our Services"
|
||||
description="Comprehensive logistics solutions tailored to your African business needs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: 'See All Features', href: '#' }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
plans={pricingPlans}
|
||||
animationType="slide-up"
|
||||
<PricingCardEight
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Starter", price: "$299/mo", subtitle: "Perfect for small businesses", buttons: [{ text: "Get Started", href: "contact-cta" }],
|
||||
features: [
|
||||
"Up to 100 shipments/month", "Basic tracking", "Email support", "Standard delivery times"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Most Popular", badgeIcon: Award,
|
||||
price: "$799/mo", subtitle: "Best for growing companies", buttons: [{ text: "Get Started", href: "contact-cta" }],
|
||||
features: [
|
||||
"Unlimited shipments", "Real-time tracking", "Priority support", "Custom routes", "API access"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Enterprise", price: "Custom", subtitle: "For large-scale operations", buttons: [{ text: "Contact Sales", href: "contact-cta" }],
|
||||
features: [
|
||||
"Unlimited everything", "Dedicated account manager", "24/7 phone support", "Custom integrations", "White-label options"],
|
||||
},
|
||||
]}
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs"
|
||||
tag="Pricing"
|
||||
tagIcon={Sparkles}
|
||||
description="Choose the plan that fits your business needs"
|
||||
tag="Pricing Plans"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
metrics={metrics}
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50k", title: "Shipments", description: "Delivered annually across Africa", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "2", value: "99.2%", title: "On-Time", description: "Delivery rate maintained consistently", icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "3", value: "500+", title: "Team Members", description: "Dedicated to customer success", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "4", value: "12", title: "Countries", description: "Served with established operations", icon: Award,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Our Impact by Numbers"
|
||||
description="Measurable results that demonstrate our expertise and commitment"
|
||||
tag="Metrics"
|
||||
tagIcon={TrendingUp}
|
||||
title="Our Impact"
|
||||
description="Key metrics that showcase our growth and excellence"
|
||||
tag="Performance"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
members={teamMembers}
|
||||
<TeamCardSix
|
||||
members={[
|
||||
{
|
||||
id: "1", name: "João Silva", role: "Founder & CEO", imageSrc:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "2", name: "Maria Costa", role: "COO", imageSrc:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "3", name: "Samuel Okafor", role: "Technology Lead", imageSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "4", name: "Amara Diallo", role: "Regional Manager", imageSrc:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&h=500&fit=crop"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Meet Our Team"
|
||||
description="The talented people behind our success"
|
||||
title="Our Leadership Team"
|
||||
description="Experienced professionals dedicated to transforming African logistics"
|
||||
tag="Team"
|
||||
tagIcon={Users}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
testimonials={testimonials}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Kofi Mensah", role: "Founder", company: "TechStart Lagos", rating: 5,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "2", name: "Zainab Hassan", role: "Supply Chain Manager", company: "African Traders", rating: 5,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "3", name: "David Osei", role: "Business Owner", company: "Quality Goods Ghana", rating: 4,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "180+", label: "Companies served" },
|
||||
{ value: "96%", label: "Client satisfaction" },
|
||||
{ value: "15+", label: "Years experience" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="What Our Customers Say"
|
||||
description="Real feedback from businesses that have transformed with Webild"
|
||||
tag="Testimonials"
|
||||
tagIcon={Sparkles}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from businesses transforming with Webild"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={faqs}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about Webild"
|
||||
faqsAnimation="slide-up"
|
||||
textPosition="left"
|
||||
<FaqBase
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I track my shipment?", content:
|
||||
"All shipments include real-time GPS tracking. You can monitor your delivery via our mobile app or website dashboard with live updates."},
|
||||
{
|
||||
id: "2", title: "What regions do you serve?", content:
|
||||
"We currently operate in 12 African countries including Nigeria, Ghana, Kenya, Tanzania, South Africa, and more. Check our coverage map for your location."},
|
||||
{
|
||||
id: "3", title: "What is your delivery guarantee?", content:
|
||||
"We guarantee 99.2% on-time delivery. If your shipment is late, we offer a full refund or service credit to your account."},
|
||||
{
|
||||
id: "4", title: "Do you offer international shipping?", content:
|
||||
"Currently, we focus on intra-African logistics. International shipping is available for select routes. Contact our sales team for details."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our logistics services"
|
||||
tag="Help"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showCard={true}
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactSplit
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Subscribe to our newsletter for weekly updates, tips, and exclusive insights about web development and digital transformation."
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: 'sparkles-gradient' }}
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Ready to Transform Your Logistics?"
|
||||
description="Join hundreds of African businesses already benefiting from Webild's innovative logistics solutions."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop"
|
||||
imageAlt="Newsletter section"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
buttonText="Start Free Trial"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
onSubmit={(email) => console.log('Newsletter signup:', email)}
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920&h=400&fit=crop"
|
||||
imageAlt="Footer background"
|
||||
columns={footerColumns}
|
||||
logoText="Webild"
|
||||
copyrightText="© 2025 | Webild. All rights reserved."
|
||||
onPrivacyClick={() => console.log('Privacy policy clicked')}
|
||||
/>
|
||||
</footer>
|
||||
<FooterBase
|
||||
logoText="Webild Logistics"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "services" },
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Security", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "contact-cta" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Status", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Webild Logistics. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Mail } from "lucide-react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Mail, TrendingUp, Zap, Shield, Award } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
@@ -32,332 +32,158 @@ export default function ServicesPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: "Get Quote", href: "contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@webild.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Comprehensive Logistics & Transportation Services"
|
||||
description="Detailed service offerings for Angola and regional Africa"
|
||||
title="Comprehensive Logistics Services"
|
||||
description="Tailored solutions for every stage of your supply chain across Africa"
|
||||
tag="Our Services"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="Services overview"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "services-list" },
|
||||
{ text: "Get Started", href: "contact-cta" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-list" data-section="services-list">
|
||||
<FeatureCardTwentyFour
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Express Logistics Solutions", author: "Webild Services", description:
|
||||
"Fast and reliable freight services connecting major African cities with real-time tracking and predictive delivery systems.", tags: ["Express", "Real-Time"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "Express logistics"},
|
||||
{
|
||||
id: "2", title: "Warehouse Management & Distribution", author: "Webild Services", description:
|
||||
"Strategic warehouse placement and inventory management for optimized supply chain efficiency across the continent.", tags: ["Warehouse", "Distribution"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Warehouse management"},
|
||||
{
|
||||
id: "3", title: "Last-Mile Delivery Excellence", author: "Webild Services", description:
|
||||
"Specialized last-mile solutions ensuring packages reach their final destination safely and on schedule every time.", tags: ["Delivery", "Final-Mile"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=800&h=600&fit=crop", imageAlt: "Last-mile delivery"},
|
||||
{
|
||||
id: "4", title: "Custom Logistics Solutions", author: "Webild Services", description:
|
||||
"Tailored logistics strategies designed specifically for your business needs and African market requirements.", tags: ["Custom", "Solutions"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1587863882176-e58e87a00d38?w=800&h=600&fit=crop", imageAlt: "Custom solutions"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Our Service Portfolio"
|
||||
description="Discover the full range of logistics solutions we offer"
|
||||
tag="Services"
|
||||
mediaItems={[
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-choose" data-section="why-choose">
|
||||
<SplitAbout
|
||||
title="Why Choose Webild"
|
||||
description="We stand out in the African logistics market with our commitment to excellence, innovation, and customer satisfaction."
|
||||
tag="Our Advantages"
|
||||
bulletPoints={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Freight services"},
|
||||
title: "Reliability", description: "99.2% on-time delivery rate with 24/7 support", icon: Shield,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "Cargo handling"},
|
||||
title: "Technology", description: "AI-powered optimization and real-time tracking", icon: Zap,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=800&h=600&fit=crop", imageAlt: "Container logistics"},
|
||||
title: "Coverage", description: "Operations across 12+ African countries", icon: TrendingUp,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
|
||||
imageAlt="Why choose Webild"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "contact" },
|
||||
{ text: "Request Quote", onClick: () => {} },
|
||||
{ text: "Our Story", href: "/about" },
|
||||
{ text: "Contact Us", href: "contact-cta" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="freight-services" data-section="freight-services">
|
||||
<FeatureCardTwelve
|
||||
features={[
|
||||
{
|
||||
id: "air-freight", label: "Air Freight", title: "Express air freight solutions worldwide", items: [
|
||||
"Same-day/next-day shipping", "Door-to-door service", "Real-time tracking", "Customs clearance included"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ocean-freight", label: "Ocean Freight", title: "Cost-effective ocean shipping", items: [
|
||||
"FCL and LCL options", "Weekly schedules", "Port-to-port and door-to-door", "Consolidation services"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ground-transport", label: "Ground", title: "Regional ground transportation", items: [
|
||||
"Dedicated fleet management", "Cross-border expertise", "Temperature-controlled options", "Hazmat certified vehicles"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Freight Services"
|
||||
description="Multiple transportation modes for every logistics need"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cargo-services" data-section="cargo-services">
|
||||
<FeatureCardTwelve
|
||||
features={[
|
||||
{
|
||||
id: "fcl", label: "Full Container", title: "Full Container Load (FCL) services", items: [
|
||||
"20ft & 40ft containers", "Direct routings", "Container management", "Competitive rates"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "lcl", label: "Less Than", title: "Less Than Container Load (LCL) services", items: [
|
||||
"Consolidation services", "Flexible shipment sizes", "Weekly departures", "Cost-effective rates"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "special-cargo", label: "Special Cargo", title: "Specialized cargo handling", items: [
|
||||
"Hazmat certification", "Cold chain logistics", "Fragile goods packaging", "Project cargo management"],
|
||||
buttons: [
|
||||
{ text: "Learn More", onClick: () => {} },
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Cargo Services"
|
||||
description="Comprehensive cargo handling and warehouse solutions"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<TimelineProcessFlow
|
||||
title="Our Service Process"
|
||||
description="How we ensure smooth and reliable logistics delivery"
|
||||
tag="Process"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
items={[
|
||||
{
|
||||
id: "1", reverse: false,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop"
|
||||
alt="Inquiry"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Inquiry & Assessment</h3>
|
||||
<p className="text-lg">Submit your shipment details and requirements. Our team evaluates your cargo, destination, and timeline.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Cargo specifications review</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Route optimization</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Cost estimation</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "2", reverse: true,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=500&h=500&fit=crop"
|
||||
alt="Pickup"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Pickup & Preparation</h3>
|
||||
<p className="text-lg">We arrange pickup from your location and prepare shipments with professional handling and documentation.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>On-time collection</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Professional packaging</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Documentation handling</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "3", reverse: false,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1577720643272-265226cc4a3f?w=500&h=500&fit=crop"
|
||||
alt="Transit"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Transit & Tracking</h3>
|
||||
<p className="text-lg">Your shipment is transported via optimized routes with real-time tracking and regular updates.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Real-time GPS tracking</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Regular status updates</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>24/7 monitoring</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "4", reverse: true,
|
||||
media: (
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1586528116874-aa4f5a49f23e?w=500&h=500&fit=crop"
|
||||
alt="Delivery"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold">Delivery & Support</h3>
|
||||
<p className="text-lg">Safe delivery to destination with proof of delivery and dedicated post-delivery support.</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Safe arrival confirmation</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Proof of delivery</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent">✓</span>
|
||||
<span>Extended support</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="coverage" data-section="coverage">
|
||||
<MediaAbout
|
||||
title="Pan-African Coverage"
|
||||
description="We operate across Angola and the entire African continent with established partnerships and infrastructure in major logistics hubs."
|
||||
tag="Geographic Coverage"
|
||||
imageSrc="https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1200&h=800&fit=crop"
|
||||
imageAlt="African logistics network"
|
||||
buttons={[
|
||||
{ text: "View Destinations", onClick: () => {} },
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
<PricingCardEight
|
||||
plans={[
|
||||
{
|
||||
id: "1", price: "Custom", name: "Basic Freight", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
id: "1", badge: "Starter", price: "$299/mo", subtitle: "Perfect for small businesses", buttons: [{ text: "Get Started", href: "contact-cta" }],
|
||||
features: [
|
||||
"Domestic Angola routes", "Standard 5-7 day delivery", "Email support", "Basic tracking"],
|
||||
"Up to 100 shipments/month", "Basic tracking", "Email support", "Standard delivery"],
|
||||
},
|
||||
{
|
||||
id: "2", price: "Custom", name: "Regional Express", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
id: "2", badge: "Most Popular", badgeIcon: Award,
|
||||
price: "$799/mo", subtitle: "Best for growing companies", buttons: [{ text: "Get Started", href: "contact-cta" }],
|
||||
features: [
|
||||
"Regional African delivery", "Express 2-3 day service", "24/7 phone support", "Real-time GPS tracking"],
|
||||
"Unlimited shipments", "Real-time tracking", "Priority support", "Custom routes", "API access"],
|
||||
},
|
||||
{
|
||||
id: "3", price: "Custom", name: "Premium International", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
id: "3", badge: "Enterprise", price: "Custom", subtitle: "For large-scale operations", buttons: [{ text: "Contact Sales", href: "contact-cta" }],
|
||||
features: [
|
||||
"Global shipping network", "Full customs handling", "Dedicated account manager", "Comprehensive insurance"],
|
||||
"Unlimited everything", "Dedicated manager", "24/7 phone support", "Custom integrations", "White-label options"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Service Pricing"
|
||||
description="Flexible pricing for all logistics needs. Contact us for custom quotes."
|
||||
description="Choose the perfect plan for your logistics needs"
|
||||
tag="Pricing"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Ready to Ship"
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCenter
|
||||
tag="Get Started"
|
||||
tagIcon={Mail}
|
||||
title="Get Your Custom Quote Today"
|
||||
description="Contact our logistics specialists to discuss your specific transportation and freight needs. We'll provide detailed pricing and timeline estimates."
|
||||
buttons={[
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
{ text: "Schedule Call", onClick: () => {} },
|
||||
]}
|
||||
title="Ready to Streamline Your Logistics?"
|
||||
description="Contact our team today to learn how Webild can transform your supply chain operations."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoEmphasis
|
||||
<FooterBase
|
||||
logoText="Webild Logistics"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
title: "Services", items: [
|
||||
{ label: "Express Logistics", href: "services-list" },
|
||||
{ label: "Warehouse Management", href: "services-list" },
|
||||
{ label: "Last-Mile Delivery", href: "services-list" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Coverage", href: "coverage" },
|
||||
{ label: "Process", href: "process" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Team", href: "/about#team" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "contact-cta" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Webild Logistics"
|
||||
copyrightText="© 2025 Webild Logistics. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -1,183 +1,212 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/ThemeProvider";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import {
|
||||
Shield,
|
||||
Zap,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Globe,
|
||||
Clock,
|
||||
DollarSign,
|
||||
} from "lucide-react";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Mail, TrendingUp, Users, Award, Zap, Shield } from "lucide-react";
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
];
|
||||
|
||||
export default function WhyChooseUsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Why Choose Us", id: "/why-choose-us" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="Logistics Pro"
|
||||
bottomLeftText="Global Network"
|
||||
bottomRightText="contact@logisticspro.com"
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@webild.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-choose-hero" data-section="why-choose-hero">
|
||||
<MediaAbout
|
||||
title="Why Leading Businesses Choose Logistics Pro"
|
||||
description="Discover the competitive advantages that set us apart. From advanced technology to exceptional customer service, we provide the solutions that make your business more efficient and profitable."
|
||||
tag="Competitive Advantages"
|
||||
imageSrc="/api/placeholder/1200/600"
|
||||
imageAlt="Why choose Logistics Pro"
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "aurora" }}
|
||||
title="Why Choose Webild Logistics"
|
||||
description="The trusted partner for African businesses seeking reliable, innovative, and customer-focused logistics solutions."
|
||||
tag="Choose Excellence"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
|
||||
imageAlt="Why choose Webild"
|
||||
buttons={[
|
||||
{ text: "Get Started Today", href: "/contact" },
|
||||
{ text: "View Pricing", href: "#pricing" },
|
||||
{ text: "Get Started", href: "contact-cta" },
|
||||
{ text: "Learn More", href: "advantages" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="advantages" data-section="advantages">
|
||||
<FeatureBento
|
||||
<SplitAbout
|
||||
title="Our Competitive Advantages"
|
||||
description="What makes us the preferred choice for logistics and transportation"
|
||||
tag="Differentiators"
|
||||
description="Webild stands out in the African logistics market with proven expertise, cutting-edge technology, and unwavering commitment to excellence."
|
||||
tag="Why We're Different"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Reliability First", description: "99.2% on-time delivery rate with 24/7 support", icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Technology Driven", description: "AI-powered optimization and real-time tracking", icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Continental Coverage", description: "Operations across 12+ African countries", icon: TrendingUp,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
|
||||
imageAlt="Our advantages"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Our Services", href: "/services" },
|
||||
{ text: "Contact Us", href: "contact-cta" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="differentiators" data-section="differentiators">
|
||||
<FeatureCardTwentyFour
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Technology", description: "AI-powered solutions for route optimization and predictive analytics", bentoComponent: "3d-card-grid", items: [
|
||||
{ name: "Route AI", icon: TrendingUp },
|
||||
{ name: "Real-time Tracking", icon: Globe },
|
||||
{ name: "Predictive Analytics", icon: TrendingUp },
|
||||
{ name: "Smart Integration", icon: Zap },
|
||||
],
|
||||
centerIcon: Shield,
|
||||
},
|
||||
id: "1", title: "African Expertise", author: "Our Strength", description:
|
||||
"Deep understanding of African markets, regulations, and logistics challenges with on-ground operations across the continent.", tags: ["Local", "Expertise"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "African expertise"},
|
||||
{
|
||||
title: "Extensive Network", description: "Global presence with local expertise in 180+ countries", bentoComponent: "orbiting-icons", centerIcon: Globe,
|
||||
items: [
|
||||
{ icon: Users, ring: 1 },
|
||||
{ icon: Award, ring: 1 },
|
||||
{ icon: TrendingUp, ring: 2 },
|
||||
{ icon: Clock, ring: 2 },
|
||||
{ icon: Shield, ring: 3 },
|
||||
{ icon: Zap, ring: 3 },
|
||||
],
|
||||
},
|
||||
id: "2", title: "Customer-Centric Approach", author: "Our Promise", description:
|
||||
"Dedicated account managers and 24/7 customer support ensuring your logistics needs are always prioritized.", tags: ["Support", "Service"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Customer service"},
|
||||
{
|
||||
title: "24/7 Expert Support", description: "Round-the-clock customer service with dedicated account managers", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Clock, label: "24/7 Available", value: "Always On" },
|
||||
{ icon: Users, label: "Expert Team", value: "30+ Years" },
|
||||
{ icon: Award, label: "Certified", value: "ISO 9001" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Cost Optimization", description: "Average savings of 30-40% through our efficiency innovations", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Sustainability", description: "Eco-friendly practices reducing carbon footprint by 45%", bentoComponent: "line-chart"},
|
||||
{
|
||||
title: "Proven Results", description: "Measurable improvements in delivery times and customer satisfaction", bentoComponent: "timeline", heading: "Success Metrics", subheading: "Documented improvements across all KPIs", items: [
|
||||
{ label: "Delivery Time", detail: "Reduced by 25%" },
|
||||
{ label: "Cost Savings", detail: "Achieved 35%" },
|
||||
{ label: "Satisfaction", detail: "Increased to 98%" },
|
||||
],
|
||||
completedLabel: "Achieved"},
|
||||
id: "3", title: "Innovation & Sustainability", author: "Our Vision", description:
|
||||
"Investing in green logistics, IoT solutions, and AI to create a sustainable future for African supply chains.", tags: ["Innovation", "Green"],
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=800&h=600&fit=crop", imageAlt: "Innovation"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
title="Investment in Excellence"
|
||||
description="Choose the plan that best fits your logistics needs"
|
||||
tag="Pricing"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
title="What Sets Us Apart"
|
||||
description="Our unique strengths and commitment to excellence"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1", badge: "Starter", badgeIcon: Zap,
|
||||
price: "Custom", subtitle: "Perfect for small businesses", buttons: [
|
||||
{ text: "Get Started", href: "/contact" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Up to 50 shipments/month", "Basic tracking and reporting", "Email support", "Standard delivery times"],
|
||||
},
|
||||
{
|
||||
id: "2", badge: "Professional", badgeIcon: Award,
|
||||
price: "Custom", subtitle: "For growing companies", buttons: [
|
||||
{ text: "Get Started", href: "/contact" },
|
||||
{ text: "Learn More", href: "#" },
|
||||
],
|
||||
features: [
|
||||
"Unlimited shipments", "Advanced analytics & reporting", "Priority 24/7 support", "Dedicated account manager", "Warehouse management included"],
|
||||
},
|
||||
{
|
||||
id: "3", badge: "Enterprise", badgeIcon: Globe,
|
||||
price: "Custom", subtitle: "For large organizations", buttons: [
|
||||
{ text: "Schedule Demo", href: "/contact" },
|
||||
{ text: "Contact Sales", href: "/contact" },
|
||||
],
|
||||
features: [
|
||||
"Unlimited everything", "Custom solutions & integration", "Dedicated infrastructure", "White-label options", "SLA guarantee", "Strategic consulting"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBaseReveal
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50k", title: "Shipments", description: "Delivered annually with consistent excellence", icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
id: "2", value: "99.2%", title: "On-Time", description: "Delivery rate maintained year-round", icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "3", value: "500+", title: "Employees", description: "Dedicated to your success across Africa", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "4", value: "12", title: "Countries", description: "Served with established operations", icon: Award,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="By The Numbers"
|
||||
description="Our track record speaks for itself"
|
||||
tag="Performance"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Kofi Mensah", role: "Founder", company: "TechStart Lagos", rating: 5,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "2", name: "Zainab Hassan", role: "Supply Chain Manager", company: "African Traders", rating: 5,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=500&h=500&fit=crop"},
|
||||
{
|
||||
id: "3", name: "David Osei", role: "Business Owner", company: "Quality Goods Ghana", rating: 4,
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&h=500&fit=crop"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "180+", label: "Companies served" },
|
||||
{ value: "96%", label: "Client satisfaction" },
|
||||
{ value: "15+", label: "Years experience" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="What Our Clients Say"
|
||||
description="Hear from businesses transforming with Webild"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCenter
|
||||
tag="Ready to Succeed?"
|
||||
tagIcon={Mail}
|
||||
title="Join the Webild Advantage"
|
||||
description="Experience the difference that African expertise, reliability, and innovation can make for your business."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Start Your Journey"
|
||||
inputPlaceholder="Enter your email"
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBase
|
||||
logoText="Webild Logistics"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Why Choose Us", href: "/why-choose-us" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Shipping Solutions", href: "#" },
|
||||
{ label: "Warehouse Management", href: "#" },
|
||||
{ label: "Supply Chain Consulting", href: "#" },
|
||||
{ label: "Tracking & Analytics", href: "#" },
|
||||
title: "Company", items: [
|
||||
{ label: "Our Advantages", href: "advantages" },
|
||||
{ label: "Our Team", href: "/about#team" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQs", href: "#" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Contact", href: "contact-cta" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Logistics Pro. All rights reserved."
|
||||
copyrightText="© 2025 Webild Logistics. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user