{% extends "main.html" %}
{% block tabs %}
{{ super() }}
<style>
	:root {
		--goreleaser-primary-color: #252525;
	}

	.md-main {
		flex-grow: 1;
		background-color: hsl(0, 0%, 15%);
	}

	.md-header {
		position: initial
	}

	.md-footer {
		background-color: #363636;
		color: var(--md-footer-fg-color);
	}
	.md-main__inner {
		margin: 0
	}

	.md-content {
		display: none
	}

	.tx-container {
		padding-top: 1rem;
		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsl(0, 0%, 15%)'/></svg>") no-repeat bottom, linear-gradient(to bottom, var(--md-primary-fg-color), var(--goreleaser-primary-color) 99%, #fff 99%)
	}

.md-typeset h2 {
    font-weight: bold;
    color: #ffffff;
    text-transform: none;
    margin: 0.5em 0 0.64em;
}

	.tx-hero {
		margin: 0 .8rem;
		color: var(--md-primary-bg-color)
	}

	.tx-hero h1 {
		margin-bottom: 0.1rem;
		color: currentColor;
		font-weight: 700
	}

	.tx-hero__content {
		padding-bottom: 6rem
	}

	.tx-hero .md-button {
		margin-top: .5rem;
		margin-right: .5rem;
		color: var(--md-primary-bg-color)
	}

	.tx-hero .md-button--primary {
		background-color: var(--md-primary-bg-color);
		color: var(--goreleaser-primary-color);
		border-color: var(--md-primary-bg-color)
	}

	.tx-hero .md-button:focus,
	.tx-hero .md-button:hover {
		background-color: var(--md-accent-fg-color);
		color: var(--md-default-bg-color);
		border-color: var(--md-accent-fg-color)
	}

	@media screen and (max-width:70em) {
		.tx-hero h1 {
			font-size: 1.4rem
		}

		.tx-hero__image {
			text-align: center;
		}

		.tx-hero__image img {
			max-width: 10rem;
		}
	}

	@media screen and (min-width:70em) {
		.md-sidebar--secondary {
			display: none
		}

		.tx-hero {
			display: flex;
			align-items: stretch
		}

		.tx-hero__content {
			max-width: 30rem;
			margin-top: 2rem;
			padding-bottom: 20vw
		}

		.tx-hero__image {
			order: 1;
			margin-left: auto;
			margin-top: 2rem;
		}

		.tx-hero__image img {
			max-width: 15rem;
		}
	}

	@media screen and (min-width:76.25em) {
		.md-sidebar--primary {
			display: none
		}

		.tx-hero__image {
			margin-left: auto;
		}

		.tx-hero__image img {
			max-width: 20rem;
		}
	}

</style>
<section class="tx-container">
	<div class="md-grid md-typeset">
		<div class="tx-hero">
			<div class="tx-hero__image">
				<img src="assets/logomark.png" alt="" draggable="false">
			</div>
			<div class="tx-hero__content">
				<h1>Plex Meta Manager</h1>
				<h2>Unleash the potential of your media libraries!</h2>
				<p>With Plex Meta Manager, you can:</p>
				<ul>
					<li>Create hand-crafted collections to showcase your library in unique ways</li>
					<li>Apply modular overlays to your posters</li>
					<li>Connect to third-party sites such as TMDb, IMDb and Trakt</li>
					<li>Apply our pre-defined PMM Default Collections and Overlays</li>
					<li>Integrate with Radarr and Sonarr to expand your media libraries</li>
					<li>Share your creations with others in our Discord and Configs Repo</li>
					<li>... and much more!</li>
				</ul>
				<a href="home" title="{{ page.next_page.title | striptags }}"
					class="md-button md-button--primary">
					Get started
				</a>
				<a href="https://github.com/sponsors/meisnate12" title="Donate to PMM" class="md-button">
					Donate to PMM
				</a>
			</div>
		</div>
	</div>
</section>
{% endblock %}
{% block content %}{% endblock %}