diff --git a/public/index.html b/public/index.html index 56aa126..1a2e83b 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,22 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + + vBytes Website diff --git a/src/App.js b/src/App.js index 71f8446..5a3b07d 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import Glow from './components/Glow'; import InventorySection from './blocks/InventorySection'; import MemberSection from './blocks/MemberSection'; import PartnersSection from './blocks/PartnersSection'; +import LANsection from './blocks/LANsection'; function App() { const [opacity, setOpacity] = useState(1); @@ -42,6 +43,7 @@ function App() { + diff --git a/src/assets/img/stopmotion.jpg b/src/assets/img/stopmotion.jpg new file mode 100644 index 0000000..1f553fd Binary files /dev/null and b/src/assets/img/stopmotion.jpg differ diff --git a/src/blocks/AboutSection.jsx b/src/blocks/AboutSection.jsx index 69fea80..d73ca4a 100644 --- a/src/blocks/AboutSection.jsx +++ b/src/blocks/AboutSection.jsx @@ -53,7 +53,7 @@ const AboutSection = () => {

LAN

24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar.

-

LANet har funnits i drygt 10 år och bruka samla runt 100 deltagare.

+

LANet har funnits i drygt 5 år och bruka samla runt 100 deltagare.

Nästa LAN

diff --git a/src/blocks/LANsection.jsx b/src/blocks/LANsection.jsx new file mode 100644 index 0000000..d31f8b6 --- /dev/null +++ b/src/blocks/LANsection.jsx @@ -0,0 +1,21 @@ +import Timer from '../components/TimerAnmalan'; + +const LANsection = () => { + + return ( +
+
+ +

LAN 2026

+

2 mars kl 19.30 öppnar anmälan

+ +
+
+); +}; + +export default LANsection; + diff --git a/src/components/Timer.jsx b/src/components/Timer.jsx index 34ad0ab..d2404d5 100644 --- a/src/components/Timer.jsx +++ b/src/components/Timer.jsx @@ -37,7 +37,7 @@ class Timer extends React.Component {

{days < 10 ? `0${days}` : days}:{hours < 10 ? `0${hours}` : hours}: - {minutes}:{seconds < 10 ? `0${seconds}` : seconds} + {minutes < 10 ? `0${minutes}`: minutes}:{seconds < 10 ? `0${seconds}` : seconds}

); diff --git a/src/components/TimerAnmalan.jsx b/src/components/TimerAnmalan.jsx new file mode 100644 index 0000000..cc5e2b3 --- /dev/null +++ b/src/components/TimerAnmalan.jsx @@ -0,0 +1,47 @@ +import React from "react"; + +class Timer extends React.Component { + state = { + minutes: 0, + seconds: 0, + hours: 0, + days: 0 + }; + + componentDidMount() { + let date = new Date('2026-03-02T19:30:00'); + date.setDate(date.getDate()); + let countDownDate = new Date(date).getTime(); + console.log(countDownDate); + setInterval(() => { + let now = new Date().getTime(); + let distance = countDownDate - now; + let days = Math.floor(distance / (1000 * 60 * 60 * 24)); + let hours = Math.floor( + (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) + ); + let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + let seconds = Math.floor((distance % (1000 * 60)) / 1000); + this.setState({ + minutes: minutes, + days: days, + hours: hours, + seconds: seconds + }); + }, 1000); + } + + render() { + const { minutes, seconds, hours, days } = this.state; + return ( +
+

+ {days < 10 ? `0${days}` : days}:{hours < 10 ? `0${hours}` : hours}: + {minutes < 10 ? `0${minutes}`: minutes}:{seconds < 10 ? `0${seconds}` : seconds} +

+
+ ); + } +} + +export default Timer; \ No newline at end of file diff --git a/src/css/app.scss b/src/css/app.scss index 5aa9d08..82bb507 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -11,6 +11,7 @@ @use './blocks/start-section.scss'; @use './blocks/inventory-section.scss'; @use './blocks/partners-section.scss'; +@use './blocks/lan-section.scss'; //Components @use './components/glow.scss'; diff --git a/src/css/blocks/_lan-section.scss b/src/css/blocks/_lan-section.scss new file mode 100644 index 0000000..7ae4218 --- /dev/null +++ b/src/css/blocks/_lan-section.scss @@ -0,0 +1,51 @@ +.lan-section { + width: 100%; + padding-bottom: 300px; + &__container { + width: 100%; + max-width: 1440px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 90%; + gap: 30px; + margin: 0 auto; + z-index: 20; + position: relative; + } + + h2 { + font-size: 48px; + margin-bottom: 0; + text-align: center; + } + h3 { + font-size: 32px; + text-align: center; + } + + .timer { + p { + text-align: center; + font-size:50px; + font-family: 'Jersey-Regular'; + letter-spacing: 7px; + margin: 0; + margin-bottom: 20px; + font-variant-numeric: tabular-nums; + } + } + + &__link-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + a { + pointer-events: none; + opacity: 0.4; + } + } +} \ No newline at end of file