Update src/app/tenders-procurement/page.tsx

src/app/about-us/page.tsx

@@ -1,16 +1,18 @@
 "use client";
 
-import { ThemeProvider } from "@/components/provider/ThemeProvider";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Sparkles, Users, Trophy } from "lucide-react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import PlainBackground from '@/components/background/PlainBackground';
 
-export default function AboutUs() {
+export default function AboutUsPage() {
   const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About Us", id: "/about-us" }
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about-us' }
   ];
 
   return (
@@ -26,144 +28,119 @@ export default function AboutUs() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />
+      <NavbarStyleCentered 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={[
+      <div id="company-history" data-section="company-history">
+        <PlainBackground className="absolute inset-0 -z-10" />
+        <SplitAbout
+          title="Our Journey: Innovating Since Day One"
+          description="Founded in 2020, Webild started with a vision to revolutionize the digital landscape. We've grown from a small passionate team to a global leader, continuously pushing the boundaries of what's possible."
+          tag="Company History"
+          tagIcon={Sparkles}
+          bulletPoints={[
             {
-                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: "2020: The Genesis",              description: "Webild is founded with a mission to create intuitive and powerful web solutions for businesses of all sizes."
             },
             {
-                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"
+              title: "2021: First Major Product Launch",              description: "Released our flagship platform, gaining significant traction and positive feedback from early adopters."
+            },
+            {
+              title: "2022: Expanding Horizons",              description: "Opened our first international office, marking a pivotal step in our global expansion strategy."
+            },
+            {
+              title: "2023: Industry Recognition",              description: "Awarded 'Innovator of the Year' for our cutting-edge AI-driven solutions."
+            },
+            {
+              title: "2024: Future Forward",              description: "Launched our new Webild X initiative, focusing on sustainable technology and community impact."
             }
           ]}
-            gridVariant="two-columns-alternating-heights"
-            animationType="slide-up"
+          imageSrc="https://via.placeholder.com/800x600?text=Company+History"
+          imageAlt="Company history timeline"
+          imagePosition="right"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
       <div id="mission-vision" data-section="mission-vision">
+        <PlainBackground className="absolute inset-0 -z-10" />
         <FeatureCardThree
-            title="Our Guiding Principles"
-            description="Our mission and vision define who we are and where we are headed, inspiring every action we take."
+          title="Our Mission & Vision"
+          description="We are driven by a commitment to excellence, innovation, and positive impact. Our mission is to empower businesses with transformative digital tools, and our vision is to be the global leader in sustainable technology solutions."
+          tag="Core Values"
+          tagIcon={Trophy}
           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: "Empowerment",              description: "We empower individuals and businesses with tools that unlock their full potential and foster growth.",              imageSrc: "https://via.placeholder.com/400x300?text=Empowerment"
             },
             {
-                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"
+              title: "Innovation",              description: "We relentlessly pursue new ideas and technologies to deliver cutting-edge solutions that redefine industry standards.",              imageSrc: "https://via.placeholder.com/400x300?text=Innovation"
+            },
+            {
+              title: "Integrity",              description: "We operate with unwavering honesty, transparency, and ethical conduct in all our dealings.",              imageSrc: "https://via.placeholder.com/400x300?text=Integrity"
+            },
+            {
+                title: "Sustainability",                description: "Committed to environmentally responsible practices and developing solutions that contribute to a sustainable future.",                imageSrc: "https://via.placeholder.com/400x300?text=Sustainability"
               }
           ]}
-            gridVariant="uniform-all-items-equal"
-            animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="blur-reveal"
           textboxLayout="default"
-            useInvertedBackground={true}
+          useInvertedBackground={false}
         />
       </div>
 
-        <div id="core-values" data-section="core-values">
+      <div id="team-section" data-section="team-section">
+        <PlainBackground className="absolute inset-0 -z-10" />
+        <TeamCardEleven
+          title="Meet Our Exceptional Team"
+          description="Our diverse team of experts, innovators, and visionaries is the driving force behind Webild's success. We believe in collaboration, continuous learning, and fostering an environment where every voice is heard."
+          tag="Our People"
+          tagIcon={Users}
+          groups={[
+            {
+              id: "leadership",              groupTitle: "Leadership",              members: [
+                {
+                  id: "jane-doe",                  title: "Jane Doe",                  subtitle: "CEO & Founder",                  detail: "Visionary leader with a passion for digital transformation.",                  imageSrc: "https://via.placeholder.com/150?text=Jane+Doe"
+                },
+                {
+                  id: "john-smith",                  title: "John Smith",                  subtitle: "CTO",                  detail: "Architect of our innovative technology stack.",                  imageSrc: "https://via.placeholder.com/150?text=John+Smith"
+                }
+              ]
+            },
+            {
+              id: "engineering",              groupTitle: "Engineering",              members: [
+                {
+                  id: "alice-johnson",                  title: "Alice Johnson",                  subtitle: "Lead Software Engineer",                  detail: "Expert in scalable backend systems and AI integration.",                  imageSrc: "https://via.placeholder.com/150?text=Alice+Johnson"
+                },
+                {
+                  id: "bob-williams",                  title: "Bob Williams",                  subtitle: "Senior Frontend Developer",                  detail: "Crafts engaging user interfaces with pixel-perfect precision.",                  imageSrc: "https://via.placeholder.com/150?text=Bob+Williams"
+                }
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="credentials" data-section="credentials">
+        <PlainBackground className="absolute inset-0 -z-10" />
         <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"]}
+          title="Recognized for Our Excellence"
+          description="Our commitment to quality and innovation has earned us recognition from industry leaders and various certifications, underscoring our dedication to delivering exceptional results."
+          tag="Accreditations & Partners"
+          tagIcon={Trophy}
+          names={[
+            "Tech Innovators Summit",            "Global Digital Awards",            "Certified by ISO 9001",            "Partnership with FutureWorks",            "Official AWS Partner",            "Google Cloud Certified"
+          ]}
+          speed={40}
           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/components/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+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 ComponentsPage() {
+  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
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" }
+        ]}
+        brandName="Webild"
+        button={{ text: "Contact", href: "#contact" }}
+      />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            logoText="Webild"
+            description="Crafting innovative digital solutions for a connected world. We empower businesses with cutting-edge technology and design."
+            buttons={[
+              { text: "Learn More", href: "#features" },
+              { text: "Our Services", href: "/services" }
+            ]}
+            background={{ variant: 'radial-gradient' }}
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            tag="Capabilities"
+            title="Our Core Strengths"
+            description="Discover the diverse expertise that drives our innovative projects and client success."
+            features={[
+              { id: "1", title: "Web Development", subtitle: "Building robust and scalable web platforms.", category: "Development", value: "High Performance" },
+              { id: "2", title: "Mobile Apps", subtitle: "Delivering intuitive iOS & Android applications.", category: "Development", value: "User-Centric" },
+              { id: "3", title: "UI/UX Design", subtitle: "Crafting beautiful and seamless user experiences.", category: "Design", value: "Engagement" },
+              { id: "4", title: "Cloud Solutions", subtitle: "Managing secure and efficient cloud infrastructure.", category: "Infrastructure", value: "Scalability" }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Get in Touch"
+            description="Ready to start your project? Fill out the form below and we'll get back to you shortly."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "Your Message", rows: 5 }}
+            buttonText="Send Message"
+            useInvertedBackground={false}
+            mediaPosition="right"
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -1,20 +1,44 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 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";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail } from "lucide-react"; // Importing icons for potential use, Mail for contact
 
-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 }
+// Metadata for the Contact page
+export const metadata = {
+  title: "Contact Us - Webild",  description: "Get in touch with Webild. Find our location and team contact information."
+};
+
+export default function Contact() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "/contact" } // The newly added link
+  ];
+
+  const teamMembers = [
+    { id: "1", title: "CEO", subtitle: "John Doe", detail: "john.doe@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" },
+    { id: "2", title: "Sales Lead", subtitle: "Jane Smith", detail: "jane.smith@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" },
+    { id: "3", title: "Support Lead", subtitle: "Peter Jones", detail: "peter.jones@example.com", imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "Home", href: "/" },
+        { label: "Contact", href: "/contact" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#privacy" },
+        { label: "Terms of Service", href: "#terms" }
+      ]
+    }
   ];
 
   return (
@@ -31,61 +55,40 @@ export default function ContactPage() {
       headingFontWeight="bold"
     >
       <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Contact", id: "/contact" }
-        ]}
-        brandName="YourBrand"
+        navItems={navItems}
+        brandName="Webild"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
       />
-
-      <div id="contact-hero" data-section="contact-hero">
-        <HeroBillboardDashboard
+      <div className="flex min-h-screen flex-col items-center justify-between">
+        <div id="contact-form" data-section="contact-form">
+          <ContactCenter
+            tag="Contact Us"
             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"
-          }}
+            description="We'd love to hear from you! Fill out the form below or reach out to us using the contact details provided. Our office is located at 123 Main Street, Anytown, USA 12345."
+            inputPlaceholder="Your email address"
+            buttonText="Send Message"
+            termsText="By sending a message, you agree to our Privacy Policy and Terms of Service."
+            tagIcon={Mail}
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
           />
         </div>
-
-      <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>
-
-          {/* 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"
-              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 id="team-contacts" data-section="team-contacts">
+          <TeamCardEleven
+            title="Our Team"
+            description="Meet the dedicated individuals behind Webild who are ready to assist you."
+            groups={[{ id: "1", groupTitle: "Leadership & Support", members: teamMembers }]}
+            animationType="slide-up"
+            useInvertedBackground={false}
+            textboxLayout="default"
           />
         </div>
-        </div>
+        <FooterBase
+          columns={footerColumns}
+          logoText="Webild"
+          copyrightText="© 2025 Webild. All rights reserved."
+        />
       </div>
     </ThemeProvider>
   );

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
-import { Barlow_Condensed, Inter, Space_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
@@ -11,19 +11,17 @@ import { DM_Sans } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  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.'};
+  title: "Webild components 2",
+  description: "Generated by create next app",
+};
 
-const barlowCondensed = Barlow_Condensed({
-  variable: "--font-barlow-condensed",  subsets: ["latin"],
-  weight: ["700"],
+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
 });
-
 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<{
@@ -32,7 +30,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${barlowCondensed.variable} ${inter.variable} ${spaceMono.variable} antialiased`}>
+        <body className={`${dmSans.variable} ${inter.variable} antialiased`}>
           <Tag />
           {children}
           <script

src/app/page.tsx

@@ -1,46 +1,94 @@
 "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';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, HelpCircle } from "lucide-react"; // Importing icons for sections
 
 export default function Home() {
   const navItems = [
-    { name: "Home", href: "/" },
-    { name: "Tenders & Procurement", href: "/tenders-procurement" }
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  const heroMediaItems = [
+    { imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg", imageAlt: "Placeholder image 1" },
+    { imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg", imageAlt: "Placeholder image 2" },
+    { imageSrc: "https://r2.radikal.ru/pics/2024.03.11/f90462002f232f38d35f8e561491e523.jpg", imageAlt: "Placeholder image 3" }
+  ];
+
+  const faqItems = [
+    { id: "1", title: "What is Webild?", content: "Webild is a platform for building modern web applications." },
+    { id: "2", title: "How do I get started?", content: "You can get started by signing up for a free account." },
+    { id: "3", title: "Is there a free plan?", content: "Yes, we offer a generous free plan for individual users." }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "Home", href: "/" },
+        { label: "Contact", href: "/contact" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#privacy" },
+        { label: "Terms of Service", href: "#terms" }
+      ]
+    }
   ];
 
   return (
     <ThemeProvider
-      attribute="class"
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="noise"
-      cardStyle="soft-shadow"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
+      <NavbarStyleFullscreen
         navItems={navItems}
         brandName="Webild"
-        logoSrc="/placeholder-logo.svg"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
       />
-
+      <div className="flex min-h-screen flex-col items-center justify-between">
         <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"
+          <HeroBillboardGallery
+            title="Build Your Vision with Webild"
+            description="The ultimate platform for creating stunning web experiences with ease and power."
+            mediaItems={heroMediaItems}
+            background={{ variant: "sparkles-gradient" }}
+            mediaAnimation="slide-up"
+            tag="Innovation"
             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>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            title="Frequently Asked Questions"
+            description="Find answers to common questions about Webild's platform and services."
+            faqs={faqItems}
+            faqsAnimation="slide-up"
+            tag="Support"
+            tagIcon={HelpCircle}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterBase
+          columns={footerColumns}
+          logoText="Webild"
+          copyrightText="© 2025 Webild. All rights reserved."
         />
       </div>
     </ThemeProvider>

src/app/services/page.tsx

@@ -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>
   );
 }

src/app/styles/base.css

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

src/app/styles/variables.css

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

src/app/tenders-procurement/page.tsx

@@ -1,22 +1,20 @@
 "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';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Briefcase, ListTodo, FileText, HelpCircle } from 'lucide-react';
 
 export default function TendersProcurementPage() {
   const navItems = [
-    { name: "Home", href: "/" },
-    { name: "Tenders & Procurement", href: "/tenders-procurement" }
+    { name: "Home", id: "/" },
+    { name: "Tenders & Procurement", id: "/tenders-procurement" }
   ];
 
   return (
     <ThemeProvider
-      attribute="class"
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
@@ -28,119 +26,121 @@ export default function TendersProcurementPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
           navItems={navItems}
-        brandName="Webild Tenders"
-        logoSrc="/placeholder-logo.svg"
+          brandName="Webild"
+          button={{ text: "Contact Us", href: "#footer" }}
         />
-
+      </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardScroll
+        <HeroBillboardDashboard
           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"
+          description="Explore current opportunities, guidelines, and application processes."
+          tag="Opportunities"
+          tagIcon={Briefcase}
+          buttons={[{ text: "View Tenders", href: "#tenders" }]}
+          background={{ variant: "plain" }}
+          dashboard={{
+            title: "Procurement Dashboard",            stats: [
+              { title: "Open Tenders", values: [5, 7, 10], description: "Active" },
+              { title: "Contracts Awarded", values: [12, 15, 18], description: "Last Quarter" },
+              { title: "Bidders", values: [50, 65, 80], description: "Registered" }
+            ],
+            logoIcon: ListTodo,
+            sidebarItems: [{ icon: ListTodo, active: true }],
+            buttons: [{ text: "Submit Inquiry", href: "#" }],
+            listItems: [
+              { title: "Upcoming IT Projects", status: "Planning phase", icon: Briefcase },
+              { title: "Vendor Registration Drive", status: "Ongoing", icon: ListTodo },
+              { title: "Audit of Current Contracts", status: "In progress", icon: FileText }
+            ],
+            imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
+          }}
         />
       </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={[
+      <div id="tenders" data-section="tenders">
+        <FeatureCardEight
+          title="Current Tender Listings"
+          description="Find detailed information about our active tenders."
+          tag="Listings"
+          tagIcon={ListTodo}
+          features={[
             {
-              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"
+              title: "IT Infrastructure Upgrade",              description: "Procurement of new servers, networking equipment, and software licenses. Deadline: 2024-12-31.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
             },
             {
-              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"
+              title: "Marketing Services Contract",              description: "Seeking agencies for digital marketing, social media management, and content creation. Deadline: 2024-11-15.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
             },
             {
-              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"
+              title: "Office Supplies Vendor",              description: "Annual contract for various office supplies. Open to local and regional suppliers. Deadline: 2025-01-30.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
             }
           ]}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
+          textboxLayout="default"
           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"
-            }
+      <div id="guidelines" data-section="guidelines">
+        <FaqSplitMedia
+          title="Procurement Guidelines"
+          description="Understand our policies and procedures for fair and transparent procurement."
+          tag="Guidelines"
+          tagIcon={FileText}
+          faqs={[
+            { id: "faq1", title: "Eligibility Criteria", content: "Details on who can apply for tenders, including legal status, financial capacity, and experience requirements." },
+            { id: "faq2", title: "Submission Requirements", content: "Instructions on required documents, format, and submission methods for tender applications." },
+            { id: "faq3", title: "Evaluation Process", content: "Overview of how bids are evaluated, including scoring criteria and decision-making timelines." },
+            { id: "faq4", title: "Ethical Conduct", content: "Our commitment to ethical procurement, anti-corruption policies, and conflict of interest guidelines." }
           ]}
-          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."
+          imageSrc="https://r2.webild.com/images/default-image.svg?_wi=1"
+          mediaPosition="right"
           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"
+          faqsAnimation="blur-reveal"
+          mediaAnimation="opacity"
         />
       </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}
+      <div id="application-process" data-section="application-process">
+        <FeatureCardEight
+          title="Application Processes"
+          description="Step-by-step guide to submitting your tender application successfully."
+          tag="Process"
+          tagIcon={HelpCircle}
+          features={[
+            {
+              title: "Step 1: Register Online",              description: "Create an account on our procurement portal to access tender documents and announcements.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
+            },
+            {
+              title: "Step 2: Review Documents",              description: "Download and carefully read the Invitation to Tender (ITT) and all supplementary documents.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
+            },
+            {
+              title: "Step 3: Prepare Your Bid",              description: "Assemble all required technical, financial, and legal documents as specified in the ITT.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
+            },
+            {
+              title: "Step 4: Submit Application",              description: "Submit your complete bid through the online portal before the specified deadline.",              imageSrc: "https://r2.webild.com/images/default-image.svg?_wi=1"
+            }
+          ]}
+          textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Company",              items: [{ label: "Home", href: "/" }, { label: "Tenders & Procurement", href: "/tenders-procurement" }],
+            },
+            {
+              title: "Support",              items: [{ label: "FAQ", href: "#guidelines" }, { label: "Contact", href: "#footer" }],
+            },
+          ]}
+          logoText="Webild"
+        />
+      </div>
     </ThemeProvider>
   );
 }