// Shared components — Header, Footer, icons // ============ ICONS (inline SVG, Lucide-style) ============ const Icon = ({ name, size = 20, ...props }) => { const icons = { book: <>, sparkles: <>, chart: <>, graduation: <>, users: <>, user: <>, clipboard: <>, document: <>, calendar: <>, check: <>, arrowRight: <>, arrowLeft: <>, play: <>, menu: <>, close: <>, star: <>, starFill: <>, chevronDown: <>, chevronRight: <>, search: <>, bell: <>, home: <>, settings: <>, twinkle: <>, brain: <>, target: <>, layers: <>, pencil: <>, puzzle: <>, trophy: <>, shield: <>, mail: <>, map: <>, bookOpen: <>, messageCircle: <>, globe: <>, heart: <>, zap: <>, file: <>, gamepad: <>, edit: <>, briefcase: <>, clock: <>, minus: <>, plus: <>, coffee: <>, moon: <>, sun: <>, wand: <>, }; return ( {icons[name]} ); }; // ============ LOGO ============ const Logo = ({ size = 28 }) => (
HomeScholar
); // ============ HEADER ============ const Header = ({ transparent = true, currentPage = '' }) => { const [scrolled, setScrolled] = React.useState(false); const [drawerOpen, setDrawerOpen] = React.useState(false); const [featuresOpen, setFeaturesOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const headerStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, transition: 'all 200ms ease', background: (scrolled || !transparent) ? 'rgba(255,255,255,0.85)' : 'transparent', backdropFilter: (scrolled || !transparent) ? 'blur(12px)' : 'none', borderBottom: (scrolled || !transparent) ? '1px solid var(--border-subtle)' : '1px solid transparent', }; const navLinkStyle = (active) => ({ fontSize: 14, fontWeight: 500, color: active ? 'var(--primary-blue)' : 'var(--text-primary)', padding: '8px 12px', borderRadius: 8, transition: 'background 150ms ease', }); const features = [ { href: 'homeschool-curriculum-planner.html', label: 'Curriculum Planner', icon: 'map', color: 'blue' }, { href: 'ai-lesson-plan-generator.html', label: 'AI Lesson Plans', icon: 'sparkles', color: 'purple' }, { href: 'homeschool-gradebook.html', label: 'Gradebook', icon: 'chart', color: 'green' }, { href: 'homeschool-transcripts-and-report-cards.html', label: 'Transcripts & Reports', icon: 'graduation', color: 'blue' }, { href: 'homeschool-legal-documents.html', label: 'Legal Documents', icon: 'document', color: 'pink' }, { href: 'homeschool-co-op-management.html', label: 'Co-op Management', icon: 'users', color: 'orange' }, ]; return ( <>
{/* Desktop nav */} {/* Mobile menu button */}
{/* Mobile drawer */} {drawerOpen && (
setDrawerOpen(false)} >
e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(360px, 85vw)', background: 'var(--bg-card)', padding: 24, display: 'flex', flexDirection: 'column', animation: 'slideIn 250ms ease', }} >
Start free trial
)} ); }; // ============ FOOTER ============ const Footer = () => (

The all-in-one AI homeschool platform. Plan, grade, and generate every document — all for less than two coffees a month.

© 2026 Soleo Technologies. Made in Austin, Texas with and 3 kids homeschooling in the background.
); const FooterCol = ({ title, links }) => (
{title}
{links.map(([label, href]) => ( {label} ))}
); // ============ STICKY MOBILE CTA ============ const StickyMobileCTA = () => { const [visible, setVisible] = React.useState(false); React.useEffect(() => { const onScroll = () => setVisible(window.scrollY > 600); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (
Start free trial — $14.99/mo after
); }; // ============ STARS ============ const Stars = ({ count = 5 }) => ( {Array.from({ length: count }).map((_, i) => ( ))} ); // ============ BREADCRUMBS ============ const Breadcrumbs = ({ items }) => ( ); // ============ FEATURE CARD ============ const FeatureCard = ({ icon, color, title, description, href }) => (

{title}

{description}

Learn more ); // ============ REVEAL (scroll-triggered) ============ const useReveal = () => { React.useEffect(() => { if (typeof IntersectionObserver === 'undefined') return; const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; // Export to window Object.assign(window, { Icon, Logo, Header, Footer, StickyMobileCTA, Stars, Breadcrumbs, FeatureCard, useReveal });