All implemaentation and 360deg tour
This commit is contained in:
priyanshuvish
@@ -32,7 +32,6 @@ import HomePage from './pages/HomePage';
|
||||
import { AboutUs } from './components/AboutUs';
|
||||
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";
|
||||
@@ -108,8 +107,8 @@ export default function App() {
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
|
||||
{/* Dynamic Routes */}
|
||||
<Route path="/learning/articles/:slug" element={<BlogDetail />} />
|
||||
<Route path="/learning/blogs/:slug" element={<BlogDetail />} />
|
||||
<Route path="/learning/articles/:slugAndId" element={<BlogDetail />} />
|
||||
{/* <Route path="/learning/blogs/:slug" element={<BlogDetail />} /> */}
|
||||
{/* <Route path="/learning/webcast/:slug" element={<WebinarDetail />} />
|
||||
<Route path="/webinar/:slug" element={<WebinarDetail />} /> */}
|
||||
<Route path="/course/:slug" element={<ProgrammeDetail />} />
|
||||
|
||||
BIN
src/assets/panoramas/cayley_interior.jpg
Normal file
BIN
src/assets/panoramas/cayley_interior.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
BIN
src/assets/panoramas/cedar_bridge_sunset.jpg
Normal file
BIN
src/assets/panoramas/cedar_bridge_sunset.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
@@ -35,6 +35,7 @@ import Balaji from '../assets/Balaji-Chandrakumar.jpeg';
|
||||
import Ramesh from '../assets/Ramesh-Padmanabhan.jpeg';
|
||||
import Diju from '../assets/Diju.jpeg';
|
||||
import svgPaths from '../imports/svg-kw7r0ellyk';
|
||||
import { useGetAboutUsQuery } from '../redux/services/aboutUsApi';
|
||||
|
||||
// Leadership Orientations Data
|
||||
const leadershipOrientations = [
|
||||
@@ -83,8 +84,8 @@ const benefits = [
|
||||
'We recommend that the Leadership intervention is designed for a period of 12-15 months with multiple touch points which can constitute a combination of classroom, fire side chats, one-on-one sessions, address by an expert, use of profilers, accessing online content on concepts and accomplished leaders\' experiences'
|
||||
];
|
||||
|
||||
// Team Members Data with Full Profiles
|
||||
const teamMembers = [
|
||||
// Team Members Data with Full Profiles (Static - can be kept or also fetched from API if needed)
|
||||
const staticTeamMembers = [
|
||||
{
|
||||
name: 'Mr. K Ramkumar',
|
||||
role: 'Managing Director',
|
||||
@@ -271,14 +272,38 @@ After a career break, she joined KLC as Practice Head. She now co-creates leader
|
||||
}
|
||||
];
|
||||
|
||||
// Loading Skeleton Component
|
||||
const AboutUsSkeleton = () => (
|
||||
<div className="animate-pulse">
|
||||
{/* Hero Section Skeleton */}
|
||||
<section className="relative min-h-[85vh] flex flex-col bg-gray-200">
|
||||
<div className="absolute inset-0 bg-gray-300"></div>
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl">
|
||||
<div className="h-16 bg-gray-400 rounded-lg w-3/4 mb-8"></div>
|
||||
<div className="h-24 bg-gray-400 rounded-lg w-2/3 mb-8"></div>
|
||||
<div className="h-12 bg-gray-400 rounded-lg w-48"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Add more skeleton sections as needed */}
|
||||
<div className="py-24 text-center text-gray-500">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export function AboutUs() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [expandedValue, setExpandedValue] = useState<string | null>('context');
|
||||
const [selectedMember, setSelectedMember] = useState<typeof teamMembers[0] | null>(null);
|
||||
const [selectedMember, setSelectedMember] = useState<typeof staticTeamMembers[0] | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleMemberClick = (member: typeof teamMembers[0]) => {
|
||||
// Fetch About Us data from API
|
||||
const { data: aboutUsData, isLoading, isError, error } = useGetAboutUsQuery();
|
||||
|
||||
const handleMemberClick = (member: typeof staticTeamMembers[0]) => {
|
||||
setSelectedMember(member);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
@@ -296,7 +321,6 @@ export function AboutUs() {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
@@ -305,9 +329,8 @@ export function AboutUs() {
|
||||
useEffect(() => {
|
||||
setIsVisible(true);
|
||||
|
||||
// Timeline fill animation on scroll
|
||||
const handleScroll = () => {
|
||||
const timelineSection = document.querySelector('#timeline-fill-line');
|
||||
const timelineSection = document.querySelector('#timeline-fill-line') as HTMLElement | null;
|
||||
const timelineContainer = timelineSection?.parentElement;
|
||||
|
||||
if (!timelineSection || !timelineContainer) return;
|
||||
@@ -315,47 +338,56 @@ export function AboutUs() {
|
||||
const rect = timelineContainer.getBoundingClientRect();
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Calculate how much of the timeline is visible
|
||||
const sectionTop = rect.top;
|
||||
const sectionHeight = rect.height;
|
||||
const visibleTop = Math.max(0, windowHeight - sectionTop);
|
||||
const visibleHeight = Math.min(visibleTop, sectionHeight);
|
||||
const scrollProgress = Math.max(0, Math.min(1, visibleHeight / sectionHeight));
|
||||
|
||||
// Calculate the exact position to end at Phase 3 dot
|
||||
const maxFillHeight = 'calc(100% - 1rem)'; // Match the background line limit
|
||||
const maxFillHeight = 'calc(100% - 1rem)';
|
||||
|
||||
// Apply progressive fill that respects the maximum height constraint
|
||||
if (scrollProgress >= 0.9) {
|
||||
// When nearly complete, set to exact end position
|
||||
timelineSection.style.height = maxFillHeight;
|
||||
} else {
|
||||
// Progressive fill up to 90% of the way
|
||||
timelineSection.style.height = `${scrollProgress * 90}%`;
|
||||
}
|
||||
};
|
||||
|
||||
// Add scroll listener
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// Initial call to set the initial state
|
||||
handleScroll();
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Show loading skeleton while fetching data
|
||||
if (isLoading) {
|
||||
return <AboutUsSkeleton />;
|
||||
}
|
||||
|
||||
// Show error state if API call fails
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-red-600 mb-4">Error Loading Page</h2>
|
||||
<p className="text-gray-600 mb-4">Failed to load About Us content. Please try again later.</p>
|
||||
<Button onClick={() => window.location.reload()}>Retry</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
|
||||
{/* Hero Section - Our Vision Page Style */}
|
||||
{/* Hero Section - Dynamic from API */}
|
||||
<section className="relative min-h-[85vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
|
||||
backgroundImage: `url('${aboutUsData?.hero_section?.background_image_url || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop'}')`
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
|
||||
@@ -364,32 +396,22 @@ export function AboutUs() {
|
||||
<div className="relative z-10 flex-1 flex items-center">
|
||||
<div className="w-full section-margin-x">
|
||||
<div className="max-w-6xl">
|
||||
{/* Back Navigation */}
|
||||
{/* <div className="mb-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo('/services')}
|
||||
className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Services
|
||||
</Button>
|
||||
</div> */}
|
||||
|
||||
<div className="mb-8">
|
||||
<h1 className="text-h1-white">
|
||||
Advancing Leadership Through Insight
|
||||
{aboutUsData?.hero_section?.headline || "Advancing Leadership Through Insight"}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-3xl">
|
||||
<strong>Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.</strong>
|
||||
<strong>
|
||||
{aboutUsData?.hero_section?.subtext || "Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential."}
|
||||
</strong>
|
||||
</p>
|
||||
|
||||
<div className="flex justify-start">
|
||||
<PrimaryCTAButton
|
||||
text="Talk to Us"
|
||||
onClick={() => navigateTo('/contact?topic=management-development')}
|
||||
text={aboutUsData?.hero_section?.cta_text || "Talk to Us"}
|
||||
onClick={() => navigateTo(aboutUsData?.hero_section?.cta_destination || '/contact?topic=management-development')}
|
||||
ariaLabel="Talk to us about management development"
|
||||
className="primary-cta-button-blue cta-text-white"
|
||||
/>
|
||||
@@ -399,7 +421,7 @@ export function AboutUs() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 1: Our Promise */}
|
||||
{/* Section 1: Our Promise - Dynamic from API */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -410,7 +432,7 @@ export function AboutUs() {
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<BrandedTag text="Our Promise" />
|
||||
<BrandedTag text={aboutUsData?.our_promise_title || "Our Promise"} />
|
||||
<h2 className="text-h1 mb-8" style={{
|
||||
fontSize: 'clamp(2.5rem, 5vw, 4rem)',
|
||||
lineHeight: '1.1',
|
||||
@@ -423,7 +445,7 @@ export function AboutUs() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: How We Work */}
|
||||
{/* Section 2: How We Work - Dynamic from API */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -434,109 +456,143 @@ export function AboutUs() {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<BrandedTag text="How We Work" />
|
||||
<h2 className="text-h2 mb-8">How We Work</h2>
|
||||
<BrandedTag text={aboutUsData?.how_we_work_title || "How We Work"} />
|
||||
<h2 className="text-h2 mb-8">{aboutUsData?.how_we_work_title || "How We Work"}</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Four Key Points Grid */}
|
||||
{/* Four Key Points Grid - Using API data if available, otherwise fallback to static */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
{(aboutUsData?.how_we_work && aboutUsData.how_we_work.length > 0) ? (
|
||||
aboutUsData.how_we_work.map((item, index) => (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<Puzzle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Co-created interventions</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
We collaborate with you to design solutions that fit your unique organizational context and strategic objectives.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
{index === 0 && <Puzzle className="w-6 h-6 text-white" />}
|
||||
{index === 1 && <Target className="w-6 h-6 text-white" />}
|
||||
{index === 2 && <BookOpen className="w-6 h-6 text-white" />}
|
||||
{index === 3 && <Zap className="w-6 h-6 text-white" />}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">{item.title}</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))
|
||||
) : (
|
||||
// Fallback to static data if API data is not available
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<Puzzle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Co-created interventions</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
We collaborate with you to design solutions that fit your unique organizational context and strategic objectives.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Grounded in business context</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Every solution is tailored to your specific business environment, challenges, and growth objectives.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Grounded in business context</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Every solution is tailored to your specific business environment, challenges, and growth objectives.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<BookOpen className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Research-backed, behaviour-anchored</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Our methodologies are rooted in rigorous research and focused on sustainable behavioral transformation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<BookOpen className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Research-backed, behaviour-anchored</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Our methodologies are rooted in rigorous research and focused on sustainable behavioral transformation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
|
||||
>
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Delivered through immersive formats</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Interactive, experiential learning approaches that engage participants and drive lasting impact.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-primary)' }}
|
||||
>
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-4">Delivered through immersive formats</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
Interactive, experiential learning approaches that engage participants and drive lasting impact.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Who We Are - Updated Statistics */}
|
||||
{/* Section 3: Who We Are - Updated Statistics - Dynamic from API */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -552,7 +608,7 @@ export function AboutUs() {
|
||||
<div className="lg:col-span-1">
|
||||
<div className="branded-tag-system">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Who we are</span>
|
||||
<span className="text">{aboutUsData?.who_we_are_title || "Who we are"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -568,96 +624,122 @@ export function AboutUs() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Updated Statistics Grid */}
|
||||
{/* Updated Statistics Grid - Dynamic from API */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12 pt-12 border-t border-gray-200">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
150+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>CORPORATES</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
{(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? (
|
||||
aboutUsData.stat_section.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
{stat.number}{stat.suffix}
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>{stat.label.toUpperCase()}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
))
|
||||
) : (
|
||||
// Fallback to static statistics if API data is not available
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
150+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>CORPORATES</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
27,000+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>LEADERS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
27,000+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>LEADERS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
5,000+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>ROOM NIGHTS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-5xl lg:text-6xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
5,000+
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>ROOM NIGHTS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-3xl lg:text-4xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
India & APAC
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>PRESENCE</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center lg:text-left"
|
||||
>
|
||||
<div className="text-3xl lg:text-4xl font-medium mb-2" style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1',
|
||||
color: 'var(--color-primary)'
|
||||
}}>
|
||||
India & APAC
|
||||
</div>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
<div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
|
||||
<span style={{ color: 'var(--color-black)', fontWeight: '500' }}>PRESENCE</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Section 4: Our Team */}
|
||||
{/* Section 4: Our Team - Dynamic from API */}
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -669,8 +751,8 @@ export function AboutUs() {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<BrandedTag text="Our Team" />
|
||||
<h2 className="text-h2 mb-8">Our Team</h2>
|
||||
<BrandedTag text={aboutUsData?.our_team_title || "Our Team"} />
|
||||
<h2 className="text-h2 mb-8">{aboutUsData?.our_team_title || "Our Team"}</h2>
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<p className="text-body-lg text-muted leading-relaxed">
|
||||
We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them
|
||||
@@ -678,9 +760,9 @@ export function AboutUs() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Team Members Grid */}
|
||||
{/* Team Members Grid - Using static team members with full profiles */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
{teamMembers.map((member, index) => (
|
||||
{staticTeamMembers.map((member, index) => (
|
||||
<motion.div
|
||||
key={member.name}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -725,11 +807,60 @@ export function AboutUs() {
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Alternative: Use API team data if needed */}
|
||||
{/* {aboutUsData?.our_team && aboutUsData.our_team.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||||
{aboutUsData.our_team.map((member, index) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-left cursor-pointer"
|
||||
>
|
||||
<div className="relative mb-6 group">
|
||||
<div className="aspect-square rounded-2xl overflow-hidden bg-gray-100 shadow-lg group-hover:shadow-xl transition-all duration-300">
|
||||
<img
|
||||
src={member.photo_url}
|
||||
alt={member.alt_text}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300 rounded-2xl flex items-center justify-center">
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div
|
||||
className="px-4 py-2 rounded-lg text-white text-small"
|
||||
style={{
|
||||
backgroundColor: '#04045B',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
>
|
||||
View Profile
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-h4 text-black group-hover:text-primary transition-colors duration-300">
|
||||
{member.name_role.split(' - ')[0]}
|
||||
</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
{member.name_role.split(' - ')[1] || ''}
|
||||
</p>
|
||||
<p className="text-small text-muted">{member.bio}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 5: Our Methodology */}
|
||||
{/* Section 5: Our Methodology (Static - unchanged) */}
|
||||
<section className="py-16 lg:py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
@@ -750,19 +881,19 @@ export function AboutUs() {
|
||||
<div
|
||||
className="absolute left-4 top-0 w-0.5 bg-gray-300"
|
||||
style={{
|
||||
height: 'calc(100% - 1rem)', // Adjusted to end exactly at Phase 3 dot
|
||||
height: 'calc(100% - 1rem)',
|
||||
zIndex: 1
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* Vertical Line Fill - Blue - Animated on Scroll - Ends exactly at Phase 3 dot */}
|
||||
{/* Vertical Line Fill - Blue - Animated on Scroll */}
|
||||
<div
|
||||
id="timeline-fill-line"
|
||||
className="absolute left-4 top-0 w-0.5 transition-all duration-1000 ease-out"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
height: '0%',
|
||||
maxHeight: 'calc(100% - 1rem)', // Limit to Phase 3 dot position
|
||||
maxHeight: 'calc(100% - 1rem)',
|
||||
zIndex: 2
|
||||
}}
|
||||
></div>
|
||||
@@ -1168,8 +1299,6 @@ export function AboutUs() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<TestimonialsSection
|
||||
title="What Our Clients Say About Us"
|
||||
|
||||
@@ -1,113 +1,127 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Button } from './ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Input } from './ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
import { navigateTo } from './Router';
|
||||
import {
|
||||
Search,
|
||||
Calendar,
|
||||
User,
|
||||
ArrowRight,
|
||||
BookOpen,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Filter,
|
||||
Grid,
|
||||
List,
|
||||
SortAsc,
|
||||
Clock,
|
||||
Eye,
|
||||
Star,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Search,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
import { articlesData } from '../data/articlesData';
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { BlogItem, useGetBlogsQuery } from '../redux/services/blogApi';
|
||||
import { useGetFaqCategoriesQuery } from '../redux/services/faqApi';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
import { navigateTo } from './Router';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Button } from './ui/button';
|
||||
import { Card, CardContent } from './ui/card';
|
||||
import { Input } from './ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { FullScreenLoader } from './FullScreenLoader';
|
||||
import { getSlugWithId } from '../utils/urlHelpers';
|
||||
|
||||
// Define category type with ID and name
|
||||
interface CategoryOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
type DateRange =
|
||||
| 'all_time'
|
||||
| 'last_7_days'
|
||||
| 'last_30_days'
|
||||
| 'last_3_months'
|
||||
| 'last_6_months';
|
||||
|
||||
type SortBy =
|
||||
| 'most_recent'
|
||||
| 'oldest_first'
|
||||
| 'title_az';
|
||||
|
||||
export function Articles() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('All Categories');
|
||||
const [selectedAuthor, setSelectedAuthor] = useState('All Authors');
|
||||
const [selectedCategory, setSelectedCategory] = useState<CategoryOption>({ id: 'all', name: 'All Categories' });
|
||||
const [selectedReadTime, setSelectedReadTime] = useState('All Read Times');
|
||||
const [selectedDateRange, setSelectedDateRange] = useState('All Time');
|
||||
const [selectedTopic, setSelectedTopic] = useState('All Topics');
|
||||
const [sortBy, setSortBy] = useState('Most Recent');
|
||||
const [selectedDateRange, setSelectedDateRange] = useState<DateRange>('all_time');
|
||||
const [selectedTopic, setSelectedTopic] = useState<{
|
||||
id: string;
|
||||
name: string;
|
||||
}>({
|
||||
id: 'all',
|
||||
name: 'All Topics'
|
||||
});
|
||||
const [sortBy, setSortBy] = useState<SortBy>('most_recent');
|
||||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const articlesPerPage = 4;
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const articlesPerPage = 6;
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [allTags, setAllTags] = useState<{ id: string; name: string }[]>([]);
|
||||
|
||||
// Use articlesData instead of the old articles variable
|
||||
const articles = articlesData;
|
||||
|
||||
// Get unique values for filters - FIXED: using articlesData
|
||||
const categories = ['All Categories', ...Array.from(new Set(articlesData.map(article => article.category)))];
|
||||
const authors = ['All Authors', ...Array.from(new Set(articlesData.map(article => article.author)))];
|
||||
const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min'];
|
||||
const dateRanges = ['All Time', 'Last 7 days', 'Last 30 days', 'Last 3 months'];
|
||||
const allTags = Array.from(new Set(articlesData.flatMap(article => article.tags)));
|
||||
const sortOptions = [
|
||||
{ value: 'Most Recent', label: 'Most Recent' },
|
||||
{ value: 'oldest', label: 'Oldest First' },
|
||||
{ value: 'title', label: 'Title A-Z' },
|
||||
{ value: 'readTime', label: 'Read Time' },
|
||||
{ value: 'popular', label: 'Most Popular' }
|
||||
];
|
||||
|
||||
// Filter and sort articles - FIXED: using articlesData
|
||||
const filteredArticles = articlesData.filter(article => {
|
||||
const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
article.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory;
|
||||
const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor;
|
||||
|
||||
// FIXED: Read time filter - properly parse the read time
|
||||
const readTimeMinutes = parseInt(article.readTime.replace(' min read', '')) || 0;
|
||||
const matchesReadTime = selectedReadTime === 'All Read Times' ||
|
||||
(selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
|
||||
(selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
|
||||
(selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
|
||||
|
||||
// Date range filter
|
||||
const articleDate = new Date(article.date);
|
||||
const now = new Date();
|
||||
const matchesDateRange = selectedDateRange === 'All Time' ||
|
||||
(selectedDateRange === 'Last 7 days' && (now.getTime() - articleDate.getTime()) <= 7 * 24 * 60 * 60 * 1000) ||
|
||||
(selectedDateRange === 'Last 30 days' && (now.getTime() - articleDate.getTime()) <= 30 * 24 * 60 * 60 * 1000) ||
|
||||
(selectedDateRange === 'Last 3 months' && (now.getTime() - articleDate.getTime()) <= 90 * 24 * 60 * 60 * 1000);
|
||||
|
||||
// Topic filter
|
||||
const matchesTopic = selectedTopic === 'All Topics' ||
|
||||
article.tags.includes(selectedTopic);
|
||||
|
||||
return matchesSearch && matchesCategory && matchesAuthor && matchesReadTime && matchesDateRange && matchesTopic;
|
||||
}).sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'Most Recent':
|
||||
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
||||
case 'oldest':
|
||||
return new Date(a.date).getTime() - new Date(b.date).getTime();
|
||||
case 'title':
|
||||
return a.title.localeCompare(b.title);
|
||||
case 'readTime':
|
||||
// FIXED: Sort by read time - properly parse the values
|
||||
return (parseInt(a.readTime.replace(' min read', '')) || 0) - (parseInt(b.readTime.replace(' min read', '')) || 0);
|
||||
case 'popular':
|
||||
return parseInt(b.views) - parseInt(a.views);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
// Fetch categories for filter dropdown
|
||||
const {
|
||||
data: categoriesData,
|
||||
isLoading: isLoadingCategories
|
||||
} = useGetFaqCategoriesQuery({
|
||||
limit: 100,
|
||||
offset: 0
|
||||
});
|
||||
|
||||
// Paginate results
|
||||
const totalPages = Math.ceil(filteredArticles.length / articlesPerPage);
|
||||
const startIndex = (currentPage - 1) * articlesPerPage;
|
||||
const currentArticles = filteredArticles.slice(startIndex, startIndex + articlesPerPage);
|
||||
// Filter categories to only those for blog and create options with id and name
|
||||
const categories: CategoryOption[] = [
|
||||
{ id: 'all', name: 'All Categories' },
|
||||
...(categoriesData?.data?.items
|
||||
?.filter((category: any) => category.for_blog)
|
||||
.map((category: any) => ({
|
||||
id: category.id,
|
||||
name: category.category_name
|
||||
})) || [])
|
||||
];
|
||||
|
||||
// Debounce search term
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearch(searchTerm);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchTerm]);
|
||||
|
||||
// Fetch blogs from API with all parameters
|
||||
const {
|
||||
data: blogsData,
|
||||
isLoading: isLoadingBlogs,
|
||||
isError: isBlogsError,
|
||||
refetch: refetchBlogs
|
||||
} = useGetBlogsQuery({
|
||||
limit: articlesPerPage,
|
||||
offset: (currentPage - 1) * articlesPerPage,
|
||||
search: debouncedSearch || undefined,
|
||||
content_status: 'publish',
|
||||
content_type: 'BLOG',
|
||||
date_range: selectedDateRange !== 'all_time' ? selectedDateRange : undefined,
|
||||
sort_by: sortBy,
|
||||
content_category_id: selectedCategory.id !== 'all' ? selectedCategory.id : undefined, // Send UUID
|
||||
tag_id: selectedTopic.id !== 'all' ? selectedTopic.id : undefined,
|
||||
});
|
||||
|
||||
|
||||
const sortOptions = [
|
||||
{ value: 'most_recent', label: 'Most Recent' },
|
||||
{ value: 'oldest_first', label: 'Oldest First' },
|
||||
{ value: 'title_az', label: 'Title A-Z' }
|
||||
];
|
||||
|
||||
const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min'];
|
||||
const dateRanges = [
|
||||
{ value: 'all_time', label: 'All Time' },
|
||||
{ value: 'last_7_days', label: 'Last 7 days' },
|
||||
{ value: 'last_30_days', label: 'Last 30 days' },
|
||||
{ value: 'last_3_months', label: 'Last 3 months' }
|
||||
];
|
||||
|
||||
// Format date function
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
@@ -116,25 +130,94 @@ export function Articles() {
|
||||
});
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSearchTerm('');
|
||||
setSelectedCategory('All Categories');
|
||||
setSelectedAuthor('All Authors');
|
||||
setSelectedReadTime('All Read Times');
|
||||
setSelectedDateRange('All Time');
|
||||
setSelectedTopic('All Topics');
|
||||
setSortBy('Most Recent');
|
||||
// Calculate read time based on content length (approx)
|
||||
const calculateReadTime = (content: string): string => {
|
||||
const wordsPerMinute = 200;
|
||||
const wordCount = content.split(/\s+/).length;
|
||||
const minutes = Math.ceil(wordCount / wordsPerMinute);
|
||||
return `${minutes} min read`;
|
||||
};
|
||||
|
||||
const hasActiveFilters = searchTerm ||
|
||||
selectedCategory !== 'All Categories' ||
|
||||
selectedAuthor !== 'All Authors' ||
|
||||
// Filter articles by read time (client-side only - API doesn't support this)
|
||||
const getReadTimeFilteredArticles = () => {
|
||||
if (selectedReadTime === 'All Read Times' || !blogsData?.data?.items) {
|
||||
return blogsData?.data?.items || [];
|
||||
}
|
||||
|
||||
return (blogsData?.data?.items || []).filter((blog: BlogItem) => {
|
||||
const readTimeMinutes = parseInt(calculateReadTime(blog.content).replace(' min read', '')) || 0;
|
||||
return (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
|
||||
(selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
|
||||
(selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
|
||||
});
|
||||
};
|
||||
|
||||
const finalFilteredArticles = getReadTimeFilteredArticles();
|
||||
|
||||
const totalPages = Math.ceil((blogsData?.data?.pagination?.total || 0) / articlesPerPage);
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSearchTerm('');
|
||||
setDebouncedSearch('');
|
||||
setSelectedCategory({ id: 'all', name: 'All Categories' });
|
||||
setSelectedReadTime('All Read Times');
|
||||
setSelectedDateRange('all_time');
|
||||
setSelectedTopic({ id: 'all', name: 'All Topics' });
|
||||
setSortBy('most_recent');
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const hasActiveFilters = Boolean(
|
||||
searchTerm ||
|
||||
selectedCategory.id !== 'all' ||
|
||||
selectedReadTime !== 'All Read Times' ||
|
||||
selectedDateRange !== 'All Time' ||
|
||||
selectedTopic !== 'All Topics';
|
||||
selectedDateRange !== 'all_time' ||
|
||||
selectedTopic.id !== 'all'
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!blogsData?.data?.items || allTags.length > 0) return;
|
||||
|
||||
const tags = Array.from(
|
||||
new Map(
|
||||
blogsData.data.items
|
||||
.flatMap((blog: BlogItem) => blog.blog_tags || [])
|
||||
.map(tag => [tag.id, { id: tag.id, name: tag.tag_name }])
|
||||
).values()
|
||||
);
|
||||
|
||||
setAllTags(tags);
|
||||
}, [blogsData]);
|
||||
|
||||
// Handle loading state
|
||||
if (isLoadingBlogs || isLoadingCategories) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-white">
|
||||
<FullScreenLoader text="Loading articles..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle error state
|
||||
if (isBlogsError) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-white">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<X className="w-8 h-8 text-red-600" />
|
||||
</div>
|
||||
<h2 className="text-h3 mb-2">Failed to load articles</h2>
|
||||
<p className="text-gray-600 mb-4">Please try again later</p>
|
||||
<Button onClick={() => refetchBlogs()}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div style={{ backgroundColor: '#FFFFFF' }} ref={containerRef}>
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-28 overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
@@ -169,18 +252,16 @@ export function Articles() {
|
||||
<div className="section-margin-x">
|
||||
<div className="grid grid-cols-3 gap-8 text-center">
|
||||
<div>
|
||||
{/* FIXED: Using articlesData.length */}
|
||||
<div className="text-h2-white mb-2">{articlesData.length}+</div>
|
||||
<div className="text-h2-white mb-2">{blogsData?.data?.pagination?.total || 0}+</div>
|
||||
<div className="text-small-white">Expert Articles</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* FIXED: Using categories from articlesData */}
|
||||
<div className="text-h2-white mb-2">{categories.length - 1}</div>
|
||||
<div className="text-small-white">Categories</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">25,400</div>
|
||||
<div className="text-small-white">Total Reads</div>
|
||||
<div className="text-h2-white mb-2">{allTags.length}+</div>
|
||||
<div className="text-small-white">Topics</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +278,7 @@ export function Articles() {
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search articles, authors, topics..."
|
||||
placeholder="Search articles..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 pr-4 py-3 text-body rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 w-full bg-gray-50"
|
||||
@@ -298,46 +379,37 @@ export function Articles() {
|
||||
<label className="block text-small mb-2 font-medium text-gray-700">
|
||||
Category
|
||||
</label>
|
||||
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
|
||||
<SelectValue placeholder="All Categories" />
|
||||
<Select
|
||||
value={selectedCategory.id}
|
||||
onValueChange={(value: string) => {
|
||||
const category = categories.find(c => c.id === value);
|
||||
if (category) {
|
||||
setSelectedCategory(category);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
|
||||
<SelectValue placeholder="All Categories">
|
||||
{selectedCategory.name}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category} value={category} className="text-small">
|
||||
{category}
|
||||
<SelectItem key={category.id} value={category.id} className="text-small">
|
||||
{category.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Author Filter */}
|
||||
<div className="filter-section">
|
||||
<label className="block text-small mb-2 font-medium text-gray-700">
|
||||
Author
|
||||
</label>
|
||||
<Select value={selectedAuthor} onValueChange={setSelectedAuthor}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
|
||||
<SelectValue placeholder="All Authors" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{authors.map((author) => (
|
||||
<SelectItem key={author} value={author} className="text-small">
|
||||
{author}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Read Time Filter */}
|
||||
{/* Read Time Filter - Client-side only */}
|
||||
<div className="filter-section">
|
||||
<label className="block text-small mb-2 font-medium text-gray-700">
|
||||
Read Time
|
||||
</label>
|
||||
<Select value={selectedReadTime} onValueChange={setSelectedReadTime}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
|
||||
<SelectValue placeholder="All Read Times" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -356,13 +428,13 @@ export function Articles() {
|
||||
Date Range
|
||||
</label>
|
||||
<Select value={selectedDateRange} onValueChange={setSelectedDateRange}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
|
||||
<SelectValue placeholder="All Time" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{dateRanges.map((dateRange) => (
|
||||
<SelectItem key={dateRange} value={dateRange} className="text-small">
|
||||
{dateRange}
|
||||
{dateRanges.map((range) => (
|
||||
<SelectItem key={range.value} value={range.value}>
|
||||
{range.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
@@ -374,17 +446,28 @@ export function Articles() {
|
||||
<label className="block text-small mb-2 font-medium text-gray-700">
|
||||
Topic
|
||||
</label>
|
||||
<Select value={selectedTopic} onValueChange={setSelectedTopic}>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
|
||||
<Select
|
||||
value={selectedTopic.id}
|
||||
onValueChange={(value: string) => {
|
||||
if (value === 'all') {
|
||||
setSelectedTopic({ id: 'all', name: 'All Topics' });
|
||||
return;
|
||||
}
|
||||
const topic = allTags.find(t => t.id === value);
|
||||
if (topic) setSelectedTopic(topic);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
|
||||
<SelectValue placeholder="All Topics" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="All Topics" className="text-small">
|
||||
<SelectItem value="all">
|
||||
All Topics
|
||||
</SelectItem>
|
||||
|
||||
{allTags.map((tag) => (
|
||||
<SelectItem key={tag} value={tag} className="text-small">
|
||||
{tag}
|
||||
<SelectItem key={tag.id} value={tag.id}>
|
||||
{tag.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
@@ -399,73 +482,85 @@ export function Articles() {
|
||||
{/* Right Content Area - Scrollable Articles */}
|
||||
<div className="col-span-12 lg:col-span-9">
|
||||
<div className="mb-4 text-small text-muted">
|
||||
Showing {currentArticles.length} of {filteredArticles.length} articles
|
||||
Showing {finalFilteredArticles.length} of {blogsData?.data?.pagination?.total || 0} articles
|
||||
</div>
|
||||
|
||||
{/* Articles Results */}
|
||||
{currentArticles.length === 0 ? (
|
||||
{finalFilteredArticles.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<BookOpen className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-body-lg text-muted">
|
||||
No articles found matching your criteria.
|
||||
</p>
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearAllFilters}
|
||||
className="mt-4"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Grid View */}
|
||||
{viewMode === 'grid' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{currentArticles.map((article) => (
|
||||
{finalFilteredArticles.map((article: BlogItem) => (
|
||||
<Card
|
||||
key={article.id}
|
||||
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
|
||||
onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
|
||||
onClick={() => {
|
||||
// Use slug_name to create the URL with full UUID
|
||||
const url = getSlugWithId(article.slug_name, article.id);
|
||||
navigateTo(`/learning/articles/${url}`);
|
||||
}}
|
||||
>
|
||||
<div className="aspect-video w-full bg-gray-100 overflow-hidden relative">
|
||||
<ImageWithFallback
|
||||
src={article.thumbnail}
|
||||
src={article.banner_img || 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnRpY2xlJTIwYmxvZyUyMGNvbnRlbnQlMjBrbm93bGVkZ2V8ZW58MXx8fHwxNzU1ODU0Mjg2fDA&ixlib=rb-4.1.0&q=80&w=1080'}
|
||||
alt={article.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
{article.featured && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-yellow-100 text-yellow-800 border-yellow-200"
|
||||
>
|
||||
Featured
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Badge variant="outline" className="text-small">
|
||||
{article.category}
|
||||
{article.content_category}
|
||||
</Badge>
|
||||
<span className="text-small text-muted">{article.readTime}</span>
|
||||
<span className="text-small text-muted">
|
||||
{calculateReadTime(article.content)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
|
||||
<h3 className="text-h4 mb-3 group-hover:text-[#04045B] transition-colors line-clamp-2">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-small text-muted mb-4 line-clamp-3">
|
||||
{article.excerpt}
|
||||
{article.short_description || article.content.substring(0, 150) + '...'}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ImageWithFallback
|
||||
src={article.authorAvatar}
|
||||
alt={article.author}
|
||||
className="w-6 h-6 rounded-full object-cover"
|
||||
/>
|
||||
<span className="text-small">{article.author}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<div className="text-small text-muted">
|
||||
{formatDate(article.date)}
|
||||
{formatDate(article.updated_at)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Display tags if available */}
|
||||
{article.blog_tags && article.blog_tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-3 pt-3 border-t border-gray-100">
|
||||
{article.blog_tags.slice(0, 3).map((tag, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="text-xs">
|
||||
{tag.tag_name}
|
||||
</Badge>
|
||||
))}
|
||||
{article.blog_tags.length > 3 && (
|
||||
<span className="text-xs text-gray-500">+{article.blog_tags.length - 3}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
@@ -475,29 +570,23 @@ export function Articles() {
|
||||
{/* List View */}
|
||||
{viewMode === 'list' && (
|
||||
<div className="space-y-6">
|
||||
{currentArticles.map((article) => (
|
||||
{finalFilteredArticles.map((article: BlogItem) => (
|
||||
<Card
|
||||
key={article.id}
|
||||
className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
|
||||
onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
|
||||
onClick={() => {
|
||||
// Use slug_name to create the URL with full UUID
|
||||
const url = getSlugWithId(article.slug_name, article.id);
|
||||
navigateTo(`/learning/articles/${url}`);
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="md:w-80 h-48 md:h-auto bg-gray-100 overflow-hidden relative flex-shrink-0">
|
||||
<ImageWithFallback
|
||||
src={article.thumbnail}
|
||||
src={article.banner_img || 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnRpY2xlJTIwYmxvZyUyMGNvbnRlbnQlMjBrbm93bGVkZ2V8ZW58MXx8fHwxNzU1ODU0Mjg2fDA&ixlib=rb-4.1.0&q=80&w=1080'}
|
||||
alt={article.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
{article.featured && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-yellow-100 text-yellow-800 border-yellow-200 text-xs"
|
||||
>
|
||||
Featured
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6">
|
||||
@@ -505,38 +594,39 @@ export function Articles() {
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge variant="outline" className="text-small">
|
||||
{article.category}
|
||||
{article.content_category}
|
||||
</Badge>
|
||||
<span className="text-small text-muted">{article.readTime}</span>
|
||||
<div className="flex items-center gap-1 text-small text-muted">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{article.views}</span>
|
||||
</div>
|
||||
<span className="text-small text-muted">
|
||||
{calculateReadTime(article.content)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-h4 mb-2 group-hover:text-blue-600 transition-colors">
|
||||
<h3 className="text-h4 mb-2 group-hover:text-[#04045B] transition-colors">
|
||||
{article.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-body text-muted mb-3">
|
||||
{article.excerpt}
|
||||
{article.short_description || article.content.substring(0, 200) + '...'}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ImageWithFallback
|
||||
src={article.authorAvatar}
|
||||
alt={article.author}
|
||||
className="w-6 h-6 rounded-full object-cover"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-small font-medium">{article.author}</span>
|
||||
<span className="text-small text-muted ml-1">• {article.authorTitle}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-small text-muted">
|
||||
{formatDate(article.date)}
|
||||
{formatDate(article.updated_at)}
|
||||
</div>
|
||||
|
||||
{/* Display tags if available */}
|
||||
{article.blog_tags && article.blog_tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{article.blog_tags.slice(0, 2).map((tag, idx) => (
|
||||
<Badge key={idx} variant="secondary" className="text-xs">
|
||||
{tag.tag_name}
|
||||
</Badge>
|
||||
))}
|
||||
{article.blog_tags.length > 2 && (
|
||||
<span className="text-xs text-gray-500">+{article.blog_tags.length - 2}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -592,7 +682,7 @@ export function Articles() {
|
||||
containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}}
|
||||
className={`min-w-10 ${currentPage === page
|
||||
? 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
? 'bg-[#04045B] text-white hover:bg-[#04045B]'
|
||||
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Button } from './ui/button';
|
||||
import { Card, CardContent } from './ui/card';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
|
||||
import { navigateTo } from './Router';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { CTABannerSection } from './CTABannerSection';
|
||||
import { useCart } from './CartContext';
|
||||
// CRITICAL: Import articlesData from the centralized data file
|
||||
// DO NOT create a local articlesData variable - it will shadow this import
|
||||
// All article data must be maintained in /data/articlesData.ts
|
||||
import {
|
||||
Calendar,
|
||||
Clock,
|
||||
ArrowRight,
|
||||
ChevronUp,
|
||||
Share2,
|
||||
Bookmark,
|
||||
Twitter,
|
||||
Facebook,
|
||||
@@ -24,202 +19,91 @@ import {
|
||||
Heart,
|
||||
Eye,
|
||||
BookOpen,
|
||||
ArrowLeft,
|
||||
Star,
|
||||
MessageCircle,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Award
|
||||
ArrowLeft
|
||||
} from 'lucide-react';
|
||||
import { articlesData } from '../data/articlesData';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
interface BlogPost {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
content: string;
|
||||
author: string;
|
||||
authorBio: string;
|
||||
authorImage: string;
|
||||
publishedDate: string;
|
||||
updatedDate?: string;
|
||||
readTime: string;
|
||||
views: number;
|
||||
likes: number;
|
||||
category: string;
|
||||
tags: string[];
|
||||
image: string;
|
||||
featured: boolean;
|
||||
}
|
||||
|
||||
interface RelatedPost {
|
||||
id: string;
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
author: string;
|
||||
publishedDate: string;
|
||||
readTime: string;
|
||||
category: string;
|
||||
image: string;
|
||||
}
|
||||
import { useGetBlogByIDQuery, useGetBlogsQuery } from '../redux/services/blogApi';
|
||||
import { FullScreenLoader } from './FullScreenLoader';
|
||||
import { extractIdFromSlug, extractSlugFromSlugAndId, getSlugWithId } from '../utils/urlHelpers';
|
||||
|
||||
interface BlogDetailProps {
|
||||
params?: {
|
||||
slug?: string;
|
||||
slugAndId?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// NOTE: Using articlesData imported from '../data/articlesData' (line 10)
|
||||
// DO NOT create a local articlesData variable here as it will shadow the import
|
||||
|
||||
// Function to get blog post by slug
|
||||
const getBlogPostBySlug = (slug: string): BlogPost => {
|
||||
console.log('🔍 Searching for slug:', slug);
|
||||
console.log('📋 Available slugs:', articlesData.map(a => ({ id: a.id, slug: a.slug })));
|
||||
|
||||
const article = articlesData.find(article => article.slug === slug);
|
||||
|
||||
if (!article) {
|
||||
console.error('❌ Article not found. Available slugs:', articlesData.map(a => a.slug));
|
||||
return {
|
||||
id: 'not-found',
|
||||
title: 'Article Not Found',
|
||||
slug: 'not-found',
|
||||
excerpt: `The requested article "${slug}" could not be found.`,
|
||||
content: `
|
||||
<p>We're sorry, but the article you're looking for could not be found. It may have been moved or removed.</p>
|
||||
<p>Available articles:</p>
|
||||
<ul>
|
||||
${articlesData.slice(0, 6).map(article =>
|
||||
`<li><a href="/learning/articles/${article.slug}">${article.title}</a></li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
`,
|
||||
author: 'KLC Team',
|
||||
authorBio: 'The Kautilya Leadership Center team',
|
||||
authorImage: 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop',
|
||||
publishedDate: '2024-01-01',
|
||||
updatedDate: '2024-01-01',
|
||||
readTime: '1 min read',
|
||||
views: 0,
|
||||
likes: 0,
|
||||
category: 'General',
|
||||
tags: [],
|
||||
image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop',
|
||||
featured: false
|
||||
};
|
||||
}
|
||||
|
||||
console.log('✅ Article found:', article.title);
|
||||
|
||||
return {
|
||||
id: article.id,
|
||||
title: article.title,
|
||||
slug: article.slug,
|
||||
excerpt: article.excerpt || '',
|
||||
content: article.content || '',
|
||||
author: article.author || 'Unknown Author',
|
||||
authorBio: article.authorBio || `${article.author} is a contributor to Kautilya Leadership Center.`,
|
||||
authorImage: article.authorAvatar || 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop',
|
||||
publishedDate: article.date || '2024-01-01',
|
||||
updatedDate: article.date || '2024-01-01',
|
||||
readTime: article.readTime || '5 min read',
|
||||
views: parseInt((article.views || '0').replace('k', '00').replace('.', '')) || 0,
|
||||
likes: article.likes || 0,
|
||||
category: article.category || 'General',
|
||||
tags: article.tags || [],
|
||||
image: article.thumbnail || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop',
|
||||
featured: article.featured || false
|
||||
};
|
||||
};
|
||||
|
||||
// Generate related posts dynamically from articlesData
|
||||
const getRelatedPosts = (currentSlug: string, currentCategory: string): RelatedPost[] => {
|
||||
// Filter articles by same category or exclude current article
|
||||
const related = articlesData
|
||||
.filter(article => article.slug !== currentSlug)
|
||||
.slice(0, 3)
|
||||
.map(article => ({
|
||||
id: article.id,
|
||||
title: article.title,
|
||||
slug: article.slug,
|
||||
excerpt: article.excerpt,
|
||||
author: article.author,
|
||||
publishedDate: article.date,
|
||||
readTime: article.readTime,
|
||||
category: article.category,
|
||||
image: article.thumbnail
|
||||
}));
|
||||
|
||||
return related;
|
||||
};
|
||||
|
||||
const relatedPosts: RelatedPost[] = [
|
||||
{
|
||||
id: '5',
|
||||
title: 'A New Lens on Leadership',
|
||||
slug: 'new-lens-on-leadership',
|
||||
excerpt: 'Your leadership calls, and how you interpret opportunities and threats, are influenced by your lenses, which are unique and personal to you.',
|
||||
author: 'K Ramkumar',
|
||||
publishedDate: '2016-08-16',
|
||||
readTime: '12 min read',
|
||||
category: 'Leadership Philosophy',
|
||||
image: 'https://images.unsplash.com/photo-1560550900-5c10828c40aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsZWFkZXJzaGlwJTIwbGVucyUyMHBlcnNwZWN0aXZlfGVufDF8fHx8MTc1OTk5NTg0N3ww&ixlib=rb-4.1.0&q=80&w=400'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'Inspiration – the magic potion to leadership',
|
||||
slug: 'inspiration-magic-potion-leadership',
|
||||
excerpt: 'Explore how inspiration serves as a fundamental catalyst for effective leadership, transforming both leaders and their teams toward extraordinary achievements.',
|
||||
author: 'Ramkumar Krishnaswamy',
|
||||
publishedDate: '2017-10-13',
|
||||
readTime: '7 min read',
|
||||
category: 'Leadership Philosophy',
|
||||
image: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=300&fit=crop'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Lessons on Leadership Paradox',
|
||||
slug: 'lessons-leadership-paradox',
|
||||
excerpt: 'Uncover the inherent paradoxes in leadership and learn how embracing these contradictions can make you a more effective and authentic leader.',
|
||||
author: 'Ramkumar Krishnaswamy',
|
||||
publishedDate: '2017-08-10',
|
||||
readTime: '7 min read',
|
||||
category: 'Leadership Strategy',
|
||||
image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop'
|
||||
}
|
||||
];
|
||||
|
||||
export function BlogDetail({ params }: BlogDetailProps) {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const { slugAndId } = useParams<{ slugAndId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
const [isBookmarked, setIsBookmarked] = useState(false);
|
||||
const { addToCart } = useCart();
|
||||
|
||||
// Get blog post data based on slug
|
||||
const blogPost = getBlogPostBySlug(slug || "");
|
||||
|
||||
// Extract full ID from URL using the new function
|
||||
const fullId = slugAndId ? extractIdFromSlug(slugAndId) : null;
|
||||
const urlSlug = slugAndId ? extractSlugFromSlugAndId(slugAndId) : '';
|
||||
|
||||
// Fetch blog details by ID directly - no dependency on list API
|
||||
const {
|
||||
data: blogPost,
|
||||
isLoading: isLoadingBlog,
|
||||
isError: isBlogError,
|
||||
refetch: refetchBlog
|
||||
} = useGetBlogByIDQuery(fullId as string, {
|
||||
skip: !fullId,
|
||||
refetchOnMountOrArgChange: true,
|
||||
});
|
||||
|
||||
// Fetch related blogs (excluding current blog)
|
||||
const {
|
||||
data: relatedBlogsData,
|
||||
isLoading: isLoadingRelated
|
||||
} = useGetBlogsQuery({
|
||||
limit: 3,
|
||||
offset: 0,
|
||||
content_status: 'publish',
|
||||
content_type: 'BLOG',
|
||||
}, {
|
||||
skip: !fullId,
|
||||
});
|
||||
|
||||
// SEO: Check if URL slug matches the actual slug_name and redirect if needed
|
||||
useEffect(() => {
|
||||
if (blogPost && fullId) {
|
||||
// Get the expected slug from the blog post
|
||||
const expectedSlug = blogPost.slug_name;
|
||||
// Create the expected URL with proper formatting
|
||||
const expectedUrl = getSlugWithId(expectedSlug, fullId);
|
||||
// Get the current URL slug
|
||||
const currentSlugAndId = slugAndId || '';
|
||||
|
||||
// Compare (case-insensitive)
|
||||
if (currentSlugAndId.toLowerCase() !== expectedUrl.toLowerCase()) {
|
||||
// Redirect to the correct URL
|
||||
navigate(`/learning/articles/${expectedUrl}`, { replace: true });
|
||||
}
|
||||
}
|
||||
}, [blogPost, fullId, slugAndId, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = `${blogPost.title} | KLC Blog`;
|
||||
if (blogPost?.title) {
|
||||
document.title = `${blogPost.title} | KLC Blog`;
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
|
||||
const handleScroll = () => {
|
||||
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrolled = (winScroll / height) * 100;
|
||||
|
||||
|
||||
setScrollProgress(scrolled);
|
||||
setShowBackToTop(winScroll > 300);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [blogPost.title]);
|
||||
}, [blogPost?.title]);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
@@ -231,8 +115,8 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
|
||||
const handleShare = (platform: string) => {
|
||||
const url = window.location.href;
|
||||
const title = blogPost.title;
|
||||
|
||||
const title = blogPost?.title || '';
|
||||
|
||||
const shareUrls = {
|
||||
twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
|
||||
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
|
||||
@@ -252,13 +136,71 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
// Calculate read time based on content length (approx)
|
||||
const calculateReadTime = (content: string): string => {
|
||||
const wordsPerMinute = 200;
|
||||
const wordCount = content.split(/\s+/).length;
|
||||
const minutes = Math.ceil(wordCount / wordsPerMinute);
|
||||
return `${minutes} min read`;
|
||||
};
|
||||
|
||||
// Filter related blogs (exclude current blog)
|
||||
const relatedPosts = relatedBlogsData?.data?.items
|
||||
?.filter((blog: any) => blog.id !== fullId)
|
||||
.map((blog: any) => ({
|
||||
id: blog.id,
|
||||
title: blog.title,
|
||||
slug: blog.slug_name,
|
||||
excerpt: blog.short_description || blog.content.substring(0, 150) + '...',
|
||||
author: blog.author_name || 'KLC Team',
|
||||
publishedDate: blog.updated_at,
|
||||
readTime: calculateReadTime(blog.content),
|
||||
category: blog.content_category,
|
||||
image: blog.banner_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop'
|
||||
})) || [];
|
||||
|
||||
// Handle related post click - use full UUID
|
||||
const handleRelatedPostClick = (postSlug: string, postId: string) => {
|
||||
const url = getSlugWithId(postSlug, postId);
|
||||
navigate(`/learning/articles/${url}`);
|
||||
};
|
||||
|
||||
// Handle loading state
|
||||
if (isLoadingBlog) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-white">
|
||||
<FullScreenLoader text="Loading article..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle error state
|
||||
if (isBlogError || !blogPost) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-white">
|
||||
<div className="text-center max-w-md px-4">
|
||||
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<BookOpen className="w-8 h-8 text-red-600" />
|
||||
</div>
|
||||
<h2 className="text-h3 mb-2">Article Not Found</h2>
|
||||
<p className="text-gray-600 mb-6">
|
||||
The article you're looking for could not be found. It may have been moved or removed.
|
||||
</p>
|
||||
<Button onClick={() => navigate('/learning/articles')}>
|
||||
Back to Articles
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
{/* Scroll Progress Bar */}
|
||||
<div className="fixed top-0 left-0 w-full h-1 z-50" style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}>
|
||||
<div
|
||||
<div
|
||||
className="h-full transition-all duration-150"
|
||||
style={{
|
||||
style={{
|
||||
width: `${scrollProgress}%`,
|
||||
backgroundColor: '#04045B'
|
||||
}}
|
||||
@@ -287,7 +229,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigateTo('/learning/articles')}
|
||||
onClick={() => navigate('/learning/articles')}
|
||||
className="p-0 h-auto font-medium hover:bg-transparent transition-colors"
|
||||
style={{ color: '#6F6F6F' }}
|
||||
>
|
||||
@@ -295,7 +237,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
Back to Articles
|
||||
</Button>
|
||||
<span className="text-[#E5E7EB]">•</span>
|
||||
<span>{blogPost.category}</span>
|
||||
<span>{blogPost.content_category || 'Article'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -307,64 +249,64 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
<header className="mb-16">
|
||||
{/* Category Badge */}
|
||||
<div className="mb-8">
|
||||
<Badge
|
||||
<Badge
|
||||
className="mb-6 text-small px-4 py-2 font-medium border-none"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
{blogPost.category}
|
||||
{blogPost.content_category || 'Article'}
|
||||
</Badge>
|
||||
|
||||
|
||||
{/* Improved Typography Hierarchy */}
|
||||
<h1 className="text-h1 mb-6 leading-tight" style={{ color: '#26231A' }}>
|
||||
{blogPost.title}
|
||||
</h1>
|
||||
|
||||
|
||||
{/* Constrained Width Excerpt for Better Readability */}
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-body-lg leading-relaxed" style={{ color: '#6F6F6F' }}>
|
||||
{blogPost.excerpt}
|
||||
{blogPost.short_description || blogPost.content.substring(0, 200) + '...'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Meta Bar with Cleaner Spacing */}
|
||||
<div
|
||||
<div
|
||||
className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 p-6 rounded-xl border"
|
||||
style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)', borderColor: 'rgba(0, 0, 0, 0.08)' }}
|
||||
>
|
||||
{/* Author Info with Improved Layout */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-14 h-14 ring-2 ring-white shadow-md">
|
||||
<AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
|
||||
<AvatarFallback className="text-subhead font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
|
||||
<AvatarImage src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop" alt="Author" />
|
||||
<AvatarFallback className="text-subhead font-medium">KLC</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div className="text-subhead font-medium mb-1" style={{ color: '#26231A' }}>
|
||||
{blogPost.author}
|
||||
KLC Team
|
||||
</div>
|
||||
|
||||
|
||||
{/* Cleaner Meta Information with Subtle Dividers */}
|
||||
<div className="flex items-center gap-4 text-small" style={{ color: '#6F6F6F' }}>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{formatDate(blogPost.publishedDate)}
|
||||
{formatDate(blogPost.updated_at || new Date().toISOString())}
|
||||
</span>
|
||||
|
||||
|
||||
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
|
||||
|
||||
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
{blogPost.readTime}
|
||||
{calculateReadTime(blogPost.content)}
|
||||
</span>
|
||||
|
||||
|
||||
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
|
||||
|
||||
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Eye className="w-4 h-4" />
|
||||
{blogPost.views.toLocaleString()}
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -379,9 +321,9 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
className={`transition-colors ${isLiked ? 'text-red-500' : 'text-[#6F6F6F]'}`}
|
||||
>
|
||||
<Heart className={`w-4 h-4 mr-2 ${isLiked ? 'fill-current' : ''}`} />
|
||||
{blogPost.likes + (isLiked ? 1 : 0)}
|
||||
0
|
||||
</Button>
|
||||
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -390,7 +332,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
>
|
||||
<Bookmark className={`w-4 h-4 ${isBookmarked ? 'fill-current' : ''}`} />
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Share Options */}
|
||||
<div className="flex items-center gap-1 ml-2 pl-2 border-l border-[#E5E7EB]">
|
||||
<Button variant="ghost" size="sm" onClick={() => handleShare('twitter')} className="text-[#6F6F6F] hover:text-[#04045B]">
|
||||
@@ -409,7 +351,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
{/* Featured Image with Better Aspect Ratio */}
|
||||
<div className="aspect-[16/9] rounded-xl overflow-hidden mt-8 shadow-lg">
|
||||
<ImageWithFallback
|
||||
src={blogPost.image}
|
||||
src={blogPost.banner_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop'}
|
||||
alt={blogPost.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
@@ -420,7 +362,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
<article className="mb-20">
|
||||
{/* Full Width Container - Uses complete available width */}
|
||||
<div className="w-full">
|
||||
<div
|
||||
<div
|
||||
className="prose prose-xl max-w-none blog-article-content w-full"
|
||||
style={{
|
||||
/* Enhanced Typography Hierarchy using Design System */
|
||||
@@ -447,48 +389,50 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#26231A',
|
||||
width: '100%'
|
||||
}}
|
||||
} as React.CSSProperties}
|
||||
dangerouslySetInnerHTML={{ __html: blogPost.content }}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Enhanced Tag Pills with Hover States */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-subhead mb-6 font-medium" style={{ color: '#26231A' }}>
|
||||
Topics covered in this article
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{blogPost.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
className="transition-all duration-200 text-body px-4 py-2 font-medium"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.08)',
|
||||
color: '#04045B',
|
||||
border: '1px solid rgba(4, 4, 91, 0.15)'
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
{blogPost.blog_tags && blogPost.blog_tags.length > 0 && (
|
||||
<div className="mb-16">
|
||||
<h3 className="text-subhead mb-6 font-medium" style={{ color: '#26231A' }}>
|
||||
Topics covered in this article
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{blogPost.blog_tags.map((tag: any) => (
|
||||
<Badge
|
||||
key={tag.tag_name}
|
||||
className="transition-all duration-200 text-body px-4 py-2 font-medium"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.08)',
|
||||
color: '#04045B',
|
||||
border: '1px solid rgba(4, 4, 91, 0.15)'
|
||||
}}
|
||||
>
|
||||
{tag.tag_name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced Author Bio Card */}
|
||||
<Card className="mb-16 shadow-md border-0" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-start gap-6">
|
||||
<Avatar className="w-20 h-20 ring-4 ring-white shadow-lg">
|
||||
<AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
|
||||
<AvatarFallback className="text-lg font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
|
||||
<AvatarImage src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop" alt="Author" />
|
||||
<AvatarFallback className="text-lg font-medium">KLC</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-h4 mb-3 font-semibold" style={{ color: '#26231A' }}>
|
||||
About {blogPost.author}
|
||||
About KLC Team
|
||||
</h4>
|
||||
<p className="text-body leading-relaxed mb-6" style={{ color: '#6F6F6F' }}>
|
||||
{blogPost.authorBio}
|
||||
The Kautilya Leadership Center team is dedicated to providing cutting-edge insights and research on leadership development, management strategies, and organizational excellence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -498,95 +442,101 @@ export function BlogDetail({ params }: BlogDetailProps) {
|
||||
</div>
|
||||
|
||||
{/* Related Articles Section with Balanced Grid Layout */}
|
||||
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<div className="branded-tag-system mb-6">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Continue Learning</span>
|
||||
{relatedPosts.length > 0 && (
|
||||
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<div className="branded-tag-system mb-6">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Continue Learning</span>
|
||||
</div>
|
||||
<h2 className="text-h2 mb-6 font-bold" style={{ color: '#26231A' }}>
|
||||
Explore More Leadership Insights
|
||||
</h2>
|
||||
<p className="text-body-lg max-w-2xl mx-auto" style={{ color: '#6F6F6F' }}>
|
||||
Discover additional strategies and frameworks to enhance your leadership effectiveness
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-h2 mb-6 font-bold" style={{ color: '#26231A' }}>
|
||||
Explore More Leadership Insights
|
||||
</h2>
|
||||
<p className="text-body-lg max-w-2xl mx-auto" style={{ color: '#6F6F6F' }}>
|
||||
Discover additional strategies and frameworks to enhance your leadership effectiveness
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Balanced Card Grid with Equal Spacing */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{relatedPosts.map((post) => (
|
||||
<Card
|
||||
key={post.id}
|
||||
className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group border-0"
|
||||
onClick={() => navigateTo(`/learning/articles/${post.slug}`)}
|
||||
style={{ backgroundColor: '#FFFFFF' }}
|
||||
>
|
||||
<div className="aspect-[16/10] w-full bg-gray-100 overflow-hidden relative">
|
||||
<ImageWithFallback
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-small border-none"
|
||||
{/* Balanced Card Grid with Equal Spacing */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{relatedPosts.map((post: any) => (
|
||||
<Card
|
||||
key={post.id}
|
||||
className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group border-0"
|
||||
onClick={() => {
|
||||
// Use the same pattern as the main articles with full UUID
|
||||
const url = getSlugWithId(post.slug, post.id);
|
||||
navigate(`/learning/articles/${url}`);
|
||||
}}
|
||||
style={{ backgroundColor: '#FFFFFF' }}
|
||||
>
|
||||
<div className="aspect-[16/10] w-full bg-gray-100 overflow-hidden relative">
|
||||
<ImageWithFallback
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-small border-none"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
{post.category}
|
||||
</Badge>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{post.readTime}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="mb-3 group-hover:text-blue-600 transition-colors line-clamp-2"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: '#04045B'
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
lineHeight: '1.3',
|
||||
color: '#26231A',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{post.category}
|
||||
</Badge>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{post.readTime}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="mb-3 group-hover:text-blue-600 transition-colors line-clamp-2"
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontWeight: 'var(--font-weight-h4)',
|
||||
lineHeight: '1.3',
|
||||
color: '#26231A',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{post.title}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
className="mb-4 line-clamp-3"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
lineHeight: '1.5',
|
||||
color: '#6F6F6F',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{post.excerpt}
|
||||
</p>
|
||||
{post.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: 'rgba(0, 0, 0, 0.05)' }}>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{post.author}
|
||||
</span>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{formatDate(post.publishedDate)}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<p
|
||||
className="mb-4 line-clamp-3"
|
||||
style={{
|
||||
fontSize: 'var(--font-body)',
|
||||
lineHeight: '1.5',
|
||||
color: '#6F6F6F',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{post.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: 'rgba(0, 0, 0, 0.05)' }}>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{post.author}
|
||||
</span>
|
||||
<span className="text-small" style={{ color: '#6F6F6F' }}>
|
||||
{formatDate(post.publishedDate)}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* CTA Section */}
|
||||
<CTABannerSection />
|
||||
|
||||
@@ -4,14 +4,45 @@ import { BrandedTag } from "./about/BrandedTag";
|
||||
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||||
import { navigateTo } from "./Router";
|
||||
|
||||
export function CTABannerSection() {
|
||||
interface CTABannerSectionProps {
|
||||
ctaBands?: Array<{
|
||||
id: string;
|
||||
background_image_url: string;
|
||||
background_image_alt_text: string;
|
||||
text: string;
|
||||
cta_text: string;
|
||||
cta_destination: string;
|
||||
}>;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function CTABannerSection({ ctaBands = [], isLoading }: CTABannerSectionProps) {
|
||||
// Get the first CTA band or use default values
|
||||
const ctaBand = ctaBands && ctaBands.length > 0 ? ctaBands[0] : null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="relative h-[700px] overflow-hidden bg-gray-100 animate-pulse">
|
||||
<div className="absolute inset-0 bg-gray-200" />
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
<div className="bg-gray-300 rounded-lg p-16 max-w-2xl w-full h-96" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// If no CTA band is available, don't render anything
|
||||
if (!ctaBand) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
|
||||
alt="Professional team collaborating in modern office"
|
||||
src={ctaBand.background_image_url || "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"}
|
||||
alt={ctaBand.background_image_alt_text || "Professional team collaborating in modern office"}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
@@ -34,11 +65,11 @@ export function CTABannerSection() {
|
||||
{/* Branded Tag */}
|
||||
<BrandedTag text="Next Steps" variant="white" />
|
||||
|
||||
{/* Main Headline */}
|
||||
{/* Main Headline - Use API text or fallback */}
|
||||
<h2
|
||||
className="text-h2-white mb-8"
|
||||
>
|
||||
Ready to transform your leadership?
|
||||
{ctaBand.text || "Ready to transform your leadership?"}
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-brand-accent)' }}
|
||||
@@ -48,10 +79,10 @@ export function CTABannerSection() {
|
||||
to start your development journey now.
|
||||
</h2>
|
||||
|
||||
{/* CTA Button - Updated to redirect to contact page */}
|
||||
{/* CTA Button */}
|
||||
<PrimaryCTAButton
|
||||
text="Schedule a Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=consulting')}
|
||||
text={ctaBand.cta_text || "Schedule a Consultation"}
|
||||
onClick={() => navigateTo(ctaBand.cta_destination || '/contact?topic=consulting')}
|
||||
ariaLabel="Schedule a consultation with our leadership experts"
|
||||
className="cta-banner-yellow"
|
||||
/>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { navigateTo } from './Router';
|
||||
import kautilyabg from '../assets/Kautilya.png';
|
||||
import { useCreateLeadMutation, useGetLeadCategoriesQuery } from '../redux/services/contactUsApi';
|
||||
|
||||
interface ContactProps {
|
||||
topic?: string;
|
||||
@@ -19,13 +20,23 @@ export function Contact({ topic }: ContactProps) {
|
||||
name: '',
|
||||
mobileNumber: '',
|
||||
emailId: '',
|
||||
interestedIn: topic || '',
|
||||
interestedIn: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const { data: categoryData } = useGetLeadCategoriesQuery({
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
status: "active"
|
||||
});
|
||||
|
||||
const categories = categoryData?.data?.items || [];
|
||||
|
||||
const [createLead] = useCreateLeadMutation();
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Contact component mounted with topic:', topic);
|
||||
// Set default interested in based on topic parameter
|
||||
@@ -65,10 +76,22 @@ export function Contact({ topic }: ContactProps) {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
setIsSubmitted(true);
|
||||
try {
|
||||
await createLead({
|
||||
full_name: formData.name,
|
||||
phone_number: formData.mobileNumber,
|
||||
email_address: formData.emailId,
|
||||
lead_category_xid: formData.interestedIn,
|
||||
message: formData.message,
|
||||
lead_status: "NEW"
|
||||
}).unwrap();
|
||||
|
||||
setIsSubmitted(true);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Lead creation failed", error);
|
||||
}
|
||||
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
@@ -80,16 +103,21 @@ export function Contact({ topic }: ContactProps) {
|
||||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 className="w-10 h-10 text-green-600" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-h2 mb-4">Thank You!</h1>
|
||||
|
||||
<p className="text-body-lg text-muted mb-8">
|
||||
We've received your message and will get back to you within 24 hours.
|
||||
We've received your message and will get back to you within 24 hours.
|
||||
Our leadership development experts are excited to help transform your organization.
|
||||
</p>
|
||||
<PrimaryCTAButton
|
||||
text="Return to Home"
|
||||
onClick={() => navigateTo('/')}
|
||||
ariaLabel="Return to homepage"
|
||||
/>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Return to Home"
|
||||
onClick={() => navigateTo('/')}
|
||||
ariaLabel="Return to homepage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +135,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
alt="Google Maps showing office location and navigation"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
|
||||
{/* Dark overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-black/60" />
|
||||
</div>
|
||||
@@ -140,7 +168,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white rounded-xl shadow-lg border border-gray-100 h-fit overflow-hidden">
|
||||
{/* Contact Info Header */}
|
||||
<div
|
||||
<div
|
||||
className="p-8 text-white"
|
||||
style={{ backgroundColor: 'var(--color-brand-primary)' }}
|
||||
>
|
||||
@@ -154,7 +182,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
<div className="p-8 space-y-8">
|
||||
{/* Corporate Office */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
|
||||
>
|
||||
@@ -173,7 +201,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
|
||||
{/* Registered Office */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
|
||||
>
|
||||
@@ -192,7 +220,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
|
||||
>
|
||||
@@ -209,7 +237,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
|
||||
{/* Phone */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
<div
|
||||
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
|
||||
>
|
||||
@@ -226,7 +254,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div
|
||||
<div
|
||||
className="p-8 border-t"
|
||||
style={{ borderColor: 'var(--color-border)' }}
|
||||
>
|
||||
@@ -236,7 +264,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
variant="outline"
|
||||
className="w-full justify-start hover:bg-blue-50 hover:border-blue-200 transition-all duration-300"
|
||||
onClick={() => navigateTo('/services/learning-facility')}
|
||||
style={{
|
||||
style={{
|
||||
borderColor: 'var(--color-brand-primary)',
|
||||
color: 'var(--color-brand-primary)'
|
||||
}}
|
||||
@@ -248,7 +276,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
variant="outline"
|
||||
className="w-full justify-start hover:bg-blue-50 hover:border-blue-200 transition-all duration-300"
|
||||
onClick={() => navigateTo('/leadership-journey')}
|
||||
style={{
|
||||
style={{
|
||||
borderColor: 'var(--color-brand-primary)',
|
||||
color: 'var(--color-brand-primary)'
|
||||
}}
|
||||
@@ -267,7 +295,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
{/* Form Header */}
|
||||
<div className="p-8 border-b" style={{ borderColor: 'var(--color-border)' }}>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center"
|
||||
style={{ backgroundColor: 'rgba(248, 195, 1, 0.1)' }}
|
||||
>
|
||||
@@ -279,7 +307,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
Fill out the form below and we'll get back to you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Form Content */}
|
||||
<div className="p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
@@ -294,7 +322,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
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={{
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: 'var(--font-body)'
|
||||
}}
|
||||
@@ -312,7 +340,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
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={{
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: 'var(--font-body)'
|
||||
}}
|
||||
@@ -330,7 +358,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
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={{
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: 'var(--font-body)'
|
||||
}}
|
||||
@@ -345,9 +373,9 @@ export function Contact({ topic }: ContactProps) {
|
||||
value={formData.interestedIn}
|
||||
onValueChange={(value: string) => handleInputChange('interestedIn', value)}
|
||||
>
|
||||
<SelectTrigger
|
||||
<SelectTrigger
|
||||
className="w-full h-12 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
style={{
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: 'var(--font-body)'
|
||||
}}
|
||||
@@ -355,14 +383,13 @@ export function Contact({ topic }: ContactProps) {
|
||||
<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>
|
||||
{categories.map((cat: any) => (
|
||||
<SelectItem key={cat.id} value={cat.id}>
|
||||
{cat.category_type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -378,7 +405,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
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={{
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: 'var(--font-body)'
|
||||
}}
|
||||
@@ -392,7 +419,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
</div>
|
||||
<PrimaryCTAButton
|
||||
text={isSubmitting ? "Sending Message..." : "Send Message"}
|
||||
onClick={() => {}}
|
||||
onClick={() => { handleSubmit }}
|
||||
ariaLabel="Send contact message"
|
||||
className="w-full sm:w-auto"
|
||||
/>
|
||||
@@ -415,19 +442,19 @@ export function Contact({ topic }: ContactProps) {
|
||||
alt="Professional team collaborating in modern office"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
|
||||
{/* Subtle dark overlay for overall image */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)'
|
||||
}}
|
||||
>
|
||||
@@ -436,8 +463,8 @@ export function Contact({ topic }: ContactProps) {
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="text-h2-white mb-8">
|
||||
Ready to transform your leadership?
|
||||
<span
|
||||
Ready to transform your leadership?
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-brand-accent)' }}
|
||||
>
|
||||
@@ -446,7 +473,7 @@ export function Contact({ topic }: ContactProps) {
|
||||
to start your development journey now.
|
||||
</h2>
|
||||
|
||||
<PrimaryCTAButton
|
||||
<PrimaryCTAButton
|
||||
text="Schedule a Consultation"
|
||||
onClick={() => navigateTo('/contact?topic=consulting')}
|
||||
ariaLabel="Schedule a consultation with our leadership experts"
|
||||
|
||||
@@ -72,7 +72,7 @@ export function FooterNew() {
|
||||
About Us
|
||||
</button>
|
||||
<button
|
||||
onClick={() => navigateTo('/learning/blogs')}
|
||||
onClick={() => navigateTo('/learning/articles')}
|
||||
className="block text-small-white transition-all duration-300 text-left"
|
||||
style={{
|
||||
color: 'white',
|
||||
|
||||
22
src/components/FullScreenLoader.tsx
Normal file
22
src/components/FullScreenLoader.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import { Loader } from "./Loader";
|
||||
|
||||
interface FullScreenLoaderProps {
|
||||
text?: string;
|
||||
}
|
||||
|
||||
export const FullScreenLoader: React.FC<FullScreenLoaderProps> = ({
|
||||
text = "Loading...",
|
||||
}) => {
|
||||
return (
|
||||
<div className="fixed inset-0 flex flex-col items-center justify-center bg-white/100 z-[9999]">
|
||||
<Loader />
|
||||
|
||||
{text && (
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
{text}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,19 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { navigateTo } from './Router';
|
||||
import svgPaths from "../imports/svg-i1joeov37f";
|
||||
import PrimaryCTAButton from './PrimaryCTAButton';
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { navigateTo } from "./Router";
|
||||
import PrimaryCTAButton from "./PrimaryCTAButton";
|
||||
|
||||
interface HeroSectionItem {
|
||||
id: string;
|
||||
headline: string;
|
||||
subtext: string;
|
||||
background_image_url: string;
|
||||
cta_text: string;
|
||||
cta_destination: string;
|
||||
}
|
||||
|
||||
interface SlideData {
|
||||
id: number;
|
||||
id: string;
|
||||
title: string;
|
||||
backgroundImage: string;
|
||||
shortTitle: string;
|
||||
@@ -13,68 +21,42 @@ interface SlideData {
|
||||
route: string;
|
||||
}
|
||||
|
||||
export default function HeroSection() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
const [progressValues, setProgressValues] = useState([0, 0, 0, 0, 0, 0]);
|
||||
interface HeroSectionProps {
|
||||
heroSections: HeroSectionItem[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
const slides: SlideData[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Know Your Leaders. Strengthen Your Pipeline.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1697059361419-349e924ed363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnMlMjBzdHJhdGVneSUyMG1lZXRpbmd8ZW58MXx8fHwxNzU2ODA3Mjc0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Pipeline Development",
|
||||
ctaText: "Discover Our Assessment Solutions",
|
||||
route: '/services/leadership-pipeline-development'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Build Leaders Who Drive Business Growth",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1705234384669-c6d31c61b789?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBsZWFkZXJzaGlwJTIwZGV2ZWxvcG1lbnQlMjB0cmFpbmluZ3xlbnwxfHx8fDE3NTY4MDcyNjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Leadership Development",
|
||||
ctaText: "Explore Leadership Journeys",
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Strengthen the Backbone: Your Managers",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1565688527174-775059ac429c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW5hZ2VtZW50JTIwdGVhbSUyMGRpc2N1c3Npb24lMjBvZmZpY2V8ZW58MXx8fHwxNzU2ODA2ODg1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Management Development",
|
||||
ctaText: "Strengthen your Managerial Calibre",
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Shape Cultures That Accelerate Performance",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1531535807748-218331acbcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBjdWx0dXJlJTIwdGVhbSUyMGNvbGxhYm9yYXRpb258ZW58MXx8fHwxNzU2ODA2ODg5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Culture & Competence Consulting",
|
||||
ctaText: "Learn how we facilitate Change",
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Unlock Leadership Potential",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1714974528833-a10e19a8f951?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBjb2FjaGluZyUyMG1lbnRvciUyMGNvbnZlcnNhdGlvbnxlbnwxfHx8fDE3NTY4MDY4OTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Coaching & Mentoring",
|
||||
ctaText: "Start a Coaching Conversation",
|
||||
route: '/services/executive-coaching'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Experience Learning in a World-Class Environment",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25mZXJlbmNlJTIwY2VudGVyJTIwbGVhcm5pbmclMjBmYWNpbGl0eXxlbnwxfHx8fDE3NTY4MDc0MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
|
||||
shortTitle: "Learning Facility",
|
||||
ctaText: "Explore Our Learning Facility",
|
||||
route: '/services/learning-facility'
|
||||
}
|
||||
];
|
||||
export default function HeroSection({
|
||||
heroSections,
|
||||
isLoading,
|
||||
}: HeroSectionProps) {
|
||||
const slides: SlideData[] = heroSections.map((item) => ({
|
||||
id: item.id,
|
||||
title: item.headline,
|
||||
backgroundImage: item.background_image_url,
|
||||
shortTitle: item.subtext,
|
||||
ctaText: item.cta_text,
|
||||
route: item.cta_destination,
|
||||
}));
|
||||
|
||||
const totalSlides = slides.length;
|
||||
const slideDuration = 5000; // 5 seconds per slide
|
||||
|
||||
// Auto-advance slides
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
const [progressValues, setProgressValues] = useState<number[]>([]);
|
||||
|
||||
const slideDuration = 5000;
|
||||
|
||||
/* Initialize progress array when slides load */
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
if (totalSlides > 0) {
|
||||
setProgressValues(new Array(totalSlides).fill(0));
|
||||
}
|
||||
}, [totalSlides]);
|
||||
|
||||
/* Auto slide */
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying || totalSlides === 0) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % totalSlides);
|
||||
@@ -83,48 +65,50 @@ export default function HeroSection() {
|
||||
return () => clearInterval(interval);
|
||||
}, [isAutoPlaying, totalSlides]);
|
||||
|
||||
// Progress bar animation
|
||||
/* Progress animation */
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
if (!isAutoPlaying || totalSlides === 0) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setProgressValues(prev => {
|
||||
setProgressValues((prev) => {
|
||||
const newProgress = [...prev];
|
||||
newProgress[currentSlide] = Math.min(newProgress[currentSlide] + (100 / (slideDuration / 100)), 100);
|
||||
// Reset progress when slide changes
|
||||
|
||||
newProgress[currentSlide] = Math.min(
|
||||
newProgress[currentSlide] + 100 / (slideDuration / 100),
|
||||
100
|
||||
);
|
||||
|
||||
if (newProgress[currentSlide] >= 100) {
|
||||
newProgress[currentSlide] = 0;
|
||||
// Reset other slides
|
||||
|
||||
newProgress.forEach((_, index) => {
|
||||
if (index !== currentSlide) {
|
||||
newProgress[index] = 0;
|
||||
}
|
||||
if (index !== currentSlide) newProgress[index] = 0;
|
||||
});
|
||||
}
|
||||
|
||||
return newProgress;
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [currentSlide, isAutoPlaying]);
|
||||
}, [currentSlide, isAutoPlaying, totalSlides]);
|
||||
|
||||
// Reset progress when manually changing slides
|
||||
/* Reset progress when slide changes */
|
||||
useEffect(() => {
|
||||
setProgressValues(prev => {
|
||||
const newProgress = [0, 0, 0, 0, 0, 0];
|
||||
newProgress[currentSlide] = 0;
|
||||
return newProgress;
|
||||
});
|
||||
}, [currentSlide]);
|
||||
setProgressValues(new Array(totalSlides).fill(0));
|
||||
}, [currentSlide, totalSlides]);
|
||||
|
||||
const goToSlide = useCallback((slideIndex: number) => {
|
||||
if (slideIndex !== currentSlide) {
|
||||
setCurrentSlide(slideIndex);
|
||||
setIsAutoPlaying(false);
|
||||
// Resume auto-play after manual interaction
|
||||
setTimeout(() => setIsAutoPlaying(true), 3000);
|
||||
}
|
||||
}, [currentSlide]);
|
||||
const goToSlide = useCallback(
|
||||
(slideIndex: number) => {
|
||||
if (slideIndex !== currentSlide) {
|
||||
setCurrentSlide(slideIndex);
|
||||
setIsAutoPlaying(false);
|
||||
|
||||
setTimeout(() => setIsAutoPlaying(true), 3000);
|
||||
}
|
||||
},
|
||||
[currentSlide]
|
||||
);
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
const next = (currentSlide + 1) % totalSlides;
|
||||
@@ -136,10 +120,11 @@ export default function HeroSection() {
|
||||
goToSlide(prev);
|
||||
}, [currentSlide, totalSlides, goToSlide]);
|
||||
|
||||
// Pause auto-play on hover
|
||||
const handleMouseEnter = () => setIsAutoPlaying(false);
|
||||
const handleMouseLeave = () => setIsAutoPlaying(true);
|
||||
|
||||
if (isLoading || slides.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section
|
||||
className="hero-section"
|
||||
@@ -150,9 +135,9 @@ export default function HeroSection() {
|
||||
{slides.map((slide, index) => (
|
||||
<div
|
||||
key={slide.id}
|
||||
className={`hero-slide ${index === currentSlide ? 'active' : ''}`}
|
||||
className={`hero-slide ${index === currentSlide ? "active" : ""}`}
|
||||
style={{
|
||||
backgroundImage: `url('${slide.backgroundImage}')`
|
||||
backgroundImage: `url('${slide.backgroundImage}')`,
|
||||
}}
|
||||
>
|
||||
<div className="hero-overlay" />
|
||||
@@ -162,13 +147,10 @@ export default function HeroSection() {
|
||||
{/* Hero Content */}
|
||||
<div className="hero-content">
|
||||
<div className="hero-text-section">
|
||||
{/* Title */}
|
||||
<h1 className="hero-title" style={{ whiteSpace: 'pre-line' }}>
|
||||
<h1 className="hero-title" style={{ whiteSpace: "pre-line" }}>
|
||||
{slides[currentSlide].title}
|
||||
</h1>
|
||||
|
||||
{/* Dynamic CTA Button - Enhanced with Proper Navigation */}
|
||||
|
||||
<PrimaryCTAButton
|
||||
text={slides[currentSlide].ctaText}
|
||||
onClick={() => navigateTo(slides[currentSlide].route)}
|
||||
@@ -177,10 +159,8 @@ export default function HeroSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Bottom Navigation */}
|
||||
<div className="hero-navigation">
|
||||
{/* Progress Section */}
|
||||
<div className="hero-progress-container">
|
||||
{slides.map((slide, index) => (
|
||||
<div
|
||||
@@ -188,35 +168,41 @@ export default function HeroSection() {
|
||||
className="hero-progress-item"
|
||||
onClick={() => goToSlide(index)}
|
||||
>
|
||||
{/* Progress Bar */}
|
||||
<div
|
||||
key={slide.id}
|
||||
className="hero-progress-item"
|
||||
onClick={() => navigateTo(slide.route)}
|
||||
className={`hero-progress-segment ${
|
||||
index === currentSlide ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{/* Progress Bar */}
|
||||
<div className={`hero-progress-segment ${index === currentSlide ? 'active' : ''}`}>
|
||||
<div
|
||||
className="hero-progress-fill"
|
||||
style={{ width: index === currentSlide ? `${progressValues[index]}%` : '0%' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="hero-progress-fill"
|
||||
style={{
|
||||
width:
|
||||
index === currentSlide
|
||||
? `${progressValues[index] ?? 0}%`
|
||||
: "0%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Progress Number */}
|
||||
<div className={`hero-progress-number ${index === currentSlide ? 'active' : ''}`}>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
<div
|
||||
className={`hero-progress-number ${
|
||||
index === currentSlide ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</div>
|
||||
|
||||
{/* Progress Text */}
|
||||
<div className={`hero-progress-text ${index === currentSlide ? 'active' : ''}`}>
|
||||
{slide.shortTitle}
|
||||
</div>
|
||||
<div
|
||||
className={`hero-progress-text ${
|
||||
index === currentSlide ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{slide.shortTitle}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Navigation Arrows */}
|
||||
<div className="hero-controls">
|
||||
<button
|
||||
className="hero-nav-button"
|
||||
@@ -225,6 +211,7 @@ export default function HeroSection() {
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="hero-nav-button"
|
||||
onClick={nextSlide}
|
||||
|
||||
@@ -66,6 +66,7 @@ import privateSpaceImage from '../assets/private-space.jpg';
|
||||
import executiveBoardroomImage from '../assets/exe-boardroom.jpg';
|
||||
import morningReflectionImage from '../assets/morning.jpg';
|
||||
import campusArialViewImage from '../assets/campus-arial-view.jpg';
|
||||
import { VirtualTour360 } from './VirtualTour360';
|
||||
|
||||
const facilityFeatures = [
|
||||
{
|
||||
@@ -345,6 +346,7 @@ export function LearningFacilityNew() {
|
||||
const maxSlide = Math.max(0, facilityFeatures.length - cardsPerView);
|
||||
const maxTourSlide = Math.max(0, virtualTourStops.length - tourCardsPerView);
|
||||
|
||||
|
||||
// Handle window resize
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -419,11 +421,6 @@ export function LearningFacilityNew() {
|
||||
return () => clearInterval(interval);
|
||||
}, [heroBackgroundImages.length]);
|
||||
|
||||
const handleStartTour = () => {
|
||||
setIsVirtualTourActive(true);
|
||||
setCurrentTourStop(0);
|
||||
};
|
||||
|
||||
const handleNextStop = () => {
|
||||
if (currentTourStop < virtualTourStops.length - 1) {
|
||||
setCurrentTourStop(currentTourStop + 1);
|
||||
@@ -451,6 +448,11 @@ export function LearningFacilityNew() {
|
||||
setSelectedFacility(null);
|
||||
};
|
||||
|
||||
const [isVirtualTourOpen, setIsVirtualTourOpen] = useState(false);
|
||||
const handleStartTour = () => {
|
||||
setIsVirtualTourOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
|
||||
|
||||
@@ -1766,6 +1768,16 @@ export function LearningFacilityNew() {
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
|
||||
{/* Virtual Tour Modal */}
|
||||
<VirtualTour360
|
||||
isOpen={isVirtualTourOpen}
|
||||
onClose={() => setIsVirtualTourOpen(false)}
|
||||
onBookNow={() => {
|
||||
// Optional: auto-open booking modal after tour
|
||||
handleBookNow();
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* CTA Section - Using standardized home page CTA */}
|
||||
<CTABannerSection />
|
||||
|
||||
|
||||
175
src/components/Loader.tsx
Normal file
175
src/components/Loader.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import React from "react";
|
||||
|
||||
interface LoaderProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Loader: React.FC<LoaderProps> = ({ className = "" }) => {
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
.pl {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
.pl circle {
|
||||
transform-box: fill-box;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.pl__ring2 {
|
||||
animation: ring2_ 4s 0.04s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pl__ring4 {
|
||||
animation: ring4_ 4s 0.12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pl__ring6 {
|
||||
animation: ring6_ 4s 0.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes ring2_ {
|
||||
from {
|
||||
stroke-dashoffset: -329.207488554;
|
||||
transform: rotate(-0.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
23% {
|
||||
stroke-dashoffset: -82.46680575;
|
||||
transform: rotate(1turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
46%, 50% {
|
||||
stroke-dashoffset: -329.207488554;
|
||||
transform: rotate(2.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
73% {
|
||||
stroke-dashoffset: -82.46680575;
|
||||
transform: rotate(3.5turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
96%, to {
|
||||
stroke-dashoffset: -329.207488554;
|
||||
transform: rotate(4.75turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring4_ {
|
||||
from {
|
||||
stroke-dashoffset: -253.9600625988;
|
||||
transform: rotate(-0.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
23% {
|
||||
stroke-dashoffset: -63.61725015;
|
||||
transform: rotate(1turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
46%, 50% {
|
||||
stroke-dashoffset: -253.9600625988;
|
||||
transform: rotate(2.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
73% {
|
||||
stroke-dashoffset: -63.61725015;
|
||||
transform: rotate(3.5turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
96%, to {
|
||||
stroke-dashoffset: -253.9600625988;
|
||||
transform: rotate(4.75turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring6_ {
|
||||
from {
|
||||
stroke-dashoffset: -203.795111962;
|
||||
transform: rotate(-0.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
23% {
|
||||
stroke-dashoffset: -51.05087975;
|
||||
transform: rotate(1turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
46%, 50% {
|
||||
stroke-dashoffset: -203.795111962;
|
||||
transform: rotate(2.25turn);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
73% {
|
||||
stroke-dashoffset: -51.05087975;
|
||||
transform: rotate(3.5turn);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
96%, to {
|
||||
stroke-dashoffset: -203.795111962;
|
||||
transform: rotate(4.75turn);
|
||||
}
|
||||
}
|
||||
|
||||
.loader-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className={`loader-center ${className}`}>
|
||||
<svg
|
||||
className="pl"
|
||||
viewBox="0 0 128 128"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* Ring 2 */}
|
||||
<circle
|
||||
className="pl__ring2"
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="52.5"
|
||||
fill="none"
|
||||
stroke="hsl(240,92%,19%)"
|
||||
strokeWidth="12"
|
||||
transform="rotate(-90,64,64)"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="329.9 329.9"
|
||||
strokeDashoffset="-329.3"
|
||||
/>
|
||||
|
||||
{/* Ring 4 */}
|
||||
<circle
|
||||
className="pl__ring4"
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="37.5"
|
||||
fill="none"
|
||||
stroke="hsl(13,90%,55%)"
|
||||
strokeWidth="9"
|
||||
transform="rotate(-90,64,64)"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="254.5 254.5"
|
||||
strokeDashoffset="-254"
|
||||
/>
|
||||
|
||||
{/* Ring 6 */}
|
||||
<circle
|
||||
className="pl__ring6"
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="22.5"
|
||||
fill="none"
|
||||
stroke="hsl(47,99%,49%)"
|
||||
strokeWidth="9"
|
||||
transform="rotate(-90,64,64)"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="204.2 204.2"
|
||||
strokeDashoffset="-203.9"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import {
|
||||
Users,
|
||||
Settings,
|
||||
User,
|
||||
Globe,
|
||||
MessageSquare,
|
||||
import {
|
||||
Users,
|
||||
Settings,
|
||||
User,
|
||||
Globe,
|
||||
MessageSquare,
|
||||
GraduationCap,
|
||||
TrendingUp,
|
||||
Building,
|
||||
@@ -14,58 +14,36 @@ import {
|
||||
import { BrandedTag } from "./about/BrandedTag";
|
||||
import { StandardCTAButton } from "./StandardCTAButton";
|
||||
import { navigateTo } from "./Router";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
|
||||
// Services data
|
||||
const recognitionItems = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Leadership Pipeline Development",
|
||||
description: "Build a strong foundation for sustainable leadership succession. Identify, assess, and develop high-potential talent through structured pathways that ensure organizational continuity and growth.",
|
||||
icon: <TrendingUp size={28} />,
|
||||
route: '/services/leadership-pipeline-development'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Leadership Development",
|
||||
description: "Comprehensive programs designed to cultivate strategic thinking and emotional intelligence. Develop capabilities that drive organizational success through authentic leadership practices.",
|
||||
icon: <Users size={28} />,
|
||||
route: '/services/leadership-development'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Management Development",
|
||||
description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
|
||||
icon: <Settings size={28} />,
|
||||
route: '/services/management-development'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Culture & Competence Consulting",
|
||||
description: "Transform organizational culture and build inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create environments where everyone thrives.",
|
||||
icon: <Globe size={28} />,
|
||||
route: '/services/culture-competence'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Coaching & Mentoring",
|
||||
description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges, career advancement, and personal growth.",
|
||||
icon: <MessageSquare size={28} />,
|
||||
route: '/services/executive-coaching'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Leadership Campus (Facility)",
|
||||
description: "Experience learning in a world-class environment designed for transformation. Our state-of-the-art facility provides the perfect setting for immersive leadership development programs.",
|
||||
icon: <Building size={28} />,
|
||||
route: '/services/learning-facility'
|
||||
}
|
||||
];
|
||||
interface HighlightCard {
|
||||
card_title: string;
|
||||
icon_url: string;
|
||||
accessible_label: string;
|
||||
body_text: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
export function ServicesSection() {
|
||||
interface ServicesSectionProps {
|
||||
highlightCards?: HighlightCard[];
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function ServicesSection({ highlightCards = [], isLoading = false }: ServicesSectionProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Create service items from highlightCards data
|
||||
const serviceItems = highlightCards.map((card, index) => ({
|
||||
id: index + 1,
|
||||
title: card.card_title,
|
||||
description: card.body_text,
|
||||
iconUrl: card.icon_url,
|
||||
accessibleLabel: card.accessible_label,
|
||||
route: '/services' // You might want to map to specific routes based on title
|
||||
}));
|
||||
|
||||
// Add card refs helper
|
||||
const addCardRef = (el: HTMLDivElement | null, index: number) => {
|
||||
cardRefs.current[index] = el;
|
||||
@@ -102,11 +80,33 @@ export function ServicesSection() {
|
||||
}
|
||||
};
|
||||
|
||||
// Show loading skeleton if isLoading is true
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section ref={sectionRef} className="py-16 lg:py-20" style={{ backgroundColor: '#fff' }}>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
|
||||
<div className="h-12 bg-gray-200 rounded w-2/3 mb-4"></div>
|
||||
<div className="h-24 bg-gray-200 rounded w-full mb-8"></div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-48 bg-gray-200 rounded"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className="py-16 lg:py-20"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: '#fff',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
@@ -119,11 +119,11 @@ export function ServicesSection() {
|
||||
{/* Left Side - Sticky Content */}
|
||||
<div className="col-span-5 sticky top-24 self-start">
|
||||
<div className="recognition-header pr-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
<h2
|
||||
id="recognition-section-heading"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
@@ -133,7 +133,7 @@ export function ServicesSection() {
|
||||
</p>
|
||||
{/* CTA Button - Left aligned */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<StandardCTAButton
|
||||
<StandardCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
@@ -144,12 +144,12 @@ export function ServicesSection() {
|
||||
|
||||
{/* Right Side - Scrolling Cards */}
|
||||
<div className="col-span-7">
|
||||
<div
|
||||
<div
|
||||
className="recognition-cards space-y-6"
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
{serviceItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
ref={(el) => addCardRef(el, index)}
|
||||
@@ -159,41 +159,50 @@ export function ServicesSection() {
|
||||
aria-describedby={`recognition-desc-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
style={{
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
onClick={() => navigateTo(item.route)}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white"
|
||||
style={{
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start mb-6">
|
||||
<div
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
{/* Image icon from icon_url */}
|
||||
<img
|
||||
src={item.iconUrl}
|
||||
alt={item.accessibleLabel || item.title}
|
||||
className="w-8 h-8 object-contain filter brightness-0 invert" // Makes white icon on colored background
|
||||
onError={(e) => {
|
||||
// Fallback if image fails to load
|
||||
e.currentTarget.style.display = 'none';
|
||||
// You could add a fallback icon here if needed
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
<h3
|
||||
id={`recognition-title-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
<p
|
||||
id={`recognition-desc-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
@@ -211,11 +220,11 @@ export function ServicesSection() {
|
||||
<div className="lg:hidden">
|
||||
{/* Mobile Header */}
|
||||
<div className="text-center mb-8">
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
<BrandedTag
|
||||
text="Our Services"
|
||||
/>
|
||||
<h2
|
||||
id="recognition-section-heading-mobile"
|
||||
<h2
|
||||
id="recognition-section-heading-mobile"
|
||||
className="text-h2 mb-6"
|
||||
>
|
||||
Shaping Leaders, Cultures, and Institutions
|
||||
@@ -225,7 +234,7 @@ export function ServicesSection() {
|
||||
</p>
|
||||
{/* CTA Button - Left aligned for mobile */}
|
||||
<div className="primary-cta-container-left cta-left-locked">
|
||||
<StandardCTAButton
|
||||
<StandardCTAButton
|
||||
text="Services Page"
|
||||
onClick={() => navigateTo('/services')}
|
||||
ariaLabel="Explore our services"
|
||||
@@ -235,16 +244,16 @@ export function ServicesSection() {
|
||||
|
||||
{/* Mobile Horizontal Scrollable Cards */}
|
||||
<div className="relative">
|
||||
<div
|
||||
<div
|
||||
className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
|
||||
style={{
|
||||
style={{
|
||||
scrollSnapType: 'x mandatory',
|
||||
WebkitOverflowScrolling: 'touch'
|
||||
}}
|
||||
role="list"
|
||||
aria-label="Leadership development services"
|
||||
>
|
||||
{recognitionItems.map((item, index) => (
|
||||
{serviceItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
|
||||
@@ -253,42 +262,45 @@ export function ServicesSection() {
|
||||
aria-describedby={`recognition-desc-mobile-${item.id}`}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
style={{
|
||||
style={{
|
||||
scrollSnapAlign: 'start',
|
||||
width: '320px',
|
||||
width: '320px',
|
||||
transitionDelay: `${(index + 1) * 150}ms`,
|
||||
opacity: isVisible ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className="p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border bg-white h-full"
|
||||
style={{
|
||||
style={{
|
||||
borderColor: 'var(--color-border)',
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-brand)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start mb-6">
|
||||
<div
|
||||
<div
|
||||
className="w-12 h-12 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
|
||||
style={{
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-primary)',
|
||||
borderRadius: '12px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
<ImageWithFallback
|
||||
src={item.iconUrl}
|
||||
alt={item.accessibleLabel || item.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="recognition-card-content">
|
||||
<h3
|
||||
<h3
|
||||
id={`recognition-title-mobile-${item.id}`}
|
||||
className="text-h4 mb-4"
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
<p
|
||||
id={`recognition-desc-mobile-${item.id}`}
|
||||
className="text-small text-muted leading-relaxed"
|
||||
>
|
||||
@@ -301,8 +313,6 @@ export function ServicesSection() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { useAnimatedCounter } from "./hooks/useAnimatedCounter";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { BrandedTag } from "./about/BrandedTag";
|
||||
import { PrimaryCTAButton } from "./PrimaryCTAButton";
|
||||
import { useAnimatedCounter } from "../redux/hooks/useAnimatedCounter";
|
||||
|
||||
interface Stat {
|
||||
id: string;
|
||||
number: number;
|
||||
suffix: string;
|
||||
label: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
interface StatsSectionProps {
|
||||
stats: Stat[];
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
interface StatItemProps {
|
||||
end: number;
|
||||
@@ -17,123 +27,104 @@ function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
|
||||
|
||||
return (
|
||||
<div className="mb-0">
|
||||
{/* Top line */}
|
||||
<div
|
||||
<div
|
||||
className="w-full h-[1px] mb-4"
|
||||
style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
|
||||
style={{ backgroundColor: "var(--color-brand-gray-muted)" }}
|
||||
/>
|
||||
|
||||
{/* Large number */}
|
||||
|
||||
<span
|
||||
ref={ref}
|
||||
className="stats-number mb-3 leading-none"
|
||||
style={{
|
||||
color: 'var(--color-brand-primary)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
style={{
|
||||
color: "var(--color-brand-primary)",
|
||||
fontFamily: "var(--font-family-base)",
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
|
||||
{/* Yellow square and label */}
|
||||
|
||||
<div className="flex items-center mb-4">
|
||||
<div
|
||||
<div
|
||||
className="w-2 h-2 mr-3 flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-brand-accent)' }}
|
||||
style={{ backgroundColor: "var(--color-brand-accent)" }}
|
||||
/>
|
||||
<span
|
||||
<span
|
||||
className="text-eyebrow"
|
||||
style={{ color: 'var(--color-brand-black)' }}
|
||||
style={{ color: "var(--color-brand-black)" }}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Bottom line */}
|
||||
<div
|
||||
|
||||
<div
|
||||
className="w-full h-[1px]"
|
||||
style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
|
||||
style={{ backgroundColor: "var(--color-brand-gray-muted)" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatsSection() {
|
||||
export function StatsSection({ stats = [], isLoading }: StatsSectionProps) {
|
||||
|
||||
const sortedStats = [...stats].sort(
|
||||
(a, b) => a.display_order - b.display_order
|
||||
);
|
||||
|
||||
if (isLoading) return null;
|
||||
|
||||
return (
|
||||
<section
|
||||
<section
|
||||
className="py-20"
|
||||
style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
|
||||
style={{ backgroundColor: "var(--color-brand-bg-light)" }}
|
||||
>
|
||||
<div className="section-margin-x">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="mb-12 lg:mb-16 md:mb-12 sm:mb-8">
|
||||
{/* Branded Tag */}
|
||||
<BrandedTag
|
||||
text="Serving Leaders Across Industries"
|
||||
/>
|
||||
|
||||
{/* Main Heading */}
|
||||
<BrandedTag text="Serving Leaders Across Industries" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
|
||||
<div className="lg:col-span-6 md:col-span-8 sm:col-span-12">
|
||||
<h2 className="text-h2 mb-8">
|
||||
Your Partner in Leadership, Culture, and Capability Building
|
||||
Your Partner in Leadership, Culture, and Capability Building
|
||||
</h2>
|
||||
{/* CTA Button */}
|
||||
<PrimaryCTAButton
|
||||
|
||||
<PrimaryCTAButton
|
||||
text="About Us"
|
||||
onClick={() => console.log('About us clicked')}
|
||||
onClick={() => console.log("About us clicked")}
|
||||
ariaLabel="Learn more about KLC"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Desktop Statistics */}
|
||||
{/* Desktop */}
|
||||
<div className="hidden lg:block lg:col-start-9 lg:col-end-13">
|
||||
<div className="space-y-6">
|
||||
<StatItem
|
||||
end={27000}
|
||||
suffix="+"
|
||||
label="LEADERS DEVELOPED"
|
||||
duration={2500}
|
||||
/>
|
||||
<StatItem
|
||||
end={150}
|
||||
suffix="+"
|
||||
label="CORPORATES"
|
||||
duration={2000}
|
||||
/>
|
||||
<StatItem
|
||||
end={5000}
|
||||
suffix="+"
|
||||
label="ROOM NIGHTS UTILISED"
|
||||
duration={1800}
|
||||
/>
|
||||
{sortedStats.map((stat) => (
|
||||
<StatItem
|
||||
key={stat.id}
|
||||
end={stat.number}
|
||||
suffix={stat.suffix}
|
||||
label={stat.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Statistics - Show below content on mobile/tablet */}
|
||||
{/* Mobile */}
|
||||
<div className="block lg:hidden mt-12">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 sm:gap-8">
|
||||
<StatItem
|
||||
end={27000}
|
||||
suffix="+"
|
||||
label="LEADERS DEVELOPED"
|
||||
duration={2500}
|
||||
/>
|
||||
<StatItem
|
||||
end={150}
|
||||
suffix="+"
|
||||
label="CORPORATE CLIENTS"
|
||||
duration={2000}
|
||||
/>
|
||||
<StatItem
|
||||
end={20}
|
||||
suffix="+"
|
||||
label="COUNTRIES SERVED"
|
||||
duration={1800}
|
||||
/>
|
||||
{sortedStats.map((stat) => (
|
||||
<StatItem
|
||||
key={stat.id}
|
||||
end={stat.number}
|
||||
suffix={stat.suffix}
|
||||
label={stat.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
355
src/components/VirtualTour360.tsx
Normal file
355
src/components/VirtualTour360.tsx
Normal file
@@ -0,0 +1,355 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
import panormaImage from '../assets/panoramas/cedar_bridge_sunset.jpg';
|
||||
import panormaImage2 from '../assets/panoramas/cayley_interior.jpg';
|
||||
|
||||
interface VirtualTour360Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onBookNow?: () => void;
|
||||
}
|
||||
|
||||
// Your 360° panorama images
|
||||
const tourScenes = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Cedar Bridge Sunset",
|
||||
capacity: "Outdoor Learning Space",
|
||||
description: "A serene outdoor setting with stunning sunset views, perfect for meditation and reflection sessions at Kautilya Leadership Centre.",
|
||||
features: ["Natural environment", "Sunset views", "Peaceful atmosphere", "Meditation area", "Reflection space"],
|
||||
panoramaUrl: panormaImage
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Training Amphitheater",
|
||||
capacity: "80-120 attendees",
|
||||
description: "State-of-the-art amphitheater with tiered seating, advanced acoustics, and immersive presentation technology.",
|
||||
features: ["Tiered seating", "4K projection", "Live streaming", "Acoustic panels"],
|
||||
panoramaUrl: panormaImage2
|
||||
},
|
||||
];
|
||||
|
||||
export function VirtualTour360({ isOpen, onClose, onBookNow }: VirtualTour360Props) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [currentSceneIndex, setCurrentSceneIndex] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Three.js refs
|
||||
const sceneRef = useRef<THREE.Scene | null>(null);
|
||||
const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
|
||||
const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
|
||||
const controlsRef = useRef<OrbitControls | null>(null);
|
||||
const currentMeshRef = useRef<THREE.Mesh | null>(null);
|
||||
const currentTextureRef = useRef<THREE.Texture | null>(null);
|
||||
const animationRef = useRef<number | null>(null);
|
||||
|
||||
// Initialize Three.js scene
|
||||
useEffect(() => {
|
||||
if (!isOpen || !containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
// Setup scene
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x050510);
|
||||
sceneRef.current = scene;
|
||||
|
||||
// Setup camera
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 0, 0.1);
|
||||
cameraRef.current = camera;
|
||||
|
||||
// Setup renderer
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.domElement.style.touchAction = "none"; // Important for touch events
|
||||
container.appendChild(renderer.domElement);
|
||||
rendererRef.current = renderer;
|
||||
|
||||
// Setup controls - ONLY ROTATION (no built-in zoom)
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableZoom = false; // Disable built-in zoom, we'll handle custom zoom
|
||||
controls.enablePan = false;
|
||||
controls.enableRotate = true;
|
||||
controls.rotateSpeed = 1.2;
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.target.set(0, 0, 0);
|
||||
controlsRef.current = controls;
|
||||
|
||||
// 🔥 CUSTOM ZOOM - Mouse wheel (desktop)
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
if (!cameraRef.current) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const zoomSpeed = 0.05;
|
||||
cameraRef.current.fov += event.deltaY * zoomSpeed;
|
||||
|
||||
// Limit zoom range
|
||||
cameraRef.current.fov = Math.max(40, Math.min(90, cameraRef.current.fov));
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
};
|
||||
|
||||
renderer.domElement.addEventListener("wheel", handleWheel, { passive: false });
|
||||
|
||||
// 🔥 CUSTOM ZOOM - Mobile pinch gesture
|
||||
let lastDistance = 0;
|
||||
|
||||
const getDistance = (touches: TouchList) => {
|
||||
if (touches.length < 2) return 0;
|
||||
const dx = touches[0].clientX - touches[1].clientX;
|
||||
const dy = touches[0].clientY - touches[1].clientY;
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
};
|
||||
|
||||
const handleTouchMove = (e: TouchEvent) => {
|
||||
if (!cameraRef.current) return;
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
e.preventDefault();
|
||||
|
||||
const distance = getDistance(e.touches);
|
||||
|
||||
if (lastDistance > 0) {
|
||||
const delta = distance - lastDistance;
|
||||
cameraRef.current.fov -= delta * 0.05;
|
||||
cameraRef.current.fov = Math.max(40, Math.min(90, cameraRef.current.fov));
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
lastDistance = distance;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
lastDistance = 0;
|
||||
};
|
||||
|
||||
renderer.domElement.addEventListener("touchmove", handleTouchMove, { passive: false });
|
||||
renderer.domElement.addEventListener("touchend", handleTouchEnd);
|
||||
|
||||
// Animation loop
|
||||
const animate = () => {
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
|
||||
if (controlsRef.current) controlsRef.current.update();
|
||||
if (rendererRef.current && sceneRef.current && cameraRef.current) {
|
||||
rendererRef.current.render(sceneRef.current, cameraRef.current);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
|
||||
// Load first panorama
|
||||
loadPanorama(tourScenes[0].panoramaUrl);
|
||||
|
||||
// Handle window resize
|
||||
const handleResize = () => {
|
||||
if (cameraRef.current && rendererRef.current) {
|
||||
cameraRef.current.aspect = window.innerWidth / window.innerHeight;
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
rendererRef.current.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
if (animationRef.current) cancelAnimationFrame(animationRef.current);
|
||||
|
||||
window.removeEventListener('resize', handleResize);
|
||||
renderer.domElement.removeEventListener("wheel", handleWheel);
|
||||
renderer.domElement.removeEventListener("touchmove", handleTouchMove);
|
||||
renderer.domElement.removeEventListener("touchend", handleTouchEnd);
|
||||
|
||||
if (controlsRef.current) controlsRef.current.dispose();
|
||||
if (rendererRef.current) rendererRef.current.dispose();
|
||||
if (currentTextureRef.current) currentTextureRef.current.dispose();
|
||||
|
||||
if (container && renderer.domElement && container.contains(renderer.domElement)) {
|
||||
container.removeChild(renderer.domElement);
|
||||
}
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// Load panorama image
|
||||
const loadPanorama = (imageUrl: string) => {
|
||||
if (!sceneRef.current) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
textureLoader.load(
|
||||
imageUrl,
|
||||
(texture) => {
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
texture.wrapT = THREE.ClampToEdgeWrapping;
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
// Remove old mesh
|
||||
if (currentMeshRef.current) sceneRef.current?.remove(currentMeshRef.current);
|
||||
if (currentTextureRef.current) currentTextureRef.current.dispose();
|
||||
|
||||
// Create new sphere with texture
|
||||
const geometry = new THREE.SphereGeometry(500, 64, 64);
|
||||
const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
sceneRef.current?.add(sphere);
|
||||
|
||||
currentMeshRef.current = sphere;
|
||||
currentTextureRef.current = texture;
|
||||
|
||||
// Reset camera FOV when loading new scene
|
||||
if (cameraRef.current) {
|
||||
cameraRef.current.fov = 75;
|
||||
cameraRef.current.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
},
|
||||
undefined,
|
||||
(error) => {
|
||||
console.error('Error loading panorama:', error);
|
||||
setIsLoading(false);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Navigate to next scene
|
||||
const nextScene = () => {
|
||||
const nextIndex = (currentSceneIndex + 1) % tourScenes.length;
|
||||
setCurrentSceneIndex(nextIndex);
|
||||
loadPanorama(tourScenes[nextIndex].panoramaUrl);
|
||||
};
|
||||
|
||||
// Navigate to previous scene
|
||||
const prevScene = () => {
|
||||
const prevIndex = (currentSceneIndex - 1 + tourScenes.length) % tourScenes.length;
|
||||
setCurrentSceneIndex(prevIndex);
|
||||
loadPanorama(tourScenes[prevIndex].panoramaUrl);
|
||||
};
|
||||
|
||||
// Jump to specific scene
|
||||
const goToScene = (index: number) => {
|
||||
setCurrentSceneIndex(index);
|
||||
loadPanorama(tourScenes[index].panoramaUrl);
|
||||
};
|
||||
|
||||
const currentScene = tourScenes[currentSceneIndex];
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] bg-black">
|
||||
{/* Canvas container for Three.js */}
|
||||
<div ref={containerRef} className="absolute inset-0" />
|
||||
|
||||
{/* UI Overlay */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
{/* Top Bar */}
|
||||
<div className="absolute top-0 left-0 right-0 bg-gradient-to-r from-[#04045B]/95 to-[#04045B]/80 backdrop-blur-md border-b border-yellow-400/30 pointer-events-auto z-30">
|
||||
<div className="flex justify-between items-center px-4 md:px-6 py-3 md:py-4">
|
||||
<div className="flex items-center gap-2 md:gap-3">
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 bg-yellow-400 rounded-xl flex items-center justify-center font-bold text-[#04045B] text-base md:text-xl">
|
||||
KL
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-white font-semibold text-sm md:text-lg">Kautilya Leadership Centre</h1>
|
||||
<p className="text-white/70 text-xs">360° Immersive Experience</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 md:gap-3">
|
||||
<button
|
||||
onClick={prevScene}
|
||||
className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-yellow-400 hover:text-[#04045B] transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
|
||||
aria-label="Previous scene"
|
||||
>
|
||||
◀
|
||||
</button>
|
||||
<div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 md:px-4 rounded-full text-xs md:text-sm font-medium">
|
||||
{currentScene.title}
|
||||
</div>
|
||||
<button
|
||||
onClick={nextScene}
|
||||
className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-yellow-400 hover:text-[#04045B] transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
|
||||
aria-label="Next scene"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-red-500 transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
|
||||
aria-label="Close"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Panel - Bottom Left */}
|
||||
<div className="absolute bottom-4 md:bottom-6 left-4 md:left-6 max-w-[280px] md:max-w-[320px] bg-[#04045B]/90 backdrop-blur-md rounded-xl md:rounded-2xl p-4 md:p-5 border border-yellow-400/40 pointer-events-auto z-25">
|
||||
<h2 className="text-yellow-400 text-lg md:text-2xl font-bold mb-1">{currentScene.title}</h2>
|
||||
<div className="text-white/80 text-xs md:text-sm mb-2 md:mb-3 flex items-center gap-2">
|
||||
🎯 Capacity: {currentScene.capacity}
|
||||
</div>
|
||||
<p className="text-white/90 text-xs md:text-sm mb-3 md:mb-4 leading-relaxed">
|
||||
{currentScene.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5 md:gap-2 mb-3 md:mb-4">
|
||||
{currentScene.features.map((feature, idx) => (
|
||||
<span key={idx} className="bg-yellow-400/20 text-yellow-400 text-[10px] md:text-xs px-2 py-1 md:px-3 rounded-full">
|
||||
✓ {feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
onBookNow?.();
|
||||
onClose();
|
||||
}}
|
||||
className="w-full bg-yellow-400 hover:bg-yellow-500 text-[#04045B] font-bold py-2 md:py-2.5 rounded-full transition-all flex items-center justify-center gap-2 text-sm md:text-base touch-manipulation"
|
||||
>
|
||||
📅 Book This Space →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scene Thumbnails - Bottom Right */}
|
||||
<div className="absolute bottom-4 md:bottom-6 right-4 md:right-6 flex flex-col gap-2 pointer-events-auto z-25">
|
||||
{tourScenes.map((scene, idx) => (
|
||||
<button
|
||||
key={scene.id}
|
||||
onClick={() => goToScene(idx)}
|
||||
className={`bg-black/70 backdrop-blur-sm rounded-full px-3 py-1.5 md:px-4 md:py-2 flex items-center gap-2 md:gap-3 hover:bg-[#04045B]/90 transition-all touch-manipulation ${
|
||||
idx === currentSceneIndex ? 'border-l-4 border-yellow-400' : 'border-l-4 border-yellow-400/40'
|
||||
}`}
|
||||
>
|
||||
<div className="w-1.5 h-1.5 md:w-2 md:h-2 bg-yellow-400 rounded-full" />
|
||||
<span className="text-white text-[10px] md:text-xs font-medium truncate max-w-[120px] md:max-w-[150px]">
|
||||
{scene.title}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-[#04045B] flex items-center justify-center z-50">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 border-4 border-yellow-400/30 border-t-yellow-400 rounded-full animate-spin mx-auto mb-4"></div>
|
||||
<p className="text-white text-sm">Loading 360° Experience...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instruction Hint */}
|
||||
<div className="absolute bottom-4 md:bottom-6 left-1/2 transform -translate-x-1/2 bg-black/60 backdrop-blur-sm rounded-full px-3 py-1.5 md:px-4 md:py-2 text-white text-[10px] md:text-xs pointer-events-auto whitespace-nowrap">
|
||||
🖱️ Drag to look around • 👆 Pinch/Scroll to zoom in/out
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
src/global.d.ts
vendored
14
src/global.d.ts
vendored
@@ -1,5 +1,15 @@
|
||||
// declarations.d.ts
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
// Vite ENV typing
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
|
||||
// Image modules
|
||||
declare module "*.png" {
|
||||
const src: string;
|
||||
export default src;
|
||||
@@ -23,4 +33,4 @@ declare module "*.svg" {
|
||||
export { ReactComponent };
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
}
|
||||
13
src/main.tsx
13
src/main.tsx
@@ -4,9 +4,14 @@ import "../src/styles/globals.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import ScrollToTop from "./components/ScrollToTop";
|
||||
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "./redux/store/Store";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<BrowserRouter>
|
||||
<ScrollToTop />
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<ScrollToTop />
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
);
|
||||
@@ -1,16 +1,45 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Minus, HelpCircle, Mail } from 'lucide-react';
|
||||
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useGetFaqsQuery, useGetFaqCategoriesQuery } from '../redux/services/faqApi';
|
||||
|
||||
interface FAQItemProps {
|
||||
question: string;
|
||||
answer: string;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
tags?: Array<{ tag_name: string; display_order: number }>;
|
||||
}
|
||||
|
||||
const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle }) => {
|
||||
interface FAQItemData {
|
||||
id: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
content_status: string;
|
||||
content_category_xid: string;
|
||||
content_category: {
|
||||
id: string;
|
||||
category_name: string;
|
||||
};
|
||||
faq_tags: Array<{
|
||||
id: string;
|
||||
tag_name: string;
|
||||
display_order: number;
|
||||
}>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface CategoryData {
|
||||
id: string;
|
||||
category_name: string;
|
||||
display_order: number;
|
||||
for_faq: boolean;
|
||||
for_blog: boolean;
|
||||
}
|
||||
|
||||
const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle, tags }) => {
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-6 mb-4 transition-all duration-300 hover:shadow-md">
|
||||
<button
|
||||
@@ -22,109 +51,136 @@ const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle })
|
||||
</h3>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
{isOpen ? (
|
||||
<Minus
|
||||
<Minus
|
||||
className="w-5 h-5 transition-transform duration-200"
|
||||
style={{ color: 'var(--color-primary)' }}
|
||||
/>
|
||||
) : (
|
||||
<Plus
|
||||
<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'
|
||||
}`}
|
||||
|
||||
<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)' }}>
|
||||
<p className="text-body-lg leading-relaxed mb-4" style={{ color: 'var(--color-black)' }}>
|
||||
{answer}
|
||||
</p>
|
||||
|
||||
{/* Display tags if available */}
|
||||
{tags && tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{tags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-small"
|
||||
>
|
||||
{tag.tag_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function FAQ() {
|
||||
const [openItems, setOpenItems] = useState<number[]>([]);
|
||||
const [openItems, setOpenItems] = useState<string[]>([]);
|
||||
const [activeCategory, setActiveCategory] = useState<string>('all');
|
||||
const [filteredFaqs, setFilteredFaqs] = useState<FAQItemData[]>([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const toggleItem = (index: number) => {
|
||||
setOpenItems(prev =>
|
||||
prev.includes(index)
|
||||
? prev.filter(i => i !== index)
|
||||
: [...prev, index]
|
||||
// Fetch FAQ categories
|
||||
const {
|
||||
data: categoriesResponse,
|
||||
isLoading: isLoadingCategories
|
||||
} = useGetFaqCategoriesQuery({
|
||||
limit: 100,
|
||||
offset: 0
|
||||
});
|
||||
|
||||
// Fetch FAQs with publish status
|
||||
const {
|
||||
data: faqResponse,
|
||||
isLoading: isLoadingFaqs,
|
||||
isError,
|
||||
refetch
|
||||
} = useGetFaqsQuery({
|
||||
content_status: 'publish',
|
||||
limit: 20
|
||||
});
|
||||
|
||||
// Filter categories to only those marked for FAQ
|
||||
const categories = [
|
||||
{ id: 'all', label: 'All Questions' },
|
||||
...(categoriesResponse?.data?.items
|
||||
?.filter((category: CategoryData) => category.for_faq)
|
||||
.map((category: CategoryData) => ({
|
||||
id: category.id, // Use the actual category ID
|
||||
label: category.category_name,
|
||||
display_order: category.display_order
|
||||
}))
|
||||
.sort((a:any, b:any) => (a.display_order || 0) - (b.display_order || 0)) || [])
|
||||
];
|
||||
|
||||
// Filter FAQs based on active category
|
||||
useEffect(() => {
|
||||
if (faqResponse?.data?.items) {
|
||||
if (activeCategory === 'all') {
|
||||
setFilteredFaqs(faqResponse.data.items);
|
||||
} else {
|
||||
// Filter by content_category_xid using the actual category ID
|
||||
const filtered = faqResponse.data.items.filter(
|
||||
(item: FAQItemData) => item.content_category_xid === activeCategory
|
||||
);
|
||||
setFilteredFaqs(filtered);
|
||||
}
|
||||
}
|
||||
}, [activeCategory, faqResponse]);
|
||||
|
||||
const toggleItem = (id: string) => {
|
||||
setOpenItems(prev =>
|
||||
prev.includes(id)
|
||||
? prev.filter(i => i !== id)
|
||||
: [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
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' }
|
||||
];
|
||||
// Handle loading state
|
||||
if (isLoadingFaqs || isLoadingCategories) {
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
|
||||
<p className="mt-4 text-gray-600">Loading FAQs...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
// Handle error state
|
||||
if (isError) {
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<HelpCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-h3 mb-2">Failed to load FAQs</h2>
|
||||
<p className="text-gray-600 mb-4">Please try again later</p>
|
||||
<PrimaryCTAButton
|
||||
text="Retry"
|
||||
onClick={() => refetch()}
|
||||
className="cta-text-black"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen">
|
||||
@@ -135,49 +191,63 @@ export function FAQ() {
|
||||
<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>
|
||||
{/* Category Filter Tags - Only show if there are categories */}
|
||||
{categories.length > 1 && (
|
||||
<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>
|
||||
{filteredFaqs.length > 0 ? (
|
||||
<div className="space-y-0">
|
||||
{filteredFaqs.map((faq) => (
|
||||
<FAQItem
|
||||
key={faq.id}
|
||||
question={faq.question}
|
||||
answer={faq.answer}
|
||||
// tags={faq.faq_tags}
|
||||
isOpen={openItems.includes(faq.id)}
|
||||
onToggle={() => toggleItem(faq.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<HelpCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-h4 mb-2">No FAQs found</h3>
|
||||
<p className="text-gray-600">
|
||||
{activeCategory === 'all'
|
||||
? 'No published FAQs available at the moment.'
|
||||
: 'No FAQs available in this category.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -188,24 +258,24 @@ export function FAQ() {
|
||||
<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
|
||||
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
|
||||
|
||||
<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)' }}
|
||||
|
||||
@@ -1,32 +1,43 @@
|
||||
import React from 'react';
|
||||
import HeroSection from '../components/HeroSection';
|
||||
import { StatsSection } from '../components/StatsSection';
|
||||
import { LogosSection } from '../components/LogosSection';
|
||||
import { ServicesSection } from '../components/ServicesSection';
|
||||
import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
|
||||
import { TestimonialsSection } from '../components/TestimonialsSection';
|
||||
import { UpcomingWebinarsSection } from '../components/UpcomingWebinarsSection';
|
||||
import { InsightsSection } from '../components/InsightsSection';
|
||||
import { WhitepapersSection } from '../components/WhitepapersSection';
|
||||
import { CTABannerSection } from '../components/CTABannerSection';
|
||||
import React from "react";
|
||||
import HeroSection from "../components/HeroSection";
|
||||
import { StatsSection } from "../components/StatsSection";
|
||||
import { LogosSection } from "../components/LogosSection";
|
||||
import { ServicesSection } from "../components/ServicesSection";
|
||||
import { VirtualSpaceSection } from "../components/VirtualSpaceSection";
|
||||
import { TestimonialsSection } from "../components/TestimonialsSection";
|
||||
import { InsightsSection } from "../components/InsightsSection";
|
||||
import { CTABannerSection } from "../components/CTABannerSection";
|
||||
import { motion } from "motion/react";
|
||||
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
|
||||
import { BrandedTag } from '../components/about/BrandedTag';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
|
||||
import { PrimaryCTAButton } from "../components/PrimaryCTAButton";
|
||||
import { BrandedTag } from "../components/about/BrandedTag";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useGetHomepageQuery } from "../redux/services/homepageApi";
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data, isLoading } = useGetHomepageQuery({
|
||||
landing_page_type: "home",
|
||||
});
|
||||
|
||||
const heroSections = data?.hero_sections ?? [];
|
||||
const stats = data?.stats_sections ?? [];
|
||||
const highlightCards = data?.highlight_cards ?? [];
|
||||
const ctaBands = data?.cta_bands ?? [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<HeroSection heroSections={heroSections} isLoading={isLoading} />
|
||||
|
||||
{/* Stats Section */}
|
||||
<StatsSection stats={stats} isLoading={isLoading} />
|
||||
|
||||
<LogosSection />
|
||||
<ServicesSection />
|
||||
<ServicesSection highlightCards={highlightCards} isLoading={isLoading} />
|
||||
|
||||
<div>
|
||||
<div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
|
||||
{/* Branded Tag */}
|
||||
<div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec">
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -40,7 +51,6 @@ const HomePage: React.FC = () => {
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -51,7 +61,6 @@ const HomePage: React.FC = () => {
|
||||
Experience Our Space Virtually
|
||||
</motion.h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -59,10 +68,10 @@ const HomePage: React.FC = () => {
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
|
||||
Take a virtual walk through our state-of-the-art facility designed to
|
||||
inspire leadership excellence and foster collaborative learning.
|
||||
</motion.p>
|
||||
|
||||
{/* Main CTA Button - Explore Our Space */}
|
||||
<motion.div
|
||||
className="flex justify-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -73,19 +82,19 @@ const HomePage: React.FC = () => {
|
||||
<div className="hero-slide-button">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Space"
|
||||
onClick={() => navigate('/services/learning-facility')}
|
||||
onClick={() => navigate("/services/learning-facility")}
|
||||
ariaLabel="Explore our virtual learning space and facilities"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<VirtualSpaceSection />
|
||||
</div>
|
||||
|
||||
<TestimonialsSection />
|
||||
{/* <UpcomingWebinarsSection /> */}
|
||||
<InsightsSection />
|
||||
{/* <WhitepapersSection /> */}
|
||||
<CTABannerSection />
|
||||
<CTABannerSection ctaBands={ctaBands} isLoading={isLoading} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
// import { navigateTo } from './Router';
|
||||
import { navigateTo } from '../components/Router';
|
||||
import svgPaths from "../imports/svg-i1joeov37f";
|
||||
import { StatsSection } from '../components/StatsSection';
|
||||
import { LogosSection } from '../components/LogosSection';
|
||||
import { ServicesSection } from '../components/ServicesSection';
|
||||
import { ServicesSectionNew } from '../components/ServiceSectionNew';
|
||||
import { LearningEnvionment } from '../components/LearningEnvionment';
|
||||
import { motion } from "motion/react";
|
||||
import { BrandedTag } from '../components/about/BrandedTag';
|
||||
import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
|
||||
import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import HeroSection from '../components/HeroSection';
|
||||
interface SlideData {
|
||||
id: number;
|
||||
title: string;
|
||||
backgroundImage: string;
|
||||
shortTitle: string;
|
||||
ctaText: string;
|
||||
}
|
||||
|
||||
export default function HomePageNew() {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const navigate = useNavigate()
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<LogosSection />
|
||||
<ServicesSectionNew />
|
||||
{/* <LearningEnvionment /> */}
|
||||
<div>
|
||||
<div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
|
||||
{/* Branded Tag */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<BrandedTag
|
||||
text="Virtual Learning Environment"
|
||||
className="justify-center"
|
||||
variant="white"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Experience Our Space Virtually
|
||||
</motion.h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<motion.p
|
||||
className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
|
||||
</motion.p>
|
||||
|
||||
{/* Main CTA Button - Explore Our Space */}
|
||||
<motion.div
|
||||
className="flex justify-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="hero-slide-button">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Space"
|
||||
onClick={() => navigate('/services/learning-facility')}
|
||||
ariaLabel="Explore our virtual learning space and facilities"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<VirtualSpaceSection />
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
82
src/redux/services/aboutUsApi.ts
Normal file
82
src/redux/services/aboutUsApi.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
|
||||
export interface HeroSection {
|
||||
id: string;
|
||||
background_image_url: string;
|
||||
background_image_alt_text: string;
|
||||
headline: string;
|
||||
subtext: string;
|
||||
cta_text: string;
|
||||
cta_destination: string;
|
||||
}
|
||||
|
||||
export interface HowWeWorkItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image_url: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
export interface StatItem {
|
||||
id: string;
|
||||
number: number;
|
||||
suffix: string;
|
||||
label: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
export interface TeamMember {
|
||||
id: string;
|
||||
display_order: number;
|
||||
name_role: string;
|
||||
photo_url: string;
|
||||
alt_text: string;
|
||||
bio: string;
|
||||
}
|
||||
|
||||
export interface AboutUsData {
|
||||
hero_section: HeroSection;
|
||||
our_promise_title: string;
|
||||
how_we_work_title: string;
|
||||
who_we_are_title: string;
|
||||
our_team_title: string;
|
||||
how_we_work: HowWeWorkItem[];
|
||||
stat_section: StatItem[];
|
||||
our_team: TeamMember[];
|
||||
}
|
||||
|
||||
export interface AboutUsResponse {
|
||||
success: boolean;
|
||||
status: number;
|
||||
message: string;
|
||||
data: AboutUsData;
|
||||
}
|
||||
|
||||
export const aboutUsApi = createApi({
|
||||
reducerPath: "aboutUsApi",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
tagTypes: ["AboutUs"],
|
||||
endpoints: (builder) => ({
|
||||
|
||||
// ✅ GET About Us
|
||||
getAboutUs: builder.query<AboutUsData, void>({
|
||||
query: () => ({
|
||||
url: "/admin/about-us",
|
||||
method: "GET",
|
||||
}),
|
||||
|
||||
// 🔥 extract only useful data
|
||||
transformResponse: (response: AboutUsResponse) => response.data,
|
||||
|
||||
providesTags: ["AboutUs"],
|
||||
}),
|
||||
|
||||
}),
|
||||
});
|
||||
|
||||
export const {
|
||||
useGetAboutUsQuery,
|
||||
} = aboutUsApi;
|
||||
@@ -1,14 +1,12 @@
|
||||
import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
const rawBaseQuery = fetchBaseQuery({
|
||||
baseUrl: 'http://localhost:3000/api',
|
||||
baseUrl: import.meta.env.VITE_API_URL,
|
||||
});
|
||||
|
||||
const baseQueryWithReauth = async (args: any, api: any, extraOptions: any) => {
|
||||
const result = await rawBaseQuery(args, api, extraOptions);
|
||||
|
||||
// Optional: reauthentication logic if result.error?.status === 401
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
126
src/redux/services/blogApi.ts
Normal file
126
src/redux/services/blogApi.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
export interface BlogTag {
|
||||
id: string;
|
||||
blog_xid: string;
|
||||
tag_name: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
export interface BlogItem {
|
||||
id: string;
|
||||
content_category: string;
|
||||
content_type: string;
|
||||
title: string;
|
||||
slug_name: string;
|
||||
content: string;
|
||||
banner_img: string;
|
||||
meta_title: string;
|
||||
meta_description: string;
|
||||
content_status: string;
|
||||
updated_at: string;
|
||||
blog_tags: BlogTag[];
|
||||
short_description: string | null;
|
||||
content_category_id?: string; // Add this field to store the category ID
|
||||
}
|
||||
|
||||
export interface Pagination {
|
||||
limit: number;
|
||||
offset: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface BlogListResponse {
|
||||
success: boolean;
|
||||
status: number;
|
||||
message: string;
|
||||
data: {
|
||||
pagination: Pagination;
|
||||
items: BlogItem[];
|
||||
};
|
||||
errors: any;
|
||||
correlation_id: string;
|
||||
}
|
||||
|
||||
export interface BlogListParams {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
search?: string;
|
||||
content_status?: string;
|
||||
content_type?: string;
|
||||
date_range?:
|
||||
| "all_time"
|
||||
| "last_7_days"
|
||||
| "last_30_days"
|
||||
| "last_3_months"
|
||||
| "last_6_months";
|
||||
sort_by?: "most_recent" | "oldest_first" | "title_az";
|
||||
content_category_id?: string; // Changed from category to content_category_id
|
||||
tag_id?: string;
|
||||
}
|
||||
|
||||
export interface BlogByIdResponse {
|
||||
success: boolean;
|
||||
status: number;
|
||||
message: string;
|
||||
data: BlogItem;
|
||||
errors: any;
|
||||
correlation_id: string;
|
||||
}
|
||||
|
||||
export const blogApi = createApi({
|
||||
reducerPath: "blogApi",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
tagTypes: ["blog"],
|
||||
endpoints: (builder) => ({
|
||||
// ✅ GET BLOGS LIST
|
||||
getBlogs: builder.query<BlogListResponse, BlogListParams>({
|
||||
query: ({
|
||||
limit = 10,
|
||||
offset = 0,
|
||||
search,
|
||||
content_status = "publish",
|
||||
content_type,
|
||||
date_range,
|
||||
sort_by = "most_recent",
|
||||
content_category_id,
|
||||
tag_id,
|
||||
}) => {
|
||||
// Build params object
|
||||
const params: Record<string, any> = {
|
||||
limit,
|
||||
offset,
|
||||
sort_by,
|
||||
};
|
||||
|
||||
// Only add params if they have values
|
||||
if (search) params.search = search;
|
||||
if (content_status) params.content_status = content_status;
|
||||
if (content_type) params.content_type = content_type;
|
||||
if (date_range) params.date_range = date_range;
|
||||
if (content_category_id)
|
||||
params.content_category_id = content_category_id; // Send UUID
|
||||
if (tag_id && tag_id !== "all") params.tag_id = tag_id;
|
||||
|
||||
return {
|
||||
url: "/admin/blogs/list",
|
||||
method: "GET",
|
||||
params,
|
||||
};
|
||||
},
|
||||
providesTags: ["blog"],
|
||||
}),
|
||||
|
||||
getBlogByID: builder.query<BlogItem, string>({
|
||||
query: (id) => ({
|
||||
url: `/admin/blogs/list/${id}`,
|
||||
method: "GET",
|
||||
}),
|
||||
transformResponse: (response: BlogByIdResponse) => response.data,
|
||||
providesTags: ["blog"],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetBlogsQuery, useGetBlogByIDQuery } = blogApi;
|
||||
39
src/redux/services/contactUsApi.ts
Normal file
39
src/redux/services/contactUsApi.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
export const contactUsApi = createApi({
|
||||
reducerPath: "contactUsApi",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
tagTypes: ["LeadCategories", "Leads"],
|
||||
endpoints: (builder) => ({
|
||||
|
||||
// GET Lead Categories
|
||||
getLeadCategories: builder.query({
|
||||
query: ({ limit = 10, offset = 0, status = "active" }) => ({
|
||||
url: "admin/prepopulate/lead-categories/list",
|
||||
params: {
|
||||
limit,
|
||||
offset,
|
||||
status,
|
||||
},
|
||||
}),
|
||||
providesTags: ["LeadCategories"],
|
||||
}),
|
||||
|
||||
// CREATE Lead
|
||||
createLead: builder.mutation({
|
||||
query: (body) => ({
|
||||
url: "admin/leads/create",
|
||||
method: "POST",
|
||||
body,
|
||||
}),
|
||||
invalidatesTags: ["Leads"],
|
||||
}),
|
||||
|
||||
}),
|
||||
});
|
||||
|
||||
export const {
|
||||
useGetLeadCategoriesQuery,
|
||||
useCreateLeadMutation,
|
||||
} = contactUsApi;
|
||||
44
src/redux/services/faqApi.ts
Normal file
44
src/redux/services/faqApi.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
export const faqApi = createApi({
|
||||
reducerPath: "faqApi",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
tagTypes: ["Faq", "FaqTags"],
|
||||
endpoints: (builder) => ({
|
||||
|
||||
// GET FAQs LIST
|
||||
getFaqs: builder.query({
|
||||
query: ({ limit = 10, offset = 0, search_term, content_status, content_category_xid }) => ({
|
||||
url: "admin/faq/list",
|
||||
params: {
|
||||
limit,
|
||||
offset,
|
||||
search_term,
|
||||
content_status,
|
||||
content_category_xid,
|
||||
},
|
||||
}),
|
||||
providesTags: ["Faq"],
|
||||
}),
|
||||
|
||||
// GET category TAGS LIST
|
||||
getFaqCategories: builder.query({
|
||||
query: ({ limit = 10, offset = 0, search_query }) => ({
|
||||
url: "admin/prepopulate/content-categories/list",
|
||||
params: {
|
||||
limit,
|
||||
offset,
|
||||
search_query,
|
||||
},
|
||||
}),
|
||||
providesTags: ["FaqTags"],
|
||||
}),
|
||||
|
||||
}),
|
||||
});
|
||||
|
||||
export const {
|
||||
useGetFaqsQuery,
|
||||
useGetFaqCategoriesQuery,
|
||||
} = faqApi;
|
||||
92
src/redux/services/homepageApi.ts
Normal file
92
src/redux/services/homepageApi.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { createApi } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
/* ================= HERO TYPES ================= */
|
||||
|
||||
export interface HeroSection {
|
||||
id: string;
|
||||
landing_page_type: string;
|
||||
background_image_url: string;
|
||||
background_image_alt_text: string;
|
||||
headline: string;
|
||||
subtext: string;
|
||||
cta_text: string;
|
||||
cta_destination: string;
|
||||
}
|
||||
|
||||
/* ================= STATS TYPES ================= */
|
||||
|
||||
export interface StatItem {
|
||||
id: string;
|
||||
landing_page_type: string;
|
||||
number: number;
|
||||
suffix: string;
|
||||
label: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
/* ================= HIGHLIGHT CARD ================= */
|
||||
|
||||
export interface HighlightCard {
|
||||
card_title: string;
|
||||
icon_url: string;
|
||||
accessible_label: string;
|
||||
body_text: string;
|
||||
display_order: number;
|
||||
}
|
||||
|
||||
/* ================= CTA BAND ================= */
|
||||
|
||||
export interface CtaBand {
|
||||
id: string;
|
||||
background_image_url: string;
|
||||
background_image_alt_text: string;
|
||||
text: string;
|
||||
cta_text: string;
|
||||
cta_destination: string;
|
||||
}
|
||||
|
||||
/* ================= RESPONSE ================= */
|
||||
|
||||
export interface HomePageResponse {
|
||||
success: boolean;
|
||||
status: number;
|
||||
message: string;
|
||||
data: {
|
||||
hero_sections: HeroSection[];
|
||||
stats_sections: StatItem[];
|
||||
highlight_cards: HighlightCard[];
|
||||
cta_bands: CtaBand[];
|
||||
};
|
||||
errors: any;
|
||||
correlation_id: string;
|
||||
}
|
||||
|
||||
/* ================= API ================= */
|
||||
|
||||
export const homepageApi = createApi({
|
||||
reducerPath: "homepageApi",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
tagTypes: ["Homepage"],
|
||||
endpoints: (builder) => ({
|
||||
|
||||
getHomepage: builder.query<
|
||||
HomePageResponse["data"],
|
||||
{ landing_page_type: "home" | "services" | "about_us" }
|
||||
>({
|
||||
query: ({ landing_page_type }) => ({
|
||||
url: "/admin/home-page/list",
|
||||
params: { landing_page_type },
|
||||
}),
|
||||
|
||||
transformResponse: (response: HomePageResponse) => response.data,
|
||||
|
||||
providesTags: [{ type: "Homepage", id: "LIST" }],
|
||||
}),
|
||||
|
||||
}),
|
||||
});
|
||||
|
||||
/* ================= HOOKS ================= */
|
||||
|
||||
export const { useGetHomepageQuery } = homepageApi;
|
||||
27
src/redux/store/Store.tsx
Normal file
27
src/redux/store/Store.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { homepageApi } from "../services/homepageApi";
|
||||
import { faqApi } from "../services/faqApi";
|
||||
import { contactUsApi } from "../services/contactUsApi";
|
||||
import { blogApi } from "../services/blogApi";
|
||||
import { aboutUsApi } from "../services/aboutUsApi";
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
[homepageApi.reducerPath]: homepageApi.reducer,
|
||||
[faqApi.reducerPath]: faqApi.reducer,
|
||||
[contactUsApi.reducerPath]: contactUsApi.reducer,
|
||||
[blogApi.reducerPath]: blogApi.reducer,
|
||||
[aboutUsApi.reducerPath]: aboutUsApi.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(
|
||||
homepageApi.middleware,
|
||||
faqApi.middleware,
|
||||
contactUsApi.middleware,
|
||||
blogApi.middleware,
|
||||
aboutUsApi.middleware,
|
||||
),
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
@@ -1,37 +0,0 @@
|
||||
// storeSwitchToDashboard.service.ts
|
||||
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
|
||||
import baseQueryWithReauth from "./baseQuery";
|
||||
|
||||
export type ContactUsFormData = {
|
||||
t_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
country: string;
|
||||
phone_number: string;
|
||||
service: string;
|
||||
budget: string;
|
||||
message: string;
|
||||
development_stage: string;
|
||||
startTime: string;
|
||||
nda_signing: string | boolean;
|
||||
from_page: string;
|
||||
ip?: string;
|
||||
user_agent?: string;
|
||||
contact_us_attachment?: File;
|
||||
};
|
||||
|
||||
export const storeSwitchToDashboard = createApi({
|
||||
reducerPath: "storeSwitchToDashboard",
|
||||
baseQuery: baseQueryWithReauth,
|
||||
endpoints: (builder) => ({
|
||||
storeSwitchToDashboard: builder.mutation<void, FormData>({
|
||||
query: (formData) => ({
|
||||
url: "/api/store-contact-us-data",
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useStoreSwitchToDashboardMutation } = storeSwitchToDashboard;
|
||||
@@ -1,16 +0,0 @@
|
||||
// store.ts
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import { setupListeners } from '@reduxjs/toolkit/query';
|
||||
import { storeSwitchToDashboard } from '../services/storeSwitchToDashboard';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
[storeSwitchToDashboard.reducerPath]: storeSwitchToDashboard.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(storeSwitchToDashboard.middleware),
|
||||
});
|
||||
|
||||
setupListeners(store.dispatch);
|
||||
|
||||
export default store;
|
||||
@@ -1092,6 +1092,10 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Responsive modal styles - No Scroll Version */
|
||||
@media (max-width: 1024px) {
|
||||
.virtual-space-modal-container {
|
||||
|
||||
14
src/utils/getReadingTime.ts
Normal file
14
src/utils/getReadingTime.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
export const getReadingTime = (text: string): string => {
|
||||
if (!text) return "0 min read";
|
||||
|
||||
// Remove HTML tags if present
|
||||
const cleanText = text.replace(/<[^>]+>/g, "");
|
||||
|
||||
// Count words
|
||||
const words = cleanText.trim().split(/\s+/).length;
|
||||
|
||||
const wordsPerMinute = 200;
|
||||
const minutes = Math.ceil(words / wordsPerMinute);
|
||||
|
||||
return `${minutes} min read`;
|
||||
};
|
||||
52
src/utils/urlHelpers.ts
Normal file
52
src/utils/urlHelpers.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
// utils/urlHelpers.ts
|
||||
|
||||
/**
|
||||
* Creates a URL-friendly slug from a title or string
|
||||
* Example: "Ad ut neque enim omn" -> "ad-ut-neque-enim-omn"
|
||||
*/
|
||||
export const createSlug = (text: string): string => {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/[^\w\s-]/g, '') // Remove special characters
|
||||
.replace(/\s+/g, '-') // Replace spaces with hyphens
|
||||
.replace(/-+/g, '-'); // Replace multiple hyphens with single hyphen
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an SEO-friendly URL slug with full UUID
|
||||
* Example: "Ad ut neque enim omn", "e7d611b6-853b-4785-b508-599eeed2af92" -> "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92"
|
||||
*/
|
||||
export const getSlugWithId = (title: string, id: string) => {
|
||||
return `${createSlug(title)}-${id}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extracts the slug from a slug+id string (removes the last part which is the UUID)
|
||||
* Example: "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92" -> "ad-ut-neque-enim-omn"
|
||||
*/
|
||||
export const extractSlugFromSlugAndId = (slugAndId: string): string => {
|
||||
const parts = slugAndId.split('-');
|
||||
// Remove the last 5 parts (UUID is 5 segments when split by hyphen)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
parts.pop();
|
||||
}
|
||||
return parts.join('-');
|
||||
};
|
||||
|
||||
/**
|
||||
* Extracts the full UUID from a slug+id string
|
||||
* Example: "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92" -> "e7d611b6-853b-4785-b508-599eeed2af92"
|
||||
*/
|
||||
export const extractIdFromSlug = (slugAndId: string): string | null => {
|
||||
const parts = slugAndId.split('-');
|
||||
|
||||
if (parts.length < 5) return null;
|
||||
|
||||
const id = parts.slice(-5).join('-');
|
||||
|
||||
const uuidRegex =
|
||||
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
||||
|
||||
return uuidRegex.test(id) ? id : null;
|
||||
};
|
||||
Reference in New Issue
Block a user