pixies

1import "./styles.sass";
2import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
3import {faGlobe, faLayerGroup, faBell, faClock, faShieldHalved, faChartLine} from "@fortawesome/free-solid-svg-icons";
4
5const features = [
6    {
7        icon: faGlobe,
8        title: "Multilingual",
9        description: "Available in multiple languages with community translations from around the world.",
10        color: "blue"
11    },
12    {
13        icon: faLayerGroup,
14        title: "Multiple Views",
15        description: "Choose from list, graph, or compact views to visualize your speed data.",
16        color: "purple"
17    },
18    {
19        icon: faBell,
20        title: "Integrations",
21        description: "Get notified via Discord, Telegram, Pushover, webhooks and more.",
22        color: "orange"
23    },
24    {
25        icon: faClock,
26        title: "Flexible Scheduling",
27        description: "Run tests at any interval - from every 5 minutes to every 5 hours.",
28        color: "green"
29    },
30    {
31        icon: faShieldHalved,
32        title: "Privacy First",
33        description: "Self-hosted solution. Your data stays on your server, always.",
34        color: "red"
35    },
36    {
37        icon: faChartLine,
38        title: "Detailed Analytics",
39        description: "Track trends over time and export your data whenever you need.",
40        color: "cyan"
41    }
42];
43
44export const FeatureGrid = () => {
45    return (
46        <section className="feature-grid-section">
47            <div className="feature-grid-header">
48                <span className="feature-grid-label">Why Pixies?</span>
49                <h2>Everything you need to monitor your connection</h2>
50                <p>Powerful features packed into a lightweight, self-hosted application.</p>
51            </div>
52            <div className="feature-grid">
53                {features.map((feature, index) => (
54                    <div key={index} className={`feature-card feature-card--${feature.color}`}>
55                        <div className="feature-icon">
56                            <FontAwesomeIcon icon={feature.icon}/>
57                        </div>
58                        <div className="feature-text">
59                            <h3>{feature.title}</h3>
60                            <p>{feature.description}</p>
61                        </div>
62                    </div>
63                ))}
64            </div>
65        </section>
66    )
67}