omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2025-12-17 18:58:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/OwethuManagedServices/oms-website-nextjs into dev

Browse Source
This commit is contained in:
libertyoms
2025-06-11 16:42:18 +02:00
parent 755eea55a4 8f828a374c
commit 985c4b5a85
16 changed files with 182 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(website)/_components/CallToActionSection.tsx
View File

@ -17,7 +17,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
}) => { }) => {
return ( return (
// Use primary background, primary-foreground for text // Use primary background, primary-foreground for text
<section className="bg-primary text-primary-foreground py-16 md:py-20"> <section className="bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground py-16 md:py-20">
{" "} {" "}
{/* Adjusted padding */} {/* Adjusted padding */}
<div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
@ -30,7 +30,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
</p>{" "} </p>{" "}
{/* Slightly less emphasis */} {/* Slightly less emphasis */}
{/* Button needs contrast on primary bg. Use a secondary/outline/custom variant */} {/* Button needs contrast on primary bg. Use a secondary/outline/custom variant */}
<Button href={buttonHref} variant="secondary" size="lg"> <Button href={buttonHref} variant="black" size="lg" >
{/* Example: Using 'secondary' which uses light/dark gray bg defined in globals */} {/* Example: Using 'secondary' which uses light/dark gray bg defined in globals */}
{/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */} {/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */}
{buttonText} {buttonText}

2
app/(website)/_components/ClientLogosSection.tsx
View File

@ -22,7 +22,7 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
title, title,
description, description,
clients = [], // Default to empty array clients = [], // Default to empty array
speed = 50, //Default speed in seconds for one full cycle speed = 40, //Default speed in seconds for one full cycle
squareSize = 120, // Default size for the square container (e.g., 120px) squareSize = 120, // Default size for the square container (e.g., 120px)
}) => { }) => {
// Need at least one client to render the marquee // Need at least one client to render the marquee

10
app/(website)/_components/HeroSection.tsx
View File

@ -16,15 +16,15 @@ const HeroSection: React.FC<HeroSectionProps> = ({
title, title,
subtitle, subtitle,
buttonText, buttonText,
buttonHref, //buttonHref,
imageUrl = "/hero-bg-2.jpg", // Default background image imageUrl = "/hero-bg-2.jpg", // Default background image
}) => { }) => {
return ( return (
<section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center bg-gradient-to-b from-black/10 to-black/40 text-white overflow-hidden"> <section className="relative h-[70vh] md:h-[85vh] flex items-center justify-center text-center text-white overflow-hidden">
{" "} {" "}
{/* Adjusted background */} {/* Adjusted background bg-gradient-to-b from-black/10 to-black/40*/}
{/* Background Image/Video */} {/* Background Image/Video */}
<div className="absolute inset-0 z-0 opacity-40 dark:opacity-30"> <div className="absolute inset-0 z-0 opacity-100 dark:opacity-30">
{" "} {" "}
{/* Adjusted opacity */} {/* Adjusted opacity */}
{imageUrl && ( {imageUrl && (
@ -52,7 +52,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
{subtitle} {subtitle}
</p> </p>
<Button <Button
href={buttonHref} href="/obse"
variant="primary" // Use primary variant defined in Button component variant="primary" // Use primary variant defined in Button component
size="lg" size="lg"
className="animate-fade-in-up animation-delay-600" className="animate-fade-in-up animation-delay-600"

1
app/(website)/_components/HeroSectionModern.tsx
View File

@ -21,6 +21,7 @@ const HeroSectionModern: React.FC<HeroSectionProps> = ({
}) => { }) => {
return ( return (
// Use min-h-screen for full viewport height adjust if needed // Use min-h-screen for full viewport height adjust if needed
//bg-[linear-gradient(to_right,#f0e18a,#f9f4c3,#ecd973)]
<section className="relative flex flex-col md:flex-row items-center bg-background min-h-[80vh] md:min-h-screen overflow-hidden"> <section className="relative flex flex-col md:flex-row items-center bg-background min-h-[80vh] md:min-h-screen overflow-hidden">
{/* Background Image/Video Layer */} {/* Background Image/Video Layer */}
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">

2
app/(website)/about/page.tsx
View File

@ -511,7 +511,7 @@ export default function AboutUsPage() {
*/} */}
{/* Section 10: Commitment to Impact (Optional, but adds value) */} {/* Section 10: Commitment to Impact (Optional, but adds value) */}
<section <section
className="py-16 md:py-24 bg-gold-500 text-gray-900 dark:bg-gold-600 dark:text-gray-900" className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 dark:bg-gold-600 dark:text-gray-900"
style={{ backgroundColor: "#e1c44a" }} style={{ backgroundColor: "#e1c44a" }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">

4
app/(website)/contact/page.tsx
View File

@ -130,10 +130,10 @@ export default function ContactPage() {
Phone Phone
</h3> </h3>
<a <a
href="tel:+27120513282" href="tel:+27684855721"
className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins" className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
> >
(012) 051 3282 +27 68 485 5721
</a> </a>
</div> </div>
</div> </div>

15
app/(website)/obse/page.tsx
View File

@ -242,10 +242,10 @@ export default function ObsePage() {
{/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */} {/* <Image src="/oms-logo-white.png" alt="OMS Logo" width={150} height={50} className="mx-auto mb-6" /> */}
<h1 <h1
className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight" className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight"
style={{ color: COLORS.primary }} style={{ color: COLORS.primary }}
> >
Revolutionize Your Lending and <br />Credit Processes with OBSE Revolutionize Your Lending and <br />
Credit Processes with OBSE
</h1> </h1>
<p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8"> <p className="text-lg md:text-xl max-w-4xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 mb-8">
Automate data extraction, enhance accuracy, detect fraud, and Automate data extraction, enhance accuracy, detect fraud, and
@ -254,13 +254,14 @@ export default function ObsePage() {
</p> </p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="#how-it-works" // Link to the "How it Works" section href="https://youtu.be/Sd3TnvoLtDA?si=UOeXScbosM5LZxbg" // Link to the "How it Works" section
className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300" className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
<FaPlayCircle className="inline mr-2 text-red-400" /> See How It <FaPlayCircle className="inline mr-2 text-red-400" /> See How It
Works Works
</Link> </Link>
{/* Optional Mini-CTA */} {/* Optional Mini-CTA */}
{/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"> {/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300">
<FaPlayCircle className="mr-2" /> Watch a Quick Overview <FaPlayCircle className="mr-2" /> Watch a Quick Overview
@ -718,7 +719,7 @@ export default function ObsePage() {
{/* 12. Call to Action (CTA) Section */} {/* 12. Call to Action (CTA) Section */}
<section <section
className="py-16 md:py-24 bg-gold-500 text-gray-900" className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">
@ -732,13 +733,13 @@ export default function ObsePage() {
</p> </p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="/contact?subject=OBSE Demo Request" // Pre-fill subject for contact form href="/contact" // Pre-fill subject for contact form
className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300" className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
> >
Request a Personalized Demo Request a Personalized Demo
</Link> </Link>
<Link <Link
href="/contact?subject=OBSE Sales Inquiry" // Pre-fill subject href="/contact" // Pre-fill subject
className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300" className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
> >
Contact Sales Team Contact Sales Team

2
app/(website)/page.tsx
View File

@ -62,7 +62,7 @@ export default async function HomePage() {
description="Our advanced Optimized Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights." description="Our advanced Optimized Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
features={defaultObseFeatures} features={defaultObseFeatures}
buttonText="Learn More & Demo" buttonText="Learn More & Demo"
buttonHref="/products/obse" // Link to the OBSE product page buttonHref="/obse" // Link to the OBSE product page
imageUrl="/images/obse.svg" // **IMPORTANT: Create or find a relevant image** imageUrl="/images/obse.svg" // **IMPORTANT: Create or find a relevant image**
imageAlt="OBSE Product Interface Mockup" imageAlt="OBSE Product Interface Mockup"
/> />

26
app/(website)/services/product-development/page.tsx
View File

@ -24,11 +24,11 @@ import {
FaChartLine, // For Growth/Scalability FaChartLine, // For Growth/Scalability
FaTasks, // For QA FaTasks, // For QA
FaComments, // For Feedback FaComments, // For Feedback
FaPhone, //FaPhone,
FaEnvelope, //FaEnvelope,
} from "react-icons/fa"; } from "react-icons/fa";
import { COLORS } from "@/constants"; import { COLORS } from "@/constants";
import ContactForm from "@/components/ContactForm"; //import ContactForm from "@/components/ContactForm";
// SEO Metadata // SEO Metadata
export const metadata: Metadata = { export const metadata: Metadata = {
@ -323,13 +323,13 @@ export default function ProductDevelopmentPage() {
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="#how-we-deliver" href="#how-we-deliver"
className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300" className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
How We Deliver How We Deliver
</Link> </Link>
<Link <Link
href="#contact" href="/contact"
className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
style={{ color: COLORS.primary }} style={{ color: COLORS.primary }}
> >
@ -511,7 +511,7 @@ export default function ProductDevelopmentPage() {
{/* 10. Call to Action (CTA) Section */} {/* 10. Call to Action (CTA) Section */}
<section <section
className="py-16 md:py-24 bg-gold-500 text-gray-900" className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">
@ -525,13 +525,13 @@ export default function ProductDevelopmentPage() {
</p> </p>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="/contact?subject=Product Development Inquiry" // Pre-fill subject href="/contact" // Pre-fill subject
className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300" className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300"
> >
Request a Consultation Request a Consultation
</Link> </Link>
<Link <Link
href="#contact" // Link to contact section below href="/contact" // Link to contact section below
className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300" className="inline-block bg-transparent border-2 border-gray-800 text-gray-800 font-bold py-3 px-8 rounded-md hover:bg-gray-800 hover:text-white transition-colors duration-300"
> >
Contact Us Contact Us
@ -541,7 +541,7 @@ export default function ProductDevelopmentPage() {
</section> </section>
{/* 11. Contact Information Section */} {/* 11. Contact Information Section */}
<section {/* <section
id="contact" id="contact"
className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800" className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
> >
@ -556,7 +556,7 @@ export default function ProductDevelopmentPage() {
</p> </p>
</div> </div>
<div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start"> <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
{/* Contact Details */}
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<FaPhone <FaPhone
@ -601,7 +601,7 @@ export default function ProductDevelopmentPage() {
</Link> </Link>
</div> </div>
{/* Contact Form */}
<div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md"> <div className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4"> <h3 className="text-xl font-semibold font-poppins text-gray-900 dark:text-white mb-4">
Send Us Your Inquiry Send Us Your Inquiry
@ -610,7 +610,9 @@ export default function ProductDevelopmentPage() {
</div> </div>
</div> </div>
</div> </div>
</section> </section> */}
</div> </div>
); );
} }

4
app/(website)/services/resource-augmentation/page.tsx
View File

@ -390,7 +390,7 @@ export default function ResourceAugmentationPage() {
<div className="flex flex-col sm:flex-row justify-center items-center gap-4"> <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<Link <Link
href="#service-models" // Link to the service models section href="#service-models" // Link to the service models section
className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300" className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
Explore Our Models <FaArrowRight className="ml-2" /> Explore Our Models <FaArrowRight className="ml-2" />
@ -807,7 +807,7 @@ export default function ResourceAugmentationPage() {
{/* 10. Call to Action (CTA) Section */} {/* 10. Call to Action (CTA) Section */}
<section <section
className="py-16 md:py-24 bg-gold-500 text-gray-900" className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900"
style={{ backgroundColor: COLORS.primary }} style={{ backgroundColor: COLORS.primary }}
> >
<div className="container mx-auto px-6 text-center"> <div className="container mx-auto px-6 text-center">

2
app/(website)/tech-talk/page.tsx
View File

@ -50,7 +50,7 @@ const TechTalkPage = async () => {
</p> </p>
</div> </div>
{/* Blog Post Grid */} {/* Blog Post Grid */}
{posts.length > 0 ? ( {false && posts.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
{posts.map((post: Post) => ( {posts.map((post: Post) => (
<BlogPostCard <BlogPostCard

85
components/Footer.tsx
View File

@ -69,7 +69,7 @@ const Footer = () => {
</li> </li>
<li> <li>
<Link <Link
href="/services" href="/services/resource-augmentation"
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors" className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
> >
Services Services
@ -77,20 +77,20 @@ const Footer = () => {
</li> </li>
<li> <li>
<Link <Link
href="/products" href="/obse"
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors" className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
> >
Products Products
</Link> </Link>
</li> </li>
<li> {/* <li>
<Link <Link
href="/join-us" href="/join-us"
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors" className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
> >
Join Our Team Join Our Team
</Link> </Link>
</li> </li> */}
<li> <li>
<Link <Link
href="/contact" href="/contact"
@ -106,16 +106,16 @@ const Footer = () => {
<div> <div>
<h5 className="text-lg font-semibold mb-4 text-primary">Contact</h5> <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"> <address className="text-sm text-[var(--oms-white)]/80 mb-2 not-italic">
Unit 10 B Centuria Park 265 Von Willich Avenue
<br /> <br />
265 Von Willich Avenue Die Hoewes, Centurion, 0159
<br /> <br />
Die Hoewes, Centurion, 0159 (Unit 10 B Centuria Park)
</address> </address>
<p className="text-sm text-[var(--oms-white)]/80 mb-2"> <p className="text-sm text-[var(--oms-white)]/80 mb-2">
Phone:{" "} Phone:{" "}
<a href="tel:+27120513282" className="hover:text-primary"> <a href="tel:+27684855721" className="hover:text-primary">
(012) 051 3282 +27 68 485 5721
</a> </a>
</p> </p>
<p className="text-sm text-[var(--oms-white)]/80 mb-2"> <p className="text-sm text-[var(--oms-white)]/80 mb-2">
@ -157,40 +157,39 @@ const Footer = () => {
</p> </p>
<form className="flex flex-col sm:flex-row gap-2"> <form className="flex flex-col sm:flex-row gap-2">
{/* Input needs dark background styles */} {/* Input needs dark background styles */}
<div className="relative"> <div className="relative max-w-md mx-auto w-full">
<input <input
type="email" type="email"
placeholder="Enter your email" placeholder="Enter your email"
aria-label="Email for newsletter" aria-label="Email for newsletter"
className=" className="
w-full w-full
pr-24 pr-24
px-4 py-2
px-4 py-2 rounded-lg
rounded-lg bg-[var(--dark-input)]
bg-[var(--dark-input)] border border-[var(--dark-border)]
border border-[var(--dark-border)] text-[var(--dark-foreground)]
text-[var(--dark-foreground)] placeholder:text-[var(--dark-muted-foreground)]
placeholder:text-[var(--dark-muted-foreground)] focus:outline-none focus:ring-2 focus:ring-ring
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)] "
"
/> />
<button <button
type="submit" type="submit"
className=" className="
absolute top-0 right-0 absolute top-0 right-0
h-full h-full
px-4 px-4
rounded-r-lg rounded-r-lg
bg-primary bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
text-primary-foreground text-primary-foreground
font-semibold font-semibold
hover:bg-opacity-90 hover:bg-opacity-90
transition-colors transition-colors
focus:outline-none focus:ring-2 focus:ring-ring focus:outline-none focus:ring-2 focus:ring-ring
focus:ring-offset-2 focus:ring-offset-[var(--oms-black)] focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
" "
> >
Subscribe Subscribe
</button> </button>
@ -217,18 +216,25 @@ const Footer = () => {
</p> </p>
<div className="flex space-x-4"> <div className="flex space-x-4">
{/* Links still hover to primary */} {/* Links still hover to primary */}
<Link
{/* <Link
href="/privacy-policy" href="/privacy-policy"
className="hover:text-primary transition-colors" className="hover:text-primary transition-colors"
> >
Privacy Policy Privacy Policy
</Link> </Link> */}
<Link <a
href="/paia-popia" 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" className="hover:text-primary transition-colors"
> >
PAIA & POPIA PAIA & POPIA
</Link> </a>
</div> </div>
</div> </div>
</div> </div>
@ -237,3 +243,4 @@ const Footer = () => {
}; };
export default Footer; export default Footer;
//Data-Privacy-Statement-for-Candidates

183
components/HeaderClient.tsx
View File

@ -13,8 +13,6 @@ import {
FiUsers, FiUsers,
FiCpu, FiCpu,
FiBox, FiBox,
FiFileText,
FiUserCheck,
} from "react-icons/fi"; } from "react-icons/fi";
import ThemeToggle from "./ThemeToggle"; import ThemeToggle from "./ThemeToggle";
@ -42,8 +40,7 @@ const HeaderClient = () => {
const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false); const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
const [productsDropdownOpen, setProductsDropdownOpen] = useState(false); const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false); //const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
const handleServicesMouseEnter = () => setServicesDropdownOpen(true); const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
const handleServicesMouseLeave = () => setServicesDropdownOpen(false); const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
@ -51,8 +48,8 @@ const HeaderClient = () => {
const handleProductsMouseEnter = () => setProductsDropdownOpen(true); const handleProductsMouseEnter = () => setProductsDropdownOpen(true);
const handleProductsMouseLeave = () => setProductsDropdownOpen(false); const handleProductsMouseLeave = () => setProductsDropdownOpen(false);
const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true); // const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false); // const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
const pathname = usePathname(); // Get current path const pathname = usePathname(); // Get current path
@ -151,8 +148,8 @@ const HeaderClient = () => {
<div className="hidden md:flex items-center space-x-4"> <div className="hidden md:flex items-center space-x-4">
<ThemeToggle /> <ThemeToggle />
<Link <Link
href="/request-demo" href="/contact"
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" className="flex items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
title="Request a Demo" title="Request a Demo"
> >
<FiClipboard className="w-4 h-4 mr-1.5" /> <FiClipboard className="w-4 h-4 mr-1.5" />
@ -180,7 +177,7 @@ const HeaderClient = () => {
</div> </div>
{/* Secondary Row w/ Mega Menus */} {/* Secondary Row w/ Mega Menus */}
<div className="bg-primary relative"> <div className="bg-[linear-gradient(to_right,#dec750,#f0de7e,#e1c44a)] relative">
<div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="hidden md:flex justify-between items-center h-12"> <div className="hidden md:flex justify-between items-center h-12">
{/* Wrap nav and link in a flex container */} {/* Wrap nav and link in a flex container */}
@ -319,80 +316,8 @@ const HeaderClient = () => {
</div> </div>
</div> </div>
{/* Join Our Team */} {/* Join Our Team */}
<div
className={`group ${
isActive("/join-us") ||
isActive("/vacancies") ||
isActive("/portal")
? "active"
: ""
}`} // Add active class to group (check all related paths)
onMouseEnter={handleJoinUsMouseEnter}
onMouseLeave={handleJoinUsMouseLeave}
>
<button
className={`${megaMenuTriggerClasses} ${
isActive("/join-us") ||
isActive("/vacancies") ||
isActive("/portal")
? "after:w-full"
: ""
}`}
>
{" "}
{/* Apply underline based on active state */}
Join Our Team
<FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
</button>
<div
className={`
absolute left-0 top-full w-full shadow-lg z-1000
bg-card border-x border-b border-border rounded-b-lg
opacity-0 invisible translate-y-[-10px]
${
joinUsDropdownOpen
? "opacity-100 visible 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} ${
isActive("/vacancies") ? "text-primary" : ""
}`}
>
{" "}
{/* Apply active class */}
<FiFileText className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Current Vacancies
</p>
</div>
</Link>
<Link
href="/portal"
className={`${megaMenuItemClasses} ${
isActive("/portal") ? "text-primary" : ""
}`}
>
{" "}
{/* Apply active class */}
<FiUserCheck className={megaMenuIconClasses} />
<div className={megaMenuTextWrapperClasses}>
<p className={megaMenuTitleClasses}>
Recruitment Portal
</p>
</div>
</Link>
</div>
</div>
</div>
</div>
{/* <div {/* <div
className={`group ${isActive("/offerings") ? "active" : ""}`} className={`group ${isActive("/offerings") ? "active" : ""}`}
onMouseEnter={handleOfferingsMouseEnter} onMouseEnter={handleOfferingsMouseEnter}
@ -467,11 +392,16 @@ const HeaderClient = () => {
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-1 text-foreground"> <nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-1 text-foreground">
<DropdownLink href="/" onClick={handleMobileLinkClick}> <DropdownLink href="/" onClick={handleMobileLinkClick}>
Home Home
</DropdownLink>
<DropdownLink href="/tech-talk" onClick={handleMobileLinkClick}>
Tech Talk
</DropdownLink> </DropdownLink>
<DropdownLink href="/about" onClick={handleMobileLinkClick}> <DropdownLink href="/about" onClick={handleMobileLinkClick}>
About Us About Us
</DropdownLink> </DropdownLink>
<DropdownLink href="/contact" onClick={handleMobileLinkClick}>
Contact Us
</DropdownLink>
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground"> <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
Services Services
</span> </span>
@ -495,7 +425,7 @@ const HeaderClient = () => {
OBSE OBSE
</DropdownLink> </DropdownLink>
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground"> {/* <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
Join Us Join Us
</span> </span>
<DropdownLink href="/vacancies" onClick={handleMobileLinkClick}> <DropdownLink href="/vacancies" onClick={handleMobileLinkClick}>
@ -503,11 +433,8 @@ const HeaderClient = () => {
</DropdownLink> </DropdownLink>
<DropdownLink href="/portal" onClick={handleMobileLinkClick}> <DropdownLink href="/portal" onClick={handleMobileLinkClick}>
Recruitment Portal Recruitment Portal
</DropdownLink> </DropdownLink> */}
<DropdownLink href="/contact" onClick={handleMobileLinkClick}>
Contact Us
</DropdownLink>
{/* {/*
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground"> <span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
Explore Our Offerings Explore Our Offerings
@ -518,9 +445,9 @@ const HeaderClient = () => {
<div className="pt-4"> <div className="pt-4">
<Link <Link
href="/request-demo" href="/contact"
onClick={handleMobileLinkClick} onClick={handleMobileLinkClick}
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" className="flex w-full justify-center items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"
title="Request a Demo" 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
@ -535,3 +462,77 @@ const HeaderClient = () => {
}; };
export default HeaderClient; export default HeaderClient;
// <div
// className={`group ${
// isActive("/join-us") ||
// isActive("/vacancies") ||
// isActive("/portal")
// ? "active"
// : ""
// }`} // Add active class to group (check all related paths)
// onMouseEnter={handleJoinUsMouseEnter}
// onMouseLeave={handleJoinUsMouseLeave}
// >
// <button
// className={`${megaMenuTriggerClasses} ${
// isActive("/join-us") ||
// isActive("/vacancies") ||
// isActive("/portal")
// ? "after:w-full"
// : ""
// }`}
// >
// {" "}
// {/* Apply underline based on active state */}
// Join Our Team
// <FiChevronDown className="w-4 h-4 ml-1.5 opacity-70 transition-transform duration-200" />
// </button>
// <div
// className={`
// absolute left-0 top-full w-full shadow-lg z-1000
// bg-card border-x border-b border-border rounded-b-lg
// opacity-0 invisible translate-y-[-10px]
// ${
// joinUsDropdownOpen
// ? "opacity-100 visible 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} ${
// isActive("/vacancies") ? "text-primary" : ""
// }`}
// >
// {" "}
// {/* Apply active class */}
// <FiFileText className={megaMenuIconClasses} />
// <div className={megaMenuTextWrapperClasses}>
// <p className={megaMenuTitleClasses}>
// Current Vacancies
// </p>
// </div>
// </Link>
// <Link
// href="/portal"
// className={`${megaMenuItemClasses} ${
// isActive("/portal") ? "text-primary" : ""
// }`}
// >
// {" "}
// {/* Apply active class */}
// <FiUserCheck className={megaMenuIconClasses} />
// <div className={megaMenuTextWrapperClasses}>
// <p className={megaMenuTitleClasses}>
// Recruitment Portal
// </p>
// </div>
// </Link>
// </div>
// </div>
// </div>
// </div>

8
components/ui/Button.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
href?: string; href?: string;
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"; // Added more variants variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "black";
size?: "sm" | "md" | "lg"; size?: "sm" | "md" | "lg";
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
@ -24,13 +24,17 @@ const Button: React.FC<ButtonProps> = ({
// Variant styles using semantic vars (Tailwind classes generated via @theme) // Variant styles using semantic vars (Tailwind classes generated via @theme)
const variantStyles = { const variantStyles = {
primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary //primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
primary: "bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
outline: outline:
"border border-border bg-transparent hover:bg-accent hover:text-accent-foreground", "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: "hover:bg-accent hover:text-accent-foreground",
destructive: destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90", "bg-destructive text-destructive-foreground hover:bg-destructive/90",
//linear-gradient(to right, #ead566, #e0be45) created using Tailwind's gradient utilities
//i want that variant
black:"inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300 font-poppins",
}; };
const sizeStyles = { const sizeStyles = {

BIN
public/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf Normal file
View File

Binary file not shown.

BIN
public/Privacy-Policy/Recruitment-Privacy-Policy.pdf Normal file
View File

Binary file not shown.