nextjs-starter feat: add BentoGrid component with responsive grid layout and styles

This pull request introduces a new BentoGrid component to the once-ui library. The changes include the implementation of the component in TypeScript, the corresponding styles in SCSS, and updates to the component exports.

New Component Addition:

src/once-ui/components/BentoGrid.tsx: Added the BentoGrid component, which uses a easily changeable grid layout to arrange its children. The component supports custom grid layouts through the GridLayout interface and applies various styles and animations.
src/once-ui/components/BentoGrid.module.scss: Added styles for the BentoGrid component, including grid layout properties, item styling, hover effects, and responsive adjustments for smaller screens.

Export Updates:

src/once-ui/components/index.ts: Updated the exports to include the new BentoGrid component.

Usage

Use <BentoGrid> with nested flex components.

Ex:

          <BentoGrid layout={layout}>
            <Flex width="xs" height="xs" paddingX="4">
            </Flex>
            <Flex width="xs" fillHeight direction="column" paddingX="s">
            </Flex>
            <Flex fillWidth alignItems="right" direction="column" paddingY="8">
            </Flex>
            <Flex width="xs" height="xs" paddingX="4">
            </Flex>
            <Flex width="xs" paddingX="4">
            </Flex>
            <Flex width={82} height="xs" direction="column" gap="8" padding="8">
            </Flex>
          </BentoGrid>

The layout prop

Used to set dynamic layout of grid

  const layout = [
    { columnSpan: 4, rowSpan: 1 }, // Large item spanning 4 columns and 1 rows
    { columnSpan: 1, rowSpan: 2 }, // Medium item spanning 1 column and 2 rows
    { columnSpan: 2, rowSpan: 1 }, // Wide item spanning 2 columns
    { columnSpan: 3, rowSpan: 1 }, // Spans 3 columns and 1 row
    { columnSpan: 1, rowSpan: 1 }, // Regular item
    { columnSpan: 2, rowSpan: 1 }, // Spans 2 columns and 1 row
  ];

Results from those code snippets: