feat: swap in Footer component from @frequency-chain/style-guide (#43)

- also fix tailwindow.config.js to use 'extend' property, else Tailwind
classes from the package don't come through always


- Closes #36 

## Screenshot(s)

Desktop:

![image](https://github.com/user-attachments/assets/0cf2479b-0ab0-4dc9-a463-9858ed115259)

Mobile/small screen:

![image](https://github.com/user-attachments/assets/b6637fef-97be-422a-88cc-b00c59e00783)

Please delete options that are not relevant.

- [X] Content Change (Required approval in Slack: `#frequency-xyz` and
remember that changes along the way trigger
      re-approval.)
  - [ ] Approved HE (Required for technical wording)
  - [ ] Approved CM
  - [ ] Approved UO

# How to Test?
1. Pull branch
2. Run `npm run dev -- --open`
3. Visually verify that the footer matches the screenshots
4. 
# Checklist:

- [x] I have performed a self-review of my code
- [x] I have commented my code & PR, particularly in hard-to-understand
areas
- [x] I have checked at all the breakpoints to make sure it works on all
screen sizes

.github/workflows/ci.yml

@@ -36,6 +36,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+
       - name: Install Dependencies
         run: npm ci
 

.github/workflows/deploy.yml

@@ -42,7 +42,7 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build
         env:

.github/workflows/pr-deploy.yml

@@ -34,7 +34,7 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build
         env:

.tool-versions

@@ -1 +1 @@
-nodejs 20.10.0
+nodejs 20.18.0

src/routes/(home)/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Footer from '../../components/Footer.svelte';
+  import { Footer } from '@frequency-chain/style-guide';
   import GetNotified from '../../components/GetNotified/GetNotified.svelte';
   import SideTag from '../../components/SideTag.svelte';
 </script>

src/routes/docs/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Header from '../../components/Header/Header.svelte';
-  import Footer from '../../components/Footer.svelte';
+  import { Footer } from '@frequency-chain/style-guide';
 
   const logoHex = '#5E69FF';
   const navColor = 'navy';

src/routes/privacy/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Header from '../../components/Header/Header.svelte';
-  import Footer from '../../components/Footer.svelte';
+  import { Footer } from '@frequency-chain/style-guide';
 
   const logoHex = '#5E69FF';
   const navColor = 'navy';

tailwind.config.js

@@ -4,37 +4,39 @@ import frequencyConfig from '@frequency-chain/style-guide/tailwind.config';
 import { MAX_PAGE_WIDTH } from './src/lib/consts';
 
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/@frequency-chain/style-guide/**/*.{html,js,svelte,ts}'],
   theme: {
-    fontFamily: {
-      title: ['Newake', 'sans-serif'],
-      sans: ['Poppins', 'sans-serif'],
-    },
-    colors: {
-      darkIndigo: '#445BC3',
-      tealBright: '#00B6AF',
-    },
-    width: {
-      page: `${MAX_PAGE_WIDTH}px`,
-      full: '100%',
-    },
-    maxWidth: {
-      page: `${MAX_PAGE_WIDTH}px`,
-      full: '100%',
-    },
-    minWidth: {
-      page: `${MAX_PAGE_WIDTH}px`,
-      full: '100%',
-    },
-    screens: {
-      sm: '0px',
-      md: '900px',
-      lg: '1300px',
-      xl: `${MAX_PAGE_WIDTH}px`,
-      'vertical-lg': { raw: '(max-height: 700px) and (min-width: 1300px)' },
-      'vertical-md': { raw: '(max-height: 700px) and (min-width: 900px)' },
-      vertical: { raw: '(max-height: 700px) or (min-width: 0px)' },
-      horizontal: { raw: '(min-height: 700px) and (min-width: 1300px)' },
+    extend: {
+      fontFamily: {
+        title: ['Newake', 'sans-serif'],
+        sans: ['Poppins', 'sans-serif'],
+      },
+      colors: {
+        darkIndigo: '#445BC3',
+        tealBright: '#00B6AF',
+      },
+      width: {
+        page: `${MAX_PAGE_WIDTH}px`,
+        full: '100%',
+      },
+      maxWidth: {
+        page: `${MAX_PAGE_WIDTH}px`,
+        full: '100%',
+      },
+      minWidth: {
+        page: `${MAX_PAGE_WIDTH}px`,
+        full: '100%',
+      },
+      screens: {
+        sm: '0px',
+        md: '900px',
+        lg: '1300px',
+        xl: `${MAX_PAGE_WIDTH}px`,
+        'vertical-lg': { raw: '(max-height: 700px) and (min-width: 1300px)' },
+        'vertical-md': { raw: '(max-height: 700px) and (min-width: 900px)' },
+        vertical: { raw: '(max-height: 700px) or (min-width: 0px)' },
+        horizontal: { raw: '(min-height: 700px) and (min-width: 1300px)' },
+      },
     },
   },
   safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'],