mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 18:58:10 +00:00
Merge branch 'dev' of https://github.com/OwethuManagedServices/oms-website-nextjs into dev
This commit is contained in:
@ -17,7 +17,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
// 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 */}
|
||||
<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>{" "}
|
||||
{/* Slightly less emphasis */}
|
||||
{/* 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 */}
|
||||
{/* OR custom class: className="bg-background text-foreground hover:bg-background/90" */}
|
||||
{buttonText}
|
||||
|
||||
@ -22,7 +22,7 @@ const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
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)
|
||||
}) => {
|
||||
// Need at least one client to render the marquee
|
||||
|
||||
@ -16,15 +16,15 @@ const HeroSection: React.FC<HeroSectionProps> = ({
|
||||
title,
|
||||
subtitle,
|
||||
buttonText,
|
||||
buttonHref,
|
||||
//buttonHref,
|
||||
imageUrl = "/hero-bg-2.jpg", // Default background image
|
||||
}) => {
|
||||
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 */}
|
||||
<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 */}
|
||||
{imageUrl && (
|
||||
@ -52,7 +52,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
|
||||
{subtitle}
|
||||
</p>
|
||||
<Button
|
||||
href={buttonHref}
|
||||
href="/obse"
|
||||
variant="primary" // Use primary variant defined in Button component
|
||||
size="lg"
|
||||
className="animate-fade-in-up animation-delay-600"
|
||||
|
||||
@ -21,6 +21,7 @@ const HeroSectionModern: React.FC<HeroSectionProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
// 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">
|
||||
{/* Background Image/Video Layer */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
|
||||
@ -511,7 +511,7 @@ export default function AboutUsPage() {
|
||||
*/}
|
||||
{/* Section 10: Commitment to Impact (Optional, but adds value) */}
|
||||
<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" }}
|
||||
>
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
|
||||
@ -130,10 +130,10 @@ export default function ContactPage() {
|
||||
Phone
|
||||
</h3>
|
||||
<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"
|
||||
>
|
||||
(012) 051 3282
|
||||
+27 68 485 5721
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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" /> */}
|
||||
<h1
|
||||
className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md leading-tight"
|
||||
|
||||
style={{ color: COLORS.primary }}
|
||||
>
|
||||
Revolutionize Your Lending and <br />Credit Processes with OBSE
|
||||
Revolutionize Your Lending and <br />
|
||||
Credit Processes with OBSE
|
||||
</h1>
|
||||
<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
|
||||
@ -254,13 +254,14 @@ export default function ObsePage() {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
||||
<Link
|
||||
href="#how-it-works" // 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"
|
||||
href="https://youtu.be/Sd3TnvoLtDA?si=UOeXScbosM5LZxbg" // Link to the "How it Works" section
|
||||
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 }}
|
||||
>
|
||||
<FaPlayCircle className="inline mr-2 text-red-400" /> See How It
|
||||
Works
|
||||
</Link>
|
||||
|
||||
{/* Optional Mini-CTA */}
|
||||
{/* <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
|
||||
@ -718,7 +719,7 @@ export default function ObsePage() {
|
||||
|
||||
{/* 12. Call to Action (CTA) 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 }}
|
||||
>
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
@ -732,13 +733,13 @@ export default function ObsePage() {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
||||
<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"
|
||||
>
|
||||
Request a Personalized Demo
|
||||
</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"
|
||||
>
|
||||
Contact Sales Team
|
||||
|
||||
@ -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."
|
||||
features={defaultObseFeatures}
|
||||
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**
|
||||
imageAlt="OBSE Product Interface Mockup"
|
||||
/>
|
||||
|
||||
@ -24,11 +24,11 @@ import {
|
||||
FaChartLine, // For Growth/Scalability
|
||||
FaTasks, // For QA
|
||||
FaComments, // For Feedback
|
||||
FaPhone,
|
||||
FaEnvelope,
|
||||
//FaPhone,
|
||||
//FaEnvelope,
|
||||
} from "react-icons/fa";
|
||||
import { COLORS } from "@/constants";
|
||||
import ContactForm from "@/components/ContactForm";
|
||||
//import ContactForm from "@/components/ContactForm";
|
||||
|
||||
// SEO 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">
|
||||
<Link
|
||||
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 }}
|
||||
>
|
||||
How We Deliver
|
||||
</Link>
|
||||
<Link
|
||||
href="#contact"
|
||||
href="/contact"
|
||||
className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300"
|
||||
style={{ color: COLORS.primary }}
|
||||
>
|
||||
@ -511,7 +511,7 @@ export default function ProductDevelopmentPage() {
|
||||
|
||||
{/* 10. Call to Action (CTA) 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 }}
|
||||
>
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
@ -525,13 +525,13 @@ export default function ProductDevelopmentPage() {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
||||
<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"
|
||||
>
|
||||
Request a Consultation
|
||||
</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"
|
||||
>
|
||||
Contact Us
|
||||
@ -541,7 +541,7 @@ export default function ProductDevelopmentPage() {
|
||||
</section>
|
||||
|
||||
{/* 11. Contact Information Section */}
|
||||
<section
|
||||
{/* <section
|
||||
id="contact"
|
||||
className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800"
|
||||
>
|
||||
@ -556,7 +556,7 @@ export default function ProductDevelopmentPage() {
|
||||
</p>
|
||||
</div>
|
||||
<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="flex items-center space-x-4">
|
||||
<FaPhone
|
||||
@ -601,7 +601,7 @@ export default function ProductDevelopmentPage() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
|
||||
<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">
|
||||
Send Us Your Inquiry
|
||||
@ -610,7 +610,9 @@ export default function ProductDevelopmentPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -390,7 +390,7 @@ export default function ResourceAugmentationPage() {
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
||||
<Link
|
||||
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 }}
|
||||
>
|
||||
Explore Our Models <FaArrowRight className="ml-2" />
|
||||
@ -807,7 +807,7 @@ export default function ResourceAugmentationPage() {
|
||||
|
||||
{/* 10. Call to Action (CTA) 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 }}
|
||||
>
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
|
||||
@ -50,7 +50,7 @@ const TechTalkPage = async () => {
|
||||
</p>
|
||||
</div>
|
||||
{/* 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">
|
||||
{posts.map((post: Post) => (
|
||||
<BlogPostCard
|
||||
|
||||
@ -69,7 +69,7 @@ const Footer = () => {
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/services"
|
||||
href="/services/resource-augmentation"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Services
|
||||
@ -77,20 +77,20 @@ const Footer = () => {
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/products"
|
||||
href="/obse"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* <li>
|
||||
<Link
|
||||
href="/join-us"
|
||||
className="text-sm text-[var(--oms-white)]/80 hover:text-primary transition-colors"
|
||||
>
|
||||
Join Our Team
|
||||
</Link>
|
||||
</li>
|
||||
</li> */}
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
@ -106,16 +106,16 @@ const Footer = () => {
|
||||
<div>
|
||||
<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">
|
||||
Unit 10 B Centuria Park
|
||||
<br />
|
||||
265 Von Willich Avenue
|
||||
<br />
|
||||
Die Hoewes, Centurion, 0159
|
||||
<br />
|
||||
(Unit 10 B Centuria Park)
|
||||
</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 href="tel:+27684855721" className="hover:text-primary">
|
||||
+27 68 485 5721
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-[var(--oms-white)]/80 mb-2">
|
||||
@ -157,7 +157,7 @@ const Footer = () => {
|
||||
</p>
|
||||
<form className="flex flex-col sm:flex-row gap-2">
|
||||
{/* Input needs dark background styles */}
|
||||
<div className="relative">
|
||||
<div className="relative max-w-md mx-auto w-full">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
@ -165,7 +165,6 @@ const Footer = () => {
|
||||
className="
|
||||
w-full
|
||||
pr-24
|
||||
|
||||
px-4 py-2
|
||||
rounded-lg
|
||||
bg-[var(--dark-input)]
|
||||
@ -183,7 +182,7 @@ const Footer = () => {
|
||||
h-full
|
||||
px-4
|
||||
rounded-r-lg
|
||||
bg-primary
|
||||
bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)]
|
||||
text-primary-foreground
|
||||
font-semibold
|
||||
hover:bg-opacity-90
|
||||
@ -217,18 +216,25 @@ const Footer = () => {
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
{/* Links still hover to primary */}
|
||||
<Link
|
||||
|
||||
{/* <Link
|
||||
href="/privacy-policy"
|
||||
className="hover:text-primary transition-colors"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link
|
||||
href="/paia-popia"
|
||||
</Link> */}
|
||||
<a
|
||||
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"
|
||||
>
|
||||
PAIA & POPIA
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -237,3 +243,4 @@ const Footer = () => {
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
//Data-Privacy-Statement-for-Candidates
|
||||
|
||||
@ -13,8 +13,6 @@ import {
|
||||
FiUsers,
|
||||
FiCpu,
|
||||
FiBox,
|
||||
FiFileText,
|
||||
FiUserCheck,
|
||||
} from "react-icons/fi";
|
||||
import ThemeToggle from "./ThemeToggle";
|
||||
|
||||
@ -42,8 +40,7 @@ const HeaderClient = () => {
|
||||
|
||||
const [servicesDropdownOpen, setServicesDropdownOpen] = useState(false);
|
||||
const [productsDropdownOpen, setProductsDropdownOpen] = useState(false);
|
||||
const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
|
||||
|
||||
//const [joinUsDropdownOpen, setJoinUsDropdownOpen] = useState(false);
|
||||
|
||||
const handleServicesMouseEnter = () => setServicesDropdownOpen(true);
|
||||
const handleServicesMouseLeave = () => setServicesDropdownOpen(false);
|
||||
@ -51,8 +48,8 @@ const HeaderClient = () => {
|
||||
const handleProductsMouseEnter = () => setProductsDropdownOpen(true);
|
||||
const handleProductsMouseLeave = () => setProductsDropdownOpen(false);
|
||||
|
||||
const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
|
||||
const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
|
||||
// const handleJoinUsMouseEnter = () => setJoinUsDropdownOpen(true);
|
||||
// const handleJoinUsMouseLeave = () => setJoinUsDropdownOpen(false);
|
||||
|
||||
const pathname = usePathname(); // Get current path
|
||||
|
||||
@ -151,8 +148,8 @@ const HeaderClient = () => {
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<ThemeToggle />
|
||||
<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"
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
<FiClipboard className="w-4 h-4 mr-1.5" />
|
||||
@ -180,7 +177,7 @@ const HeaderClient = () => {
|
||||
</div>
|
||||
|
||||
{/* 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="hidden md:flex justify-between items-center h-12">
|
||||
{/* Wrap nav and link in a flex container */}
|
||||
@ -319,80 +316,8 @@ const HeaderClient = () => {
|
||||
</div>
|
||||
</div>
|
||||
{/* 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
|
||||
className={`group ${isActive("/offerings") ? "active" : ""}`}
|
||||
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">
|
||||
<DropdownLink href="/" onClick={handleMobileLinkClick}>
|
||||
Home
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/tech-talk" onClick={handleMobileLinkClick}>
|
||||
Tech Talk
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/about" onClick={handleMobileLinkClick}>
|
||||
About Us
|
||||
</DropdownLink>
|
||||
|
||||
<DropdownLink href="/contact" onClick={handleMobileLinkClick}>
|
||||
Contact Us
|
||||
</DropdownLink>
|
||||
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
|
||||
Services
|
||||
</span>
|
||||
@ -495,7 +425,7 @@ const HeaderClient = () => {
|
||||
OBSE
|
||||
</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
|
||||
</span>
|
||||
<DropdownLink href="/vacancies" onClick={handleMobileLinkClick}>
|
||||
@ -503,11 +433,8 @@ const HeaderClient = () => {
|
||||
</DropdownLink>
|
||||
<DropdownLink href="/portal" onClick={handleMobileLinkClick}>
|
||||
Recruitment Portal
|
||||
</DropdownLink>
|
||||
</DropdownLink> */}
|
||||
|
||||
<DropdownLink href="/contact" onClick={handleMobileLinkClick}>
|
||||
Contact Us
|
||||
</DropdownLink>
|
||||
{/*
|
||||
<span className="pt-3 pb-1 text-xs uppercase text-muted-foreground">
|
||||
Explore Our Offerings
|
||||
@ -518,9 +445,9 @@ const HeaderClient = () => {
|
||||
|
||||
<div className="pt-4">
|
||||
<Link
|
||||
href="/request-demo"
|
||||
href="/contact"
|
||||
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"
|
||||
>
|
||||
<FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
|
||||
@ -535,3 +462,77 @@ const 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>
|
||||
@ -4,7 +4,7 @@ import Link from "next/link";
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
href?: string;
|
||||
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"; // Added more variants
|
||||
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "black";
|
||||
size?: "sm" | "md" | "lg";
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
@ -24,13 +24,17 @@ const Button: React.FC<ButtonProps> = ({
|
||||
|
||||
// Variant styles using semantic vars (Tailwind classes generated via @theme)
|
||||
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",
|
||||
outline:
|
||||
"border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
destructive:
|
||||
"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 = {
|
||||
|
||||
BIN
public/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf
Normal file
BIN
public/Privacy-Policy/Data-Privacy-Statement-for-Candidates.pdf
Normal file
Binary file not shown.
BIN
public/Privacy-Policy/Recruitment-Privacy-Policy.pdf
Normal file
BIN
public/Privacy-Policy/Recruitment-Privacy-Policy.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user