landing clean up

packages/power.stream/src/App.scss

@@ -35,12 +35,15 @@ $headings-font-family: "Merriweather", serif;
 
 html {
   height: 100%;
+  scroll-behavior: smooth;
+  overflow-anchor: none;
 }
 
 body {
   height: 100%;
   font-family: "Fira Sans", sans-serif;
   color: #fff;
+  overflow-anchor: none;
 }
 
 hr {
@@ -335,6 +338,23 @@ span.word:after {
   border-color: lighten($destructive, 8%);
 }
 
+.btn-cta,
+.btn-cta:focus,
+.btn-cta:active {
+  background-color: $white;
+  color: darken($secondary, 10%);
+  border: 2.5px solid;
+  border-color: $white;
+  transition: 0.2s;
+}
+
+.btn-cta:hover {
+  background-color: darken($white, 20%);
+  color: darken($secondary, 10%);
+  border: 2.5px solid;
+  border-color: darken($white, 20%);
+}
+
 .btn-hero {
   padding-left: 35px !important;
   padding-right: 35px !important;

packages/power.stream/src/App.tsx

@@ -191,38 +191,49 @@ class App extends React.Component<Props, State> {
             </div>
 
             <footer className="d-flex flex-column container py-5 gap-4">
-              <div className="text-center align-items-center justify-content-center gap-3">
-                <a className="footer-link" href="https://power.stream">
-                  TTS Configs
+              <div className="d-flex text-center align-items-center justify-content-center gap-2 flex-wrap">
+                <a className="footer-link" href="#features">
+                  Features
                 </a>
-                &nbsp;|&nbsp;
-                <a className="footer-link" href="https://power.stream">
-                  OBS Configs
+                |
+                <a className="footer-link" href="#voices">
+                  Voice Previews
                 </a>
-                &nbsp;|&nbsp;
-                <a className="footer-link" href="https://power.stream">
-                  Terms
+                |
+                <a className="footer-link" href="#insights">
+                  Insights
+                </a>
+                |
+                <a className="footer-link" href="#faq">
+                  FAQ
+                </a>
+                |
+                <a className="footer-link" href="#community">
+                  Community
+                </a>
+                |
+                <a
+                  className="footer-link"
+                  rel="noreferrer"
+                  target="_blank"
+                  href="https://fakeyou.com"
+                >
+                  FakeYou
+                </a>
+                |
+                <a
+                  className="footer-link"
+                  rel="noreferrer"
+                  target="_blank"
+                  href="https://discord.gg/fakeyou"
+                >
+                  Discord
                 </a>
               </div>
-              <div className="d-flex justify-content-center gap-4">
-                <a className="social-icon" href="https://fakeyou.com">
-                  <i className="fa-brands fa-discord"></i>
-                </a>
-                <a className="social-icon" href="https://fakeyou.com">
-                  <i className="fa-brands fa-twitch"></i>
-                </a>
-                <a className="social-icon" href="https://fakeyou.com">
-                  <i className="fa-brands fa-twitter"></i>
-                </a>
-                <a className="social-icon" href="https://fakeyou.com">
-                  <i className="fa-brands fa-facebook"></i>
-                </a>
-                <a className="social-icon" href="https://fakeyou.com">
-                  <i className="fa-brands fa-patreon"></i>
-                </a>
-              </div>
-              <div className="d-flex justify-content-center">
-                © 2022 Storyteller Stream. | <GitSha />
+
+              <div className="d-flex flex-column text-center gap-4 mt-4">
+                © 2022 PowerStream.
+                <GitSha />
               </div>
             </footer>
           </div>

packages/power.stream/src/layout/TopNav.tsx

@@ -26,13 +26,13 @@ function TopNav(props: Props) {
         aria-label="Offcanvas navbar large"
       >
         <div className="container">
-          <Link className="navbar-brand me-5 pr-8" to="/">
+          <a className="navbar-brand me-5 pr-8" href="#">
             <img
               src="/assets/powerstream-logo.png"
               alt="PowerStream Logo"
               height="32"
             />
-          </Link>
+          </a>
           <button
             className="navbar-toggler p-0 border-0"
             type="button"
@@ -47,14 +47,14 @@ function TopNav(props: Props) {
             id="offcanvasNavbar2"
             aria-labelledby="offcanvasNavbar2Label"
           >
-            <div className="offcanvas-header">
-              <Link className="navbar-brand me-5 pr-8" to="/">
+            <div className="offcanvas-header" data-bs-toggle="offcanvas">
+              <a className="navbar-brand me-5 pr-8" href="#">
                 <img
                   src="/assets/powerstream-logo.png"
                   alt="PowerStream Logo"
                   height="32"
                 />
-              </Link>
+              </a>
               <button
                 type="button"
                 className="btn-close btn-close-white"
@@ -65,52 +65,33 @@ function TopNav(props: Props) {
             <div className="offcanvas-body">
               <ul className="navbar-nav justify-content-start flex-grow-1 align-items-lg-center">
                 <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    aria-current="page"
-                    to="/tts_configs"
-                  >
+                  <a className="nav-link" href="#features">
                     Features
-                  </Link>
+                  </a>
                 </li>
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    aria-current="page"
-                    to="/obs_configs"
-                  >
+                <li className="nav-item" data-bs-toggle="offcanvas">
+                  <a className="nav-link" href="#voices">
                     Voice Previews
-                  </Link>
+                  </a>
                 </li>
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    aria-current="page"
-                    to="/obs_configs"
-                  >
+                <li className="nav-item" data-bs-toggle="offcanvas">
+                  <a className="nav-link" href="#insights">
                     Insights
-                  </Link>
+                  </a>
                 </li>
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    aria-current="page"
-                    to="/obs_configs"
-                  >
+                <li className="nav-item" data-bs-toggle="offcanvas">
+                  <a className="nav-link" href="#faq">
                     FAQ
-                  </Link>
+                  </a>
                 </li>
-                <li className="nav-item">
-                  <Link
-                    className="nav-link"
-                    aria-current="page"
-                    to="/obs_configs"
-                  >
+                <li className="nav-item" data-bs-toggle="offcanvas">
+                  <a className="nav-link" href="#community">
                     Community
-                  </Link>
+                  </a>
                 </li>
               </ul>
-              <div className="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0">
+              <hr className="my-4" />
+              <div className="d-grid gap-2 d-flex justify-content-start align-items-center ps-3 pt-lg-0 ps-lg-0">
                 <a
                   className="nav-login me-3"
                   href="https://dash.power.stream/login"
@@ -121,7 +102,7 @@ function TopNav(props: Props) {
                   href="https://dash.power.stream/signup"
                   className="btn btn-primary"
                 >
-                  Sign up
+                  Sign Up
                 </a>
               </div>
             </div>

packages/power.stream/src/pages/index/IndexPage.tsx

@@ -6,7 +6,7 @@ import {
   faHeadphones,
   faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { VoicePreviewPlayer } from "./VoicePreviewPlayer";
 import { wavesurferConfigs } from "./wsConfig";
 
@@ -28,12 +28,13 @@ function IndexPage(props: Props) {
         <div className="hero-section d-flex flex-column align-items-center">
           <div className="hero-inner container-fluid d-flex flex-column align-items-center justify-content-center">
             <h1 className="display-3 fw-bold mb-3 parent">
-              Power for <span className="word">Your Stream</span>
+              Power for <br className="d-sm-none" />
+              <span className="word">Your Stream</span>
             </h1>
-            <p className="hero-text lead mb-4">
+            <p className="hero-text lead mb-4 px-4 px-lg-0">
               Advanced Text to Speech Donations and Rewards for your stream,
-              from the creators of FakeYou.com
-              <br />
+              from the creators of FakeYou.com{" "}
+              <br className="d-none d-lg-block" />
               (And a lot more coming in the future!)
             </p>
             <div className="panel-ani mt-4 d-flex gap-3 flex-column flex-md-row">
@@ -195,7 +196,7 @@ function IndexPage(props: Props) {
         </div>
       </div>
 
-      <div className="insights-bg">
+      <div className="insights-bg" id="insights">
         <div className="container section d-flex flex-column align-items-center">
           <div className="row insights-section align-items-center">
             <div className="col-md-6 mb-4 mb-md-0 text-center text-md-start">
@@ -242,7 +243,7 @@ function IndexPage(props: Props) {
         </div>
       </div>
 
-      <div className="faq-bg">
+      <div className="faq-bg" id="faq">
         <div className="container section d-flex flex-column align-items-center">
           <div className="d-flex justify-content-center align-items-center gap-4">
             <img className="rotateimg180" src="assets/title-shape.png" alt="" />
@@ -355,7 +356,7 @@ function IndexPage(props: Props) {
         </div>
       </div>
 
-      <div className="community-bg">
+      <div className="community-bg" id="community">
         <div className="container section mb-3 d-flex flex-column align-items-center">
           <div className="d-flex justify-content-center align-items-center gap-4">
             <img className="rotateimg180" src="assets/title-shape.png" alt="" />
@@ -374,30 +375,49 @@ function IndexPage(props: Props) {
           </p>
           <div className="d-flex flex-column flex-lg-row gap-3 mb-5">
             <button className="btn btn-secondary">
-              <i className="fa-brands fa-twitter me-2"></i>Follow on Twitter
+              <FontAwesomeIcon icon={faTwitter} className="me-2" />
+              Follow on Twitter
             </button>
             <button className="btn btn-primary">
-              <i className="fa-brands fa-discord me-2"></i>Join our Discord
+              <i className="fa-brands fa-discord me-2"></i>
+              <FontAwesomeIcon icon={faDiscord} className="me-2" />
+              Join our Discord
             </button>
           </div>
         </div>
       </div>
 
-      <div className="container section d-flex flex-column align-items-center">
+      <div className="container section pt-5 d-flex flex-column align-items-center">
         <div className="cta-panel panel-ani">
           <div className="row">
             <div className="col-md-6 parent">
-              <img className="cta-img w-100" src="assets/cta-img.png" alt="" />
+              <img
+                className="cta-img w-100"
+                src="assets/cta-img.png"
+                alt="cta mascot"
+              />
             </div>
-            <div className="col-md-6 cta-right text-center text-sm-start px-5">
+            <div className="col-md-6 cta-right text-center text-sm-start px-4 px-lg-5">
               <h1 className="display-5 fw-bold mb-5">
                 Get started with Storyteller Stream!
               </h1>
-              <div className="d-flex gap-3">
-                <button className="btn btn-secondary w-100">Sign Up</button>
-                <button className="btn btn-secondary w-100">
+              <div className="d-flex flex-column flex-sm-row gap-3">
+                <a
+                  className="btn btn-cta w-100"
+                  href="https://dash.power.stream/signup"
+                >
+                  Sign Up
+                  <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+                </a>
+                <a
+                  className="btn btn-cta w-100"
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://discord.gg/fakeyou"
+                >
+                  <FontAwesomeIcon icon={faDiscord} className="me-2" />
                   Join Discord
-                </button>
+                </a>
               </div>
             </div>
           </div>