diff --git a/lib/directus.ts b/lib/directus.ts
index 4b6708eee2d1be8f9100886db94f21369da6fea6..87e182c2aabd0f687b260d7a54e75fcef5cdf671 100644
--- a/lib/directus.ts
+++ b/lib/directus.ts
@@ -33,12 +33,30 @@ type Globals_translations = {
Introduction: string;
}
+type Abouts = {
+ link: string;
+ id: number;
+ sort: number;
+ translations: number[];
+}
+
+export type Abouts_translations = {
+ id: string;
+ Abouts_id: number;
+ Languages_code: string;
+ title: string;
+ content: string;
+}
+
+
type Schema = {
Posts: Post[];
Globals: any;
Globals_translations: Globals_translations[];
Members: Member[];
- Mottos: Mottos[]
+ Mottos: Mottos[];
+ Abouts: Abouts[];
+ Abouts_translations: Abouts_translations[];
}
export const CONTENT_URL = "https://content.hai-liste.de"
diff --git a/public/favicon.svg b/public/favicon.svg
index f157bd1c5e287c70a508a98a13f538491aa4dafc..faf3f8d0eb937f3b8033a4a0f356bc0131ccec35 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,65 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
- <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
- <style>
- path { fill: #000; }
- @media (prefers-color-scheme: dark) {
- path { fill: #FFF; }
- }
- </style>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="490"
+ height="363"
+ viewBox="0 0 490 363"
+ fill="none"
+ version="1.1"
+ id="svg24"
+ sodipodi:docname="hai-cropped-white.svg"
+ inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview24"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showguides="true"
+ inkscape:document-units="px"
+ inkscape:zoom="0.5537285"
+ inkscape:cx="220.32458"
+ inkscape:cy="220.32458"
+ inkscape:window-width="1512"
+ inkscape:window-height="849"
+ inkscape:window-x="0"
+ inkscape:window-y="38"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="g24">
+ <sodipodi:guide
+ position="922.83493,540.78798"
+ orientation="0,-1"
+ id="guide24"
+ inkscape:locked="false" />
+ </sodipodi:namedview>
+ <g
+ clip-path="url(#clip0_11_215)"
+ id="g24"
+ transform="matrix(-0.91447594,0,0,0.91447594,888.65352,-262.78768)">
+ <path
+ d="m 828.026,711.13 c -2.964,0.36 -43.256,2.882 -137.196,-48.197 -4.501,-4.148 -5.014,-23.834 -3.385,-24.719 6.661,-3.621 16.979,10.002 17.059,8.145 0.654,-15.064 2.43,-14.259 3.44,-14.456 5.931,-1.156 13.103,11.253 13.322,9.876 2.219,-13.984 2.184,-14.194 4.758,-15.445 4.155,-2.019 13.945,11.991 14.064,10.926 1.1,-9.805 2.446,-13.853 3.347,-14.342 4.034,-2.188 12.029,10.307 12.462,9.283 0.433,-1.024 2.248,-14.012 3.566,-16.294 1.706,-2.955 10.443,7.961 14.93,10.274 1.592,-1.82 0.439,-13.644 2.186,-15.294 3.249,-3.068 14.866,7.62 13.982,6.693 -19.931,-20.889 -26.965,-22.529 -31.709,-22.52 -3.388,0.007 -8.655,-11.702 -8.907,-11.209 -1.993,3.902 -5.983,7.322 -8.337,6.804 -5.194,-1.144 -9.62,-19.787 -11.586,-19.558 -4.468,0.522 -12.553,14.698 -14.171,13.245 -3.841,-3.449 -6.693,-25.381 -7.439,-23.949 -12.82,24.595 -13.325,24.404 -15.379,24.292 -3.611,-0.198 -14.056,-29.691 -14.52,-28.681 -10.486,22.789 -12.614,25.888 -14.067,25.592 -8.508,-1.729 -18.03,-31.455 -18.959,-29.558 -5.257,10.733 -11.124,31.768 -13.285,30.964 -9.249,-3.44 -19.851,-30.84 -20.287,-28.323 -1.901,10.971 -4.722,35.627 -6.378,35.423 -5.461,-0.671 -21.332,-26.301 -26.558,-37.838 -15.389,-5.937 -19.573,-11.237 -21.082,-13.176 -44.088,-56.659 -79.396,-144.231 -76.432,-149.334 28.889,-49.739 324.481,-60.646 330.575,-55.112 11.658,-0.119 151.28,11.982 254.88,41.905 34.17,-86.986 177.78,-155.056 165.97,-127.958 -46.41,106.507 -6.3,172.407 41.49,179.553 28.23,4.221 232.99,44.227 291.54,59.981 31.22,-34.261 60.93,-54.777 58.14,-32.727 -3.8,30.029 0.84,40.533 7.02,42.03 23.52,5.694 117.22,19.944 168.05,-20.1 132.68,-104.528 255.07,-154.013 365.72,-126.609 40.55,10.044 -219.47,86.608 -225.81,313.068 -3.45,123.357 215.48,267.339 219.5,277.405 11.6,29.001 -232.18,-47.997 -399.66,-151.275 -37.77,-23.293 -89.86,-28.5 -121.97,-27.272 -28.77,1.1 -0.27,35.674 -26.91,27.002 -4.82,-1.57 -18.06,-26.451 -28.91,-25.599 -8.83,0.692 -10.89,26.152 -17.81,24.454 -16.7,-4.103 -20.92,-27.01 -40.31,-27.622 -43.11,-1.362 -139.12,12.667 -154.41,12.266 -24.42,-0.641 -20.22,21.922 29.05,76.503 94.81,90.368 -172.7,-14.259 -217.9,-63.166 -85.85,-7.971 -116.92,-20.417 -148.3,-21.208 -33.151,-0.835 -38.158,3.678 -69.078,59.352 -14.046,25.29 -15.163,-71.633 -41.076,-83.412 -30.506,-13.866 -41.43,-10.936 -93.23,-30.083 z"
+ fill="#191821"
+ id="path1"
+ style="fill:#ffffff" />
+ </g>
+ <defs
+ id="defs24">
+ <clipPath
+ id="clip0_11_215">
+ <rect
+ width="970"
+ height="686"
+ fill="#ffffff"
+ transform="matrix(-1,0,0,1,970,0)"
+ id="rect24"
+ x="0"
+ y="0" />
+ </clipPath>
+ </defs>
</svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 96c2fce912081e5a31ada035b340efb69721be74..1b098c71df29b65bc9303f950bd8a0c6a1aa24ad 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,62 +1,57 @@
---
-const today = new Date();
---
-<footer>
- © {today.getFullYear()} Your name here. All rights reserved.
- <div class="social-links">
- <a href="https://m.webtoo.ls/@astro" target="_blank">
- <span class="sr-only">Follow Astro on Mastodon</span>
- <svg
- viewBox="0 0 16 16"
- aria-hidden="true"
- width="32"
- height="32"
- astro-icon="social/mastodon"
- ><path
- fill="currentColor"
- d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
- ></path></svg
- >
- </a>
- <a href="https://twitter.com/astrodotbuild" target="_blank">
- <span class="sr-only">Follow Astro on Twitter</span>
- <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
- ><path
- fill="currentColor"
- d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
- ></path></svg
- >
- </a>
- <a href="https://github.com/withastro/astro" target="_blank">
- <span class="sr-only">Go to Astro's GitHub repo</span>
- <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
- ><path
- fill="currentColor"
- d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
- ></path></svg
- >
- </a>
- </div>
-</footer>
-<style>
- footer {
- padding: 2em 1em 6em 1em;
- background: linear-gradient(var(--gray-gradient)) no-repeat;
- color: rgb(var(--gray));
- text-align: center;
- }
- .social-links {
- display: flex;
- justify-content: center;
- gap: 1em;
- margin-top: 1em;
- }
- .social-links a {
- text-decoration: none;
- color: rgb(var(--gray));
- }
- .social-links a:hover {
- color: rgb(var(--gray-dark));
- }
-</style>
+ <!-- Footer -->
+ <footer class="bg-dark text-white py-8 w-full">
+ <div class="container mx-auto px-4">
+ <div class="flex flex-wrap justify-between">
+ <div class="w-full md:w-1/3 mb-6 md:mb-0">
+ <h3 class="text-xl font-semibold mb-4">
+ HAI - Hochschulliste Aktive Informatik
+ </h3>
+ <p class="text-blue-200">
+ Active politics since 2024.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 mb-6 md:mb-0">
+ <!-- <h3 class="text-xl font-semibold mb-4">Verweise</h3>
+ <ul class="space-y-2">
+ <li>
+ <a href="https://h-da.de" class="text-blue-200 hover:text-white"
+ >Hochschule Darmstadt</a
+ >
+ </li>
+ <li>
+ <a href="#" class="text-blue-200 hover:text-white"
+ >Terms of Service</a
+ >
+ </li>
+ <li>
+ <a href="mailto:hello@hai-liste.de" class="text-blue-200 hover:text-white">Contact Us</a
+ >
+ </li>
+ </ul> -->
+ </div>
+ <div class="w-full md:w-1/3 mb-8">
+ <h3 class="text-xl font-semibold mb-4">Folge uns</h3>
+ <div class="flex space-x-4">
+ <a href="https://discord.gg/HFpGB9dQAh" class="text-blue-200 hover:text-white">
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-discord"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3" /><path d="M7 16.5c3.5 1 6.5 1 10 0" /></svg>
+ </a>
+ <a href="https://www.instagram.com/hai_hda/" class="text-blue-200 hover:text-white">
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>
+ </a>
+ <a href="#" class="text-blue-200 hover:text-white">
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 3h-1v18h1" /><path d="M20 21h1v-18h-1" /><path d="M7 9v6" /><path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" /><path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" /></svg>
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="mt-8 text-center text-blue-200">
+ <p>
+ © {new Date().getFullYear()} HAI - Hochschulliste Aktive Informatik.
+ All rights reserved.
+ </p>
+ </div>
+ </div>
+ </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index c9ab99f1d3b3c48a084df4575d8f72c6e38cc3db..47dc81a59cbae89cf434ed1923fc61b5b4e5f6d0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,85 +1,35 @@
---
-import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE } from '../consts';
+const name = "HAI - Hochschulliste Aktive Informatik";
---
-<header>
- <nav>
- <h2><a href="/">{SITE_TITLE}</a></h2>
- <div class="internal-links">
- <HeaderLink href="/">Home</HeaderLink>
- <HeaderLink href="/blog">Blog</HeaderLink>
- <HeaderLink href="/about">About</HeaderLink>
- </div>
- <div class="social-links">
- <a href="https://m.webtoo.ls/@astro" target="_blank">
- <span class="sr-only">Follow Astro on Mastodon</span>
- <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
- ><path
- fill="currentColor"
- d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"
- ></path></svg
- >
- </a>
- <a href="https://twitter.com/astrodotbuild" target="_blank">
- <span class="sr-only">Follow Astro on Twitter</span>
- <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
- ><path
- fill="currentColor"
- d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
- ></path></svg
- >
- </a>
- <a href="https://github.com/withastro/astro" target="_blank">
- <span class="sr-only">Go to Astro's GitHub repo</span>
- <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
- ><path
- fill="currentColor"
- d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
- ></path></svg
- >
- </a>
- </div>
- </nav>
+<header class="bg-background w-full text-white shadow-sm">
+ <div
+ class="container mx-auto px-4 py-4 flex flex-col xl:flex-row justify-between items-center"
+ >
+ <div class="flex items-center space-x-2 justify-center">
+ <a href="/" class="text-2xl font-bold text-center md:text-start">{name}</a>
+ </div>
+ <nav class="hidden md:block">
+ <ul class="flex space-x-6 mt-2 xl:mt-0">
+ <li>
+ <a href="about" class="hover:text-blue-200 hover:underline">
+ Wahlprogramm
+ </a>
+ </li>
+ <li>
+ <a href="meetings" class="hover:text-blue-200 hover:underline">
+ Sitzungen
+ </a>
+ </li>
+ <li>
+ <a
+ href="mailto:hello@hai-liste.de"
+ class="hover:text-blue-200 hover:underline"
+ >
+ Kontakt
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
</header>
-<style>
- header {
- margin: 0;
- padding: 0 1em;
- background: white;
- box-shadow: 0 2px 8px rgba(var(--black), 5%);
- }
- h2 {
- margin: 0;
- font-size: 1em;
- }
-
- h2 a,
- h2 a.active {
- text-decoration: none;
- }
- nav {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- nav a {
- padding: 1em 0.5em;
- color: var(--black);
- border-bottom: 4px solid transparent;
- text-decoration: none;
- }
- nav a.active {
- text-decoration: none;
- border-bottom-color: var(--accent);
- }
- .social-links,
- .social-links a {
- display: flex;
- }
- @media (max-width: 720px) {
- .social-links {
- display: none;
- }
- }
-</style>
diff --git a/src/components/MainPage/Mottos.astro b/src/components/MainPage/Mottos.astro
index eba07fad2a819154121f5918ccd8b98bf5b34242..658e402af8f4bf7782db075d8b03e67f7d1c1224 100644
--- a/src/components/MainPage/Mottos.astro
+++ b/src/components/MainPage/Mottos.astro
@@ -8,12 +8,13 @@ const mottos = (await directus.request(readItems("Mottos")))
<div>
<h1 id="motto" data-mottos={JSON.stringify(mottos)} class="text-4xl md:text-5xl font-bold mb-4 table-cell align-bottom"></h1>
- <p class="text-xl mb-6">Deine Mamer mag Apfelkuchen >:3.</p>
- <button
+ <p class="text-xl mt-2 mb-6">Ab dem 27.1. HAI wählen!</p>
+ <a
class="bg-accent text-white hover:bg-accent-800 font-bold py-2 px-6 rounded-full transition-all hover:scale-105 duration-200"
+ href="about"
>
- Unser Wahlprogramm
- </button>
+ Learn more
+ </a>
</div>
<script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 956439a77fcda27daa451c9ba13c9912bc0e53b6..bfcd2be8af9231088d5656c496afa330b1f3e9a9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -16,7 +16,11 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
- <body>
+ <body class="overflow-x-hidden">
+ <!-- dont ask - hate tailwind css -->
+ <div class="hidden text-background"></div>
+ <div class="hidden text-primary2"></div>
+ <div class="hidden text-primary"></div>
<slot />
</body>
</html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index c9d5b0292ee8e2a78e2e3a46a669b5666d7dc44e..8cf45b59a3a40952378507c4e0680b6970916d63 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,62 +1,70 @@
---
-import Layout from '../layouts/BlogPost.astro';
+import Footer from "../components/Footer.astro";
+import WaveDivider from "../components/MainPage/WaveDivider.astro";
+import Layout from "../layouts/Layout.astro";
+
+
+import directus from "../../lib/directus";
+import { readItems, readSingleton } from "@directus/sdk";
+import type { Abouts_translations } from "../../lib/directus"
+import { number } from "astro:schema";
+import Header from "../components/Header.astro";
+
+const about = (await directus.request(readItems("Abouts")))
+const trans = Object.values((await directus.request(readItems("Abouts_translations")))
+ .reduce((p,c) => ({
+ ...p,
+ [c.Abouts_id]: [
+ ...(p[c.Abouts_id] ?? []),
+ c
+ ]}), {} as {[key: number]: Abouts_translations[]}))
+ .sort((a,b) =>
+ (about.find(e => e.id == a[0].Abouts_id)?.sort ?? 0)
+ < (about.find(e => e.id == b[0].Abouts_id)?.sort ?? 0)
+ ? -1
+ : 1
+ )
+
+
+const getLang = (t: Abouts_translations[], lang: string) =>
+ t.find(e => e.Languages_code == lang)
+
+
+const colors = [...(function*() {
+ const shades = ["background", "primary2", "primary"];
+ while (true) {
+ for (let i = 0; i < shades.length; i++) yield shades[i]
+ for (let i = shades.length - 2; i > 0; i--) yield shades[i]
+ }
+})().take(Object.keys(trans).length)]
+
---
-<Layout
- title="About Me"
- description="Lorem ipsum dolor sit amet"
- pubDate={new Date('August 08 2021')}
- heroImage="/blog-placeholder-about.jpg"
->
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
- labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
- viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
- adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
- et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
- vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
- sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
- </p>
-
- <p>
- Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
- tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
- blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
- porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
- massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
- Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
- bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
- massa massa ultricies mi.
- </p>
-
- <p>
- Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
- suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
- nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
- turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
- dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
- semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
- vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
- facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
- vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
- urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
- </p>
-
- <p>
- Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
- viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
- scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
- gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
- pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
- blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
- cursus metus aliquam eleifend mi.
- </p>
-
- <p>
- Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
- nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
- tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
- ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
- proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
- </p>
+<Layout title="HAI · Über uns :3">
+ <main class="min-h-screen max-w-[100vw] flex flex-col">
+ <!-- Header -->
+ <Header></Header>
+
+ <div class="h-8 grow bg-background"></div>
+
+
+ {trans.map((a, index) =>
+ <section id={about.find(e => e.id === a[0].Abouts_id)!.link} class={`bg-${colors.at(index)} text-white pt-8 pb-32 relative w-full -mt-px`}>
+ <div class="grow flex-col md:flex-row flex mx-auto container">
+ <div class="px-8 pb-8 w-full md:w-[50%] text-white text-lg text-justify" >
+ <h1 class="text-4xl text-center w-full font-bold mb-6">{getLang(a, "de")?.title}</h1>
+ <p class="" set:html={getLang(a, "de")?.content}></p>
+ </div>
+ <div class="px-8 pb-8 w-full md:w-[50%] text-white text-lg text-justify" >
+ <h1 class="text-4xl text-center w-full font-bold mb-6">{getLang(a, "en")?.title}</h1>
+ <p class="text-sm" set:html={getLang(a, "en")?.content}></p>
+ </div>
+ </div>
+ <WaveDivider className={`-mb-px absolute bottom-0 left-0 text-${index == colors.length - 1 ? "dark" : colors.at(index + 1)}`}></WaveDivider>
+ </section>
+ )}
+
+ <Footer></Footer>
+
+ </main>
</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d533881369627538b3dbb2174145676371757c05..a060813742ba9bc902463f1f07f7de557ad5a491 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,7 @@ import TopicCard from "../components/MainPage/TopicCard.astro";
import Mottos from "../components/MainPage/Mottos.astro";
import Agenda from "../components/MainPage/Agenda.astro";
import Members from "../components/MainPage/Members.astro";
+import Footer from "../components/Footer.astro";
// Get language (defaults to german)
const lang = Astro.url.searchParams.get("lang") ?? "de";
@@ -24,19 +25,14 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<nav class="hidden md:block">
<ul class="flex space-x-6 mt-2 xl:mt-0">
<li>
- <a href="agenda" class="hover:text-blue-200 hover:underline"> Wahlprogramm </a>
+ <a href="about" class="hover:text-blue-200 hover:underline"> Wahlprogramm </a>
</li>
<li>
<a href="meetings" class="hover:text-blue-200 hover:underline"> Sitzungen </a>
</li>
<li>
- <a href="contact-us" class="hover:text-blue-200 hover:underline"> Kontakt </a>
+ <a href="mailto:hello@hai-liste.de" class="hover:text-blue-200 hover:underline"> Kontakt </a>
</li>
- <!-- <li>
- <a href={`?lang=${lang == "de" ? "en" : "de"}`} class="font-extrabold">
- {lang == "de" ? "EN" : "DE"}
- </a>
- </li> -->
</ul>
</nav>
</div>
@@ -44,14 +40,14 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<!-- Hero Section -->
<section class="bg-background text-white relative overflow-hidden h-[75vh] md:h-[inherit]">
- <diov
+ <div
class="container h-full justify-end min-w-full pt-16 pb-10 flex flex-col md:flex-row items-center"
>
<div class="flex items-center flex-grow ps-8 lg:ps-24 z-10 min-w-[50%]">
<Mottos />
</div>
<div
- class="flex-grow-0 md:rotate-0 rotate-90 translate-y-4 translate-x-12 md:translate-x-0 md:translate-y-0"
+ class="flex-grow-0 md:rotate-0 rotate-[75deg] translate-y-32 translate-x-0 md:translate-x-0 md:translate-y-0"
>
<InteractiveShark />
</div>
@@ -97,11 +93,11 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<h1 class="text-4xl font-bold text-center mb-8">Deine aktiven Haie</h1>
<Members/>
</div>
- <WaveDivider className="text-blue-300 absolute bottom-0 left-0" />
+ <WaveDivider className="-mb-px text-dark absolute bottom-0 left-0" />
</section>
<!-- Get Involved Section -->
- <section class="bg-blue-300 text-blue-900 py-16 relative -mt-px">
+ <!-- <section class="bg-blue-300 text-blue-900 py-16 relative -mt-px">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Get Involved</h2>
<div class="flex flex-wrap justify-center gap-4">
@@ -122,89 +118,9 @@ const name = "HAI - Hochschulliste Aktive Informatik";
</button>
</div>
</div>
- </section>
+ </section> -->
<!-- Footer -->
- <footer class="bg-dark text-white py-8">
- <div class="container mx-auto px-4">
- <div class="flex flex-wrap justify-between">
- <div class="w-full md:w-1/3 mb-6 md:mb-0">
- <h3 class="text-xl font-semibold mb-4">
- HAI - Hochschulliste Aktive Informaik
- </h3>
- <p class="text-blue-200">
- Swimming towards a better future, one vote at a time.
- </p>
- </div>
- <div class="w-full md:w-1/3 mb-6 md:mb-0">
- <h3 class="text-xl font-semibold mb-4">Verweise</h3>
- <ul class="space-y-2">
- <li>
- <a href="#" class="text-blue-200 hover:text-white"
- >Privacy Policy</a
- >
- </li>
- <li>
- <a href="#" class="text-blue-200 hover:text-white"
- >Terms of Service</a
- >
- </li>
- <li>
- <a href="#" class="text-blue-200 hover:text-white">Contact Us</a
- >
- </li>
- </ul>
- </div>
- <div class="w-full md:w-1/3">
- <h3 class="text-xl font-semibold mb-4">Folge uns</h3>
- <div class="flex space-x-4">
- <a href="#" class="text-blue-200 hover:text-white">
- <svg
- class="w-6 h-6"
- fill="currentColor"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- ><path
- d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
- ></path></svg
- >
- </a>
- <a href="#" class="text-blue-200 hover:text-white">
- <svg
- class="w-6 h-6"
- fill="currentColor"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- ><path
- d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
- ></path></svg
- >
- </a>
- <a href="#" class="text-blue-200 hover:text-white">
- <svg
- class="w-6 h-6"
- fill="currentColor"
- viewBox="0 0 24 24"
- xmlns="http://www.w3.org/2000/svg"
- ><path
- d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
- ></path></svg
- >
- </a>
- </div>
- </div>
- </div>
- <div class="mt-8 text-center text-blue-200">
- <p>
- © {new Date().getFullYear()} HAI - Hochschulliste Aktive Informatik.
- All rights reserved.
- </p>
- </div>
- </div>
- </footer>
+ <Footer></Footer>
</main>
</Layout>
-
-<script>
- // Add any client-side JavaScript here
-</script>