{{ feature.title }}
@@ -69,41 +72,71 @@{{ feature.title }}
-
-
+
-
- Live K-5 Demo Today
-Today's Demo vs. What's Next
-Investors and school leaders can see the live K-5 experience, plus a clear roadmap to upper grades.
-
- {{ audience }}
-
+
+
- Community invitation
+Help shape what this becomes
++ EchoEd needs review from Black educators and hands-on support from Black software developers, + designers, researchers, and open-source contributors. +
-
-
+
+
+
+
diff --git a/frontend/src/app/pages/landing/landing.component.scss b/frontend/src/app/pages/landing/landing.component.scss
index 35446e6..73fd805 100644
--- a/frontend/src/app/pages/landing/landing.component.scss
+++ b/frontend/src/app/pages/landing/landing.component.scss
@@ -4,52 +4,26 @@
.landing-shell {
background:
- radial-gradient(circle at 82% 8%, rgba(15, 118, 110, 0.08), transparent 20rem),
- radial-gradient(circle at 54% 38%, rgba(2, 132, 199, 0.06), transparent 28rem),
- linear-gradient(135deg, #ffffff, #f7f9fc 46%, #eef4fb);
- border: 1px solid rgba(15, 23, 42, 0.08);
- border-radius: 18px;
+ linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96)),
+ url('/assets/maps/africa-reference.svg') right 7% top 5rem / min(34rem, 46vw) auto no-repeat,
+ #f8fafc;
color: var(--ee-text, #102033);
display: grid;
- gap: 2rem;
- margin: min(1.6vw, 1.75rem);
- min-height: calc(100vh - min(3.2vw, 3.5rem));
+ gap: clamp(2rem, 4vw, 4rem);
+ min-height: 100vh;
overflow: hidden;
padding: clamp(1rem, 3vw, 3rem);
- position: relative;
-}
-
-.landing-shell::before,
-.landing-shell::after {
- content: '';
- inset: 0;
- pointer-events: none;
- position: absolute;
-}
-
-.landing-shell::before {
- background:
- radial-gradient(circle at 18% 16%, rgba(15, 118, 110, 0.12) 0 1px, transparent 2px),
- radial-gradient(circle at 74% 9%, rgba(2, 132, 199, 0.1) 0 1px, transparent 2px),
- linear-gradient(160deg, transparent 0 37%, rgba(15, 118, 110, 0.04) 38%, transparent 48%);
- opacity: 0.35;
-}
-
-.landing-shell::after {
- background:
- radial-gradient(ellipse at 50% 73%, rgba(15, 118, 110, 0.05), transparent 11rem),
- linear-gradient(180deg, transparent 63%, rgba(255, 255, 255, 0.24) 64%, #ffffff 84%);
}
.landing-nav,
.hero,
.feature-grid,
-.demo-section {
+.audience-section,
+.contribution-section,
+.join-section {
margin-inline: auto;
- max-width: 1420px;
- position: relative;
+ max-width: 1180px;
width: 100%;
- z-index: 1;
}
.landing-nav {
@@ -63,27 +37,33 @@
.auth-links,
.nav-links,
.hero-actions,
-.audience-row {
+.join-actions {
align-items: center;
display: flex;
}
.brand {
- color: var(--ee-text, #102033);
+ color: #102033;
gap: 0.7rem;
text-decoration: none;
}
+.brand span,
+.trust-strip > span,
+.mini-icon,
+.feature-icon {
+ background: #0f766e;
+ color: #ffffff;
+ display: grid;
+ font-weight: 900;
+ place-items: center;
+}
+
.brand span {
- background: var(--echo-primary, #0f766e);
- border: 1px solid rgba(15, 118, 110, 0.24);
- border-radius: 10px;
+ border-radius: 8px;
box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
- display: grid;
font-size: 0.9rem;
- font-weight: 900;
height: 2.35rem;
- place-items: center;
width: 2.35rem;
}
@@ -92,30 +72,19 @@
}
.nav-links {
- gap: 2.2rem;
+ gap: 1.5rem;
}
.nav-links a,
.ghost-link,
.nav-cta,
-.button,
-.tour-link {
- color: var(--ee-text, #102033);
+.button {
+ color: #102033;
font-size: 0.88rem;
font-weight: 800;
text-decoration: none;
}
-.nav-links a::after {
- content: '▾';
- font-size: 0.7rem;
- margin-left: 0.4rem;
-}
-
-.nav-links a:nth-child(3)::after {
- content: '';
-}
-
.auth-links {
gap: 0.8rem;
}
@@ -136,7 +105,7 @@
.nav-cta,
.button--primary {
- background: var(--echo-primary, #0f766e);
+ background: #0f766e;
border: 1px solid rgba(15, 118, 110, 0.24);
box-shadow: 0 16px 32px rgba(15, 118, 110, 0.18);
color: #ffffff;
@@ -145,25 +114,25 @@
.hero {
align-items: center;
display: grid;
- gap: clamp(2rem, 7vw, 7rem);
- grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.66fr);
- min-height: 29rem;
+ gap: clamp(2rem, 7vw, 6rem);
+ grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.78fr);
+ min-height: min(42rem, calc(100vh - 9rem));
}
.hero-copy {
display: grid;
- gap: 1.45rem;
- max-width: 52rem;
+ gap: 1.25rem;
+ max-width: 54rem;
}
.eyebrow {
align-items: center;
- color: var(--echo-primary, #0f766e);
+ color: #0f766e;
display: flex;
font-size: 0.78rem;
font-weight: 900;
gap: 0.55rem;
- letter-spacing: 0.12em;
+ letter-spacing: 0.08em;
margin: 0;
text-transform: uppercase;
}
@@ -184,27 +153,32 @@ p {
h1 {
color: #102033;
- font-size: clamp(3.4rem, 4.35vw, 5rem);
+ font-size: clamp(4.25rem, 8vw, 7.5rem);
letter-spacing: 0;
- line-height: 0.93;
- max-width: 13ch;
+ line-height: 0.88;
}
-h1 em {
- color: var(--echo-primary, #0f766e);
- font-style: normal;
+.hero-statement {
+ color: #0f766e;
+ font-size: clamp(1.6rem, 3vw, 2.65rem);
+ font-weight: 900;
+ line-height: 1.08;
+ max-width: 16ch;
}
-.hero-lede {
+.hero-lede,
+.section-heading p,
+.join-section p {
color: #475569;
font-size: 1.05rem;
line-height: 1.65;
- max-width: 58ch;
+ max-width: 64ch;
}
-.hero-actions {
+.hero-actions,
+.join-actions {
flex-wrap: wrap;
- gap: 1rem;
+ gap: 0.85rem;
}
.button {
@@ -212,25 +186,21 @@ h1 em {
display: inline-flex;
gap: 0.75rem;
justify-content: center;
-}
-
-.tour-link {
- color: var(--echo-secondary, #2563eb);
- width: fit-content;
+ text-align: center;
}
.feature-panel,
.feature-grid article,
-.demo-section,
-.demo-card {
- background: #ffffff;
- backdrop-filter: none;
+.audience-card,
+.contribution-section,
+.join-section {
+ background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}
.feature-panel {
- border-radius: 20px;
+ border-radius: 16px;
display: grid;
gap: 1rem;
padding: 1.35rem;
@@ -244,15 +214,14 @@ h1 em {
.panel-header span,
.card-kicker {
- color: var(--echo-secondary, #2563eb);
+ color: #2563eb;
font-size: 0.75rem;
font-weight: 900;
- letter-spacing: 0.12em;
+ letter-spacing: 0.08em;
text-transform: uppercase;
}
-.panel-header strong,
-.audience-row span {
+.panel-header strong {
border: 1px solid rgba(15, 118, 110, 0.18);
border-radius: 999px;
color: #0f766e;
@@ -260,16 +229,22 @@ h1 em {
padding: 0.35rem 0.65rem;
}
-.signal-grid {
+.signal-grid,
+.feature-grid,
+.audience-grid,
+.contribution-grid {
display: grid;
- gap: 0.75rem;
+ gap: 1rem;
+}
+
+.signal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.signal-grid article {
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.08);
- border-radius: 10px;
+ border-radius: 8px;
display: grid;
gap: 0.35rem;
min-height: 9rem;
@@ -277,23 +252,16 @@ h1 em {
}
.mini-icon,
-.feature-icon,
-.roadmap-list span,
-.trust-strip > span {
- background: linear-gradient(135deg, #0f766e, #2563eb);
- border: 1px solid rgba(15, 118, 110, 0.25);
- border-radius: 10px;
- box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
-}
-
-.mini-icon {
- height: 1.55rem;
- width: 1.55rem;
+.feature-icon {
+ border-radius: 8px;
+ height: 1.65rem;
+ width: 1.65rem;
}
.signal-grid strong,
.trust-strip strong,
-.demo-card h3 {
+.audience-card h3,
+.contribution-grid strong {
color: #102033;
font-size: 1.08rem;
}
@@ -301,18 +269,18 @@ h1 em {
.signal-grid p,
.trust-strip p,
.feature-grid p,
-.demo-section p,
-.demo-card li,
-.roadmap-list p {
+.audience-card p,
+.audience-card li,
+.contribution-grid p {
color: #475569;
- line-height: 1.5;
+ line-height: 1.55;
}
.trust-strip {
align-items: start;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.08);
- border-radius: 14px;
+ border-radius: 10px;
display: grid;
gap: 0.8rem;
grid-template-columns: auto 1fr;
@@ -320,131 +288,138 @@ h1 em {
}
.trust-strip > span {
- color: #fff;
- display: grid;
+ border-radius: 8px;
font-size: 0.75rem;
- font-weight: 900;
height: 2.35rem;
- place-items: center;
width: 2.35rem;
}
.feature-grid {
- display: grid;
- gap: clamp(1rem, 3vw, 2rem);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-grid article {
align-items: start;
- border-radius: 14px;
+ border-radius: 10px;
display: grid;
gap: 1rem;
grid-template-columns: auto 1fr;
- min-height: 10rem;
+ min-height: 12rem;
padding: 1.35rem;
}
-.feature-icon {
- color: #f7d27e;
- display: grid;
- font-size: 0.75rem;
- font-weight: 900;
- height: 2.45rem;
- place-items: center;
- width: 2.45rem;
+.feature-grid h2,
+.section-heading h2,
+.join-section h2 {
+ color: #102033;
+ line-height: 1.05;
}
.feature-grid h2 {
- color: #102033;
font-size: 1.1rem;
- line-height: 1.2;
}
-.demo-section {
- border-radius: 16px;
+.audience-section,
+.contribution-section {
display: grid;
- gap: 1rem;
- padding: clamp(1.2rem, 3vw, 2rem);
+ gap: 1.25rem;
}
-.demo-heading {
- align-items: start;
- display: flex;
- gap: 1rem;
- justify-content: space-between;
+.section-heading {
+ display: grid;
+ gap: 0.75rem;
}
-.demo-heading h2 {
- color: #102033;
- font-size: clamp(1.8rem, 4vw, 3rem);
- line-height: 1;
- margin: 0.5rem 0;
+.section-heading h2,
+.join-section h2 {
+ font-size: clamp(2rem, 4vw, 3.4rem);
+ max-width: 13ch;
}
-.audience-row {
- align-content: start;
- flex-wrap: wrap;
- gap: 0.65rem;
- justify-content: flex-end;
- max-width: 22rem;
+.section-heading.compact h2 {
+ max-width: none;
}
-.demo-grid {
- display: grid;
- gap: 0;
- grid-template-columns: 0.92fr 1.08fr;
+.audience-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
-.demo-card {
+.audience-card {
border-radius: 12px;
display: grid;
- gap: 0.9rem;
- min-height: 15rem;
- padding: 1.35rem 2rem;
+ gap: 1rem;
+ padding: clamp(1.25rem, 3vw, 2rem);
+}
+
+.audience-card h3 {
+ font-size: clamp(1.5rem, 3vw, 2.25rem);
+ line-height: 1.05;
}
-.demo-card ul {
+.audience-card ul {
display: grid;
- gap: 1rem;
+ gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
-.demo-card li::before {
- border: 1px solid #f4bc56;
+.audience-card li {
+ display: grid;
+ gap: 0.65rem;
+ grid-template-columns: auto 1fr;
+}
+
+.audience-card li::before {
+ background: #f3b24d;
border-radius: 999px;
- color: #f4bc56;
- content: '\2713';
- display: inline-grid;
- font-size: 0.72rem;
- height: 1.2rem;
- margin-right: 0.7rem;
- place-items: center;
- width: 1.2rem;
+ content: '';
+ height: 0.5rem;
+ margin-top: 0.55rem;
+ width: 0.5rem;
+}
+
+.audience-card .button {
+ justify-self: start;
+ margin-top: 0.25rem;
+}
+
+.contribution-section,
+.join-section {
+ border-radius: 14px;
+ padding: clamp(1.25rem, 3vw, 2rem);
+}
+
+.contribution-grid {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
}
-.roadmap-list {
+.contribution-grid article {
+ background: #f8fafc;
+ border: 1px solid rgba(15, 23, 42, 0.08);
+ border-radius: 8px;
display: grid;
- gap: 1.15rem;
+ gap: 0.55rem;
+ min-height: 11rem;
+ padding: 1rem;
}
-.roadmap-list div {
- align-items: start;
+.join-section {
+ align-items: center;
display: grid;
gap: 1rem;
- grid-template-columns: auto 1fr;
+ grid-template-columns: minmax(0, 1fr) auto;
+ margin-bottom: clamp(1rem, 3vw, 2rem);
}
-.roadmap-list span {
- height: 2.6rem;
- width: 2.6rem;
+.join-section > div:first-child {
+ display: grid;
+ gap: 0.75rem;
}
-.roadmap-list strong {
- color: #102033;
- font-size: 1.1rem;
+.join-actions {
+ justify-content: flex-end;
+ max-width: 29rem;
}
@media (max-width: 1040px) {
@@ -454,20 +429,28 @@ h1 em {
.hero,
.feature-grid,
- .demo-grid {
+ .audience-grid,
+ .contribution-grid,
+ .join-section {
grid-template-columns: 1fr;
}
+
+ .join-actions {
+ justify-content: flex-start;
+ max-width: none;
+ }
}
@media (max-width: 680px) {
.landing-shell {
- margin: 0;
- min-height: 100vh;
- border-radius: 0;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98)),
+ url('/assets/maps/africa-reference.svg') right -7rem top 5rem / 22rem auto no-repeat,
+ #f8fafc;
+ padding: 1rem;
}
- .landing-nav,
- .demo-heading {
+ .landing-nav {
align-items: stretch;
flex-direction: column;
}
@@ -478,10 +461,18 @@ h1 em {
}
h1 {
- font-size: clamp(3rem, 16vw, 4.2rem);
+ font-size: clamp(3.6rem, 19vw, 5rem);
+ }
+
+ .hero-statement {
+ max-width: 14ch;
}
.signal-grid {
grid-template-columns: 1fr;
}
+
+ .feature-grid article {
+ grid-template-columns: 1fr;
+ }
}
diff --git a/frontend/src/app/pages/landing/landing.component.ts b/frontend/src/app/pages/landing/landing.component.ts
index d3d96a1..0e4f77c 100644
--- a/frontend/src/app/pages/landing/landing.component.ts
+++ b/frontend/src/app/pages/landing/landing.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
@@ -10,64 +10,70 @@ import { RouterModule } from '@angular/router';
styleUrl: './landing.component.scss'
})
export class LandingComponent {
- featureHighlights = [
+ readonly githubUrl = 'https://github.com/mrwrite/echoed';
+ readonly contactEmail = 'support@echoed.com';
+
+ readonly educatorMailto =
+ 'mailto:support@echoed.com?subject=EchoEd%20educator%20feedback&body=Hi%20EchoEd%20team%2C%0A%0AI%27m%20an%20educator%20and%20I%27d%20like%20to%20help%20review%20or%20shape%20the%20learning%20experience.%0A%0ARole%2Fcontext%3A%0AWhat%20I%27d%20like%20to%20review%3A%0AAvailability%20for%20a%20walkthrough%3A%0A';
+
+ readonly interestMailto =
+ 'mailto:support@echoed.com?subject=I%20want%20to%20help%20with%20EchoEd&body=Hi%20EchoEd%20team%2C%0A%0AI%27d%20like%20to%20help%20with%20EchoEd.%0A%0AName%3A%0ARole%20%28educator%2C%20developer%2C%20student%2C%20organizer%2C%20other%29%3A%0AHow%20I%20want%20to%20help%3A%0AGitHub%2FLinkedIn%20%28optional%29%3A%0A';
+
+ readonly featureHighlights = [
{
- title: 'Culturally grounded curriculum',
- description: 'Stories, primary sources, and activities that celebrate African and African-American history with respect and rigor.',
+ title: 'African and African-American history at the center',
+ description: 'Lessons, activities, and source-aware learning flows designed around Black historical knowledge instead of treating it as an add-on.',
kicker: '01'
},
{
- title: 'Student progress intelligence',
- description: 'Live visibility into mastery, pacing, and engagement for every learner.',
+ title: 'A real product educators can test',
+ description: 'The live K-5 demo includes student, teacher, and admin experiences with progress, badges, courses, and guided learning paths.',
kicker: '02'
},
{
- title: 'Built for any learning model',
- description: 'Perfect for private schools, microschools, homeschool families, and community learning pods.',
+ title: 'Open-source infrastructure for community ownership',
+ description: 'Developers can inspect the code, improve the platform, strengthen accessibility, and help build tools educators actually need.',
kicker: '03'
},
];
- animatedCards = [
- { label: 'Educator-first', value: 'Admin & teacher control centers', detail: 'Curriculum tools, cohorts, and progress views' },
- { label: 'Learner delight', value: 'Immersive lessons & achievements', detail: 'Story-led lessons, badges, and momentum' },
- { label: 'Families', value: 'Simple onboarding', detail: 'Parent-friendly account creation and access' },
- { label: 'Middle + HS', value: 'Coming soon', detail: 'Upper grade pathways are already in motion' },
+ readonly platformSignals = [
+ { label: 'Curriculum', value: 'Story-led K-5 lessons and activities', kicker: 'A' },
+ { label: 'Dashboards', value: 'Student, teacher, and admin views', kicker: 'B' },
+ { label: 'Progress', value: 'Badges, completion, and mastery signals', kicker: 'C' },
+ { label: 'Roadmap', value: 'Middle and high school pathways in motion', kicker: 'D' },
+ ];
+
+ readonly educatorNeeds = [
+ 'Review lesson flow, tone, age fit, and classroom usefulness',
+ 'Suggest culturally responsive activities and discussion prompts',
+ 'Identify what teachers need before using this with learners',
+ 'Help form an advisory circle for Black-centered curriculum review',
];
- walkthroughSteps = [
- 'Open the workspace dashboard and frame the knowledge-to-product model.',
- 'Show Product Studio as the flagship creation workflow.',
- 'Open Review Center to explain trust, readiness, and governance.',
- 'Switch to Learner Portal to show product delivery without changing runtime rules.',
- 'Close with Analytics for product, access, review, and pipeline health.'
+ readonly developerNeeds = [
+ 'Improve Angular frontend workflows, responsive polish, and accessibility',
+ 'Contribute FastAPI backend features, tests, and data model hardening',
+ 'Add documentation, setup help, seed data, and good first issues',
+ 'Build curriculum tooling, review workflows, and demo reliability',
];
- testimonials = [
+ readonly contributionPaths = [
{
- quote: 'EchoEd gives our leadership team a way to turn internal expertise into governed learning products without adding operational chaos.',
- name: 'Maya R.',
- role: 'Enterprise Enablement Leader'
+ title: 'Curriculum review',
+ detail: 'Read a lesson, flag weak spots, suggest sources, and help the learning experience respect both rigor and culture.'
},
{
- quote: 'The review model matters. We can see what is ready, what is blocked, and what learners can safely access.',
- name: 'Dr. Jonah P.',
- role: 'Independent School Director'
+ title: 'Accessibility pass',
+ detail: 'Test keyboard flow, contrast, labels, mobile layout, and learner-friendly states across the public demo.'
},
{
- quote: 'It feels less like an LMS and more like a product studio for trusted education experiences.',
- name: 'Elena W.',
- role: 'Parent and Learning Pod Organizer'
- }
- ];
-
- roadmap = [
- { title: 'Future Grades', detail: 'Middle School Suites expanding into grades 6-8 with civics-rich projects and debates.' },
- { title: 'High School Pathways', detail: 'College-ready modules with primary-source analysis and AP-aligned rigor.' },
- ];
-
- audienceCards = [
- 'K-5 content live today',
- 'Middle & High School in motion',
+ title: 'Good first issues',
+ detail: 'Help split small frontend, backend, documentation, and testing tasks so new contributors can start quickly.'
+ },
+ {
+ title: 'Community outreach',
+ detail: 'Introduce EchoEd to Black educator networks, HBCU programs, developer groups, and local learning communities.'
+ },
];
}
Today's Demo
-K-5 Experience
+
+
+
-
-
+
+
+ For Black educators
+Review the learning experience
++ Bring classroom judgment, cultural context, curriculum feedback, and real learner needs into the product direction. +
-
-
- Story-led lessons with activities -
- Dashboards for students, teachers, admins -
- Badges, streaks, and progress insights +
- {{ item }}
Coming Soon
-
-
+
-
-
-
- {{ item.title }}
-
- {{ item.detail }}
-For Black developers
+Contribute to the platform
++ Help turn the mission into durable software across frontend, backend, accessibility, tests, docs, and curriculum tooling. +
+-
+
- {{ item }} +
+
+
+ Ways to help
+Useful contributions this week
+
+
+ {{ item.title }}
+
+
+ {{ item.detail }}
+
+
+
+
+ Join the build
+Tell us how you want to help
++ Send a short note with your role, what you want to review or build, and whether you want a walkthrough. + Educators, developers, students, organizers, and community partners are welcome. +
+