gps
diff --git a/Components/Card.js b/Components/Card.js
index c218093..d8c11f6 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -15,7 +15,7 @@
<img alt="" className={Styles.backgroundImage} src={`/Waves/${this.props.wave}.svg`} />
<div className={Styles.panel}>
<div className={Styles.titleContainer}>
- <img alt="Project icon" className={Styles.image} src={"/Icons/" + this.props.wave + ".svg"} />
+ <img alt="Project icon" className={Styles.image} src={"/Icons/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
<h1 className={Styles.title}>{this.props.title}</h1>
</div>
<p className={Styles.subtext}>{this.props.subtext}</p>
diff --git a/pages/gps.js b/pages/gps.js
index 4a52ff1..c7a8b1c 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -2,7 +2,6 @@
import Header from '../Components/Header'
import AutoSpacing from '../Components/AutoSpacing'
import SectionHeading from '../Components/SectionHeading'
-import Subheading from '../Components/Subheading'
import Paragraph from '../Components/Paragraph'
import CardRow from '../Components/CardRow'
@@ -15,12 +14,52 @@
gradient={["78ECF2", "71AFE5"]}
wave="GS"
buttons={[
+ {color: "71AFE5", buttonText: "FFFFFF", link: "#features", text: "Features"},
{color: "71AFE5", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
{color: "6576CC", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
hideArrow={true}
/>
<AutoSpacing>
+ <SectionHeading id="features">Features</SectionHeading>
+ <CardRow>
+ <Card
+ icon="GPS/players"
+ title="Lots of friends?"
+ subtext="You probably don't have 50 friends - But if you did, you can play with every one of them at the same time"
+ wave="GS"
+ gradient={["78ECF2", "71AFE5"]}
+ />
+ <Card
+ icon="GPS/cards"
+ title="2000+ cards"
+ subtext="Enjoy games with over 2000 cards, written for you to insult others"
+ wave="CF"
+ gradient={["71AFE5", "6576CC"]}
+ />
+ <Card
+ icon="GPS/customisation"
+ title="Customisation."
+ subtext="Customise every setting of your game and be as pedantic as you wish"
+ wave="HY"
+ gradient={["424242", "8D8D8D"]}
+ />
+ <Card
+ icon="GPS/time"
+ title="Patience is a virtue"
+ subtext="But you don't have a lot of it - Your friends may be slow at picking cards, but you don't have to live with it"
+ wave="RM"
+ gradient={["F27878", "D96B6B"]}
+ />
+ <Card
+ icon="GPS/shuffles"
+ title="Shuffles"
+ subtext={`Replace your worst cards with new ones because \"The bot is unfair
+ and always gives me the worst cards and everyone else is better at the game than me\"`}
+ wave="CL"
+ gradient={["C4C4C4", "8D8D8D"]}
+ />
+ </CardRow>
<SectionHeading id="commands">Commands</SectionHeading>
<Paragraph><code>$getprefix</code>: Shows the bots prefix in the current guild.</Paragraph>
<Paragraph><code>$info</code>: View some information about the bot's owners.</Paragraph>
diff --git a/styles/card.module.css b/styles/card.module.css
index 6e96be6..bca4945 100644
--- a/styles/card.module.css
+++ b/styles/card.module.css
@@ -48,6 +48,7 @@
font-size: 30px;
margin-left: 1vw;
line-height: 24px;
+ max-lines: 2;
color: var(--card-text-color);
}
@@ -58,6 +59,7 @@
.subtext {
width: 100%;
+ padding-inline: 10px;
text-align: center;
color: var(--card-text-color);
}