WIP About page updates

components/AboutPage/index.scss

@@ -1,4 +1,50 @@
 .About.PageContent {
+  $width: 520px;
+  padding-bottom: $unit-12x;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    gap: $unit-2x;
+
+    .Hero {
+      position: absolute;
+      width: 40vw;
+      height: 80vh;
+      right: $unit-8x * -1;
+      top: $unit-4x * -1;
+      background-image: linear-gradient(
+          90deg,
+          rgba(245, 245, 245, 1) 0%,
+          rgba(245, 245, 245, 0) 50%,
+          rgba(245, 245, 245, 0) 70%,
+          rgba(245, 245, 245, 1) 100%
+        ),
+        linear-gradient(
+          rgba(245, 245, 245, 1) 0%,
+          rgba(245, 245, 245, 0) 40%,
+          rgba(245, 245, 245, 0) 78%,
+          rgba(245, 245, 245, 1) 100%
+        ),
+        url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg');
+    }
+
+    p {
+      font-size: $font-medium;
+      max-width: $width;
+      line-height: 1.35;
+      z-index: 2;
+    }
+
+    h2 {
+      font-weight: $bold;
+      font-size: $font-medium;
+      margin: 0;
+      max-width: $width;
+      z-index: 2;
+    }
+  }
   .Links {
     display: grid;
     gap: $unit;
@@ -8,4 +54,9 @@
   div.LinkItem {
     margin-top: $unit-2x;
   }
+
+  .LinkItem {
+    background: var(--dialog-bg);
+    max-width: calc($width / 3 * 2);
+  }
 }

components/AboutPage/index.tsx

@@ -18,8 +18,8 @@ const AboutPage: React.FC<Props> = (props: Props) => {
     <div className="About PageContent">
       <h1>{common('about.segmented_control.about')}</h1>
       <section>
-        <p>
+        <h2>
-          Granblue.team is a tool to save and share team comps for{' '}
+          Granblue.team is a tool to save and share team compositions for{' '}
           <a
             href="https://game.granbluefantasy.jp"
             target="_blank"
@@ -27,28 +27,29 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           >
             Granblue Fantasy
           </a>
-          .
+          , a social RPG from Cygames.
-        </p>
+        </h2>
+
         <p>
-          Start adding to a team and a URL will be created for you to share
+          To get started, all you have to do is add an item to a team and a URL
-          wherever you like, no account needed.
+          will be created for you to share wherever you like, no account needed.
         </p>
+
         <p>
-          However, if you do make an account, you can save any teams you find
+          If you do make an account, you can save any teams you find for future
-          for future reference and keep all of your teams together in one place.
+          reference and keep all of your teams together in one place.
         </p>
+
+        <div className="Hero" />
       </section>
 
       <section>
         <h2>Feedback</h2>
-        <p>
-          This is an evolving project so feedback and suggestions are greatly
-          appreciated!
-        </p>
         <p>
           If you have a feature request, would like to report a bug, or are
-          enjoying the tool and want to say thanks, come hang out in Discord!
+          enjoying the tool and want to say thanks, come hang out in Discord.
         </p>
+        <p>Feedback and suggestions are greatly appreciated!</p>
         <div className="LinkItem">
           <Link href="https://discord.gg/qyZ5hGdPC8">
             <a
@@ -69,15 +70,18 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>Credits</h2>
         <p>
-          Granblue.team was built by{' '}
+          Granblue.team was built and is maintained by{' '}
           <a
             href="https://twitter.com/jedmund"
             target="_blank"
             rel="noreferrer"
           >
             @jedmund
-          </a>{' '}
+          </a>
-          with a lot of help from{' '}
+          .
+        </p>
+        <p>
+          Many thanks to{' '}
           <a
             href="https://twitter.com/lalalalinna"
             target="_blank"
@@ -93,11 +97,10 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           >
             @tarngerine
           </a>
-          .
+          , who both provided a lot of help and advice as I was ramping up.
         </p>
         <p>
-          Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, and
+          Many thanks also go to everyone in{' '}
-          everyone else in{' '}
           <a
             href="https://game.granbluefantasy.jp/#guild/detail/1190185"
             target="_blank"
@@ -105,26 +108,15 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           >
             Fireplace
           </a>{' '}
-          that helped with bug testing and feature requests. (P.S. We&apos;re
+          and the granblue-tools Discord for all of their help with with bug
-          recruiting!) And yoey, but he won&apos;t join our crew.
+          testing, feature requests, and more support. (P.S. We&apos;re
+          recruiting!)
         </p>
       </section>
 
       <section>
         <h2>Contributing</h2>
-        <p>
+
-          This app is open source and licensed under{' '}
-          <a
-            href="https://choosealicense.com/licenses/agpl-3.0/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            GNU AGPLv3
-          </a>
-          . Plainly, that means you can download the source, modify it, and
-          redistribute it if you attribute this project, use the same license,
-          and keep it open source. You can contribute on Github.
-        </p>
         <ul className="Links">
           <li className="LinkItem">
             <Link href="https://github.com/jedmund/hensei-api">
@@ -158,6 +150,25 @@ const AboutPage: React.FC<Props> = (props: Props) => {
           </li>
         </ul>
       </section>
+      <section>
+        <h2>License</h2>
+        <p>
+          This app is open source and licensed under{' '}
+          <a
+            href="https://choosealicense.com/licenses/agpl-3.0/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GNU AGPLv3
+          </a>
+          .
+        </p>
+        <p>
+          Plainly, that means you can download the source, modify it, and
+          redistribute it as long as you attribute this project, use the same
+          license, and keep your derivative work open source as well.
+        </p>
+      </section>
     </div>
   )
 }