mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 17:18:09 +00:00
247 lines
8.8 KiB
TypeScript
247 lines
8.8 KiB
TypeScript
// components/Footer.tsx
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { FaLinkedin, FaInstagram } from "react-icons/fa";
|
|
import Image from "next/image";
|
|
|
|
const omsLogoUrl = "/oms-logo.svg"; // Ensure this exists in /public
|
|
// const omsLogoDarkUrl = "/oms-logo-dark.svg"; // Optional dark mode logo
|
|
|
|
const Footer = () => {
|
|
// In a real app, you might use useTheme to get the current theme
|
|
// import { useTheme } from 'next-themes';
|
|
// const { resolvedTheme } = useTheme();
|
|
// const currentLogo = resolvedTheme === 'dark' && omsLogoDarkUrl ? omsLogoDarkUrl : omsLogoUrl;
|
|
const currentLogo = omsLogoUrl; // Using default for now
|
|
|
|
return (
|
|
// --- Force Dark Background ---
|
|
// Use a specific dark color (e.g., var(--oms-black) or a dark gray from your vars)
|
|
// Text color will default to light here for contrast
|
|
<footer className="bg-[var(--oms-black)] text-[var(--oms-white)] pt-16 pb-8">
|
|
{" "}
|
|
{/* Or use --background from .dark */}
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 mb-12">
|
|
{/* About/Logo Section */}
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Image
|
|
src={currentLogo}
|
|
alt="OMS Logo"
|
|
width={40}
|
|
height={40}
|
|
priority
|
|
// Optional: Add filter for dark bg if logo isn't ideal
|
|
// className="dark:invert"
|
|
/>
|
|
{/* Ensure prominent text is bright */}
|
|
<span className="text-xl font-bold text-[var(--oms-white)]">
|
|
OMS
|
|
</span>
|
|
</div>
|
|
{/* Use a slightly muted bright color for less prominent text */}
|
|
<p className="text-sm text-[var(--oms-white)]/80">
|
|
{" "}
|
|
{/* Example: White with 80% opacity */}
|
|
Owethu Managed Services
|
|
</p>
|
|
<p className="text-sm text-[var(--oms-white)]/80 mt-2">
|
|
Where innovation meets excellence.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Quick Links Section */}
|
|
<div>
|
|
{/* Use primary color for headings */}
|
|
<h5 className="text-lg font-semibold mb-4 text-primary">
|
|
Quick Links
|
|
</h5>
|
|
{/* Use muted bright color for links, primary on hover */}
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
href="/about"
|
|
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
|
>
|
|
About Us
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/services/resource-augmentation"
|
|
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
|
>
|
|
Services
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/obse"
|
|
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
|
>
|
|
Products
|
|
</Link>
|
|
</li>
|
|
{/* <li>
|
|
<Link
|
|
href="/join-us"
|
|
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
|
>
|
|
Join Our Team
|
|
</Link>
|
|
</li> */}
|
|
<li>
|
|
<Link
|
|
href="/contact"
|
|
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Contact Info Section */}
|
|
<div>
|
|
<h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
|
|
<address className="text-sm text-[var(--oms-white)]/80 mb-2 not-italic">
|
|
265 Von Willich Avenue
|
|
<br />
|
|
Die Hoewes, Centurion, 0159
|
|
<br />
|
|
(Unit 10 B Centuria Park)
|
|
</address>
|
|
<p className="text-sm text-[var(--oms-white)]/80 mb-2">
|
|
Phone:{" "}
|
|
<a href="tel:+27120513282" className="hover:text-primary">
|
|
(012) 051 3282
|
|
</a>
|
|
</p>
|
|
<p className="text-sm text-[var(--oms-white)]/80 mb-2">
|
|
Email:{" "}
|
|
<a href="mailto:hello@oms.africa" className="hover:text-primary">
|
|
hello@oms.africa
|
|
</a>
|
|
</p>
|
|
{/* Social Icons - Use muted bright color, primary on hover */}
|
|
<div className="flex space-x-4 mt-4">
|
|
<a
|
|
href="https://linkedin.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
|
|
aria-label="LinkedIn"
|
|
>
|
|
<FaLinkedin size={24} />
|
|
</a>
|
|
<a
|
|
href="https://instagram.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
|
|
aria-label="Instagram"
|
|
>
|
|
<FaInstagram size={24} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Section */}
|
|
<div>
|
|
<h5 className="text-lg font-semibold mb-4 text-primary">
|
|
Newsletter
|
|
</h5>
|
|
<p className="text-sm text-[var(--oms-white)]/80 mb-3">
|
|
Stay updated with our latest news.
|
|
</p>
|
|
<form className="flex flex-col sm:flex-row gap-2">
|
|
{/* Input needs dark background styles */}
|
|
<div className="relative max-w-md mx-auto w-full">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
aria-label="Email for newsletter"
|
|
className="
|
|
w-full
|
|
pr-24
|
|
px-4 py-2
|
|
rounded-lg
|
|
bg-[var(--dark-input)]
|
|
border border-[var(--dark-border)]
|
|
text-[var(--dark-foreground)]
|
|
placeholder:text-[var(--dark-muted-foreground)]
|
|
focus:outline-none focus:ring-2 focus:ring-ring
|
|
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
|
"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="
|
|
absolute top-0 right-0
|
|
h-full
|
|
px-4
|
|
rounded-r-lg
|
|
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
|
|
text-primary-foreground
|
|
font-semibold
|
|
hover:bg-opacity-90
|
|
transition-colors
|
|
focus:outline-none focus:ring-2 focus:ring-ring
|
|
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
|
|
"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{/* Badges - Use a subtle dark bg */}
|
|
<div className="mt-6 space-x-2 sm:space-x-4">
|
|
<span className="inline-block bg-[var(--dark-secondary)] text-[var(--dark-secondary-foreground)] px-3 py-1 rounded-md text-xs font-medium">
|
|
Salesforce Partner
|
|
</span>
|
|
<span className="inline-block bg-[var(--dark-secondary)] text-[var(--dark-secondary-foreground)] px-3 py-1 rounded-md text-xs font-medium">
|
|
BBB-EE Level 1
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
{/* Use specific dark border, muted bright text */}
|
|
<div className="border-t border-[var(--dark-border)] pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-[var(--oms-white)]/70">
|
|
<p className="text-center md:text-left mb-4 md:mb-0">
|
|
© {new Date().getFullYear()} Owethu Managed Services. All Rights
|
|
Reserved.
|
|
</p>
|
|
<div className="flex space-x-4">
|
|
{/* Links still hover to primary */}
|
|
|
|
{/* <Link
|
|
href="/privacy-policy"
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</Link> */}
|
|
<a
|
|
href="/Privacy-Policy/Recruitment-Privacy-Policy.pdf"
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
<a
|
|
href="/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf"
|
|
className="hover:text-primary transition-colors"
|
|
>
|
|
PAIA & POPIA
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer;
|
|
//Data-Privacy-Statement-for-Candidates
|