/**
* Home Page Component
* Landing page for the Personality Assessment
*/
const { useState, useRef, useEffect } = React;
// SVG Logo Component
const Logo = () => (
);
// Test data
const tests = [
{
icon: '🌊',
title: 'OCEAN (Big Five)',
subtitle: 'Personality Traits',
description: 'Discover your levels of openness, conscientiousness, extraversion, agreeableness, and neuroticism.',
link: '/ocean'
},
{
icon: '🎬',
title: 'Friends Personality (Pilaan Exclusive)',
subtitle: 'Character Match',
description: 'Discover your personality type based on the Friends video and Questions.',
link: '/personality_friends'
},
{
icon: '🎬',
title: 'General Personality (Pilaan Exclusive)',
subtitle: 'Character Match',
description: 'Discover your personality type based on the video and Questions.',
link: '/personality_gen'
},
{
icon: '💼',
title: 'DISC',
subtitle: 'Behavioral Style',
description: 'Understand your dominance, influence, steadiness, and conscientiousness in professional settings.',
link: '/disc'
},
{
icon: '🎭',
title: 'Enneagram',
subtitle: 'Core Motivations',
description: 'Explore the nine personality types and understand what truly drives you.',
link: '/enneagram'
},
{
icon: '🔍',
title: 'Myers-Briggs',
subtitle: 'Cognitive Functions',
description: 'Identify your MBTI type across four dichotomies of personality preferences.',
link: '/mbti'
},
{
icon: '🧭',
title: 'Schwartz Values',
subtitle: 'Human Values',
description: 'Understand your core human values such as power, achievement, benevolence, universalism, and security.',
link: '/schwartz'
}
];
// Steps data
const steps = [
{
number: '1',
title: 'Take 1 Test',
description: 'Complete one of the pilaan exclusive personality assessment in one sitting. Takes about 5-7 minutes.'
},
{
number: '2',
title: 'AI Analysis',
description: 'Our advanced AI analyzes your responses across all tests for deeper insights.'
},
{
number: '3',
title: 'Get Your Report',
description: 'Receive a comprehensive personality report combining all test results.'
}
];
// Features data
const features = [
{
icon: '🎯',
title: 'Scientifically Validated',
description: 'All tests are based on established psychological frameworks used by professionals worldwide.'
},
{
icon: '🤖',
title: 'AI-Powered Insights',
description: 'Advanced AI combines your results to provide unique, personalized insights you won\'t find elsewhere.'
},
{
icon: '📊',
title: 'Comprehensive Report',
description: 'Get a detailed PDF report with visual charts, explanations, and actionable recommendations.'
},
{
icon: '🔒',
title: 'Private & Secure',
description: 'Your data is encrypted and secure. We never share your personal information with third parties.'
},
{
icon: '💡',
title: 'Career Guidance',
description: 'Discover ideal career paths and work environments that match your personality profile.'
},
{
icon: '🤝',
title: 'Relationship Insights',
description: 'Learn about your communication style and how you interact with others in personal and professional settings.'
}
];
// Testimonials data
const testimonials = [
{
text: 'The AI-generated report was incredibly accurate. It helped me understand patterns in my behavior I never noticed before.',
name: 'Prashant Kumar',
role: 'Product Manager',
avatar: 'P'
},
{
text: 'As a software engineer, the DISC insights helped me understand how I work with others and where I can improve as a team member and leader.',
name: 'Prashant Shekhar',
role: 'Software Engineer',
avatar: 'P'
},
{
text: 'The results helped me present myself better in interviews. I could clearly explain my strengths and working style.',
name: 'Vivek Trivedi',
role: 'Data Scientist',
avatar: 'V'
},
{
text: 'As a management student, this helped me understand my leadership style and decision-making approach.',
name: 'Ananya Singh',
role: 'MBA Student',
avatar: 'A'
},
{
text: 'I run a small business, and this assessment helped me understand my communication style with clients and employees.',
name: 'Rahul Verma',
role: 'Entrepreneur',
avatar: 'R'
}
];
// Main App Component
const App = () => {
const [visibleElements, setVisibleElements] = useState(new Set());
const [showTestSelector, setShowTestSelector] = useState(false);
const observerRef = useRef(null);
const testScrollRef = useRef(null);
useEffect(() => {
// Intersection Observer for scroll animations
observerRef.current = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setVisibleElements(prev => new Set([...prev, entry.target]));
}
});
},
{ threshold: 0.1 }
);
// Observe all fade-in elements
document.querySelectorAll('.fade-in').forEach(el => {
observerRef.current.observe(el);
});
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, []);
useEffect(() => {
// Add visible class to observed elements
visibleElements.forEach(el => {
el.classList.add('visible');
});
}, [visibleElements]);
useEffect(() => {
const slider = testScrollRef.current;
if (!slider) return;
let isDown = false;
let startX = 0;
let scrollLeft = 0;
const onMouseDown = (e) => {
isDown = true;
slider.classList.add('dragging');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
};
const onMouseUp = () => {
isDown = false;
slider.classList.remove('dragging');
};
const onMouseLeave = () => {
isDown = false;
slider.classList.remove('dragging');
};
const onMouseMove = (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1.4; // speed
slider.scrollLeft = scrollLeft - walk;
};
slider.addEventListener('mousedown', onMouseDown);
slider.addEventListener('mouseleave', onMouseLeave);
slider.addEventListener('mouseup', onMouseUp);
slider.addEventListener('mousemove', onMouseMove);
return () => {
slider.removeEventListener('mousedown', onMouseDown);
slider.removeEventListener('mouseleave', onMouseLeave);
slider.removeEventListener('mouseup', onMouseUp);
slider.removeEventListener('mousemove', onMouseMove);
};
}, []);
const handleCTAClick = () => {
setShowTestSelector(true);
};
const handleTestChoice = (type) => {
setShowTestSelector(false);
if (type === 'friends') {
window.location.href = '/personality_friends';
} else if (type === 'general') {
window.location.href = '/personality_gen';
}
};
return (
<>
{/* Hero Section */}
{
const el = e.currentTarget;
el.classList.remove("animate");
void el.offsetWidth; // force reflow
el.classList.add("animate");
}}
>
Pilaan