refactor component structure, scss files for specific component styling

src/app/case-studies/page.tsx

@@ -1,4 +1,4 @@
-import Hero from '../components/Hero';
+import Hero from '../components/Hero/Hero';
 
 export default function CaseStudies() {
   return (

src/app/components/Footer/Footer.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}

src/app/components/Footer.tsx → src/app/components/Footer/Footer.tsx

@@ -3,10 +3,10 @@ import { PrimaryNav } from '@trussworks/react-uswds';
 import Link from 'next/link';
 import Image from 'next/image';
 import React from 'react';
-import styles from '../styles/Home.module.scss';
-import { NavigationLink } from './NavigationLink';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
 import classNames from 'classnames';
-import { basePath } from '../utils/constants';
+import { basePath } from '../../utils/constants';
+import styles from './Footer.module.scss';
 
 export default function Footer() {
   const [expanded, setExpanded] = React.useState(false);
@@ -15,24 +15,16 @@ export default function Footer() {
   };
 
   const testItemsMenu = [
-    <Link
-      key="one"
-      href="/"
-      className={classNames('usa-nav__link', styles.homeNavItem)}
-      onClick={onClick}
-    >
-      <span className={styles.navbarItemText}>Home</span>
-    </Link>,
-    <NavigationLink key="two" href="/" onClick={onClick}>
+    <NavigationLink key="one" href="/" onClick={onClick}>
       Home
     </NavigationLink>,
-    <NavigationLink key="three" href="/our-products" onClick={onClick}>
+    <NavigationLink key="two" href="/our-products" onClick={onClick}>
       Our products
     </NavigationLink>,
-    <NavigationLink key="four" href="/case-studies" onClick={onClick}>
+    <NavigationLink key="three" href="/case-studies" onClick={onClick}>
       Case studies
     </NavigationLink>,
-    <NavigationLink key="five" href="/engage-with-us" onClick={onClick}>
+    <NavigationLink key="four" href="/engage-with-us" onClick={onClick}>
       Engage with us
     </NavigationLink>,
   ];

src/app/components/Header/Header.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}

src/app/components/Header.tsx → src/app/components/Header/Header.tsx

@@ -2,10 +2,10 @@
 import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import React from 'react';
-import styles from '../styles/Home.module.scss';
 import classNames from 'classnames';
-import { basePath } from '../utils/constants';
-import { NavigationLink } from './NavigationLink';
+import { basePath } from '../../utils/constants';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
+import styles from './Header.module.scss';
 
 export default function Header() {
   const [expanded, setExpanded] = React.useState(false);

src/app/components/Hero.tsx → src/app/components/Hero/Hero.tsx

@@ -1,5 +1,5 @@
 import { GridContainer } from '@trussworks/react-uswds';
-import styles from '../styles/Hero.module.scss';
+import styles from './Hero.module.scss';
 
 interface HeroProps {
   header: string;

src/app/components/MarkdownComponent.tsx → src/app/components/MarkdownComponent/MarkdownComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { getMarkdownContent } from '../utils/markdown';
+import { getMarkdownContent } from '../../utils/markdown';
 
 export default async function MarkdownContent(fileName: string) {
   const markdownContent = await getMarkdownContent(fileName);

src/app/components/NavigationLink/NavigationLink.module.scss

@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarItemText {
+    color: #f0f0f0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarItemText {
+    color: #565c65;
+  }
+}

src/app/components/NavigationLink.tsx → src/app/components/NavigationLink/NavigationLink.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
-import styles from '../styles/Home.module.scss';
+import styles from './NavigationLink.module.scss';
 
 interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
   children: React.ReactNode;

src/app/components/UsaBanner.tsx → src/app/components/UsaBanner/UsaBanner.tsx

@@ -11,7 +11,7 @@ import {
   MediaBlockBody,
   Icon,
 } from '@trussworks/react-uswds';
-import { basePath } from '../utils/constants';
+import { basePath } from '../../utils/constants';
 
 export default function USABanner() {
   const [isOpen, setIsOpen] = useState(false);

src/app/engage-with-us/page.tsx

@@ -1,4 +1,4 @@
-import Hero from '../components/Hero';
+import Hero from '../components/Hero/Hero';
 
 export default function EngageWithUs() {
   return (

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import USABanner from './components/UsaBanner';
+import Header from './components/Header/Header';
+import Footer from './components/Footer/Footer';
+import USABanner from './components/UsaBanner/UsaBanner';
 import { basePath } from './utils/constants';
 import './globals.scss';
 import './custom-styles.css';

src/app/page.tsx

@@ -1,9 +1,9 @@
-import MarkdownContent from './components/MarkdownComponent';
+import MarkdownContent from './components/MarkdownComponent/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
-import Hero from './components/Hero';
-import InvitationCta from './components/InvitationCta';
+import Hero from './components/Hero/Hero';
+import InvitationCta from './components/InvitationCta/InvitationCta';
 
 export default async function Home() {
   return (