feat(): help_cards

* add function to add help cards to react landing pages

* export new function in root index file at src/custom/docs

* rename HelpCards to HelpCard

* export HelpCard as DocsHelpCard

* add story for DocsHelpCard

* Use correct card component.

---------

Co-authored-by: aidanCQ <[email protected]>

src/custom/docs/components/helpcard/index.tsx

@@ -0,0 +1,32 @@
+import { CardTitle  } from '../triplecard/Card'
+import { LucideIcon } from "lucide-react"
+import { CardHeader, CardDescription } from "src"
+import { Card } from 'src'
+
+export const HelpCard = (props: {
+    columns: {
+      title: string;
+      icon_description: string;
+      icon: LucideIcon;
+      link: string;
+      description: string;
+    }[]
+  }) => {
+  return (<div className="my-24 grid grid-cols-1 flex-grow gap-8 md:grid-cols-2">
+    {props.columns.map((item) => {
+    return (
+        <a href={item.link} key={item.title}>
+        <Card className="hover:bg-muted transition">
+          <CardHeader>
+              <item.icon className="w-6 h-6 mb-3 inline" aria-label={item.icon_description}></item.icon>
+              <CardTitle className="text-[1rem] font-semibold inline-block">{item.title}</CardTitle>
+              <CardDescription>{item.description}</CardDescription>
+          </CardHeader>
+
+        </Card>
+        </a>
+        );
+    })}
+    </div> 
+  )
+}

src/custom/docs/index.ts

@@ -1,5 +1,6 @@
 export {Footer as DocsFooter } from './components/footer'
 export { NavBar as DocsNavBar } from './components/navmenu/index'
 export { TripleCard as DocsTripleCard } from './components/triplecard'
+export { HelpCard as DocsHelpCard } from './components/helpcard'
 export * from './components/header'
 export * from './components/page'

stories/custom/docs-helpcard.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LifeBuoyIcon, BookIcon } from 'lucide-react'
+import { DocsHelpCard } from 'src'
+
+const helpSectionConfig = {
+    columns: [{
+        title: "Get in touch for support",
+        icon_description: "Support Icon",
+        icon: LifeBuoyIcon,
+        link: "https://www.quantinuum.com/contact/docs",
+        description: "Need help? Fill out our support form here",
+
+    },
+    {
+        title: "Publications",
+        icon_description: "Publications Icon",
+        icon: BookIcon,
+        link: "https://quantinuum.com/publications",
+        description: "Find our latest research publications here",
+    }],
+};
+
+
+function DocsHelpCardDemo() {
+    return <DocsHelpCard {...helpSectionConfig} />
+}
+
+const meta: Meta<typeof DocsHelpCardDemo> = {
+    component: DocsHelpCardDemo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof DocsHelpCardDemo> = {
+    args: {},
+};