diff --git a/.gitignore b/.gitignore index fd3dbb5..3d8275e 100644 --- a/.gitignore +++ b/.gitignore @@ -19,7 +19,6 @@ # misc .DS_Store *.pem - # debug npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index cb690e6..7737b79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,24 +11,27 @@ "@trussworks/react-uswds": "^9.1.0", "@uswds/uswds": "^3.9.0", "classnames": "^2.5.1", - "fs": "^0.0.1-security", "gray-matter": "^4.0.3", "next": "14.2.15", "path": "^0.12.7", "react": "^18.3.1", "react-dom": "^18", - "react-markdown": "^9.0.1" + "react-markdown": "^9.0.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-slick": "^0.23.13", "autoprefixer": "^10.4.20", "eslint": "^8.57.1", "eslint-config-next": "14.2.15", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.2", + "fs": "^0.0.1-security", "husky": "^9.1.6", "lint-staged": "^15.2.10", "postcss": "^8", @@ -844,6 +847,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", @@ -2083,6 +2095,11 @@ "node": ">=10.13.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/environment": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz", @@ -3007,7 +3024,8 @@ "node_modules/fs": { "version": "0.0.1-security", "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", - "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==" + "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==", + "dev": true }, "node_modules/fs.realpath": { "version": "1.0.0", @@ -4044,6 +4062,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -4079,6 +4103,14 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", @@ -4345,6 +4377,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6067,6 +6104,22 @@ "react": ">=18" } }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -6169,6 +6222,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -6552,6 +6610,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -6603,6 +6669,11 @@ "node": ">=0.6.19" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", diff --git a/package.json b/package.json index 3555b2e..6455784 100644 --- a/package.json +++ b/package.json @@ -17,24 +17,27 @@ "@trussworks/react-uswds": "^9.1.0", "@uswds/uswds": "^3.9.0", "classnames": "^2.5.1", - "fs": "^0.0.1-security", "gray-matter": "^4.0.3", "next": "14.2.15", "path": "^0.12.7", "react": "^18.3.1", "react-dom": "^18", - "react-markdown": "^9.0.1" + "react-markdown": "^9.0.1", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-slick": "^0.23.13", "autoprefixer": "^10.4.20", "eslint": "^8.57.1", "eslint-config-next": "14.2.15", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.2", + "fs": "^0.0.1-security", "husky": "^9.1.6", "lint-staged": "^15.2.10", "postcss": "^8", diff --git a/public/images/placeholder-carousel-numbered-1.png b/public/images/placeholder-carousel-numbered-1.png new file mode 100644 index 0000000..6aaeff1 Binary files /dev/null and b/public/images/placeholder-carousel-numbered-1.png differ diff --git a/public/images/placeholder-carousel-numbered-2.png b/public/images/placeholder-carousel-numbered-2.png new file mode 100644 index 0000000..3fe3c3b Binary files /dev/null and b/public/images/placeholder-carousel-numbered-2.png differ diff --git a/public/images/placeholder-carousel-numbered-3.png b/public/images/placeholder-carousel-numbered-3.png new file mode 100644 index 0000000..a56bfc8 Binary files /dev/null and b/public/images/placeholder-carousel-numbered-3.png differ diff --git a/public/images/placeholder-carousel-numbered-4.png b/public/images/placeholder-carousel-numbered-4.png new file mode 100644 index 0000000..7c7e820 Binary files /dev/null and b/public/images/placeholder-carousel-numbered-4.png differ diff --git a/public/images/placeholder-carousel-numbered-5.png b/public/images/placeholder-carousel-numbered-5.png new file mode 100644 index 0000000..f4e36eb Binary files /dev/null and b/public/images/placeholder-carousel-numbered-5.png differ diff --git a/public/images/placeholder-carousel-numbered-6.png b/public/images/placeholder-carousel-numbered-6.png new file mode 100644 index 0000000..b9b3ffd Binary files /dev/null and b/public/images/placeholder-carousel-numbered-6.png differ diff --git a/public/images/placeholder-carousel-numbered-7.png b/public/images/placeholder-carousel-numbered-7.png new file mode 100644 index 0000000..a1ae0a3 Binary files /dev/null and b/public/images/placeholder-carousel-numbered-7.png differ diff --git a/public/images/placeholder-carousel.svg b/public/images/placeholder-carousel.svg new file mode 100644 index 0000000..ef89310 --- /dev/null +++ b/public/images/placeholder-carousel.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/app/components/Carousel/Carousel.tsx b/src/app/components/Carousel/Carousel.tsx new file mode 100644 index 0000000..0fb0b82 --- /dev/null +++ b/src/app/components/Carousel/Carousel.tsx @@ -0,0 +1,54 @@ +'use client'; +import Slider from 'react-slick'; +import { basePath } from '../../utils/constants'; +import Image from 'next/image'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; + +export default function Carousel() { + const images = [ + `${basePath}/images/placeholder-carousel-numbered-1.png`, + `${basePath}/images/placeholder-carousel-numbered-2.png`, + `${basePath}/images/placeholder-carousel-numbered-3.png`, + `${basePath}/images/placeholder-carousel-numbered-4.png`, + `${basePath}/images/placeholder-carousel-numbered-5.png`, + `${basePath}/images/placeholder-carousel-numbered-6.png`, + `${basePath}/images/placeholder-carousel-numbered-7.png`, + `${basePath}/images/placeholder-carousel-numbered-1.png`, + `${basePath}/images/placeholder-carousel-numbered-2.png`, + `${basePath}/images/placeholder-carousel-numbered-3.png`, + `${basePath}/images/placeholder-carousel-numbered-4.png`, + `${basePath}/images/placeholder-carousel-numbered-5.png`, + `${basePath}/images/placeholder-carousel-numbered-6.png`, + `${basePath}/images/placeholder-carousel-numbered-7.png`, + ]; + + const settings = { + infinite: true, + speed: 15000, // Adjust speed to make it constant + slidesToShow: 7, // Number of visible slides + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 0, // Continuous without pause + cssEase: 'linear', // For smooth, continuous movement + pauseOnHover: false, + }; + + return ( +
+ + {images.map((src, index) => ( +
+ {`Slide +
+ ))} + +
+ ); +} diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx index 59f5beb..83830c0 100644 --- a/src/app/components/ContentContainer/ContentContainer.tsx +++ b/src/app/components/ContentContainer/ContentContainer.tsx @@ -8,12 +8,14 @@ interface ContentContainerProps { export function ContentContainer({ children, align = false, - classes = 'ml-auto mr-auto flex max-w-[87.5rem] flex-col px-10 py-4 sm:px-14 sm:py-20', + classes = '', }: ContentContainerProps) { + const defaultClasses = + 'ml-auto mr-auto flex max-w-[87.5rem] flex-col px-10 py-4 sm:px-14 sm:py-20'; return (
diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css index 750d260..efce8ae 100644 --- a/src/app/custom-styles.css +++ b/src/app/custom-styles.css @@ -13,6 +13,7 @@ --foreground: #171717; --header-teal: #224a58; --background-light-blue: #dcecf3; + --ifm-color-primary: #2e8555; font-size: 16px; /* base value for rem */ } diff --git a/src/app/page.tsx b/src/app/page.tsx index f7b2979..9f5e56a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ import { Grid, GridContainer } from '@trussworks/react-uswds'; import Image from 'next/image'; import { basePath } from './utils/constants'; +import Carousel from './components/Carousel/Carousel'; import Hero from './components/Hero/Hero'; import { ContentContainer } from './components/ContentContainer/ContentContainer'; import Link from 'next/link'; @@ -105,17 +106,26 @@ function SectionTwo() { function SectionThree() { return ( - -
-

- Jurisdictions working with DIBBs -

-

- State and local public health jurisdictions across the United States - used DIBBs to solve their toughest data challenges -

+ <> + + + +
+

+ Jurisdictions working with DIBBs +

+

+ State and local public health jurisdictions across the United + States used DIBBs to solve their toughest data challenges +

+
+ + + +
+
- + ); } diff --git a/src/content/homepage/section_1.md b/src/content/homepage/section_1.md deleted file mode 100644 index 5c9be66..0000000 --- a/src/content/homepage/section_1.md +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -# Improve the way your jurisdiction collects, processes, and views public health data - -Turn your jurisdiction's data into meaningful intelligence that drives timely public health action using CDC’s free, cloud-based products built from Data Integration Building Blocks, or DIBBs. diff --git a/src/content/homepage/section_2.md b/src/content/homepage/section_2.md deleted file mode 100644 index f48c4bb..0000000 --- a/src/content/homepage/section_2.md +++ /dev/null @@ -1,13 +0,0 @@ ---- ---- - -## Introducing PHDI - -Introducing Data Integration Building Blocks -DIBBs are modular, open-source software that can be configured as a pipeline to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions: - -- Better, higher quality data for use in data analysis -- Time-savings for public health staff thanks to reduced manual work -- More usable data that makes case investigation easier -- Automated data processing that streamlines data workflows -- Flexible cloud deployment options, including free central hosting through CDC diff --git a/src/content/homepage/section_3.md b/src/content/homepage/section_3.md deleted file mode 100644 index 85bd442..0000000 --- a/src/content/homepage/section_3.md +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -## Unlock the value of your jurisdiction’s data - -DIBBs products help jurisdictions make the most of their data. From improving the usability of electronic case reporting (eCR) data to streamlining data collection from healthcare providers without the need for a direct connection, our products save jurisdictions time and effort for case investigation and analysis. diff --git a/src/content/homepage/section_4.md b/src/content/homepage/section_4.md deleted file mode 100644 index 31a8a62..0000000 --- a/src/content/homepage/section_4.md +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -## Jurisdictions working with DIBBs - -State and local public health jurisdictions across the United States used DIBBs to solve their toughest data challenges