chore: add logo on the homepage

Author: mathdebate09

src/pages/index.js

@@ -12,9 +12,16 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className={clsx("hero__title")}>
-          {siteConfig.title}
-        </Heading>
+        <div className={styles.titleWithLogo}>
+          <img
+            src="https://ik.imagekit.io/jayowiee/github/nativeflow/nativeflow-logo.png"
+            alt="NativeFlow logo"
+            className={styles.titleLogo}
+          />
+          <Heading as="h1" className={clsx("hero__title", styles.titleText)}>
+            {siteConfig.title}
+          </Heading>
+        </div>
         <p className="">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link

src/pages/index.module.css

@@ -21,3 +21,20 @@
   align-items: center;
   justify-content: center;
 }
+
+.titleWithLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.titleLogo {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.titleText {
+  margin-bottom: 0;
+}