Update homepage

Author: notAreYouScared

docusaurus.config.ts

@@ -43,7 +43,7 @@ const config: Config = {
     //},
     matomo: { 
       matomoUrl: 'https://track.areyouscared.dev',
-      siteId: '1',
+      siteId: '2', //Change in prod
       phpLoader: 'matomo.php',
       jsLoader: 'matomo.js'
     },

src/components/HomepageFeatures/look.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  img: string;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Node Overview',
+    img: 'img/homepage/1.png',  },
+  {
+    title: 'User Overview',
+    img: 'img/homepage/2.png',  },
+  {
+    title: 'Create Node',
+    img: 'img/homepage/3.png',  },
+  {
+    title: 'Editing an Egg',
+    img: 'img/homepage/4.png',  },
+  {
+    title: 'Editing a Server',
+    img: 'img/homepage/5.png',  },
+  {
+    title: 'Creating an API Key',
+    img: 'img/homepage/6.png',  },
+];
+
+function Feature({title, img}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Heading as="h3">{title}</Heading>
+      </div>
+      <div className="text--center" style={{paddingBottom: '15px'}}>
+        <a href={img} ><img src={img}/></a>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageLook(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+      <h1 style={{textAlign: 'center'}}>Shots of the Screen</h1>
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+        <h5 style={{textAlign: 'center'}}>pre-release screenshots</h5>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/what.tsx

@@ -46,13 +46,7 @@ export default function HomepageWhat(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
       <h1 style={{textAlign: 'center'}}>What is Pelican?</h1>
-      <p style={{textAlign: 'center'}}>Pelican is the ultimate, free game server control panel offering high flying security. It's a breeze to manage your servers with our sleek and user-friendly interface. And thanks to Docker, they all run in their own safe space.</p>
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-        <h5 style={{textAlign: 'center'}}>pre-release screenshots</h5>
+      <p style={{textAlign: 'center', fontSize: '26px'}}>Pelican is the ultimate, free game server control panel offering high flying security. It's a breeze to manage your servers with our sleek and user-friendly interface. And thanks to Docker, they all run in their own safe space.</p>
       </div>
     </section>
   );

src/pages/index.tsx

@@ -8,6 +8,7 @@ import Heading from '@theme/Heading';
 import { Icon } from '@iconify/react/dist/iconify.js';
 
 import styles from './index.module.css';
+import HomepageLook from '../components/HomepageFeatures/look';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
@@ -49,6 +50,7 @@ export default function Home(): JSX.Element {
       <main>
         <HomepageWhat />
         <HomepageWhy />
+        <HomepageLook />
       </main>
     </Layout>
   );