Skip to content

Commit 262d750

Browse files
javanangjavanang
committed
switching branch
1 parent 1e089d7 commit 262d750

File tree

4 files changed

+161
-11
lines changed

4 files changed

+161
-11
lines changed

‎ksqLight/src/components/Welcomepage.js

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,61 @@
11
import React from "react";
2-
import { Typography, createTheme, Box } from "@mui/material";
2+
import { Typography, createTheme, Box, Fade, Button } from "@mui/material";
33
import { useNavigate } from "react-router-dom";
44

55
export const Welcomepage = () => {
6-
const navigate = useNavigate();
6+
// const navigate = useNavigate();
77

8-
const navHome = () => {
9-
navigate("/dashboard");
10-
};
8+
// const navHome = () => {
9+
// navigate("/dashboard");
10+
// };
1111

1212
return (
13-
<Box class="hero">
14-
<Box class="diagonal-hero-bg">
15-
<Box class="stars">
16-
<Box class="small"></Box>
17-
<Box class="medium"></Box>
18-
<Box class="big"></Box>
13+
<Box>
14+
<Box className="diagonal-hero-bg">
15+
<Box className="stars">
16+
<Box className="small"></Box>
17+
<Box className="medium"></Box>
18+
<Box className="big"></Box>
1919
</Box>
2020
</Box>
21+
<Box sx={{
22+
display: "flex",
23+
height: "100vh",
24+
flexDirection: "column",
25+
alignItems: "center",
26+
justifyContent: "center"
27+
}}>
28+
{/* <Fade in={true} timeout={2000} >
29+
<Typography
30+
sx={{
31+
fontSize: "75px",
32+
color: "#f3e5f5"
33+
}}
34+
>
35+
Welcome
36+
</Typography>
37+
</Fade> */}
38+
<Fade in={true} timeout={2000} >
39+
<Typography
40+
sx={{
41+
fontSize: "165px",
42+
color: "#f3e5f5"
43+
}}
44+
>ksqLight.</Typography>
45+
</Fade>
46+
<Fade in={true} timeout={2000} style={{ transitionDelay: `1000ms` }}>
47+
<Button variant="outlined" sx={{ color: "#f3e5f5" }}>Get Started</Button>
48+
{/* <Typography
49+
sx={{
50+
fontSize: "25px",
51+
color: "#f3e5f5"
52+
}}
53+
>to get started, enter your prometheus URL below</Typography> */}
54+
</Fade>
55+
</Box>
2156
</Box>
57+
58+
2259
);
2360
};
2461

‎ksqLight/src/index.scss renamed to ‎ksqLight/src/index.css

File renamed without changes.

‎ksqLight/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4+
import './style.scss';
45
import App from './App';
56

67
const root = ReactDOM.createRoot(document.getElementById('root'));

‎ksqLight/src/style.scss

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
2+
.hero {
3+
display: inline-block;
4+
width: 100%;
5+
height: 100vh;
6+
position: relative;
7+
8+
}
9+
.diagonal-hero-bg {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
width: 100%;
14+
height: 100%;
15+
background: #2b5876; /* fallback for old browsers */
16+
background: -webkit-linear-gradient(to right, #4e4376, #2b5876); /* Chrome 10-25, Safari 5.1-6 */
17+
background: linear-gradient(to right, #4e4376, #2b5876); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
18+
19+
z-index: -1;
20+
// clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
21+
}
22+
23+
// creates randomized star sizes
24+
@function stars($n) {
25+
$value: '#{random(2000)}px #{random(2000)}px #767676';
26+
@for $i from 2 through $n {
27+
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #767676';
28+
}
29+
@return unquote($value);
30+
}
31+
32+
// store random stars
33+
$stars-small: stars(700);
34+
$stars-medium: stars(200);
35+
$stars-big: stars(100);
36+
37+
38+
.stars {
39+
z-index: -1;
40+
overflow: hidden;
41+
top: 0;
42+
left: 0;
43+
width: 100%;
44+
height: 95vh;
45+
transition: opacity 1s ease-in-out;
46+
}
47+
48+
.stars > .small {
49+
width: 1px;
50+
height: 1px;
51+
background: transparent;
52+
box-shadow: $stars-small;
53+
animation: starsAnimation 50s linear infinite;
54+
55+
&:after {
56+
content: " ";
57+
position: absolute;
58+
top: 2000px;
59+
width: 1px;
60+
height: 1px;
61+
background: transparent;
62+
box-shadow: $stars-small;
63+
}
64+
}
65+
66+
.stars > .medium {
67+
width: 2px;
68+
height: 2px;
69+
background: transparent;
70+
box-shadow: $stars-medium;
71+
animation: starsAnimation 100s linear infinite;
72+
73+
&:after {
74+
content: " ";
75+
position: absolute;
76+
top: 2000px;
77+
width: 2px;
78+
height: 2px;
79+
background: transparent;
80+
box-shadow: $stars-medium;
81+
}
82+
}
83+
84+
.stars > .big {
85+
width: 3px;
86+
height: 3px;
87+
background: transparent;
88+
box-shadow: $stars-big;
89+
border-radius: 100%;
90+
animation: starsAnimation 150s linear infinite;
91+
92+
&:after {
93+
content: " ";
94+
position: absolute;
95+
top: 2000px;
96+
width: 3px;
97+
height: 3px;
98+
background: transparent;
99+
box-shadow: $stars-big;
100+
border-radius: 100%;
101+
}
102+
}
103+
104+
// swap from/to values to reverse animation
105+
@keyframes starsAnimation {
106+
from {
107+
transform: translateY(-2000px);
108+
}
109+
to {
110+
transform: translateY(0px);
111+
}
112+
}

0 commit comments

Comments
 (0)