1- 'use client'
2- import { Box , Button , Card , Container , Stack , Typography } from "@mui/material" ;
3- import { TypeAnimation } from "react-type-animation" ;
4- import Countdown from "./Countdown.jsx" ;
5- import { CalendarMonthOutlined , Camera , CameraAlt , LocationOn } from "@mui/icons-material" ;
6- import { useEffect , useState } from "react" ;
7- import { MeshContainer } from "./MeshContainer/MeshContainer" ;
1+ "use client" ;
2+ import { Button , Card , Container , Stack , Typography } from "@mui/material" ;
3+ import { TypeAnimation } from "react-type-animation" ;
4+ import { Article , CalendarMonthOutlined } from "@mui/icons-material" ;
5+ import { useEffect , useState } from "react" ;
6+ import { MeshContainer } from "./MeshContainer/MeshContainer" ;
87
98function LandingImage ( ) {
9+ const [ timeLeft , setTimeLeft ] = useState ( calculateTimeDiff ( ) ) ;
1010
11- const [ timeLeft , setTimeLeft ] = useState ( calculateTimeDiff ( ) )
11+ function calculateTimeDiff ( ) {
12+ return new Date ( new Date ( 2025 , 2 , 21 ) - new Date ( ) ) ;
13+ }
1214
13- function calculateTimeDiff ( ) {
14- return new Date ( new Date ( 2025 , 2 , 21 ) - new Date ( ) )
15- }
16-
17- useEffect ( ( ) => {
18- const i = setInterval ( ( ) => {
19- setTimeLeft ( calculateTimeDiff ( ) )
20- } , 1000 ) ;
21- return ( ) => clearInterval ( i ) ;
22- } , [ ] ) ; //dependency, if end changes remount
23-
24- return (
25- < MeshContainer >
26-
27- < Container sx = { { height : "100%" , width : "100%" , display : "flex" , flexDirection : "column" , justifyContent : "space-around" , minHeight : "60vh" } } >
28- < img src = { "/HackHPI_white.svg" } width = { "150rem" } alt = { "HackHPI Logo" } />
29- < div >
30- < Typography sx = { { color : "white" } } variant = { "h2" } component = { "h1" } >
31- Medical Edition
32- </ Typography >
33- < Typography variant = { "h4" } component = { "h2" } >
34- < TypeAnimation
35- preRenderFirstString = { true }
36- sequence = { [
37- 500 ,
38- 'For better' ,
39- 500 ,
40- 'For better health' , // initially rendered starting point
41- 1000 ,
42- 'For better diagnosis' , // initially rendered starting point,
43- 1000 ,
44- 'For better treatments' , // initially rendered starting point
45- 1000 ,
46- `See you in ${ Math . round ( timeLeft / ( 24 * 60 * 60 * 1000 ) ) } ,
47- 10000 ,
48- ] }
49- speed = { 50 }
50- repeat = { Infinity }
51- />
52- </ Typography >
53- </ div >
54- < Stack direction = { "row" } spacing = { 3 } useFlexGap flexWrap = "wrap" >
55- < Button
56- variant = { "contained" }
57- sx = { {
58- borderWidth : "1rem" ,
59- width : "13rem" ,
60- height : "3.5rem" ,
61- fontSize : "1rem" ,
62- } }
63- color = { "primary" }
64- startIcon = { < CameraAlt /> }
65- onClick = { ( ) => document . getElementById ( "images" ) . scrollIntoView ( {
66- behavior : "smooth" ,
67- block : "start" ,
68- inline : "nearest"
69- } ) }
70- >
71- Images
72- </ Button >
73- < Card sx = { { height : "3.5rem" , justifyContent : "center" , display : "flex" } } >
74- < Stack direction = { "row" } alignItems = { "center" } display = { "flex" }
75- sx = { { height : "100%" , paddingRight : "1.25rem" , paddingLeft : "1.25rem" , } } spacing = { 2 } >
76- < CalendarMonthOutlined sx = { { fontSize : "1.5rem" , color : "text.disabled" } } />
77- < Typography sx = { { fontSize : "1rem" } } color = { "text.disabled" } noWrap >
78- 21th - 22th March 2025
79- </ Typography >
80- </ Stack >
81- </ Card >
82- </ Stack >
83- </ Container >
84- </ MeshContainer >
85- )
15+ useEffect ( ( ) => {
16+ const i = setInterval ( ( ) => {
17+ setTimeLeft ( calculateTimeDiff ( ) ) ;
18+ } , 1000 ) ;
19+ return ( ) => clearInterval ( i ) ;
20+ } , [ ] ) ; //dependency, if end changes remount
8621
22+ return (
23+ < MeshContainer >
24+ < Container
25+ sx = { {
26+ height : "100%" ,
27+ width : "100%" ,
28+ display : "flex" ,
29+ flexDirection : "column" ,
30+ justifyContent : "space-around" ,
31+ minHeight : "60vh" ,
32+ } }
33+ >
34+ < img src = { "/HackHPI_white.svg" } width = { "150rem" } alt = { "HackHPI Logo" } />
35+ < div >
36+ < Typography sx = { { color : "white" } } variant = { "h2" } component = { "h1" } >
37+ Medical Edition
38+ </ Typography >
39+ < Typography variant = { "h4" } component = { "h2" } >
40+ < TypeAnimation
41+ preRenderFirstString = { true }
42+ sequence = { [
43+ 500 ,
44+ "For better" ,
45+ 500 ,
46+ "For better health" , // initially rendered starting point
47+ 1000 ,
48+ "For better diagnosis" , // initially rendered starting point,
49+ 1000 ,
50+ "For better treatments" , // initially rendered starting point
51+ 1000 ,
52+ `See you in ${ Math . round ( timeLeft / ( 24 * 60 * 60 * 1000 ) ) } ,
53+ 10000 ,
54+ ] }
55+ speed = { 50 }
56+ repeat = { Infinity }
57+ />
58+ </ Typography >
59+ </ div >
60+ < Stack direction = { "row" } spacing = { 3 } useFlexGap flexWrap = "wrap" >
61+ < Button
62+ variant = { "contained" }
63+ sx = { {
64+ borderWidth : "1rem" ,
65+ width : "13rem" ,
66+ height : "3.5rem" ,
67+ fontSize : "1rem" ,
68+ } }
69+ color = { "primary" }
70+ startIcon = { < Article /> }
71+ onClick = { ( ) =>
72+ document . getElementById ( "signupForm" ) . scrollIntoView ( {
73+ behavior : "smooth" ,
74+ block : "start" ,
75+ inline : "nearest" ,
76+ } )
77+ }
78+ >
79+ Registration
80+ </ Button >
81+ < Card
82+ sx = { { height : "3.5rem" , justifyContent : "center" , display : "flex" } }
83+ >
84+ < Stack
85+ direction = { "row" }
86+ alignItems = { "center" }
87+ display = { "flex" }
88+ sx = { {
89+ height : "100%" ,
90+ paddingRight : "1.25rem" ,
91+ paddingLeft : "1.25rem" ,
92+ } }
93+ spacing = { 2 }
94+ >
95+ < CalendarMonthOutlined
96+ sx = { { fontSize : "1.5rem" , color : "text.disabled" } }
97+ />
98+ < Typography
99+ sx = { { fontSize : "1rem" } }
100+ color = { "text.disabled" }
101+ noWrap
102+ >
103+ 21th - 22th March 2025
104+ </ Typography >
105+ </ Stack >
106+ </ Card >
107+ </ Stack >
108+ </ Container >
109+ </ MeshContainer >
110+ ) ;
87111}
88112
89- export default LandingImage
113+ export default LandingImage ;
0 commit comments