Files
GNX-WEB/frontEnd/components/shared/layout/footer/Footer.tsx
Iliyan Angelov 041890f32e update
2025-11-26 14:31:34 +02:00

321 lines
13 KiB
TypeScript

"use client";
import Link from "next/link";
import Image from "next/legacy/image";
import { useNavigationServices } from "@/lib/hooks/useServices";
import { useJobs } from "@/lib/hooks/useCareer";
const Footer = () => {
const currentYear = new Date().getFullYear();
const { services: dynamicServices, loading: servicesLoading } = useNavigationServices();
const { jobs, loading: jobsLoading } = useJobs();
// Static header data
const headerData = {
title: "GNX Soft Ltd.",
logoUrl: "/images/logo.png",
logoLightUrl: "/images/logo-light.png",
navigationType: "both",
headerClass: "tp-header",
scrolledClass: "navbar-active",
buttonText: "Let's Talk",
buttonUrl: "/contact-us",
buttonClass: "btn btn-primary d-none d-sm-flex",
isActive: true,
displayOrder: 1,
metaData: JSON.stringify({
mobileBreakpoint: 992,
scrollThreshold: 50,
hideOnMobile: false,
mobileFirst: true,
hamburgerMenu: true
})
};
// Get logo URL from static data
const logoSrc = headerData.logoUrl;
return (
<footer className="footer position-relative overflow-x-clip">
{/* Decorative background elements */}
<div className="footer-bg-decoration"></div>
<div className="container">
{/* Enterprise Footer Logo Section */}
<div className="row">
<div className="col-12">
<div className="footer-logo-section text-center pt-60 pb-50">
<div className="enterprise-logo-container">
<div className="enterprise-security-badges">
{/* Left Badge */}
<div className="security-badges-left">
<div className="security-badge">
<i className="fa-solid fa-building"></i>
<span>Enterprise Solutions</span>
</div>
</div>
{/* Center Logo */}
<div className="logo-center">
<Link href="/" aria-label="go to home" className="footer-logo">
<Image
src={logoSrc}
alt="Logo"
width={140}
height={100}
className="footer-logo-image"
/>
</Link>
<p className="footer-tagline">Transforming Ideas Into Digital Excellence</p>
</div>
{/* Right Badge */}
<div className="security-badges-right">
<div className="security-badge">
<i className="fa-solid fa-brain"></i>
<span>AI & Innovation</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row vertical-column-gap-lg pt-60 pb-50">
<div className="col-12 col-lg-2 col-md-6 col-sm-6">
<div className="footer-section">
<h6 className="footer-section-title">Company</h6>
<ul className="footer-links">
<li><Link href="/about-us">About Us</Link></li>
<li><Link href="/career">Careers</Link></li>
<li><Link href="/case-study">Success Stories</Link></li>
<li><Link href="/insights">Insights & Blog</Link></li>
<li><Link href="/contact-us">Contact Us</Link></li>
</ul>
</div>
</div>
<div className="col-12 col-lg-2 col-md-6 col-sm-6">
<div className="footer-section">
<h6 className="footer-section-title">Services</h6>
<ul className="footer-links">
{servicesLoading ? (
<>
<li><Link href="/services">Our Services</Link></li>
</>
) : (
dynamicServices.slice(0, 6).map((service) => (
<li key={service.slug}>
<Link href={`/services/${service.slug}`}>
{service.title}
</Link>
</li>
))
)}
</ul>
</div>
</div>
<div className="col-12 col-lg-2 col-md-6 col-sm-6">
<div className="footer-section">
<h6 className="footer-section-title">Latest Jobs</h6>
<ul className="footer-links">
{jobsLoading ? (
<>
<li><Link href="/career">View All Jobs</Link></li>
</>
) : (
jobs.slice(0, 4).map((job) => (
<li key={job.slug}>
<Link href={`/career/${job.slug}`}>
{job.title}
</Link>
</li>
))
)}
</ul>
</div>
</div>
<div className="col-12 col-lg-2 col-md-6 col-sm-6">
<div className="footer-section">
<h6 className="footer-section-title">Support</h6>
<ul className="footer-links">
<li><Link href="/support-center">Support Center</Link></li>
<li><Link href="/policy?type=privacy">Privacy Policy</Link></li>
<li><Link href="/policy?type=terms">Terms of Use</Link></li>
<li><Link href="/policy?type=support">Support Policy</Link></li>
</ul>
</div>
</div>
<div className="col-12 col-lg-4 col-md-12">
<div className="footer-cta-section">
<div className="cta-content">
<div className="cta-badge">
<i className="fa-solid fa-sparkles"></i>
<span>Get Started Today</span>
</div>
<h6 className="cta-title">Ready to Transform Your Business?</h6>
<p className="cta-description">Start your software journey with our enterprise solutions, incident management, and custom development services.</p>
<div className="cta-button-wrapper">
<Link href="/contact-us" className="btn-luxury-cta">
<span>Start Your Journey</span>
<i className="fa-solid fa-arrow-right"></i>
<div className="btn-shine"></div>
</Link>
<div className="goodfirms-wrapper text-center mt-3" style={{ lineHeight: 0 }}>
<Link
href="https://www.goodfirms.co/company/gnx-soft-ltd"
target="_blank"
rel="noopener noreferrer"
className="goodfirms-badge d-inline-block"
title="View our company profile on GoodFirms"
style={{
border: 'none',
outline: 'none',
boxShadow: 'none',
textDecoration: 'none',
padding: 0,
margin: 0,
display: 'inline-block',
lineHeight: 0,
background: 'transparent'
}}
>
<Image
src="/images/gnx-goodfirms.webp"
alt="GoodFirms Company Profile"
width={150}
height={80}
className="goodfirms-image"
style={{
width: '20px',
height: '20px',
objectFit: 'contain',
border: 'none',
outline: 'none',
boxShadow: 'none',
padding: 0,
margin: 0,
display: 'block',
verticalAlign: 'top',
borderWidth: 0,
borderStyle: 'none',
borderColor: 'transparent'
}}
/>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="footer__inner pt-60 pb-50">
<div className="row vertical-column-gap-lg g-4">
<div className="col-12 col-md-6 col-lg-4">
<div className="footer__inner-single">
<div className="contact-icon-wrapper">
<div className="contact-icon">
<i className="fa-solid fa-location-dot"></i>
</div>
</div>
<div className="content">
<h5 className="contact-title">Location</h5>
<p className="contact-text">
<Link
href="https://maps.google.com/?q=42.496781103070504,27.4758968970689"
target="_blank"
rel="noopener noreferrer"
>
GNX Soft Ltd.<br />
Tsar Simeon I, 56<br />
Burgas, Burgas 8000<br />
Bulgaria
</Link>
</p>
</div>
</div>
</div>
<div className="col-12 col-md-6 col-lg-4">
<div className="footer__inner-single">
<div className="contact-icon-wrapper">
<div className="contact-icon">
<i className="fa-solid fa-phone"></i>
</div>
</div>
<div className="content">
<h5 className="contact-title">Phone</h5>
<p className="contact-text">
<Link href="tel:+359896138030">+359 896 13 80 30</Link>
</p>
</div>
</div>
</div>
<div className="col-12 col-md-6 col-lg-4">
<div className="footer__inner-single">
<div className="contact-icon-wrapper">
<div className="contact-icon">
<i className="fa-solid fa-envelope"></i>
</div>
</div>
<div className="content">
<h5 className="contact-title">Email</h5>
<p className="contact-text">
<Link href="mailto:info@gnxsoft.com">
info@gnxsoft.com
</Link>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="footer-copyright">
<div className="row align-items-center vertical-column-gap g-3">
<div className="col-12 col-lg-6">
<div className="footer__copyright-text text-center text-lg-start">
<p className="copyright-text">
&copy; <span id="copyrightYear">{currentYear}</span>{" "}
<Link href="/" className="copyright-link">
GNX Soft Ltd.
</Link>
{" "}All rights reserved. Built with excellence.
</p>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="social-links justify-content-center justify-content-lg-end">
<Link
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
title="LinkedIn"
className="social-link"
>
<i className="fa-brands fa-linkedin-in"></i>
</Link>
<Link
href="https://github.com"
target="_blank"
rel="noopener noreferrer"
title="GitHub"
className="social-link"
>
<i className="fa-brands fa-github"></i>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
);
};
export default Footer;