diff --git a/components/AboutPage/index.scss b/components/AboutPage/index.scss index 38d21a98..5549f51c 100644 --- a/components/AboutPage/index.scss +++ b/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); + } } diff --git a/components/AboutPage/index.tsx b/components/AboutPage/index.tsx index 0e3c546b..f01437a4 100644 --- a/components/AboutPage/index.tsx +++ b/components/AboutPage/index.tsx @@ -18,8 +18,8 @@ const AboutPage: React.FC = (props: Props) => {

{common('about.segmented_control.about')}

-

- Granblue.team is a tool to save and share team comps for{' '} +

+ Granblue.team is a tool to save and share team compositions for{' '} = (props: Props) => { > Granblue Fantasy - . -

+ , a social RPG from Cygames. +

+

- Start adding to a team and a URL will be created for you to share - wherever you like, no account needed. + To get started, all you have to do is add an item to a team and a URL + will be created for you to share wherever you like, no account needed.

+

- However, if you do make an account, you can save any teams you find - for future reference and keep all of your teams together in one place. + If you do make an account, you can save any teams you find for future + reference and keep all of your teams together in one place.

+ +

Feedback

-

- This is an evolving project so feedback and suggestions are greatly - appreciated! -

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.

+

Feedback and suggestions are greatly appreciated!

= (props: Props) => {

Credits

- Granblue.team was built by{' '} + Granblue.team was built and is maintained by{' '} @jedmund - {' '} - with a lot of help from{' '} + + . +

+

+ Many thanks to{' '} = (props: Props) => { > @tarngerine - . + , who both provided a lot of help and advice as I was ramping up.

- Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, and - everyone else in{' '} + Many thanks also go to everyone in{' '} = (props: Props) => { > Fireplace {' '} - that helped with bug testing and feature requests. (P.S. We're - recruiting!) And yoey, but he won't join our crew. + and the granblue-tools Discord for all of their help with with bug + testing, feature requests, and more support. (P.S. We're + recruiting!)

Contributing

-

- This app is open source and licensed under{' '} - - GNU AGPLv3 - - . 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. -

+
  • @@ -158,6 +150,25 @@ const AboutPage: React.FC = (props: Props) => {
+
+

License

+

+ This app is open source and licensed under{' '} + + GNU AGPLv3 + + . +

+

+ 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. +

+
) }