<code>
import React, { useState } from ‘react’;
import {
Mail,
Settings,
Globe2,
ArrowRight,
Search,
ChevronLeft,
ChevronRight,
BookOpen,
GraduationCap,
HeartPulse,
Wifi,
Banknote,
User,
Briefcase,
ShieldCheck,
MapPin,
MessageSquare,
} from ‘lucide-react’;
// Inline FlipCard component
const FlipCard = ({ Icon, frontTitle, backContent }) => (
(e.currentTarget.style.transform = ‘rotateY(180deg)’)} onMouseLeave={e => (e.currentTarget.style.transform = ‘rotateY(0deg)’)} > {/* Front */}
{frontTitle}
{/* Back */}
{backContent}
);
// Inline LinkCard component
const LinkCard = ({ icon: Icon, title, blurb, href }) => (
{title}
{blurb}
);
// Quick Favorites data
const quickFavorites = [
{ id: ‘gcf’, icon: BookOpen, title: ‘GCFGlobal’, blurb: ‘Computer basics tutorials, totally free.’, href: ‘https://edu.gcfglobal.org/en/computerbasics/’ },
{ id: ‘everyoneon’, icon: Wifi, title: ‘EveryoneOn’, blurb: ‘Find low-cost internet and devices.’, href: ‘https://www.everyoneon.org/find-offers’ },
{ id: ‘khan’, icon: GraduationCap, title: ‘Khan Academy’, blurb: ‘Free courses, practice, and quizzes.’, href: ‘https://www.khanacademy.org/’ },
{ id: ‘library’, icon: Globe2, title: ‘Find Your Public Library’, blurb: ‘Locate nearby library services & Wi-Fi.’, href: ‘https://www.usa.gov/libraries-and-archives’ },
{ id: ‘211’, icon: HeartPulse, title: ‘211’, blurb: ‘Dial 211 for 24/7 local assistance.’, href: ‘https://www.211.org/’ },
{ id: ‘careeronestop’, icon: Banknote, title: ‘CareerOneStop’, blurb: ‘Job search, training, career tools.’, href: ‘https://www.careeronestop.org/’ },
];
// Slide data for hero carousel
const slides = [‘hero’, ‘slide-2’, ‘slide-3’, ‘slide-4’];
export default function CascadeConnectionsHomePage() {
const [current, setCurrent] = useState(0);
return (
{/* 1. Sticky Header /}
{/ Centered Search /} {/ Nav + FAQ */} {[‘Education’, ‘Skills’, ‘Resources’].map(label => ( {label}
))}
FAQ
{/* 2. Hero Slide-Deck */}
<section className="relative w-full min-h-[60vh] overflow-hidden rounded-b-3xl">
{slides.map((id, idx) => (
<div
key={id}
className={`absolute inset-0 transition-transform duration-700 ${
idx === current
? 'translate-x-0'
: idx < current
? '-translate-x-full'
: 'translate-x-full'
}`}
>
{idx === 0 ? (
<div className="h-full flex flex-col items-center justify-center bg-gray-100">
<h1 className="text-4xl font-bold mb-4 text-center">
Welcome to Cascade Connections
</h1>
<p className="text-lg max-w-2xl text-center">
Our mission is to empower you as a new computer user—unlocking
opportunities for work, learning, and connecting with community
resources.
</p>
</div>
) : (
<div className="h-full flex items-center justify-center bg-gray-200">
<span className="text-xl text-gray-500">Slide {idx + 1}</span>
</div>
)}
</div>
))}
<button
onClick={() => setCurrent(c => (c - 1 + slides.length) % slides.length)}
className="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow"
>
<ChevronLeft className="w-6 h-6" />
</button>
<button
onClick={() => setCurrent(c => (c + 1) % slides.length)}
className="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow"
>
<ChevronRight className="w-6 h-6" />
</button>
<div className="absolute bottom-4 w-full flex justify-center space-x-2">
{slides.map((_, idx) => (
<button
key={idx}
onClick={() => setCurrent(idx)}
className={`w-3 h-3 rounded-full ${
idx === current ? 'bg-blue-600' : 'bg-gray-400'
}`}
/>
))}
</div>
{/* Hero Wave */}
<svg
className="absolute bottom-0 left-0 w-full fill-current text-white"
viewBox="0 0 1440 60"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0,30 C360,90 1080,-30 1440,30 L1440,60 L0,60 Z" />
</svg>
</section>
{/* 3. Persona Selector */}
<section className="py-16 bg-white">
<h2 className="text-2xl font-semibold text-center mb-8">Choose Your Path</h2>
<div className="max-w-6xl mx-auto grid md:grid-cols-4 gap-6 px-6">
{[
{ id: 'owner', icon: User, title: 'New Computer Owner' },
{ id: 'job', icon: Briefcase, title: 'Job Seeker' },
{ id: 'learner', icon: BookOpen, title: 'Learner / Student' },
{ id: 'health', icon: HeartPulse, title: 'Health & Finance Explorer' },
].map(p => {
const Icon = p.icon;
return (
<div
key={p.id}
className="bg-gray-50 border rounded-xl p-6 flex flex-col items-center hover:shadow-lg transition"
>
<Icon className="w-8 h-8 mb-4 text-blue-600" />
<h3 className="font-medium">{p.title}</h3>
</div>
);
})}
</div>
</section>
{/* 4. Quick start essential steps (Flip-Cards) */}
<section className="max-w-6xl mx-auto px-6 py-10">
<h2 className="text-2xl font-semibold mb-6">Quick start essential steps</h2>
<div className="grid md:grid-cols-4 gap-6">
<FlipCard
Icon={Mail}
frontTitle="Computer Orientation Checklist"
backContent="Complete the checklist to gain insights into your new device."
/>
<FlipCard
Icon={Settings}
frontTitle="Set Your Preferences"
backContent="Customize your experience and select your preferences."
/>
<FlipCard
Icon={Globe2}
frontTitle="Connect Email & Social Media"
backContent="Connect your personal accounts and learn how your device remembers passwords."
/>
<FlipCard
Icon={ArrowRight}
frontTitle="See More Start-Up Tips"
backContent="Visit the Computer Learning Center to build more skills!"
/>
</div>
</section>
{/* 5. Learning Modules */}
<section className="py-16 bg-white">
<h2 className="text-2xl font-semibold text-center mb-8">Learning Modules</h2>
<ul className="max-w-6xl mx-auto px-6 space-y-4">
{[
{
id: 'toolkit',
icon: BookOpen,
title: 'Computer Toolkit',
blurb:
'Essential software and tips to keep your computer running smoothly.',
},
{
id: 'security',
icon: ShieldCheck,
title: 'Security & Online Safety',
blurb:
'Best practices and tools to protect your device and data online.',
},
{
id: 'career',
icon: Briefcase,
title: 'Career Tools',
blurb:
'Resources to help you build your resume, network, and find jobs.',
},
{
id: 'telehealth',
icon: HeartPulse,
title: 'Telehealth Basics',
blurb:
'Guidance on setting up and using online health services safely.',
},
].map(mod => {
const Icon = mod.icon;
return (
<li
key={mod.id}
className="flex items-start gap-4 p-4 border rounded-xl hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
>
<Icon className="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
<div>
<a href="#" className="text-lg font-medium hover:underline">
{mod.title}
</a>
<p className="text-sm text-gray-600 mt-1">{mod.blurb}</p>
</div>
</li>
);
})}
</ul>
<div className="border-t border-gray-200 my-12"></div>
</section>
{/* Wave transition into Community */}
<div className="relative bg-gray-50 overflow-hidden">
<svg
className="absolute -top-1 w-full fill-current text-gray-50"
viewBox="0 0 1440 60"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0,30 C360,-30 1080,90 1440,30 L1440,0 L0,0 Z" />
</svg>
{/* 6. Community & Support */}
<section className="max-w-6xl mx-auto px-6 py-10">
<h2 className="text-2xl font-semibold mb-6">Community & Support</h2>
<div className="grid md:grid-cols-2 gap-6">
<div className="bg-white border rounded-xl p-6 hover:shadow-lg transition">
<div className="flex items-center mb-2">
<MapPin className="w-8 h-8 text-red-600 mr-2" />
<h3 className="font-medium">Local Navigator Map</h3>
</div>
<p className="text-sm mb-4 pl-10">
Find nearby help centers, libraries, and free Wi-Fi spots.
</p>
{/* TODO: Plug in dynamic Map component */}
</div>
<div className="bg-white border rounded-xl p-6 hover:shadow-lg transition">
<div className="flex items-center mb-2">
<MessageSquare className="w-8 h-8 text-purple-600 mr-2" />
<h3 className="font-medium">Connect with your Digital Navigator</h3>
</div>
<p className="text-sm mb-4 pl-10">
Find your local navigator for computer help & other resources.
</p>
{/* TODO: Add contact or scheduler link */}
</div>
</div>
</section>
</div>
{/* 7. Explore Our Hubs */}
<section className="max-w-6xl mx-auto px-6 py-10 bg-white">
<h2 className="text-2xl font-semibold text-center mb-8">Explore Our Hubs</h2>
<div className="grid md:grid-cols-3 gap-6">
<a
key="student"
href="#"
className="flex flex-col justify-between bg-gray-50 border rounded-xl p-6 hover:shadow-lg transition"
>
<BookOpen className="w-8 h-8 mb-2 text-blue-600" />
<h3 className="text-lg font-medium mb-2">Student Center</h3>
<p className="text-sm flex-grow">
Tutoring, language learning, and digital study tools.
</p>
</a>
<a
key="finance"
href="#"
className="flex flex-col justify-between bg-gray-50 border rounded-xl p-6 hover:shadow-lg transition"
>
<Banknote className="w-8 h-8 mb-2 text-green-600" />
<h3 className="text-lg font-medium mb-2">Finance & Benefits</h3>
<p className="text-sm flex-grow">
Budgeting, benefits programs, and personal finance guides.
</p>
</a>
<a
key="career"
href="#"
className="flex flex-col justify-between bg-gray-50 border rounded-xl p-6 hover:shadow-lg transition"
>
<Briefcase className="w-8 h-8 mb-2 text-orange-600" />
<h3 className="text-lg font-medium mb-2">Career & Skills</h3>
<p className="text-sm flex-grow">
Job search tools, certifications, and professional development.
</p>
</a>
</div>
</section>
{/* 8. Feedback Widget */}
<section className="max-w-6xl mx-auto px-6 py-10">
{/* Feedback widget goes here */}
</section>
</div></code>);
}