ui(docs): Add hero bullets and features section

packages/docs/src/components/Features/index.tsx

@@ -0,0 +1,78 @@
+import { Card, Container, Grid, Image, Title, Text, CardSection, Divider } from "@mantine/core";
+
+type FeatureItem = {
+  title: string;
+  Svg: string;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Poker Game Management",
+    Svg: "/img/poker.svg",
+    description: (
+      <>
+        Keep your poker games organized and fair with detailed hand descriptions and accurate
+        tracking. Never lose track of bets and sidepots again.
+      </>
+    ),
+  },
+  {
+    title: "Blackjack Dealer Assistance",
+    Svg: "/img/blackjack.svg",
+    description: (
+      <>
+        Get real-time dealer instructions, automatic payout calculations, and sidebet management.
+        Make your blackjack games run smoother than ever.
+      </>
+    ),
+  },
+  {
+    title: "AI Card Recognition",
+    Svg: "/img/ai_card_recognition.svg",
+    description: (
+      <>
+        Leverage advanced AI to recognize cards and suits instantly, reducing manual input and
+        potential errors. Speed up your game management.
+      </>
+    ),
+  },
+];
+
+export default function Features() {
+  return (
+    <Container size="lg" mt={120}>
+      <Grid>
+        {FeatureList.map((feature, index) => (
+          <Grid.Col span={4} key={index}>
+            <Card
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            >
+              <img
+                src={feature.Svg}
+                alt={feature.title}
+                height="200px"
+                width="200px"
+                style={{
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                }}
+              />
+
+              <Title order={4} ta="center" c="gray.3" mt="sm">
+                {feature.title}
+              </Title>
+              <Text ta="center" fw="light" size="md">
+                {feature.description}
+              </Text>
+            </Card>
+          </Grid.Col>
+        ))}
+      </Grid>
+    </Container>
+  );
+}

packages/docs/src/components/HeroBullets/index.tsx

@@ -1,12 +1,25 @@
-import { Container, Grid, Title, alpha, rem, useMantineTheme } from "@mantine/core";
+import {
+  Container,
+  Grid,
+  Title,
+  alpha,
+  rem,
+  useMantineTheme,
+  Text,
+  Divider,
+  List,
+  ThemeIcon,
+} from "@mantine/core";
+
+import styles from "./styles.module.css";
 
 const Svg = require("@site/static/img/hero-main.svg").default;
 
 export function HeroBullets() {
   const theme = useMantineTheme();
 
   return (
-    <Container size="xl" mt="xl" mx="xl">
+    <Container size="lg" mt={120}>
       <Grid grow gutter="xl">
         <Grid.Col
           span={7}
@@ -37,6 +50,40 @@ export function HeroBullets() {
             </span>{" "}
             <br /> Not Chaos
           </Title>
+          <Text size="md">
+            Streamline your game management with CardGamesManager. Effortlessly manage your
+            Blackjack and Poker games with a few clicks and ensure a smooth gaming experience.
+          </Text>
+          <List
+            mt={30}
+            spacing="sm"
+            size="sm"
+            icon={
+              <ThemeIcon size={24} radius="xl">
+                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </ThemeIcon>
+            }
+          >
+            <List.Item>
+              <b>Real-Time Balances</b> – Keep track of your players' balances effortlessly with
+              instant updates
+            </List.Item>
+            <List.Item>
+              <b>Customizable Settings</b> – Tailor your game and app settings to your liking with
+              powerful customization options
+            </List.Item>
+            <List.Item>
+              <b>Advanced Bet Management</b> – Manage bets, sidepots, and more with ease and
+              confidence, all in one place
+            </List.Item>
+          </List>
         </Grid.Col>
         <Grid.Col
           span={5}

packages/docs/src/pages/index.tsx

@@ -19,12 +19,14 @@ import {
   MantineProvider,
   rgba,
   ScrollArea,
+  Space,
   Text,
   Title,
   useMatches,
 } from "@mantine/core";
 import { useMediaQuery, useWindowScroll } from "@mantine/hooks";
 import { HeroBullets } from "../components/HeroBullets";
+import Features from "../components/Features";
 
 // function HomepageHeader() {
 //   const { siteConfig } = useDocusaurusContext();
@@ -180,6 +182,7 @@ export default function Home(): JSX.Element {
         <AppShell.Main>
           <Container size="xl">
             <HeroBullets />
+            <Features />
           </Container>
         </AppShell.Main>
       </AppShell>