Skip to content

feat: add emergency numbers flow and refine homepage hero layout #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kckagancan merged 3 commits into from
Mar 29, 2026
Merged

feat: add emergency numbers flow and refine homepage hero layout #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b93c223
feat: add emergency numbers link to top navbar
erinc00 Mar 29, 2026
9ee1910
feat: add read-only emergency numbers page and hotline data
erinc00 Mar 29, 2026
ed0c6d4
feat: refine homepage hero slides and section layout
erinc00 Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions web/src/app/emergency-numbers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
"use client";

import { AppShell } from "@/components/layout/AppShell";
import { SectionCard } from "@/components/ui/display/SectionCard";
import { SectionHeader } from "@/components/ui/display/SectionHeader";
import { defaultEmergencyContacts } from "@/lib/emergencyNumbers";

export default function EmergencyNumbersPage() {
return (
<AppShell title="Emergency Numbers">
<div className="emergency-page-grid">
<SectionCard>
<SectionHeader
title="Emergency Contact List"
subtitle="Quick-access emergency numbers for critical situations."
/>

<div className="emergency-contact-list">
{defaultEmergencyContacts.map((item) => (
<div key={item.id} className="emergency-contact-item">
<div className="emergency-contact-meta">
<p className="emergency-contact-label">{item.label}</p>
<p className="emergency-contact-subtitle">Emergency Contact</p>
</div>

<div className="emergency-contact-actions-row">
<p className="emergency-contact-phone">{item.phone}</p>
</div>
</div>
))}
</div>


</SectionCard>
</div>
</AppShell>
);
}
110 changes: 79 additions & 31 deletions web/src/app/home/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,49 @@ import { SectionCard } from "@/components/ui/display/SectionCard";
import { SectionHeader } from "@/components/ui/display/SectionHeader";
import { PrimaryButton } from "@/components/ui/buttons/PrimaryButton";
import { SecondaryButton } from "@/components/ui/buttons/SecondaryButton";
import {
defaultEmergencyContacts,
type EmergencyContact,
} from "../../lib/emergencyNumbers";
import { mockNews } from "@/lib/news";

const heroSlides = [
{
title: "We care for you and every community around you",
description:
"NEPH is a social responsibility initiative focused on preparedness, solidarity, and faster local coordination before and during emergencies.",
primaryCtaLabel: "Open News",
primaryCtaHref: "/news",
secondaryCtaLabel: "Emergency Numbers",
secondaryCtaHref: "/emergency-numbers",
isMainSlide: true,
},
{
title: "Preparedness starts before emergencies",
description:
"Keep your emergency profile, health details, and location preferences current so support teams can coordinate faster.",
ctaLabel: "Update Profile",
ctaHref: "/profile",
primaryCtaLabel: "Update Profile",
primaryCtaHref: "/profile",
secondaryCtaLabel: "View Announcements",
secondaryCtaHref: "/news",
},
{
title: "Report incidents from the mobile app",
description:
"Use the NEPH mobile app to quickly submit emergency requests and stay connected with neighborhood responders.",
ctaLabel: "Open News",
ctaHref: "/news",
primaryCtaLabel: "Open News",
primaryCtaHref: "/news",
secondaryCtaLabel: "View Announcements",
secondaryCtaHref: "/news",
},
{
title: "Track local updates in one place",
description:
"Follow announcements, preparedness updates, and community coordination news from a single dashboard.",
ctaLabel: "Browse News",
ctaHref: "/news",
primaryCtaLabel: "Browse News",
primaryCtaHref: "/news",
secondaryCtaLabel: "View Announcements",
secondaryCtaHref: "/news",
},
];

Expand All @@ -47,30 +67,33 @@ export default function HomePage() {

const currentSlide = heroSlides[activeSlide];
const previewNews = mockNews.slice(0, 3);
const previewContacts = defaultEmergencyContacts.slice(0, 3);

return (
<AppShell>
<div className="home-page">
<section className="home-hero">
<div className="home-hero-grid">
<div>
<div className="home-hero-content">
<p className="home-hero-eyebrow">NEPH Emergency Hub</p>
<h1 className="home-hero-title">{currentSlide.title}</h1>
<h1 className={`home-hero-title${currentSlide.isMainSlide ? " is-main" : ""}`}>
{currentSlide.title}
</h1>
<p className="home-hero-description">{currentSlide.description}</p>

<div className="home-hero-actions">
<PrimaryButton
className="home-hero-primary-action"
onClick={() => router.push(currentSlide.ctaHref)}
onClick={() => router.push(currentSlide.primaryCtaHref)}
>
{currentSlide.ctaLabel}
{currentSlide.primaryCtaLabel}
</PrimaryButton>

<SecondaryButton
className="home-hero-secondary-action"
onClick={() => router.push("/news")}
onClick={() => router.push(currentSlide.secondaryCtaHref)}
>
View Announcements
{currentSlide.secondaryCtaLabel}
</SecondaryButton>
</div>
</div>
Expand All @@ -93,26 +116,51 @@ export default function HomePage() {
</div>
</section>

<SectionCard>
<SectionHeader
title="Latest News"
subtitle="A short preview from announcements and community updates."
/>

<div className="home-news-list">
{previewNews.map((item) => (
<article key={item.id} className="home-news-card">
<p className="home-news-category">{item.category}</p>
<h3 className="home-news-title">{item.title}</h3>
<p className="home-news-summary">{item.summary}</p>
</article>
))}
</div>
<div className="home-sections-grid">
<SectionCard className="home-section-card">
<SectionHeader
title="Latest News"
subtitle="A short preview from announcements and community updates."
/>

<div className="home-news-action-wrap">
<SecondaryButton onClick={() => router.push("/news")}>View All News</SecondaryButton>
</div>
</SectionCard>
<div className="home-news-list">
{previewNews.map((item) => (
<article key={item.id} className="home-news-card">
<p className="home-news-category">{item.category}</p>
<h3 className="home-news-title">{item.title}</h3>
<p className="home-news-summary">{item.summary}</p>
</article>
))}
</div>

<div className="home-news-action-wrap">
<SecondaryButton onClick={() => router.push("/news")}>View All News</SecondaryButton>
</div>
</SectionCard>

<SectionCard className="home-section-card">
<SectionHeader
title="Emergency Numbers"
subtitle="Quick-access contacts for emergencies."
/>

<div className="home-emergency-list">
{previewContacts.map((item: EmergencyContact) => (
<article key={item.id} className="home-emergency-card">
<div>
<p className="home-contact-label">{item.label}</p>
<p className="home-contact-hint">Emergency Contact</p>
</div>
<p className="home-contact-phone">{item.phone}</p>
</article>
))}
</div>

<div className="home-emergency-actions">
<SecondaryButton onClick={() => router.push("/emergency-numbers")}>View Full List</SecondaryButton>
</div>
</SectionCard>
</div>
</div>
</AppShell>
);
Expand Down
1 change: 1 addition & 0 deletions web/src/components/layout/TopNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { clearAccessToken } from "@/lib/auth";
const navItems = [
{ label: "Home", href: "/home" },
{ label: "News", href: "/news" },
{ label: "Emergency Numbers", href: "/emergency-numbers" },
{ label: "Profile", href: "/profile" },
{ label: "Privacy", href: "/privacy" },
{ label: "Security", href: "/security" },
Expand Down
14 changes: 14 additions & 0 deletions web/src/lib/emergencyNumbers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export type EmergencyContact = {
id: string;
label: string;
phone: string;
};

export const defaultEmergencyContacts: EmergencyContact[] = [
{ id: "e-001", label: "General Emergency", phone: "112" },
{ id: "e-002", label: "AFAD Disaster and Emergency", phone: "122" },
{ id: "e-003", label: "Fire Department", phone: "110" },
{ id: "e-004", label: "Coast Guard", phone: "158" },
{ id: "e-005", label: "Forest Fire Hotline", phone: "177" },
{ id: "e-006", label: "Poison Information Center", phone: "114" },
];
Loading