Basic carousel for new site

.gitignore

@@ -19,7 +19,6 @@
 # misc
 .DS_Store
 *.pem
-
 # debug
 npm-debug.log*
 yarn-debug.log*

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",

src/app/components/Carousel/Carousel.module.scss

@@ -0,0 +1,11 @@
+.sliderContainer {
+  h3 {
+    font-size: 36px;
+    margin: 10px;
+    padding: 2% 0;
+    background: var(--ifm-color-primary);
+    color: #fff;
+    line-height: 100px;
+    text-align: center;
+  }
+}

src/app/components/Carousel/Carousel.tsx

@@ -0,0 +1,53 @@
+'use client';
+import Slider from 'react-slick';
+import styles from './Carousel.module.scss';
+import { basePath } from '../../utils/constants';
+import Image from 'next/image';
+
+export default function SimpleSlider() {
+  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 (
+    <div className={styles.sliderContainer}>
+      <Slider {...settings}>
+        {images.map((src, index) => (
+          <div key={index}>
+            <Image
+              src={src}
+              alt={`Slide ${index + 1}`}
+              width={160}
+              height={100}
+              draggable={false}
+            />
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+}

src/app/components/ContentContainer/ContentContainer.tsx

@@ -4,15 +4,17 @@ import classNames from 'classnames';
 interface ContentContainerProps {
   children: React.ReactNode;
   align?: boolean;
+  classes?: string;
 }
 export function ContentContainer({
   children,
   align = false,
+  classes = 'px-14 py20',
 }: ContentContainerProps) {
   return (
     <section>
       <GridContainer
-        className={classNames('px-14 py-20', {
+        className={classNames(classes, {
           'px-32': !align,
         })}
       >

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 */
 }
 

src/app/layout.tsx

@@ -3,6 +3,8 @@ import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import USABanner from './components/UsaBanner/UsaBanner';
 import { basePath } from './utils/constants';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 import './globals.scss';
 import './custom-styles.css';
 

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 SimpleCarousel 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 (
-    <ContentContainer align>
-      <div className="flex flex-col items-center">
-        <h2 className="text-center text-[2rem] font-bold text-[#224a58]">
-          Jurisdictions working with DIBBs
-        </h2>
-        <p className="text-center text-base font-normal leading-relaxed text-[#224a58]">
-          State and local public health jurisdictions across the United States
-          used DIBBs to solve their toughest data challenges
-        </p>
+    <>
+      <ContentContainer align classes="px-14 pt-20 pb-10">
+        <Grid row gap>
+          <Grid col={12}>
+            <div className="flex flex-col items-center">
+              <h2 className="text-center text-[2rem] font-bold text-[#224a58]">
+                Jurisdictions working with DIBBs
+              </h2>
+              <p className="text-center text-base font-normal leading-relaxed text-[#224a58]">
+                State and local public health jurisdictions across the United
+                States used DIBBs to solve their toughest data challenges
+              </p>
+            </div>
+          </Grid>
+        </Grid>
+      </ContentContainer>
+      <div className="pb-20 pt-10">
+        <SimpleCarousel />
       </div>
-    </ContentContainer>
+    </>
   );
 }