Switch to version 3: modified src/app/services/page.tsx
This commit is contained in:
@@ -1,126 +1,80 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import { ArrowRight, Sparkles, CheckCircle } from 'lucide-react';
|
||||
|
||||
const serviceCategories = [
|
||||
{
|
||||
id: "general-supplies", tag: "GS", name: "General Supplies", description: "Providing a wide range of essential goods, equipment, and materials to support various operational needs across different sectors.", bulletPoints: [
|
||||
"Office Stationery", "IT Hardware & Software", "Cleaning & Janitorial Supplies", "Safety & PPE", "Building Materials", "Consumables & Perishables"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=General+Supplies"
|
||||
},
|
||||
{
|
||||
id: "logistics-transport", tag: "LT", name: "Logistics & Transport", description: "Comprehensive logistics solutions including cargo handling, transportation, warehousing, and supply chain management to ensure efficient movement of goods.", bulletPoints: [
|
||||
"Freight Forwarding", "Ground Transportation", "Air & Sea Cargo", "Warehousing & Distribution", "Customs Clearance", "Fleet Management"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=Logistics+%26+Transport"
|
||||
},
|
||||
{
|
||||
id: "aviation-technical-support", tag: "AT", name: "Aviation & Technical Support", description: "Specialized services for the aviation sector, encompassing aircraft maintenance, ground support equipment, and technical personnel.", bulletPoints: [
|
||||
"Aircraft Maintenance", "GSE Supply & Maintenance", "Technical Personnel Provision", "Aviation Fuel Services", "Flight Operations Support", "Airfield Management"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=Aviation+%26+Technical+Support"
|
||||
},
|
||||
{
|
||||
id: "ict-digital-solutions", tag: "ID", name: "ICT & Digital Solutions", description: "Cutting-edge information and communication technology services, including network infrastructure, software development, and digital transformation initiatives.", bulletPoints: [
|
||||
"Network Design & Implementation", "Software Development", "Cybersecurity", "Cloud Services", "IT Consulting", "Data Management"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=ICT+%26+Digital+Solutions"
|
||||
},
|
||||
{
|
||||
id: "construction-facility-maintenance", tag: "CF", name: "Construction & Facility Maintenance", description: "Expert services in construction, renovation, and ongoing facility maintenance to ensure optimal functionality and safety of infrastructure.", bulletPoints: [
|
||||
"Building Construction", "Renovation & Remodeling", "HVAC Maintenance", "Electrical & Plumbing", "Landscaping & Groundskeeping", "Integrated Facility Management"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=Construction+%26+Facility+Maintenance"
|
||||
},
|
||||
{
|
||||
id: "consultancy-project-support", tag: "CP", name: "Consultancy & Project Support", description: "Strategic advisory and hands-on project management support to help organizations achieve their goals efficiently and effectively.", bulletPoints: [
|
||||
"Strategic Planning", "Project Management", "Risk Assessment", "Feasibility Studies", "Financial Advisory", "HR & Training Solutions"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=Consultancy+%26+Project+Support"
|
||||
},
|
||||
{
|
||||
id: "specialized-tender-based-services", tag: "ST", name: "Specialized Tender-Based Services", description: "Tailored services delivered through competitive tendering, offering bespoke solutions to meet unique client requirements.", bulletPoints: [
|
||||
"Custom Procurement Solutions", "Public Sector Bids", "Private Sector Contracts", "Proposal Development", "Contract Negotiation", "Specialized Project Execution"
|
||||
],
|
||||
imageSrc: "https://via.placeholder.com/800x600?text=Specialized+Tender-Based+Services"
|
||||
}
|
||||
];
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const heroCarouselItems = [
|
||||
{ imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+1", imageAlt: "Service Image 1" },
|
||||
{ imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+2", imageAlt: "Service Image 2" },
|
||||
{ imageSrc: "https://via.placeholder.com/400x300?text=Service+Image+3", imageAlt: "Service Image 3" },
|
||||
];
|
||||
const defaultTheme = {
|
||||
defaultButtonVariant: "hover-magnetic", defaultTextAnimation: "entrance-slide", borderRadius: "rounded", contentWidth: "medium", sizing: "medium", background: "none", cardStyle: "soft-shadow", primaryButtonStyle: "gradient", secondaryButtonStyle: "glass", headingFontWeight: "bold"};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "General Supplies", id: "#general-supplies" },
|
||||
{ name: "Logistics", id: "#logistics-transport" },
|
||||
{ name: "Aviation", id: "#aviation-technical-support" },
|
||||
{ name: "ICT", id: "#ict-digital-solutions" },
|
||||
{ name: "Construction", id: "#construction-facility-maintenance" },
|
||||
{ name: "Consultancy", id: "#consultancy-project-support" },
|
||||
{ name: "Specialized Tenders", id: "#specialized-tender-based-services" }
|
||||
{ name: "Services", id: "/services" }
|
||||
]}
|
||||
brandName="OurCompany"
|
||||
logoSrc="https://via.placeholder.com/50x50?text=Logo"
|
||||
button={{ text: "Contact Us", href: "#contact" }}
|
||||
brandName="Webild"
|
||||
button={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
<div id="services-page-wrapper">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Our Comprehensive Services"
|
||||
description="Delivering tailored solutions across various sectors, from essential supplies to specialized project support. We are committed to excellence and efficiency in every service we provide."
|
||||
tag="Trusted Solutions"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: 'animated-grid' }}
|
||||
buttons={[{ text: "Explore Our Services", href: "#general-supplies" }]}
|
||||
leftCarouselItems={heroCarouselItems}
|
||||
rightCarouselItems={heroCarouselItems}
|
||||
carouselPosition="right"
|
||||
buttonAnimation="slide-up"
|
||||
<main className="flex min-h-screen flex-col items-center justify-between">
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="Our Services"
|
||||
description="Discover how we can help your business thrive with our comprehensive range of solutions. From conception to deployment, we're with you every step."
|
||||
buttons={[
|
||||
{ text: "Get a Quote", href: "#contact" }
|
||||
]}
|
||||
background={{ variant: 'radial-gradient' }}
|
||||
/>
|
||||
|
||||
{serviceCategories.map((service) => (
|
||||
<div id={service.id} data-section={service.id} key={service.id}>
|
||||
<SplitAbout
|
||||
title={service.name}
|
||||
description={service.description}
|
||||
tag={service.tag}
|
||||
bulletPoints={service.bulletPoints.map(point => ({ title: point, description: '', icon: CheckCircle }))}
|
||||
buttons={[{ text: "Request This Service →", href: "#contact", icon: ArrowRight }]}
|
||||
imageSrc={service.imageSrc}
|
||||
imageAlt={service.name}
|
||||
imagePosition="right"
|
||||
useInvertedBackground={false}
|
||||
</div>
|
||||
<div id="offerings" data-section="offerings">
|
||||
<FeatureCardTwentyEight
|
||||
tag="Our Expertise"
|
||||
title="Tailored Solutions for Your Success"
|
||||
description="We offer a diverse portfolio of services designed to meet the unique challenges and opportunities of modern businesses, ensuring growth and innovation."
|
||||
features={[
|
||||
{ id: "1", title: "Custom Web Development", subtitle: "Crafting bespoke websites, powerful e-commerce platforms, and scalable web applications tailored to your business goals.", category: "Development", value: "Scalable" },
|
||||
{ id: "2", title: "Mobile App Development", subtitle: "Building intuitive and high-performance native iOS and Android applications, as well as cross-platform solutions that engage users.", category: "Development", value: "Cross-Platform" },
|
||||
{ id: "3", title: "UI/UX Design & Prototyping", subtitle: "Designing captivating user interfaces and seamless user experiences, backed by thorough research, wireframing, and interactive prototyping.", category: "Design", value: "User-Centric" },
|
||||
{ id: "4", title: "Cloud Infrastructure & DevOps", subtitle: "Implementing robust cloud solutions, managing infrastructure, and streamlining development operations for efficiency and reliability.", category: "Operations", value: "Automated" },
|
||||
{ id: "5", title: "Digital Marketing & SEO", subtitle: "Enhancing your online presence with data-driven digital marketing strategies, including SEO, SEM, social media management, and content creation.", category: "Marketing", value: "Visibility" },
|
||||
{ id: "6", title: "IT Consulting & Strategy", subtitle: "Providing expert guidance on technology strategy, system integration, cybersecurity, and digital transformation initiatives.", category: "Consulting", value: "Strategic" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Ready to Transform Your Business?"
|
||||
description="Let's discuss how our services can elevate your digital presence and achieve your strategic objectives."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 5 }}
|
||||
buttonText="Request a Consultation"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user