diff --git a/components/Button/Button.js b/components/Button/Button.js index e56b77d..19c72ed 100644 --- a/components/Button/Button.js +++ b/components/Button/Button.js @@ -5,30 +5,38 @@ import styles from './Button.module.css'; /** * A reusable component for buttons. * - * @param {boolean} isPrimary - Whether the button is primary or not. Defaults to false. - * @param {boolean} isIcon - Whether the button only contains an icon. Defaults to false. + * @param {boolean} primary - Whether the button is primary or not. Defaults to false. + * @param {boolean} icon - Whether the button only contains an icon. Defaults to false. + * @param {boolean} compact - Make the button more compact. Defaults to false. * @param className - An optional classname. - * @param {string} style - Custom styles to apply to the title. + * @param {string} style - Custom styles to apply to the button. * * @example - * * */ export default function Button(ctx) { - const { children, className, isPrimary, isIcon, onClick, style } = ctx; + const { children, className, primary, icon, compact, onClick, style } = ctx; return ( - diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css index 66e1f80..a7aa31b 100644 --- a/components/Button/Button.module.css +++ b/components/Button/Button.module.css @@ -24,3 +24,7 @@ .button.primary:hover { box-shadow: 0 0 0 1px var(--accent-shade-3) inset; } + +.button.compact { + padding: 9px 18px; +} diff --git a/components/ButtonWidget/ButtonWidget.js b/components/ButtonWidget/ButtonWidget.js new file mode 100644 index 0000000..99c2ea6 --- /dev/null +++ b/components/ButtonWidget/ButtonWidget.js @@ -0,0 +1,36 @@ +import classNames from 'classnames'; +import styles from './ButtonWidget.module.css'; + +import Button from '../Button/Button'; + +/** + * A reusable component for label/button combo widgets (see https://pretendo.network#discord-join). + * + * @param {string} buttonText - The text of the button. + * @param {function} onButtonClick - Function to execute on click of the button. + * @param {boolean} primary - Whether the button is primary. Defaults to false. + * @param {boolean} center - Whether to center the widget. Defaults to false. + * @param className - An optional classname. + * @param {string} style - Custom styles to apply to the component. + * + * @example + * alert(':3')}>Click the button + * + */ + +export default function ButtonWidget(ctx) { + const { children, className, primary, buttonText, center, onButtonClick, style } = ctx; + return ( +
+

{children}

+ +
+ ); +} diff --git a/components/ButtonWidget/ButtonWidget.module.css b/components/ButtonWidget/ButtonWidget.module.css new file mode 100644 index 0000000..52add8a --- /dev/null +++ b/components/ButtonWidget/ButtonWidget.module.css @@ -0,0 +1,20 @@ +.widget { + display: grid; + align-items: center; + grid-template-columns: repeat(2, auto); + gap: 18px; + width: fit-content; + max-width: 100%; + + background: var(--bg-shade-0); + border-radius: 6px; + padding: 18px; + + overflow-x: hidden; +} + +.widget p { + color: var(--text-shade-1); + margin: 0; + margin-right: 5rem; +} diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js index 8363a8c..1608f13 100644 --- a/components/Hero/Hero.js +++ b/components/Hero/Hero.js @@ -15,48 +15,136 @@ export default function Hero() {

Game servers

Recreated. - Pretendo is a free and open source replacement for Nintendos servers for both the 3DS and Wii U, allowing online connectivity for all, even after the original servers are discontinued + + Pretendo is a free and open source replacement for Nintendos servers for both the 3DS and Wii U, + allowing online connectivity for all, even after the original servers are discontinued +
- - + + - - + + - - + + - - + + -
- + - + - + - + - + - - - - - + + + + + diff --git a/components/Logo/Logo.js b/components/Logo/Logo.js new file mode 100644 index 0000000..18618c1 --- /dev/null +++ b/components/Logo/Logo.js @@ -0,0 +1,52 @@ +/** + * The Pretendo P, with or without text. + * + * @param {boolean} text - Renders the text. Defaults to false. + * @param {number} size - Sets the height of the logo. Defaults to 48. + * @param {boolean} center - Centers the element. Defaults to false. + * @param {string} className - Classname to apply to the logo. + * @param {string} style - Custom styles to apply to the logo. + * + * @example + * + * + */ + +export default function Logo(ctx) { + const { text, size = 48, center, className, style } = ctx; + return ( + + + + + + {text && ( + + Pretendo + + )} + + ); +} diff --git a/components/Section/Section.js b/components/Section/Section.js index 2bcd598..059a3cf 100644 --- a/components/Section/Section.js +++ b/components/Section/Section.js @@ -7,6 +7,7 @@ import styles from './Section.module.css'; * * @param {import('react').ComponentClass} className - Custom classes to apply to the section. * @param {import('react').ComponentClass} contentClassName - Custom styles to apply to the content. + * @param {boolean} compact - make the padding more compact. * @param {string} style - Custom styles to apply to the section. * @param {string} id - The id of the section. * @@ -18,10 +19,14 @@ import styles from './Section.module.css'; */ export default function Section(ctx) { - const { id, style, children, className, contentClassName } = ctx; + const { id, style, children, className, compact, contentClassName } = ctx; return ( -
+
{children}
); diff --git a/components/Section/Section.module.css b/components/Section/Section.module.css index 17c97e1..5c044d0 100644 --- a/components/Section/Section.module.css +++ b/components/Section/Section.module.css @@ -1,8 +1,13 @@ .sectionWrapper { + position: relative; display: flex; padding: 180px 0; } +.sectionWrapper.compact { + padding: 90px 0; +} + .sectionWrapper .content { width: 100%; max-width: var(--maxwidth); diff --git a/pages/index.js b/pages/index.js index bec0d00..114d31c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,15 @@ import { getLocale } from '../utils/locale'; import Button from '../components/Button/Button'; +import ButtonWidget from '../components/ButtonWidget/ButtonWidget'; +import Caption from '../components/Caption/Caption'; +import Faq from '../components/Faq/Faq'; +import Hero from '../components/Hero/Hero'; +import Logo from '../components/Logo/Logo'; +import TeamCard from '../components/TeamCard/TeamCard'; import Title from '../components/Title/Title'; import Section from '../components/Section/Section'; import ShowcaseSection from '../components/ShowcaseSection/ShowcaseSection'; -import Faq from '../components/Faq/Faq'; -import Hero from '../components/Hero/Hero'; -import TeamCard from '../components/TeamCard/TeamCard'; import Image from 'next/image'; @@ -18,7 +21,6 @@ import juxtImage from '../public/assets/images/showcase/juxt.png'; import networkImage from '../public/assets/images/showcase/network.png'; import pcmouseImage from '../public/assets/images/showcase/pcmouse.png'; import wiiuchatImage from '../public/assets/images/showcase/wiiuchat.png'; -import Caption from '../components/Caption/Caption'; const showcaseImages = { juxt: juxtImage, @@ -78,7 +80,7 @@ export default function Home({ locale }) { Check out our progress page for an extensive list of our current progress and goals!
+ +
+
+ + + {locale.discordJoin.title} + + {locale.discordJoin.text} +
+ + + {locale.discordJoin.widget.text} + +
); } diff --git a/pages/index.module.css b/pages/index.module.css index 67706f1..f1746a9 100644 --- a/pages/index.module.css +++ b/pages/index.module.css @@ -61,7 +61,7 @@ .thanksAniWrap { position: relative; transform: rotate(-5deg); - margin-top: 2rem; + margin-top: 4rem; } .thanksAniWrap .inner { @@ -114,6 +114,19 @@ right: 100%; } +.discordJoin::after { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 3000px; + height: 1500px; + background: var(--bg-shade-2); + border-radius: 100%; + transform: translate(-50%, 0); + z-index: -1; +} + @keyframes infiniteScroll { 0% { transform: translate3d(0);