Spaces:
Running
Running
| 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; | |