feat: flesh in mid section

README.md

@@ -18,7 +18,7 @@ actively employed in developing a cooperative RPG.
 
 - Turn-key development environment with Github Codespaces
 - Infrastructure as Code (IaC) for streamlined DevOps pipeline
-- Event-driven microservices architecture
+- Event-driven microservices architecture with data lake
 - Continuous integration and continuous deployment (CI/CD) leveraging AWS
 
 ## Getting Started

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

@@ -1,4 +1,4 @@
-import { Hero, Paper, Button, Link, FontAwesomeIcon, faArrowRight } from '@cats-cradle/design-system/dist/main';
+import { Hero, Paper, Button, Link, FontAwesomeIcon, faArrowRight, BasicCard } from '@cats-cradle/design-system/dist/main';
 
 export default function HomePage() {
   return (
@@ -9,16 +9,36 @@ export default function HomePage() {
         lead="Introducing our latest tool designed exclusively for you."
       >
       </Hero>
-      <main className="container mt-5">
+      <main className="container-fluid mt-5">
         <Paper elevation="1" className='p-5'>
+        <div className="container">
           <h2>Latest</h2>
-          <h3>Archetypes</h3>
-          <p>
+          <div className="row row-cols-1 row-cols-md-3">
+          <div className="col mb-3">
+      <BasicCard title="Archetypes" imageSrc="/assets/clouds.jpg" ribbonText='New Archetypes'>
+      <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.
+          No-frills, just a straightforward way to look at the data.
           </p>
           <Button href="/archetypes" color="secondary">Try It <FontAwesomeIcon icon={faArrowRight}/></Button>
+      </BasicCard>
+    </div>
+      <div className="col mb-3">
+      <BasicCard title="Game Portal" imageSrc="/assets/clouds.jpg">
+        NekosGate admin portal is a powerful tool that allows you to manage your game with ease.
+      </BasicCard>
+    </div>
+    <div className="col mb-3">
+      <BasicCard title="Open Source Software" imageSrc="/assets/clouds.jpg">
+        Shape the future of development with us!
+        Contribute your expertise to help.
+        Join our community today!
+        Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
+      </BasicCard>
+    </div>
+  </div>
+  </div>
         </Paper>
       </main>
     </>

clients/design-system/src/components/Card/BasicCard.tsx

@@ -4,31 +4,25 @@ export type BasicCardProps = {
   title?: string;
   body?: string;
   url?: string;
-  cta?: string;
+  imageSrc?: string;
+  ribbonText?: string;
+  ribbonColor?: string;
   children?: React.ReactNode;
 };
 
 // TODO finish fleshing in basic card props
 export const BasicCard = (props: BasicCardProps): JSX.Element => {
-  const { cta, body, title, children } = props;
-  const defaultCta = 'Learn More';
-
-  const callOut = "Save 10% Off";
-  const callOutColor = "primary";
+  const { ribbonText, body, title, imageSrc, children } = props;
 
   return (
-    <div className="card">
+    <div className="card h-100 border-radius-4">
       <div className='card-thumbnail'>
-        <div className='card-call-out px-4'>{callOut}</div>
-        <svg className="bd-placeholder-img card-img-top"
-          width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
-          aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice"
-          focusable="false"><title>Placeholder</title>
-          <rect width="100%" height="100%" fill="#868e96"></rect>
-          <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Sample Image</text>
-        </svg>
+        <div className="card-img-top-wrapper">
+          <div className="card-img-top" style={{background: `url(${imageSrc})`}}/>
+        </div>
+        {ribbonText && <div className='card-call-out px-4'>{ribbonText}</div>}
       </div>
-      <div className="card-body">
+      <div className="card-body p-4">
         <h5 className="card-title">{title}</h5>
         <p className="card-text">
           {body}

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

@@ -3,9 +3,29 @@
 $card-color: $color-murrey;
 $card-call-out-offset: 16px;
 .card {
+  border-radius: 1rem;
+  &:hover {
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    .card-img-top {
+      transform: scale(1.02);
+      transition: transform .2s;
+    }
+  }
   .card-thumbnail {
     margin:0;
     position: relative;
+    .card-img-top-wrapper {
+      overflow: hidden;
+      height: 180px;
+      .card-img-top {
+        height: 180px;
+        background-color: $color-gray !important;
+        background-size: 100% 100% !important;
+        background-position: center center;
+      }
+    }
+
     .card-call-out {
       text-transform: uppercase;
       font-weight: bold;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export interface BgImageProps {
+}
+
+export const BgImage = (props: BgImageProps) => {
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+      <defs>
+        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{stopColor: 'rgb(255,255,0)', stopOpacity: 1}} />
+          <stop offset="100%" style={{stopColor: 'rgb(255,0,0)', stopOpacity: 1}} />
+        </linearGradient>
+        <linearGradient id="gradient2" x1="0%" y1="100%" x2="100%" y2="0%">
+          <stop offset="0%" style={{stopColor: 'rgb(0,0,255)', stopOpacity: 1}} />
+          <stop offset="100%" style={{stopColor: 'rgb(0,255,255)', stopOpacity: 1}} />
+        </linearGradient>
+        <linearGradient id="gradient3" x1="50%" y1="0%" x2="50%" y2="100%">
+          <stop offset="0%" style={{stopColor: 'rgb(0,255,0)', stopOpacity: 1}} />
+          <stop offset="100%" style={{stopColor: 'rgb(255,0,255)', stopOpacity: 1}} />
+        </linearGradient>
+        <pattern id="triangles" width="100" height="100" patternUnits="userSpaceOnUse">
+          <polygon points="50,0 0,100 100,100" fill="url(#gradient1)"/>
+          <polygon points="50,0 100,100 100,0" fill="url(#gradient2)"/>
+          <polygon points="50,0 0,100 0,0" fill="url(#gradient3)"/>
+        </pattern>
+      </defs>
+      <polygon points="100,20 155,55 130,130 70,130 45,55" fill="url(#triangles)"/>
+    </svg>
+  );
+
+
+
+
+  // triangle gradient
+  // return(
+  //   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  //   <defs>
+  //     <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+  //       <stop offset="0%" style={{stopColor:"rgb(255,255,0)",stopOpacity:1}} />
+  //       <stop offset="100%" style={{stopColor:"rgb(255,0,0)",stopOpacity:1}} />
+  //     </linearGradient>
+  //     <pattern id="triangles" width="20" height="20" patternUnits="userSpaceOnUse">
+  //       <polygon points="10,0 0,20 20,20" fill="url(#gradient)"/>
+  //     </pattern>
+  //   </defs>
+  //   <rect width="100%" height="100%" fill="url(#triangles)"/>
+  //   </svg>
+  // )
+}

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

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

clients/design-system/src/index.scss

@@ -57,9 +57,9 @@ $success: #7952b3;
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";
-// @import "bootstrap/scss/list-group";
+@import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";
-// @import "bootstrap/scss/toasts";
+@import "bootstrap/scss/toasts";
 @import "bootstrap/scss/modal"; // Requires transitions
 // @import "bootstrap/scss/tooltip";
 @import "bootstrap/scss/popover";

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

@@ -8,9 +8,24 @@ export default {
 } as Meta<typeof BasicCard>;
 
 export const Default = (args: BasicCardProps) =>
-  <BasicCard {...args}/>;
+  <div className="row row-cols-1 row-cols-md-3 row-cols-md-4">
+    <div className="col mb-3">
+      <BasicCard {...args}>
+        Welcome to Day
+      </BasicCard>
+    </div>
+    <div className="col mb-3">
+      <BasicCard {...args} title="What, Why, When, Where" imageSrc="/sample.jpg">
+        Seven out of Ten Cats
+      </BasicCard>
+    </div>
+    <div className="col mb-3">
+      <BasicCard {...args} title="Turn-key Property Management" ribbonText='Learn More'>
+        How goes property management?
+      </BasicCard>
+    </div>
+  </div>
 
 Default.args = {
   title: 'Welcome To Day',
-  cta: 'Learn More'
-}
+} as BasicCardProps;