Created the Home.jsx page

This commit is contained in:
Mathias Wagner
2024-03-09 14:39:41 +01:00
parent 315e77860e
commit dd80f1a1f9

View 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>
)
}