Spaces:
Running
Running
File size: 4,473 Bytes
ffcad5d d0878a6 ffcad5d | 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | import React, { useState } from 'react';
import { MessageCircle, ArrowRight, Sparkles } from 'lucide-react';
import AdvisorCard from '../components/AdvisorCard';
import AppHeader from '../components/AppHeader';
import CopyrightNotice from '../components/CopyrightNotice';
import GuestIntakeModal from '../components/GuestIntakeModal';
import { useAppConfig } from '../contexts/AppConfigContext';
const HomePage = ({
onNavigateToChat,
isAuthenticated,
onNavigateToHome,
onNavigateToCanvas,
onExploreAsGuest,
}) => {
const { config, advisors, resolveIcon } = useAppConfig();
const [showGuestIntake, setShowGuestIntake] = useState(false);
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 style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', alignItems: 'center' }}>
<button
onClick={onNavigateToChat}
className="cta-button"
>
<MessageCircle className="cta-icon" />
<span>{isAuthenticated ? 'Continue Conversation' : 'Sign in / Start'}</span>
<ArrowRight className="cta-arrow" />
</button>
{!isAuthenticated && (
<button
type="button"
className="cta-button"
onClick={() => setShowGuestIntake(true)}
style={{
background: 'transparent',
color: 'var(--accent-primary, #0B7A8A)',
border: '2px solid var(--accent-primary, #0B7A8A)',
boxShadow: 'none',
}}
>
<Sparkles className="cta-icon" />
<span>Explore as guest</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>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', alignItems: 'center', margin: '2.5rem 0 0.5rem' }}>
<button
type="button"
onClick={onNavigateToChat}
className="cta-button"
>
<MessageCircle className="cta-icon" />
<span>{isAuthenticated ? 'Continue Conversation' : 'Sign in / Start'}</span>
<ArrowRight className="cta-arrow" />
</button>
</div>
</main>
{/* Footer */}
<footer className="footer">
<div className="footer-content">
<CopyrightNotice />
</div>
</footer>
{showGuestIntake && (
<GuestIntakeModal
onClose={() => setShowGuestIntake(false)}
onSuccess={(user, token) => {
setShowGuestIntake(false);
onExploreAsGuest?.(user, token);
}}
/>
)}
</div>
);
};
export default HomePage;
|