mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
Initial Commit
This commit is contained in:
libertyoms
170
components/Footer.tsx
Normal file
170
components/Footer.tsx
Normal file
@ -0,0 +1,170 @@
|
||||
// components/Footer.tsx
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { FaLinkedin, FaInstagram } from "react-icons/fa"; // npm install react-icons
|
||||
import Image from "next/image";
|
||||
const omsLogoUrl = "/oms-logo.svg";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-dark text-light pt-16 pb-8">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
|
||||
{/* About/Logo */}
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Image
|
||||
src={omsLogoUrl} // Use your actual logo path
|
||||
alt="OMS Logo"
|
||||
width={40} // Adjust size as needed
|
||||
height={40}
|
||||
priority // Load logo quickly
|
||||
/>
|
||||
<span className="text-xl font-bold text-light">OMS</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Owethu Managed Services</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
Where innovation meets excellence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-4 text-primary">
|
||||
Quick Links
|
||||
</h5>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/about"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/services"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Services
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/products"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/join-us"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Join Our Team
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
Unit 10 B Centuria Park
|
||||
<br />
|
||||
265 Von Willich Avenue
|
||||
<br />
|
||||
Die Hoewes, Centurion, 0159
|
||||
</p>
|
||||
<p className="text-sm text-gray-400 mb-2">Phone: (012) 051 3282</p>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
Email:{" "}
|
||||
<a href="mailto:hello@oms.africa" className="hover:text-primary">
|
||||
hello@oms.africa
|
||||
</a>
|
||||
</p>
|
||||
<div className="flex space-x-4 mt-4">
|
||||
<a
|
||||
href="https://linkedin.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-400 hover:text-primary"
|
||||
>
|
||||
<FaLinkedin size={24} />
|
||||
</a>
|
||||
<a
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-400 hover:text-primary"
|
||||
>
|
||||
<FaInstagram size={24} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter */}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-4 text-primary">
|
||||
Newsletter
|
||||
</h5>
|
||||
<p className="text-sm text-gray-400 mb-3">
|
||||
Stay updated with our latest news.
|
||||
</p>
|
||||
<form className="flex flex-col sm:flex-row gap-2">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-grow px-4 py-2 rounded-md bg-gray-700 text-light border border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-primary text-dark px-4 py-2 rounded-md font-semibold hover:bg-primary/90 transition-colors duration-300"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
{/* TODO: Add Badges */}
|
||||
<div className="mt-6 space-x-4">
|
||||
<span className="inline-block bg-gray-600 px-3 py-1 rounded text-xs font-semibold">
|
||||
Salesforce Partner
|
||||
</span>
|
||||
<span className="inline-block bg-gray-600 px-3 py-1 rounded text-xs font-semibold">
|
||||
BBB-EE Level X
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
|
||||
<p>
|
||||
© {new Date().getFullYear()} Owethu Managed Services. All Rights
|
||||
Reserved.
|
||||
</p>
|
||||
<div className="flex space-x-4 mt-4 md:mt-0">
|
||||
<Link href="/privacy-policy" className="hover:text-primary">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link href="/paia-popia" className="hover:text-primary">
|
||||
PAIA & POPIA
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user