Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-09-12 10:57:50 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add Discord Join section, minor changes

Browse Source
This commit is contained in:
gitlimes
2023-08-29 00:37:01 +02:00
parent 2e15de73de
commit d188eed805
10 changed files with 288 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/Button/Button.js
View File

@@ -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
* <Button isPrimary={true} onClick={(e) => alert(e.target.textContent)}>Pizza</Title>
* <Button primary onClick={(e) => alert(e.target.textContent)}>Pizza</Button>
*
*/
export default function Button(ctx) {
const { children, className, isPrimary, isIcon, onClick, style } = ctx;
const { children, className, primary, icon, compact, onClick, style } = ctx;
return (
<CoolHover
bgColor={isPrimary ? 'var(--accent-shade-0)' : 'var(--bg-shade-3)'}
hoverColor={isPrimary ? 'var(--accent-shade-1)' : 'var(--bg-shade-3-5)'}
bgColor={primary ? 'var(--accent-shade-0)' : 'var(--bg-shade-3)'}
hoverColor={primary ? 'var(--accent-shade-1)' : 'var(--bg-shade-3-5)'}
style={{
borderRadius: '6px',
width: 'fit-content',
height: 'fit-content',
...style
...style,
}}
>
<button className={classNames(styles.button, { [styles.primary]: isPrimary, [styles.icon]: isIcon }, className)} onClick={onClick}>
<button
className={classNames(
styles.button,
{ [styles.primary]: primary, [styles.icon]: icon, [styles.compact]: compact },
className
)}
onClick={onClick}
>
{children}
</button>
</CoolHover>

4
components/Button/Button.module.css
View File

@@ -24,3 +24,7 @@
.button.primary:hover {
box-shadow: 0 0 0 1px var(--accent-shade-3) inset;
}
.button.compact {
padding: 9px 18px;
}

36
components/ButtonWidget/ButtonWidget.js Normal file
View File

@@ -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
* <ButtonWidget primary buttonText={'click for :3'} onButtonClick={(e) => alert(':3')}>Click the button</ButtonWidget>
*
*/
export default function ButtonWidget(ctx) {
const { children, className, primary, buttonText, center, onButtonClick, style } = ctx;
return (
<div
className={classNames(styles.widget, className)}
style={{
...style,
}}
>
<p>{children}</p>
<Button onClick={onButtonClick} primary={primary} compact>
{buttonText}
</Button>
</div>
);
}

20
components/ButtonWidget/ButtonWidget.module.css Normal file
View File

@@ -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;
}

128
components/Hero/Hero.js
View File

@@ -15,48 +15,136 @@ export default function Hero() {
<div className={styles.info}>
<h3 className={styles.subtitle}>Game servers</h3>
<Title element={'h1'}>Recreated.</Title>
<Caption>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</Caption>
<Caption>
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
</Caption>
<div className={styles.buttons}>
<a href='#showcase'>
<Button isPrimary={true}>Read more</Button>
<a href="#showcase">
<Button primary>Read more</Button>
</a>
<a href='https://discord.gg/pretendo' aria-label='A link to our Discord server'>
<Button isIcon={true}><DiscordLogo size={32} weight="fill" /></Button>
<a href="https://discord.gg/pretendo" aria-label="A link to our Discord server">
<Button icon>
<DiscordLogo size={32} weight="fill" />
</Button>
</a>
<a href='https://github.com/pretendonetwork' aria-label='A link to our GitHub organization'>
<Button isIcon={true}><GithubLogo size={32} weight="fill" /></Button>
<a href="https://github.com/pretendonetwork" aria-label="A link to our GitHub organization">
<Button icon>
<GithubLogo size={32} weight="fill" />
</Button>
</a>
<a href='/account/upgrade' aria-label='A link to our account upgrade page'>
<Button isIcon={true}><Heart size={32} weight="fill" /></Button>
<a href="/account/upgrade" aria-label="A link to our account upgrade page">
<Button icon>
<Heart size={32} weight="fill" />
</Button>
</a>
</div>
</div>
<div className={styles.images}>
<div className={styles.lightCircle}>
<svg alt="" xmlns="http://www.w3.org/2000/svg" width="839.371" height="893.406" viewBox="0 0 839.371 893.406">
<svg
alt=""
xmlns="http://www.w3.org/2000/svg"
width="839.371"
height="893.406"
viewBox="0 0 839.371 893.406"
>
<g id="deco" transform="translate(-1064.958 -142.958)">
<g id="Ellipse_12" data-name="Ellipse 12" transform="translate(1314 265)" fill="none" stroke="#9d6ff3" strokeWidth="26">
<g
id="Ellipse_12"
data-name="Ellipse 12"
transform="translate(1314 265)"
fill="none"
stroke="#9d6ff3"
strokeWidth="26"
>
<circle cx="56" cy="56" r="56" stroke="none"></circle>
<circle cx="56" cy="56" r="69" fill="none"></circle>
</g>
<g id="Ellipse_22" data-name="Ellipse 22" transform="translate(1361 771)" fill="none" stroke="#59c9a5" strokeWidth="26">
<g
id="Ellipse_22"
data-name="Ellipse 22"
transform="translate(1361 771)"
fill="none"
stroke="#59c9a5"
strokeWidth="26"
>
<circle cx="77" cy="77" r="77" stroke="none"></circle>
<circle cx="77" cy="77" r="90" fill="none"></circle>
</g>
<g id="Ellipse_13" data-name="Ellipse 13" transform="translate(1801.405 273.601) rotate(1)" fill="none" stroke="#9d6ff3" strokeWidth="26">
<g
id="Ellipse_13"
data-name="Ellipse 13"
transform="translate(1801.405 273.601) rotate(1)"
fill="none"
stroke="#9d6ff3"
strokeWidth="26"
>
<circle cx="23" cy="23" r="23" stroke="none"></circle>
<circle cx="23" cy="23" r="36" fill="none"></circle>
</g>
<g id="Ellipse_23" data-name="Ellipse 23" transform="matrix(0.839, -0.545, 0.545, 0.839, 1651.184, 609.237)" fill="none" stroke="#25224f" strokeWidth="26">
<g
id="Ellipse_23"
data-name="Ellipse 23"
transform="matrix(0.839, -0.545, 0.545, 0.839, 1651.184, 609.237)"
fill="none"
stroke="#25224f"
strokeWidth="26"
>
<circle cx="78.5" cy="78.5" r="78.5" stroke="none"></circle>
<circle cx="78.5" cy="78.5" r="91.5" fill="none"></circle>
</g>
<circle className={styles.animateDot} id="Ellipse_15" data-name="Ellipse 15" cx="23" cy="23" r="23" transform="translate(1586.473 353) rotate(-45)" fill="#9d6ff3"></circle>
<ellipse className={styles.animateDot} id="Ellipse_21" data-name="Ellipse 21" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1588.958 188.514) rotate(-45)" fill="#9d6ff3"></ellipse>
<ellipse id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"></ellipse>
<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"></ellipse>
<circle className={styles.animateDot} id="Ellipse_16" data-name="Ellipse 16" cx="23" cy="23" r="23" transform="translate(1169.473 524) rotate(-45)" fill="#59c9a5"></circle>
<circle
className={styles.animateDot}
id="Ellipse_15"
data-name="Ellipse 15"
cx="23"
cy="23"
r="23"
transform="translate(1586.473 353) rotate(-45)"
fill="#9d6ff3"
></circle>
<ellipse
className={styles.animateDot}
id="Ellipse_21"
data-name="Ellipse 21"
cx="11"
cy="10.5"
rx="11"
ry="10.5"
transform="translate(1588.958 188.514) rotate(-45)"
fill="#9d6ff3"
></ellipse>
<ellipse
id="Ellipse_25"
data-name="Ellipse 25"
cx="11"
cy="10.5"
rx="11"
ry="10.5"
transform="translate(1143.958 1021.514) rotate(-45)"
fill="#9d6ff3"
></ellipse>
<ellipse
id="Ellipse_26"
data-name="Ellipse 26"
cx="11"
cy="10.5"
rx="11"
ry="10.5"
transform="translate(1064.958 158.514) rotate(-45)"
fill="#9d6ff3"
></ellipse>
<circle
className={styles.animateDot}
id="Ellipse_16"
data-name="Ellipse 16"
cx="23"
cy="23"
r="23"
transform="translate(1169.473 524) rotate(-45)"
fill="#59c9a5"
></circle>
</g>
</svg>

52
components/Logo/Logo.js Normal file
View File

@@ -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
* <Logo />
*
*/
export default function Logo(ctx) {
const { text, size = 48, center, className, style } = ctx;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox={text ? '0 0 120 39.88' : '0 0 39.88 39.88'}
aria-label="Pretendo"
height={size}
width={text ? size * 3 : size}
className={className}
style={{
display: 'block',
margin: center ? '0 auto' : 'unset',
...style,
}}
>
<g fill="#9d6ff3">
<path d="M13.13 6.34c-1.06.55-.13 2.14.92 1.59a12.37 12.37 0 0 1 8.8-.57 10.83 10.83 0 0 1 6.33 4.16c.65 1 2.23.08 1.59-.92-3.49-5.4-12.1-7.13-17.64-4.26Z" />
<path d="M33.39 8.33a15.56 15.56 0 0 0-9.14-6.16 17.54 17.54 0 0 0-12.65.9c-1.05.56-.13 2.14.92 1.59 3.41-1.79 7.6-1.71 11.21-.72 3.1.85 6.27 2.55 8.04 5.31.66 1.02 2.24.1 1.62-.92ZM19.3 8.81a10.72 10.72 0 0 0-6.7 2.3h-3a1.34 1.34 0 0 0-1.38 1.28v24.46a1.43 1.43 0 0 0 1.39 1.39h3.02a1.37 1.37 0 0 0 1.3-1.39V29.4A11 11 0 1 0 19.3 8.81Zm0 17.18a6.21 6.21 0 1 1 6.21-6.2 6.22 6.22 0 0 1-6.2 6.2Z" />
</g>
{text && (
<text
fill="#fff"
font-family="Poppins-Bold, Poppins"
font-size="17"
font-weight="700"
x="100%"
y="50%"
text-anchor="end"
alignment-baseline="central"
dominant-baseline="central"
>
Pretendo
</text>
)}
</svg>
);
}

9
components/Section/Section.js
View File

@@ -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 (
<section className={classNames(styles.sectionWrapper, className)} id={id} style={style}>
<section
className={classNames(styles.sectionWrapper, { [styles.compact]: compact }, className)}
id={id}
style={style}
>
<div className={classNames(styles.content, contentClassName)}>{children}</div>
</section>
);

5
components/Section/Section.module.css
View File

@@ -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);

30
pages/index.js
View File

@@ -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!
</Caption>
<Button
isPrimary
primary
onClick={(e) => {
e.preventDefault();
router.push('/progress');
@@ -162,6 +164,24 @@ export default function Home({ locale }) {
</div>
</div>
</Section>
<Section className={styles.discordJoin} style={{ marginTop: '4rem' }}>
<Section compact>
<Logo center size={96} style={{ marginBottom: '4rem' }} />
<Title center id="discord-join">
{locale.discordJoin.title}
</Title>
<Caption center>{locale.discordJoin.text}</Caption>
</Section>
<ButtonWidget
primary
buttonText={locale.discordJoin.widget.button + " TODO: ADD LINK"}
style={{ margin: '0 auto 4rem' }}
>
{locale.discordJoin.widget.text}
</ButtonWidget>
</Section>
</main>
);
}

15
pages/index.module.css
View File

@@ -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);