Skip to content

Commit 2692b67

Browse files
abachman-dsacabachman-dsac
authored
[NDH-241] NPD Landing Page MVP (#113)
- introduce react-router, put Landing page in a proper route - when running vite in development mode, use the default base path - flesh out the landing page with styling and content
1 parent 508385d commit 2692b67

File tree

18 files changed

+565
-54
lines changed

18 files changed

+565
-54
lines changed

‎frontend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<script
88
src="/node_modules/@uswds/uswds/dist/js/uswds-init.min.js"

‎frontend/package-lock.json‎

Lines changed: 39 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"@uswds/uswds": "3.13.0",
1717
"classnames": "^2.5.1",
1818
"react": "^19.1.1",
19-
"react-dom": "^19.1.1"
19+
"react-dom": "^19.1.1",
20+
"react-router": "^7.9.4"
2021
},
2122
"devDependencies": {
2223
"@eslint/js": "^9.33.0",

‎frontend/public/favicon.ico‎

5.3 KB
Binary file not shown.

‎frontend/src/assets/cms-gov-logo.png‎

17.3 KB
Loading

‎frontend/src/assets/cms-gov-logo.svg‎

Lines changed: 84 additions & 0 deletions
Loading

‎frontend/src/assets/hss-logo.png‎

46.5 KB
Loading

‎frontend/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎frontend/src/components/Footer.module.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.footer {
2+
background-color: var(--color-gray-lightest);
3+
color: var(--color-base);
4+
font-size: var(--font-size-sm);
5+
padding-block: var(--spacer-2);
6+
}
7+
8+
.logoContainer {
9+
column-gap: 1rem;
10+
11+
color: var(--theme-color-base, #262626);
12+
13+
/* Body/Small */
14+
font-family: var(--theme-font-family-body, "Open Sans");
15+
font-size: var(--theme-font-size-sm, 0.875rem);
16+
font-style: normal;
17+
font-weight: var(--theme-font-weight-body-sm, 400);
18+
line-height: 150%; /* 1.3125rem */
19+
}
20+
21+
.logoText {
22+
& p:first-child {
23+
margin-top: 0;
24+
}
25+
}
26+
27+
.logoImg {
28+
max-width: 5.25rem;
29+
max-height: 5.25rem;
30+
}

‎frontend/src/components/Footer.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import classNames from "classnames"
2+
import logoImgSrc from "../assets/hss-logo.png"
3+
import styles from "./Footer.module.css"
4+
5+
const FooterLogo = () => {
6+
const classes = classNames(
7+
"ds-u-display--flex",
8+
"ds-u-flex-direction--row",
9+
"ds-u-align-items--center",
10+
styles.logoContainer,
11+
)
12+
return (
13+
<div className={classes}>
14+
<img src={logoImgSrc} className={styles.logoImg} alt="HHS Logo" />
15+
<div className={styles.logoText}>
16+
<p>
17+
A federal government website managed and paid for by the U.S. Centers
18+
for Medicare & Medicaid Services.
19+
</p>
20+
<p>7500 Security Boulevard, Baltimore, MD 21244</p>
21+
</div>
22+
</div>
23+
)
24+
}
25+
26+
export const Footer = () => {
27+
const linkHeaderClasses = classNames(
28+
"usa-footer__primary-link",
29+
"ds-u-padding-top--0",
30+
"ds-u-margin-top--0",
31+
)
32+
return (
33+
<footer className={styles.footer}>
34+
<section className="ds-l-container">
35+
<div className="ds-l-row">
36+
<div className="ds-l-col--5">
37+
<FooterLogo />
38+
</div>
39+
<div className="ds-l-col--2">
40+
<h4 className={linkHeaderClasses}>National Provider Directory</h4>
41+
<ul className="usa-list usa-list--unstyled">
42+
<a href="#">Footer link</a>
43+
</ul>
44+
</div>
45+
<div className="ds-l-col--2">
46+
<h4 className={linkHeaderClasses}>CMS & HHS Websites</h4>
47+
<ul className="usa-list usa-list--unstyled">
48+
<a href="#">Footer link</a>
49+
</ul>
50+
</div>
51+
<div className="ds-l-col--2">
52+
<h4 className={linkHeaderClasses}>Additional Information</h4>
53+
<ul className="usa-list usa-list--unstyled">
54+
<a href="#">Footer link</a>
55+
</ul>
56+
</div>
57+
</div>
58+
</section>
59+
</footer>
60+
)
61+
}

0 commit comments

Comments
 (0)