feat: add footer component to full-width layout

src/components/layout/FullWidth.tsx

@@ -7,7 +7,12 @@ export interface FullWidthProps {
 }
 
 const FullWidth: FC<FullWidthProps> = ({ className, children }) => {
-  return <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
+  return (
+    <>
+      <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
+      <Footer />
+    </>
+  )
 }
 
 export default FullWidth

src/components/layout/fragments/Footer.tsx

@@ -0,0 +1,124 @@
+import { faChevronRight, faHeart } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { css } from '@styled-system/css'
+import type { FC } from 'react'
+
+const footerClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: 0
+})
+
+const footerContainerClass = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+  width: '100%',
+  maxWidth: {
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const footerLegendClass = css({
+  fontSize: 'sm'
+})
+
+const footerLegendIconClass = css({
+  color: 'red'
+})
+
+const footerLinkGroupClass = css({
+  padding: 'sm'
+})
+
+const footerLinkGroupTitleClass = css({
+  display: 'block',
+  fontSize: 'h3',
+  textAlign: 'center'
+})
+
+interface Link {
+  label: string
+  href: string
+}
+
+interface LinkGroup {
+  heading: string
+  links: Link[]
+}
+
+const linkGroups: LinkGroup[] = [
+  {
+    heading: 'Sobre Mi',
+    links: [{ label: 'Como Desarrollador', href: 'https://srjuggernaut.dev/' }]
+  },
+  {
+    heading: 'Redes Sociales',
+    links: [
+      { label: 'Twitch', href: 'https://www.twitch.tv/juggernautplays' },
+      { label: 'Youtube', href: 'https://www.youtube.com/JuggernautPlays' },
+      {
+        label: 'BlueSky',
+        href: 'https://bsky.app/profile/jugger.srjuggernaut.dev'
+      },
+      { label: 'Twitter', href: 'https://twitter.com/juggernautplays' }
+    ]
+  }
+]
+
+const Footer: FC = () => {
+  return (
+    <footer className={footerClass}>
+      <div className={footerContainerClass}>
+        {linkGroups.map((group) => (
+          <div
+            className={footerLinkGroupClass}
+            key={group.heading}
+          >
+            <span className={footerLinkGroupTitleClass}>{group.heading}</span>
+            <ul className="fa-ul">
+              {group.links.map((link) => (
+                <li key={link.href}>
+                  <span className="fa-li">
+                    <FontAwesomeIcon icon={faChevronRight} />
+                  </span>
+                  <a href={link.href}>{link.label}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      <p className={footerLegendClass}>
+        Made by{' '}
+        <a
+          href="https://srjuggernaut.dev/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          SrJuggernaut
+        </a>{' '}
+        with{' '}
+        <FontAwesomeIcon
+          icon={faHeart}
+          className={footerLegendIconClass}
+        />{' '}
+        and{' '}
+        <a
+          href="https://tanstack.com/start/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          TanStack Start
+        </a>
+      </p>
+    </footer>
+  )
+}
+
+export default Footer