Spaces:
Sleeping
Sleeping
File size: 3,150 Bytes
de852c2 df43d3d de852c2 c8cd296 de852c2 c8cd296 de852c2 df43d3d de852c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import React from 'react';
import { MessageCircle, ArrowRight } from 'lucide-react';
import AdvisorCard from '../components/AdvisorCard';
import AppHeader from '../components/AppHeader';
import CopyrightNotice from '../components/CopyrightNotice';
import CareerSourcesSection from '../components/CareerSourcesSection';
import { useAppConfig } from '../contexts/AppConfigContext';
const HomePage = ({ onNavigateToChat, onTryAsGuest, isAuthenticated, onNavigateToHome, onNavigateToCanvas }) => {
const { config, advisors, resolveIcon } = useAppConfig();
return (
<div className="homepage">
<AppHeader
currentPage="home"
onNavigateToHome={onNavigateToHome}
onNavigateToChat={onNavigateToChat}
onNavigateToCanvas={onNavigateToCanvas}
/>
{/* Hero Section */}
<main className="main">
<div className="hero-section">
<h2 className="hero-title">
{config.homepage.headline_prefix}{' '}
<span className="hero-highlight">{config.homepage.headline_highlight}</span>
</h2>
<p className="hero-subtitle">
{config.homepage.description}
</p>
<div className="cta-group">
<button
onClick={onNavigateToChat}
className="cta-button"
>
<MessageCircle className="cta-icon" />
<span>{isAuthenticated ? 'Continue Conversation' : 'Start Conversation'}</span>
<ArrowRight className="cta-arrow" />
</button>
{!isAuthenticated && (
<button
type="button"
onClick={onTryAsGuest}
className="cta-button cta-button-secondary"
>
<span>Try without an account</span>
</button>
)}
</div>
</div>
{/* Advisors Grid */}
<div className="advisors-grid">
{Object.entries(advisors).map(([id, advisor]) => (
<AdvisorCard key={id} advisor={advisor} advisorId={id} />
))}
</div>
{/* Features Section */}
<div className="features-section">
<h3 className="features-title">{config.homepage.features_title}</h3>
<div className="features-grid">
{(config.homepage.features || []).map((feature, index) => {
const FeatureIcon = resolveIcon(feature.icon);
return (
<div key={index} className="feature-card">
<div className="feature-icon">
<FeatureIcon />
</div>
<h4 className="feature-title">{feature.title}</h4>
<p className="feature-description">
{feature.description}
</p>
</div>
);
})}
</div>
</div>
<CareerSourcesSection />
</main>
{/* Footer */}
<footer className="footer">
<div className="footer-content">
<CopyrightNotice />
</div>
</footer>
</div>
);
};
export default HomePage;
|