From 537b3826379bc7c3f606dad3b4222f5b55a12d20 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 17 Oct 2024 20:46:24 +0200
Subject: [PATCH 1/3] Update GraphQLConfCard to link to YT

---
 .../src/components/hive-navigation/graphql-conf-card.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/hive-navigation/graphql-conf-card.tsx b/packages/components/src/components/hive-navigation/graphql-conf-card.tsx
index ad244dbe9..932db9677 100644
--- a/packages/components/src/components/hive-navigation/graphql-conf-card.tsx
+++ b/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>
   );

From bc848b4342bcc3e950191d938fb88dbb5874e606 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 17 Oct 2024 21:00:42 +0200
Subject: [PATCH 2/3] Add InfoCard and Stud components for landing pages

---
 .changeset/eight-seas-greet.md                |  5 ++++
 packages/components/src/components/index.ts   |  2 ++
 .../src/components/info-card.stories.tsx      | 20 ++++++++++++++
 .../components/src/components/info-card.tsx   | 26 +++++++++++++++++++
 .../src/components/stud.stories.tsx           | 17 ++++++++++++
 packages/components/src/components/stud.tsx   | 15 +++++++++++
 6 files changed, 85 insertions(+)
 create mode 100644 .changeset/eight-seas-greet.md
 create mode 100644 packages/components/src/components/info-card.stories.tsx
 create mode 100644 packages/components/src/components/info-card.tsx
 create mode 100644 packages/components/src/components/stud.stories.tsx
 create mode 100644 packages/components/src/components/stud.tsx

diff --git a/.changeset/eight-seas-greet.md b/.changeset/eight-seas-greet.md
new file mode 100644
index 000000000..72b18e227
--- /dev/null
+++ b/.changeset/eight-seas-greet.md
@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add InfoCard and Stud components for landing pages'
diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts
index 2083d76a0..93abda31e 100644
--- a/packages/components/src/components/index.ts
+++ b/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';
diff --git a/packages/components/src/components/info-card.stories.tsx b/packages/components/src/components/info-card.stories.tsx
new file mode 100644
index 000000000..c1050eb6e
--- /dev/null
+++ b/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.',
+  },
+};
diff --git a/packages/components/src/components/info-card.tsx b/packages/components/src/components/info-card.tsx
new file mode 100644
index 000000000..25e0cdd12
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/components/src/components/stud.stories.tsx b/packages/components/src/components/stud.stories.tsx
new file mode 100644
index 000000000..67eb13c30
--- /dev/null
+++ b/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 />,
+  },
+};
diff --git a/packages/components/src/components/stud.tsx b/packages/components/src/components/stud.tsx
new file mode 100644
index 000000000..d62c21d71
--- /dev/null
+++ b/packages/components/src/components/stud.tsx
@@ -0,0 +1,15 @@
+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,
+      )}
+    />
+  );
+}

From ef0ddac820e8c447572fdafd695c4ddb02c92e92 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 17 Oct 2024 21:10:58 +0200
Subject: [PATCH 3/3] Format

---
 packages/components/src/components/stud.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/stud.tsx b/packages/components/src/components/stud.tsx
index d62c21d71..3c3464f1a 100644
--- a/packages/components/src/components/stud.tsx
+++ b/packages/components/src/components/stud.tsx
@@ -1,6 +1,5 @@
 import { cn } from '../cn';
 
-
 export interface StudProps extends React.HTMLAttributes<HTMLElement> {}
 export function Stud(props: StudProps) {
   return (