mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
Home page completed
This commit is contained in:
libertyoms
@ -1,43 +1,68 @@
|
||||
// components/Footer.tsx
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { FaLinkedin, FaInstagram } from "react-icons/fa"; // npm install react-icons
|
||||
import { FaLinkedin, FaInstagram } from "react-icons/fa";
|
||||
import Image from "next/image";
|
||||
const omsLogoUrl = "/oms-logo.svg";
|
||||
|
||||
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 (
|
||||
<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 */}
|
||||
// --- 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={omsLogoUrl} // Use your actual logo path
|
||||
src={currentLogo}
|
||||
alt="OMS Logo"
|
||||
width={40} // Adjust size as needed
|
||||
width={40}
|
||||
height={40}
|
||||
priority // Load logo quickly
|
||||
priority
|
||||
// Optional: Add filter for dark bg if logo isn't ideal
|
||||
// className="dark:invert"
|
||||
/>
|
||||
<span className="text-xl font-bold text-light">OMS</span>
|
||||
{/* Ensure prominent text is bright */}
|
||||
<span className="text-xl font-bold text-[var(--oms-white)]">
|
||||
OMS
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">Owethu Managed Services</p>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
{/* 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 */}
|
||||
{/* 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="hover:text-primary transition-colors duration-300"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
@ -45,7 +70,7 @@ const Footer = () => {
|
||||
<li>
|
||||
<Link
|
||||
href="/services"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Services
|
||||
</Link>
|
||||
@ -53,7 +78,7 @@ const Footer = () => {
|
||||
<li>
|
||||
<Link
|
||||
href="/products"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
@ -61,7 +86,7 @@ const Footer = () => {
|
||||
<li>
|
||||
<Link
|
||||
href="/join-us"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Join Our Team
|
||||
</Link>
|
||||
@ -69,7 +94,7 @@ const Footer = () => {
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="hover:text-primary transition-colors duration-300"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
@ -77,29 +102,36 @@ const Footer = () => {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
{/* Contact Info Section */}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
<address className="text-sm text-[var(--oms-white)]/80 mb-2 not-italic">
|
||||
Unit 10 B Centuria Park
|
||||
<br />
|
||||
265 Von Willich Avenue
|
||||
<br />
|
||||
Die Hoewes, Centurion, 0159
|
||||
</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-gray-400 mb-2">Phone: (012) 051 3282</p>
|
||||
<p className="text-sm text-gray-400 mb-2">
|
||||
<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-gray-400 hover:text-primary"
|
||||
className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<FaLinkedin size={24} />
|
||||
</a>
|
||||
@ -107,40 +139,45 @@ const Footer = () => {
|
||||
href="https://instagram.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-400 hover:text-primary"
|
||||
className="text-[var(--oms-white)]/70 hover:text-primary transition-colors"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<FaInstagram size={24} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter */}
|
||||
{/* Newsletter Section */}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-4 text-primary">
|
||||
Newsletter
|
||||
</h5>
|
||||
<p className="text-sm text-gray-400 mb-3">
|
||||
<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 */}
|
||||
<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"
|
||||
aria-label="Email for newsletter"
|
||||
// Use dark variable for input bg/border, bright for text
|
||||
className="flex-grow 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)]" // Ring offset needs dark bg
|
||||
/>
|
||||
{/* Keep button styling primary */}
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-primary text-dark px-4 py-2 rounded-md font-semibold hover:bg-primary/90 transition-colors duration-300"
|
||||
className="bg-primary text-primary-foreground px-4 py-2 rounded-lg 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)]" // Ring offset needs dark bg
|
||||
>
|
||||
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">
|
||||
{/* 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-gray-600 px-3 py-1 rounded text-xs font-semibold">
|
||||
<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 X
|
||||
</span>
|
||||
</div>
|
||||
@ -148,16 +185,24 @@ const Footer = () => {
|
||||
</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>
|
||||
{/* 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 mt-4 md:mt-0">
|
||||
<Link href="/privacy-policy" className="hover:text-primary">
|
||||
<div className="flex space-x-4">
|
||||
{/* Links still hover to primary */}
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="hover:text-primary transition-colors"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link href="/paia-popia" className="hover:text-primary">
|
||||
<Link
|
||||
href="/paia-popia"
|
||||
className="hover:text-primary transition-colors"
|
||||
>
|
||||
PAIA & POPIA
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user