From 41d2db93832b2c81e523df17737293ab74821c47 Mon Sep 17 00:00:00 2001 From: libertyoms Date: Thu, 1 May 2025 10:31:38 +0200 Subject: [PATCH] Header updated and achievements added --- .../_data/achievementsDefaults.ts | 158 ++++++++ app/achievements/page.tsx | 366 ++++++++++++++++++ components/HeaderClient.tsx | 284 +++++++++----- 3 files changed, 708 insertions(+), 100 deletions(-) create mode 100644 app/achievements/_data/achievementsDefaults.ts create mode 100644 app/achievements/page.tsx diff --git a/app/achievements/_data/achievementsDefaults.ts b/app/achievements/_data/achievementsDefaults.ts new file mode 100644 index 0000000..90a8a8d --- /dev/null +++ b/app/achievements/_data/achievementsDefaults.ts @@ -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 +]; diff --git a/app/achievements/page.tsx b/app/achievements/page.tsx new file mode 100644 index 0000000..1beb81c --- /dev/null +++ b/app/achievements/page.tsx @@ -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 */} + {/* + Our Journey &
+ 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) */} +
+
+

+ 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. +

+
+
+ + {/* 3. Awards Section */} + {awards && awards.length > 0 && ( +
+
+

+ {" "} + Awards & Accolades +

+
+ {awards.map((award) => ( +
+ {award.imageUrl && ( +
+ {`${award.name} +
+ )} + {!award.imageUrl && ( + + )} +

+ {award.name} +

+

+ {award.awardingBody} - {award.year} +

+ {award.description && ( +

+ {award.description} +

+ )} +
+ ))} +
+
+
+ )} + + {/* 4. Certifications & Partnerships Section */} + {((certifications && certifications.length > 0) || + (partners && partners.length > 0)) && ( +
+
+

+ {" "} + Certifications &{" "} + {" "} + Partnerships +

+
+ {/* Certifications Column */} + {certifications && certifications.length > 0 && ( +
+

+ Our Certifications +

+
+ {certifications.map((cert) => ( +
+ {cert.logoUrl && ( +
+ {`${cert.name} +
+ )} + {!cert.logoUrl && ( + + )} +
+

+ {cert.name} +

+

+ {cert.issuingBody} +

+ {cert.details && ( +

+ {cert.details} +

+ )} +
+
+ ))} +
+
+ )} + {/* Partnerships Column */} + {partners && partners.length > 0 && ( +
+

+ Key Partners +

+
+ {partners.map((partner) => ( +
+ + {`${partner.name} + + {partner.websiteUrl && ( + + Visit + + )} + {!partner.websiteUrl && ( + + {partner.name} + + )} +
+ ))} +
+ {partners.length > 6 && ( +

+ And more... +

+ )} +
+ )} +
+
+
+ )} + + {/* 5. Milestones Section */} + {milestones && milestones.length > 0 && ( +
+
+

+ {" "} + Key Milestones +

+
+ {milestones.map((milestone, index) => ( +
+
+

+ {milestone.date} +

+

+ {milestone.description} +

+
+ ))} +
+
+
+ )} + + {/* 6. Gallery Section */} + {galleryImages && galleryImages.length > 0 && ( +
+
+

+ {" "} + Moments & Memories +

+
+ {galleryImages.map((image) => ( +
+ {/* Consider adding a Lightbox library here for better image viewing */} + {image.alt} + {/* Overlay for caption */} +
+

+ {image.caption || image.alt} +

+
+
+ ))} +
+
+
+ )} + + {/* 7. Optional CTA Section */} + + + ); +} + +// 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"; diff --git a/components/HeaderClient.tsx b/components/HeaderClient.tsx index dc70019..7402936 100644 --- a/components/HeaderClient.tsx +++ b/components/HeaderClient.tsx @@ -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
) : ( - // Logged Out: Icon Button to Sign In )} - {/* --- End Auth Section --- */}
- {/* Mobile Buttons */}
- {/* Theme toggle remains */} +
- {/* Secondary Row (Desktop Only) */} -
+ {/* Secondary Row w/ Mega Menus */} +
-
- {/* Mobile Menu Panel */} + {/* Mobile Menu */}
- {/* Use semantic variable for text color */}