Creating cookie consent component

app/scripts/components/common/cookie-consent/index.scss

@@ -0,0 +1,8 @@
+.modal {
+    z-index: 999;
+    position: fixed;
+    max-width: 725px;
+    border-radius: 35px;
+    bottom: 0;
+    right: 0;
+}

app/scripts/components/common/cookie-consent/index.tsx

@@ -0,0 +1,31 @@
+import { Alert, Button, ButtonGroup, Link } from '@trussworks/react-uswds';
+import React from 'react';
+import './index.scss';
+export const CookieConsent = () => {
+  return (
+    <div className='modal margin-2'>
+      <Alert
+        type='info'
+        heading='Cookie Consent'
+        headingLevel='h1'
+        noIcon={true}
+      >
+        <div className='padding-bottom-2'>
+          We use cookies to enhance your browsing experience and to help us
+          understand how our website is used. These cookies allow us to collect
+          data on site usage and improve our services based on your
+          interactions. To learn more about it, see our{' '}
+          <Link href='https://www.nasa.gov/privacy/#cookies'>
+            Privacy Policy
+          </Link>
+        </div>
+        <ButtonGroup>
+          <Button outline={true} type={'button'}>
+            Decline Cookies
+          </Button>
+          <Button type={'button'}>Accept Cookies</Button>
+        </ButtonGroup>
+      </Alert>
+    </div>
+  );
+};

app/scripts/components/home/index.tsx

@@ -25,6 +25,8 @@ import {
   ContentOverride
 } from '$components/common/page-overrides';
 
+import { CookieConsent } from '$components/common/cookie-consent';
+
 const homeContent = getOverride('homeContent');
 
 const Connections = styled(Hug)`
@@ -112,10 +114,10 @@ const getCoverProps = () => {
 
     return author
       ? {
-          ...coverProps,
-          attributionAuthor: author.name,
-          attributionUrl: author.url
-        }
+        ...coverProps,
+        attributionAuthor: author.name,
+        attributionUrl: author.url
+      }
       : coverProps;
   } else {
     return {
@@ -136,11 +138,11 @@ function RootHome() {
 
   return (
     <PageMainContent>
-      <LayoutProps 
-        title='Welcome' 
-        banner={renderBanner? {...banner}: null}
+      <LayoutProps
+        title='Welcome'
+        banner={renderBanner ? { ...banner } : null}
       />
-
+    <CookieConsent/>
       <ComponentOverride with='homeHero'>
         <PageHeroHome
           title={homeContent?.data.title ?? `Welcome to the ${appTitle}`}
@@ -171,6 +173,7 @@ function RootHome() {
       </ComponentOverride>
 
       <ContentOverride with='homeContent'>
+
         <Audience />
 
         <FeaturedStories />

app/scripts/styles/styles.scss

@@ -5,3 +5,5 @@
 @use "usa-banner";
 @use "usa-button";
 @use "usa-card";
+@use "usa-alert";
+@use "usa-button-group";