changes and scroll top

This commit is contained in:
priyanshuvish
2025-09-05 15:06:26 +05:30
parent a4251d8481
commit cff8173987
14 changed files with 2102 additions and 237 deletions

View File

@@ -35,6 +35,9 @@ import { Services } from './components/Services';
import { LearningFacilityNew } from './components/LearningFacilityNew';
import HomePageNew from './pages/HomePageNew';
import { FooterNew } from './components/FooterNew';
import { Privacy } from "./pages/Privacy";
import { TermsCondition } from "./pages/TermsCondition";
import { FAQ } from "./pages/FAQ";
// import EnrollPlaceholder from "./components/EnrollPlaceholder";
// import ForgotPasswordPlaceholder from "./components/ForgotPasswordPlaceholder";
// import DashboardPlaceholder from "./components/DashboardPlaceholder";
@@ -110,6 +113,10 @@ export default function App() {
{/* Learning Facility */}
<Route path="/learning-facility" element={<LearningFacilityNew />} />
{/* Privacy policy */}
<Route path="/privacy-policy" element={<Privacy />} />
<Route path="/term-condition" element={<TermsCondition />} />
<Route path="/faq" element={<FAQ />} />
{/* Placeholder Pages */}
{/* <Route path="/enroll" element={<EnrollPlaceholder />} />

View File

@@ -15,15 +15,11 @@ interface ContactProps {
export function Contact({ topic }: ContactProps) {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
phone: '',
company: '',
jobTitle: '',
subject: topic || '',
message: '',
source: ''
name: '',
mobileNumber: '',
emailId: '',
interestedIn: topic || '',
message: ''
});
const [isSubmitted, setIsSubmitted] = useState(false);
@@ -31,13 +27,13 @@ export function Contact({ topic }: ContactProps) {
useEffect(() => {
console.log('Contact component mounted with topic:', topic);
// Set default subject based on topic parameter
// Set default interested in based on topic parameter
if (topic) {
const subject = getTopicSubject(topic);
console.log('Setting form subject to:', subject);
const interestedIn = getTopicSubject(topic);
console.log('Setting form interestedIn to:', interestedIn);
setFormData(prev => ({
...prev,
subject: subject
interestedIn: interestedIn
}));
}
}, [topic]);
@@ -77,7 +73,7 @@ export function Contact({ topic }: ContactProps) {
if (isSubmitted) {
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
<div className="section-margin-x py-24">
<div className="max-w-2xl mx-auto text-center">
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
@@ -100,19 +96,19 @@ export function Contact({ topic }: ContactProps) {
}
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
{/* Hero Section with CTA Banner Styling */}
<section className="relative h-[600px] overflow-hidden">
{/* Background Image */}
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
{/* Hero Section with Google Map Background */}
<section className="relative h-[600px] overflow-hidden">
{/* Google Map Background */}
<div className="absolute inset-0">
<ImageWithFallback
src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
alt="Professional business meeting and consultation"
src="https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
alt="Google Maps showing office location and navigation"
className="w-full h-full object-cover"
/>
{/* 40% black overlay for better text readability */}
<div className="absolute inset-0 bg-black/70" />
{/* Dark overlay for better text readability */}
<div className="absolute inset-0 bg-black/60" />
</div>
{/* Content Container */}
@@ -120,22 +116,16 @@ export function Contact({ topic }: ContactProps) {
{/* Hero Content Block */}
<div className="text-center max-w-4xl mx-auto">
{/* Branded Tag */}
<BrandedTag text="Get In Touch" variant="white" />
<BrandedTag text="Contact Us" variant="white" />
{/* Main Headline */}
<h1 className="text-h1-white mb-6">
Ready to transform your leadership?
<span
className="italic"
style={{ color: 'var(--color-brand-accent)' }}
>
{" "}Let's connect{" "}
</span>
Reach us
</h1>
{/* Supporting Text */}
<p className="text-body-lg-white opacity-90 max-w-3xl mx-auto">
To start your development journey.
Get in touch with us to start your leadership development journey.
</p>
</div>
</div>
@@ -161,7 +151,7 @@ export function Contact({ topic }: ContactProps) {
{/* Contact Details */}
<div className="p-8 space-y-8">
{/* Office Location */}
{/* Corporate Office */}
<div className="flex items-start gap-4">
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
@@ -170,28 +160,31 @@ export function Contact({ topic }: ContactProps) {
<MapPin className="w-6 h-6" style={{ color: 'var(--color-brand-primary)' }} />
</div>
<div>
<h3 className="text-h3 mb-2">Office Location</h3>
<h3 className="text-h3 mb-2">Corporate Office</h3>
<p className="text-body text-muted">
123 Leadership Avenue<br />
Business District, New Delhi<br />
110001, India
Leadership Centre Pvt. Ltd.<br />
No. 107, 1st Floor<br />
T.V. Industrial Estate, Worli<br />
Mumbai 400030
</p>
</div>
</div>
{/* Phone */}
{/* Registered Office */}
<div className="flex items-start gap-4">
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
>
<Phone className="w-6 h-6" style={{ color: 'var(--color-brand-primary)' }} />
<MapPin className="w-6 h-6" style={{ color: 'var(--color-brand-primary)' }} />
</div>
<div>
<h3 className="text-h3 mb-2">Phone</h3>
<h3 className="text-h3 mb-2">Registered Office</h3>
<p className="text-body text-muted">
+91 11 4567 8900<br />
+91 98765 43210
Kautilya Leadership Services<br />
R.S. No. 5/6, Savaroli Kharpada Road<br />
Dhamani Taluk, Khalapur District<br />
Raigad 410202
</p>
</div>
</div>
@@ -207,26 +200,25 @@ export function Contact({ topic }: ContactProps) {
<div>
<h3 className="text-h3 mb-2">Email</h3>
<p className="text-body text-muted">
info@klc.edu<br />
leadership@klc.edu
connect@leadershipcentre.in<br />
connect@kautilyaservices.in
</p>
</div>
</div>
{/* Business Hours */}
{/* Phone */}
<div className="flex items-start gap-4">
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
>
<Clock className="w-6 h-6" style={{ color: 'var(--color-brand-primary)' }} />
<Phone className="w-6 h-6" style={{ color: 'var(--color-brand-primary)' }} />
</div>
<div>
<h3 className="text-h3 mb-2">Business Hours</h3>
<h3 className="text-h3 mb-2">Phone</h3>
<p className="text-body text-muted">
Monday - Friday: 9:00 AM - 6:00 PM<br />
Saturday: 10:00 AM - 4:00 PM<br />
Sunday: Closed
+91-22-2084 0097<br />
+91-8928738661
</p>
</div>
</div>
@@ -280,7 +272,7 @@ export function Contact({ topic }: ContactProps) {
>
<Send className="w-5 h-5" style={{ color: 'var(--color-brand-primary)' }} />
</div>
<h2 className="text-h3">Send us a Message</h2>
<h2 className="text-h3">Enquiry Form</h2>
</div>
<p className="text-body text-muted">
Fill out the form below and we'll get back to you within 24 hours.
@@ -290,184 +282,99 @@ export function Contact({ topic }: ContactProps) {
{/* Form Content */}
<div className="p-8">
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
First Name *
</label>
<Input
type="text"
required
value={formData.firstName}
onChange={(e) => handleInputChange('firstName', e.target.value)}
placeholder="John"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Last Name *
</label>
<Input
type="text"
required
value={formData.lastName}
onChange={(e) => handleInputChange('lastName', e.target.value)}
placeholder="Doe"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Email Address *
</label>
<Input
type="email"
required
value={formData.email}
onChange={(e) => handleInputChange('email', e.target.value)}
placeholder="john.doe@company.com"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Phone Number
</label>
<Input
type="tel"
value={formData.phone}
onChange={(e) => handleInputChange('phone', e.target.value)}
placeholder="+91 98765 43210"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Company/Organization
</label>
<Input
type="text"
value={formData.company}
onChange={(e) => handleInputChange('company', e.target.value)}
placeholder="Company Name"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Job Title
</label>
<Input
type="text"
value={formData.jobTitle}
onChange={(e) => handleInputChange('jobTitle', e.target.value)}
placeholder="CEO, HR Director, etc."
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Subject/Interest Area *
</label>
<Select
value={formData.subject}
onValueChange={(value) => handleInputChange('subject', value)}
>
<SelectTrigger
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
>
<SelectValue placeholder="Select a subject" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Leadership Pipeline Development">Leadership Pipeline Development</SelectItem>
<SelectItem value="Executive Coaching">Executive Coaching</SelectItem>
<SelectItem value="Management Development">Management Development</SelectItem>
<SelectItem value="Culture Competence">Culture Competence</SelectItem>
<SelectItem value="Consulting Services">Consulting Services</SelectItem>
<SelectItem value="Learning Facility">Learning Facility Tour</SelectItem>
<SelectItem value="Online Courses">Online Learning Programs</SelectItem>
<SelectItem value="General Inquiry">General Inquiry</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
How did you hear about us?
</label>
<Select
value={formData.source}
onValueChange={(value) => handleInputChange('source', value)}
>
<SelectTrigger
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Website">Website</SelectItem>
<SelectItem value="Google Search">Google Search</SelectItem>
<SelectItem value="Social Media">Social Media</SelectItem>
<SelectItem value="Referral">Referral</SelectItem>
<SelectItem value="Event/Conference">Event/Conference</SelectItem>
<SelectItem value="LinkedIn">LinkedIn</SelectItem>
<SelectItem value="Email Marketing">Email Marketing</SelectItem>
<SelectItem value="Other">Other</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Name *
</label>
<Input
type="text"
required
value={formData.name}
onChange={(e) => handleInputChange('name', e.target.value)}
placeholder="Enter your full name"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Message *
Mobile Number *
</label>
<Input
type="tel"
required
value={formData.mobileNumber}
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
placeholder="+91 98765 43210"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Email Id *
</label>
<Input
type="email"
required
value={formData.emailId}
onChange={(e) => handleInputChange('emailId', e.target.value)}
placeholder="example@company.com"
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
/>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Interested In *
</label>
<Select
value={formData.interestedIn}
onValueChange={(value: string) => handleInputChange('interestedIn', value)}
>
<SelectTrigger
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
style={{
fontFamily: 'var(--font-family-base)',
fontSize: 'var(--font-body)'
}}
>
<SelectValue placeholder="Select your area of interest" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Leadership Development">Leadership Development</SelectItem>
<SelectItem value="Executive Coaching">Executive Coaching</SelectItem>
<SelectItem value="Management Development">Management Development</SelectItem>
<SelectItem value="Culture Competence">Culture Competence</SelectItem>
<SelectItem value="Consulting Services">Consulting Services</SelectItem>
<SelectItem value="Learning Facility">Learning Facility</SelectItem>
<SelectItem value="Online Courses">Online Courses</SelectItem>
<SelectItem value="General Inquiry">General Inquiry</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<label className="text-body font-medium mb-3 block" style={{ color: 'var(--color-black)' }}>
Enter Message *
</label>
<Textarea
required
value={formData.message}
onChange={(e) => handleInputChange('message', e.target.value)}
placeholder="Tell us about your leadership development needs, goals, or any specific questions you have..."
placeholder="Please enter your message or inquiry..."
rows={6}
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 resize-none"
style={{
@@ -486,7 +393,6 @@ export function Contact({ topic }: ContactProps) {
text={isSubmitting ? "Sending Message..." : "Send Message"}
onClick={() => {}}
ariaLabel="Send contact message"
disabled={isSubmitting}
className="w-full sm:w-auto"
/>
</div>

View File

@@ -60,7 +60,7 @@ export function FooterNew() {
Webcast
</button>
<button
onClick={() => navigateTo('/about')}
onClick={() => navigateTo('/about-us')}
className="block text-small-white transition-all duration-300 text-left"
style={{
color: 'white',
@@ -108,7 +108,7 @@ export function FooterNew() {
FAQs
</button>
<button
onClick={() => navigateTo('/services/learning-facility')}
onClick={() => navigateTo('/learning-facility')}
className="block text-small-white transition-all duration-300 text-left"
style={{
color: 'white',
@@ -243,14 +243,14 @@ export function FooterNew() {
{/* 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')}
className="text-body-white transition-colors duration-300 hover:text-yellow-300 text-left"
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('/terms')}
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)' }}
>

View File

@@ -1127,7 +1127,7 @@ export function LearningFacilityNew() {
{/* Amenities Section */}
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
World-Class <span className="text-primary">Amenities</span>
@@ -1138,7 +1138,9 @@ export function LearningFacilityNew() {
</p>
</div>
<div className="relative overflow-hidden w-screen" aria-label="Amenities ticker" style={{ marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)' }}>
</div>
<div className="relative w-full">
<div className="relative overflow-hidden">
<div className="flex items-stretch gap-4 whitespace-nowrap scroll-left" style={{ animationDuration: '35s' }}>
{[0, 1].map((loop) => (
<div key={`amenities-loop-${loop}`} className="flex items-stretch gap-4">

View File

@@ -32,7 +32,8 @@ import {
Grid,
List,
X,
DollarSign
DollarSign,
ShoppingCart
} from 'lucide-react';
import { motion } from 'motion/react';
import { navigateTo } from './Router';
@@ -633,12 +634,12 @@ export function LearningOnline() {
<>
{/* Grid View */}
{viewMode === 'grid' && (
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6">
{currentCourses.map((course) => (
<div key={course.id} className="w-full">
<CourseCard
course={course}
className="h-[560px] flex flex-col w-full"
className="h-[600px] flex flex-col w-full"
onAddToCart={handleAddToCart}
/>
</div>
@@ -788,7 +789,7 @@ export function LearningOnline() {
)}
</div>
<Button
onClick={(e) => {
onClick={(e: React.MouseEvent) => {
e.stopPropagation();
const cartItem: CartItem = {
id: course.id,

View File

@@ -537,7 +537,7 @@ export function Navigation({ currentPage }: NavigationProps) {
) : (
<div className="hidden md:flex items-center">
<Button
onClick={() => navigate('/leadership-journey')}
onClick={() => navigate('/self-learner-signup')}
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 group"
style={{
fontFamily: 'var(--font-family-base)',

View File

@@ -0,0 +1,14 @@
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
};
export default ScrollToTop;

View File

@@ -520,14 +520,14 @@ export function SelfLearnerSignIn() {
Looking for corporate access?{' '}
</span>
<button
onClick={() => navigateTo('/corporate-login')}
onClick={() => navigateTo('/contact')}
className="text-blue-600 hover:text-blue-700 transition-colors font-medium"
style={{
fontSize: 'var(--font-small)',
fontFamily: 'var(--font-family-base)'
}}
>
Corporate Sign In
Contact Us
</button>
</div>
</div>

View File

@@ -394,11 +394,15 @@ export function SelfLearnerSignUp() {
}}
>
I agree to the{' '}
<span className="text-blue-600 hover:text-blue-700 cursor-pointer">
<span className="text-blue-600 hover:text-blue-700 cursor-pointer"
onClick={() => navigateTo('/term-condition')}
>
Terms of Service
</span>{' '}
and{' '}
<span className="text-blue-600 hover:text-blue-700 cursor-pointer">
<span className="text-blue-600 hover:text-blue-700 cursor-pointer"
onClick={() => navigateTo('/privacy-policy')}
>
Privacy Policy
</span>
</Label>

View File

@@ -14,7 +14,6 @@ import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { TestimonialsSection } from '../TestimonialsSection';
import { CTABannerSection } from '../CTABannerSection';
import Slider from "react-slick";
// import ImageWithFallback from "./ImageWithFallback"; // your custom component
import {

View File

@@ -2,9 +2,11 @@ import { createRoot } from "react-dom/client";
import App from "./App";
import "../src/styles/globals.css";
import { BrowserRouter } from "react-router-dom";
import ScrollToTop from "./components/ScrollToTop";
createRoot(document.getElementById("root")!).render(
<BrowserRouter>
<ScrollToTop />
<App />
</BrowserRouter>
);

222
src/pages/FAQ.tsx Normal file
View File

@@ -0,0 +1,222 @@
import React, { useState } from 'react';
import { Plus, Minus, HelpCircle, Mail } from 'lucide-react';
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
import { useNavigate } from 'react-router-dom';
interface FAQItemProps {
question: string;
answer: string;
isOpen: boolean;
onToggle: () => void;
}
const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle }) => {
return (
<div className="bg-white border border-gray-200 rounded-lg p-6 mb-4 transition-all duration-300 hover:shadow-md">
<button
onClick={onToggle}
className="w-full text-left flex items-center justify-between"
>
<h3 className="text-h4 pr-4" style={{ color: 'var(--color-black)' }}>
{question}
</h3>
<div className="flex-shrink-0 ml-4">
{isOpen ? (
<Minus
className="w-5 h-5 transition-transform duration-200"
style={{ color: 'var(--color-primary)' }}
/>
) : (
<Plus
className="w-5 h-5 transition-transform duration-200"
style={{ color: 'var(--color-primary)' }}
/>
)}
</div>
</button>
<div
className={`overflow-hidden transition-all duration-300 ease-out ${
isOpen ? 'max-h-96 opacity-100 mt-4' : 'max-h-0 opacity-0'
}`}
>
<p className="text-body-lg leading-relaxed" style={{ color: 'var(--color-black)' }}>
{answer}
</p>
</div>
</div>
);
};
export function FAQ() {
const [openItems, setOpenItems] = useState<number[]>([]);
const [activeCategory, setActiveCategory] = useState<string>('all');
const navigate = useNavigate();
const toggleItem = (index: number) => {
setOpenItems(prev =>
prev.includes(index)
? prev.filter(i => i !== index)
: [...prev, index]
);
};
const categories = [
{ id: 'all', label: 'All Questions' },
{ id: 'getting-started', label: 'Getting Started' },
{ id: 'membership', label: 'Members and Pricing' },
{ id: 'requests', label: 'Book Requests and Recommendations' },
{ id: 'account', label: 'Account & Technical Issues' }
];
const faqData = [
{
question: "How do I sign up for an account?",
answer: "Signing up is easy! Just download the app, click on 'Sign Up' and follow the prompts. You can use your email address, Google, or Facebook to create an account.",
category: 'getting-started'
},
{
question: "What are the membership club packages?",
answer: "We offer subscription packages to our learners which allow you to avail of the different products/services available at a discounted rate.",
category: 'membership'
},
{
question: "Can I buy the products without purchasing the membership package?",
answer: "Yes. You can either buy individual products separately or avail of our subscription packages to get attractive discounts.",
category: 'membership'
},
{
question: "Can I change my subscription plan mid-way?",
answer: "Yes, you can change your subscription to opt for a higher package. You would be required to pay a differential amount.",
category: 'membership'
},
{
question: "What is auto-renewal?",
answer: "Each plan can be setup for auto-renewal. A transaction of Rs. 5 is charged for this by the payment vendor. You can discontinue the auto-renewal at any point.",
category: 'membership'
},
{
question: "How can I cancel or change my order?",
answer: "Just drop an email to connect@leadershipcentre.in with the reference number of your purchase order. Wherever applicable (in case we have not shipped it yet), we will cancel your order. Alternatively, you will have to send the details to us and we will offer you a refund or exchange.",
category: 'requests'
},
{
question: "Does Leadership Centre provide cash on delivery?",
answer: "We do not offer cash on delivery (COD).",
category: 'requests'
},
{
question: "Do you accept returns?",
answer: "As our products / services are electronic in nature and access is granted soon as your payment is received/recorded, return of a product / service is not enabled. However, if you wish to cancel an order after effecting payment, you may do so prior to viewing / downloading / consuming the product / service purchased within 15 days (from the date of purchase and payment).",
category: 'requests'
},
{
question: "I have paid via netbanking/debit/credit card, how will I get refund?",
answer: "We shall be refunding the money back into the same account via which you have paid for your purchase on Leadership Centre.",
category: 'account'
},
{
question: "How do I reset my password?",
answer: "To reset your password, go to the login screen and click 'Forgot Password'. Enter your email address and we'll send you a secure link to reset your password.",
category: 'account'
}
];
const filteredFAQs = activeCategory === 'all'
? faqData
: faqData.filter(faq => faq.category === activeCategory);
return (
<div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen">
{/* Header Section */}
<section className="py-20 section-margin-x">
<div className="max-w-4xl mx-auto">
{/* Main Heading */}
<h1 className="text-h1 mb-6" style={{ color: 'var(--color-black)' }}>
FAQs
</h1>
{/* Description */}
<p className="text-body-lg mb-8 leading-relaxed" style={{ color: 'var(--color-gray-muted)' }}>
Everything you need to know about features, membership, and troubleshooting.
</p>
{/* Category Filter Tags */}
<div className="flex flex-wrap gap-3 mb-8">
{categories.map((category) => (
<button
key={category.id}
onClick={() => setActiveCategory(category.id)}
className={`px-4 py-2 rounded-full text-small font-medium transition-all duration-200 ${
activeCategory === category.id
? 'text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
style={{
backgroundColor: activeCategory === category.id ? 'var(--color-primary)' : undefined,
color: activeCategory === category.id ? 'white' : undefined
}}
>
{category.label}
</button>
))}
</div>
</div>
</section>
{/* FAQ Section */}
<section className="pb-20 section-margin-x">
<div className="max-w-4xl mx-auto">
<div className="space-y-0">
{filteredFAQs.map((faq, index) => (
<FAQItem
key={`${activeCategory}-${index}`}
question={faq.question}
answer={faq.answer}
isOpen={openItems.includes(index)}
onToggle={() => toggleItem(index)}
/>
))}
</div>
</div>
</section>
{/* Contact Support Section */}
<section className="py-16 section-margin-x">
<div className="max-w-4xl mx-auto">
<div className="bg-white border border-gray-200 rounded-xl p-8 text-center">
<div className="w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--color-primary)' }}>
<HelpCircle className="w-8 h-8" style={{ color: 'white' }} />
</div>
<h2 className="text-h3 mb-4" style={{ color: 'var(--color-black)' }}>
Still have questions?
</h2>
<p className="text-body-lg mb-8 max-w-2xl mx-auto" style={{ color: 'var(--color-gray-muted)' }}>
Can't find the answer you're looking for? Our support team is here to help you with any questions
about our leadership development programs and services.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<PrimaryCTAButton
text="Contact Support"
onClick={() => navigate('/contact')}
className="cta-text-black"
/>
<a
href="mailto:connect@leadershipcentre.in"
className="flex items-center gap-2 px-6 py-3 text-body-lg transition-colors duration-200 hover:bg-gray-50 rounded-lg"
style={{ color: 'var(--color-primary)' }}
>
<Mail className="w-5 h-5" />
connect@leadershipcentre.in
</a>
</div>
</div>
</div>
</section>
</div>
);
}

948
src/pages/Privacy.tsx Normal file
View File

@@ -0,0 +1,948 @@
import React, { useState, useEffect } from "react";
import {
ChevronRight,
Download,
ExternalLink,
} from "lucide-react";
interface TocItem {
id: string;
title: string;
level: number;
}
export function Privacy() {
const [activeSection, setActiveSection] =
useState<string>("introduction");
const [tocOpen, setTocOpen] = useState(false);
// Table of Contents items
const tocItems: TocItem[] = [
{
id: "introduction",
title: "Introduction",
level: 1,
},
{
id: "general-practice",
title: "General Practice",
level: 1,
},
{
id: "definitions",
title: "Definitions",
level: 1,
},
{
id: "collection-of-data",
title: "Collection of Data",
level: 1,
},
{
id: "usage-of-information",
title: "Usage of Information",
level: 1,
},
{
id: "sharing-of-data",
title: "Sharing of Data or Information",
level: 1,
},
{
id: "retention-storage",
title: "Period of Retention & Information Storage",
level: 1,
},
{
id: "user-rights",
title: "Rights of Users and Subscribers",
level: 1,
},
{
id: "jurisdiction",
title: "Jurisdiction",
level: 1,
},
{
id: "data-breach",
title: "Notifications of Data Breach",
level: 1,
},
{
id: "disputes",
title: "Disputes",
level: 1,
},
{
id: "amendment",
title: "Amendment to the Policy",
level: 1,
},
{
id: "data-protection-officer",
title: "Data Protection Officer",
level: 1,
},
];
// Scroll to section and update active state
const scrollToSection = (sectionId: string) => {
const element = document.getElementById(sectionId);
if (element) {
const offsetTop = element.offsetTop - 100; // Account for sticky nav
window.scrollTo({
top: offsetTop,
behavior: "smooth",
});
setActiveSection(sectionId);
}
};
// Update active section on scroll
useEffect(() => {
const handleScroll = () => {
const sections = tocItems
.map((item) => document.getElementById(item.id))
.filter(Boolean);
const scrollPosition = window.scrollY + 150;
for (let i = sections.length - 1; i >= 0; i--) {
const section = sections[i];
if (section && section.offsetTop <= scrollPosition) {
setActiveSection(section.id);
break;
}
}
};
window.addEventListener("scroll", handleScroll);
return () =>
window.removeEventListener("scroll", handleScroll);
}, []);
// Handle URL fragments
useEffect(() => {
const hash = window.location.hash.replace("#", "");
if (hash && tocItems.find((item) => item.id === hash)) {
setTimeout(() => scrollToSection(hash), 100);
}
}, []);
const lastUpdated = "2025-01-01";
const versionHash = "v25.01";
return (
<div style={{ backgroundColor: "#FFFFFF" }}>
{/* Hero Banner */}
<section
className="py-16 section-margin-x"
style={{ backgroundColor: "#FFFFFF" }}
>
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-small mb-6">
<span className="w-2 h-2 bg-blue-600 rounded-full"></span>
Privacy Document
<span className="ml-2 px-2 py-1 bg-blue-200 text-blue-900 rounded text-xs font-medium">
{versionHash}
</span>
</div>
<h1 className="text-h1 mb-6">Privacy & Cookie Policy</h1>
<p className="text-body-lg text-muted max-w-2xl mx-auto mb-4">
This website 'leadershipcentre.in' ('Website') is owned and operated by Kautilya Leadership Centre Pvt. Ltd ('Kautilya Leadership Centre'), a company incorporated and registered under the laws of the Republic of India.
</p>
<p className="text-small text-muted">
Last updated:{" "}
{new Date(lastUpdated).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
</div>
</section>
<div
className="section-margin-x"
style={{ backgroundColor: "#FFFFFF" }}
>
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-12 gap-8">
{/* Sticky Table of Contents */}
<div className="col-span-12 lg:col-span-3">
<div className="sticky top-24">
<nav
aria-label="On-page navigation"
className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"
>
<div className="flex items-center justify-between mb-4 lg:hidden">
<h3 className="text-h4">Contents</h3>
<button
onClick={() => setTocOpen(!tocOpen)}
className="p-2 hover:bg-gray-100 rounded-md transition-colors"
aria-expanded={tocOpen}
>
<ChevronRight
className={`w-4 h-4 transition-transform ${tocOpen ? "rotate-90" : ""}`}
/>
</button>
</div>
<div
className={`space-y-2 ${tocOpen ? "block" : "hidden lg:block"}`}
>
{tocItems.map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
className={`block w-full text-left p-2 rounded-md text-small transition-all duration-200 hover:bg-gray-100 ${
activeSection === item.id
? "bg-blue-50 text-primary border-l-2 border-primary pl-3"
: "text-muted hover:text-black"
}`}
>
{item.title}
</button>
))}
</div>
</nav>
</div>
</div>
{/* Main Content */}
<div className="col-span-12 lg:col-span-9">
<div
className="max-w-3xl prose prose-lg"
style={{ maxWidth: "720px" }}
>
{/* Introduction */}
<section
id="introduction"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("introduction")
}
>
<span className="inline-flex items-center gap-2">
Introduction
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body-lg">
Please read carefully the terms of use ('Terms of Use') for using the Electronic Platform.
In case, you ('User') do not agree to any of the terms or conditions, made by Kautilya
Leadership Centre for the Electronic Platform, kindly refrain from using the Electronic Platform.
</p>
<p className="text-body">
Pursuant to the Terms of Use, this privacy & cookie policy ('Policy') of Kautilya Leadership
Centre governs the access to and use of this Electronic Platform, and also sharing, storing
and processing of data and information in the course of availing any services and or Courses
offered by Kautilya Leadership Centre. By continuing to use the Electronic Platform, User
shall be deemed to have read, understood, and be bound by this Policy.
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg">
<p className="text-body text-blue-800">
<strong>Important:</strong> This policy governs how we collect, use, and protect your
personal information. Please ensure you understand your privacy rights and our data practices.
</p>
</div>
</div>
</section>
{/* General Practice */}
<section
id="general-practice"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("general-practice")
}
>
<span className="inline-flex items-center gap-2">
1. General Practice
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>1.1</strong> Kautilya Leadership Centre restricts the collection of data. The data collected and processed is strictly in the course of rendering of services and Courses offered by Kautilya Leadership Centre. This Policy intends to protect User's Information while putting User in control of Processing (as defined hereunder).
</p>
<p className="text-body">
<strong>1.2</strong> For the purposes of, where applicable, Kautilya Leadership Centre is the 'Controller' and is in compliance of the requirements of GDPR.
</p>
<div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-green-800">
<strong>Privacy First:</strong> We are committed to collecting only the data necessary to
provide our services and maintaining strict control over how your information is processed.
</p>
</div>
</div>
</section>
{/* Definitions */}
<section
id="definitions"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("definitions")
}
>
<span className="inline-flex items-center gap-2">
2. Definitions
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>2.1</strong> <strong>'Applicable Laws'</strong> means any statute, law, regulation, ordinance, rule, judgment as applicable, notification, rule of common law or equity, order, decree, bye-law, government approval, directive, recommendations, guideline, requirement or other governmental restriction, or any similar form of decision of, or determination by, or any interpretation or policy by, any authority having jurisdiction over the matter in question;
</p>
<p className="text-body">
<strong>2.2</strong> <strong>'Cookies'</strong> are small files which are stored on a User's device (computer, mobile, etcetera.). They are designed to hold a modest amount of data specific to a particular client and website, and can be accessed either by the web server or the client computer. For clarity, they store information such as cart details and login id and password, which makes it easier for the User to access and browse the Website;
</p>
<p className="text-body">
<strong>2.3</strong> <strong>'Course'</strong> refers to the leadership, managerial, and other functional courses including, but not limited to videos, textual materials, webinars, seminars, podcasts forming part of such course (whether made available online and/ or offline);
</p>
<p className="text-body">
<strong>2.4</strong> <strong>'Course User'</strong> shall mean a person nominated by the Subscriber to enrol for the Course or any person who enrols for the Course. In case the Subscriber is an individual, the Subscriber shall mean the Course User;
</p>
<p className="text-body">
<strong>2.5</strong> <strong>'Electronic Platform'</strong> means the Website, the Kautilya Leadership Centre mobile applications, television applications, our API's and other related services;
</p>
<p className="text-body">
<strong>2.6</strong> <strong>'Information'</strong> refers to data of a User and includes both Personal Data and Non-personal data;
</p>
<p className="text-body">
<strong>2.7</strong> <strong>'Non-personal data'</strong> means data which are not Personal Data;
</p>
<p className="text-body">
<strong>2.8</strong> <strong>'Personal Data'</strong> means any data relating to an identified or identifiable natural person; an identifiable natural person is one who can be identified, directly or indirectly, in particular by reference to an identifier such as a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person;
</p>
<p className="text-body">
<strong>2.9</strong> <strong>'Processing'</strong> or <strong>'Processed'</strong> means any operation or set of operations which is performed on Personal Data or on sets of Personal Data, whether or not by automated means, such as collection, recording, organisation, structuring, storage, adaptation or alteration, retrieval, consultation, use, disclosure by transmission, dissemination or otherwise making available, alignment or combination, restriction, erasure or destruction. Such operation is done by a 'Processor';
</p>
<p className="text-body">
<strong>2.10</strong> <strong>'Subscriber'</strong> shall mean a person who has registered as a Subscriber with the Kautilya Leadership Centre;
</p>
<p className="text-body">
<strong>2.11</strong> <strong>'User'</strong> means and includes, the individual using, accessing and browsing the Electronic Platform, whether or not they purchase the Courses; User shall include a Course User or Subscriber as the case may be;
</p>
<p className="text-body">
<strong>2.12</strong> <strong>'Website'</strong> refers to all web pages, any content such as textual, visual or aural (including modules, videos, including calls to action, text placement, images and other information) made available online and/ or offline through leadershipcentre.in and provided by Kautilya Leadership Centre;
</p>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-6 mt-6">
<h3 className="text-h3 mb-4 text-gray-800">Key Terms Summary</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p className="text-body font-semibold mb-2">Personal Data:</p>
<p className="text-small text-gray-600">Any information that can identify you as an individual</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Processing:</p>
<p className="text-small text-gray-600">Any operation performed on your personal data</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Cookies:</p>
<p className="text-small text-gray-600">Small files stored on your device to improve your experience</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Electronic Platform:</p>
<p className="text-small text-gray-600">Our website, apps, and related digital services</p>
</div>
</div>
</div>
</div>
</section>
{/* Collection of Data */}
<section
id="collection-of-data"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("collection-of-data")
}
>
<span className="inline-flex items-center gap-2">
3. Collection of Data
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>3.1</strong> Kautilya Leadership Centre collects Information through following means:
</p>
<div className="ml-4 space-y-3">
<p className="text-body">
<strong>a.</strong> Through automated means i.e. by using Cookies, web beacons, Google Analytics, clear gifs, pixels, and other similar technologies ('Data Collection Tools'); and
</p>
<p className="text-body">
<strong>b.</strong> Through non-automated means i.e. Information provided through self-declaratory forms, using psychometric tools etc. Such Information is usually required when the User creates an account with the Kautilya Leadership Centre pursuant to registration, feedback, accesses materials, video recordings or podcast etc.
</p>
</div>
<p className="text-body">
<strong>3.2 Purpose:</strong> The collection of Information is for the purpose of enhancing, improving and personalising the usage of the Electronic Platform and provision of services and Courses offered by Kautilya Leadership Centre. Non-personal data of the User shall be processed for research purposes. Further, the Data Collection Tools allow Kautilya Leadership Centre to detect abuse such as spam or malware, and provide customised services such as ad or search preferences and ease the process of signing up for services and Courses.
</p>
<p className="text-body">
<strong>3.3 Records:</strong>
</p>
<div className="ml-4 space-y-2">
<p className="text-body">
<strong>(i)</strong> Kautilya Leadership Centre also may keep record of communication with the Users.
</p>
<p className="text-body">
<strong>(ii)</strong> Reports and data collected from and of the users for the purpose comparison and building user profile related data and for research and other purposes.
</p>
</div>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Data Collection Purpose:</strong> We collect data solely to improve your learning
experience, provide better services, and ensure platform security. All collection is done
with your consent and for legitimate business purposes.
</p>
</div>
</div>
</section>
{/* Usage of Information */}
<section
id="usage-of-information"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("usage-of-information")
}
>
<span className="inline-flex items-center gap-2">
4. Usage of Information
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>4.1</strong> The Electronic Platform Processes Information collected only for the Purposes as set out in 3.2, in compliance with Applicable Laws. The Processing of Information is dependent on User's consent.
</p>
<p className="text-body">
<strong>4.2</strong> The Processing of Information is pursuant to the User's access to the Electronic Platform; It includes Processing User's Course request, delivering orders of the Subscriber, emailing the Users as per their preferences, sharing newsletters, email updates, notifying amendments to this Policy, Terms of Use, processing payment of the Subscriber, managing account preference, updating the Course content, participating in or viewing webinars/seminars or podcast, sharing Information with the expert consultant or Course instructor etc.
</p>
<p className="text-body">
<strong>4.3</strong> The Information collected may also be used to provide customised recommendations, to communicate with the User.
</p>
<p className="text-body">
<strong>4.4</strong> Non- personal data of the User shall be used for research.
</p>
<p className="text-body">
<strong>4.5</strong> Further, all Personal Data is Processed only in compliance with Applicable Laws and for the purposes mentioned in this Section 4 of this Policy.
</p>
<p className="text-body">
<strong>4.6</strong> Kautilya Leadership Centre may request User's consent before using Information for a purpose that does not fall under this Policy.
</p>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-6 mt-6">
<h3 className="text-h3 mb-4">How We Use Your Information</h3>
<ul className="list-disc pl-6 space-y-2 text-body">
<li>Process course enrollments and deliver educational content</li>
<li>Send personalized recommendations and updates</li>
<li>Manage your account preferences and settings</li>
<li>Process payments and handle billing</li>
<li>Communicate important policy changes</li>
<li>Facilitate interactions with instructors and experts</li>
<li>Conduct research to improve our services</li>
</ul>
</div>
</div>
</section>
{/* Sharing of Data or Information */}
<section
id="sharing-of-data"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("sharing-of-data")
}
>
<span className="inline-flex items-center gap-2">
5. Sharing of Data or Information
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>5.1 Consent:</strong> Kautilya Leadership Centre does not Process and or share the User's Information without User's consent to this Policy.
</p>
<p className="text-body">
<strong>5.2 For providing services:</strong> Information may be shared with personnel and affiliates of Kautilya Leadership Centre with appropriate confidentiality and adequate security measures for the purpose of rendering services. This includes, providing customer care support to the User.
</p>
<p className="text-body">
<strong>5.3 Third-party service providers or Processors:</strong> Kautilya Leadership Centre Processes User's Information with third parties in accordance with this Policy and individual agreements with third-party service providers only for the purpose of rendering of services and pursuant to the scope of the Courses offered by Kautilya Leadership Centre, in compliance with Applicable Laws. Such third parties may include consultants, cloud-storage service providers, banks, payment gateway systems, and content providers. Further, Kautilya Leadership Centre tries to ensure that such third-party service providers abide by this Policy and other Applicable Laws.
</p>
<p className="text-body">
<strong>5.4 For legal purposes:</strong> Kautilya Leadership Centre may share User's or Information, with the government or any institution if bound by the law to do so, and with any other entity which may endorse or sponsor the User's acccount (s) on the Electronic Platform.
</p>
<p className="text-body">
<strong>5.5 For processing payments:</strong> Kautilya Leadership Centre uses payment gateway services for online purchases (including refund) related transactions. The payment service provider obtains and process the required Personal and Non-personal data for payment related transactions by self-declaration of the User. Electronic Platform shall not be held liable for any Information, breach of any such Information provided to the payment service provider with regard to payment.
</p>
<p className="text-body">
<strong>5.6 In the event of Re-organisation:</strong> The Information of the Users shall be shared in case of merger, acquisition or reorganization of the Kautilya Leadership Centre. Such Processing shall be in accordance with this Policy and with knowledge (through notification) of the Users.
</p>
<p className="text-body">
<strong>5.7 Sharing of information by the User:</strong> The User may share details of the Course, Electronic Platform or services through links, emails, etcetera, such information, when shared publicly, allows User's content to become accessible through search engines.
</p>
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-yellow-800">
<strong>Third-Party Sharing:</strong> We only share your information with trusted partners
and service providers who help us deliver our services. All third parties are bound by
strict confidentiality and security requirements.
</p>
</div>
</div>
</section>
{/* Period of Retention and Information Storage */}
<section
id="retention-storage"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("retention-storage")
}
>
<span className="inline-flex items-center gap-2">
6. Period of Retention and Information Storage
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>6.1</strong> Kautilya Leadership Centre only processes or stores Information for the Purpose as long as it is commercially or legally required and for the duration:
</p>
<div className="ml-4 space-y-2">
<p className="text-body">
<strong>a.</strong> the User browses the Electronic Platform;
</p>
<p className="text-body">
<strong>b.</strong> the User maintains an account on the Electronic Platform; and
</p>
<p className="text-body">
<strong>c.</strong> required or permitted under Applicable Laws;
</p>
</div>
<p className="text-body">
such Processing shall be in accordance with this Policy and other Applicable Laws.
</p>
<p className="text-body">
<strong>6.2</strong> The User may withdraw its consent in continuing to provide Information, both Personal Data and Non-Personal Data. In case, the User withdraws its consent, Kautilya Leadership Centre shall erase or delete the Information from their storage and also notify any third party. To clarify, any Information Processed post withdrawal of consent shall only be for compliance with Applicable Laws.
</p>
<div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-green-800">
<strong>Your Control:</strong> You have the right to withdraw consent and request deletion
of your personal information at any time. We will honor such requests in accordance with
applicable laws and our legal obligations.
</p>
</div>
</div>
</section>
{/* Rights of Users and Subscribers */}
<section
id="user-rights"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("user-rights")
}
>
<span className="inline-flex items-center gap-2">
7. Rights of Users and Subscribers
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<h3 className="text-h3 mb-4">7.1 Rights of the User over information:</h3>
<div className="ml-4 space-y-3">
<p className="text-body">
<strong>(i)</strong> the User has the right to control and deny the access of the Data Collection Tools which can be controlled through web browser and account settings of the User;
</p>
<p className="text-body">
<strong>(ii)</strong> the User has the right to deny Information whenever such Information is required through the Electronic Platform for the purposes specified in Section 4 of this Policy, however, in such event, the Electronic Platform or Kautilya Leadership Centre may not be able to provide the requisite services or Course to the User;
</p>
<p className="text-body">
<strong>(iii)</strong> the User has the right to rectify or update the Information;
</p>
<p className="text-body">
<strong>(iv)</strong> the User has the right to complain to the respective protection authority in case of breach or issues regarding enforceability of User's rights, provided, such breach or issue has been first notified to Kautilya Leadership Centre and a time period of 90 days from the date of such notice of breach or issue to the Kautilya Leadership Centre has been given in order to rectify or provide an explanation for the same; and
</p>
<p className="text-body">
<strong>(v)</strong> the User also reserve the right to give feedback or complain to the data protection officer in accordance with clause 12 of this Policy.
</p>
</div>
<h3 className="text-h3 mb-4 mt-8">7.2 Specific Rights of European Union subjects</h3>
<p className="text-body">
In addition to the abovementioned, this Section additionally is applicable to the User who are residents of European Union. In accordance with GDPR, EU residents hold certain rights over the Information that they provide, as stated below:
</p>
<div className="ml-4 space-y-3">
<p className="text-body">
<strong>(i) Right of data portability</strong> the User has the right to receive details and copy of Information collected from the User in compliance with this Policy. Such data or Information shall be stored in a portable, structured, commonly used and machine-readable format. Upon receiving a written request to access such Information or data Kautilya Leadership Centre shall transfer such Information to the User or any other third-party in accordance with the request and Applicable Laws. Furthermore, Kautilya Leadership Centre is not responsible for the security of the Information, its transmission or its processing once received by the third party. Kautilya Leadership Centre reserves the right to not provide the requested Information if the same would be a breach of another User's rights;
</p>
<p className="text-body">
<strong>(ii) Right to restrict Processing</strong> the User has the right to restrict the processing of the Information provided by the User unless such Information has to be processed in accordance with any law; and
</p>
<p className="text-body">
<strong>(iii) Right to object</strong> the User may object to the processing of Information which is used for direct marketing purposes, unless Kautilya Leadership Centre legitimate grounds for the processing which overrides the interests, rights and freedoms of such User or for the establishment, exercise or defence of legal claims.
</p>
<p className="text-body">
<strong>(iv) Right to Erasure</strong> Pursuant to Section 6.2 of this Policy, the User may request Kautilya Leadership Centre to erase all the Information Processed by Kautilya Leadership Centre relating to the User by contacting the support service in accordance with Section 7.1(vi) above.
</p>
</div>
<h3 className="text-h3 mb-4 mt-8">7.3 Specific Right for USA and Canada citizens</h3>
<p className="text-body">
The User has the right to request access to the Information that the Electronic Platform collects and know whether such Information is being processed. However, Kautilya Leadership Centre retains the right to deny such request for access in cases where it may affect the right of any other Users or is exempted under any Applicable Law.
</p>
<p className="text-body">
<strong>7.4</strong> In order to claim or enforce the rights under the Sections 7.1 and 7.2, such User may be required to provide adequate and verifiable identity proof when called upon to do so.
</p>
<p className="text-body">
<strong>7.5</strong> In case any of the rights of a User, in compliance with Applicable Laws of respective jurisdiction, is not provided in this Policy, such User may contact Kautilya Leadership Centre's data protection officer in accordance with Section 12 of this Policy.
</p>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mt-6">
<h3 className="text-h3 mb-4 text-blue-800">Your Privacy Rights Summary</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p className="text-body font-semibold mb-2">Control & Deny Access:</p>
<p className="text-small text-blue-700">Manage cookies and data collection through browser settings</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Rectify & Update:</p>
<p className="text-small text-blue-700">Correct or update your personal information</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Data Portability (EU):</p>
<p className="text-small text-blue-700">Receive your data in a portable format</p>
</div>
<div>
<p className="text-body font-semibold mb-2">Right to Erasure:</p>
<p className="text-small text-blue-700">Request deletion of your personal information</p>
</div>
</div>
</div>
</div>
</section>
{/* Jurisdiction */}
<section
id="jurisdiction"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("jurisdiction")
}
>
<span className="inline-flex items-center gap-2">
8. Jurisdiction
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>8.1</strong> Any dispute regarding this Policy shall be subject to the exclusive jurisdiction of the courts at Mumbai, Maharashtra.
</p>
<p className="text-body">
<strong>8.2</strong> Subject to Section 10 and in compliance with Applicable Laws, the User, in case is a resident outside India, may be entitled certain rights to raise complaints with the respective data protection authority within their jurisdiction.
</p>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
<p className="text-body">
<strong>Exclusive Jurisdiction:</strong> Mumbai, Maharashtra, India
</p>
<p className="text-body mt-2">
Any disputes arising from this privacy policy shall be subject to the exclusive
jurisdiction of the courts in Mumbai, Maharashtra, India.
</p>
</div>
</div>
</section>
{/* Notifications of Data Breach */}
<section
id="data-breach"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("data-breach")
}
>
<span className="inline-flex items-center gap-2">
9. Notifications of Data Breach
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>9.1</strong> Although, adequate safety measures and compliance is exercised, in the unlikely event of breach of the Information provided by the User to Kautilya Leadership Centre, Kautilya Leadership Centre shall notify and the assist all such affected Users promptly and in compliance with Applicable Laws.
</p>
<p className="text-body">
<strong>9.2</strong> In case, a User learns of such a breach of Information, it may contact the data protection officer of Kautilya Leadership Centre and this in accordance with Section 12 of this Policy.
</p>
<div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-red-800">
<strong>Security Commitment:</strong> We implement robust security measures to protect your
data. In the unlikely event of a breach, we will notify affected users promptly and take
immediate action to secure your information.
</p>
</div>
</div>
</section>
{/* Disputes */}
<section
id="disputes"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("disputes")
}
>
<span className="inline-flex items-center gap-2">
10. Disputes
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>10.1</strong> In the event of any dispute in respect of or concerning or connected with the interpretation or implementation or arising out this Policy, including any question regarding their existence, validity or termination, the same shall be at the first instance be amicably settled through good faith negotiations between the Parties.
</p>
<p className="text-body">
<strong>10.2</strong> In case that a resolution of the dispute is not achieved within 30 (thirty) days from the date such dispute arises, as notified in writing by any party to the other party, then such dispute shall be referred to and finally resolved by arbitration by a sole arbitrator, administered by the Mumbai International Arbitration Centre ('MICA') in accordance with the Arbitration Rules of the Mumbai International Arbitration Centre ('MICA Rules') for the time being in force.
</p>
<p className="text-body">
<strong>10.3</strong> The award of the arbitration shall be final and binding on the Parties hereto and the seat and venue of arbitration shall be Mumbai, India. Language of the arbitration shall be in English.
</p>
<p className="text-body">
<strong>10.4</strong> The arbitrator shall give a reasoned decision or award, and shall allocate or appropriation cost, expenses and disbursement of the arbitration as the arbitrator may deem fair.
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Dispute Resolution:</strong> We prefer to resolve disputes through direct communication.
If formal procedures are needed, disputes will be resolved through arbitration in Mumbai, India.
</p>
</div>
</div>
</section>
{/* Amendment to the Policy */}
<section
id="amendment"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("amendment")
}
>
<span className="inline-flex items-center gap-2">
11. Amendment to the Policy
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>11.1</strong> Kautilya Leadership Centre reserves the right to change or revise the Policy and terms of this Policy at any time by posting any changes or a revised Policy on this Electronic Platform, without advance notice to the User.
</p>
<p className="text-body">
<strong>11.2</strong> Such amendment or the changed and or revised Policy will be effective immediately after it is posted on this Electronic Platform. Use of the Electronic Platform following the posting any such amendment or of a revised Policy will constitute the User's acceptance to any such changes or revisions.
</p>
<p className="text-body">
<strong>11.3</strong> Notwithstanding the above, such amendment shall be notified to the User in such manner as prescribed by law, if and when such requirement to notify the User is necessitated by law.
</p>
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-yellow-800">
<strong>Policy Updates:</strong> We may update this privacy policy from time to time.
Changes will be effective immediately upon posting. We encourage you to review this
policy periodically for any updates.
</p>
</div>
</div>
</section>
{/* Data Protection Officer */}
<section
id="data-protection-officer"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("data-protection-officer")
}
>
<span className="inline-flex items-center gap-2">
12. Data Protection Officer
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
In case of any concerns or issues in relation to this Policy or Electronic Platform, the User may contact Kautilya Leadership Centre's data protection officer can be contacted at connect@leadershipcentre.in
</p>
<div className="bg-green-50 border border-green-200 rounded-lg p-6">
<h3 className="text-h3 mb-4 text-green-800">Contact Our Data Protection Officer</h3>
<div className="space-y-2">
<p className="text-body text-green-800">
<strong>Email:</strong> <a href="mailto:connect@leadershipcentre.in" className="underline hover:text-green-900">connect@leadershipcentre.in</a>
</p>
<p className="text-body text-green-800">
<strong>Organization:</strong> Kautilya Leadership Centre Pvt. Ltd
</p>
<p className="text-body text-green-800">
<strong>Purpose:</strong> Privacy concerns, data protection queries, policy questions
</p>
</div>
</div>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Privacy Support:</strong> Our data protection officer is available to address your
privacy concerns, answer questions about this policy, and assist with exercising your
privacy rights.
</p>
</div>
</div>
</section>
{/* Important Notice */}
<section className="mb-12">
<div className="bg-gradient-to-r from-blue-50 to-green-50 border-2 border-primary rounded-lg p-8">
<h3 className="text-h3 mb-4 text-primary">
Privacy Compliance & Your Rights
</h3>
<p className="text-body mb-4">
This Privacy & Cookie Policy is effective as of the last updated date mentioned above.
By using our Electronic Platform, you acknowledge that you have read, understood, and agree
to be bound by this policy.
</p>
<p className="text-body text-muted">
For questions about your privacy rights, data processing, or this policy, please contact
our Data Protection Officer. We are committed to protecting your privacy and ensuring
compliance with all applicable data protection laws.
</p>
</div>
</section>
{/* Download Section */}
<section className="mb-12">
<div className="text-center bg-gray-50 border border-gray-200 rounded-lg p-8">
<h3 className="text-h3 mb-4">Download Privacy & Cookie Policy</h3>
<p className="text-body text-muted mb-6">
Save a copy of this privacy policy for your records
</p>
<button
onClick={() => window.print()}
className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
>
<Download className="w-4 h-4" />
Download PDF
</button>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,760 @@
import React, { useState, useEffect } from "react";
import {
ChevronRight,
Download,
ExternalLink,
} from "lucide-react";
interface TocItem {
id: string;
title: string;
level: number;
}
export function TermsCondition() {
const [activeSection, setActiveSection] =
useState<string>("introduction");
const [tocOpen, setTocOpen] = useState(false);
// Table of Contents items
const tocItems: TocItem[] = [
{
id: "introduction",
title: "Introduction",
level: 1,
},
{
id: "limits-of-use",
title: "Limits of Use",
level: 1,
},
{
id: "services-offered",
title: "Services Offered",
level: 1,
},
{
id: "disclaimer-warranties",
title: "Disclaimer of Warranties & Liability",
level: 1,
},
{
id: "privacy-policy",
title: "Privacy Policy",
level: 1,
},
{
id: "termination",
title: "Termination",
level: 1,
},
{
id: "intellectual-property",
title: "Intellectual Property Rights",
level: 1,
},
{
id: "third-party-links",
title: "Links to Third-Party",
level: 1,
},
{
id: "indemnity",
title: "Indemnity",
level: 1,
},
{
id: "amendment",
title: "Amendment",
level: 1,
},
{
id: "governing-law",
title: "Governing Laws & Jurisdiction",
level: 1,
},
{
id: "grievances",
title: "Grievances",
level: 1,
},
];
// Scroll to section and update active state
const scrollToSection = (sectionId: string) => {
const element = document.getElementById(sectionId);
if (element) {
const offsetTop = element.offsetTop - 100; // Account for sticky nav
window.scrollTo({
top: offsetTop,
behavior: "smooth",
});
setActiveSection(sectionId);
}
};
// Update active section on scroll
useEffect(() => {
const handleScroll = () => {
const sections = tocItems
.map((item) => document.getElementById(item.id))
.filter(Boolean);
const scrollPosition = window.scrollY + 150;
for (let i = sections.length - 1; i >= 0; i--) {
const section = sections[i];
if (section && section.offsetTop <= scrollPosition) {
setActiveSection(section.id);
break;
}
}
};
window.addEventListener("scroll", handleScroll);
return () =>
window.removeEventListener("scroll", handleScroll);
}, []);
// Handle URL fragments
useEffect(() => {
const hash = window.location.hash.replace("#", "");
if (hash && tocItems.find((item) => item.id === hash)) {
setTimeout(() => scrollToSection(hash), 100);
}
}, []);
const lastUpdated = "2025-01-01";
const versionHash = "v25.01";
return (
<div style={{ backgroundColor: "#FFFFFF" }}>
{/* Hero Banner */}
<section
className="py-16 section-margin-x"
style={{ backgroundColor: "#FFFFFF" }}
>
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-small mb-6">
<span className="w-2 h-2 bg-blue-600 rounded-full"></span>
Legal Document
<span className="ml-2 px-2 py-1 bg-blue-200 text-blue-900 rounded text-xs font-medium">
{versionHash}
</span>
</div>
<h1 className="text-h1 mb-6">Terms & Conditions</h1>
<p className="text-body-lg text-muted max-w-2xl mx-auto mb-4">
This website 'leadershipcentre.in' ('Website') is owned and operated by Kautilya Leadership Centre Pvt. Ltd ('Leadership Centre'), a company incorporated and registered under the laws of India.
</p>
<p className="text-small text-muted">
Last updated:{" "}
{new Date(lastUpdated).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</p>
</div>
</section>
<div
className="section-margin-x"
style={{ backgroundColor: "#FFFFFF" }}
>
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-12 gap-8">
{/* Sticky Table of Contents */}
<div className="col-span-12 lg:col-span-3">
<div className="sticky top-24">
<nav
aria-label="On-page navigation"
className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"
>
<div className="flex items-center justify-between mb-4 lg:hidden">
<h3 className="text-h4">Contents</h3>
<button
onClick={() => setTocOpen(!tocOpen)}
className="p-2 hover:bg-gray-100 rounded-md transition-colors"
aria-expanded={tocOpen}
>
<ChevronRight
className={`w-4 h-4 transition-transform ${tocOpen ? "rotate-90" : ""}`}
/>
</button>
</div>
<div
className={`space-y-2 ${tocOpen ? "block" : "hidden lg:block"}`}
>
{tocItems.map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
className={`block w-full text-left p-2 rounded-md text-small transition-all duration-200 hover:bg-gray-100 ${
activeSection === item.id
? "bg-blue-50 text-primary border-l-2 border-primary pl-3"
: "text-muted hover:text-black"
}`}
>
{item.title}
</button>
))}
</div>
</nav>
</div>
</div>
{/* Main Content */}
<div className="col-span-12 lg:col-span-9">
<div
className="max-w-3xl prose prose-lg"
style={{ maxWidth: "720px" }}
>
{/* Introduction */}
<section
id="introduction"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("introduction")
}
>
<span className="inline-flex items-center gap-2">
1. Introduction
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body-lg">
Please read carefully these terms of use ('Terms of Use') for using the Website.
In case, you ('User') do not agree to any of the terms or conditions, made by
Kautilya Leadership Centre for the Website, kindly refrain from using the Website.
</p>
<p className="text-body">
By continuing to use the Website, User shall be deemed to have agreed that User
is of legal age to enter into a binding contract, have read, consented, understood
and is bound to the Terms of Use hereunder.
</p>
<h3 className="text-h3 mb-4 mt-8">1.1 Parties</h3>
<p className="text-body">
The parties to the Terms of Use are Users of the Website and Kautilya Leadership Centre.
User and Kautilya Leadership Centre hereinafter may be individually referred to as
'Party' and collectively as 'Parties'.
</p>
<h3 className="text-h3 mb-4 mt-8">1.2 Applicability of Terms of Use</h3>
<p className="text-body">
The Terms of Use govern the Website's usage and states the rights and obligations
of the Parties arising thereof.
</p>
<h3 className="text-h3 mb-4 mt-8">1.3 Ownership of the Website and the content</h3>
<p className="text-body">
The Website is owned and controlled by Kautilya Leadership Centre subject to provisions
hereunder. All web pages, any content such as textual, visual or aural (including modules,
videos, including calls to action, text placement, images and other information) available
online and or offline shall be property of Kautilya Leadership Centre.
</p>
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
<p className="text-body text-yellow-800">
<strong>Important:</strong> These terms create a legally binding agreement
between you and Kautilya Leadership Centre. Please ensure you understand
your rights and obligations.
</p>
</div>
</div>
</section>
{/* Limits of Use */}
<section
id="limits-of-use"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("limits-of-use")
}
>
<span className="inline-flex items-center gap-2">
2. Limits of Use
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>2.1</strong> The User acknowledges that the User shall use the Website only for personal, non-commercial use.
</p>
<p className="text-body">
<strong>2.2</strong> The User shall use the website only for lawful purposes. User shall not use the website: in breach of any national or international law or regulation; in a fraudulent and unlawful manner; and to transmit, send or upload any material or data that contains any viruses, trojan horses, malware, worms, time-bombs, keystroke loggers, spyware, adware or any other harmful programs or computer code designed to adversely affect the operation of this website or any computer hardware or software.
</p>
<p className="text-body">
<strong>2.3</strong> The User shall not: copy, reproduce, duplicate or re-sell any part of the Website; charge others for the usage of the Website; and use or re-use any part of the Website in any way that may be illegally detrimental to the business and autonomy of Kautilya Leadership Centre, unless with the explicit written consent of the Kautilya Leadership Centre.
</p>
<h3 className="text-h3 mb-4 mt-8">Access to minors</h3>
<p className="text-body">
<strong>2.4.1</strong> For the purpose of this Terms of Use and the Privacy and Cookie Policy, a minor shall mean a natural person below the age of 18 (eighteen).
</p>
<p className="text-body">
<strong>2.4.2</strong> The Website may be accessed by minors for educational purposes only.
</p>
<p className="text-body">
<strong>2.4.3</strong> The parent or guardian of the minor shall provide their own details while creating an account with Kautilya Leadership Centre.
</p>
<p className="text-body">
<strong>2.4.4</strong> Kautilya Leadership Centre does not knowingly collect any data from minors. Upon knowledge that it holds Personal Data (Privacy and Cookie Policy) of a minor, Kautilya Leadership Centre shall erase the same. Parents or Guardians who believe that Kautilya Leadership Centre may have collected personal information of a minor shall inform Kautilya Leadership Centre.
</p>
<div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-red-800">
<strong>Warning:</strong> Violation of these terms may result in immediate
termination of your access to our services and potential legal action.
</p>
</div>
</div>
</section>
{/* Services Offered */}
<section
id="services-offered"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("services-offered")
}
>
<span className="inline-flex items-center gap-2">
3. Services Offered
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>3.1</strong> This Website is an information gateway to the learning programs ('Course') that Kautilya Leadership Centre extends to eligible Users ('Services'). Apart from providing Services, the Website also hosts the platform for the online payment for subscribing to or buying Course(s) from the Kautilya Leadership Centre for the User(s) who may subscribe for the Services offered by Kautilya Leadership Centre ('Subscriber').
</p>
<p className="text-body">
<strong>3.2</strong> The User(s) or the Subscriber(s) may interact with the agents or employees of Kautilya Leadership Centre using the 'Help' or 'Contact Us' sections on the Website. User(s) are solely responsible for their interactions with the consultants of the Website and any content that the User may share with them.
</p>
<p className="text-body">
<strong>3.3</strong> Kautilya Leadership Centre is not liable for any damage or harm resulting from any posts by or interactions between Users.
</p>
<p className="text-body">
<strong>3.4</strong> Kautilya Leadership Centre reserves the right, but has no obligation, to monitor interactions between the Website (including its consultants) and the Users.
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Note:</strong> All interactions and communications through our platform
are subject to monitoring for quality assurance and legal compliance purposes.
</p>
</div>
</div>
</section>
{/* Disclaimer of Warranties & Liability */}
<section
id="disclaimer-warranties"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("disclaimer-warranties")
}
>
<span className="inline-flex items-center gap-2">
4. Disclaimer of Warranties and Liability
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>4.1</strong> While Kautilya Leadership Centre has endeavoured to ensure that all the information on the Website is correct, Kautilya Leadership Centre neither warrants nor makes any representations regarding the quality, accuracy or completeness of any data, information, product, or website (whether any third-party website or this Website) or Service.
</p>
<p className="text-body">
<strong>4.2</strong> Kautilya Leadership Centre and its representatives, directors, employees, agents and affiliates shall not be liable for any loss:
</p>
<ul className="list-disc pl-6 space-y-2 text-body ml-4">
<li>(i) of revenue, income, any direct, special, indirect or consequential loss or damage incurred by the User in connection with the Website; and</li>
<li>(ii) in connection with the use, inability to use, or results of the use of the Website, any webpage or website linked to it and any materials posted on it, including, loss of income or revenue; loss of business; loss of profits or contracts; loss of anticipated savings; loss of data; loss of goodwill; wasted management or office time; and</li>
<li>(iii) of any other kind, however arising and whether caused by tort (including negligence), breach of contract or otherwise, even if foreseeable.</li>
</ul>
<p className="text-body">
<strong>4.3</strong> Kautilya Leadership Centre shall not be liable for any possible hacks (including the database), bugs, malware or faults in our system which may affect the Users, their computer hardware or software in any possible way.
</p>
<p className="text-body">
<strong>4.4</strong> The User agrees to be responsible for their own use of the Website and will use or access this Website in compliance with all applicable laws, regulations and rules of India including, but not limited to, the Information Technology Act, 2000 and the Copyright Act, 1957 and the rules notified thereunder.
</p>
<p className="text-body">
<strong>4.5</strong> The User or Subscriber shall take the responsibility to obtain valid permissions or licenses required on his or her respective devices to be able to utilize the course(s). Kautilya Leadership Centre does not take any responsibility for any act of the User or Subscriber in breach of any such licenses.
</p>
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-yellow-800">
<strong>Important Legal Notice:</strong> The information provided on this website
is for educational purposes only and does not constitute professional advice.
KLC makes no warranties about the completeness, reliability, or accuracy of this information.
</p>
</div>
</div>
</section>
{/* Privacy Policy */}
<section
id="privacy-policy"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("privacy-policy")
}
>
<span className="inline-flex items-center gap-2">
5. Privacy Policy
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>5.1</strong> The User hereby consents, expresses and agrees that it has read and fully understands the Privacy and Cookie Policy of Kautilya Leadership Centre in respect of the Website. User further consents that the terms of the Privacy and Cookie Policy are acceptable to the User.
</p>
<p className="text-body">
<strong>5.2</strong> Kautilya Leadership Centre reserves the right to update, change or modify the Privacy Policy at any time. The Privacy Policy shall come to effect from the date of such update, change or modification.
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Your Privacy Matters:</strong> We are committed to protecting your personal
information. Please review our comprehensive Privacy Policy for detailed information
about how we collect, use, and protect your data.
</p>
</div>
</div>
</section>
{/* Termination */}
<section
id="termination"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("termination")
}
>
<span className="inline-flex items-center gap-2">
6. Termination
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>6.1</strong> Kautilya Leadership Centre retains the right to terminate the User's access to the Website at any time at its sole and absolute discretion, if the User's conduct is in anyway detrimental to the business and or autonomy of Kautilya Leadership Centre.
</p>
<p className="text-body">
<strong>6.2</strong> Kautilya Leadership Centre reserves the right to terminate or discontinue the Website at its sole discretion. Such cessation of operations, whether permanent or temporary, shall be notified to the User in such manner as prescribed by law, if and when such requirement to notify the User is necessitated by law.
</p>
<div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-red-800">
<strong>Important:</strong> We reserve the right to suspend or terminate access
to our services without prior notice for violations of these terms or conduct
that harms our platform or other users.
</p>
</div>
</div>
</section>
{/* Intellectual Property Rights */}
<section
id="intellectual-property"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("intellectual-property")
}
>
<span className="inline-flex items-center gap-2">
7. Intellectual Property Rights
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>7.1</strong> Unless otherwise indicated or anything contained to the contrary or any proprietary material owned by a third party and so expressly mentioned, Kautilya Leadership Centre owns all Intellectual Property Rights to and into the trademarks 'Kautilya Leadership Centre Pvt. Ltd' and 'leadershipcentre.in', and the Website, including, without limitation, any and all rights, title and interest in and to copyright, related rights, logos, patents, utility models, designs, know-how, trade secrets and inventions (including any patent/s pending), goodwill, source code, meta tags, databases, text, content, graphics, icons, and hyperlinks. User acknowledges and agrees that it shall not use, reproduce or distribute any content from the Website belonging to Kautilya Leadership Centre without obtaining prior written consent.
</p>
<p className="text-body">
<strong>7.2</strong> Notwithstanding the foregoing, it is expressly clarified that User will be solely responsible for any content provided or uploaded by the User when accessing the Website, including any text, data, information, images, photographs, music, sound, video or any other material which may be accessible through the User's post, or any other content that the User may have uploaded, transmitted or stored when accessing the Website.
</p>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
<p className="text-body text-blue-800">
<strong>Copyright Notice:</strong> © 2025 Kautilya Leadership Centre. All rights reserved.
This website and its contents are protected by copyright, trademark, and other intellectual property laws.
</p>
</div>
</div>
</section>
{/* Links to Third-Party */}
<section
id="third-party-links"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("third-party-links")
}
>
<span className="inline-flex items-center gap-2">
8. Links to Third-Party
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>8.1</strong> Any links to third-party websites are provided solely as a convenience to the User, Kautilya Leadership Centre does not endorse the contents on any such third-party websites. Kautilya Leadership Centre is not responsible for the content of, or any damage that may result from User's access to or reliance on such third-party websites and shall be at the sole risk of the User.
</p>
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-yellow-800">
<strong>Caution:</strong> We are not responsible for the content, privacy policies,
or practices of external sites. Please review their terms and policies before use.
</p>
</div>
</div>
</section>
{/* Indemnity */}
<section
id="indemnity"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("indemnity")
}
>
<span className="inline-flex items-center gap-2">
9. Indemnity
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>9.1</strong> Kautilya Leadership Centre retains the right to take legal course against the User, if the User's act is illegal and or detrimental to the business and or autonomy of Kautilya Leadership Centre or the Website.
</p>
<p className="text-body">
<strong>9.2</strong> The User agrees to indemnify Kautilya Leadership Centre, its affiliates, officers, directors, employees and agents from and against any and all third-party claims, liabilities, damages, losses (direct and indirect) or expenses, including reasonable legal costs, arising out of or in any way connected with the usage of the Website and/or any of its contents, the violation of the terms of these Terms of Use, and violation of any third-party rights.
</p>
<div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-red-800">
<strong>Legal Protection:</strong> You agree to protect and hold harmless
Kautilya Leadership Centre from any claims arising from your use of our services
or violation of these terms.
</p>
</div>
</div>
</section>
{/* Amendment */}
<section
id="amendment"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("amendment")
}
>
<span className="inline-flex items-center gap-2">
10. Amendment
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>10.1</strong> Kautilya Leadership Centre reserves the right to modify the Terms of Use at any time by posting any modifications on this Website, without advance notice to the User.
</p>
<p className="text-body">
<strong>10.2</strong> Any modification to the Terms of Use will be effective immediately after it is posted on this Website. Use of the Website following the posting of any such modification will constitute the User's acceptance of any such modification.
</p>
<p className="text-body">
<strong>10.3</strong> Notwithstanding the above, such modification shall be notified to the User in such manner as prescribed by law, if and when such requirement to notify the User is necessitated by law.
</p>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Your Responsibility:</strong> It is your responsibility to periodically
review these terms for changes. Continued use of our website after modifications
constitutes acceptance of the updated terms.
</p>
</div>
</div>
</section>
{/* Governing Laws & Jurisdiction */}
<section
id="governing-law"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("governing-law")
}
>
<span className="inline-flex items-center gap-2">
11. Governing Laws and Jurisdiction
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>11.1</strong> These Terms of Use shall be governed and construed in accordance with the laws of the Republic of India. Any dispute regarding this Agreement shall be subject to the exclusive jurisdiction of the courts in Mumbai, Maharashtra.
</p>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
<p className="text-body">
<strong>Exclusive Jurisdiction:</strong> Mumbai, Maharashtra, India
</p>
<p className="text-body mt-2">
Any disputes arising from these terms or your use of our services shall be
subject to the exclusive jurisdiction of the courts in Mumbai, Maharashtra, India.
</p>
</div>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Legal Framework:</strong> These terms are governed by Indian law and
any legal proceedings must be conducted in Mumbai, Maharashtra courts.
</p>
</div>
</div>
</section>
{/* Grievances */}
<section
id="grievances"
className="mb-12 scroll-mt-24"
>
<h2
className="text-h2 mb-6 group cursor-pointer"
onClick={() =>
scrollToSection("grievances")
}
>
<span className="inline-flex items-center gap-2">
12. Grievances
<ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
</span>
</h2>
<div className="space-y-4">
<p className="text-body">
<strong>12.1</strong> For any queries or grievances regarding Terms of Use, the courses offered on the Website and the subsequent Privacy Policy etc. the user may contact Ms. Diju Shali at connect@leadershipcentre.in
</p>
<div className="bg-green-50 border border-green-200 rounded-lg p-6">
<h3 className="text-h3 mb-4 text-green-800">Contact Information</h3>
<div className="space-y-2">
<p className="text-body text-green-800">
<strong>Grievance Officer:</strong> Ms. Diju Shali
</p>
<p className="text-body text-green-800">
<strong>Email:</strong> <a href="mailto:connect@leadershipcentre.in" className="underline hover:text-green-900">connect@leadershipcentre.in</a>
</p>
<p className="text-body text-green-800">
<strong>Organization:</strong> Kautilya Leadership Centre Pvt. Ltd
</p>
</div>
</div>
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
<p className="text-body text-blue-800">
<strong>Support Commitment:</strong> We are committed to addressing your concerns
promptly and fairly. Please provide detailed information about your query or grievance
to help us assist you better.
</p>
</div>
</div>
</section>
{/* Important Notice */}
<section className="mb-12">
<div className="bg-gradient-to-r from-blue-50 to-yellow-50 border-2 border-primary rounded-lg p-8">
<h3 className="text-h3 mb-4 text-primary">
Legal Compliance & Updates
</h3>
<p className="text-body mb-4">
These Terms of Use are effective as of the last updated date mentioned above.
By using our website, you acknowledge that you have read, understood, and agree
to be bound by these terms.
</p>
<p className="text-body text-muted">
For the most current version of our Terms of Use, please visit this page regularly.
If you have any questions about these terms, please contact us using the information provided above.
</p>
</div>
</section>
{/* Download Section */}
<section className="mb-12">
<div className="text-center bg-gray-50 border border-gray-200 rounded-lg p-8">
<h3 className="text-h3 mb-4">Download Terms & Conditions</h3>
<p className="text-body text-muted mb-6">
Save a copy of these terms for your records
</p>
<button
onClick={() => window.print()}
className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
>
<Download className="w-4 h-4" />
Download PDF
</button>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
);
}