mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 15:38:09 +00:00
Header updated and achievements added
This commit is contained in:
libertyoms
158
app/achievements/_data/achievementsDefaults.ts
Normal file
158
app/achievements/_data/achievementsDefaults.ts
Normal file
@ -0,0 +1,158 @@
|
||||
// /app/achievements/_data/achievementsDefaults.ts (or similar)
|
||||
|
||||
export interface Award {
|
||||
id: string | number;
|
||||
name: string;
|
||||
year: number | string;
|
||||
awardingBody: string;
|
||||
description?: string;
|
||||
imageUrl?: string; // URL for an award logo or image
|
||||
}
|
||||
|
||||
export interface Certification {
|
||||
id: string | number;
|
||||
name: string;
|
||||
issuingBody: string;
|
||||
logoUrl?: string;
|
||||
details?: string;
|
||||
}
|
||||
|
||||
export interface Partner {
|
||||
id: string | number;
|
||||
name: string;
|
||||
logoUrl: string; // Partner logo is usually essential
|
||||
websiteUrl?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface GalleryImage {
|
||||
id: string | number;
|
||||
imageUrl: string;
|
||||
caption?: string;
|
||||
alt: string;
|
||||
event?: string; // Optional: Name of the event
|
||||
date?: string; // Optional: Date of the event/photo
|
||||
}
|
||||
|
||||
export interface Milestone {
|
||||
id: string | number;
|
||||
description: string;
|
||||
date: string; // e.g., "Q4 2023", "June 2022"
|
||||
}
|
||||
|
||||
// --- Default Placeholder Data ---
|
||||
|
||||
export const defaultAwards: Award[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Top BEE Level 1 Contributor",
|
||||
year: 2023,
|
||||
awardingBody: "SANAS Accreditation Body",
|
||||
description:
|
||||
"Recognized for commitment to Broad-Based Black Economic Empowerment.",
|
||||
imageUrl: "/images/awards/bee-level1.png",
|
||||
}, // Replace with actual paths
|
||||
{
|
||||
id: 2,
|
||||
name: "Supplier Development Excellence",
|
||||
year: 2022,
|
||||
awardingBody: "Absa Enterprise Development",
|
||||
description:
|
||||
"Acknowledged for impactful participation in the Absa supplier development program.",
|
||||
imageUrl: "/images/awards/absa-supplier.png",
|
||||
},
|
||||
// Add more awards...
|
||||
];
|
||||
|
||||
export const defaultCertifications: Certification[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Salesforce Certified Partner",
|
||||
issuingBody: "Salesforce",
|
||||
logoUrl: "/images/certs/salesforce-partner.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "ISO 9001:2015 (Pending/In Progress)",
|
||||
issuingBody: "Relevant Body",
|
||||
details:
|
||||
"Actively working towards certification for quality management systems.",
|
||||
}, // Example of in-progress
|
||||
// Add more certifications
|
||||
];
|
||||
|
||||
export const defaultPartners: Partner[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Absa Bank",
|
||||
logoUrl: "/clients/absa-logo.png",
|
||||
websiteUrl: "https://www.absa.co.za/",
|
||||
}, // Using client logos for partners
|
||||
{
|
||||
id: 2,
|
||||
name: "Salesforce",
|
||||
logoUrl: "/images/certs/salesforce-partner.png",
|
||||
websiteUrl: "https://www.salesforce.com/",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Sybrin",
|
||||
logoUrl: "/clients/sybrin-logo.png",
|
||||
websiteUrl: "https://www.sybrin.com/",
|
||||
},
|
||||
// Add other key strategic partners if distinct from clients
|
||||
];
|
||||
|
||||
export const defaultGalleryImages: GalleryImage[] = [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: "/images/gallery/team-event-1.jpg",
|
||||
caption: "Annual Team Building Day 2023",
|
||||
alt: "OMS Team at Annual Event",
|
||||
event: "Team Building",
|
||||
date: "Nov 2023",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: "/images/gallery/award-ceremony-1.jpg",
|
||||
caption: "Receiving the Supplier Development Award",
|
||||
alt: "OMS receiving award",
|
||||
event: "Absa Awards Night",
|
||||
date: "Oct 2022",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: "/images/gallery/office-launch.jpg",
|
||||
caption: "Celebrating our new Centurion office opening",
|
||||
alt: "OMS new office launch",
|
||||
event: "Office Launch",
|
||||
date: "May 2023",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imageUrl: "/images/gallery/client-workshop.jpg",
|
||||
caption: "Collaborative workshop session with a key client",
|
||||
alt: "OMS client workshop",
|
||||
event: "Client Workshop",
|
||||
date: "Sep 2023",
|
||||
},
|
||||
// Add more gallery images
|
||||
];
|
||||
|
||||
export const defaultMilestones: Milestone[] = [
|
||||
{ id: 1, description: "Established Owethu Managed Services", date: "2019" }, // Adjust start date if needed
|
||||
{
|
||||
id: 2,
|
||||
description: "Joined Absa Supplier Development Programme",
|
||||
date: "2020",
|
||||
},
|
||||
{ id: 3, description: "Became an official Salesforce Partner", date: "2022" },
|
||||
{ id: 4, description: "Launched the OBSE Product", date: "Q1 2023" },
|
||||
{ id: 5, description: "Achieved BEE Level 1 Status", date: "Q3 2023" },
|
||||
{
|
||||
id: 6,
|
||||
description: "Opened new Head Office in Centurion",
|
||||
date: "May 2023",
|
||||
},
|
||||
// Add more significant milestones
|
||||
];
|
||||
366
app/achievements/page.tsx
Normal file
366
app/achievements/page.tsx
Normal file
@ -0,0 +1,366 @@
|
||||
// /app/achievements/page.tsx
|
||||
import Image from "next/image";
|
||||
import { Metadata } from "next";
|
||||
import {
|
||||
FaAward,
|
||||
FaCertificate,
|
||||
FaHandshake,
|
||||
FaCamera,
|
||||
FaTrophy,
|
||||
FaStar,
|
||||
FaExternalLinkAlt,
|
||||
} from "react-icons/fa";
|
||||
import { COLORS } from "@/constants"; // Assuming COLORS is available
|
||||
// import HeroSection from "../_components/HeroSection"; // Reuse HeroSection component
|
||||
|
||||
// Import the placeholder data
|
||||
import {
|
||||
defaultAwards,
|
||||
defaultCertifications,
|
||||
defaultPartners,
|
||||
defaultGalleryImages,
|
||||
defaultMilestones,
|
||||
Award, // Import interfaces if needed within component
|
||||
Certification,
|
||||
Partner,
|
||||
GalleryImage,
|
||||
Milestone,
|
||||
} from "./_data/achievementsDefaults"; // Adjust path as needed
|
||||
import CallToActionSection from "../(website)/_components/CallToActionSection";
|
||||
|
||||
// SEO Metadata
|
||||
export const metadata: Metadata = {
|
||||
title: "Achievements & Recognition | Owethu Managed Services (OMS)",
|
||||
description:
|
||||
"Explore the awards, certifications, partnerships, and milestones achieved by OMS. See our commitment to excellence and empowerment.",
|
||||
keywords: [
|
||||
"OMS achievements",
|
||||
"Owethu Managed Services awards",
|
||||
"BEE Level 1",
|
||||
"Salesforce Partner",
|
||||
"company milestones",
|
||||
"IT company recognition",
|
||||
"supplier development program",
|
||||
"South Africa IT awards",
|
||||
"OMS gallery",
|
||||
"OMS partnerships",
|
||||
],
|
||||
openGraph: {
|
||||
title: "Achievements & Recognition | OMS",
|
||||
description:
|
||||
"Discover OMS's journey of success, awards, and key partnerships.",
|
||||
url: "https://oms.cvevolve.com/achievements", // Update with the final URL
|
||||
// Add an appropriate OG image URL if available
|
||||
// images: [{ url: '/images/oms-achievements-og.png', width: 1200, height: 630, alt: 'OMS Achievements' }],
|
||||
locale: "en_ZA",
|
||||
type: "website",
|
||||
},
|
||||
// Add twitter card if desired
|
||||
};
|
||||
|
||||
export default function AchievementsPage() {
|
||||
// In a real app, fetch data here using functions like getAchievements(), getAwards(), etc.
|
||||
const awards = defaultAwards;
|
||||
const certifications = defaultCertifications;
|
||||
const partners = defaultPartners;
|
||||
const galleryImages = defaultGalleryImages;
|
||||
const milestones = defaultMilestones;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 1. Hero Section */}
|
||||
{/* <HeroSection
|
||||
title={
|
||||
<>
|
||||
Our Journey & <br className="hidden md:block" />
|
||||
Recognition
|
||||
</>
|
||||
}
|
||||
subtitle="Celebrating our milestones, awards, and the partnerships that drive our success."
|
||||
// Optional button:
|
||||
// buttonText="Explore Our Services"
|
||||
// buttonHref="/services"
|
||||
imageUrl="/images/hero/achievements-hero.jpg" // Replace with a suitable hero image (e.g., abstract success, team celebration)
|
||||
/> */}
|
||||
|
||||
{/* 2. Introduction (Optional) */}
|
||||
<section className="py-12 md:py-16 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
At Owethu Managed Services, we are proud of the progress we've
|
||||
made and the recognition we've earned. These achievements
|
||||
reflect our commitment to excellence, empowerment, and delivering
|
||||
value to our clients and community.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Awards Section */}
|
||||
{awards && awards.length > 0 && (
|
||||
<section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
|
||||
<FaAward
|
||||
className="inline-block mr-3 mb-1"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>{" "}
|
||||
Awards & Accolades
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{awards.map((award) => (
|
||||
<div
|
||||
key={award.id}
|
||||
className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex flex-col items-center text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
|
||||
>
|
||||
{award.imageUrl && (
|
||||
<div className="relative h-20 w-20 mb-4">
|
||||
<Image
|
||||
src={award.imageUrl}
|
||||
alt={`${award.name} Logo`}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!award.imageUrl && (
|
||||
<FaTrophy
|
||||
className="text-4xl mb-4"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>
|
||||
)}
|
||||
<h3 className="text-xl font-semibold mb-1 font-poppins text-gray-900 dark:text-white">
|
||||
{award.name}
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
|
||||
{award.awardingBody} - {award.year}
|
||||
</p>
|
||||
{award.description && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">
|
||||
{award.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 4. Certifications & Partnerships Section */}
|
||||
{((certifications && certifications.length > 0) ||
|
||||
(partners && partners.length > 0)) && (
|
||||
<section className="py-16 md:py-20 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
|
||||
<FaCertificate
|
||||
className="inline-block mr-3 mb-1"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>{" "}
|
||||
Certifications &{" "}
|
||||
<FaHandshake
|
||||
className="inline-block ml-2 mr-3 mb-1"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>{" "}
|
||||
Partnerships
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-16">
|
||||
{/* Certifications Column */}
|
||||
{certifications && certifications.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
|
||||
Our Certifications
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
{certifications.map((cert) => (
|
||||
<div
|
||||
key={cert.id}
|
||||
className="flex items-center bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm"
|
||||
>
|
||||
{cert.logoUrl && (
|
||||
<div className="relative h-12 w-16 mr-4 flex-shrink-0">
|
||||
<Image
|
||||
src={cert.logoUrl}
|
||||
alt={`${cert.name} Logo`}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!cert.logoUrl && (
|
||||
<FaCertificate
|
||||
className="text-2xl mr-4 flex-shrink-0"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">
|
||||
{cert.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{cert.issuingBody}
|
||||
</p>
|
||||
{cert.details && (
|
||||
<p className="text-xs text-gray-600 dark:text-gray-300 mt-1">
|
||||
{cert.details}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Partnerships Column */}
|
||||
{partners && partners.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
|
||||
Key Partners
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-6 items-center">
|
||||
{partners.map((partner) => (
|
||||
<div key={partner.id} className="text-center group">
|
||||
<a
|
||||
href={partner.websiteUrl || "#"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`relative block h-16 md:h-20 filter grayscale group-hover:grayscale-0 transition duration-300 ${
|
||||
!partner.websiteUrl ? "cursor-default" : ""
|
||||
}`}
|
||||
title={partner.name}
|
||||
>
|
||||
<Image
|
||||
src={partner.logoUrl}
|
||||
alt={`${partner.name} Logo`}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
/>
|
||||
</a>
|
||||
{partner.websiteUrl && (
|
||||
<a
|
||||
href={partner.websiteUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inline-flex items-center mt-1"
|
||||
>
|
||||
Visit <FaExternalLinkAlt className="ml-1 w-2 h-2" />
|
||||
</a>
|
||||
)}
|
||||
{!partner.websiteUrl && (
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400 mt-1 inline-block">
|
||||
{partner.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{partners.length > 6 && (
|
||||
<p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||
And more...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 5. Milestones Section */}
|
||||
{milestones && milestones.length > 0 && (
|
||||
<section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="container mx-auto px-6 max-w-3xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
|
||||
<FaStar
|
||||
className="inline-block mr-3 mb-1"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>{" "}
|
||||
Key Milestones
|
||||
</h2>
|
||||
<div
|
||||
className="relative pl-8 border-l-2 border-gold-500 dark:border-gold-400"
|
||||
style={{ borderColor: COLORS.primary }}
|
||||
>
|
||||
{milestones.map((milestone, index) => (
|
||||
<div key={milestone.id} className="mb-8 relative">
|
||||
<div
|
||||
className="absolute -left-[1.6rem] top-1 w-6 h-6 bg-gold-500 rounded-full border-4 border-white dark:border-gray-800 dark:bg-gold-400"
|
||||
style={{
|
||||
backgroundColor: COLORS.primary,
|
||||
borderColor:
|
||||
bgColor === "dark"
|
||||
? "#1f2937"
|
||||
: "#f9fafb" /* Adjust based on actual dark/light bg */,
|
||||
}}
|
||||
></div>
|
||||
<p
|
||||
className="text-sm font-semibold text-gold-600 dark:text-gold-400"
|
||||
style={{ color: COLORS.primary }}
|
||||
>
|
||||
{milestone.date}
|
||||
</p>
|
||||
<p className="text-md text-gray-700 dark:text-gray-300">
|
||||
{milestone.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 6. Gallery Section */}
|
||||
{galleryImages && galleryImages.length > 0 && (
|
||||
<section className="py-16 md:py-20 bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto px-6">
|
||||
<h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
|
||||
<FaCamera
|
||||
className="inline-block mr-3 mb-1"
|
||||
style={{ color: COLORS.primary }}
|
||||
/>{" "}
|
||||
Moments & Memories
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{galleryImages.map((image) => (
|
||||
<div
|
||||
key={image.id}
|
||||
className="group relative aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
|
||||
>
|
||||
{/* Consider adding a Lightbox library here for better image viewing */}
|
||||
<Image
|
||||
src={image.imageUrl}
|
||||
alt={image.alt}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="transform transition-transform duration-300 group-hover:scale-110"
|
||||
/>
|
||||
{/* Overlay for caption */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3 md:p-4">
|
||||
<p className="text-white text-xs md:text-sm font-semibold line-clamp-2">
|
||||
{image.caption || image.alt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 7. Optional CTA Section */}
|
||||
<CallToActionSection
|
||||
title="Partner with Proven Expertise"
|
||||
subtitle="Let our recognized capabilities help you achieve your technology goals."
|
||||
buttonText="Discuss Your Project"
|
||||
buttonHref="/contact"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Helper function to determine background color for milestone border (if needed)
|
||||
// This is a simplified check, adjust based on how you handle theme toggling
|
||||
const bgColor =
|
||||
typeof window !== "undefined" &&
|
||||
document.documentElement.classList.contains("dark")
|
||||
? "dark"
|
||||
: "light";
|
||||
@ -4,23 +4,25 @@
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
// Use usePathname only if needed for active state logic not shown here
|
||||
// import { usePathname } from "next/navigation";
|
||||
import {
|
||||
FiChevronDown,
|
||||
FiClipboard,
|
||||
FiArrowRight,
|
||||
FiMenu,
|
||||
FiX,
|
||||
FiLogIn, // Import the login icon
|
||||
FiLogIn,
|
||||
FiUsers, // Resource Augmentation
|
||||
FiBriefcase, // Project Management
|
||||
FiCpu, // Product Development
|
||||
FiBox, // OBSE
|
||||
FiFileText, // Vacancies
|
||||
FiUserCheck, // Recruitment Portal
|
||||
} from "react-icons/fi";
|
||||
import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists
|
||||
import type { Session } from "@auth/core/types"; // Import Session type for props
|
||||
import ThemeToggle from "./ThemeToggle";
|
||||
import type { Session } from "@auth/core/types";
|
||||
|
||||
const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder
|
||||
const omsLogoUrl = "/oms-logo.svg";
|
||||
|
||||
// --- Basic Dropdown Component ---
|
||||
// (Keep the DropdownMenu and DropdownLink component definitions here as before)
|
||||
type DropdownMenuProps = {
|
||||
trigger: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
@ -31,7 +33,6 @@ const DropdownMenu = ({
|
||||
children,
|
||||
menuClasses = "w-48",
|
||||
}: DropdownMenuProps) => (
|
||||
// Using group-focus-within for better keyboard/touch accessibility
|
||||
<div className="relative group">
|
||||
<button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
|
||||
{trigger}
|
||||
@ -40,8 +41,9 @@ const DropdownMenu = ({
|
||||
<div
|
||||
className={`
|
||||
absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
|
||||
bg-card border border-border {/* USE SEMANTIC VARS */}
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible transition-all duration-200
|
||||
bg-card border border-border
|
||||
opacity-0 invisible group-hover:opacity-100 group-hover:visible group-focus-within:opacity-100 group-focus-within:visible
|
||||
transition-all duration-200
|
||||
`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
@ -52,101 +54,100 @@ const DropdownMenu = ({
|
||||
type DropdownLinkProps = {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void; // Added onClick for mobile menu closure
|
||||
onClick?: () => void;
|
||||
};
|
||||
const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick} // Call onClick if provided
|
||||
className="block w-full text-left px-4 py-2 text-sm text-card-foreground hover:bg-secondary hover:text-primary" // USE SEMANTIC VARS
|
||||
onClick={onClick}
|
||||
className="block w-full text-left px-4 py-2 text-sm text-card-foreground hover:bg-secondary hover:text-primary transition-colors duration-150"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
// --- End Dropdown Component ---
|
||||
|
||||
// --- Define Props for the Client Component ---
|
||||
type HeaderClientProps = {
|
||||
session: Session | null; // Accept session from the server component
|
||||
handleSignIn: () => void; // Pass sign-in handler
|
||||
handleSignOut: () => void; // Pass sign-out handler
|
||||
session: Session | null;
|
||||
handleSignIn: () => void;
|
||||
handleSignOut: () => void;
|
||||
};
|
||||
|
||||
// --- The Main Client Component ---
|
||||
const HeaderClient = ({
|
||||
session,
|
||||
handleSignIn,
|
||||
handleSignOut,
|
||||
}: HeaderClientProps) => {
|
||||
// --- Client-side state and hooks ---
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
// const pathname = usePathname() || "/"; // Uncomment if needed
|
||||
// const isActive = (path: string) => pathname === path; // Uncomment if needed
|
||||
|
||||
const toggleMenu = () => setIsMenuOpen((open) => !open);
|
||||
const handleMobileLinkClick = () => setIsMenuOpen(false);
|
||||
|
||||
const currentLogo = omsLogoUrl;
|
||||
const megaMenuTriggerClasses = `
|
||||
relative inline-flex items-center text-sm font-medium text-primary-foreground group
|
||||
hover:opacity-90 transition-opacity duration-150 ease-in-out pb-1
|
||||
after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[2px]
|
||||
after:w-0 after:bg-primary-foreground/80 after:transition-all after:duration-300 after:ease-out
|
||||
group-hover:after:w-full group-focus-within:after:w-full
|
||||
`;
|
||||
|
||||
const megaMenuItemClasses = `
|
||||
flex items-center p-3 -m-3 rounded-lg
|
||||
hover:bg-secondary transition-colors duration-150 ease-in-out group
|
||||
`;
|
||||
const megaMenuIconClasses = `flex-shrink-0 h-6 w-6 text-primary group-hover:text-primary-focus mr-4`;
|
||||
const megaMenuTextWrapperClasses = `text-sm`;
|
||||
const megaMenuTitleClasses = `font-semibold text-card-foreground`;
|
||||
|
||||
return (
|
||||
// Use semantic variables for header background and border
|
||||
<header className="sticky top-0 z-50 shadow-md bg-background border-b border-border">
|
||||
{/* Top Row */}
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center space-x-2"
|
||||
title="OMS Home"
|
||||
>
|
||||
<Image
|
||||
src={currentLogo}
|
||||
src={omsLogoUrl}
|
||||
alt="OMS Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
priority
|
||||
/>
|
||||
{/* Use semantic variable for text color */}
|
||||
<span className="text-xl font-bold text-foreground hidden sm:inline">
|
||||
Owethu Managed Services
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
|
||||
{/* Use semantic variables for text, hover uses primary */}
|
||||
<Link
|
||||
href="/"
|
||||
className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
|
||||
className="text-sm font-medium text-foreground/80 hover:text-primary transition"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/tech-talk"
|
||||
className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
|
||||
className="text-sm font-medium text-foreground/80 hover:text-primary transition"
|
||||
>
|
||||
Tech Talk
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
|
||||
className="text-sm font-medium text-foreground/80 hover:text-primary transition"
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className={`text-sm font-medium text-foreground/80 hover:text-primary transition`}
|
||||
className="text-sm font-medium text-foreground/80 hover:text-primary transition"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Utilities */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<ThemeToggle />
|
||||
|
||||
{/* Request Demo Button */}
|
||||
<Link
|
||||
href="/request-demo"
|
||||
className="flex items-center text-sm font-medium bg-primary text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
|
||||
@ -156,39 +157,34 @@ const HeaderClient = ({
|
||||
Request OBSE Demo
|
||||
</Link>
|
||||
|
||||
{/* --- Auth Section --- */}
|
||||
{session?.user ? (
|
||||
// Logged In: User Dropdown
|
||||
<DropdownMenu
|
||||
menuClasses="w-40 right-0 left-auto" // Align dropdown to the right
|
||||
menuClasses="w-40 right-0 left-auto"
|
||||
trigger={
|
||||
<div className="flex items-center space-x-2 cursor-pointer hover:opacity-80 transition">
|
||||
<Image
|
||||
src={session.user.image || "/default-avatar.png"} // Provide a fallback avatar
|
||||
src={session.user.image || "/default-avatar.png"}
|
||||
alt={session.user.name || "User"}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background" // Added offset
|
||||
className="rounded-full ring-1 ring-primary ring-offset-2 ring-offset-background"
|
||||
/>
|
||||
{/* Optionally hide name on smaller desktop screens */}
|
||||
<span className="text-sm font-medium text-foreground hidden lg:inline">
|
||||
{session.user.name?.split(" ")[0]}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* Sign Out inside the dropdown */}
|
||||
<button
|
||||
onClick={() => handleSignOut()}
|
||||
className="block w-full text-left px-4 py-2 text-sm text-destructive hover:bg-secondary hover:text-destructive transition" // Destructive color
|
||||
onClick={handleSignOut}
|
||||
className="block w-full text-left px-4 py-2 text-sm text-destructive hover:bg-secondary hover:text-destructive transition"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
// Logged Out: Icon Button to Sign In
|
||||
<button
|
||||
onClick={() => handleSignIn()}
|
||||
onClick={handleSignIn}
|
||||
className="p-2 rounded-full text-foreground/70 hover:text-primary hover:bg-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
|
||||
title="Sign In"
|
||||
aria-label="Sign In"
|
||||
@ -196,15 +192,13 @@ const HeaderClient = ({
|
||||
<FiLogIn className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
{/* --- End Auth Section --- */}
|
||||
</div>
|
||||
|
||||
{/* Mobile Buttons */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<ThemeToggle /> {/* Theme toggle remains */}
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
className="text-foreground/60 hover:text-primary focus:outline-none ml-3" // Use semantic muted color, hover primary
|
||||
className="text-foreground/60 hover:text-primary focus:outline-none ml-3"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={isMenuOpen}
|
||||
aria-controls="mobile-menu"
|
||||
@ -219,39 +213,144 @@ const HeaderClient = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary Row (Desktop Only) */}
|
||||
<div className="bg-primary">
|
||||
{/* Secondary Row w/ Mega Menus */}
|
||||
<div className="bg-primary relative">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="hidden md:flex justify-between items-center h-12">
|
||||
<nav className="flex items-center space-x-6 lg:space-x-8 text-primary-foreground">
|
||||
<div className="hover:text-opacity-80 transition-opacity">
|
||||
<DropdownMenu trigger={<span>Services</span>}>
|
||||
<DropdownLink href="/services/resource-augmentation">
|
||||
Resource Augmentation
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/services/project-management">
|
||||
Project Management
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/services/product-development">
|
||||
Product Development
|
||||
</DropdownLink>
|
||||
</DropdownMenu>
|
||||
<nav className="flex items-center space-x-8 lg:space-x-10">
|
||||
{/* Services */}
|
||||
<div className="group">
|
||||
<button className={megaMenuTriggerClasses}>
|
||||
Services
|
||||
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
|
||||
</button>
|
||||
<div
|
||||
className={`
|
||||
absolute left-0 top-full w-full shadow-lg z-40
|
||||
bg-card border-x border-b border-border rounded-b-lg
|
||||
opacity-0 invisible translate-y-[-10px]
|
||||
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
|
||||
transition-all duration-300 ease-out transform
|
||||
`}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-6">
|
||||
<Link
|
||||
href="/services/resource-augmentation"
|
||||
className={megaMenuItemClasses}
|
||||
>
|
||||
<FiUsers className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>
|
||||
Resource Augmentation
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/project-management"
|
||||
className={megaMenuItemClasses}
|
||||
>
|
||||
<FiBriefcase className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>
|
||||
Project Management
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/services/product-development"
|
||||
className={megaMenuItemClasses}
|
||||
>
|
||||
<FiCpu className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>
|
||||
Product Development
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-6 pt-4 border-t border-border flex justify-end">
|
||||
<Link
|
||||
href="/services"
|
||||
className="flex items-center text-sm font-medium text-primary hover:underline"
|
||||
>
|
||||
Explore All Services
|
||||
<FiArrowRight className="w-4 h-4 ml-1" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hover:text-opacity-80 transition-opacity">
|
||||
<DropdownMenu trigger={<span>Products</span>}>
|
||||
<DropdownLink href="/obse">OBSE</DropdownLink>
|
||||
</DropdownMenu>
|
||||
{/* Products */}
|
||||
<div className="group">
|
||||
<button className={megaMenuTriggerClasses}>
|
||||
Products
|
||||
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
|
||||
</button>
|
||||
<div
|
||||
className={`
|
||||
absolute left-0 top-full w-full shadow-lg z-40
|
||||
bg-card border-x border-b border-border rounded-b-lg
|
||||
opacity-0 invisible translate-y-[-10px]
|
||||
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
|
||||
transition-all duration-300 ease-out transform
|
||||
`}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
|
||||
<div className="max-w-md">
|
||||
<Link href="/obse" className={megaMenuItemClasses}>
|
||||
<FiBox className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>OBSE Platform</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hover:text-opacity-80 transition-opacity">
|
||||
<DropdownMenu trigger={<span>Join Our Team</span>}>
|
||||
<DropdownLink href="/vacancies">Vacancies</DropdownLink>
|
||||
<DropdownLink href="/portal">Recruitment Portal</DropdownLink>
|
||||
</DropdownMenu>
|
||||
{/* Join Our Team */}
|
||||
<div className="group">
|
||||
<button className={megaMenuTriggerClasses}>
|
||||
Join Our Team
|
||||
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 group-hover:rotate-180 transition-transform duration-200" />
|
||||
</button>
|
||||
<div
|
||||
className={`
|
||||
absolute left-0 top-full w-full shadow-lg z-40
|
||||
bg-card border-x border-b border-border rounded-b-lg
|
||||
opacity-0 invisible translate-y-[-10px]
|
||||
group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
|
||||
transition-all duration-300 ease-out transform
|
||||
`}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 max-w-xl">
|
||||
<Link href="/vacancies" className={megaMenuItemClasses}>
|
||||
<FiFileText className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>
|
||||
Current Vacancies
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/portal" className={megaMenuItemClasses}>
|
||||
<FiUserCheck className={megaMenuIconClasses} />
|
||||
<div className={megaMenuTextWrapperClasses}>
|
||||
<p className={megaMenuTitleClasses}>
|
||||
Recruitment Portal
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ← Here’s the Explore Our Offerings link, back in its original spot */}
|
||||
<Link
|
||||
href="/services"
|
||||
className="flex items-center text-sm font-medium text-primary-foreground hover:text-opacity-80 transition-opacity group"
|
||||
className="flex items-center text-sm font-medium text-primary-foreground hover:opacity-80 transition-opacity group"
|
||||
>
|
||||
Explore Our Offerings
|
||||
<FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
|
||||
@ -260,21 +359,16 @@ const HeaderClient = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Panel */}
|
||||
{/* Mobile Menu */}
|
||||
<div
|
||||
id="mobile-menu"
|
||||
// Use semantic variables for background and border
|
||||
className={`md:hidden absolute top-full left-0 w-full shadow-lg transition-all duration-300 ease-in-out overflow-hidden bg-card border-t border-border ${
|
||||
isMenuOpen
|
||||
? "max-h-[calc(100vh-4rem)] py-4 overflow-y-auto"
|
||||
: "max-h-0 py-0" // Animate height, allow scroll
|
||||
: "max-h-0 py-0"
|
||||
}`}
|
||||
>
|
||||
{/* Use semantic variable for text color */}
|
||||
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-1 text-foreground">
|
||||
{" "}
|
||||
{/* Reduced space-y */}
|
||||
{/* Mobile Links */}
|
||||
<DropdownLink href="/" onClick={handleMobileLinkClick}>
|
||||
Home
|
||||
</DropdownLink>
|
||||
@ -305,41 +399,33 @@ const HeaderClient = ({
|
||||
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
|
||||
Products
|
||||
</span>
|
||||
<DropdownLink href="/products/obse" onClick={handleMobileLinkClick}>
|
||||
<DropdownLink href="/obse" onClick={handleMobileLinkClick}>
|
||||
OBSE
|
||||
</DropdownLink>
|
||||
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
|
||||
Join Us
|
||||
</span>
|
||||
<DropdownLink
|
||||
href="/join-us/vacancies"
|
||||
onClick={handleMobileLinkClick}
|
||||
>
|
||||
<DropdownLink href="/vacancies" onClick={handleMobileLinkClick}>
|
||||
Vacancies
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/join-us/portal" onClick={handleMobileLinkClick}>
|
||||
<DropdownLink href="/portal" onClick={handleMobileLinkClick}>
|
||||
Recruitment Portal
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/contact" onClick={handleMobileLinkClick}>
|
||||
Contact Us
|
||||
</DropdownLink>
|
||||
{/* Demo Button */}
|
||||
<div className="pt-4">
|
||||
<Link
|
||||
href="/request-demo"
|
||||
onClick={handleMobileLinkClick}
|
||||
// Use semantic variables for button style
|
||||
className="flex w-full justify-center items-center text-sm font-medium bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"
|
||||
title="Request a Demo"
|
||||
>
|
||||
<FiClipboard className="w-4 h-4 mr-1.5" />
|
||||
Request OBSE Demo
|
||||
<FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
|
||||
</Link>
|
||||
</div>
|
||||
{/* Auth Buttons in Mobile Menu */}
|
||||
<div className="pt-4 border-t border-border mt-4">
|
||||
{session?.user ? (
|
||||
// Sign Out Button (Text)
|
||||
<button
|
||||
onClick={() => {
|
||||
handleSignOut();
|
||||
@ -350,7 +436,6 @@ const HeaderClient = ({
|
||||
Sign Out
|
||||
</button>
|
||||
) : (
|
||||
// Sign In Button (Text or Icon+Text)
|
||||
<button
|
||||
onClick={() => {
|
||||
handleSignIn();
|
||||
@ -358,8 +443,7 @@ const HeaderClient = ({
|
||||
}}
|
||||
className="flex items-center w-full text-left px-4 py-2 text-sm font-medium text-foreground hover:bg-secondary hover:text-primary transition"
|
||||
>
|
||||
<FiLogIn className="w-4 h-4 mr-2" /> {/* Added icon here too */}
|
||||
Sign In
|
||||
<FiLogIn className="w-4 h-4 mr-2" /> Sign In
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user