feat: flesh in hero

clients/admin-client/src/components/Breadcrumbs.tsx

@@ -15,7 +15,7 @@ export const BreadCrumbs: FC<TBreadCrumbs> = ({ title }) => {
   }
 
   return (
-    <nav className="container mt-2 mb-2" aria-label="breadcrumb">
+    <nav className="container my-4" aria-label="breadcrumb">
      <ol className="breadcrumb">
         {crumbs.map((crumb, index) =>
           index !== crumbs.length - 1 ? (

clients/admin-client/src/pages/archetypes.page.tsx

@@ -4,7 +4,7 @@ import ArchetypeSelect from '../components/ArchetypeSelect';
 export default function ArchetypePage() {
   return (
     <main className="container">
-      <Paper elevation="1">
+      <Paper elevation="1" className='p-5'>
         <h1>Archetypes</h1>
         <p>
           Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.

clients/admin-client/src/pages/character-sheets.page.tsx

@@ -3,7 +3,7 @@ import { Paper } from '@cats-cradle/design-system/dist/main';
 export default function CharacterSheetsPage() {
   return (
     <main className="container">
-      <Paper elevation="1">
+      <Paper elevation="1" className='p-5'>
         <h1>Character Sheets</h1>
       </Paper>
     </main>

clients/admin-client/src/pages/dice.page.tsx

@@ -4,7 +4,7 @@ import { DiceAnalyzer } from '../components/DiceAnalyzer';
 export default function DicePage() {
   return (
     <main className="container">
-      <Paper elevation="1">
+      <Paper elevation="1" className='p-5'>
         <h1>Dice Notation Analyzer</h1>
         <p>
           Determine the appropriate dice notation for skill set rolls and

clients/admin-client/src/pages/home.page.tsx

@@ -1,20 +1,27 @@
-import { Paper, Button, Link, FontAwesomeIcon, faArrowRight } from '@cats-cradle/design-system/dist/main';
+import { Hero, Paper, Button, Link, FontAwesomeIcon, faArrowRight } from '@cats-cradle/design-system/dist/main';
 
 export default function HomePage() {
   return (
-    <main className="container">
-      <Paper elevation="1">
-        <h1>Cats Cradle</h1>
-        <h2>Latest</h2>
-        <h3>Archetypes</h3>
-        <p>
-        Attention, game masters! Introducing our latest tool designed exclusively for you.
-        Dive into the world of character archetypes with ease.
-        Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
-        No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
-        </p>
-        <Button href="/archetypes" color="secondary">Try It <FontAwesomeIcon icon={faArrowRight}/></Button>
-      </Paper>
-    </main>
+    <>
+      <Hero
+        image="/assets/clouds.jpg"
+        heading="Attention, Game Masters!"
+        lead="Introducing our latest tool designed exclusively for you."
+      >
+      </Hero>
+      <main className="container mt-5">
+        <Paper elevation="1" className='p-5'>
+          <h2>Latest</h2>
+          <h3>Archetypes</h3>
+          <p>
+          Dive into the world of character archetypes with ease.
+          Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
+          No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
+          </p>
+          <Button href="/archetypes" color="secondary">Try It <FontAwesomeIcon icon={faArrowRight}/></Button>
+
+        </Paper>
+      </main>
+    </>
   );
 }

clients/admin-client/src/pages/login.page.tsx

@@ -9,7 +9,7 @@ export default function LoginPage() {
 
   return (
     <main className="container">
-      <Paper elevation="1">
+      <Paper elevation="1" className='p-5'>
         <h1>Log In</h1>
         <div className="mb-3">
           <TextField id="email-address" label="Email Address" type="text"/>

clients/design-system/src/components/AppBar/AppBar.tsx

@@ -20,14 +20,14 @@ export const AppBar = (props: AppBarProps) => {
   return (
     <>
       <nav className={`navbar navbar-expand-lg navbar-light`}>
-        <div className="container-fluid">
+        <div className="container">
 
          <button className="navbar-toggler" type="button"
             data-bs-toggle="collapse" data-bs-target="#navbarNav"
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span className="navbar-toggler-icon"></span>
           </button>
-          <a className="navbar-brand" href="#">{siteTitle || 'Your Brand'}</a>
+          <a className="navbar-brand" href="/">{siteTitle || 'Your Brand'}</a>
           <div className="d-none d-sm-block">
           {topRightSlot}
           </div>

clients/design-system/src/components/Hero/Hero.tsx

@@ -0,0 +1,27 @@
+import React, { Children } from 'react';
+import './style.module.scss';
+
+export interface HeroProps {
+  heading: string;
+  lead: string;
+  image: string;
+  children?: React.ReactNode
+}
+
+export const Hero = ({ image, heading, lead, children }: HeroProps) => {
+  return (
+    <>
+      <div className='hero container' style={{backgroundImage: `url(${image})`}}>
+        <div className='container p-sm-1 p-md-3 p-lg-5'>
+          <div className="row">
+            <div className='col-lg-7 col-sm-12'>
+              <h1 className='display-3 text-primary'>{heading}</h1>
+              <p className="lead text-white">{lead}</p>
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+   </>
+  )
+}

clients/design-system/src/components/Hero/style.module.scss

@@ -0,0 +1,25 @@
+@import '../../styles/utils/color-pallette';
+
+.hero {
+  min-height: 50vh;
+  background-color: $color-blue;
+  background-color: linear-gradient(to right, lighten($color-gray, 10%), darken($color-gray, 10%)) !important; /* Adjust colors as needed */
+  background-size: cover;
+  background-position: top center;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+
+  h1 {
+    font-weight: bold;
+    background: linear-gradient(to right, $color-primary, darken($color-primary, 5%)) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    color: transparent !important ;
+  }
+  p {
+    font-weight: bold;
+    color: white;
+    font-size: 1.2em;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+}

clients/design-system/src/components/Icons/Icons.ts

@@ -12,6 +12,10 @@ export {
   faBars,
   faArrowRight,
   faCheck,
+  faPlay,
+  faStop,
+  faPause,
+  faRepeat,
 } from '@fortawesome/free-solid-svg-icons';
 
 export { faGithub } from '@fortawesome/free-brands-svg-icons';

clients/design-system/src/components/Paper/Paper.tsx

@@ -1,14 +1,20 @@
-import './style.module.scss'
+import React from 'react';
+import styles from './style.module.scss';
 
 export type PaperProps = {
+  className?: string; // Making className prop optional
+  style?: React.CSSProperties; // Adding style prop
   children: React.ReactNode;
   elevation: string;
 };
 
-export const Paper = (props: PaperProps): JSX.Element => {
-  const { elevation, children } = props;
-
-  return (<div className={`paper paper-elevation-${elevation}`}>{children}</div>)
+export const Paper = ({ className, style, elevation, children }: PaperProps): JSX.Element => {
+  return (
+    <div
+      className={`${styles.paper} ${styles[`paper-elevation-${elevation}`]} ${className}`}
+      style={style}
+    >
+      {children}
+    </div>
+  );
 };
-
-export default Paper;

clients/design-system/src/components/Paper/style.module.scss

@@ -2,13 +2,12 @@
 
 .paper {
   background-color: $color-white;
-  padding: 4rem 4.5rem;
+  // padding: 4rem 4.5rem;
   background-color: rgb(255, 255, 255);
   color: rgb(29, 29, 31);
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 30px 0px;
-
   $elevations: 1, 2, 3, 4, 5, 6,7,8,9,10;
 
   @each $elevation in $elevations {

clients/design-system/src/components/index.ts

@@ -21,3 +21,4 @@ export * from './Link/Link';
 export * from './Layout/Layout';
 export * from './Card/BasicCard';
 export * from './Paper/Paper';
+export * from './Hero/Hero';

clients/design-system/src/index.scss

@@ -89,6 +89,7 @@ $success: #7952b3;
 @import './components/SocialMediaBar/style.module.scss';
 @import './components/PageFooter/style.module.scss';
 @import './components/Paper/style.module.scss';
+@import './components/Hero/style.module.scss';
 
 body {
   background-color: $color-off-white;

clients/design-system/stories/components/atoms/Icons.stories.tsx

@@ -6,34 +6,59 @@ import {
   faDice,
   faBook,
   faAddressCard,
+  faChevronCircleLeft,
+  faChevronCircleRight,
+  faBars,
+  faArrowRight,
+  faCheck,
+  faPlay,
+  faStop,
+  faPause,
+  faRepeat,
   faGithub,
-  Stack,
-  Divider,
+  Paper,
+  Alert
 } from '../../../src/main';
 
 export default {
   title: 'Atoms/Icons',
   component: FontAwesomeIcon,
 } as Meta<typeof FontAwesomeIcon>;
 
-export const Default = () => (
-  <>
-    <Stack
-      direction="row"
-      divider={<Divider orientation="vertical" flexItem />}
-      spacing={2}
-    >
-      <FontAwesomeIcon icon={faGithub} />
-      <FontAwesomeIcon icon={faCog} />
-      <FontAwesomeIcon icon={faBook} />
-      <FontAwesomeIcon icon={faDice} />
-      <FontAwesomeIcon icon={faAddressCard} />
-    </Stack>
-    <hr/>
-    <p>
-      <a href="https://fontawesome.com/v6/icons?o=r&m=free">
-        FontAwesome Complete Library
-      </a>
-    </p>
-  </>
-);
+export const Default = () => {
+  const icons = [
+    { icon: faCog, name: 'faCog' },
+    { icon: faDice, name: 'faDice' },
+    { icon: faBook, name: 'faBook' },
+    { icon: faAddressCard, name: 'faAddressCard' },
+    { icon: faChevronCircleLeft, name: 'faChevronCircleLeft' },
+    { icon: faChevronCircleRight, name: 'faChevronCircleRight' },
+    { icon: faBars, name: 'faBars' },
+    { icon: faArrowRight, name: 'faArrowRight' },
+    { icon: faCheck, name: 'faCheck' },
+    { icon: faPlay, name: 'faPlay' },
+    { icon: faStop, name: 'faStop' },
+    { icon: faPause, name: 'faPause' },
+    { icon: faRepeat, name: 'faRepeat' },
+    { icon: faGithub, name: 'faGithub' }
+  ];
+
+  return (
+    <>
+      <Alert severity="info">
+        Explore a wider range of icons in the <a href="https://fontawesome.com/v6/icons?o=r&m=free" target="_blank" rel="noopener noreferrer">FontAwesome Library</a>,
+        offering an extensive collection of fonts that are not yet integrated but can easily be added to the design system.
+      </Alert>
+      <div className="d-flex flex-wrap">
+        {icons.map(({ icon, name }, index) => (
+          <div className="mx-4 mb-5" key={index}>
+            <Paper elevation="6" className="d-flex flex-column justify-content-center align-items-center rounded position-relative" style={{ width: '100px', height: '100px', padding: '4px' }} elevation='2'>
+              <FontAwesomeIcon size='2x' icon={icon} className="position-absolute top-50 start-50 translate-middle" />
+              <div className="text-muted position-absolute start-50 bottom-0 translate-middle" style={{ fontSize: "0.6rem", marginBottom: "1px" }}>{name}</div>
+            </Paper>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};

clients/design-system/stories/components/molecules/Hero.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { Button, Hero, HeroProps } from '../../../src/main';
+
+export default {
+  title: 'Molecules/Hero',
+  component: Hero,
+} as Meta<typeof Hero>;
+
+export const Default = args => <Hero {...args}>
+  <Button color='primary'>Learn More</Button>
+</Hero>;
+
+Default.args = {
+  image: 'https://picsum.photos/seed/picsum/1024/300',
+  heading: 'Twenty Minutes Goes By Faster?',
+  lead: 'Chroma sets the stage contrast creates focal points.'
+};