Update src/app/layout.tsx

src/app/about-us/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { ThemeProvider } from "@/components/provider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+
+export default function AboutUs() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About Us", id: "/about-us" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />
+
+      <main>
+        <div id="hero" data-section="hero">
+          <HeroOverlay
+            title="About Our Company"
+            description="We are dedicated to innovation, quality, and making a positive impact on the world. Discover our story, values, and the team driving our success."
+            imageSrc="https://picsum.photos/seed/aboutushero/1920/1080"
+            imageAlt="Company building with modern architecture"
+            buttons={[{ text: "Learn More", href: "#company-overview" }]} 
+          />
+        </div>
+
+        <div id="company-overview" data-section="company-overview">
+          <FeatureCardThree
+            title="Our Story and Impact"
+            description="Our journey began with a clear vision to revolutionize the industry. Over the years, we've grown through innovation, client collaboration, and an unwavering commitment to excellence."
+            features={[
+              {
+                title: "A Legacy of Excellence",                description: "Our journey began with a vision to revolutionize the industry through cutting-edge solutions and unwavering commitment to our clients. Over the years, we've grown, adapted, and consistently delivered results that exceed expectations, building a reputation for reliability and forward-thinking innovation.",                imageSrc: "https://picsum.photos/seed/companyjourney/400/300"
+              },
+              {
+                title: "Key Milestones & Achievements",                description: "• 15+ Years in Business\n• 500+ Satisfied Clients Worldwide\n• 99% Customer Retention Rate\n• 30+ Industry Awards & Recognitions",                imageSrc: "https://picsum.photos/seed/statsachievements/400/300"
+              }
+            ]}
+            gridVariant="two-columns-alternating-heights"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="mission-vision" data-section="mission-vision">
+          <FeatureCardThree
+            title="Our Guiding Principles"
+            description="Our mission and vision define who we are and where we are headed, inspiring every action we take."
+            features={[
+              {
+                title: "Our Mission",                description: "To empower businesses with transformative technology solutions that drive growth, efficiency, and sustainable success, while fostering a culture of innovation and collaboration.",                imageSrc: "https://picsum.photos/seed/mission/400/300"
+              },
+              {
+                title: "Our Vision",                description: "To be the global leader in digital transformation, recognized for our pioneering spirit, ethical practices, and unwavering dedication to client success and community enrichment.",                imageSrc: "https://picsum.photos/seed/vision/400/300"
+              }
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="core-values" data-section="core-values">
+          <SocialProofOne
+            title="Our Core Values"
+            description="The pillars that define our culture, guide our decisions, and drive our success."
+            names={["Integrity", "Innovation", "Excellence", "Collaboration", "Customer Focus", "Accountability", "Sustainability", "Respect", "Passion", "Agility"]}
+            showCard={true}
+            animationType="opacity"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="compliance-credentials" data-section="compliance-credentials">
+          <FeatureCardThree
+            title="Trust and Transparency"
+            description="Adhering to the highest standards of industry compliance and holding essential certifications to ensure trust and reliability."
+            features={[
+              {
+                title: "ISO 9001 Certified",                description: "Ensuring top-tier quality management systems and operational efficiency.",                imageSrc: "https://picsum.photos/seed/iso9001/400/300"
+              },
+              {
+                title: "GDPR Compliant",                description: "Protecting user data with rigorous privacy standards and secure data handling.",                imageSrc: "https://picsum.photos/seed/gdpr/400/300"
+              },
+              {
+                title: "SOC 2 Type II Audited",                description: "Maintaining high standards for security, availability, and processing integrity.",                imageSrc: "https://picsum.photos/seed/soc2/400/300"
+              },
+              {
+                title: "Certified Ethical AI",                description: "Committed to responsible, fair, and transparent artificial intelligence development.",                imageSrc: "https://picsum.photos/seed/ethicalai/400/300"
+              },
+              {
+                title: "Data Security Standard",                description: "Robust measures in place for protecting all sensitive information and assets.",                imageSrc: "https://picsum.photos/seed/datastandard/400/300"
+              }
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="leadership" data-section="leadership">
+          <TeamCardTwo
+            title="Meet Our Leadership"
+            description="Our leadership team brings together decades of experience, guiding our company with strategic vision and steadfast commitment."
+            members={[
+              {
+                id: "john-doe",                name: "John Doe",                role: "CEO & Founder",                description: "John is a visionary leader with over 20 years of experience in tech innovation and strategic business development, driving our company's pioneering spirit.",                imageSrc: "https://picsum.photos/seed/john/400/400"
+              },
+              {
+                id: "jane-smith",                name: "Jane Smith",                role: "Chief Operating Officer",                description: "Jane brings extensive operational excellence and a passion for scalable growth to our team, ensuring seamless execution and outstanding results.",                imageSrc: "https://picsum.photos/seed/jane/400/400"
+              }
+            ]}
+            gridVariant="two-columns-alternating-heights"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="health-safety-ethics" data-section="health-safety-ethics">
+          <FeatureCardThree
+            title="Our Commitment to Well-being"
+            description="Fostering a responsible, safe, and ethical environment for our employees, partners, and the communities we serve."
+            features={[
+              {
+                title: "Workplace Safety",                description: "Prioritizing the physical and mental well-being of all employees through comprehensive safety protocols.",                imageSrc: "https://picsum.photos/seed/safetyfirst/400/300"
+              },
+              {
+                title: "Ethical Conduct",                description: "Upholding the highest standards of integrity, transparency, and fair dealings in all our operations.",                imageSrc: "https://picsum.photos/seed/ethicalconduct/400/300"
+              },
+              {
+                title: "Environmental Responsibility",                description: "Implementing sustainable practices to minimize our ecological footprint and protect the planet.",                imageSrc: "https://picsum.photos/seed/environmental/400/300"
+              },
+              {
+                title: "Data Privacy",                description: "Rigorous protection of all personal and corporate data, ensuring confidentiality and security.",                imageSrc: "https://picsum.photos/seed/dataprivacysecured/400/300"
+              },
+              {
+                title: "Community Engagement",                description: "Actively contributing to the betterment of our local and global communities through initiatives and partnerships.",                imageSrc: "https://picsum.photos/seed/communitylove/400/300"
+              }
+            ]}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -1,114 +1,91 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import Link from 'next/link'; // Necessary for internal navigation in navbar/footer
-
-// Nav items for NavbarLayoutFloatingInline and FooterBaseCard
-const navItems = [
-  { name: "Home", href: "/" },
-  { name: "About Us", href: "/about" },
-  { name: "Services", href: "/services" },
-  { name: "Tenders", href: "/tenders" },
-  { name: "Contact", href: "/contact" },
-];
-
-const footerColumns = [
-  {
-    title: "Quick Links",    items: [
-      { label: "Home", href: "/" },
-      { label: "About Us", href: "/about" },
-      { label: "Services", href: "/services" },
-      { label: "Tenders & Procurement", href: "/tenders" },
-      { label: "Contact", href: "/contact" },
-    ],
-  },
-  {
-    title: "Services",    items: [
-      { label: "General Supplies", href: "/services#general-supplies" },
-      { label: "Logistics & Transport", href: "/services#logistics-transport" },
-      { label: "Aviation & Technical", href: "/services#aviation-technical" },
-      { label: "ICT & Digital", href: "/services#ict-digital" },
-      { label: "Construction & Maintenance", href: "/services#construction-maintenance" },
-      { label: "Consultancy", href: "/services#consultancy-project" },
-    ],
-  },
-  {
-    title: "Contact Info",    items: [
-      { label: "Nairobi, Kenya", href: "/contact" },
-      { label: "+254 7XX XXX XXX", href: "/contact" },
-      { label: "info@carlstraaero.com", href: "/contact" },
-    ],
-  },
-];
+import { ThemeProvider } from "@/components/theme-provider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import ContactForm from '@/components/form/ContactForm';
+import { Home, Phone, Mail, User, Shield, Sparkles } from "lucide-react";
 
 export default function ContactPage() {
+  const companyDetails = [
+    { label: "Physical Address", value: "123 Main St, Anytown, CA 90210", icon: Home },
+    { label: "Postal Address", value: "PO Box 123, Anytown, CA 90210", icon: Home },
+    { label: "Phone", value: "+1 (555) 123-4567", icon: Phone },
+    { label: "Email", value: "info@example.com", icon: Mail },
+    { label: "Directors", value: "John Doe, Jane Smith", icon: User },
+    { label: "KRA PIN", value: "A000000000Z", icon: Shield },
+    { label: "Registration Number", value: "CN202300001", icon: Shield }
+  ];
+
   return (
     <ThemeProvider
-      defaultButtonVariant={"expand-hover"}
-      defaultTextAnimation={"entrance-slide"}
-      borderRadius={"pill"}
-      contentWidth={"compact"}
-      sizing={"largeSmall"}
-      background={"noise"}
-      cardStyle={"gradient-bordered"}
-      primaryButtonStyle={"flat"}
-      secondaryButtonStyle={"radial-glow"}
-      headingFontWeight={"bold"}
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="Carlstra Aero Ltd"
-          logoSrc="http://img.b2bpic.net/free-vector/detailed-travel-company-logo_23-2148625160.jpg"
-          logoAlt="Carlstra Aero Ltd Logo"
-          navItems={navItems.map(item => ({ name: item.name, id: item.href }))}
-          button={{ text: "Request a Quote", href: "/contact" }}
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Contact", id: "/contact" }
+        ]}
+        brandName="YourBrand"
+      />
+
+      <div id="contact-hero" data-section="contact-hero">
+        <HeroBillboardDashboard
+          title="Get in Touch"
+          description="We'd love to hear from you. Reach out to us through the details below or fill out the contact form."
+          background={{ variant: 'radial-gradient' }}
+          dashboard={{
+            title: "Contact Information",            stats: [
+              { title: "Reach Us", description: "Anytime", values: [100, 200, 300] }
+            ],
+            logoIcon: Sparkles,
+            sidebarItems: [],
+            buttons: [],
+            listItems: [],
+            imageSrc: "https://r2.webild.com/assets/contact-us-hero-image.webp?_wi=1"
+          }}
         />
       </div>
 
-      <div id="contact-page-hero" data-section="contact-page-hero">
-        <HeroSplitTestimonial
-          title="GET IN TOUCH WITH CARLSTRA AERO"
-          description="We're ready to partner with you. Reach out to discuss your procurement, logistics, or technical support needs."
-          background={{ variant: "plain" }}
-          testimonials={[]}
-          mediaAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/top-view-assortment-paper-clips-with-copy-space_23-2148581960.jpg"
-          imageAlt="Deep navy abstract contact us background"
-          useInvertedBackground={true}
-          imagePosition="right"
-        />
+      <div id="contact-content" data-section="contact-content" className="relative z-10 mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
+          {/* Left Side: Contact Detail Cards */}
+          <div className="space-y-8">
+            <h2 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">Our Details</h2>
+            {companyDetails.map((detail, index) => (
+              <div key={index} className="flex items-start space-x-4 rounded-xl bg-card p-6 shadow-lg border border-border-color">
+                <detail.icon className="h-6 w-6 text-yellow-500 flex-shrink-0" />
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground">{detail.label}</h3>
+                  <p className="mt-1 text-muted-foreground">{detail.value}</p>
+                </div>
+              </div>
+            ))}
           </div>
 
-      <div id="contact-information-form" data-section="contact-information-form">
-        <ContactSplit
-          tag="Contact Us"
-          title="Your Trusted Partner for Institutional Needs"
-          description="Whether you have a specific tender, a general inquiry, or require detailed project support, our team is ready to assist. Fill out the form or use the contact details below."
-          background={{ variant: "plain" }}
-          mediaAnimation="slide-up"
-          useInvertedBackground={false}
-          mediaPosition="left"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-african-woman-glass-smiling-talking-phone_176420-12470.jpg"
-          imageAlt="Modern corporate contact office"
-          buttonText="Send Message"
+          {/* Right Side: Contact Form */}
+          <div>
+            <ContactForm
+              title="Send us a message"
+              description="Fill out the form below and we'll get back to you as soon as possible. Due to current component limitations, only an email field is available."
+              tag="Inquiry"
+              tagIcon={Sparkles}
               inputPlaceholder="Your Email Address"
-          termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
-          onSubmit={() => alert('Your message has been sent!')}
+              buttonText="Submit Inquiry"
+              onSubmit={(email) => console.log("Form Submitted (Email only):", email)}
+              className="bg-card p-8 rounded-xl shadow-lg border border-border-color"
             />
           </div>
-
-      <div id="footer" data-section="footer" className="relative before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-accent">
-        <FooterBaseCard
-          logoSrc="http://img.b2bpic.net/free-vector/detailed-travel-company-logo_23-2148625160.jpg"
-          logoAlt="Carlstra Aero Ltd Logo"
-          logoText="CARLSTRA AERO LTD"
-          columns={footerColumns}
-          copyrightText="© 2025 Carlstra Aero Ltd. Registered in Kenya. All rights reserved."
-        />
+        </div>
       </div>
     </ThemeProvider>
   );

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Barlow_Condensed, Inter, Space_Mono } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
@@ -11,17 +11,19 @@ import { DM_Sans } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: "Webild components 2",
-  description: "Generated by create next app",
-};
+  title: 'OurCompany - Comprehensive Services',  description: 'OurCompany provides a wide range of essential goods, logistics, aviation support, ICT, construction, and consultancy services. Delivering tailored solutions across various sectors.'};
 
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",  subsets: ["latin"],
+const barlowCondensed = Barlow_Condensed({
+  variable: "--font-barlow-condensed",  subsets: ["latin"],
+  weight: ["700"],
 });
+
 const inter = Inter({
   variable: "--font-inter",  subsets: ["latin"],
 });
 
+const spaceMono = Space_Mono({\n  variable: "--font-space-mono",\n  subsets: ["latin"],\n  weight: ["400", "700"],\n});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -30,7 +32,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
+        <body className={`${barlowCondensed.variable} ${inter.variable} ${spaceMono.variable} antialiased`}>
           <Tag />
           {children}
           <script

src/app/page.tsx

@@ -1,5 +1,48 @@
-import { redirect } from 'next/navigation';
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import { Sparkles } from 'lucide-react';
 
 export default function Home() {
-  redirect('/components');
+  const navItems = [
+    { name: "Home", href: "/" },
+    { name: "Tenders & Procurement", href: "/tenders-procurement" }
+  ];
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="noise"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={navItems}
+        brandName="Webild"
+        logoSrc="/placeholder-logo.svg"
+      />
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Welcome to Webild"
+          description="Your ultimate platform for discovering and managing tenders and procurement opportunities."
+          tag="Innovation in Procurement"
+          tagIcon={Sparkles}
+          background={{ variant: 'sparkles-gradient' }}
+          buttons={[{ text: "Explore Our Services", href: "/tenders-procurement" }]}
+          imageSrc="https://images.unsplash.com/photo-1517245381830-dfc798059882?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwzMHx8YnVzaW5lc3N8ZW58MHx8fHwxNzE1Nzc2NTUwfDA&ixlib=rb-4.0.3&q=80&w=1080"
+          imageAlt="Modern office with team working"
+        />
+      </div>
+    </ThemeProvider>
+  );
 }

src/app/services/page.tsx

@@ -0,0 +1,126 @@
+"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"
+  }
+];
+
+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" },
+  ];
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        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" }
+        ]}
+        brandName="OurCompany"
+        logoSrc="https://via.placeholder.com/50x50?text=Logo"
+        button={{ text: "Contact Us", 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"
+        />
+
+        {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}
+              textboxLayout="default"
+              mediaAnimation="slide-up"
+              buttonAnimation="slide-up"
+            />
+          </div>
+        ))}
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-barlow-condensed), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A1628;
-  --card: #F2F4F7;
+  --background: #0B1A2E;
+  --card: #1C2E45;
   --foreground: #FFFFFF;
-  --primary-cta: #C9922A;
-  --primary-cta-text: #0A1628;
-  --secondary-cta: #0A1628;
+  --primary-cta: #C8922A;
+  --primary-cta-text: #0B1A2E;
+  --secondary-cta: #1C2E45;
   --secondary-cta-text: #FFFFFF;
-  --accent: #C9922A;
-  --background-accent: #F2F4F7;
+  --accent: #C8922A;
+  --background-accent: #F0F2F5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/tenders-procurement/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import { Sparkles, Lightbulb } from 'lucide-react';
+
+export default function TendersProcurementPage() {
+  const navItems = [
+    { name: "Home", href: "/" },
+    { name: "Tenders & Procurement", href: "/tenders-procurement" }
+  ];
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="noise"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={navItems}
+        brandName="Webild Tenders"
+        logoSrc="/placeholder-logo.svg"
+      />
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Tenders & Procurement"
+          description="Discover opportunities, streamline your bidding process, and secure contracts with our comprehensive tender management solutions. We empower businesses to navigate the complex world of public and private procurement with ease and confidence."
+          tag="Your Partner in Procurement"
+          tagIcon={Sparkles}
+          background={{ variant: 'radial-gradient' }}
+          buttons={[{ text: "Explore Tenders", href: "#tender-categories" }, { text: "Learn More", href: "#what-we-offer" }]}
+          imageSrc="https://images.unsplash.com/photo-1556761175-5973dd3039d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwyMHx8cHJvY3VyZW1lbnR8ZW58MHx8fHwxNzE1Nzc2NTUwfDA&ixlib=rb-4.0.3&q=80&w=1080"
+          imageAlt="People collaborating on a project, representing procurement"
+        />
+      </div>
+
+      <div id="what-we-offer" data-section="what-we-offer">
+        <ProductCardTwo
+          title="What We Offer Tenderers"
+          description="Our tailored services simplify the tendering journey, providing you with the tools and support needed to succeed."
+          products={[
+            {
+              id: "1",              brand: "Service",              name: "Opportunity Discovery",              price: "Custom",              rating: 5,
+              reviewCount: "20+",              imageSrc: "https://images.unsplash.com/photo-1579389083543-c0d2a9379899?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwyfHxvcHBvcnR1bml0eSUyMGRpc2NvdmVyeXxlbnwwfHx8fDE3MTcyNzU2NjV8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Magnifying glass over a document"
+            },
+            {
+              id: "2",              brand: "Service",              name: "Bid Preparation Support",              price: "Custom",              rating: 5,
+              reviewCount: "15+",              imageSrc: "https://images.unsplash.com/photo-1610484742466-218080f33198?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxNXx8ZG9jdW1lbnQlMjBwcmVwYXJhdGlvbnxlbnwwfHx8fDE3MTcyNzU3MDd8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Person typing on a laptop, documents on desk"
+            },
+            {
+              id: "3",              brand: "Service",              name: "Compliance & Legal Review",              price: "Custom",              rating: 5,
+              reviewCount: "10+",              imageSrc: "https://images.unsplash.com/photo-1581093859062-094709d7df9d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxMXx8Y29tcGxpYW5jZSUyMGNoZWNrfGVufDB8fHx8MTcxNzI3NTcyN3ww&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Gavel and law books"
+            },
+            {
+              id: "4",              brand: "Service",              name: "Strategic Consultation",              price: "Custom",              rating: 5,
+              reviewCount: "12+",              imageSrc: "https://images.unsplash.com/photo-1520607162513-772a1f40d2a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHw3fHxzdHJhdGVnaWMlMjBjb25zdWx0YXRpb258ZW5wwfHx8fDE3MTcyNzU3NTB8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "People in a business meeting"
+            },
+            {
+              id: "5",              brand: "Service",              name: "Post-Award Support",              price: "Custom",              rating: 5,
+              reviewCount: "8+",              imageSrc: "https://images.unsplash.com/photo-1520607162513-772a1f40d2a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHw3fHxzdHJhdGVnaWMlMjBjb25zdWx0YXRpb258ZW5wwfHx8fDE3MTcyNzU3NTB8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Award ceremony"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="tender-categories" data-section="tender-categories">
+        <BlogCardThree
+          title="Explore Tender Categories"
+          description="Browse a wide range of tender categories to find opportunities relevant to your business."
+          blogs={[
+            {
+              id: "1",              category: "IT & Software",              title: "Software Development Projects",              excerpt: "Tenders for custom software solutions, web development, and IT infrastructure.",              imageSrc: "https://images.unsplash.com/photo-1550066925-5e6e8e815e9e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxNHx8c29mdHdhcmUlMjBkZXZlbG9wbWVudHxlbnwwfHx8fDE3MTcyNzU4MjB8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Code on a computer screen",              authorName: "Category Lead",              authorAvatar: "https://images.unsplash.com/photo-1535713875002-d1d0cfdfeeab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxfHxhdmF0YXJ8ZW5wwfHx8fDE3MTUyMzk5MDV8MA&ixlib=rb-4.0.3&q=80&w=1080",              date: "Ongoing"
+            },
+            {
+              id: "2",              category: "Construction",              title: "Building & Infrastructure Projects",              excerpt: "Opportunities for civil engineering, commercial building, and public works.",              imageSrc: "https://images.unsplash.com/photo-1541336474665-27a36c645474?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxOXx8Y29uc3RydWN0aW9ufGVufDB8fHx8MTcxNzI3NTgzN3ww&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Construction site",              authorName: "Category Lead",              authorAvatar: "https://images.unsplash.com/photo-1535713875002-d1d0cfdfeeab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxfHxhdmF0YXJ8ZW5wwfHx8fDE3MTUyMzk5MDV8MA&ixlib=rb-4.0.3&q=80&w=1080",              date: "Ongoing"
+            },
+            {
+              id: "3",              category: "Consulting Services",              title: "Strategic Advisory & Support",              excerpt: "Tenders for business consulting, financial advisory, and project management.",              imageSrc: "https://images.unsplash.com/photo-1520607162513-772a1f40d2a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHw3fHxjb25zdWx0aW5nfGVufDB8fHx8MTcxNzI3NTkwMnww&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Consulting meeting",              authorName: "Category Lead",              authorAvatar: "https://images.unsplash.com/photo-1535713875002-d1d0cfdfeeab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxfHxhdmF0YXJ8ZW5wwfHx8fDE3MTUyMzk5MDV8MA&ixlib=rb-4.0.3&q=80&w=1080",              date: "Ongoing"
+            },
+            {
+              id: "4",              category: "Healthcare",              title: "Medical Supplies & Services",              excerpt: "Procurement for medical equipment, pharmaceuticals, and healthcare provision.",              imageSrc: "https://images.unsplash.com/photo-1576091160399-112ed8d87a6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwyMHx8aGVhbHRoY2FyZXxlbnwwfHx8fDE3MTcyNzU5NDZ8MA&ixlib=rb-4.0.3&q=80&w=1080",              imageAlt: "Medical equipment",              authorName: "Category Lead",              authorAvatar: "https://images.unsplash.com/photo-1535713875002-d1d0cfdfeeab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHwxfHxhdmF0YXJ8ZW5wwfHx8fDE3MTUyMzk5MDV8MA&ixlib=rb-4.0.3&q=80&w=1080",              date: "Ongoing"
+            }
+          ]}
+          carouselMode="buttons"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="four-items-2x2-equal-grid"
+        />
+      </div>
+
+      <div id="compliance-credentials" data-section="compliance-credentials">
+        <FeatureCardSixteen
+          title="Compliance Credentials Panel"
+          description="Ensuring integrity and trust in every tender process. Our commitment to compliance guarantees fair and transparent procurement practices."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="blur-reveal"
+          negativeCard={{
+            items: [
+              "ISO 9001 Certified Quality Management",              "ISO 27001 Certified Information Security",              "GDPR Compliant Data Handling",              "Ethical Sourcing Policies",              "Transparent Reporting Standards"
+            ]
+          }}
+          positiveCard={{
+            items: [
+              "Adherence to Public Procurement Directives",              "Robust Conflict of Interest Policies",              "Regular Internal & External Audits",              "Certified Procurement Professionals",              "Secure Document Management Systems"
+            ]
+          }}
+          className="bg-gray-900 text-white"
+          cardClassName="bg-gray-800 border border-gray-700 shadow-lg"
+          textBoxTitleClassName="text-white"
+          textBoxDescriptionClassName="text-gray-300"
+          itemTextClassName="text-gray-200"
+          itemIconClassName="text-green-400"
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <HeroBillboardScroll
+          title="Ready to Start Your Tender Journey?"
+          description="Send us your tender specifications, and let us help you find the perfect opportunities to grow your business."
+          buttons={[{ text: "Send Tender Specifications", href: "mailto:info@webuild.com", target: "_blank" }]}
+          background={{ variant: 'downward-rays-static' }}
+          tag="Get Started Today"
+          tagIcon={Lightbulb}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}