pixies

1import InterfaceImage from "@/common/assets/interface.png";
2import "./styles.sass";
3import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
4import {faGithub} from "@fortawesome/free-brands-svg-icons";
5import Features from "@/pages/Home/components/Features";
6import FeatureGrid from "@/pages/Home/components/FeatureGrid";
7import GetStarted from "@/pages/Home/components/GetStarted";
8import Footer from "@/pages/Home/components/Footer";
9import Button from "@/common/components/Button";
10import {useNavigate} from "react-router-dom";
11
12const GITHUB_LINK = "https://github.com/ikhsanddy/pixies";
13
14export const Home = () => {
15    const navigate = useNavigate();
16
17    return (
18        <div className="home-page">
19            <section className="hero">
20                <div className="hero-grid">
21                    <div className="hero-content">
22                        <h1 className="hero-title">
23                            Know Your <span className="highlight">True<svg className="underline-scribble" viewBox="0 0 120 20" preserveAspectRatio="none"><path d="M3,10 Q30,3 60,10 T117,8" /></svg></span> Speed
24                        </h1>
25                        <p className="hero-description">
26                            Monitor your internet connection 24/7 with automated speed tests.
27                            Track download, upload, and ping over time - self-hosted and open source.
28                        </p>
29
30                        <div className="hero-actions">
31                            <Button
32                                text="Get Started"
33                                icon={faArrowRight}
34                                color="primary"
35                                size="lg"
36                                onClick={() => navigate("/install")}
37                            />
38                            <Button
39                                text="GitHub"
40                                icon={faGithub}
41                                color="primary"
42                                variant="outline"
43                                size="lg"
44                                onClick={() => window.open(GITHUB_LINK, "_blank")}
45                            />
46                        </div>
47                    </div>
48
49                    <div className="hero-visual">
50                        <div className="interface-preview">
51                            <img src={InterfaceImage} alt="Pixies Interface" draggable={false}/>
52                        </div>
53                    </div>
54                </div>
55            </section>
56
57            <Features/>
58            <FeatureGrid/>
59            <GetStarted/>
60            <Footer/>
61        </div>
62    )
63}