docs: update branding graphics

Author: gureckis

docs/.vitepress/theme/custom.css

@@ -589,3 +589,118 @@ mark {
   border-radius: 4px;
   white-space: pre-wrap;
 }
+
+:root {
+  --vp-home-hero-image-background-image: url('/images/smiletown.svg');
+  --vp-home-hero-image-filter: blur(0px);
+}
+
+.VPHomeHero {
+  position: relative;
+  min-height: 70vh;
+  z-index: 1;
+}
+
+/* Create a pseudo-element for the full-screen background */
+.VPHomeHero::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: var(--vp-home-hero-image-background-image);
+  background-size: cover;
+  background-position: top right;
+  background-repeat: no-repeat;
+  background-position-y: calc(0px - max(0px, (100vw - 900px) * 0.5));
+  z-index: -1;
+  overflow: hidden;
+}
+
+/* Adjust content elements for better visibility on the background */
+.VPHomeHero .container,
+.VPHomeHero .main {
+  position: relative;
+  z-index: 1;
+}
+
+/* Optional: Add an overlay to improve text readability */
+.VPHomeHero::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+/* Target the footer only on home layout */
+.VPFooter,
+html[class*='index'] .VPFooter {
+  background-color: transparent !important;
+  border-top: none !important;
+}
+
+/* Adjust text color for footer on home page */
+.VPFooter .container,
+html[class*='index'] .VPFooter .container {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Adjust text color for footer on home page */
+.VPFooter .container,
+html[class*='index'] .VPFooter .container {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Footer links on home page */
+.VPFooter a,
+html[class*='index'] .VPFooter a {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.VPFooter a:hover,
+html[class*='index'] .VPFooter a:hover {
+  color: rgba(255, 255, 255, 1);
+}
+
+/* For home hero alt buttons */
+.VPHero .VPButton.alt,
+.VPHomeHero .VPButton.alt {
+  background-color: #32363f !important;
+  border-color: #32363f !important;
+  color: #fff !important;
+}
+
+/* Hover state */
+.VPHero .VPButton.alt:hover,
+.VPHomeHero .VPButton.alt:hover {
+  background-color: #f4bd22 !important;
+  border-color: #f4bd22 !important;
+  color: #32363f !important;
+}
+
+.VPHome .text {
+  color: #32363f !important;
+}
+
+.VPHome .main {
+  margin-top: 40px;
+}
+
+.VPNavBar {
+  background-color: transparent !important;
+  border-bottom: none !important;
+}
+
+.VPNav,
+.Layout {
+  background-color: transparent !important;
+  border-bottom: none !important;
+}
+
+.VPNavBarTitle {
+  color: #32363f !important;
+}

docs/index.md

@@ -2,11 +2,9 @@
 layout: home
 
 hero:
-  name: 🫠
-  text: Smile.
-  tagline: A head-meltingly happy approach to online behavioral research.
+  text: A happy approach to online behavioral research.
   actions:
-    - theme: brand
+    - theme: alt
       text: Get Started
       link: /introduction
     - theme: alt

docs/introduction.md

@@ -2,7 +2,7 @@
 outline: none
 ---
 
-# Welcome to Smile!
+<img src="/images/smile.svg" width="300">
 
 The Smile project is new way to develop rich and interactive online experiments.
 Smile prioritizes modularity and reusability. Unlike tools that cater to