mirror of
https://github.com/gnmyt/myspeed.git
synced 2026-02-11 16:19:11 -06:00
Created the Home.jsx page
This commit is contained in:
40
web/src/pages/Home/Home.jsx
Normal file
40
web/src/pages/Home/Home.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import InterfaceImage from "@/common/assets/interface.png";
|
||||
import Logo from "@/common/assets/logo192.png";
|
||||
import "./styles.sass";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faArrowDown, faArrowUp} from "@fortawesome/free-solid-svg-icons";
|
||||
import Features from "@/pages/Home/components/Features";
|
||||
|
||||
const COLORS = ["#45C65A", "#E58A00", "#EC5555"];
|
||||
|
||||
const chooseRandomColor = () => COLORS[Math.floor(Math.random() * COLORS.length)];
|
||||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<div className="home-page">
|
||||
|
||||
<div className="info-area">
|
||||
<img src={Logo} alt="Logo"/>
|
||||
<div className="title-area">
|
||||
<h1>MySpeed</h1>
|
||||
<h2>Speedtest automation made simple</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Array(5).fill(0).map((_, index) => (
|
||||
<div className="flying-icons" key={index}>
|
||||
<FontAwesomeIcon icon={faArrowDown} style={{color: chooseRandomColor(),animationDelay: `${index * 0.5}s`}}/>
|
||||
<FontAwesomeIcon icon={faArrowUp} style={{color: chooseRandomColor(),animationDelay: `${index * 0.5}s`}}/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
<div className="interface-image">
|
||||
<img src={InterfaceImage} alt="Interface"/>
|
||||
</div>
|
||||
|
||||
<Features />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user