Add banners

src/components/Banners.module.scss

@@ -0,0 +1,14 @@
+.banners {
+  background-color: #f7f7f7;
+  display: flex;
+  border-radius: var(--banners-border-radius);
+  padding: var(--banners-padding);
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  width: min(var(--page-width), calc(100% - 2 * var(--page-padding)));
+  margin: {
+    top: 3.2rem;
+    inline: auto;
+  }
+}

src/components/Banners.tsx

@@ -0,0 +1,26 @@
+import { VoidComponent } from 'solid-js'
+import { A } from 'solid-start'
+import hatartalanul from '/assets/banners/hatartalanul.jpg'
+import ntp from '/assets/banners/ntp.png'
+import bazis from '/assets/banners/bazisintezmeny_logo.png'
+import styles from './Banners.module.scss'
+
+const Banners: VoidComponent = () => {
+  return (
+    <div class={styles.container}>
+      <div class={styles.banners}>
+        <A href="/pages/hatartalanul">
+          <img src={hatartalanul} alt="Határtalanul" />
+        </A>
+        <A href="/pages/nemzeti-tehetseg-program">
+          <img src={ntp} alt="Nemzeti Tehetség Program" height="160" />
+        </A>
+        <A href="/pages/bazisintezmeny">
+          <img src={bazis} alt="Oktatási Hivatal Bázisintézménye" />
+        </A>
+      </div>
+    </div>
+  )
+}
+
+export default Banners

src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { createGraphQLClient, gql } from '@solid-primitives/graphql'
 import { VoidComponent } from 'solid-js'
+import Banners from '~/components/Banners'
 import CardGrid from '~/components/CardGrid'
 import { GRAPHQL_BACKEND_URL } from '~/constants'
 import { Post } from '~/models/post'
@@ -54,6 +55,7 @@ const HomePage: VoidComponent = () => {
     <>
       <div>
         <CardGrid posts={data()?.posts.edges.map((e) => e.node)} />
+        <Banners />
       </div>
     </>
   )

src/scss/global.scss

@@ -79,4 +79,7 @@ body {
 
   --post-date-color: var(--color-gray500);
   --post-index-image-border-color: var(--color-gray100);
+
+  --banners-border-radius: 0.8rem;
+  --banners-padding: 3rem;
 }