Modrinth-plus/apps/frontend/src/pages/app.vue

<script setup lang="ts">
import {
	BoxIcon,
	DownloadIcon,
	EditIcon,
	LinkIcon,
	SearchIcon,
	SendIcon,
	TrashIcon,
} from '@modrinth/assets'
import {
	Avatar,
	Badge,
	Checkbox,
	commonMessages,
	defineMessages,
	IntlFormatted,
	useVIntl,
} from '@modrinth/ui'

import ATLauncher from '~/assets/images/external/atlauncher.svg?component'
import CurseForge from '~/assets/images/external/curseforge.svg?component'
import PrismIcon from '~/assets/images/external/prism.svg?component'
import LogoAnimated from '~/components/brand/LogoAnimated.vue'
import LatestNewsRow from '~/components/ui/news/LatestNewsRow.vue'
import { homePageProjects } from '~/generated/state.json'

interface LauncherPlatform {
	install_urls: string[]
}

interface LauncherUpdates {
	platforms: {
		'darwin-aarch64': LauncherPlatform
		'windows-x86_64': LauncherPlatform
		'linux-x86_64': LauncherPlatform
	}
}

type OSType = 'Mac' | 'Windows' | 'Linux' | null

const downloadWindows = ref<HTMLAnchorElement | null>(null)
const downloadMac = ref<HTMLAnchorElement | null>(null)
const downloadSection = ref<HTMLElement | null>(null)
const windowsLink = ref<string | null>(null)

const linuxLinks = reactive({
	appImage: null as string | null,
	deb: null as string | null,
	rpm: null as string | null,
	thirdParty: 'https://support.modrinth.com/en/articles/9298760',
})

const macLinks = reactive({
	universal: null as string | null,
})

const newProjects = homePageProjects.slice(0, 40)
const val = Math.ceil(newProjects.length / 6)
const rows = [
	newProjects.slice(0, val),
	newProjects.slice(val, val * 2),
	newProjects.slice(val * 2, val * 3),
	newProjects.slice(val * 3, val * 4),
	newProjects.slice(val * 4, val * 5),
]

const { data: launcherUpdates } = await useFetch<LauncherUpdates>(
	'https://launcher-files.modrinth.com/updates.json?new',
	{
		server: false,
		getCachedData(key, nuxtApp) {
			const cached = (nuxtApp.ssrContext?.cache as any)?.[key] || nuxtApp.payload.data[key]
			if (!cached) return

			const now = Date.now()
			const cacheTime = cached._cacheTime || 0
			const maxAge = 5 * 60 * 1000

			if (now - cacheTime > maxAge) {
				return null
			}

			return cached
		},
		transform(data) {
			return {
				...data,
				_cacheTime: Date.now(),
			}
		},
	},
)

const platform = computed<string>(() => {
	if (import.meta.server) {
		const headers = useRequestHeaders()
		return headers['user-agent'] || ''
	} else {
		return navigator.userAgent || ''
	}
})
const os = computed<OSType>(() => {
	if (platform.value.includes('Mac')) {
		return 'Mac'
	} else if (platform.value.includes('Win')) {
		return 'Windows'
	} else if (platform.value.includes('Linux')) {
		return 'Linux'
	} else {
		return null
	}
})

const osName = computed(() => {
	switch (os.value) {
		case 'Mac':
			return formatMessage(messages.mac)
		case 'Windows':
			return formatMessage(messages.windows)
		case 'Linux':
			return formatMessage(messages.linux)
	}
	return 'unknown'
})

const modManagementData = [
	{
		id: 'P7dR8mSH', // Todo: fetch name + author + icon from api
		name: 'Fabric API',
		author: 'modmuss50',
		version: '0.86.1+1.20.1',
		iconUrl: 'https://cdn.modrinth.com/data/P7dR8mSH/icon.png',
	},
	{
		id: 'AANobbMI',
		name: 'Sodium',
		author: 'jellysquid3',
		version: 'mc1.20.1-0.5.0',
		iconUrl: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
	},
	{
		id: 'YL57xq9U',
		name: 'Iris Shaders',
		author: 'coderbot',
		version: '1.6.5+1.20.1',
		iconUrl: 'https://cdn.modrinth.com/data/YL57xq9U/dc558eece920db435f9823ce86de0c4cde89800b.png',
	},
	{
		id: 'gvQqBUqZ',
		name: 'Lithium',
		author: 'jellysquid3',
		version: 'mc1.20.1-0.11.2',
		iconUrl: 'https://cdn.modrinth.com/data/gvQqBUqZ/icon.png',
	},
	{
		id: 'mOgUt4GM',
		name: 'Mod Menu',
		author: 'Prospector',
		version: '7.2.1',
		iconUrl:
			'https://cdn.modrinth.com/data/mOgUt4GM/1bfe2006b38340e9d064700e41adf84a8abb1bd4_96.webp',
	},
	{
		id: '9s6osm5g',
		name: 'Cloth Config API',
		author: 'shedaniel',
		version: '11.1.106+fabric',
		iconUrl: 'https://cdn.modrinth.com/data/9s6osm5g/icon.png',
	},
	{
		id: 'lhGA9TYQ',
		name: 'Architectury API',
		author: 'shedaniel',
		version: '9.1.12+fabric',
		iconUrl: 'https://cdn.modrinth.com/data/lhGA9TYQ/icon.png',
	},
	{
		id: 'nrJ2NpD0',
		name: 'Craftify',
		author: 'ThatGravyBoat',
		version: '8.5.2023',
		iconUrl: 'https://cdn.modrinth.com/data/nrJ2NpD0/4f21214db060ed4542b1f3983c4113d293480a1b.webp',
	},
]

const downloadLauncher = computed(() => {
	if (os.value === 'Windows') {
		return () => {
			downloadWindows.value?.click()
		}
	} else if (os.value === 'Mac') {
		return () => {
			downloadMac.value?.click()
		}
	} else {
		return () => {
			scrollToSection()
		}
	}
})

const handleDownload = () => {
	downloadLauncher.value()
}

watch(
	launcherUpdates,
	(newData) => {
		if (newData?.platforms) {
			macLinks.universal = newData.platforms['darwin-aarch64']?.install_urls[0] || null
			windowsLink.value = newData.platforms['windows-x86_64']?.install_urls[0] || null
			linuxLinks.appImage = newData.platforms['linux-x86_64']?.install_urls[1] || null
			linuxLinks.deb = newData.platforms['linux-x86_64']?.install_urls[0] || null
			linuxLinks.rpm = newData.platforms['linux-x86_64']?.install_urls[2] || null
		}
	},
	{ immediate: true },
)

const scrollToSection = () => {
	nextTick(() => {
		if (downloadSection.value) {
			window.scrollTo({
				top: downloadSection.value.offsetTop,
				behavior: 'smooth',
			})
		}
	})
}

const { formatMessage } = useVIntl()

const messages = defineMessages({
	downloadModrinthApp: {
		id: 'app-marketing.hero.download-modrinth-app',
		defaultMessage: 'Download Modrinth App',
	},
	downloadModrinthAppForOs: {
		id: 'app-marketing.hero.download-modrinth-app-for-os',
		defaultMessage: 'Download Modrinth App for {os}',
	},
	description: {
		id: 'app-marketing.hero.description',
		defaultMessage:
			'Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.',
	},
	downloadModrinthAppButton: {
		id: 'app-marketing.hero.download-button',
		defaultMessage: 'Download Modrinth App',
	},
	moreDownloadOptions: {
		id: 'app-marketing.hero.more-download-options',
		defaultMessage: 'More Download Options',
	},
	unlikeAnyLauncher: {
		id: 'app-marketing.features.unlike-any-launcher',
		defaultMessage: 'Unlike any launcher',
	},
	youveUsedBefore: {
		id: 'app-marketing.features.youve-used-before',
		defaultMessage: "you've used before",
	},
	installedMods: {
		id: 'app-marketing.features.mod-management.installed-mods',
		defaultMessage: 'Installed mods',
	},
	searchMods: {
		id: 'app-marketing.features.mod-management.search-mods',
		defaultMessage: 'Search mods',
	},
	name: {
		id: 'app-marketing.features.mod-management.name',
		defaultMessage: 'Name',
	},
	version: {
		id: 'app-marketing.features.mod-management.version',
		defaultMessage: 'Version',
	},
	actions: {
		id: 'app-marketing.features.mod-management.actions',
		defaultMessage: 'Actions',
	},
	byAuthor: {
		id: 'app-marketing.features.mod-management.byAuthor',
		defaultMessage: 'by {author}',
	},
	modManagement: {
		id: 'app-marketing.features.mod-management.title',
		defaultMessage: 'Mod management',
	},
	modManagementDescription: {
		id: 'app-marketing.features.mod-management.description',
		defaultMessage:
			'Modrinth makes it easy to manage all your mods in one place. You can install, uninstall, and update mods with a single click.',
	},
	playWithFavoriteMods: {
		id: 'app-marketing.features.play.title',
		defaultMessage: 'Play with your favorite mods',
	},
	playWithFavoriteModsDescription: {
		id: 'app-marketing.features.play.description',
		defaultMessage: 'Use Modrinth App to download and play with your favorite mods and modpacks.',
	},
	shareModpacks: {
		id: 'app-marketing.features.sharing.title',
		defaultMessage: 'Share modpacks',
	},
	shareModpacksDescription: {
		id: 'app-marketing.features.sharing.description',
		defaultMessage:
			'Build, share, and play modpacks with any of the thousands of mods and modpacks hosted here on Modrinth.',
	},
	share: {
		id: 'app-marketing.features.sharing.share-button',
		defaultMessage: 'Share',
	},
	modpack: {
		id: 'app-marketing.features.sharing.modpack',
		defaultMessage: 'Modpack',
	},
	activityMonitor: {
		id: 'app-marketing.features.performance.activity-monitor',
		defaultMessage: 'Activity monitor',
	},
	goodPerformance: {
		id: 'app-marketing.features.performance.good-performance',
		defaultMessage: 'Good performance',
	},
	processName: {
		id: 'app-marketing.features.performance.process-name',
		defaultMessage: 'Process name',
	},
	cpuPercent: {
		id: 'app-marketing.features.performance.cpu-percent',
		defaultMessage: '% CPU',
	},
	ram: {
		id: 'app-marketing.features.performance.ram',
		defaultMessage: 'RAM',
	},
	modrinthApp: {
		id: 'app-marketing.features.performance.modrinth-app',
		defaultMessage: 'Modrinth App',
	},
	small: {
		id: 'app-marketing.features.performance.small',
		defaultMessage: 'Small',
	},
	lessThan150MB: {
		id: 'app-marketing.features.performance.less-than-150mb',
		defaultMessage: '< 150 MB',
	},
	googleChrome: {
		id: 'app-marketing.features.performance.google-chrome',
		defaultMessage: 'Google Chrome',
	},
	discord: {
		id: 'app-marketing.features.performance.discord',
		defaultMessage: 'Discord',
	},
	infiniteMB: {
		id: 'app-marketing.features.performance.infinite-mb',
		defaultMessage: '∞ MB',
	},
	oneBillionPercent: {
		id: 'app-marketing.features.performance.one-billion-percent',
		defaultMessage: '1 billion %',
	},
	infiniteTimesInfiniteMB: {
		id: 'app-marketing.features.performance.infinite-times-infinite-mb',
		defaultMessage: '∞ * ∞ MB',
	},
	performant: {
		id: 'app-marketing.features.performance.title',
		defaultMessage: 'Performant',
	},
	performantDescription: {
		id: 'app-marketing.features.performance.description',
		defaultMessage:
			'Modrinth App performs better than many of the leading mod managers, using just 150mb of RAM!',
	},
	websiteIntegration: {
		id: 'app-marketing.features.website.title',
		defaultMessage: 'Website integration',
	},
	websiteIntegrationDescription: {
		id: 'app-marketing.features.website.description',
		defaultMessage:
			'Modrinth App is fully integrated with the website, so you can access all your favorite projects from the app!',
	},
	profileImporting: {
		id: 'app-marketing.features.importing.title',
		defaultMessage: 'Profile importing',
	},
	profileImportingDescription: {
		id: 'app-marketing.features.importing.description',
		defaultMessage:
			'Import all your favorite profiles from the launcher you were using before, and get started with Modrinth App in seconds!',
	},
	openSource: {
		id: 'app-marketing.features.open-source.title',
		defaultMessage: 'Open source',
	},
	openSourceDescription: {
		id: 'app-marketing.features.open-source.description',
		defaultMessage:
			"Modrinth's launcher is fully open source. You can view the source code on our <github-link>GitHub</github-link>!",
	},
	offlineMode: {
		id: 'app-marketing.features.offline.title',
		defaultMessage: 'Offline mode',
	},
	offlineModeDescription: {
		id: 'app-marketing.features.offline.description',
		defaultMessage: 'Play your mods, whether you are connected to the internet, or not.',
	},
	followProjects: {
		id: 'app-marketing.features.follow.title',
		defaultMessage: 'Follow projects',
	},
	followProjectsDescription: {
		id: 'app-marketing.features.follow.description',
		defaultMessage: 'Save content you love and receive updates with one click.',
	},
	downloadOptions: {
		id: 'app-marketing.download.options-title',
		defaultMessage: 'Download options',
	},
	downloadModrinthAppBeta: {
		id: 'app-marketing.download.title',
		defaultMessage: 'Download Modrinth App (Beta)',
	},
	downloadDescription: {
		id: 'app-marketing.download.description',
		defaultMessage:
			'Our desktop app is available across all platforms, choose your desired version.',
	},
	windows: {
		id: 'app-marketing.download.windows',
		defaultMessage: 'Windows',
	},
	mac: {
		id: 'app-marketing.download.mac',
		defaultMessage: 'Mac',
	},
	linux: {
		id: 'app-marketing.download.linux',
		defaultMessage: 'Linux',
	},
	downloadTheBeta: {
		id: 'app-marketing.download.download-beta',
		defaultMessage: 'Download the beta',
	},
	downloadTheAppImage: {
		id: 'app-marketing.download.download-appimage',
		defaultMessage: 'Download the AppImage',
	},
	downloadTheDEB: {
		id: 'app-marketing.download.download-deb',
		defaultMessage: 'Download the DEB',
	},
	downloadTheRPM: {
		id: 'app-marketing.download.download-rpm',
		defaultMessage: 'Download the RPM',
	},
	thirdPartyPackages: {
		id: 'app-marketing.download.third-party-packages',
		defaultMessage: 'Third-party packages',
	},
	downloadTerms: {
		id: 'app-marketing.download.terms',
		defaultMessage:
			'By downloading Modrinth App you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>.',
	},
	linuxDisclaimer: {
		id: 'app-marketing.download.linux-disclaimer',
		defaultMessage:
			'The Linux versions of Modrinth App are <issues-link>known to have issues</issues-link> on certain systems and configurations. If Modrinth App is unstable on your system, we encourage you to try other apps like <prism-link>Prism Launcher</prism-link> to easily install Modrinth content.',
	},
	appScreenshotAlt: {
		id: 'app-marketing.hero.app-screenshot-alt',
		defaultMessage: `Screenshot of Modrinth App with a Cobblemon instance opened to the 'Content' page.`,
	},
	minecraftScreenshotAlt: {
		id: 'app-marketing.hero.minecraft-screenshot-alt',
		defaultMessage: `Screenshot of the Cobblemon instance's main menu screen.`,
	},
	gdlauncherAlt: {
		id: 'app-marketing.features.importing.gdlauncher-alt',
		defaultMessage: 'GDLauncher',
	},
	multimcAlt: {
		id: 'app-marketing.features.importing.multimc-alt',
		defaultMessage: 'MultiMC',
	},
})

const title = 'Download Modrinth App!'
const description =
	'Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.'

useSeoMeta({
	title,
	description,
	ogTitle: title,
	ogDescription: description,
})
</script>

<template>
	<div>
		<div class="landing-hero">
			<div
				class="relative mt-4 h-fit w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
			>
				{{ formatMessage(commonMessages.betaRelease) }}
			</div>
			<h1 class="main-header max-w-[60rem]">
				{{
					os
						? formatMessage(messages.downloadModrinthAppForOs, { os: osName })
						: formatMessage(messages.downloadModrinthApp)
				}}
			</h1>
			<h2 class="main-subheader">
				{{ formatMessage(messages.description) }}
			</h2>
			<div class="button-group">
				<button
					v-if="os"
					class="iconified-button brand-button btn btn-large"
					rel="noopener nofollow"
					@click="handleDownload"
				>
					<svg
						v-if="os === 'Linux'"
						class="light-icon"
						width="45"
						height="46"
						viewBox="0 0 45 46"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							id="Subtract"
							fill-rule="evenodd"
							clip-rule="evenodd"
							d="M23.5477 0H23.5461C23.2284 0 22.9077 0.0163711 22.5876 0.0415902C20.4638 0.208942 18.8991 0.910133 17.7996 2.0082C16.7124 3.09404 16.1751 4.47323 15.9172 5.82868C15.6602 7.18017 15.6685 8.57463 15.7244 9.76049C15.7464 10.2267 15.7737 10.6424 15.7981 11.0129L15.7981 11.0129C15.8393 11.6392 15.8719 12.1361 15.856 12.5288C15.7269 14.3647 15.3652 15.7513 14.1358 17.5116C12.4894 19.4715 10.1353 22.6851 9.00147 26.0938C8.50987 27.5652 8.23247 29.1259 8.37804 30.6595C8.14194 30.9205 7.94151 31.1909 7.77396 31.4209L7.69935 31.5235C7.53577 31.7486 7.41036 31.9212 7.28343 32.0672C7.22885 32.1165 7.13829 32.1747 6.95723 32.2529C6.85646 32.2965 6.74665 32.3386 6.60714 32.3918L6.60229 32.3937L6.60063 32.3943C6.4689 32.4446 6.31402 32.5038 6.15349 32.5722L6.14713 32.575C6.11461 32.5891 6.08029 32.6038 6.04439 32.6191L6.04194 32.6201C5.49857 32.8521 4.5956 33.2374 4.06765 34.2907L4.06313 34.2998L4.05878 34.3089C3.83111 34.787 3.71086 35.3126 3.71965 35.8518C3.72044 36.2784 3.77526 36.6973 3.83488 36.9965L3.8573 37.1494C3.90153 37.4502 3.93607 37.685 3.9521 37.8975C3.96952 38.1284 3.9557 38.2416 3.94333 38.2911C3.47501 39.5811 3.29341 40.7747 3.80981 41.7808L3.81261 41.7862C4.34311 42.8045 5.41437 43.1509 6.09597 43.3713L6.14873 43.3884L6.1831 43.3968C6.76559 43.5407 7.45296 43.6219 8.08651 43.6967L8.08657 43.6967C8.33286 43.7258 8.57102 43.7539 8.79172 43.7844C9.65223 43.9032 10.4057 44.0681 11.0346 44.4066L11.0467 44.4131L11.0589 44.4193C12.8487 45.3199 14.8309 45.8073 16.5413 45.3594C17.5947 45.1214 18.5098 44.4944 19.1114 43.6161C19.5314 43.5681 19.9501 43.481 20.3513 43.3976L20.4887 43.3691C21.1456 43.2333 21.8552 43.0939 22.7255 43.039L22.7353 43.0384L22.7452 43.0376C23.2171 42.9984 23.7676 43.0823 24.5478 43.2012L24.6654 43.2192C25.2572 43.3092 25.9398 43.4072 26.6797 43.4223L26.7366 43.5729L26.7865 43.6228C27.7132 45.3272 29.3865 46.1223 31.1344 45.9841C32.8861 45.8473 34.6161 44.7911 35.9501 43.2465L35.9575 43.2379L35.9647 43.2291C36.4178 42.6799 37.0511 42.2572 37.7983 41.8603C38.1016 41.6992 38.4052 41.5515 38.7175 41.3996L38.7179 41.3994L38.936 41.2932C39.3111 41.1099 39.7022 40.9143 40.0596 40.6996C40.783 40.2838 41.6765 39.5491 41.7413 38.3282C41.8014 37.2663 41.2531 36.3256 40.4338 35.3719V35.1588L40.1744 34.8993C40.1374 34.8477 40.0795 34.7411 40.0113 34.5353C39.934 34.302 39.8672 34.0188 39.7856 33.6562C39.6368 32.9545 39.4127 31.9102 38.5493 31.186L38.3995 31.0604C38.9576 28.7316 38.5908 26.4633 37.8259 24.46C36.7898 21.7201 34.9984 19.3692 33.6785 17.7973L33.6778 17.7965C32.1849 15.9116 31.019 14.4397 31.0434 12.2669C31.0453 12.1131 31.0478 11.9522 31.0504 11.7849C31.0801 9.87812 31.1226 7.15021 30.3612 4.83914C29.9387 3.55665 29.2488 2.33019 28.115 1.42642C26.9706 0.514298 25.4646 0.00304389 23.5477 0ZM22.666 1.0385C22.9685 1.01467 23.2618 1 23.546 1C30.2102 1.01058 30.1098 7.76032 30.0499 11.7866C30.0475 11.9472 30.0452 12.1035 30.0433 12.2548C30.0146 14.7849 31.382 16.51 32.8074 18.3084C32.8393 18.3487 32.8713 18.3891 32.9033 18.4295C34.205 19.9787 35.9137 22.23 36.8908 24.815C37.692 26.9123 37.9982 29.2443 37.208 31.5873C37.3329 31.5924 37.4538 31.6331 37.5563 31.7047C37.6223 31.7737 37.6877 31.8118 37.7513 31.8488C37.8026 31.8787 37.8527 31.908 37.901 31.9522H37.9065C38.4748 32.4288 38.6527 33.1347 38.8085 33.8698C38.9698 34.5867 39.1165 35.2008 39.4282 35.5675L39.4337 35.573V35.7508C40.376 36.7867 40.7848 37.5402 40.7427 38.2735C40.706 38.9775 40.1908 39.4725 39.5528 39.8373C39.1757 40.0647 38.7412 40.276 38.2863 40.4973C37.2045 41.0234 36.0076 41.6055 35.1932 42.5928C33.974 44.0045 32.4688 44.8772 31.0553 44.9872C29.6418 45.099 28.3182 44.45 27.6013 43.0237L27.5958 43.0182C27.5697 42.949 27.5454 42.89 27.523 42.8356C27.4653 42.6951 27.4199 42.5847 27.3868 42.4077C26.4008 42.4735 25.4823 42.3328 24.6448 42.2044C23.9204 42.0934 23.2567 41.9917 22.6623 42.041C21.6653 42.1039 20.8661 42.2696 20.1753 42.4127C19.5578 42.5407 19.027 42.6507 18.519 42.6533C18.0827 43.537 17.2687 44.175 16.3043 44.3877C14.9293 44.7543 13.206 44.3803 11.5083 43.526C10.4773 42.9711 9.26303 42.8279 8.13135 42.6944C7.52434 42.622
							fill="white"
						/>
					</svg>
					<svg
						v-if="os === 'Linux'"
						class="dark-icon"
						role="img"
						viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-
						/>
					</svg>
					<svg
						v-else-if="os === 'Windows'"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 4875 4875"
						fill="currentColor"
					>
						<path
							d="M0 0h2311v2310H0zm2564 0h2311v2310H2564zM0 2564h2311v2311H0zm2564 0h2311v2311H2564"
						/>
					</svg>
					<svg
						v-else-if="os === 'Mac'"
						xmlns="http://www.w3.org/2000/svg"
						width="44"
						height="44"
						viewBox="0 0 44 44"
						fill="none"
					>
						<path
							d="M33.5752 37.7889C31.3308 39.8664 28.8802 39.5384 26.5212 38.5543C24.0248 37.5484 21.7345 37.5046 19.1007 38.5543C15.8027 39.9102 14.0621 39.5165 12.0924 37.7889C0.915868 26.789 2.56487 10.0377 15.253 9.42536C18.3449 9.57844 20.4978 11.0436 22.3071 11.1748C25.0096 10.65 27.5976 9.14107 30.4834 9.33789C33.9417 9.60031 36.5526 10.9124 38.2703 13.2742C31.1247 17.3637 32.8195 26.3516 39.3697 28.8665C38.0642 32.1468 36.3694 35.4052 33.5523 37.8108L33.5752 37.7889ZM22.078 9.29415C21.7345 4.41745 25.8799 0.393635 30.6437 0C31.3079 5.6421 25.2844 9.84086 22.078 9.29415Z"
							fill="currentColor"
						/>
					</svg>
					{{ formatMessage(messages.downloadModrinthAppButton) }}
				</button>
				<button class="iconified-button outline-button btn btn-large" @click="scrollToSection">
					{{ formatMessage(messages.moreDownloadOptions) }}
				</button>
			</div>
			<img src="https://cdn-raw.modrinth.com/app-landing/app-screenshot.webp" alt="" />
			<div class="bottom-transition" />
		</div>
		<div class="features">
			<h1 class="subheader">
				{{ formatMessage(messages.unlikeAnyLauncher) }} <br />
				{{ formatMessage(messages.youveUsedBefore) }}
			</h1>
			<div class="feature-grid">
				<div class="feature gradient-border mods">
					<div class="search-bar">
						<h4>{{ formatMessage(messages.installedMods) }}</h4>
						<div class="mini-input">
							<SearchIcon aria-hidden="true" />
							<div class="search">{{ formatMessage(messages.searchMods) }}</div>
						</div>
					</div>
					<div class="header row">
						<div />
						<div class="cell">{{ formatMessage(messages.name) }}</div>
						<div class="cell">{{ formatMessage(messages.version) }}</div>
						<div class="cell">{{ formatMessage(messages.actions) }}</div>
					</div>
					<div class="table">
						<div
							v-for="(mod, index) in modManagementData"
							:key="mod.id"
							:class="['row', { first: index === 0 }]"
						>
							<div class="cell">
								<Avatar size="sm" :src="mod.iconUrl" />
							</div>
							<div class="cell">
								<div class="name">{{ mod.name }}</div>
								<div class="description">
									{{ formatMessage(messages.byAuthor, { author: mod.author }) }}
								</div>
							</div>
							<div class="cell">{{ mod.version }}</div>
							<div class="cell check">
								<Checkbox :model-value="true" tabindex="-1" />
								<button class="btn icon-only transparent" tabindex="-1">
									<TrashIcon />
								</button>
							</div>
						</div>
					</div>
					<h3>{{ formatMessage(messages.modManagement) }}</h3>
					<p>
						{{ formatMessage(messages.modManagementDescription) }}
					</p>
				</div>
				<div class="feature gradient-border playing">
					<div class="text">
						<h3>{{ formatMessage(messages.playWithFavoriteMods) }}</h3>
						<p>{{ formatMessage(messages.playWithFavoriteModsDescription) }}</p>
					</div>
					<img
						src="https://cdn-raw.modrinth.com/app-landing/cobblemon-launcher.webp"
						:alt="formatMessage(messages.appScreenshotAlt)"
						class="launcher"
					/>
					<img
						src="https://cdn-raw.modrinth.com/app-landing/cobblemon.webp"
						:alt="formatMessage(messages.minecraftScreenshotAlt)"
						class="minecraft"
					/>
				</div>
				<div class="feature gradient-border sharing">
					<div class="row header">Included mods <EditIcon /></div>
					<div class="table">
						<div class="row first">
							<div class="cell">
								<Avatar
									size="sm"
									src="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
								/>
							</div>
							<div class="cell">Ad Astra</div>
							<div class="cell">
								<div class="description">Live long and prosper, Ad Astra!</div>
							</div>
						</div>
						<div class="row">
							<div class="cell">
								<Avatar
									size="sm"
									src="https://cdn.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
								/>
							</div>
							<div class="cell">Spirit</div>
							<div class="cell">
								<div class="description">
									A mod exploring soul magic in tools, blocks, weapons and more.
								</div>
							</div>
						</div>
						<div class="row">
							<div class="cell">
								<Avatar
									size="sm"
									src="https://cdn.modrinth.com/data/MI1LWe93/d42fb7a69f1e7a86584fa1ed43520af98acec065.png"
								/>
							</div>
							<div class="cell">Creeper Overhaul</div>
							<div class="cell">A mod which overhauls the vanilla creepers!</div>
						</div>
					</div>
					<h3>{{ formatMessage(messages.shareModpacks) }}</h3>
					<p>
						{{ formatMessage(messages.shareModpacksDescription) }}
					</p>
					<div class="export-card">
						<Avatar
							src="https://cdn.modrinth.com/data/mY0lOQFc/81c6eff2b86220e12e62a4ad0d2f364a605c42c4.png"
						/>
						<div class="info">
							<div class="exporting">
								<div class="tag"><BoxIcon /> {{ formatMessage(messages.modpack) }}</div>
								<div class="small-button">
									{{ formatMessage(messages.share) }}
									<SendIcon />
								</div>
							</div>
							<h4 class="name">All of Fabric | Orion</h4>
							<div class="author">by AK</div>
						</div>
					</div>
				</div>
				<div class="feature gradient-border performance">
					<div class="title">
						<h4>{{ formatMessage(messages.activityMonitor) }}</h4>
						<Badge color="green" :type="formatMessage(messages.goodPerformance)" />
					</div>
					<div class="header row">
						<div />
						<div class="cell">{{ formatMessage(messages.processName) }}</div>
						<div class="cell">{{ formatMessage(messages.cpuPercent) }}</div>
						<div class="cell">{{ formatMessage(messages.ram) }}</div>
					</div>
					<div class="table">
						<div class="row first">
							<div class="cell">
								<div>
									<div class="icon-logo modrinth">
										<LogoAnimated class="icon" />
									</div>
								</div>
							</div>
							<div class="cell important">{{ formatMessage(messages.modrinthApp) }}</div>
							<div class="cell important">{{ formatMessage(messages.small) }}</div>
							<div class="cell important">{{ formatMessage(messages.lessThan150MB) }}</div>
						</div>
						<div class="row">
							<div class="cell">
								<div>
									<div class="icon-logo"></div>
								</div>
							</div>
							<div class="cell">{{ formatMessage(messages.googleChrome) }}</div>
							<div class="cell">150%</div>
							<div class="cell">{{ formatMessage(messages.infiniteMB) }}</div>
						</div>
						<div class="row">
							<div class="cell">
								<div>
									<div class="icon-logo"></div>
								</div>
							</div>
							<div class="cell">{{ formatMessage(messages.discord) }}</div>
							<div class="cell">{{ formatMessage(messages.oneBillionPercent) }}</div>
							<div class="cell">{{ formatMessage(messages.infiniteTimesInfiniteMB) }}</div>
						</div>
					</div>
					<h3>{{ formatMessage(messages.performant) }}</h3>
					<p>
						{{ formatMessage(messages.performantDescription) }}
					</p>
				</div>
				<div class="feature gradient-border website">
					<div class="icon-logo">
						<LogoAnimated class="icon" />
					</div>
					<div class="ellipsis" />
					<div class="projects-showcase">
						<div v-for="(row, index) in rows" :key="index" class="row">
							<div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
								<nuxt-link
									v-for="project in row"
									:key="project.id"
									class="project button-animation gradient-border"
									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
								>
									<Avatar :src="project.icon_url!" alt="" size="sm" />
									<div class="project-info">
										<span class="title">
											{{ project.title }}
										</span>
										<span class="description">
											{{ project.description }}
										</span>
									</div>
								</nuxt-link>
							</div>
						</div>
					</div>
					<h3>{{ formatMessage(messages.websiteIntegration) }}</h3>
					<p>
						{{ formatMessage(messages.websiteIntegrationDescription) }}
					</p>
				</div>
				<div class="feature gradient-border importing">
					<div class="text">
						<h3>{{ formatMessage(messages.profileImporting) }}</h3>
						<p>
							{{ formatMessage(messages.profileImportingDescription) }}
						</p>
					</div>
					<div class="inner-circle circle">
						<div class="icon-logo">
							<LogoAnimated class="icon" />
						</div>
						<div class="launcher-badge top-left">
							<img
								src="~/assets/images/external/gdlauncher.png"
								:alt="formatMessage(messages.gdlauncherAlt)"
							/>
						</div>
						<div class="launcher-badge top-right">
							<img
								src="~/assets/images/external/multimc.webp"
								:alt="formatMessage(messages.multimcAlt)"
							/>
						</div>
						<div class="launcher-badge bottom-left">
							<PrismIcon />
						</div>
						<div class="launcher-badge bottom-right">
							<ATLauncher />
						</div>
						<div class="launcher-badge bottom-middle">
							<CurseForge />
						</div>
						<div class="first-circle" />
						<div class="second-circle" />
						<div class="third-circle" />
					</div>
				</div>
			</div>
			<div class="feature-row">
				<div class="point">
					<div class="title">
						<svg
							class="dark-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
						>
							<path
								d="M21 8.25C21 8.70312 20.9258 9.13281 20.7773 9.53906C20.6289 9.94531 20.4141 10.3125 20.1328 10.6406C19.8516 10.9688 19.5273 11.2461 19.1602 11.4727C18.793 11.6992 18.3828 11.8516 17.9297 11.9297C17.8438 12.375 17.6914 12.7852 17.4727 13.1602C17.2539 13.5352 16.9766 13.8594 16.6406 14.1328C16.3047 14.4062 15.9375 14.6172 15.5391 14.7656C15.1406 14.9141 14.7109 14.9922 14.25 15H9.75C9.5 15 9.26172 15.0391 9.03516 15.1172C8.80859 15.1953 8.60156 15.3047 8.41406 15.4453C8.22656 15.5859 8.0625 15.7539 7.92188 15.9492C7.78125 16.1445 7.67578 16.3633 7.60547 16.6055C8.02734 16.707 8.41406 16.8711 8.76562 17.0977C9.11719 17.3242 9.42188 17.6016 9.67969 17.9297C9.9375 18.2578 10.1367 18.6172 10.2773 19.0078C10.418 19.3984 10.4922 19.8125 10.5 20.25C10.5 20.7656 10.4023 21.25 10.207 21.7031C10.0117 22.1562 9.74219 22.5547 9.39844 22.8984C9.05469 23.2422 8.65625 23.5117 8.20312 23.707C7.75 23.9023 7.26562 24 6.75 24C6.23438 24 5.75 23.9023 5.29688 23.707C4.84375 23.5117 4.44531 23.2461 4.10156 22.9102C3.75781 22.5742 3.48828 22.1758 3.29297 21.7148C3.09766 21.2539 3 20.7656 3 20.25C3 19.8047 3.07422 19.3789 3.22266 18.9727C3.37109 18.5664 3.57812 18.2031 3.84375 17.8828C4.10938 17.5625 4.42578 17.2852 4.79297 17.0508C5.16016 16.8164 5.5625 16.6602 6 16.582V7.41797C5.5625 7.33203 5.16016 7.17578 4.79297 6.94922C4.42578 6.72266 4.10938 6.44922 3.84375 6.12891C3.57812 5.80859 3.37109 5.44141 3.22266 5.02734C3.07422 4.61328 3 4.1875 3 3.75C3 3.23438 3.09766 2.75 3.29297 2.29688C3.48828 1.84375 3.75391 1.44922 4.08984 1.11328C4.42578 0.777344 4.82422 0.507812 5.28516 0.304688C5.74609 0.101562 6.23438 0 6.75 0C7.26562 0 7.75 0.0976563 8.20312 0.292969C8.65625 0.488281 9.05078 0.757812 9.38672 1.10156C9.72266 1.44531 9.99219 1.84375 10.1953 2.29688C10.3984 2.75 10.5 3.23438 10.5 3.75C10.5 4.19531 10.4258 4.62109 10.2773 5.02734C10.1289 5.43359 9.92188 5.79688 9.65625 6.11719C9.39062 6.4375 9.07422 6.71484 8.70703 6.94922C8.33984 7.18359 7.9375 7.33984 7.5 7.41797V14.2734C7.82812 14.0234 8.18359 13.832 8.56641 13.6992C8.94922 13.5664 9.34375 13.5 9.75 13.5H14.25C14.5 13.5 14.7383 13.4609 14.9648 13.3828C15.1914 13.3047 15.3984 13.1953 15.5859 13.0547C15.7734 12.9141 15.9375 12.7461 16.0781 12.5508C16.2188 12.3555 16.3242 12.1367 16.3945 11.8945C15.9727 11.793 15.5859 11.6289 15.2344 11.4023C14.8828 11.1758 14.5781 10.9023 14.3203 10.582C14.0625 10.2617 13.8633 9.90234 13.7227 9.50391C13.582 9.10547 13.5078 8.6875 13.5 8.25C13.5 7.73438 13.5977 7.25 13.793 6.79688C13.9883 6.34375 14.2539 5.94922 14.5898 5.61328C14.9258 5.27734 15.3242 5.00781 15.7852 4.80469C16.2461 4.60156 16.7344 4.5 17.25 4.5C17.7656 4.5 18.25 4.59766 18.7031 4.79297C19.1562 4.98828 19.5508 5.25781 19.8867 5.60156C20.2227 5.94531 20.4922 6.34375 20.6953 6.79688C20.8984 7.25 21 7.73438 21 8.25ZM4.5 3.75C4.5 4.0625 4.55859 4.35547 4.67578 4.62891C4.79297 4.90234 4.95312 5.14062 5.15625 5.34375C5.35938 5.54688 5.59766 5.70703 5.87109 5.82422C6.14453 5.94141 6.4375 6 6.75 6C7.0625 6 7.35547 5.94141 7.62891 5.82422C7.90234 5.70703 8.14062 5.54688 8.34375 5.34375C8.54688 5.14062 8.70703 4.90234 8.82422 4.62891C8.94141 4.35547 9 4.0625 9 3.75C9 3.4375 8.94141 3.14453 8.82422 2.87109C8.70703 2.59766 8.54688 2.35938 8.34375 2.15625C8.14062 1.95312 7.90234 1.79297 7.62891 1.67578C7.35547 1.55859 7.0625 1.5 6.75 1.5C6.4375 1.5 6.14453 1.55859 5.87109 1.67578C5.59766 1.79297 5.35938 1.95312 5.15625 2.15625C4.95312 2.35938 4.79297 2.59766 4.67578 2.87109C4.55859 3.14453 4.5 3.4375 4.5 3.75ZM9 20.25C9 19.9375 8.94141 19.6445 8.82422 19.3711C8.70703 19.0977 8.54688 18.8594 8.34375 18.6562C8.14062 18.4531 7.90234 18.293 7.62891 18.1758C7.35547 18.0586 7.0625 18 6.75 18C6.4375 18 6.14453 18.0586 5.87109 18.1758C5.59766 18.293 5.35938 18.4531 5.15625 18.6562C4.95312 18.8594 4.79297 19.0977 4.67578 19.3711C4.55859 19.6445 4.5 19.9375 4.5 20.25C4.5 20.5625 4.55859 20.8555 4.67578 21.1289C4.79297 21.4023 4.95312 21.6406 5.15625 21.8438C5.35938 22.0469 5.59766 22.207 5.87109 22.3242C6.14453 22.4414 6.4375 22.5 6.75 22.5C7.0625 22.5 7.35547 22.4414 7.62891 22.3242C7.90234 22.207 8.
								fill="url(#paint0_linear_897_3796)"
							/>
							<defs>
								<linearGradient
									id="paint0_linear_897_3796"
									x1="12"
									y1="0"
									x2="12"
									y2="24"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#C1E1B1" />
									<stop offset="1" stop-color="#A7BDE6" />
								</linearGradient>
							</defs>
						</svg>
						<svg
							class="light-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
						>
							<path
								d="M21 8.25C21 8.70312 20.9258 9.13281 20.7773 9.53906C20.6289 9.94531 20.4141 10.3125 20.1328 10.6406C19.8516 10.9688 19.5273 11.2461 19.1602 11.4727C18.793 11.6992 18.3828 11.8516 17.9297 11.9297C17.8438 12.375 17.6914 12.7852 17.4727 13.1602C17.2539 13.5352 16.9766 13.8594 16.6406 14.1328C16.3047 14.4062 15.9375 14.6172 15.5391 14.7656C15.1406 14.9141 14.7109 14.9922 14.25 15H9.75C9.5 15 9.26172 15.0391 9.03516 15.1172C8.80859 15.1953 8.60156 15.3047 8.41406 15.4453C8.22656 15.5859 8.0625 15.7539 7.92188 15.9492C7.78125 16.1445 7.67578 16.3633 7.60547 16.6055C8.02734 16.707 8.41406 16.8711 8.76562 17.0977C9.11719 17.3242 9.42188 17.6016 9.67969 17.9297C9.9375 18.2578 10.1367 18.6172 10.2773 19.0078C10.418 19.3984 10.4922 19.8125 10.5 20.25C10.5 20.7656 10.4023 21.25 10.207 21.7031C10.0117 22.1562 9.74219 22.5547 9.39844 22.8984C9.05469 23.2422 8.65625 23.5117 8.20312 23.707C7.75 23.9023 7.26562 24 6.75 24C6.23438 24 5.75 23.9023 5.29688 23.707C4.84375 23.5117 4.44531 23.2461 4.10156 22.9102C3.75781 22.5742 3.48828 22.1758 3.29297 21.7148C3.09766 21.2539 3 20.7656 3 20.25C3 19.8047 3.07422 19.3789 3.22266 18.9727C3.37109 18.5664 3.57812 18.2031 3.84375 17.8828C4.10938 17.5625 4.42578 17.2852 4.79297 17.0508C5.16016 16.8164 5.5625 16.6602 6 16.582V7.41797C5.5625 7.33203 5.16016 7.17578 4.79297 6.94922C4.42578 6.72266 4.10938 6.44922 3.84375 6.12891C3.57812 5.80859 3.37109 5.44141 3.22266 5.02734C3.07422 4.61328 3 4.1875 3 3.75C3 3.23438 3.09766 2.75 3.29297 2.29688C3.48828 1.84375 3.75391 1.44922 4.08984 1.11328C4.42578 0.777344 4.82422 0.507812 5.28516 0.304688C5.74609 0.101562 6.23438 0 6.75 0C7.26562 0 7.75 0.0976563 8.20312 0.292969C8.65625 0.488281 9.05078 0.757812 9.38672 1.10156C9.72266 1.44531 9.99219 1.84375 10.1953 2.29688C10.3984 2.75 10.5 3.23438 10.5 3.75C10.5 4.19531 10.4258 4.62109 10.2773 5.02734C10.1289 5.43359 9.92188 5.79688 9.65625 6.11719C9.39062 6.4375 9.07422 6.71484 8.70703 6.94922C8.33984 7.18359 7.9375 7.33984 7.5 7.41797V14.2734C7.82812 14.0234 8.18359 13.832 8.56641 13.6992C8.94922 13.5664 9.34375 13.5 9.75 13.5H14.25C14.5 13.5 14.7383 13.4609 14.9648 13.3828C15.1914 13.3047 15.3984 13.1953 15.5859 13.0547C15.7734 12.9141 15.9375 12.7461 16.0781 12.5508C16.2188 12.3555 16.3242 12.1367 16.3945 11.8945C15.9727 11.793 15.5859 11.6289 15.2344 11.4023C14.8828 11.1758 14.5781 10.9023 14.3203 10.582C14.0625 10.2617 13.8633 9.90234 13.7227 9.50391C13.582 9.10547 13.5078 8.6875 13.5 8.25C13.5 7.73438 13.5977 7.25 13.793 6.79688C13.9883 6.34375 14.2539 5.94922 14.5898 5.61328C14.9258 5.27734 15.3242 5.00781 15.7852 4.80469C16.2461 4.60156 16.7344 4.5 17.25 4.5C17.7656 4.5 18.25 4.59766 18.7031 4.79297C19.1562 4.98828 19.5508 5.25781 19.8867 5.60156C20.2227 5.94531 20.4922 6.34375 20.6953 6.79688C20.8984 7.25 21 7.73438 21 8.25ZM4.5 3.75C4.5 4.0625 4.55859 4.35547 4.67578 4.62891C4.79297 4.90234 4.95312 5.14062 5.15625 5.34375C5.35938 5.54688 5.59766 5.70703 5.87109 5.82422C6.14453 5.94141 6.4375 6 6.75 6C7.0625 6 7.35547 5.94141 7.62891 5.82422C7.90234 5.70703 8.14062 5.54688 8.34375 5.34375C8.54688 5.14062 8.70703 4.90234 8.82422 4.62891C8.94141 4.35547 9 4.0625 9 3.75C9 3.4375 8.94141 3.14453 8.82422 2.87109C8.70703 2.59766 8.54688 2.35938 8.34375 2.15625C8.14062 1.95312 7.90234 1.79297 7.62891 1.67578C7.35547 1.55859 7.0625 1.5 6.75 1.5C6.4375 1.5 6.14453 1.55859 5.87109 1.67578C5.59766 1.79297 5.35938 1.95312 5.15625 2.15625C4.95312 2.35938 4.79297 2.59766 4.67578 2.87109C4.55859 3.14453 4.5 3.4375 4.5 3.75ZM9 20.25C9 19.9375 8.94141 19.6445 8.82422 19.3711C8.70703 19.0977 8.54688 18.8594 8.34375 18.6562C8.14062 18.4531 7.90234 18.293 7.62891 18.1758C7.35547 18.0586 7.0625 18 6.75 18C6.4375 18 6.14453 18.0586 5.87109 18.1758C5.59766 18.293 5.35938 18.4531 5.15625 18.6562C4.95312 18.8594 4.79297 19.0977 4.67578 19.3711C4.55859 19.6445 4.5 19.9375 4.5 20.25C4.5 20.5625 4.55859 20.8555 4.67578 21.1289C4.79297 21.4023 4.95312 21.6406 5.15625 21.8438C5.35938 22.0469 5.59766 22.207 5.87109 22.3242C6.14453 22.4414 6.4375 22.5 6.75 22.5C7.0625 22.5 7.35547 22.4414 7.62891 22.3242C7.90234 22.207 8.
								fill="url(#paint0_linear_944_4967)"
							/>
							<defs>
								<linearGradient
									id="paint0_linear_944_4967"
									x1="12"
									y1="0"
									x2="12"
									y2="24"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#A7D0FF" />
									<stop offset="0.414928" stop-color="#00BD3C" />
								</linearGradient>
							</defs>
						</svg>
						<h3>{{ formatMessage(messages.openSource) }}</h3>
					</div>
					<div class="description">
						<IntlFormatted :message-id="messages.openSourceDescription">
							<template #github-link="{ children }">
								<a href="https://github.com/modrinth/code" rel="noopener" target="_blank">
									<component :is="() => children" />
								</a>
							</template>
						</IntlFormatted>
					</div>
				</div>
				<div class="point">
					<div class="title">
						<svg
							class="dark-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
						>
							<g clip-path="url(#clip0_897_3802)">
								<path
									d="M4.39313 8.58984C2.31984 9.28359 0.75 10.9266 0.75 13.5C0.75 16.5938 3.28125 18.75 6.375 18.75H15.0173M21.9291 17.7066C22.7456 17.0297 23.25 16.013 23.25 14.625C23.25 11.8209 20.7656 10.605 18.75 10.5C18.3333 6.30281 15.4219 3.75 12 3.75C10.7738 3.75 9.71297 4.07484 8.83125 4.60031"
									stroke="url(#paint0_linear_897_3802)"
									stroke-width="2.34783"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
								<path
									d="M21 21L3 3"
									stroke="url(#paint1_linear_897_3802)"
									stroke-width="2.34783"
									stroke-miterlimit="10"
									stroke-linecap="round"
								/>
							</g>
							<defs>
								<linearGradient
									id="paint0_linear_897_3802"
									x1="12"
									y1="3.75"
									x2="12"
									y2="18.75"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#C1E1B1" />
									<stop offset="1" stop-color="#A7BDE6" />
								</linearGradient>
								<linearGradient
									id="paint1_linear_897_3802"
									x1="12"
									y1="3"
									x2="12"
									y2="21"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#C1E1B1" />
									<stop offset="1" stop-color="#A7BDE6" />
								</linearGradient>
								<clipPath id="clip0_897_3802">
									<rect width="24" height="24" fill="white" />
								</clipPath>
							</defs>
						</svg>
						<svg
							class="light-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="26"
							height="24"
							viewBox="0 0 26 24"
							fill="none"
						>
							<path
								d="M5.39313 8.58984C3.31984 9.28359 1.75 10.9266 1.75 13.5C1.75 16.5938 4.28125 18.75 7.375 18.75H16.0173M22.9291 17.7066C23.7456 17.0297 24.25 16.013 24.25 14.625C24.25 11.8209 21.7656 10.605 19.75 10.5C19.3333 6.30281 16.4219 3.75 13 3.75C11.7738 3.75 10.713 4.07484 9.83125 4.60031"
								stroke="url(#paint0_linear_944_4973)"
								stroke-width="2.34783"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
							<path
								d="M22 21L4 3"
								stroke="url(#paint1_linear_944_4973)"
								stroke-width="2.34783"
								stroke-miterlimit="10"
								stroke-linecap="round"
							/>
							<defs>
								<linearGradient
									id="paint0_linear_944_4973"
									x1="13"
									y1="3.75"
									x2="13"
									y2="18.75"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#A7D0FF" />
									<stop offset="0.414928" stop-color="#00BD3C" />
								</linearGradient>
								<linearGradient
									id="paint1_linear_944_4973"
									x1="13"
									y1="3"
									x2="13"
									y2="21"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#A7D0FF" />
									<stop offset="0.414928" stop-color="#00BD3C" />
								</linearGradient>
							</defs>
						</svg>
						<h3>{{ formatMessage(messages.offlineMode) }}</h3>
					</div>
					<div class="description">
						{{ formatMessage(messages.offlineModeDescription) }}
					</div>
				</div>
				<div class="point">
					<div class="title">
						<svg
							class="dark-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
						>
							<path
								d="M22.8533 11.7089C22.8205 11.6379 22.0264 9.94977 20.2611 8.25801C17.9089 6.00383 14.938 4.8125 11.668 4.8125C8.39796 4.8125 5.42702 6.00383 3.07483 8.25801C1.30952 9.94977 0.51171 11.6406 0.482647 11.7089C0.440003 11.8008 0.417969 11.9003 0.417969 12.0009C0.417969 12.1015 0.440003 12.201 0.482647 12.2929C0.51546 12.3639 1.30952 14.0511 3.07483 15.7429C5.42702 17.9962 8.39796 19.1875 11.668 19.1875C14.938 19.1875 17.9089 17.9962 20.2611 15.7429C22.0264 14.0511 22.8205 12.3639 22.8533 12.2929C22.8959 12.201 22.918 12.1015 22.918 12.0009C22.918 11.9003 22.8959 11.8008 22.8533 11.7089ZM11.668 17.75C8.78234 17.75 6.2614 16.7446 4.17452 14.7627C3.31825 13.9466 2.58976 13.0161 2.01171 12C2.58961 10.9838 3.31811 10.0532 4.17452 9.2373C6.2614 7.25535 8.78234 6.25 11.668 6.25C14.5536 6.25 17.0745 7.25535 19.1614 9.2373C20.0193 10.053 20.7494 10.9836 21.3289 12C20.653 13.2093 17.7083 17.75 11.668 17.75ZM11.668 7.6875C10.7779 7.6875 9.90792 7.94042 9.16789 8.41429C8.42787 8.88815 7.8511 9.56167 7.5105 10.3497C7.16991 11.1377 7.08079 12.0048 7.25443 12.8413C7.42806 13.6779 7.85664 14.4463 8.48598 15.0494C9.11532 15.6525 9.91714 16.0632 10.7901 16.2296C11.663 16.396 12.5678 16.3106 13.39 15.9842C14.2123 15.6578 14.9151 15.1051 15.4096 14.3959C15.904 13.6867 16.168 12.8529 16.168 12C16.1667 10.8566 15.6922 9.76041 14.8486 8.95192C14.0049 8.14342 12.8611 7.68869 11.668 7.6875ZM11.668 14.875C11.0746 14.875 10.4946 14.7064 10.0012 14.3905C9.5079 14.0746 9.12338 13.6256 8.89632 13.1002C8.66926 12.5749 8.60985 11.9968 8.7256 11.4391C8.84136 10.8814 9.12708 10.3691 9.54664 9.96707C9.9662 9.56499 10.5007 9.29117 11.0827 9.18024C11.6646 9.06931 12.2678 9.12624 12.816 9.34385C13.3642 9.56145 13.8327 9.92994 14.1624 10.4027C14.492 10.8755 14.668 11.4314 14.668 12C14.668 12.7625 14.3519 13.4938 13.7893 14.0329C13.2267 14.5721 12.4636 14.875 11.668 14.875Z"
								fill="url(#paint0_linear_897_3809)"
							/>
							<defs>
								<linearGradient
									id="paint0_linear_897_3809"
									x1="11.668"
									y1="4.8125"
									x2="11.668"
									y2="19.1875"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#C1E1B1" />
									<stop offset="1" stop-color="#A7BDE6" />
								</linearGradient>
							</defs>
						</svg>
						<svg
							class="light-icon"
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
							fill="none"
						>
							<path
								d="M22.8533 11.7089C22.8205 11.6379 22.0264 9.94977 20.2611 8.25801C17.9089 6.00383 14.938 4.8125 11.668 4.8125C8.39796 4.8125 5.42702 6.00383 3.07483 8.25801C1.30952 9.94977 0.51171 11.6406 0.482647 11.7089C0.440003 11.8008 0.417969 11.9003 0.417969 12.0009C0.417969 12.1015 0.440003 12.201 0.482647 12.2929C0.51546 12.3639 1.30952 14.0511 3.07483 15.7429C5.42702 17.9962 8.39796 19.1875 11.668 19.1875C14.938 19.1875 17.9089 17.9962 20.2611 15.7429C22.0264 14.0511 22.8205 12.3639 22.8533 12.2929C22.8959 12.201 22.918 12.1015 22.918 12.0009C22.918 11.9003 22.8959 11.8008 22.8533 11.7089ZM11.668 17.75C8.78234 17.75 6.2614 16.7446 4.17452 14.7627C3.31825 13.9466 2.58976 13.0161 2.01171 12C2.58961 10.9838 3.31811 10.0532 4.17452 9.2373C6.2614 7.25535 8.78234 6.25 11.668 6.25C14.5536 6.25 17.0745 7.25535 19.1614 9.2373C20.0193 10.053 20.7494 10.9836 21.3289 12C20.653 13.2093 17.7083 17.75 11.668 17.75ZM11.668 7.6875C10.7779 7.6875 9.90792 7.94042 9.16789 8.41429C8.42787 8.88815 7.8511 9.56167 7.5105 10.3497C7.16991 11.1377 7.08079 12.0048 7.25443 12.8413C7.42806 13.6779 7.85664 14.4463 8.48598 15.0494C9.11532 15.6525 9.91714 16.0632 10.7901 16.2296C11.663 16.396 12.5678 16.3106 13.39 15.9842C14.2123 15.6578 14.9151 15.1051 15.4096 14.3959C15.904 13.6867 16.168 12.8529 16.168 12C16.1667 10.8566 15.6922 9.76041 14.8486 8.95192C14.0049 8.14342 12.8611 7.68869 11.668 7.6875ZM11.668 14.875C11.0746 14.875 10.4946 14.7064 10.0012 14.3905C9.5079 14.0746 9.12338 13.6256 8.89632 13.1002C8.66926 12.5749 8.60985 11.9968 8.7256 11.4391C8.84136 10.8814 9.12708 10.3691 9.54664 9.96707C9.9662 9.56499 10.5007 9.29117 11.0827 9.18024C11.6646 9.06931 12.2678 9.12624 12.816 9.34385C13.3642 9.56145 13.8327 9.92994 14.1624 10.4027C14.492 10.8755 14.668 11.4314 14.668 12C14.668 12.7625 14.3519 13.4938 13.7893 14.0329C13.2267 14.5721 12.4636 14.875 11.668 14.875Z"
								fill="url(#paint0_linear_944_4980)"
							/>
							<defs>
								<linearGradient
									id="paint0_linear_944_4980"
									x1="11.668"
									y1="4.8125"
									x2="11.668"
									y2="19.1875"
									gradientUnits="userSpaceOnUse"
								>
									<stop stop-color="#A7D0FF" />
									<stop offset="0.414928" stop-color="#00BD3C" />
								</linearGradient>
							</defs>
						</svg>
						<h3>{{ formatMessage(messages.followProjects) }}</h3>
					</div>
					<div class="description">{{ formatMessage(messages.followProjectsDescription) }}</div>
				</div>
			</div>
		</div>
		<div ref="downloadSection" class="footer">
			<div class="section-badge">{{ formatMessage(messages.downloadOptions) }}</div>
			<div class="section-subheader">
				<div class="section-subheader-title">
					{{ formatMessage(messages.downloadModrinthAppBeta) }}
				</div>
				<div class="section-subheader-description">
					{{ formatMessage(messages.downloadDescription) }}
				</div>
			</div>
			<div class="download-section">
				<div class="download-card">
					<div class="title">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4875 4875" fill="currentColor">
							<path
								d="M0 0h2311v2310H0zm2564 0h2311v2310H2564zM0 2564h2311v2311H0zm2564 0h2311v2311H2564"
							/>
						</svg>
						{{ formatMessage(messages.windows) }}
					</div>
					<div class="description">
						<a ref="downloadWindows" :href="windowsLink || undefined" download="">
							<DownloadIcon />
							<span>{{ formatMessage(messages.downloadTheBeta) }}</span>
						</a>
					</div>
				</div>
				<div class="divider" />
				<div class="download-card">
					<div class="title">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="44"
							height="44"
							viewBox="0 0 44 44"
							fill="none"
						>
							<path
								d="M33.5752 37.7889C31.3308 39.8664 28.8802 39.5384 26.5212 38.5543C24.0248 37.5484 21.7345 37.5046 19.1007 38.5543C15.8027 39.9102 14.0621 39.5165 12.0924 37.7889C0.915868 26.789 2.56487 10.0377 15.253 9.42536C18.3449 9.57844 20.4978 11.0436 22.3071 11.1748C25.0096 10.65 27.5976 9.14107 30.4834 9.33789C33.9417 9.60031 36.5526 10.9124 38.2703 13.2742C31.1247 17.3637 32.8195 26.3516 39.3697 28.8665C38.0642 32.1468 36.3694 35.4052 33.5523 37.8108L33.5752 37.7889ZM22.078 9.29415C21.7345 4.41745 25.8799 0.393635 30.6437 0C31.3079 5.6421 25.2844 9.84086 22.078 9.29415Z"
								fill="currentColor"
							/>
						</svg>
						{{ formatMessage(messages.mac) }}
					</div>
					<div class="description apple">
						<a ref="downloadMac" :href="macLinks.universal || undefined" download="">
							<DownloadIcon />
							<span>{{ formatMessage(messages.downloadTheBeta) }}</span>
						</a>
					</div>
				</div>
				<div class="divider" />
				<div class="download-card">
					<div class="title">
						<svg
							class="dark-icon"
							width="45"
							height="46"
							viewBox="0 0 45 46"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								id="Subtract"
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M23.5477 0H23.5461C23.2284 0 22.9077 0.0163711 22.5876 0.0415902C20.4638 0.208942 18.8991 0.910133 17.7996 2.0082C16.7124 3.09404 16.1751 4.47323 15.9172 5.82868C15.6602 7.18017 15.6685 8.57463 15.7244 9.76049C15.7464 10.2267 15.7737 10.6424 15.7981 11.0129L15.7981 11.0129C15.8393 11.6392 15.8719 12.1361 15.856 12.5288C15.7269 14.3647 15.3652 15.7513 14.1358 17.5116C12.4894 19.4715 10.1353 22.6851 9.00147 26.0938C8.50987 27.5652 8.23247 29.1259 8.37804 30.6595C8.14194 30.9205 7.94151 31.1909 7.77396 31.4209L7.69935 31.5235C7.53577 31.7486 7.41036 31.9212 7.28343 32.0672C7.22885 32.1165 7.13829 32.1747 6.95723 32.2529C6.85646 32.2965 6.74665 32.3386 6.60714 32.3918L6.60229 32.3937L6.60063 32.3943C6.4689 32.4446 6.31402 32.5038 6.15349 32.5722L6.14713 32.575C6.11461 32.5891 6.08029 32.6038 6.04439 32.6191L6.04194 32.6201C5.49857 32.8521 4.5956 33.2374 4.06765 34.2907L4.06313 34.2998L4.05878 34.3089C3.83111 34.787 3.71086 35.3126 3.71965 35.8518C3.72044 36.2784 3.77526 36.6973 3.83488 36.9965L3.8573 37.1494C3.90153 37.4502 3.93607 37.685 3.9521 37.8975C3.96952 38.1284 3.9557 38.2416 3.94333 38.2911C3.47501 39.5811 3.29341 40.7747 3.80981 41.7808L3.81261 41.7862C4.34311 42.8045 5.41437 43.1509 6.09597 43.3713L6.14873 43.3884L6.1831 43.3968C6.76559 43.5407 7.45296 43.6219 8.08651 43.6967L8.08657 43.6967C8.33286 43.7258 8.57102 43.7539 8.79172 43.7844C9.65223 43.9032 10.4057 44.0681 11.0346 44.4066L11.0467 44.4131L11.0589 44.4193C12.8487 45.3199 14.8309 45.8073 16.5413 45.3594C17.5947 45.1214 18.5098 44.4944 19.1114 43.6161C19.5314 43.5681 19.9501 43.481 20.3513 43.3976L20.4887 43.3691C21.1456 43.2333 21.8552 43.0939 22.7255 43.039L22.7353 43.0384L22.7452 43.0376C23.2171 42.9984 23.7676 43.0823 24.5478 43.2012L24.6654 43.2192C25.2572 43.3092 25.9398 43.4072 26.6797 43.4223L26.7366 43.5729L26.7865 43.6228C27.7132 45.3272 29.3865 46.1223 31.1344 45.9841C32.8861 45.8473 34.6161 44.7911 35.9501 43.2465L35.9575 43.2379L35.9647 43.2291C36.4178 42.6799 37.0511 42.2572 37.7983 41.8603C38.1016 41.6992 38.4052 41.5515 38.7175 41.3996L38.7179 41.3994L38.936 41.2932C39.3111 41.1099 39.7022 40.9143 40.0596 40.6996C40.783 40.2838 41.6765 39.5491 41.7413 38.3282C41.8014 37.2663 41.2531 36.3256 40.4338 35.3719V35.1588L40.1744 34.8993C40.1374 34.8477 40.0795 34.7411 40.0113 34.5353C39.934 34.302 39.8672 34.0188 39.7856 33.6562C39.6368 32.9545 39.4127 31.9102 38.5493 31.186L38.3995 31.0604C38.9576 28.7316 38.5908 26.4633 37.8259 24.46C36.7898 21.7201 34.9984 19.3692 33.6785 17.7973L33.6778 17.7965C32.1849 15.9116 31.019 14.4397 31.0434 12.2669C31.0453 12.1131 31.0478 11.9522 31.0504 11.7849C31.0801 9.87812 31.1226 7.15021 30.3612 4.83914C29.9387 3.55665 29.2488 2.33019 28.115 1.42642C26.9706 0.514298 25.4646 0.00304389 23.5477 0ZM22.666 1.0385C22.9685 1.01467 23.2618 1 23.546 1C30.2102 1.01058 30.1098 7.76032 30.0499 11.7866C30.0475 11.9472 30.0452 12.1035 30.0433 12.2548C30.0146 14.7849 31.382 16.51 32.8074 18.3084C32.8393 18.3487 32.8713 18.3891 32.9033 18.4295C34.205 19.9787 35.9137 22.23 36.8908 24.815C37.692 26.9123 37.9982 29.2443 37.208 31.5873C37.3329 31.5924 37.4538 31.6331 37.5563 31.7047C37.6223 31.7737 37.6877 31.8118 37.7513 31.8488C37.8026 31.8787 37.8527 31.908 37.901 31.9522H37.9065C38.4748 32.4288 38.6527 33.1347 38.8085 33.8698C38.9698 34.5867 39.1165 35.2008 39.4282 35.5675L39.4337 35.573V35.7508C40.376 36.7867 40.7848 37.5402 40.7427 38.2735C40.706 38.9775 40.1908 39.4725 39.5528 39.8373C39.1757 40.0647 38.7412 40.276 38.2863 40.4973C37.2045 41.0234 36.0076 41.6055 35.1932 42.5928C33.974 44.0045 32.4688 44.8772 31.0553 44.9872C29.6418 45.099 28.3182 44.45 27.6013 43.0237L27.5958 43.0182C27.5697 42.949 27.5454 42.89 27.523 42.8356C27.4653 42.6951 27.4199 42.5847 27.3868 42.4077C26.4008 42.4735 25.4823 42.3328 24.6448 42.2044C23.9204 42.0934 23.2567 41.9917 22.6623 42.041C21.6653 42.1039 20.8661 42.2696 20.1753 42.4127C19.5578 42.5407 19.027 42.6507 18.519 42.6533C18.0827 43.537 17.2687 44.175 16.3043 44.3877C14.9293 44.7543 13.206 44.3803 11.5083 43.526C10.4773 42.9711 9.26303 42.8279 8.13135 42.6944C7.52434 42.62
								fill="white"
							/>
						</svg>
						<svg
							class="light-icon"
							role="img"
							viewBox="0 0 24 24"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005
							/>
						</svg>
						<div class="flex">
							{{ formatMessage(messages.linux) }}<span class="text-sm text-secondary">*</span>
						</div>
					</div>
					<div class="description apple">
						<a :href="linuxLinks.appImage || undefined" download="">
							<DownloadIcon />
							<span>{{ formatMessage(messages.downloadTheAppImage) }}</span>
						</a>
						<a :href="linuxLinks.deb || undefined" download="">
							<DownloadIcon />
							<span>{{ formatMessage(messages.downloadTheDEB) }}</span>
						</a>
						<a :href="linuxLinks.rpm || undefined" download="">
							<DownloadIcon />
							<span>{{ formatMessage(messages.downloadTheRPM) }}</span>
						</a>
						<a :href="linuxLinks.thirdParty || undefined" download="">
							<LinkIcon />
							<span>{{ formatMessage(messages.thirdPartyPackages) }}</span>
						</a>
					</div>
				</div>
			</div>
			<p class="terms">
				<IntlFormatted :message-id="messages.downloadTerms">
					<template #terms-link="{ children }">
						<nuxt-link to="/legal/terms">
							<component :is="() => children" />
						</nuxt-link>
					</template>
					<template #privacy-link="{ children }">
						<nuxt-link to="/legal/privacy">
							<component :is="() => children" />
						</nuxt-link>
					</template>
				</IntlFormatted>
			</p>
			<p class="max-w-[50rem] text-xs text-secondary">
				*<IntlFormatted :message-id="messages.linuxDisclaimer">
					<template #issues-link="{ children }">
						<a
							class="underline hover:brightness-[--hover-brightness]"
							href="https://github.com/modrinth/code/issues/3057"
							target="_blank"
						>
							<component :is="() => children" />
						</a>
					</template>
					<template #prism-link="{ children }">
						<a
							class="underline hover:brightness-[--hover-brightness]"
							href="https://prismlauncher.org/"
							target="_blank"
						>
							<component :is="() => children" />
						</a>
					</template>
				</IntlFormatted>
			</p>
		</div>
		<div class="bg-[var(--landing-raw-bg)]">
			<LatestNewsRow />
		</div>
	</div>
</template>

<style scoped lang="scss">
.landing-hero {
	position: relative;
	background: #0f1121 url('https://cdn-raw.modrinth.com/app-landing/cube-black.png') no-repeat
		center 4rem;
	background-size: cover;
	padding: 6rem 1rem 12rem 1rem;
	margin-top: -5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	isolation: isolate;

	.main-subheader {
		font-size: 1.625rem;
	}

	h2 {
		line-height: 125%;
		margin: 0 0 1.625rem;
		font-weight: 400;
		line-break: loose;
		color: var(--landing-color-subheading);
		max-width: 1096px;
		mask-image: none;
	}

	.button-group {
		width: fit-content;
		margin: 0 auto;
		justify-content: center;
		mask-image: none;

		.outline-button {
			color: var(--landing-color-heading);
			background: none;
			border: 1px var(--landing-color-heading) solid;
		}
	}

	img {
		width: 100%;
		max-width: 65rem;
		height: auto;
		mask-image: none;
		z-index: 1;
	}

	.bottom-transition {
		z-index: -1;
	}
}

.main-header {
	font-size: 5.25rem;
	font-weight: 600;
	line-height: 100%;
	margin: 1rem 0 2rem;
}

.subheader {
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 100%;
	margin: 0 auto;
	padding: 0 4rem 4rem;
}

.features {
	position: relative;
	width: 100%;
	background: var(--landing-transition-gradient-end);
	align-content: center;
	justify-content: center;
	display: flex;
	flex-direction: column;

	h3 {
		font-weight: 500;
		font-size: var(--font-size-xl) !important;
	}

	p {
		font-size: var(--font-size-md) !important;
	}

	.feature-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 1fr);
		max-width: min(100%, 1096px);
		width: min(100%, 1096px);
		gap: 16px;
		margin: 0 auto;
		padding: 1rem;

		.mods {
			grid-column: 1 / 2;
			grid-row: 1 / 3;

			.table {
				margin-bottom: 1rem;
				overflow: hidden;
				max-height: 32rem;
			}

			h3,
			p {
				text-align: center;
			}

			h4 {
				margin: 0;
				color: var(--color-contrast);
			}

			.search-bar {
				width: 100%;
				padding: var(--gap-sm);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-radius: var(--radius-md);
				border: 1px solid var(--landing-border-color);
				background: linear-gradient(0deg, #3b3f55 0%, #3b3f55 100%), rgba(59, 63, 85, 0.15);
				margin-bottom: 0.5rem;
				white-space: nowrap;
				font-size: var(--font-size-sm);

				.mini-input {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 0.5rem;
					padding: var(--gap-sm) var(--gap-md);
					border-radius: var(--radius-sm);
					background-color: #1e202f;
					flex-grow: 1;
					max-width: 12rem;
				}

				h4 {
					font-weight: normal;
					margin-left: 0.5rem;
				}
			}

			.row {
				display: grid;
				grid-template-columns: 3rem 2fr 1fr 3.75rem;
				padding: 0 var(--gap-sm);
				gap: 1rem;

				.cell {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: var(--gap-sm) 0;
					font-size: var(--font-size-sm);

					.name {
						color: var(--color-contrast);
					}

					.description {
						font-size: var(--font-size-xs);
					}

					&.last {
						align-items: flex-end;
					}

					&.check {
						align-items: center;
						flex-direction: row;
					}
				}
			}

			.header {
				.cell {
					color: var(--color-base);
				}
			}
		}

		.playing {
			grid-column: 1 / 2;
			grid-row: 4 / 5;
			position: relative;
			min-height: 23rem;

			.minecraft {
				position: absolute;
				bottom: 6rem;
				right: var(--gap-xl);
				height: 13rem;
				mask-image: none;
			}

			.launcher {
				position: absolute;
				z-index: 12;
				top: var(--gap-xl);
				left: var(--gap-xl);
				height: 13rem;
				mask-image: none;
			}

			.text {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: var(--color-contrast);
				text-align: center;
				padding: var(--gap-xl);
				mask-image: none;
				z-index: 10;
				width: 100%;
			}
		}

		.sharing {
			grid-column: 2 / 3;
			grid-row: 2 / 3;

			.table {
				height: 11rem;
				overflow: hidden;
				margin-bottom: 1rem;
			}

			h3,
			p {
				text-align: center;
			}

			.row {
				display: grid;
				grid-template-columns: 3rem 1fr 2fr;
				padding: 0 var(--gap-sm);
				gap: 1rem;

				.cell {
					display: flex;
					align-items: center;
					padding: var(--gap-sm) 0;

					.description {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
			}

			.header {
				display: flex;
				flex-direction: row;
				gap: 0.25rem;
				padding: var(--gap-sm) var(--gap-sm);
			}

			.export-card {
				position: absolute;
				right: 1rem;
				top: 1.5rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: var(--gap-sm);
				gap: var(--gap-md);
				border-radius: var(--radius-md);
				background: linear-gradient(0deg, #3b3f55 0%, #3b3f55 100%), rgba(59, 63, 85, 0.15);
				border: 1px solid var(--landing-border-color);
				margin-bottom: 1rem;
				width: 20rem;
				font-size: var(--font-size-sm);

				img {
					width: 4.5rem;
					height: 4.5rem;
				}

				.info {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 0.25rem;

					.exporting {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 0.5rem;
						width: 100%;

						.tag {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 0.25rem;
							border-radius: var(--radius-sm);
						}

						.small-button {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 0.25rem;
							padding: var(--gap-xs) var(--gap-md);
							border-radius: var(--radius-lg);
							border: 1px solid var(--landing-border-color);
							font-size: var(--font-size-xs);
						}
					}

					.name {
						font-size: var(--font-size-md);
						color: var(--color-contrast);
						margin: 0;
					}
				}
			}
		}

		.performance {
			grid-column: 1 / 2;
			grid-row: 3 / 4;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-bottom: 0.5rem;

				h3 {
					margin: 0;
					font-size: var(--font-size-lg);
				}
			}

			h3,
			h4,
			p {
				text-align: center;
				margin: 0;
			}

			h4,
			h3 {
				color: var(--color-contrast);
				margin-top: var(--gap-lg) !important;
			}

			h4 {
				font-size: var(--font-size-md);
				font-weight: normal;
			}

			.table {
				height: 10rem;
				overflow: hidden;
			}

			.row {
				display: grid;
				grid-template-columns: 3rem 2fr 1fr 1fr;
				padding: 0 var(--gap-sm);
				gap: 1rem;

				.cell {
					display: flex;
					align-items: center;
					padding: var(--gap-sm) 0;
					color: var(--color-gray);

					&.important {
						color: var(--color-contrast);
						font-weight: 500;
					}
				}
			}

			.header {
				font-size: var(--font-size-sm);
				.cell {
					color: var(--color-base);
				}
			}

			.icon-logo {
				width: 3rem;
				height: 3rem;
				padding: 0.5rem;
				border-radius: var(--radius-sm);
				background-color: var(--color-button-bg);

				&.modrinth {
					background-color: var(--color-brand) !important;
					border: 1px solid var(--color-accent-contrast) !important;

					.icon {
						width: 2rem;
						height: 2rem;
						z-index: 0;

						:deep(svg) {
							width: 2rem;
							height: 2rem;
						}

						:deep(path) {
							fill: var(--color-accent-contrast) !important;
						}
					}
				}
			}
		}

		.importing {
			position: relative;
			grid-column: 2 / 3;
			grid-row: 1 / 2;

			.icon-logo {
				position: absolute;
				top: 4rem;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 100%;
			}

			.outer-circle {
				position: absolute;
				top: 4rem;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.circle {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;

				.base-circle {
					position: absolute;
					border-radius: 100%;
					top: 4rem;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: -1;
					border: 1px solid rgba(#a8b1ddbf, 0.25);
				}

				.first-circle {
					@extend .base-circle;
					width: 15rem;
					height: 15rem;
					background: radial-gradient(
						50% 50% at 50% 50%,
						rgba(5, 206, 69, 0.19) 0%,
						rgba(15, 19, 49, 0.25) 100%
					);
				}

				.second-circle {
					@extend .base-circle;
					width: 25rem;
					height: 25rem;
					opacity: 0.75;
					background:
						radial-gradient(
							50% 50% at 50% 50%,
							rgba(5, 206, 69, 0.19) 0%,
							rgba(15, 19, 49, 0.25) 100%
						),
						radial-gradient(
							50% 50% at 50% 50%,
							rgba(44, 48, 79, 0.25) 0%,
							rgba(32, 35, 50, 0.19) 100%
						);
				}

				.third-circle {
					@extend .base-circle;
					width: 35rem;
					height: 35rem;
					opacity: 0.5;
					background: radial-gradient(
						50% 50% at 50% 50%,
						rgba(44, 48, 79, 0.25) 0%,
						rgba(32, 35, 50, 0.19) 100%
					);
				}
			}

			.inner-circle {
				position: relative;
			}

			.launcher-badge {
				position: absolute;
				background-color: var(--landing-transition-gradient-end);
				width: 3rem;
				height: 3rem;
				padding: 0.5rem;
				border-radius: 100%;
				z-index: 10;
				user-select: none;

				&:hover {
					cursor: default;
				}

				&.top-left {
					top: calc(15% - 3rem);
					left: calc(58% - 11rem);
				}

				&.top-right {
					top: calc(15% - 3rem);
					right: calc(58% - 11rem);
				}

				&.bottom-left {
					bottom: calc(41% + 3rem);
					left: calc(58% - 11rem);
				}

				&.bottom-right {
					bottom: calc(41% + 3rem);
					right: calc(58% - 11rem);
				}

				&.bottom-middle {
					bottom: calc(22% + 3rem);
					left: 50%;
					transform: translateX(-50%);
				}

				&.center {
					top: calc(50% - 3rem);
					left: 50%;
					transform: translate(-50%, -50%);
				}

				svg {
					width: 2rem;
					height: 2rem;
				}

				img {
					width: 2rem;
					height: 2rem;
				}
			}

			.text {
				position: absolute;
				text-align: center;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 100%;
				padding: var(--gap-xl);
			}
		}

		.website {
			grid-column: 2 / 3;
			grid-row: 3 / 5;
			text-align: center;
			padding: 0 !important;

			position: relative;

			.projects-showcase {
				margin: calc(7rem + var(--gap-xl)) 0 var(--gap-xl);
				z-index: 3;
				text-align: left;

				.row {
					--gap: var(--gap-md);

					width: 100vw;
					gap: var(--gap);
					margin-bottom: var(--gap);
					display: flex;
					overflow: hidden;
					user-select: none;

					.row__content {
						flex-shrink: 0;
						display: flex;
						min-width: 100%;
						gap: var(--gap);
						transform: translateX(-15%);

						&.offset {
							transform: translateX(-130%);
						}
					}

					.project {
						position: relative;
						display: flex;

						cursor: pointer;
						padding: 1rem;
						gap: 1rem;
						border-radius: 1rem;
						border: 1px solid var(--landing-border-color);
						transition:
							background 0.5s ease-in-out,
							transform 0.05s ease-in-out;
						// Removed due to lag on mobile :(
						background: var(--landing-blob-gradient);

						img {
							height: 3rem;
						}

						.project-info {
							box-sizing: border-box;
						}

						.title {
							color: var(--landing-color-heading);
							max-width: 13.75rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin: 0;
							font-weight: 600;
							font-size: 1.25rem;
							line-height: 110%;
							display: block;
						}

						.description {
							width: 13.75rem;

							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;

							font-weight: 500;
							font-size: 0.875rem;
							line-height: 125%;
							margin: 0.25rem 0 0;
						}
					}
				}
			}

			.ellipsis {
				position: absolute;
				top: 2rem;
				left: 50%;
				height: 150%;
				z-index: -1;
				aspect-ratio: 1;
				border-radius: 100%;
				transform: translate(-50%, 2rem);
				background: var(--landing-blob-gradient);
				border: 1px solid var(--landing-border-color);
			}

			.icon-logo {
				position: absolute;
				top: 2rem;
				left: 50%;
				transform: translate(-50%, 0);
				z-index: 4;
			}

			p {
				padding: var(--gap-xl);
				padding-top: 0;
			}
		}

		.feature {
			padding: var(--gap-xl);
			z-index: 1;
			background: radial-gradient(
				50% 50% at 50% 50%,
				rgba(44, 48, 79, 0.35) 0%,
				rgba(32, 35, 50, 0.27) 100%
			);
			box-shadow:
				2px 2px 12px 0px rgba(0, 0, 0, 0.16),
				2px 2px 64px 0px rgba(57, 61, 94, 0.45) inset;
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			max-width: 540px;
			width: 100%;
			overflow: hidden;

			.additional-label {
				width: fit-content;
				padding: 0.5rem 0.75rem;
				margin-bottom: 0.5rem;
				background: var(--landing-blue-label-bg);
				color: var(--landing-blue-label);
				border-radius: 6px;
				font-weight: 700;
				font-size: 1rem;
			}

			h3,
			p {
				margin: 0;
			}

			h3 {
				font-size: var(--font-size-xl);
				color: var(--landing-color-heading);
				margin-bottom: 0.375rem;
			}

			p {
				color: var(--landing-color-subheading);
			}
		}
	}

	.feature-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gap-lg);
		max-width: 1096px;
		margin: 0 auto;
		padding: calc(var(--gap-xl) * 2) 1rem;

		@media (max-width: 1024px) {
			grid-template-columns: repeat(1, 1fr);

			.point {
				text-align: center;

				.title {
					justify-content: center;
				}
			}
		}

		.point {
			display: flex;
			flex-direction: column;
			gap: var(--gap-md);
			padding: 1rem 0;

			svg {
				width: 1.5rem;
				height: 1.5rem;
			}

			.title {
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}

			h3 {
				font-size: var(--font-size-lg);
				font-weight: normal;
				color: var(--landing-color-heading);
				margin: 0;
			}

			p {
				color: var(--landing-color-subheading);
				margin: 0;
			}

			a {
				text-decoration: underline;
			}
		}
	}
}

.table {
	display: grid;
	border: 1px solid rgba(#a8b1ddbf, 0.25);
	gap: 0.25rem;
	overflow: hidden;
	font-size: var(--font-size-sm);
	background: rgba(59, 63, 85, 0.15);
	box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.16);

	.btn,
	button {
		&:hover {
			cursor: default !important;
		}
	}

	.first {
		border-top: none !important;
	}

	.row {
		&:not(.header) {
			border-top: 1px solid rgba(#a8b1ddbf, 0.25);
		}
	}
}

.row,
.header,
.table,
.project,
.export-card {
	user-select: none;

	&:hover {
		cursor: default;
	}
}

.footer {
	padding: var(--gap-xl);
	background: var(--color-accent-contrast);
	color: var(--color-contrast);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
	justify-content: center;
	align-items: center;

	.section-badge {
		background-color: var(--color-brand-highlight);
		color: var(--color-brand);
		border-radius: var(--radius-sm);
		width: min-content;
		padding: var(--gap-lg) var(--gap-xl);
		white-space: nowrap;
	}

	.section-subheader {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--gap-sm);
		font-size: var(--font-size-lg);
		margin: 2rem 0;

		.section-subheader-title {
			font-size: var(--font-size-xl);
			margin: 0;
		}

		.section-subheader-description {
			color: var(--color-base);
			margin: 0;
		}
	}

	.download-section {
		display: grid;
		grid-template-columns: 1fr 1px 1fr 1px 1fr;
		height: 100%;
		gap: var(--gap-lg);
		max-width: 1096px;
		margin: 0 auto;

		@media (max-width: 1024px) {
			grid-template-columns: repeat(1, 1fr);
			max-width: 340px;

			.divider {
				display: none;
			}
		}

		.divider {
			height: 13rem;
			width: 1px;
			background: var(--landing-border-color);
			margin: 0;
		}

		.download-card {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gap-lg) * 2);
			padding: calc(var(--gap-lg) * 2);
			height: min-content;

			.title {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: var(--font-size-2xl);
				gap: var(--gap-sm);
				border-radius: var(--radius-md) var(--radius-md) 0 0;
				color: var(--color-contrast);
			}

			.description {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-top: none;
				font-size: var(--font-size-md);
				color: var(--color-brand);
				gap: var(--gap-sm);

				a {
					display: flex;
					align-items: flex-start;
					gap: var(--gap-sm);
					justify-content: center;

					&:hover {
						cursor: pointer;
					}
				}

				&.apple {
					align-items: flex-start;
				}
			}

			:deep(.animated-dropdown) {
				color: var(--color-brand);
				width: 16rem;
				white-space: nowrap;

				.selected {
					border: 1px solid var(--color-brand);
					background-color: var(--color-accent-contrast);
				}

				.options {
					border: 1px solid var(--color-brand);
					border-radius: 0 0 var(--radius-md) var(--radius-md);
				}

				.option {
					background-color: var(--color-accent-contrast);
				}

				.selected-option {
					background-color: var(--color-brand);
				}
			}
		}
	}

	.terms {
		margin: var(--gap-xl);
		font-size: var(--font-size-lg);
		color: var(--landing-color-subheading);
		text-align: center;
		line-height: 1.5;

		a {
			text-decoration: underline;
		}
	}
}

.icon-logo {
	background: var(--color-accent-contrast);
	width: 5rem;
	height: 5rem;
	padding: 0.75rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--landing-border-color);
	border-radius: var(--radius-lg);

	.icon {
		margin: auto;
		height: 3.5rem;

		:deep(svg) {
			width: 3.5rem;
			height: 3.5rem;
		}

		:deep(.rotate) {
			animation: none !important;
		}
	}
}

.gradient-border {
	position: relative;
	border-radius: var(--radius-lg);

	&:before {
		content: '';
		position: absolute;
		inset: 0;
		padding: 1px;
		z-index: -1;
		border-radius: 1rem;
		background: var(--landing-border-gradient);

		-webkit-mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
	}
}

.bottom-transition {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30rem;
	background: linear-gradient(
		0deg,
		var(--landing-transition-gradient-end) 0%,
		var(--landing-transition-gradient-start) 100%
	);
}

@media screen and (max-width: 1024px) {
	.feature-grid {
		grid-template-columns: 1fr !important;
		grid-template-rows: repeat(8, 1fr) !important;
		gap: var(--gap-lg);
		margin: 0 auto;
		align-content: center;

		.feature {
			width: 100% !important;
			margin: 0 auto;
		}

		.mods {
			grid-row: 1 / 3 !important;
			grid-column: 1 / 2 !important;
		}

		.importing {
			grid-row: 3 / 4 !important;
			grid-column: 1 / 2 !important;
		}

		.sharing {
			grid-row: 4 / 5 !important;
			grid-column: 1 / 2 !important;
		}

		.performance {
			grid-row: 5 / 6 !important;
			grid-column: 1 / 2 !important;
		}

		.playing {
			grid-row: 6 / 7 !important;
			grid-column: 1 / 2 !important;
		}

		.website {
			grid-row: 7 / 9 !important;
			grid-column: 1 / 2 !important;
		}
	}

	.main-header {
		font-size: 4rem !important;
	}

	.subheader {
		font-size: 1.5rem !important;
	}

	.main-subheader {
		font-size: 1.25rem !important;
	}
}

@media screen and (max-width: 746px) {
	.main-header {
		font-size: 3rem !important;
	}

	.subheader {
		font-size: 1.25rem !important;
	}

	.main-subheader {
		font-size: 1.1rem !important;
	}

	.logo-banner {
		padding: 3rem 1rem 3.75rem 1rem;

		.overlay {
			bottom: 3.5rem;
		}
	}
}

.dark-icon {
	display: block;
}

.light-icon {
	display: none;
}

.light-mode {
	.footer,
	.features {
		background: #f8f7f8;
	}

	.bottom-transition {
		background: linear-gradient(rgba(#f8f7f8, 0) 0%, #f8f7f8 100%);
	}

	.dark-icon {
		display: none;
	}

	.light-icon {
		display: block;
	}

	.feature {
		background: radial-gradient(
			50% 50% at 50% 50%,
			rgba(255, 255, 255, 0.35) 0%,
			rgba(255, 255, 255, 0.27) 100%
		) !important;
		box-shadow:
			2px 2px 64px 0px rgba(255, 255, 255, 0.45) inset,
			2px 2px 12px 0px rgba(0, 0, 0, 0.16) !important;
		border: none !important;
	}

	.gradient-border {
		&:before {
			background: var(--landing-border-gradient-light);
		}
	}

	.search-bar {
		background: var(--color-raised-bg) !important;
		border: 2px solid var(--color-brand) !important;

		.mini-input {
			background: var(--color-raised-bg) !important;
			border: 2px solid var(--color-bg);
		}
	}

	.ellipsis {
		opacity: 0.75;
		background: linear-gradient(
			180deg,
			rgba(5, 206, 69, 0.15) 0%,
			rgba(5, 206, 69, 0) 100%
		) !important;
	}

	.landing-hero {
		background: url('https://cdn-raw.modrinth.com/app-landing/cube-light.png') no-repeat center 4rem;
		background-size: cover;
	}

	.base-circle {
		border: 1px solid rgba(#a8b1ddbf, 0.25) !important;
	}

	.first-circle {
		background: linear-gradient(
			180deg,
			rgba(5, 206, 69, 0.15) 0%,
			rgba(5, 206, 69, 0) 100%
		) !important;
	}

	.second-circle {
		background: linear-gradient(
			180deg,
			rgba(5, 206, 69, 0.15) 0%,
			rgba(5, 206, 69, 0) 100%
		) !important;
	}

	.third-circle {
		background: linear-gradient(
			180deg,
			rgba(5, 206, 69, 0.15) 0%,
			rgba(5, 206, 69, 0) 100%
		) !important;
	}

	.table {
		background: white;
	}

	.project {
		background: rgba(255, 255, 255, 0.8) !important;
	}

	.export-card {
		background: white !important;
	}
}

.main-header-strong {
	font-weight: 600;
	background-color: #00bd3c;
	background-image: linear-gradient(180deg, #a7d0ff 0%, var(--color-brand) 60%);
	background-size: 100%;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	color: transparent;
}

.logo-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem 6.75rem 1rem;
	overflow: hidden;
	width: 100%;
	background-color: var(--color-accent-contrast);

	svg {
		z-index: 2;
		width: auto;
		height: 32rem;
	}

	.overlay {
		z-index: 3;
		position: absolute;
		bottom: 5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5rem;
		white-space: nowrap;
	}
}
</style>