import type {Route} from "../../../.react-router/types/app/pages/dashboard/+types/Home";
import {Badge, Button, Card, em, Grid, Group, Image, Modal, PasswordInput, Stack, Table, Text} from "@mantine/core";
import React from "react";

export function meta({}: Route.MetaArgs) {
    return [
        { title: "Home" },
        { name: "description", content: "Dashboard Home" },
    ];
}

export default function Component() {
    return (
        <Group justify="center" align="center">
            <Stack align="center" justify="center">
                <Image src="/icon.png" w={400} h={400}/>
                <Text fw={700} size={em(28)}>Performance Comparison of Communication Protocols in Microservices</Text>
                <Text fw={500} size="xl">
                    <Text
                        size="xl"
                        fw={900}
                        variant="gradient"
                        gradient={{ from: 'teal', to: 'lime', deg: 90 }}
                        span
                    >
                        HTTP RESTful
                    </Text> vs <Text
                        size="xl"
                        fw={900}
                        variant="gradient"
                        gradient={{ from: 'yellow', to: 'orange', deg: 90 }}
                        span
                    >
                        gRPC
                    </Text>
                </Text>
            </Stack>
        </Group>
    );
}
