change homepage

build.js

@@ -30,7 +30,7 @@ const pageDesc = {
     title: "Nopwd web components demo | nopwd.rocks",
     desc: "Try our magic-link and passkey authentication interactive demo.",
     link: "https://nopwd.rocks",
-    img: "https://nopwd.rocks/static/opengraph.webp",
+    img: "https://nopwd.rocks/static/opengraph.png",
   };
 
 import pkg from "./package.json" assert {type: "json"};

src/demo-app.styles.ts

@@ -10,7 +10,13 @@ export default css`
     min-height: 100dvh;
 
     background-color: var(--np-core-color-grey-xl);
-    background-color: light-dark();
+  }
+
+  h1 {
+    text-align: center;
+    color: var(--np-core-color-grey-xs);
+    padding: 0;
+    margin: 0;
   }
 
   header,

src/demo-app.ts

@@ -32,6 +32,10 @@ export class DemoApp extends LitElement {
           <a href="https://github.com/nopwdio/nopwd.rocks" aria-label="github">${github}</a>
         </nav>
       </header>
+      <h1>
+        Magic-link and Passkeys <br />
+        authentication demo.
+      </h1>
       <main @np:auth=${this.onAuth} @np:logout=${this.onLogout}>
         ${!this.auth
           ? html`<view-login></view-login>`

src/styles/icon.styles.ts

@@ -27,3 +27,22 @@ export const bolt = svg`
     />
   </svg>
 `;
+
+export const bg = svg`
+<svg width="100%" height="100%" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_10_26)">
+    <g filter="url(#filter0_f_10_26)">
+      <path d="M271.4 400H400V77.8L93 291L271.4 400Z" fill="#7C87F8"></path>
+      <path d="M400 77.8V0H160H0L93 291L400 77.8Z" fill="#6EEDEE"></path>
+      <path d="M0 400H271.4L93 291L0 0V400Z" fill="#0F43AF"></path>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_f_10_26" x="-159.933" y="-159.933" width="719.867" height="719.867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+      <feGaussianBlur stdDeviation="79.9667" result="effect1_foregroundBlur_10_26"></feGaussianBlur>
+    </filter>
+  </defs>
+</svg>
+`;

src/views/view-login.styles.ts

@@ -10,4 +10,9 @@ export default css`
   np-email-login {
     width: 100%;
   }
+
+  np-email-login::part(button) {
+    background-color: black;
+    background: linear-gradient(90deg, #4300c7, #8a0ccf, #ce1ad7, #df28af);
+  }
 `;

src/views/view.styles.ts

@@ -8,8 +8,7 @@ export default css`
     border-radius: var(--np-core-border-radius-m);
     padding: var(--np-core-padding-m);
 
-    box-shadow: 15px 15px 30px var(--np-core-color-grey-l),
-      -15px -15px 30px var(--np-core-color-white);
+    box-shadow: 8px 8px 30px var(--np-core-color-grey-l), -8px -8px 30px var(--np-core-color-white);
   }
 
   h1 {