Merge version_2 into main #5
373
src/app/about/page.tsx
Normal file
373
src/app/about/page.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
"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";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: "Get in Touch", href: "contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
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"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "mission" },
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="mission" data-section="mission">
|
||||
<MediaAbout
|
||||
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"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=800&fit=crop"
|
||||
imageAlt="Our vision for African logistics"
|
||||
buttons={[
|
||||
{ text: "Our Values", href: "values" },
|
||||
{ text: "Get Started", href: "contact" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="values" data-section="values">
|
||||
<FeatureCardTwelve
|
||||
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: "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: "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: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Our Core Values", description="The principles that guide everything we do"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="objectives" data-section="objectives">
|
||||
<TimelineProcessFlow
|
||||
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: (
|
||||
<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>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<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>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<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>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<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>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Our Impact in Numbers"
|
||||
tag="Growth Metrics"
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "50,000+", description:
|
||||
"Successful shipments delivered across Angola and African continent annually"},
|
||||
{
|
||||
id: "2", value: "99.2%", description:
|
||||
"On-time delivery rate maintaining consistent excellence in service"},
|
||||
{
|
||||
id: "3", value: "500+", description:
|
||||
"Professional team members dedicated to customer success"},
|
||||
{
|
||||
id: "4", value: "12", description:
|
||||
"African countries served with established operations and partnerships"},
|
||||
]}
|
||||
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"
|
||||
animationType="slide-up"
|
||||
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're a customer looking for logistics solutions or interested in joining our team, we'd love to hear from you."
|
||||
buttons={[
|
||||
{ text: "Contact Us", href: "contact" },
|
||||
{ text: "View Careers", onClick: () => {} },
|
||||
]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Our Mission", href: "mission" },
|
||||
{ label: "Our Values", href: "values" },
|
||||
{ label: "Leadership", href: "team" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Webild Logistics"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
297
src/app/contact/page.tsx
Normal file
297
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
'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';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
];
|
||||
|
||||
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"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
1438
src/app/layout.tsx
1438
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
741
src/app/page.tsx
741
src/app/page.tsx
@@ -1,450 +1,397 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import {
|
||||
Truck,
|
||||
Shield,
|
||||
Package,
|
||||
TrendingUp,
|
||||
Star,
|
||||
Building2,
|
||||
Phone,
|
||||
Users,
|
||||
Award,
|
||||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
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';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Sobre Nós", id: "/sobre" },
|
||||
{ name: "Serviços", id: "services" },
|
||||
{ name: "Diferenciais", id: "features" },
|
||||
{ name: "Contacto", id: "contact-section" },
|
||||
];
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About', id: '#about' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Services', id: '#services' },
|
||||
];
|
||||
|
||||
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() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="AJS Transporte"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Solicitar Orçamento", href: "#contact-section"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Soluções Logísticas Integradas para Angola e Região"
|
||||
description="Transporte rodoviário, armazenagem, distribuição e gestão de cadeias de abastecimento com excelência operacional e cumprimento de prazos."
|
||||
background={{ variant: "plain" }}
|
||||
tag="Líder em Logística"
|
||||
tagIcon={Truck}
|
||||
tagAnimation="slide-up"
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-looking-truck_23-2149426499.jpg", imageAlt: "Operações de logística e armazenagem"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/white-semi-truck-driving-highway-sunset_23-2151998715.jpg", imageAlt: "Frota de transporte profissional"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/people-taking-care-warehouse-logistics-together_23-2149128316.jpg", imageAlt: "Gestão de stock e armazenagem"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/solar-panels-plant-employee-uses-cad-software-tablet-optimize-layouts_482257-118039.jpg", imageAlt: "Operações de carga e distribuição"
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/white-semi-truck-driving-highway-sunset_23-2151998715.jpg", imageAlt: "Transporte de mercadorias rodoviário"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/people-taking-care-warehouse-logistics-together_23-2149128316.jpg", imageAlt: "Armazenagem integrada"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/solar-panels-plant-employee-uses-cad-software-tablet-optimize-layouts_482257-118039.jpg", imageAlt: "Distribuição e logística"
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-man-looking-truck_23-2149426499.jpg", imageAlt: "Centro de operações logísticas"
|
||||
},
|
||||
<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"
|
||||
buttons={[
|
||||
{
|
||||
text: "Conhecer Serviços", href: "services"
|
||||
},
|
||||
{
|
||||
text: "Solicitar Orçamento", href: "contact-section"
|
||||
},
|
||||
{ text: 'Get Started', href: '/contact' },
|
||||
{ text: 'Learn More', href: '#about' },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "AJS Transporte e Logística: "
|
||||
},
|
||||
{
|
||||
type: "text", content:
|
||||
"Compromisso com Excelência Operacional e Confiabilidade"
|
||||
},
|
||||
]}
|
||||
<TextAbout
|
||||
tag="About Us"
|
||||
title="We build products that empower teams to create exceptional digital experiences"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Sobre a Empresa", href: "/sobre"
|
||||
},
|
||||
{ text: 'Explore Services', href: '#services' },
|
||||
{ text: 'View Pricing', href: '#' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
title="Por Que Escolher a AJS"
|
||||
description="Diferenciais que consolidam nossa liderança no setor de transporte e logística em Angola e na região africana."
|
||||
tag="Vantagens Competitivas"
|
||||
tagIcon={Shield}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Segurança Operacional", description:
|
||||
"Conformidade com os mais rigorosos padrões de segurança e protocolos operacionais. Frota regularizada e equipes certificadas.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/parked-cars-aerial-views_23-2148959682.jpg", imageAlt: "Gestão de frotas segura"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Eficiência de Processos", description:
|
||||
"Sistemas integrados de gestão que garantem rastreamento em tempo real e otimização de rotas para máxima eficiência.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/parked-cars-aerial-views_23-2148959682.jpg", imageAlt: "Sistema de rastreamento"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Responsabilidade Ambiental", description:
|
||||
"Compromisso com práticas sustentáveis e redução de impacto ambiental. Gestão responsável de recursos.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/aerial-view-busy-highway-intersection-full-traffic-daytime_181624-46287.jpg", imageAlt: "Transporte sustentável"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Cumprimento de Prazos", description:
|
||||
"Histórico comprovado de entregas pontuais e confiáveis. Compromisso absoluto com os prazos acordados.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-delivery-man-with-packs_23-2149035885.jpg", imageAlt: "Entrega garantida"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Contacte-nos", href: "contact-section"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardFour
|
||||
title="Serviços Logísticos Completos"
|
||||
description="Soluções integradas cobrindo toda a cadeia logística para garantir eficiência, segurança e qualidade operacional."
|
||||
tag="Serviços Principais"
|
||||
tagIcon={Package}
|
||||
tagAnimation="slide-up"
|
||||
<FeatureBorderGlow
|
||||
features={features}
|
||||
animationType="slide-up"
|
||||
title="Our Powerful Features"
|
||||
description="Everything you need to build, deploy, and scale your web projects"
|
||||
tag="Services"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: 'See All Features', href: '#' }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
plans={pricingPlans}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Transporte Rodoviário", price: "Consultoria", variant: "Cobertura: Angola e África Regional", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/aerial-view-busy-highway-intersection-full-traffic-daytime_181624-46287.jpg", imageAlt: "Transporte rodoviário profissional"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Armazenagem e Gestão de Stock", price: "Consultoria", variant: "Facilidades Modernas e Seguras", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/african-american-shipment-manager-dancing-warehouse-aisle_482257-77628.jpg", imageAlt: "Armazenagem integrada"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Logística de Distribuição", price: "Consultoria", variant: "Entregas Door-to-Door Garantidas", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-delivery-man-with-packs_23-2149035885.jpg", imageAlt: "Serviço de distribuição"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Gestão de Frotas", price: "Consultoria", variant: "Rastreamento e Otimização", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/parked-cars-aerial-views_23-2148959682.jpg", imageAlt: "Gestão de frotas"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Cadeia de Abastecimento", price: "Consultoria", variant: "Soluções Personalizadas", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/global-logistics-international-shipping_23-2151989541.jpg", imageAlt: "Gestão de cadeia de abastecimento"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar Serviços", href: "services"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Choose the perfect plan for your needs"
|
||||
tag="Pricing"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
title="Nossa Força de Mercado"
|
||||
description="Indicadores que demonstram liderança, crescimento sustentado e confiabilidade no sector logístico angolano."
|
||||
tag="Estatísticas"
|
||||
<MetricCardSeven
|
||||
metrics={metrics}
|
||||
animationType="slide-up"
|
||||
title="Our Impact by Numbers"
|
||||
description="Measurable results that demonstrate our expertise and commitment"
|
||||
tag="Metrics"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
members={teamMembers}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", value: "501+", title: "Colaboradores", description: "Equipa qualificada e dedicada ao serviço", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "2", value: "25+", title: "Anos de Experiência", description: "Liderança reconhecida no sector", icon: Award,
|
||||
},
|
||||
{
|
||||
id: "3", value: "99%", title: "Cumprimento de Prazos", description: "Compromisso absoluto com entregas", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "4", value: "8+", title: "Países Atendidos", description: "Cobertura regional expandida", icon: Award,
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Sobre a AJS", href: "/sobre"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
title="Meet Our Team"
|
||||
description="The talented people behind our success"
|
||||
tag="Team"
|
||||
tagIcon={Users}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Histórias de Confiança e Sucesso"
|
||||
description="Clientes satisfeitos que confiam nos nossos serviços logísticos integrados e excelência operacional."
|
||||
tag="Testemunhos"
|
||||
tagIcon={Star}
|
||||
tagAnimation="slide-up"
|
||||
<TestimonialCardOne
|
||||
testimonials={testimonials}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="What Our Customers Say"
|
||||
description="Real feedback from businesses that have transformed with Webild"
|
||||
tag="Testimonials"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "João Silva", role: "Director Geral", company: "Empresa de Mineração Angola", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-business-leader-looking-through-window_1262-5623.jpg", imageAlt: "João Silva"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Maria Santos", role: "Responsável Logística", company: "Grupo Comercial Regional", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg", imageAlt: "Maria Santos"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Carlos Oliveira", role: "VP Operações", company: "Distribuidor Regional", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg", imageAlt: "Carlos Oliveira"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Ana Costa", role: "Coordenadora Supply Chain", company: "Empresa de Retail Angola", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79278.jpg", imageAlt: "Ana Costa"
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "500+", label: "Clientes Satisfeitos"
|
||||
},
|
||||
{
|
||||
value: "98%", label: "Taxa de Retenção"
|
||||
},
|
||||
{
|
||||
value: "10M+", label: "Toneladas Transportadas"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Ver Mais Histórias", href: "contact-section"
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Parceiros de Confiança"
|
||||
description="Empresas líderes em Angola e na região que confiam nos nossos serviços de transporte e logística."
|
||||
tag="Clientes Corporativos"
|
||||
tagIcon={Building2}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Acme Corp", "TechFlow", "Innovate Inc", "CloudSync"
|
||||
]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-vector/modern-money-logo-concept_23-2147886023.jpg", "http://img.b2bpic.net/free-vector/renewable-energy-logo-design_23-2150045660.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-flat-design-power-outage-labels_23-2149253384.jpg", "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827310.jpg", "http://img.b2bpic.net/free-vector/mechanical-repair-logo-template-design_23-2149995090.jpg", "http://img.b2bpic.net/free-vector/gradient-technology-logo_23-2148162306.jpg", "http://img.b2bpic.net/free-vector/global-economy-money-business_24877-50958.jpg", "http://img.b2bpic.net/free-vector/gradient-labor-day-labels-collection_23-2149040031.jpg"
|
||||
]}
|
||||
speed={40}
|
||||
<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"
|
||||
useInvertedBackground={false}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-section" data-section="contact-section">
|
||||
<ContactFaq
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Quais são os tempos de entrega?", content:
|
||||
"Os tempos de entrega variam conforme a rota e tipo de carga. Para entregas regionais em Angola, operamos com prazos de 2-5 dias úteis. Para operações na região africana, consulte-nos para prazos específicos."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Como rastreio a minha carga?", content:
|
||||
"Oferecemos rastreamento em tempo real através do nosso sistema integrado. Todos os clientes recebem acesso a um portal onde podem acompanhar o status da sua carga durante todo o trajeto."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Que tipos de carga transportam?", content:
|
||||
"Transportamos uma ampla variedade de cargas, incluindo mercadorias perigosas (ADR), carga geral, carga unitizada, e produtos especializados. Dispomos de equipamento apropriado para cada tipo de carga."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Oferecem soluções customizadas?", content:
|
||||
"Sim, a AJS oferece soluções logísticas completamente personalizadas. Trabalhamos com cada cliente para desenhar um plano logístico que se adeque às suas necessidades específicas e orçamento."
|
||||
},
|
||||
]}
|
||||
ctaTitle="Agende Sua Consultoria"
|
||||
ctaDescription="Entre em contacto connosco para discutir as suas necessidades logísticas e encontrar a solução ideal."
|
||||
ctaButton={{
|
||||
text: "Contactar Agora", href: "/sobre"
|
||||
}}
|
||||
ctaIcon={Phone}
|
||||
<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' }}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop"
|
||||
imageAlt="Newsletter section"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
onSubmit={(email) => console.log('Newsletter signup:', email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="AJS Transporte"
|
||||
copyrightText="© 2025 AJS Transporte e Logística. Todos os direitos reservados."
|
||||
columns={[
|
||||
{
|
||||
title: "Empresa", items: [
|
||||
{
|
||||
label: "Sobre Nós", href: "/sobre"
|
||||
},
|
||||
{
|
||||
label: "Missão, Visão e Valores", href: "/sobre"
|
||||
},
|
||||
{
|
||||
label: "Equipa", href: "/sobre"
|
||||
},
|
||||
{
|
||||
label: "Carreiras", href: "#"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Serviços", items: [
|
||||
{
|
||||
label: "Transporte Rodoviário", href: "#services"
|
||||
},
|
||||
{
|
||||
label: "Armazenagem", href: "#services"
|
||||
},
|
||||
{
|
||||
label: "Distribuição", href: "#services"
|
||||
},
|
||||
{
|
||||
label: "Gestão de Frotas", href: "#services"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto", items: [
|
||||
{
|
||||
label: "Telefone", href: "tel:+244929102270"
|
||||
},
|
||||
{
|
||||
label: "Email", href: "mailto:info@ajstransporte.ao"
|
||||
},
|
||||
{
|
||||
label: "Endereço", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Formulário", href: "#contact-section"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Redes Sociais", items: [
|
||||
{
|
||||
label: "Facebook", href: "https://facebook.com"
|
||||
},
|
||||
{
|
||||
label: "LinkedIn", href: "https://linkedin.com"
|
||||
},
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com"
|
||||
},
|
||||
{
|
||||
label: "Twitter", href: "https://twitter.com"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Política de Privacidade", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Termos e Condições", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Política de Cookies", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Declaração de Conformidade", href: "#"
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<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>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
364
src/app/services/page.tsx
Normal file
364
src/app/services/page.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
"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";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
button={{ text: "Get Quote", href: "contact" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Comprehensive Logistics & Transportation Services"
|
||||
description="Detailed service offerings for Angola and regional Africa"
|
||||
tag="Services"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1578881289490-85f3f96aa2fb?w=800&h=600&fit=crop", imageAlt: "Freight services"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1493976040803-5d82ec434371?w=800&h=600&fit=crop", imageAlt: "Cargo handling"},
|
||||
{
|
||||
imageSrc:
|
||||
"https://images.unsplash.com/photo-1531996516928-45c3bd7b5f00?w=800&h=600&fit=crop", imageAlt: "Container logistics"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "contact" },
|
||||
{ text: "Request Quote", onClick: () => {} },
|
||||
]}
|
||||
/>
|
||||
</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
|
||||
plans={[
|
||||
{
|
||||
id: "1", price: "Custom", name: "Basic Freight", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
features: [
|
||||
"Domestic Angola routes", "Standard 5-7 day delivery", "Email support", "Basic tracking"],
|
||||
},
|
||||
{
|
||||
id: "2", price: "Custom", name: "Regional Express", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
features: [
|
||||
"Regional African delivery", "Express 2-3 day service", "24/7 phone support", "Real-time GPS tracking"],
|
||||
},
|
||||
{
|
||||
id: "3", price: "Custom", name: "Premium International", buttons: [
|
||||
{ text: "Get Quote", href: "contact" },
|
||||
{ text: "Details", onClick: () => {} },
|
||||
],
|
||||
features: [
|
||||
"Global shipping network", "Full customs handling", "Dedicated account manager", "Comprehensive insurance"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Service Pricing"
|
||||
description="Flexible pricing for all logistics needs. Contact us for custom quotes."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Ready to Ship"
|
||||
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: () => {} },
|
||||
]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "About", href: "/about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Coverage", href: "coverage" },
|
||||
{ label: "Process", href: "process" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy", href: "#" },
|
||||
{ label: "Terms", href: "#" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Webild Logistics"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
184
src/app/why-choose-us/page.tsx
Normal file
184
src/app/why-choose-us/page.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/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";
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
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="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"
|
||||
buttons={[
|
||||
{ text: "Get Started Today", href: "/contact" },
|
||||
{ text: "View Pricing", href: "#pricing" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="advantages" data-section="advantages">
|
||||
<FeatureBento
|
||||
title="Our Competitive Advantages"
|
||||
description="What makes us the preferred choice for logistics and transportation"
|
||||
tag="Differentiators"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
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,
|
||||
},
|
||||
{
|
||||
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 },
|
||||
],
|
||||
},
|
||||
{
|
||||
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"},
|
||||
]}
|
||||
/>
|
||||
</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"
|
||||
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
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Why Choose Us", href: "/why-choose-us" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Shipping Solutions", href: "#" },
|
||||
{ label: "Warehouse Management", href: "#" },
|
||||
{ label: "Supply Chain Consulting", href: "#" },
|
||||
{ label: "Tracking & Analytics", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQs", href: "#" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Logistics Pro. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user