The most significant changes include the update of the application ve…

…rsion in the `package.json` file, the addition of a new `Banner` component to the `Gallery` function in the `index.tsx` file, and the creation of a new `Banner.tsx` file that defines the `Banner` component.

1. The application version has been updated from `1.3.0` to `1.3.5` in the `package.json` file. This change indicates that the application has undergone some updates or bug fixes that warrant a version change. (See `package.json`)

2. A new import statement has been added to the `index.tsx` file. This statement imports the `Banner` component from the `Banner` file, which suggests that the `Banner` component will be used within the `index.tsx` file. (See `index.tsx`)

3. The version annotation in the `Gallery` function within the `index.tsx` file has been updated from `0.2.0` to `0.3.0`. This change suggests that the `Gallery` function has been updated or modified. (See `index.tsx`)

4. A new `Banner` component has been added to the `Gallery` function within the `index.tsx` file. This component is displayed when the data is loading and also at the top of the gallery. This change enhances the user interface by providing a loading indicator and a banner at the top of the gallery. (See `index.tsx`)

5. A new file `Banner.tsx` has been created. This file contains the definition of the `Banner` component. The `Banner` component is a card that contains an image and a large block of text. The card is divided into two sections with a column gap. The image occupies 46% of the card and has an aspect ratio of 16:9. The text occupies the remaining space. The text is a placeholder Lorem Ipsum text. The card is followed by a divider. This new component enhances the user interface by providing a visually appealing banner. (See `Banner.tsx`)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "awaishop",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.5",
   "type": "module",
   "author": {
     "name": "Aloento",

src/Pages/Gallery/Banner.tsx

@@ -0,0 +1,60 @@
+import { Card, CardHeader, CardPreview, Divider, Image, Text, makeStyles, tokens } from "@fluentui/react-components";
+import { Cover } from "~/Helpers/Styles";
+
+/**
+ * @author Aloento
+ * @since 1.3.5
+ * @version 0.1.0
+ */
+const useStyles = makeStyles({
+  main: {
+    alignItems: "flex-start",
+    columnGap: tokens.spacingHorizontalXXL
+  },
+  img: {
+    ...Cover,
+    aspectRatio: "16/9",
+  },
+  txt: {
+    flexBasis: 0
+  }
+});
+
+/**
+ * @author Aloento
+ * @since 1.3.5
+ * @version 0.1.0
+ */
+export function Banner() {
+  const style = useStyles();
+
+  return <>
+    <Card orientation="horizontal" size="large" className={style.main}>
+      <CardPreview style={{ flexBasis: "46%" }}>
+        <Image className={style.img} src="/banner.jpg" />
+      </CardPreview>
+
+      <CardHeader
+        className={style.txt}
+        header={
+          <Text size={500}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non magna nisi.
+            Nunc ut est vel est sodales consequat. Vivamus imperdiet eros luctus, mollis lorem quis, elementum arcu.
+            Ut maximus pharetra volutpat. Etiam lorem risus, pellentesque vitae malesuada vitae, sollicitudin in massa.
+            In nunc nulla, pretium vitae risus in, pulvinar bibendum magna. Duis ornare ullamcorper neque, sed venenatis augue.
+            Vestibulum rutrum sapien et purus condimentum, id ultricies lectus hendrerit.
+            <br />
+            Aenean porttitor, metus ac semper malesuada, nulla leo dapibus dolor, et gravida augue leo ut sem.
+            Morbi vitae ipsum viverra, suscipit turpis a, elementum mi.
+            Cras pharetra ipsum leo, nec rhoncus elit cursus ut.
+            Fusce consectetur lacus quis odio molestie, nec sollicitudin est pretium. Donec cursus sollicitudin porta.
+            Integer tellus mi, iaculis ut massa et, tempor placerat odio. Quisque ac interdum mauris, ac scelerisque odio.
+            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+          </Text>
+        }
+      />
+    </Card>
+
+    <Divider />
+  </>;
+}

src/Pages/Gallery/index.tsx

@@ -5,6 +5,7 @@ import { Dic } from "~/Helpers/Dic";
 import { Logger } from "~/Helpers/Logger";
 import { ColFlex } from "~/Helpers/Styles";
 import { Hub } from "~/ShopNet";
+import { Banner } from "./Banner";
 import { GalleryCategory } from "./Category";
 
 /**
@@ -34,7 +35,7 @@ const log = new Logger("Gallery");
 /**
  * @author Aloento
  * @since 0.1.0
- * @version 0.2.0
+ * @version 0.3.0
  */
 function Gallery() {
   const style = useStyles();
@@ -45,6 +46,7 @@ function Gallery() {
   if (loading)
     return (
       <Skeleton className={style.main}>
+        <Banner />
         <SkeletonItem appearance="translucent" size={32} />
         <SkeletonItem size={128} />
       </Skeleton>
@@ -56,6 +58,8 @@ function Gallery() {
         <title>Gallery - {Dic.Name}</title>
       </Helmet>
 
+      <Banner />
+
       {
         data?.map((x, i) => <GalleryCategory key={i} Category={x} />)
       }