MineSeeker/templates/Game/index.html.twig

{% extends 'base.html.twig' %}

{% block title %} - The Game{% endblock %}

{% block metas %}
  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
  <meta property="og:url" content="{{ url('MineSeekerBundle_homepage') | replace({'http://': 'https://'}) }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:locale" content="en_US"/>
  <meta property="og:title" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta property="og:description"
        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta property="og:image:alt" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="MineSeeker — Multiplayer Minesweeper"/>
  <meta name="twitter:description"
        content="Race a friend on a hidden minefield. Real-time 1v1 minesweeper in your browser — no account needed. Just play."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block header %}
  <section
    class="hero{% if app.request.attributes.get('_route') != 'MineSeekerBundle_homepage' %} hero--compact{% endif %}">

    <div class="hero-auth">
      {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        <a href="{{ path('MineSeekerBundle_profile') }}" class="hero-auth-btn hero-auth-btn--profile">
          {% if app.user.avatarPath %}
            <img src="{{ app.user.avatarPath|imagine_filter('avatar_thumb') }}"
                 alt="{{ app.user.username }}"
                 class="hero-auth-avatar">
          {% else %}
            <span class="hero-auth-avatar hero-auth-avatar--initials">{{ app.user.username|slice(0, 2)|upper }}</span>
          {% endif %}
          {{ app.user.username }}
        </a>
        <a href="{{ path('MineSeekerBundle_profile_security') }}" class="hero-auth-btn hero-auth-btn--security">
          <i class="fas fa-lock"></i> Security
        </a>
        <form method="post" action="{{ path('MineSeekerBundle_logout') }}">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"/>
          <button type="submit" class="hero-auth-btn hero-auth-btn--out">
            <i class="fas fa-right-from-bracket"></i> Sign out
          </button>
        </form>
      {% else %}
        <a href="{{ path('MineSeekerBundle_login') }}" class="hero-auth-btn">
          <i class="fas fa-right-to-bracket"></i> Sign in
        </a>
        <a href="{{ path('MineSeekerBundle_register') }}" class="hero-auth-btn hero-auth-btn--register">
          <i class="fas fa-user-plus"></i> Register
        </a>
      {% endif %}
    </div>

    <a class="hero-logo" href="{{ path('MineSeekerBundle_homepage') }}">
      <img src="{{ asset('images/mine-logo-txt.png') }}" alt="MineSeeker"/>
    </a>

    <div class="hero-body">
      {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        <p class="hero-sub">
          Welcome back, <strong>{{ app.user.username }}</strong>
        </p>
        <h1>Ready for another round?</h1>
      {% else %}
        <p class="hero-sub">Multiplayer minesweeper &mdash; reimagined</p>
        <h1>No account needed.<br>Just play.</h1>
      {% endif %}
      <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="hero-cta">Play Now</a>
      <p class="hero-donate-text">Love this game?</p>
      <a href="https://ko-fi.com/splendidbear" target="_blank" rel="noopener" class="hero-donate">
        Buy me a coffee
      </a>
    </div>

  </section>
{% endblock %}

{% block body %}
  <section class="feature-block">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--stats">
        <i class="fas fa-chart-bar"></i>
        <i class="fas fa-trophy"></i>
        <i class="fas fa-clock-rotate-left"></i>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">For registered players</p>
        <h2 class="feature-block__title">Track your legacy</h2>
        <p class="feature-block__body">
          Create a free account and every game you play gets recorded.
          Watch your win rate climb, revisit past battles, and prove your dominance
          on the board — one detonation at a time.
        </p>
        {% if not is_granted("IS_AUTHENTICATED_REMEMBERED") %}
          <a href="{{ path('MineSeekerBundle_register') }}" class="feature-block__cta">
            <i class="fas fa-user-plus"></i> Create free account
          </a>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="feature-block feature-block--reverse feature-block--msn">
    <div class="feature-block__inner">
      <div class="feature-block__visual feature-block__visual--msn">
        <img src="{{ asset('images/msn-logo.png') }}" alt="MSN Messenger" class="msn-logo"/>
        <img src="{{ asset('images/msn-minesweeper.png') }}" alt="MSN Messenger Minesweeper" class="msn-screenshot"/>
      </div>
      <div class="feature-block__text">
        <p class="feature-block__label">Our inspiration</p>
        <h2 class="feature-block__title">Born from a legend</h2>
        <p class="feature-block__body">
          Remember the minesweeper hidden inside Microsoft's MSN Messenger?
          That tiny two-player gem sparked countless friendships and rivalries
          in the early 2000s. We loved it — so we rebuilt it for today.
          Real-time, multiplayer, and no MSN account required.
        </p>
      </div>
    </div>
  </section>

  <div class="tech-section">
    <p class="tech-label">Built with</p>
    <div class="tech-logos">
      <a href="https://symfony.com" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/symfony.svg') }}" alt="Symfony"/>
      </a>
      <a href="https://howlerjs.com" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/howler.svg') }}" alt="Howler.js"/>
      </a>
      <a href="https://tanstack.com/query" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/tanstack-query.svg') }}" alt="TanStack Query"/>
      </a>
      <a href="https://mercure.rocks" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/mercure.svg') }}" alt="Mercure"/>
      </a>
      <a href="https://vitejs.dev" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/vite.svg') }}" alt="Vite"/>
      </a>
      <a href="https://bun.sh" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/bun.svg') }}" alt="Bun"/>
      </a>
      <a href="https://www.jetbrains.com/phpstorm" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/phpstorm.svg') }}" alt="PHPStorm"/>
      </a>
      <a href="https://archlinux.org" target="_blank" rel="noopener" class="tech-link">
        <img src="{{ asset('images/technologies/archlinux.svg') }}" alt="Arch Linux"/>
      </a>
    </div>
    <p class="tech-oss">
      <i class="fa fa-heart"></i>
      This game would not exist without the incredible open-source community. <br>
      Thank you to every contributor, maintainer, and creator behind these projects.
    </p>
  </div>
{% endblock %}

{% block footer %}
  <div class="footer-inner">
    <div class="footer-brand">
      <img src="{{ asset('images/mine-logo-logo.png') }}" alt="MineSeeker" class="footer-logo"/>
      <p class="footer-name">MineSeeker</p>
      <p class="footer-tagline">Multiplayer minesweeper &mdash; reimagined</p>
    </div>
    <nav class="footer-nav">
      <p class="footer-nav-label">Navigate</p>
      <ul>
        <li><a href="{{ path('MineSeekerBundle_homepage') }}">Homepage</a></li>
        <li><a href="{{ path('MineSeekerBundle_terms') }}">Terms of Use</a></li>
        <li><a href="{{ path('MineSeekerBundle_privacy') }}">Privacy Policy</a></li>
        <li><a href="{{ path('MineSeekerBundle_contact') }}">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="footer-copy">
    <p>&copy; {{ "now"|date("Y") }} MineSeeker &nbsp;&bull;&nbsp; All rights reserved &nbsp;&bull;&nbsp;
      <a href="https://www.splendidbear.org">www.splendidbear.org</a>
    </p>
  </div>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ vite_entry_link_tags('homeStyle') }}
{% endblock %}