Added pf-card

src/App.scss

@@ -63,4 +63,83 @@
     .pf-v6-c-title.pf-m-h2{
         color: #151515;
     }
+}
+
+// Homepage styles
+.homepage {
+  .homepage-header {
+    margin-bottom: 2rem;
+    text-align: center;
+
+    .homepage-title {
+      color: #ee0000;
+      margin-bottom: 1rem;
+    }
+
+    .homepage-subtitle {
+      font-size: 1.1rem;
+      color: #6a6e73;
+      max-width: 600px;
+      margin: 0 auto;
+      line-height: 1.5;
+    }
+  }
+
+  .homepage-components {
+    margin-bottom: 3rem;
+
+    .section-title {
+      color: #151515;
+      margin-bottom: 1.5rem;
+    }
+
+    .component-link {
+      text-decoration: none;
+      color: #151515;
+      font-weight: 600;
+
+      &:hover {
+        color: #ee0000;
+        text-decoration: none;
+      }
+    }
+
+    .pf-v6-c-card {
+      height: 100%;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .pf-v6-c-card__body p {
+        color: #6a6e73;
+        margin: 0;
+      }
+    }
+  }
+
+  .homepage-preview {
+    .section-title {
+      color: #151515;
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+
+// Responsive adjustments for homepage
+@media (max-width: 768px) {
+  .homepage {
+    .homepage-header {
+      .homepage-title {
+        font-size: 1.75rem;
+      }
+
+      .homepage-subtitle {
+        font-size: 1rem;
+        padding: 0 1rem;
+      }
+    }
+  }
 }

src/App.tsx

@@ -1,32 +1,27 @@
 import ReactDOM  from "react-dom/client";
-import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import './App.scss'
 import HomePage from './views/Homepage/HomePage'
 import PfButton from "./components/Button/Button";
 import PfBreadcrumb from "./components/BreadCrumb/BreadCrumb";
 // import PfForm from "./components/Form/Form";
 import PfAccordion from "./components/Accordion/Accordion";
-import PfCard from "./components/Card/Card";
+import PfCard from "./components/Card/Cards";
 import PfTable from "./components/Table/Table";
+import Dashboard from "./components/Dashboard/Dashboard";
 // import 'redhat-brand-theme/dist/redhat-brand-theme.css';
 import './rhds-theme.css';
 
-function App() {
-
-  return (
-    <div className="app">
-
-      <Outlet />
-    </div>
-  )
-}
-
 const AppRoutes = createBrowserRouter([{
   path: '/',
-  element: <App/>,
+  element: <Dashboard/>,
   children:[
     {
-      path: "/",
+      index: true,
+      element: <HomePage/>
+    },
+    {
+      path: "/home",
       element: <HomePage/>
     },
     {

src/components/Card/CardActionSelect.tsx

@@ -0,0 +1,62 @@
+import { FC } from "react";
+import { Card, CardTitle, CardHeader, CardBody } from "@patternfly/react-core";
+
+const CardWithActionSelect: FC = () => {
+
+  return (
+    <div style={{ margin: "20px 100px" }}>
+<div
+          style={{
+            marginTop: "15px",
+          }}
+        >
+          <Card isClickable>
+            <CardHeader
+              selectableActions={{
+                onClickAction: () =>
+                  console.log(`First card in actionable example clicked`),
+                selectableActionAriaLabelledby:
+                  "clickable-card-example-title-1",
+              }}
+            >
+              <CardTitle id="clickable-card-example-title-1">
+                First card in the actionable example
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card performs an action on click.</CardBody>
+          </Card>
+          <Card isClickable>
+            <CardHeader
+              selectableActions={{
+                to: "#",
+                selectableActionAriaLabelledby:
+                  "clickable-card-example-title-2",
+              }}
+            >
+              <CardTitle id="clickable-card-example-title-2">
+                Second card in the actionable example
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card can navigate to a link on click.</CardBody>
+          </Card>
+          <Card isClickable isDisabled>
+            <CardHeader
+              selectableActions={{
+                onClickAction: () =>
+                  console.log(`Third card in actionable example clicked`),
+                selectableActionAriaLabelledby:
+                  "clickable-card-example-title-3",
+              }}
+            >
+              <CardTitle id="clickable-card-example-title-3">
+                Third card in the actionable example
+              </CardTitle>
+            </CardHeader>
+            <CardBody>This card is clickable but disabled.</CardBody>
+          </Card>
+        </div>
+    </div>
+  );
+};
+
+export default CardWithActionSelect;

src/components/Card/CardDefault.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Card, CardTitle, CardBody,CardFooter } from "@patternfly/react-core";
+
+const CardDefault: React.FC = () => (
+  <div style={{ margin: "100px 100px 50px" }}>
+    <Card>
+      <CardTitle>Title</CardTitle>
+      <CardBody>Body</CardBody>
+      <CardFooter>Footer</CardFooter>
+    </Card>
+  </div>
+);
+
+export default CardDefault;

src/components/Card/CardExpandable.tsx

@@ -0,0 +1,145 @@
+import { FC, useState } from "react";
+import {
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  CardExpandableContent,
+  Dropdown,
+  MenuToggle,
+  DropdownList,
+  DropdownItem,
+  Divider,
+} from "@patternfly/react-core";
+import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
+
+const CardExpandable: FC = () => {
+  //expandable cards
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isToggleRightAligned, setIsToggleRightAligned] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const onExpand = (_event: any, id: string) => {
+    console.log(id);
+    setIsExpanded(!isExpanded);
+  };
+
+  const onRightAlign = () => {
+    setIsToggleRightAligned(!isToggleRightAligned);
+  };
+
+  const dropdownExpItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {[]}
+      <DropdownItem
+        key="link"
+        to="#"
+        onClick={(event) => event.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem
+        key="disabled link"
+        isDisabled
+        to="#"
+        onClick={(event) => event.preventDefault()}
+      >
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem
+        key="separated link"
+        to="#"
+        onClick={(event) => event.preventDefault()}
+      >
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card expandable example kebab toggle"
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
+        )}
+        isOpen={isOpen}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownExpItems}</DropdownList>
+      </Dropdown>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-4"
+        name="check4"
+      />
+    </>
+  );
+
+  return (
+    <div style={{ margin: "20px 100px" }}>
+      <div
+        style={{
+          marginBottom: "12px",
+        }}
+      >
+        <Checkbox
+          id={"isToggleRightAligned-1"}
+          key={"isToggleRightAligned"}
+          label={"isToggleRightAligned"}
+          isChecked={isToggleRightAligned}
+          onChange={onRightAlign}
+        />
+      </div>
+      <Card id="expandable-card" isExpanded={isExpanded}>
+        <CardHeader
+          actions={{
+            actions: headerActions,
+          }}
+          onExpand={onExpand}
+          isToggleRightAligned={isToggleRightAligned}
+          toggleButtonProps={{
+            id: "toggle-button1",
+            "aria-label": "Details",
+            "aria-labelledby": "expandable-card-title toggle-button1",
+            "aria-expanded": isExpanded,
+          }}
+        >
+          <CardTitle id="expandable-card-title">Title</CardTitle>
+        </CardHeader>
+        <CardExpandableContent>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </CardExpandableContent>
+      </Card>
+    </div>
+  );
+};
+
+export default CardExpandable;