264 lines
14 KiB
TypeScript
264 lines
14 KiB
TypeScript
import { ArrowUp, Facebook, X, Linkedin, Instagram } from "lucide-react";
|
|
import { navigateTo } from './Router';
|
|
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
|
|
|
|
export function FooterNew() {
|
|
return (
|
|
<footer
|
|
className="relative py-16"
|
|
style={{
|
|
backgroundColor: 'var(--color-brand-primary)',
|
|
color: 'white'
|
|
}}
|
|
>
|
|
{/* Main Footer Content */}
|
|
<div className="max-w-7xl mx-auto section-margin-x">
|
|
<div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-12 lg:gap-16">
|
|
|
|
{/* Logo and Quick Links Column */}
|
|
<div className="lg:flex-shrink-0 lg:max-w-md">
|
|
{/* Logo */}
|
|
<div className="flex items-center mb-8">
|
|
<img
|
|
src={klcLogo}
|
|
alt="Kautilya Leadership Centre"
|
|
className="h-16 w-auto object-contain"
|
|
style={{ filter: 'brightness(0) invert(1)' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Quick Links Section */}
|
|
<div className="mb-8">
|
|
<h3 className="text-subhead-white mb-6 text-[16px]">
|
|
Quicklinks
|
|
</h3>
|
|
|
|
{/* Navigation Links */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-8">
|
|
<button
|
|
onClick={() => navigateTo('/')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Home
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/learning/webcast')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Webcast
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/about-us')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
About Us
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/learning/articles')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Blogs
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/services')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Services
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/faq')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
FAQs
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/learning-facility')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Learning facility
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/learning-online')}
|
|
className="block text-small-white transition-all duration-300 text-left"
|
|
style={{
|
|
color: 'white',
|
|
opacity: 0.5
|
|
}}
|
|
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
|
|
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.5'}
|
|
>
|
|
Online courses
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* DISCOVER LEADERSHIP Column */}
|
|
<div className="lg:flex-shrink-0 lg:max-w-3xl flex flex-col h-full">
|
|
{/* Discover Leadership Header */}
|
|
<h2 className="text-h3-white mb-6 text-[32px] text-[24px]">
|
|
DISCOVER LEADERSHIP
|
|
</h2>
|
|
|
|
{/* Company Description */}
|
|
<p
|
|
className="text-small-white leading-relaxed mb-6"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
>
|
|
Kautilya Leadership Centre is dedicated to building a world-class organisation, in thought and practice of leadership. We help people gain insights into their leadership orientations and enable them on a journey towards leadership development. This online platform allows a wide range of learning experiences, exposure to leadership thinking and concepts through online tools such as modules, webcasts of leaders, webinars, one-on-one consulting sessions.
|
|
</p>
|
|
|
|
<p
|
|
className="text-small-white leading-relaxed mb-6"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
>
|
|
Kautilya Leadership Centre also offers access to Kautilya Leadership Services, which is a learning space developed to discover, deliberate, reflect on one's capabilities and developments. This learning centre built over 2 acres is equipped with world-class facilities to help ease learning and development.
|
|
</p>
|
|
|
|
{/* Learning Journey Text */}
|
|
<div className="mb-8">
|
|
<p
|
|
className="text-small-white"
|
|
style={{ color: 'rgba(255, 255, 255, 0.75)' }}
|
|
>
|
|
Become Aware | Gain Insights | Discover Leadership
|
|
</p>
|
|
</div>
|
|
|
|
{/* Back To Top Button - Positioned to Bottom Right */}
|
|
<div className="flex-1 flex justify-end items-end">
|
|
<button
|
|
onClick={() => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}}
|
|
className="group flex items-center gap-3 px-6 py-3 rounded-lg transition-all duration-300"
|
|
style={{
|
|
backgroundColor: 'var(--color-brand-accent)',
|
|
color: 'var(--color-brand-black)'
|
|
}}
|
|
aria-label="Back to top"
|
|
>
|
|
<ArrowUp className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-1" />
|
|
<span className="font-semibold">BACK TO TOP</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Footer */}
|
|
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center space-y-6 lg:space-y-0 mt-16 pt-8"
|
|
style={{ borderTop: '1px solid rgba(255, 255, 255, 0.2)' }}>
|
|
|
|
{/* Social Media Icons - Moved from left column */}
|
|
<div className="flex space-x-4">
|
|
{[
|
|
{ icon: X, label: 'X' },
|
|
{ icon: Facebook, label: 'Facebook' },
|
|
{ icon: Linkedin, label: 'LinkedIn' },
|
|
{ icon: Instagram, label: 'Instagram' }
|
|
].map(({ icon: Icon, label }) => (
|
|
<a
|
|
key={label}
|
|
href="#"
|
|
className="w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 group"
|
|
style={{ backgroundColor: 'rgba(192, 192, 192, 0.1)' }}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'var(--color-brand-accent)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.backgroundColor = 'rgba(192, 192, 192, 0.1)';
|
|
}}
|
|
aria-label={label}
|
|
>
|
|
<Icon
|
|
className="w-4 h-4 transition-colors duration-300"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.color = 'var(--color-brand-black)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.color = 'rgba(255, 255, 255, 0.85)';
|
|
}}
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Copyright - Centered */}
|
|
<div className="flex-1 flex justify-center lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2">
|
|
<p
|
|
className="text-body-white text-center"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
>
|
|
Copyright 2025 Kautilya Leadership Centre
|
|
</p>
|
|
</div>
|
|
|
|
{/* Legal Links */}
|
|
<div className="flex flex-col lg:flex-row lg:items-center space-y-2 lg:space-y-0 lg:space-x-8">
|
|
<button
|
|
onClick={() => navigateTo('/privacy-policy')}
|
|
className="text-body-white transition-colors duration-300 hover:text-yellow-300 text-left cursor-pointer"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
>
|
|
Privacy and Cookie Policy
|
|
</button>
|
|
<button
|
|
onClick={() => navigateTo('/term-condition')}
|
|
className="text-body-white transition-colors duration-300 cursor-pointer text-left hover:text-yellow-300"
|
|
style={{ color: 'rgba(255, 255, 255, 0.85)' }}
|
|
>
|
|
Terms of Service
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
} |