diff --git a/.eslintrc.json b/.eslintrc.json index 2502e77..b89e1b1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ ], "plugins": ["react", "@typescript-eslint"], "rules": { - "react/react-in-jsx-scope": "off" + "react/react-in-jsx-scope": "off", + "react/no-unescaped-entities": "off" } } diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c83e263 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["esbenp.prettier-vscode"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..223187e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "editor.formatOnSave": true, + "css.format.enable": true, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +} diff --git a/next.config.js b/next.config.js index b53467a..8ee7474 100644 --- a/next.config.js +++ b/next.config.js @@ -14,7 +14,9 @@ const nextConfig = { basePath: '/dibbs-site', assetPrefix: '/dibbs-site', sassOptions: { - includePaths: [path.join(__dirname, 'styles')], + includePaths: [ + path.join(__dirname, './', 'node_modules', '@uswds', 'uswds', 'packages'), + ], }, }; diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx new file mode 100644 index 0000000..11448d8 --- /dev/null +++ b/src/app/case-studies/page.tsx @@ -0,0 +1,12 @@ +import Hero from '../components/Hero/Hero'; + +export default function CaseStudies() { + return ( +
+ +
+ ); +} diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx new file mode 100644 index 0000000..d2e840a --- /dev/null +++ b/src/app/components/ContentContainer/ContentContainer.tsx @@ -0,0 +1,23 @@ +import { GridContainer } from '@trussworks/react-uswds'; +import classNames from 'classnames'; + +interface ContentContainerProps { + children: React.ReactNode; + align?: boolean; +} +export function ContentContainer({ + children, + align = false, +}: ContentContainerProps) { + return ( +
+ + {children} + +
+ ); +} diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx deleted file mode 100644 index 2c22c29..0000000 --- a/src/app/components/Footer.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client'; -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 classNames from 'classnames'; -import { basePath } from '../utils/constants'; - -export default function Footer() { - const [expanded, setExpanded] = React.useState(false); - const onClick = () => { - if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded); - }; - - const testItemsMenu = [ - - Home - , - - Home - , - - Our products - , - - Case studies - , - - Engage with us - , - ]; - - return ( - <> - - - ); -} diff --git a/src/app/components/Footer/Footer.module.scss b/src/app/components/Footer/Footer.module.scss new file mode 100644 index 0000000..4aed8ce --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx new file mode 100644 index 0000000..55697fb --- /dev/null +++ b/src/app/components/Footer/Footer.tsx @@ -0,0 +1,63 @@ +'use client'; +import { PrimaryNav } from '@trussworks/react-uswds'; +import Image from 'next/image'; +import React from 'react'; +import { NavigationLink } from '../NavigationLink/NavigationLink'; +import classNames from 'classnames'; +import { basePath } from '../../utils/constants'; +import styles from './Footer.module.scss'; + +export default function Footer() { + const [expanded, setExpanded] = React.useState(false); + const onClick = () => { + if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded); + }; + + const testItemsMenu = [ + + Home + , + + Our products + , + + Case studies + , + + Engage with us + , + ]; + + return ( + + ); +} diff --git a/src/app/components/Header/Header.module.scss b/src/app/components/Header/Header.module.scss new file mode 100644 index 0000000..4aed8ce --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/Header.tsx b/src/app/components/Header/Header.tsx similarity index 92% rename from src/app/components/Header.tsx rename to src/app/components/Header/Header.tsx index 0f09875..c1b816c 100644 --- a/src/app/components/Header.tsx +++ b/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); diff --git a/src/app/components/Hero/Hero.module.scss b/src/app/components/Hero/Hero.module.scss new file mode 100644 index 0000000..43d7ee5 --- /dev/null +++ b/src/app/components/Hero/Hero.module.scss @@ -0,0 +1,17 @@ +.content { + display: flex; + padding: 0px 30px; + align-items: center; + gap: 60px; + max-width: 1200px; +} + +.heading { + max-width: 58.75rem; + color: #224a58; + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin: 0px; +} diff --git a/src/app/components/Hero/Hero.tsx b/src/app/components/Hero/Hero.tsx new file mode 100644 index 0000000..901c416 --- /dev/null +++ b/src/app/components/Hero/Hero.tsx @@ -0,0 +1,24 @@ +import { GridContainer } from '@trussworks/react-uswds'; +import styles from './Hero.module.scss'; + +interface HeroProps { + header: string; + subheader: string; +} + +export default function Hero({ header, subheader }: HeroProps) { + return ( +
+ +
+
+

{header}

+

+ {subheader} +

+
+
+ +
+ ); +} diff --git a/src/app/components/MarkdownComponent.tsx b/src/app/components/MarkdownComponent/MarkdownComponent.tsx similarity index 84% rename from src/app/components/MarkdownComponent.tsx rename to src/app/components/MarkdownComponent/MarkdownComponent.tsx index 2e3df72..e3e6df7 100644 --- a/src/app/components/MarkdownComponent.tsx +++ b/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); diff --git a/src/app/components/NavigationLink/NavigationLink.module.scss b/src/app/components/NavigationLink/NavigationLink.module.scss new file mode 100644 index 0000000..ba5f421 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx similarity index 93% rename from src/app/components/NavigationLink.tsx rename to src/app/components/NavigationLink/NavigationLink.tsx index baf5df1..18ce846 100644 --- a/src/app/components/NavigationLink.tsx +++ b/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 { children: React.ReactNode; diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner/UsaBanner.tsx similarity index 97% rename from src/app/components/UsaBanner.tsx rename to src/app/components/UsaBanner/UsaBanner.tsx index edeeb4c..df04f53 100644 --- a/src/app/components/UsaBanner.tsx +++ b/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); diff --git a/src/app/globals.css b/src/app/custom-styles.css similarity index 79% rename from src/app/globals.css rename to src/app/custom-styles.css index e225cb4..98f3f6b 100644 --- a/src/app/globals.css +++ b/src/app/custom-styles.css @@ -1,37 +1,25 @@ @tailwind base; @tailwind components; @tailwind utilities; -@import '@trussworks/react-uswds/lib/uswds.css'; -@import '@trussworks/react-uswds/lib/index.css'; + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} :root { --background: #ffffff; --foreground: #171717; --header-teal: #224a58; --background-light-blue: #dcecf3; + font-size: 16px; /* base value for rem */ } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - +html, body { - /* color: var(--foreground); - background: var(--background); */ - font-family: Arial, Helvetica, sans-serif; -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} -h1 { - margin: 2rem 0 2rem 0; - font-size: larger; + background: #e7f2f580; + font-family: 'Source Sans Pro', sans-serif; } .usa-logo a { @@ -69,7 +57,6 @@ h1 { } h1 { - font-family: 'Source Sans Pro', sans-serif; font-size: 40px; font-weight: 700; line-height: 50.28px; diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx new file mode 100644 index 0000000..0e0ae43 --- /dev/null +++ b/src/app/engage-with-us/page.tsx @@ -0,0 +1,137 @@ +'use client'; +import { + Button, + ComboBox, + Form, + Grid, + Label, + Textarea, + TextInput, +} from '@trussworks/react-uswds'; +import { ContentContainer } from '../components/ContentContainer/ContentContainer'; +import Hero from '../components/Hero/Hero'; + +export default function EngageWithUs() { + return ( +
+ + + + + + + + + + + +
+ ); +} + +function Left() { + return ( + <> +

Contact us

+

+ Fill out the form below to get in touch with us +

+
{}} + className="align-start flex min-w-[31.25rem] flex-col gap-y-2" + > +
+ + + + + + + + {}} + /> +
+ +