chore(docs): homepage btn refactor

docs/src/pages/index.js

@@ -128,6 +128,16 @@ export default function Home() {
                 <p className="hero__subtitle">{siteConfig.tagline}</p>
               </div>
               <div className={styles.buttons}>
+                <Link
+                  className={classnames(
+                    "button button--primary button--lg rounded-pill button-start",
+                    styles.button,
+                    styles.buttonStart
+                  )}
+                  to={useBaseUrl("/getting-started/introduction")}
+                >
+                  Get Started
+                </Link>
                 <a
                   className={classnames(
                     "button button--outline button--secondary button--lg rounded-pill",
@@ -135,7 +145,7 @@ export default function Home() {
                   )}
                   href="https://next-auth-example.vercel.app"
                 >
-                  Live Demo (Next.js)
+                  <img src="/img/framework-nextjs-white.svg" height="48" width="48" />
                 </a>
                 <a
                   className={classnames(
@@ -144,7 +154,7 @@ export default function Home() {
                   )}
                   href="https://sveltekit-auth-example.vercel.app"
                 >
-                  Live Demo (SvelteKit)
+                  <img src="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg" height="48" width="48" />
                 </a>
                 <a
                   className={classnames(
@@ -153,17 +163,8 @@ export default function Home() {
                   )}
                   href="https://auth-solid.vercel.app"
                 >
-                  Live Demo (SolidStart)
+                  <img src="https://start.solidjs.com/logo.svg" height="48" width="48" />
                 </a>
-                <Link
-                  className={classnames(
-                    "button button--primary button--lg rounded-pill",
-                    styles.button
-                  )}
-                  to={useBaseUrl("/getting-started/introduction")}
-                >
-                  Get Started
-                </Link>
               </div>
             </div>
             <div className="hero-marquee">

docs/src/pages/index.module.css

@@ -34,17 +34,31 @@
   }
 }
 
+.frameworkWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem 1rem 2rem 1rem;
+  align-items: center;
+}
+
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 4rem 1rem 0 1rem;
   flex-wrap: wrap;
+  padding: 2rem 0;
   gap: 1rem;
+  color: #fff;
 }
 
 .button {
-  margin: 0 0.5rem;
+  margin: 0 1rem;
+}
+
+.buttonStart {
+  margin: 0 2rem;
+  color: red;
 }
 
 .features {

docs/static/img/framework-nextjs-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-label="Next.js logomark" class="next-mark_root__wLeec" data-theme="dark" height="80" role="img" viewBox="0 0 180 180" width="80"><mask height="180" id="mask0_408_134" maskUnits="userSpaceOnUse" style="mask-type:alpha" width="180" x="0" y="0"><circle cx="90" cy="90" fill="black" r="90"></circle></mask><g mask="url(#mask0_408_134)"><circle cx="90" cy="90" data-circle="true" fill="black" r="90" stroke="white" stroke-width="6px"></circle><path d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z" fill="url(#paint0_linear_408_134)"></path><rect fill="url(#paint1_linear_408_134)" height="72" width="12" x="115" y="54"></rect></g><defs><linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_408_134" x1="109" x2="144.5" y1="116.5" y2="160.5"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="paint1_linear_408_134" x1="121" x2="120.799" y1="54" y2="106.875"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient></defs></svg>