Spaces:
Sleeping
Sleeping
File size: 3,045 Bytes
3251fad 2ff64f6 3251fad 20fa64f 9288c82 2ff64f6 3251fad 82ccb3f 2ff64f6 3251fad 20fa64f 3251fad 2ff64f6 3251fad 2ff64f6 3251fad 82ccb3f 3251fad d735bc0 3251fad 2ff64f6 3251fad 2ff64f6 3251fad ae49522 9288c82 ae49522 3251fad 2ff64f6 | 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 | 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 { 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>
</main>
{/* Footer */}
<footer className="footer">
<div className="footer-content">
<CopyrightNotice />
</div>
</footer>
</div>
);
};
export default HomePage;
|