style: move logo on homepage into its own component and fix missing height property

missing height property would cause content shifting after the logo loaded.

Author: Arian04

src/components/Logo/index.tsx

@@ -0,0 +1,16 @@
+// @ts-ignore
+import LogoImageUrl from '@site/static/img/logo.png';
+
+export default function Logo() {
+    const logoSize: number = 128;
+
+    return (
+        <div className="image-container">
+            <img src={LogoImageUrl} alt="CRC Logo" style={{
+                height: logoSize,
+                width: logoSize,
+                // backgroundImage: "linear-gradient(-45deg, rgb(189, 52, 254) 50%, rgb(255, 54, 112) 50%)"
+            }}/>
+        </div>
+    )
+}

src/pages/index.tsx

@@ -5,13 +5,14 @@ import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
+import Logo from "@site/src/components/Logo";
 
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
     return (
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
-                <img src={require('@site/static/img/logo.png').default} alt="CRC Logo" style={{width: 128}}/>
+                <Logo/>
                 <Heading as="h1" className="hero__title">
                     {siteConfig.title}
                 </Heading>