<?php
session_start();
?>

<!DOCTYPE html>
<html lang="en-GB">
    <?php
    $pageTitle = "Home";
    $pageDescription = "";
    $pageKeywords = "";
    include('components/head.php');

    if (file_exists('maintenance.txt')) {
        include('components/maintenance.php');
        exit();
    }
    ?>

    <body id="body">
        <?php include('components/loader.php'); ?>
        <?php include('components/cookie-notice.php'); ?>
        <?php include('components/header.php'); ?>

        <div class="page">
            <div id="page-content">
                <section class="page-hero">
                    <picture>
                        <source
                            srcset="
                                /img/banner-741x300.webp 741w,
                                /img/banner-1297x525.webp 1297w,
                                /img/banner-1482x600.webp 1482w,
                                /img/banner-1730x700.webp 1730w,
                                /img/banner-2048x829.webp 2048w,
                                /img/banner-2223x900.webp 2223w,
                                img/banner-2560x1036.webp 2560w
                            "
                            type="image/webp"
                            sizes="(min-width: 1840px) 1731px, (min-width: 800px) calc(91.18vw + 72px), 716px"
                        >
                        <img
                            src="/img/banner-1297x525.webp"
                            srcset="
                                /img/banner-741x300.webp 741w,
                                /img/banner-1297x525.webp 1297w,
                                /img/banner-1482x600.webp 1482w,
                                /img/banner-1730x700.webp 1730w,
                                /img/banner-2048x829.webp 2048w,
                                /img/banner-2223x900.webp 2223w,
                                /img/banner-2560x1036.webp 2560w
                            "
                            sizes="(min-width: 1840px) 1731px, (min-width: 800px) calc(91.18vw + 72px), 716px"
                            alt="Main Page Banner"
                            class="page-hero-image"
                        >
                    </picture>
                </section>

                <section class="page-news-updates">
                    <div class="page-news-updates-header">
                        <span class="page-news-updates-header-aurebesh">server news & updates</span>
                        <h2>Server News & Updates</h2>
                    </div>

                    <div id="page-news-updates-loader"></div>

                    <div class="page-news-updates-view-all">
                        <a href="blog" class="page-news-updates-view-all-link">
                            <i class="page-news-updates-view-all-icon fa-solid fa-arrow-right"></i>
                            <span>View All News & Updates</span>
                        </a>
                    </div>
                </section>

                <section class="page-our-team">
                    <div class="page-our-team-header">
                        <span class="page-our-team-header-aurebesh">meet the team</span>
                        <h2>Meet The Team</h2>
                    </div>

                    <div class="page-our-team-content">
                        <div class="page-our-team-member">
                            <div class="page-our-team-member-image" style="background-image: url('https://avatars.akamai.steamstatic.com/eee516b7c3d43b948efa027dc9d1fbff24696cd1_full.jpg');"></div>
                            <div class="page-our-team-member-text">
                                <h3>Penguin</h3>
                                <h4 style="color: #ff0000">Lead Developer / Mapper</h4>
                                <p>With 4+ years in Source Engine development and mapping, I’m creating Galaxies to push GMod’s limits with a unique, innovative experience.</p>
                            </div>
                        </div>

                        <div class="page-our-team-member">
                            <div class="page-our-team-member-image" style="background-image: url('https://avatars.akamai.steamstatic.com/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg');"></div>
                            <div class="page-our-team-member-text">
                                <h3>Placeholder Name</h3>
                                <h4>Placeholder Role</h4>
                                <p>Placeholder Description.</p>
                            </div>
                        </div>

                        <div class="page-our-team-member">
                            <div class="page-our-team-member-image" style="background-image: url('https://avatars.akamai.steamstatic.com/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb_full.jpg');"></div>
                            <div class="page-our-team-member-text">
                                <h3>Placeholder Name</h3>
                                <h4>Placeholder Role</h4>
                                <p>Placeholder Description.</p>
                            </div>
                        </div>
                </section>

                <section class="page-community">
                    <div class="page-community-header">
                        <span class="page-community-header-aurebesh">join the conversation</span>
                        <h2>Join The Conversation</h2>
                    </div>

                    <div class="page-discord-container-outer">
                        <div class="page-discord-container-inner">
                            <div class="page-discord-container-image">
                                <picture>
                                    <source
                                        srcset="
                                            /img/discord-logo-320.webp 320w,
                                            /img/discord-logo-640.webp 640w,
                                            /img/discord-logo-960.webp 960w
                                        "
                                        type="image/webp"
                                        sizes="(min-width: 440px) 375px, 89.17vw"
                                    >
                                    <img
                                        src="/img/discord-logo-640.webp"
                                        srcset="
                                            /img/discord-logo-320.webp 320w,
                                            /img/discord-logo-640.webp 640w,
                                            /img/discord-logo-960.webp 960w
                                        "
                                        sizes="(min-width: 440px) 375px, 89.17vw"
                                        alt="Discord Logo"
                                        class="page-discord-image"
                                    >
                                </picture>
                            </div>
                            <div class="page-discord-container-text">
                                <h3>Community Discord</h3>
                                <p>Our Discord is the best place to stay up to date with the latest news, important updates, and announcements. It’s also a space to connect, ask questions, and engage with others in the community. Join us to stay informed and be part of the conversation.</p>
                                <a href="discord" target="_blank" class="page-discord-container-link">
                                    <i class="page-discord-container-icon fa-brands fa-discord"></i>
                                    <span>Join our Discord</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="page-teamspeak-container-outer">
                        <div class="page-teamspeak-container-inner">
                            <div class="page-teamspeak-container-image">
                                <picture>
                                    <source
                                        srcset="
                                            /img/teamspeak-logo-320.webp 320w,
                                            /img/teamspeak-logo-640.webp 640w,
                                            /img/teamspeak-logo-960.webp 960w
                                        "
                                        type="image/webp"
                                        sizes="(min-width: 400px) 320px, calc(65vw + 73px)"
                                    >
                                    <img
                                        src="/img/teamspeak-logo-640.webp"
                                        srcset="
                                            /img/teamspeak-logo-320.webp 320w,
                                            /img/teamspeak-logo-640.webp 640w,
                                            /img/teamspeak-logo-960.webp 960w
                                        "
                                        sizes="(min-width: 400px) 320px, calc(65vw + 73px)"
                                        alt="Teamspeak Logo"
                                        class="page-discord-image"
                                    >
                                </picture>

                            </div>
                            <div class="page-teamspeak-container-text">
                                <h3>Community Teamspeak</h3>
                                <p>Our TeamSpeak server is the best place to connect for high-quality voice chat, create your own channels, and hang out in a mostly un-moderated, chill environment. Join us to talk, game, and be part of the Arctic Networks community.</p>
                                <a href="ts3server://ts.arcticnetworks.co?port=9987" class="page-teamspeak-container-link">
                                    <i class="page-teamspeak-container-icon fa-brands fa-teamspeak"></i>
                                    <span>Connect to Teamspeak</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <?php include('components/footer.php'); ?>

            <script src="/js/script.js"></script>
        </div>
    </body>
</html>
