Add InfoCard and Stud components for landing pages

.changeset/eight-seas-greet.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add InfoCard and Stud components for landing pages'

packages/components/src/components/hive-navigation/graphql-conf-card.tsx

@@ -8,7 +8,10 @@ export interface GraphQLConfCardProps {
 }
 export function GraphQLConfCard({ image }: GraphQLConfCardProps) {
   return (
-    <NavigationMenuLink href="https://graphql.org/conf/2024/" className="group w-[358px]">
+    <NavigationMenuLink
+      href="https://www.youtube.com/playlist?list=PL43V96KpNj7OMvmfL0WFKP6LpoboM8Hde"
+      className="group w-[358px]"
+    >
       <Image alt="" {...image} width={358} height={200} />
       <strong className="mt-6 block text-xl font-medium leading-7 text-green-1000 dark:text-neutral-100">
         GraphQLConf 2024
@@ -20,7 +23,7 @@ export function GraphQLConfCard({ image }: GraphQLConfCardProps) {
         The official GraphQL conference hosted by GraphQL Foundation.
       </p>
       <span className="-mx-2 mt-4 flex items-center gap-2 rounded-lg p-2 font-medium text-green-800 transition-colors group-hover:text-green-1000 dark:text-neutral-200 dark:group-hover:text-neutral-100">
-        <span>Meet us at GraphQLConf 2024</span> <ArrowIcon />
+        <span>Watch The Guild at GraphQLConf 2024</span> <ArrowIcon />
       </span>
     </NavigationMenuLink>
   );

packages/components/src/components/index.ts

@@ -31,3 +31,5 @@ export * from './decorations';
 export * from './call-to-action';
 export * from './cookies-consent';
 export * from './heading';
+export * from './info-card';
+export * from './stud';

packages/components/src/components/info-card.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import { AccountBox } from './icons';
+import { InfoCard, InfoCardProps } from './info-card';
+
+export default {
+  title: 'Components/InfoCard',
+  component: InfoCard,
+  decorators: [hiveThemeDecorator],
+} satisfies Meta<InfoCardProps>;
+
+export const Default: StoryObj<InfoCardProps> = {
+  args: {
+    icon: <AccountBox />,
+    as: 'div',
+    heading: 'Customizable User Roles and Permissions',
+    children:
+      'Control user access with detailed, role-based permissions for enhanced security and flexibility.',
+  },
+};

packages/components/src/components/info-card.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { cn } from '../cn';
+import { Stud } from './stud';
+
+export interface InfoCardProps extends React.HTMLAttributes<HTMLElement> {
+  icon: ReactNode;
+  heading: ReactNode;
+  as?: 'div' | 'li';
+}
+
+export function InfoCard({
+  as: Root = 'div',
+  icon,
+  heading,
+  className,
+  children,
+  ...rest
+}: InfoCardProps) {
+  return (
+    <Root className={cn('bg-beige-100 p-6 md:p-12', className)} {...rest}>
+      <Stud>{icon}</Stud>
+      <h3 className="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">{heading}</h3>
+      <p className="mt-2 text-green-800 md:mt-4">{children}</p>
+    </Root>
+  );
+}

packages/components/src/components/stud.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import { RightCornerIcon } from './icons';
+import { Stud, StudProps } from './stud';
+
+export default {
+  title: 'Components/Stud',
+  component: Stud,
+  decorators: [hiveThemeDecorator],
+} satisfies Meta<StudProps>;
+
+export const Default: StoryObj<StudProps> = {
+  name: 'Stud',
+  args: {
+    children: <RightCornerIcon />,
+  },
+};

packages/components/src/components/stud.tsx

@@ -0,0 +1,14 @@
+import { cn } from '../cn';
+
+export interface StudProps extends React.HTMLAttributes<HTMLElement> {}
+export function Stud(props: StudProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white',
+        props.className,
+      )}
+    />
+  );
+}