style: use real Mediary branding and login hero

astro.config.mjs

@@ -5,11 +5,11 @@ export default defineConfig({
   site: 'https://docs.mediary.nl',
   integrations: [
     starlight({
-      title: 'Mediary Handleiding',
+      title: 'Mediary',
       description: 'Gebruikershandleiding voor Mediary',
-      favicon: '/mediary-favicon.svg',
+      favicon: '/mediary-favicon.png',
       logo: {
-        src: './src/assets/mediary-logo.svg',
+        src: './src/assets/mediary_icon.png',
         alt: 'Mediary',
       },
       components: {

src/content/docs/index.mdx

@@ -1,11 +1,11 @@
 ---
-title: Welkom bij Mediary
-description: Houd je bibliotheek, kijkgeschiedenis en persoonlijke lijsten op één plek bij.
+title: Alles wat je kijkt, op één plek.
+description: Bouw een persoonlijke bibliotheek van films en series, houd je voortgang bij en ontdek je kijkgedrag.
 template: splash
 hero:
-  tagline: Mediary brengt de beschikbaarheid van je mediaservers, je kijkgeschiedenis en je persoonlijke keuzes samen in één overzicht.
+  tagline: Bouw een persoonlijke bibliotheek van films en series, houd je voortgang bij en ontdek je kijkgedrag.
   image:
-    file: ../../assets/mediary-logo.svg
+    file: ../../assets/mediary_icon.png
     alt: Mediary-logo
   actions:
     - text: Begin met Mediary

src/styles/custom.css

@@ -37,17 +37,105 @@ header.header {
   backdrop-filter: blur(16px);
 }
 
+.site-title {
+  display: grid;
+  grid-template-columns: 2.25rem auto;
+  grid-template-rows: auto auto;
+  column-gap: 0.75rem;
+  align-items: center;
+  line-height: 1.05;
+}
+
 .site-title img {
-  width: 2rem;
-  height: 2rem;
+  grid-row: 1 / 3;
+  width: 2.25rem;
+  height: 2.25rem;
+  object-fit: contain;
+}
+
+.site-title::after {
+  content: 'Your viewing history';
+  grid-column: 2;
+  font-size: 0.68rem;
+  font-weight: 400;
+  color: var(--sl-color-gray-3);
+  letter-spacing: 0;
+}
+
+.hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border: 1px solid #27272a;
+  border-radius: 2rem;
+  background: #09090b;
+  padding: clamp(2rem, 6vw, 5rem);
+  box-shadow: 0 2rem 5rem rgb(0 0 0 / 20%);
+}
+
+.hero::before {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  content: '';
+  background: radial-gradient(
+    circle at 30% 20%,
+    rgb(124 58 237 / 22%),
+    transparent 38%
+  );
+  pointer-events: none;
+}
+
+.hero::after {
+  position: absolute;
+  z-index: -1;
+  right: -12rem;
+  bottom: -16rem;
+  width: 32rem;
+  height: 32rem;
+  border-radius: 999px;
+  content: '';
+  background: rgb(76 29 149 / 14%);
+  filter: blur(5rem);
+  pointer-events: none;
+}
+
+.hero h1 {
+  max-width: 13ch;
+  color: #fff;
+  font-size: clamp(2.75rem, 7vw, 5rem);
+  line-height: 1.02;
+  letter-spacing: -0.045em;
+}
+
+.hero h1::before {
+  display: block;
+  margin-bottom: 1.25rem;
+  content: 'Your media. Your history.';
+  color: #a78bfa;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
 }
 
 .hero .tagline {
-  max-width: 48rem;
+  max-width: 34rem;
+  color: #71717a;
+  font-size: clamp(1rem, 2vw, 1.125rem);
+  line-height: 1.75;
 }
 
 .hero img {
-  filter: drop-shadow(0 1.25rem 2.5rem rgb(76 29 149 / 22%));
+  width: min(100%, 23rem);
+  max-height: 23rem;
+  object-fit: contain;
+  filter: drop-shadow(0 2rem 3.5rem rgb(76 29 149 / 35%));
+}
+
+.hero .actions a {
+  border-radius: 0.85rem;
 }
 
 @media (min-width: 50rem) {
@@ -62,3 +150,13 @@ header.header {
     display: none;
   }
 }
+
+@media (max-width: 49.99rem) {
+  .hero {
+    border-radius: 1.5rem;
+  }
+
+  .hero h1 {
+    font-size: clamp(2.4rem, 12vw, 4rem);
+  }
+}