<Nav.Item as="li">
<LinkContainer to="/tournaments/6">
<Nav.Link className="p-0 text-muted" href="/tournaments/6">
- Deutsche ALttP Community - Seed der Woche
+ {t('footer.sdw')}
+ </Nav.Link>
+ </LinkContainer>
+ </Nav.Item>
+ <Nav.Item as="li">
+ <LinkContainer to="/tournaments/7">
+ <Nav.Link className="p-0 text-muted" href="/tournaments/7">
+ {t('footer.circus')}
</Nav.Link>
</LinkContainer>
</Nav.Item>
</Nav.Link>
</LinkContainer>
</Nav.Item>
+ <Nav.Item as="li">
+ <Nav.Link
+ className="p-0 text-muted"
+ href="https://alttprasyncs.com/"
+ target="_blank"
+ >
+ {t('footer.alttprasyncs')}
+ </Nav.Link>
+ </Nav.Item>
+ <Nav.Item as="li">
+ <Nav.Link
+ className="p-0 text-muted"
+ href="https://smz3asyncs.com/"
+ target="_blank"
+ >
+ {t('footer.smz3asyncs')}
+ </Nav.Link>
+ </Nav.Item>
</Nav>
</Col>
<Col md={4}>
<Nav.Item as="li">
<Nav.Link
className="p-0 text-muted"
- href="https://discord.gg/hVw5Zeq"
+ href="https://discord.gg/yVdTkEZhk6"
target="_blank"
>
- {t('footer.connect')}
+ {t('footer.stepladder')}
</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
start: 'Start',
upcomingEpisodes: 'Anstehende Rennen',
},
+ front: {
+ circus: 'Mystery Zirkus',
+ eventlist: 'Liste der Veranstaltungen',
+ events: 'Veranstaltungen und Restreams',
+ map: 'ALttP Karte',
+ resources: 'Lernmaterial',
+ schedule: 'Race und Restream Terminplan',
+ sdw: 'Seed der Woche',
+ tech: 'Tricks und Tutorials',
+ title: 'Gemischter Link to the Past und Super Metroid Krams',
+ tournaments: 'Laufende Wettbewerbe',
+ },
footer: {
alttpde: 'Deutscher ALttP Discord',
+ alttprasyncs: 'ALttPR Asyncs',
alttpwiki: 'ALttP Speedrunning Wiki',
+ circus: 'Lost Woods Community - Mystery Zirkus',
competitions: 'Wettbewerbe',
connect: 'Connect Spedruns Discord',
contact: 'Wenn du gerne ein Turnier auf dieser Seite organisieren möchtest, wende dich bitte an holysmoke86 im Discord.',
resources: 'Ressourcen',
restreamCentral: 'Restream Central Discord',
schedule: 'Terminplan',
+ sdw: 'Deutsche ALttP Community - Seed der Woche',
smd: 'Deutscher Super Metroid Discord',
smwiki: 'Super Metroid Speedrunning Wiki',
+ smz3asyncs: 'SMZ3 Asyncs',
+ stepladder: 'ALttPR Step Ladder',
tech: 'ALttP Techniken',
},
general: {
privacy: {
heading: 'Datenschutz',
p1: 'Wir benutzen Cookies und den Browserspeicher, um deine Anmeldung und die ausgewählte Sprache zu speichern, sowie XSRF zu verhinden.',
- p2: 'Wenn du auf den Login Button klickst, wirst du auf eine Anmeldeseite von Discord weitergeleitet. Sofern du dich anmeldest, überträgt Discord und deinen Benutzernamen, Discriminator und ID.',
+ p2: 'Wenn du auf den Login Button klickst, wirst du auf eine Anmeldeseite von Discord weitergeleitet. Sofern du dich anmeldest, überträgt Discord uns deinen Benutzernamen, Discriminator und ID.',
p3: 'Deine Eingaben bei Turnieren werden als Teil des Ergebnisses auf dieser Seite veröffenlicht und ggf. auf dem Discord-Server der entsprechenden Community geteilt.',
},
protocol: {
start: 'Start',
upcomingEpisodes: 'Upcoming races',
},
+ front: {
+ circus: 'Mystery Circus',
+ eventlist: 'List of Events',
+ events: 'Events and Restreams',
+ map: 'ALttP Map',
+ resources: 'Learning Resources',
+ schedule: 'Schedule of Races and Restreams',
+ sdw: 'Seed of the Week',
+ tech: 'Tech and Tutorials',
+ title: 'Various Link to the Past and Super Metroid Stuff',
+ tournaments: 'Active Competitions',
+ },
footer: {
alttpde: 'German ALttP Discord',
+ alttprasyncs: 'ALttPR Asyncs',
alttpwiki: 'ALttP Speedrunning Wiki',
+ circus: 'Lost Woods Community - Mystery Circus',
competitions: 'Competitions',
connect: 'Connect Spedruns Discord',
contact: 'If you would like to organize a Tournament on this site, please contact holysmoke86 on Discord.',
resources: 'Resources',
restreamCentral: 'Restream Central Discord',
schedule: 'Schedule',
+ sdw: 'German ALttP Community - Seed of the Week',
smd: 'German Super Metroid Discord',
smwiki: 'Super Metroid Speedrunning Wiki',
+ smz3asyncs: 'SMZ3 Asyncs',
+ stepladder: 'ALttPR Step Ladder',
tech: 'ALttP Tech',
},
general: {
import React from 'react';
import { Button, Col, Container, Image, Row } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate } from 'react-router-dom';
import CanonicalLinks from '../components/common/CanonicalLinks';
const Front = () => {
const navigate = useNavigate();
+ const { t } = useTranslation();
React.useEffect(() => {
const returnPath = localStorage.getItem('returnPath');
}
}, []);
- return <Container className="mt-5">
+ return <Container className="front-page">
<CanonicalLinks base="/" />
+ <h1>{t('front.title')}</h1>
+ <h2>{t('front.tournaments')}</h2>
<Row>
- <Col md={{ offset: 3, span: 6 }}>
- <Button
- className="front-panel"
- onClick={() => navigate('/tournaments/6')}
- variant="outline-secondary"
- >
+ <Col sm={6}>
+ <Link className="front-panel" to="/tournaments/6">
<Image alt="" className="image" src="/media/alttp/front.png" />
<div className="title">
- ALttPR Weekly
+ {t('front.sdw')}
</div>
- </Button>
+ </Link>
+ </Col>
+ <Col sm={6}>
+ <Link className="front-panel" to="/tournaments/6">
+ <Image alt="" className="image" src="/media/alttp/front.png" />
+ <div className="title">
+ {t('front.circus')}
+ </div>
+ </Link>
+ </Col>
+ </Row>
+ <h2>{t('front.events')}</h2>
+ <Row>
+ <Col sm={6}>
+ <Link className="front-panel" to="/events">
+ <Image alt="" className="image" src="/media/alttp/front.png" />
+ <div className="title">
+ {t('front.eventlist')}
+ </div>
+ </Link>
+ </Col>
+ <Col sm={6}>
+ <Link className="front-panel" to="/schedule">
+ <Image alt="" className="image" src="/media/alttp/front.png" />
+ <div className="title">
+ {t('front.schedule')}
+ </div>
+ </Link>
+ </Col>
+ </Row>
+ <h2>{t('front.resources')}</h2>
+ <Row>
+ <Col sm={6}>
+ <Link className="front-panel" to="/tech">
+ <Image alt="" className="image" src="/media/alttp/front.png" />
+ <div className="title">
+ {t('front.tech')}
+ </div>
+ </Link>
+ </Col>
+ <Col sm={6}>
+ <Link className="front-panel" to="/map/lw">
+ <Image alt="" className="image" src="/media/alttp/front.png" />
+ <div className="title">
+ {t('front.map')}
+ </div>
+ </Link>
</Col>
</Row>
</Container>;
+.front-page {
+ h1 {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ h2 {
+ margin-top: 3em;
+ margin-bottom: 2em;
+ }
+}
.front-panel {
display: block;
+ color: inherit;
font-size: 200%;
font-weight: bold;
- margin: 3em 0;
+ text-align: center;
+ text-decoration: none;
width: 100%;
.image {
border-radius: 2em;
- width: 100%;
+ width: 75%;
height: auto;
}
+ .title {
+ }
+
+ &:focus, &:hover, &:active {
+ text-decoration: underline;
+ .image {
+ border: medium solid $light;
+ box-shadow: 0 0 1em $light;
+ }
+ }
}