1428 lines
64 KiB
Vue
1428 lines
64 KiB
Vue
<template>
|
||
<div>
|
||
<div class="landing-hero">
|
||
<ModrinthIcon />
|
||
<h1 class="main-header">
|
||
The place for Minecraft
|
||
<div class="animate-strong">
|
||
<span>
|
||
<strong
|
||
v-for="projectType in $tag.projectTypes"
|
||
:key="projectType.id"
|
||
class="main-header-strong"
|
||
>
|
||
{{ projectType.display }}s <br />
|
||
</strong>
|
||
</span>
|
||
</div>
|
||
</h1>
|
||
<h2>
|
||
Discover, play, and share Minecraft content through our open-source
|
||
platform built for the community.
|
||
</h2>
|
||
<div class="button-group">
|
||
<nuxt-link to="/mods" class="iconified-button brand-button">
|
||
Discover mods
|
||
</nuxt-link>
|
||
<a
|
||
v-if="!$auth.user"
|
||
:href="authUrl"
|
||
class="iconified-button outline-button"
|
||
>
|
||
Sign up
|
||
</a>
|
||
<nuxt-link
|
||
v-else
|
||
to="/dashboard/projects"
|
||
class="iconified-button outline-button"
|
||
>
|
||
Go to dashboard
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
<div class="users-section-outer">
|
||
<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"
|
||
:aria-hidden="n === 1"
|
||
:class="{ offset: index % 2 }"
|
||
>
|
||
<article
|
||
v-for="project in row"
|
||
:key="project.id"
|
||
class="project gradient-border"
|
||
@click="$router.push(`/${project.project_type}/${project.slug}`)"
|
||
>
|
||
<Avatar
|
||
:src="project.icon_url"
|
||
:alt="project.title"
|
||
size="sm"
|
||
loading="lazy"
|
||
/>
|
||
<div class="project-info">
|
||
<nuxt-link
|
||
:to="`/${project.project_type}/${project.slug}`"
|
||
class="title"
|
||
>
|
||
<p>
|
||
{{ project.title }}
|
||
</p>
|
||
</nuxt-link>
|
||
<span class="description">
|
||
{{ project.description }}
|
||
</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projects-transition"></div>
|
||
<div class="users-section">
|
||
<div class="section-header">
|
||
<div class="section-label green">For Players</div>
|
||
<h2 class="section-tagline">Discover over 5,000 creations</h2>
|
||
<p class="section-description">
|
||
From magical biomes to cursed dungeons, you can be sure to find
|
||
content to bring your gameplay to the next level.
|
||
</p>
|
||
</div>
|
||
<div class="feature-blob">
|
||
<div class="blob-text">
|
||
<h3>Find what you want, quickly and easily</h3>
|
||
<p>
|
||
Modrinth’s lightning-fast search and powerful filters let you find
|
||
what you want as you type.
|
||
</p>
|
||
</div>
|
||
<div class="blob-demonstration gradient-border bigger">
|
||
<div class="demo-search">
|
||
<div class="search-controls">
|
||
<div class="iconified-input">
|
||
<label class="hidden" for="search">Search</label>
|
||
<SearchIcon aria-hidden="true" />
|
||
<input
|
||
id="search"
|
||
v-model="searchQuery"
|
||
type="search"
|
||
name="search"
|
||
:placeholder="`Search...`"
|
||
autocomplete="off"
|
||
@input="updateSearchProjects"
|
||
/>
|
||
</div>
|
||
<div class="sort-by">
|
||
<span class="label">Sort by</span>
|
||
<Multiselect
|
||
v-model="sortType"
|
||
placeholder="Select one"
|
||
class="selector"
|
||
:custom-label="
|
||
(value) => value.charAt(0).toUpperCase() + value.slice(1)
|
||
"
|
||
:options="[
|
||
'relevance',
|
||
'downloads',
|
||
'follows',
|
||
'updated',
|
||
'newest',
|
||
]"
|
||
:searchable="false"
|
||
:close-on-select="true"
|
||
:show-labels="false"
|
||
:allow-empty="false"
|
||
@input="updateSearchProjects"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="results display-mode--list">
|
||
<ProjectCard
|
||
v-for="result in searchProjects"
|
||
:id="result.slug ? result.slug : result.project_id"
|
||
:key="result.project_id"
|
||
class="small-mode gradient-border"
|
||
:type="result.project_type"
|
||
:author="result.author"
|
||
:name="result.title"
|
||
:description="result.description"
|
||
:created-at="result.date_created"
|
||
:updated-at="result.date_modified"
|
||
:downloads="result.downloads.toString()"
|
||
:follows="result.follows.toString()"
|
||
:icon-url="result.icon_url"
|
||
:client-side="result.client_side"
|
||
:server-side="result.server_side"
|
||
:categories="result.display_categories.slice(0, 3)"
|
||
:search="true"
|
||
:show-updated-date="true"
|
||
:color="result.color"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-blob reverse">
|
||
<div class="blob-text">
|
||
<h3>Follow projects you love</h3>
|
||
<p>
|
||
Get notified every time your favorite projects update and stay in
|
||
the loop
|
||
</p>
|
||
</div>
|
||
<div class="blob-demonstration gradient-border">
|
||
<div class="notifs-demo">
|
||
<h3>Notifications</h3>
|
||
<div class="notifications">
|
||
<div
|
||
v-for="(notification, index) in notifications"
|
||
:key="index"
|
||
class="notification gradient-border"
|
||
>
|
||
<nuxt-link
|
||
:to="`${notification.project_type}/${notification.slug}`"
|
||
>
|
||
<Avatar
|
||
size="md"
|
||
:src="notification.icon_url"
|
||
:alt="notification.title"
|
||
/>
|
||
</nuxt-link>
|
||
<div>
|
||
<nuxt-link
|
||
:to="`${notification.project_type}/${notification.slug}`"
|
||
class="notif-header"
|
||
>
|
||
{{ notification.title }} has been updated!
|
||
</nuxt-link>
|
||
<p class="notif-desc">
|
||
Version {{ ['1.1.2', '1.0.3', '15.1'][index] }} has been
|
||
released for
|
||
{{
|
||
$capitalizeString(
|
||
notification.display_categories[
|
||
notification.display_categories.length - 1
|
||
]
|
||
)
|
||
}}
|
||
{{
|
||
notification.versions[notification.versions.length - 1]
|
||
}}
|
||
</p>
|
||
<div class="date">
|
||
<CalendarIcon />
|
||
<span>
|
||
Received
|
||
{{ $dayjs(notification.date_modified).fromNow() }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-blob">
|
||
<div class="blob-text">
|
||
<h3>Play with your favorite launcher</h3>
|
||
<p>
|
||
Modrinth's open-source API lets launchers add deep integration
|
||
with Modrinth. We're already supported by some of the most popular
|
||
launchers like ATLauncher, MultiMC, and Prism Launcher.
|
||
</p>
|
||
</div>
|
||
<div class="blob-demonstration gradient-border">
|
||
<div class="launcher-view">
|
||
<img
|
||
v-if="$colorMode.value === 'light'"
|
||
src="https://cdn.modrinth.com/landing/launcher-light.png"
|
||
alt="launcher graphic"
|
||
class="minecraft-screen"
|
||
/>
|
||
<img
|
||
v-else
|
||
src="https://cdn.modrinth.com/landing/launcher.png"
|
||
alt="launcher graphic"
|
||
class="minecraft-screen"
|
||
/>
|
||
<div class="launcher-graphics">
|
||
<a
|
||
rel="noopener noreferrer nofollow"
|
||
href="https://prismlauncher.org/"
|
||
class="graphic gradient-border"
|
||
>
|
||
<img
|
||
src="~/assets/images/external/prism.svg"
|
||
alt="prism launcher logo"
|
||
/>
|
||
</a>
|
||
<a
|
||
rel="noopener noreferrer nofollow"
|
||
href="https://multimc.org/"
|
||
class="graphic gradient-border"
|
||
>
|
||
<img
|
||
src="~/assets/images/external/multimc.png"
|
||
alt="multimc launcher logo"
|
||
/>
|
||
</a>
|
||
<a
|
||
rel="noopener noreferrer nofollow"
|
||
href="https://atlauncher.com/"
|
||
class="graphic gradient-border"
|
||
>
|
||
<img
|
||
src="~/assets/images/external/atlauncher.svg"
|
||
alt="atlauncher logo"
|
||
/>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="creator-section">
|
||
<div class="section-header">
|
||
<div class="section-label blue">For Creators</div>
|
||
<h2 class="section-tagline">Share your content with the world</h2>
|
||
<p class="section-description">
|
||
Give an online home to your creations and reach a massive audience of
|
||
dedicated players
|
||
</p>
|
||
</div>
|
||
<div class="features">
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 37 37" fill="none">
|
||
<path
|
||
d="M18.4764 0C18.3765 0 18.2765 0.0111037 18.1766 0.0444178C8.23734 0.210982 0.197119 8.2617 0.0416464 18.2002C-0.0138821 18.4001 -0.0138821 18.6221 0.0416464 18.822C0.208223 28.7605 8.25955 36.8001 18.1988 36.9667C18.3987 37.0111 18.6208 37.0111 18.8207 36.9667C28.7599 36.789 36.8001 28.7383 36.9667 18.7998C37.0111 18.5999 37.0111 18.3778 36.9667 18.178C36.789 8.2506 28.7599 0.210982 18.8318 0.0444178C18.7096 0.0111037 18.5986 0 18.4764 0ZM17.0771 2.93157V5.70768C17.066 6.21849 17.3437 6.69598 17.7768 6.95138C18.221 7.21789 18.7762 7.21789 19.2205 6.95138C19.6536 6.69598 19.9312 6.21849 19.9201 5.70768V2.93157C27.4273 3.60894 33.3908 9.57203 34.0571 17.0786H31.2919C30.781 17.0675 30.3035 17.3451 30.0481 17.7782C29.7816 18.2224 29.7816 18.7776 30.0481 19.2218C30.3035 19.6549 30.781 19.9325 31.2919 19.9214H34.0571C33.3908 27.428 27.4273 33.3911 19.9201 34.0573V31.2923C19.9312 30.9037 19.7757 30.5372 19.5092 30.2596C19.2316 29.9931 18.8651 29.8376 18.4764 29.8487C17.6879 29.8598 17.066 30.5039 17.0771 31.2923V34.0573C9.56997 33.3911 3.60644 27.428 2.92902 19.9214H5.70534C6.21618 19.9325 6.6937 19.6549 6.94913 19.2218C7.21565 18.7776 7.21565 18.2224 6.94913 17.7782C6.6937 17.3451 6.21618 17.0675 5.70534 17.0786H2.92902C3.60644 9.57203 9.56997 3.60894 17.0771 2.93157ZM25.606 11.3932L15.6557 15.6573L11.3912 25.6068L21.3416 21.3427L25.606 11.3932Z"
|
||
fill="url(#paint0_linear_255_241)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_255_241"
|
||
x1="18.5"
|
||
y1="0"
|
||
x2="18.5"
|
||
y2="37"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<h4>Discovery</h4>
|
||
<p>
|
||
Get your project discovered by thousands of users through search,
|
||
our home page, discord server, and more ways to come in the future!
|
||
</p>
|
||
</div>
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 46 24" fill="none">
|
||
<path
|
||
d="M23 0.5C19.8442 0.5 17.25 3.09424 17.25 6.25C17.25 7.78857 17.8789 9.19238 18.8672 10.2256C16.374 11.6069 14.6333 14.1675 14.4312 17.166C12.8926 15.7622 10.8711 14.875 8.625 14.875C3.87451 14.875 0 18.7495 0 23.5H17.25V17.75C17.25 14.5605 19.8105 12 23 12C26.1895 12 28.75 14.5605 28.75 17.75V23.5H46C46 18.7495 42.1255 14.875 37.375 14.875C35.1289 14.875 33.1074 15.7622 31.5688 17.166C31.3667 14.1675 29.626 11.6069 27.1328 10.2256C28.1211 9.19238 28.75 7.78857 28.75 6.25C28.75 3.09424 26.1558 0.5 23 0.5ZM37.375 14.875C40.542 14.875 43.125 12.292 43.125 9.125C43.125 5.95801 40.542 3.375 37.375 3.375C34.208 3.375 31.625 5.95801 31.625 9.125C31.625 12.292 34.208 14.875 37.375 14.875ZM8.625 14.875C11.792 14.875 14.375 12.292 14.375 9.125C14.375 5.95801 11.792 3.375 8.625 3.375C5.45801 3.375 2.875 5.95801 2.875 9.125C2.875 12.292 5.45801 14.875 8.625 14.875ZM23 3.375C24.606 3.375 25.875 4.64404 25.875 6.25C25.875 7.85596 24.606 9.125 23 9.125C21.394 9.125 20.125 7.85596 20.125 6.25C20.125 4.64404 21.394 3.375 23 3.375Z"
|
||
fill="url(#paint0_linear_127_321)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_127_321"
|
||
x1="23"
|
||
y1="0.5"
|
||
x2="23"
|
||
y2="23.5"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<h4>Team Management</h4>
|
||
<p>
|
||
Invite your teammates and manage roles and permissions with ease
|
||
</p>
|
||
</div>
|
||
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 42 30" fill="none">
|
||
<path
|
||
d="M7.79297 0.625C5.92871 0.625 4.34521 1.82666 3.75 3.5H38.25C37.6548 1.82666 36.0713 0.625 34.207 0.625H7.79297ZM5.1875 6.375C2.81787 6.375 0.875 8.31787 0.875 10.6875V25.0625C0.875 27.4321 2.81787 29.375 5.1875 29.375H36.8125C39.1821 29.375 41.125 27.4321 41.125 25.0625V10.6875C41.125 8.31787 39.1821 6.375 36.8125 6.375H5.1875ZM6.625 9.25H35.375C35.375 10.8223 36.6777 12.125 38.25 12.125V23.625C36.6777 23.625 35.375 24.9277 35.375 26.5H6.625C6.625 24.9277 5.32227 23.625 3.75 23.625V12.125C5.32227 12.125 6.625 10.8223 6.625 9.25ZM21 12.125C17.8442 12.125 15.25 14.7192 15.25 17.875C15.25 21.0308 17.8442 23.625 21 23.625C24.1558 23.625 26.75 21.0308 26.75 17.875C26.75 14.7192 24.1558 12.125 21 12.125ZM9.5 15C7.9165 15 6.625 16.2915 6.625 17.875C6.625 19.4585 7.9165 20.75 9.5 20.75C11.0835 20.75 12.375 19.4585 12.375 17.875C12.375 16.2915 11.0835 15 9.5 15ZM21 15C22.606 15 23.875 16.269 23.875 17.875C23.875 19.481 22.606 20.75 21 20.75C19.394 20.75 18.125 19.481 18.125 17.875C18.125 16.269 19.394 15 21 15ZM32.5 15C30.9165 15 29.625 16.2915 29.625 17.875C29.625 19.4585 30.9165 20.75 32.5 20.75C34.0835 20.75 35.375 19.4585 35.375 17.875C35.375 16.2915 34.0835 15 32.5 15Z"
|
||
fill="url(#paint0_linear_127_325)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_127_325"
|
||
x1="21"
|
||
y1="0.625"
|
||
x2="21"
|
||
y2="29.375"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<h4>Monetization</h4>
|
||
<p>
|
||
Get paid 100% of the ad revenue from your project pages and withdraw
|
||
your funds at any time
|
||
</p>
|
||
</div>
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 42 39" fill="none">
|
||
<path
|
||
d="M5.1875 0.875C2.81787 0.875 0.875 2.81787 0.875 5.1875C0.875 7.55713 2.81787 9.5 5.1875 9.5C5.8501 9.5 6.46777 9.33154 7.0293 9.06201L13.5767 15.6094C12.8242 16.7437 12.375 18.1025 12.375 19.5625C12.375 20.708 12.667 21.7861 13.1611 22.752L7.42236 27.3901C6.771 26.9971 6.00732 26.75 5.1875 26.75C2.81787 26.75 0.875 28.6929 0.875 31.0625C0.875 33.4321 2.81787 35.375 5.1875 35.375C7.55713 35.375 9.5 33.4321 9.5 31.0625C9.5 30.5571 9.39893 30.0854 9.23047 29.6362L14.9355 25.0093C16.1934 26.0762 17.7993 26.75 19.5625 26.75C20.3374 26.75 21.0674 26.5928 21.7637 26.3682L24.8296 31.2759C24.2456 32.0171 23.875 32.9268 23.875 33.9375C23.875 36.3071 25.8179 38.25 28.1875 38.25C30.5571 38.25 32.5 36.3071 32.5 33.9375C32.5 31.5679 30.5571 29.625 28.1875 29.625C27.873 29.625 27.5586 29.6699 27.2554 29.7261L24.2793 24.9419C25.2339 24.0996 25.9639 23.0103 26.3682 21.7637L32.5562 23.0327C32.8594 25.1216 34.6562 26.75 36.8125 26.75C39.1821 26.75 41.125 24.8071 41.125 22.4375C41.125 20.0679 39.1821 18.125 36.8125 18.125C35.2627 18.125 33.9038 18.9785 33.1401 20.2139L26.6826 18.8887C26.5029 17.0132 25.6157 15.3511 24.2568 14.1719L27.2441 9.3877C27.5474 9.45508 27.8618 9.5 28.1875 9.5C30.5571 9.5 32.5 7.55713 32.5 5.1875C32.5 2.81787 30.5571 0.875 28.1875 0.875C25.8179 0.875 23.875 2.81787 23.875 5.1875C23.875 6.18701 24.2344 7.10791 24.8184 7.83789L21.7524 12.7568C21.0562 12.5322 20.3262 12.375 19.5625 12.375C18.1025 12.375 16.7437 12.8242 15.6094 13.5767L9.06201 7.0293C9.33154 6.46777 9.5 5.8501 9.5 5.1875C9.5 2.81787 7.55713 0.875 5.1875 0.875ZM5.1875 3.75C5.99609 3.75 6.625 4.37891 6.625 5.1875C6.625 5.99609 5.99609 6.625 5.1875 6.625C4.37891 6.625 3.75 5.99609 3.75 5.1875C3.75 4.37891 4.37891 3.75 5.1875 3.75ZM28.1875 3.75C28.9961 3.75 29.625 4.37891 29.625 5.1875C29.625 5.99609 28.9961 6.625 28.1875 6.625C27.3789 6.625 26.75 5.99609 26.75 5.1875C26.75 4.37891 27.3789 3.75 28.1875 3.75ZM19.5625 15.25C21.9658 15.25 23.875 17.1592 23.875 19.5625C23.875 21.1123 23.0664 22.4487 21.8535 23.2124C21.7075 23.2686 21.5728 23.3359 21.4492 23.437C20.8765 23.7065 20.2363 23.875 19.5625 23.875C17.1592 23.875 15.25 21.9658 15.25 19.5625C15.25 17.1592 17.1592 15.25 19.5625 15.25ZM36.8125 21C37.6211 21 38.25 21.6289 38.25 22.4375C38.25 23.2461 37.6211 23.875 36.8125 23.875C36.0039 23.875 35.375 23.2461 35.375 22.4375C35.375 21.6289 36.0039 21 36.8125 21ZM5.1875 29.625C5.99609 29.625 6.625 30.2539 6.625 31.0625C6.625 31.8711 5.99609 32.5 5.1875 32.5C4.37891 32.5 3.75 31.8711 3.75 31.0625C3.75 30.2539 4.37891 29.625 5.1875 29.625ZM28.1875 32.5C28.9961 32.5 29.625 33.1289 29.625 33.9375C29.625 34.7461 28.9961 35.375 28.1875 35.375C27.3789 35.375 26.75 34.7461 26.75 33.9375C26.75 33.1289 27.3789 32.5 28.1875 32.5Z"
|
||
fill="url(#paint0_linear_127_281)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_127_281"
|
||
x1="21"
|
||
y1="0.875"
|
||
x2="21"
|
||
y2="38.25"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<h4>Diverse Ecosystem</h4>
|
||
<p>
|
||
Integrate with your build tools through Minotaur for automatic
|
||
uploads right when you release a new version
|
||
</p>
|
||
</div>
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 39 39" fill="none">
|
||
<path
|
||
d="M0.875 0.875V38.25H38.25V35.375H3.75V0.875H0.875ZM18.125 0.875C17.3625 0.875 16.6312 1.1779 16.0921 1.71707C15.5529 2.25623 15.25 2.9875 15.25 3.75C15.25 4.5125 15.5529 5.24376 16.0921 5.78293C16.6312 6.3221 17.3625 6.625 18.125 6.625C18.8875 6.625 19.6188 6.3221 20.1579 5.78293C20.6971 5.24376 21 4.5125 21 3.75C21 2.9875 20.6971 2.25623 20.1579 1.71707C19.6188 1.1779 18.8875 0.875 18.125 0.875ZM8.0625 3.75C7.68125 3.75 7.31562 3.90145 7.04603 4.17103C6.77645 4.44062 6.625 4.80625 6.625 5.1875C6.625 5.56875 6.77645 5.93438 7.04603 6.20397C7.31562 6.47355 7.68125 6.625 8.0625 6.625C8.44375 6.625 8.80938 6.47355 9.07897 6.20397C9.34855 5.93438 9.5 5.56875 9.5 5.1875C9.5 4.80625 9.34855 4.44062 9.07897 4.17103C8.80938 3.90145 8.44375 3.75 8.0625 3.75ZM28.1875 3.75C27.8063 3.75 27.4406 3.90145 27.171 4.17103C26.9014 4.44062 26.75 4.80625 26.75 5.1875C26.75 5.56875 26.9014 5.93438 27.171 6.20397C27.4406 6.47355 27.8063 6.625 28.1875 6.625C28.5687 6.625 28.9344 6.47355 29.204 6.20397C29.4736 5.93438 29.625 5.56875 29.625 5.1875C29.625 4.80625 29.4736 4.44062 29.204 4.17103C28.9344 3.90145 28.5687 3.75 28.1875 3.75ZM36.8125 3.75C36.4313 3.75 36.0656 3.90145 35.796 4.17103C35.5265 4.44062 35.375 4.80625 35.375 5.1875C35.375 5.56875 35.5265 5.93438 35.796 6.20397C36.0656 6.47355 36.4313 6.625 36.8125 6.625C37.1937 6.625 37.5594 6.47355 37.829 6.20397C38.0985 5.93438 38.25 5.56875 38.25 5.1875C38.25 4.80625 38.0985 4.44062 37.829 4.17103C37.5594 3.90145 37.1937 3.75 36.8125 3.75ZM26.75 12.375C25.9875 12.375 25.2562 12.6779 24.7171 13.2171C24.1779 13.7562 23.875 14.4875 23.875 15.25C23.875 16.0125 24.1779 16.7438 24.7171 17.2829C25.2562 17.8221 25.9875 18.125 26.75 18.125C27.5125 18.125 28.2438 17.8221 28.7829 17.2829C29.3221 16.7438 29.625 16.0125 29.625 15.25C29.625 14.4875 29.3221 13.7562 28.7829 13.2171C28.2438 12.6779 27.5125 12.375 26.75 12.375ZM8.0625 15.25C7.68125 15.25 7.31562 15.4015 7.04603 15.671C6.77645 15.9406 6.625 16.3063 6.625 16.6875C6.625 17.0687 6.77645 17.4344 7.04603 17.704C7.31562 17.9735 7.68125 18.125 8.0625 18.125C8.44375 18.125 8.80938 17.9735 9.07897 17.704C9.34855 17.4344 9.5 17.0687 9.5 16.6875C9.5 16.3063 9.34855 15.9406 9.07897 15.671C8.80938 15.4015 8.44375 15.25 8.0625 15.25ZM36.8125 15.25C36.4313 15.25 36.0656 15.4015 35.796 15.671C35.5265 15.9406 35.375 16.3063 35.375 16.6875C35.375 17.0687 35.5265 17.4344 35.796 17.704C36.0656 17.9735 36.4313 18.125 36.8125 18.125C37.1937 18.125 37.5594 17.9735 37.829 17.704C38.0985 17.4344 38.25 17.0687 38.25 16.6875C38.25 16.3063 38.0985 15.9406 37.829 15.671C37.5594 15.4015 37.1937 15.25 36.8125 15.25ZM9.5 23.875C8.7375 23.875 8.00624 24.1779 7.46707 24.7171C6.9279 25.2562 6.625 25.9875 6.625 26.75C6.625 27.5125 6.9279 28.2438 7.46707 28.7829C8.00624 29.3221 8.7375 29.625 9.5 29.625C10.2625 29.625 10.9938 29.3221 11.5329 28.7829C12.0721 28.2438 12.375 27.5125 12.375 26.75C12.375 25.9875 12.0721 25.2562 11.5329 24.7171C10.9938 24.1779 10.2625 23.875 9.5 23.875ZM19.5625 26.75C19.1813 26.75 18.8156 26.9014 18.546 27.171C18.2765 27.4406 18.125 27.8063 18.125 28.1875C18.125 28.5687 18.2765 28.9344 18.546 29.204C18.8156 29.4736 19.1813 29.625 19.5625 29.625C19.9437 29.625 20.3094 29.4736 20.579 29.204C20.8485 28.9344 21 28.5687 21 28.1875C21 27.8063 20.8485 27.4406 20.579 27.171C20.3094 26.9014 19.9437 26.75 19.5625 26.75ZM28.1875 26.75C27.8063 26.75 27.4406 26.9014 27.171 27.171C26.9014 27.4406 26.75 27.8063 26.75 28.1875C26.75 28.5687 26.9014 28.9344 27.171 29.204C27.4406 29.4736 27.8063 29.625 28.1875 29.625C28.5687 29.625 28.9344 29.4736 29.204 29.204C29.4736 28.9344 29.625 28.5687 29.625 28.1875C29.625 27.8063 29.4736 27.4406 29.204 27.171C28.9344 26.9014 28.5687 26.75 28.1875 26.75ZM36.8125 26.75C36.4313 26.75 36.0656 26.9014 35.796 27.171C35.5265 27.4406 35.375 27.8063 35.375 28.1875C35.375 28.5687 35.5265 28.9344 35.796 29.204C36.0656 29.4736 36.4313 29.625 36.8125 29.625C37.1937 29.625 37.5594 29.4736 37.829 29.204C38.0985 28.9344 38.25 28.5687 38.25 28.1875C38.25 27.8063 38.0985 27.4406 37.829 27.171C37.5594 26.9014 37.1937 26.75 36.8125 26.75Z"
|
||
fill="url(#paint0_linear_127_323)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_127_323"
|
||
x1="19.5625"
|
||
y1="0.875"
|
||
x2="19.5625"
|
||
y2="38.25"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<div class="additional-label">Coming soon</div>
|
||
<h4>Data & Statistics</h4>
|
||
<p>
|
||
Get detailed reports on page views, download counts, and revenue
|
||
</p>
|
||
</div>
|
||
<div class="feature gradient-border">
|
||
<div class="icon gradient-border">
|
||
<svg viewBox="0 0 42 32" fill="none">
|
||
<path
|
||
d="M21 0C12.3149 0 5.25 7.06494 5.25 15.75H0L6.5625 22.6406L13.125 15.75H7.875C7.875 8.47998 13.73 2.625 21 2.625C23.9121 2.625 26.5884 3.56836 28.752 5.16797L30.3105 3.04541C27.6958 1.12793 24.4761 0 21 0ZM21 7.875C18.1187 7.875 15.75 10.2437 15.75 13.125C15.75 14.5298 16.3242 15.8115 17.2266 16.7549C14.7964 18.0981 13.125 20.6616 13.125 23.625H15.75C15.75 20.7129 18.0879 18.375 21 18.375C23.9121 18.375 26.25 20.7129 26.25 23.625H28.875C28.875 20.6616 27.2036 18.0981 24.7734 16.7549C25.6758 15.8115 26.25 14.5298 26.25 13.125C26.25 10.2437 23.8813 7.875 21 7.875ZM35.4375 9.1875L28.875 15.75H34.125C34.125 23.02 28.27 28.875 21 28.875C18.0879 28.875 15.4116 27.9316 13.248 26.332L11.6895 28.4546C14.3042 30.3721 17.5239 31.5 21 31.5C29.6851 31.5 36.75 24.4351 36.75 15.75H42L35.4375 9.1875ZM21 10.5C22.4663 10.5 23.625 11.6587 23.625 13.125C23.625 14.5913 22.4663 15.75 21 15.75C19.5337 15.75 18.375 14.5913 18.375 13.125C18.375 11.6587 19.5337 10.5 21 10.5Z"
|
||
fill="url(#paint0_linear_255_234)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_255_234"
|
||
x1="21"
|
||
y1="0"
|
||
x2="21"
|
||
y2="31.5"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#C1E1B1" />
|
||
<stop offset="1" stop-color="#A7BDE6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<h4>Constantly Evolving</h4>
|
||
<p>
|
||
Get the best modding experience possible with constant updates from
|
||
the Modrinth team
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="logo-banner">
|
||
<svg
|
||
v-if="$colorMode.value === 'light'"
|
||
viewBox="0 0 865 512"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="light-height"
|
||
>
|
||
<g clip-path="url(#clip0_419_237)">
|
||
<rect
|
||
x="176"
|
||
width="512"
|
||
height="512"
|
||
fill="url(#paint0_linear_419_237)"
|
||
/>
|
||
<g opacity="0.5">
|
||
<path
|
||
d="M176 274.069H219.65C221.89 299.001 228.25 322.42 238.87 345.249C245.4 342.033 251.37 338.016 257.52 334.3C263.76 330.534 270.07 326.908 276.62 323.061C276.21 321.669 275.95 320.216 275.37 318.914C271.05 309.378 268.47 299.251 266.32 289.114C265.03 283.054 264.41 276.743 263.73 270.513C262.89 262.86 262.94 255.257 263.11 247.654C263.26 241.083 264.11 234.482 265.21 227.991C266.88 218.064 269.39 208.308 272.94 198.852C276.79 188.594 281.19 178.588 287.21 169.382C291.19 163.292 294.97 157.021 299.53 151.382C306.3 142.998 313.75 135.214 322.12 128.273C330.05 121.692 338.16 115.421 347.18 110.483C354.15 106.676 361.39 103.341 368.66 100.115C379.13 95.4674 390.24 92.873 401.39 90.4289C410.67 88.4055 430.03 87.3237 438.96 88.6158C438.51 95.9282 436.63 103.05 435.44 110.262C434.26 117.394 432.94 124.496 431.6 132.109C428.15 132.44 424.73 132.7 421.32 133.121C416.25 133.752 411.15 134.263 406.15 135.265C395.4 137.428 385.13 141.044 375.33 145.973C366.85 150.23 358.98 155.398 351.89 161.709C348.8 164.464 345.52 167.048 342.67 170.033C335.77 177.225 329.99 185.279 324.68 193.713C320.48 200.364 317.45 207.536 314.8 214.839C312.05 222.422 310.33 230.315 308.95 238.308C307.43 247.093 307.9 255.898 308.2 264.653C308.48 272.867 310.18 281 312.49 288.934C313.45 292.239 314.44 295.535 315.62 299.481C332.06 289.705 348.08 280.169 364.47 270.422C361.92 263.631 359.46 257.16 357.05 250.669C354.63 244.178 352.26 237.667 349.78 230.926C352.79 227.871 355.71 224.936 358.6 221.971C369.97 210.291 381.46 198.712 392.6 186.821C395.77 183.436 399.36 181.913 403.66 181.062C414.16 178.978 424.63 176.734 435.11 174.541C441.87 173.128 448.62 171.686 455.69 170.193C461.36 177.175 467.08 184.217 472.94 191.439C471.8 192.671 470.85 193.783 469.82 194.815C463 201.656 455.97 208.308 449.41 215.4C446.18 218.896 442.34 220.709 438.01 221.961C433.09 223.383 428.16 224.745 423.25 226.198C422.5 226.418 421.73 226.909 421.19 227.48C416.62 232.298 412.15 237.216 407.55 241.995C405.9 243.697 405.89 245.31 406.67 247.424C408.91 253.474 410.92 259.604 413.12 265.674C413.5 266.716 414.27 267.668 415.04 268.499C419.55 273.377 424.05 278.266 428.73 282.974C429.48 283.725 431.24 284.055 432.33 283.775C438.57 282.182 444.72 280.289 450.94 278.636C453.49 277.955 455.32 276.443 457.01 274.559C460.1 271.094 463.55 267.898 466.27 264.172C469.55 259.684 473.91 257.901 479.09 256.82C483.44 255.908 487.58 254.045 491.83 252.673C496.23 251.25 500.69 249.998 505.07 248.495C507.08 247.804 508.18 248.305 508.99 250.198C512.16 257.671 515.4 265.114 518.76 272.917C515.97 276.342 513.04 279.918 510.13 283.515C505.45 289.304 500.81 295.124 496.12 300.904C492.16 305.782 487.86 310.42 484.26 315.549C481.66 319.255 478.09 320.717 474.16 321.959C462.33 325.716 450.52 329.502 438.69 333.268C431.61 335.522 424.51 337.756 416.91 340.16C415.33 338.648 413.45 337.055 411.81 335.232C407.16 330.053 402.62 324.794 398.03 319.565C395.63 316.831 393.3 314.006 390.79 311.382C388.08 308.557 387.52 308.557 384.41 310.42C377.88 314.337 371.33 318.243 364.82 322.19C356.32 327.328 347.85 332.507 339.09 337.836C341.26 341.482 344.39 344.257 347.49 346.811C353.22 351.539 359.26 355.907 365.37 360.144C376.53 367.867 388.92 372.815 402.07 376.081C409.82 378.004 417.59 379.286 425.6 379.076C426.74 379.046 427.88 379.446 429.02 379.516C430.64 379.617 432.27 379.667 433.88 379.587C435.19 379.526 436.48 379.106 437.79 379.076C442.03 378.966 442.07 378.996 443.29 383.443C446.74 396.014 450.16 408.585 453.58 421.167C453.7 421.597 453.65 422.068 453.7 422.88C449 423.28 444.42 423.781 439.83 424.022C436.17 424.212 432.5 423.961 428.83 424.092C414.81 424.593 401.08 422.469 387.69 418.733C366.28 412.763 346.56 403.216 328.88 389.523C320.7 383.183 313.41 375.95 306.16 368.648C304.89 367.366 303.97 365.743 302.78 364.371C300.52 361.746 299.87 361.526 296.85 363.189C292.49 365.583 288.24 368.167 283.98 370.722C277.72 374.458 271.49 378.234 265.25 382.001C264.56 382.421 263.91 382.902 263.18 383.403C263.7 387.54 267.09 389.654 269.19 392.448C272.55 396.946 276.45 401.113 280.58 404.939C286.77 410.669 293.38 415.938 299.77 421.457C306.94 427.658 314.86 432.756 322.98 437.604C332.25 443.144 341.84 448.092 351.94 451.808C361.7 455.394 371.65 458.54 381.69 461.244C388.49 463.077 395.62 463.678 402.56 465.061C414.21 467.385 425.99 467.224 437.75 466.924C444.49 466.754 451.21 465.622 457.94 465.071C465.69 464.44 473.25 462.767 480.79 461.014C492.41 458.319 503.64 454.453 514.64 449.795C530.77 442.963 545.63 433.968 559.65 423.601C570.63 415.477 580.59 406.061 589.5 395.774C598.25 385.667 606.72 375.209 612.97 363.219C615.56 358.241 618.38 353.382 621.25 348.184C635.52 353.322 649.65 358.411 664.03 363.59C663.75 364.691 663.65 365.663 663.26 366.484C655.92 381.77 647.35 396.285 636.95 409.727C628.93 420.105 620.71 430.292 611.17 439.307C604.8 445.327 598.41 451.358 591.25 456.496C584.53 461.314 578.16 466.653 571.24 471.151C556.34 480.857 540.49 488.721 523.9 495.262C508.29 501.412 492.07 505.198 475.79 508.774C468.91 510.287 461.7 510.297 454.64 511.058C453.74 511.158 452.89 511.679 452.02 512H409.02C405.58 510.147 401.69 510.908 398.04 510.127C392.73 508.995 387.16 509.055 381.91 507.763C370.54 504.958 359.16 502.043 348.04 498.387C335.77 494.35 323.98 489.101 312.56 482.941C300.86 476.63 289.55 469.779 278.84 461.945C269.2 454.894 260.11 447.171 251.49 438.927C248.39 435.952 245.88 432.356 242.77 429.391C235.89 422.83 230.17 415.267 224.57 407.704C218.48 399.48 212.95 390.755 208.03 381.78C197.57 362.698 188.92 342.835 183.67 321.579C180.7 309.558 177.71 297.578 176.89 285.177C176.86 284.787 176.32 284.436 176.02 284.065C176.02 280.73 176.02 277.404 176.02 274.069H176Z"
|
||
fill="#05CE45"
|
||
/>
|
||
<path
|
||
d="M688 277.074C687.69 277.615 687.11 278.136 687.09 278.686C686.56 293.612 683.03 308.016 679.73 322.45C675.99 322.05 642.32 309.939 636.41 306.894C637.6 300.173 638.85 293.431 639.97 286.66C641.13 279.648 641.76 272.606 642.1 265.484C642.43 258.563 642.1 251.691 642.02 244.789C641.94 237.858 641.47 231.006 639.48 223.784C625.94 227.39 612.76 230.896 599.27 234.492C599.19 235.964 598.74 237.507 599.09 238.839C600.63 244.749 599.88 250.739 599.99 256.699C600.43 280.079 595.08 302.226 585.83 323.592C580.73 335.372 574.24 346.311 566.66 356.598C559.95 365.713 552.43 374.228 543.81 381.53C534.36 389.543 524.76 397.497 513.41 402.896C508.18 405.39 503.03 408.045 497.83 410.599C497.43 410.799 496.9 410.759 496.49 410.819C494.33 407.514 486.2 378.274 484.59 368.177C533.62 341.532 557.58 300.664 554.95 244.639C548.26 194.314 521.33 159.555 474.14 139.752C476.69 125.278 479.28 110.593 481.96 95.3973C486 96.7796 489.75 97.8414 493.32 99.3439C504.19 103.932 514.89 108.93 524.68 115.541C537.67 124.316 549.44 134.653 559.65 146.473C570.52 159.055 579.39 173.078 585.96 188.434C587.1 191.099 587.3 191.279 589.95 190.578C602.53 187.272 615.11 183.917 628.08 180.481C627.53 178.608 627.18 176.845 626.5 175.232C618.95 157.262 609.28 140.493 597.33 125.107C590.3 116.052 582.71 107.398 574.08 99.8448C561.23 88.6058 547.51 78.599 532.54 70.1948C521.76 64.1446 510.5 59.3665 498.93 55.3798C488.2 51.6836 477.17 48.8788 465.88 46.9756C450.75 44.4313 435.58 43.7201 420.33 44.221C414.75 44.4013 409.21 45.6033 403.63 46.004C394.2 46.6851 385.07 48.979 375.97 51.2128C367.14 53.3764 358.57 56.4516 350.19 60.0276C346.54 61.5903 342.73 62.8324 339.19 64.6053C333.26 67.5804 327.36 70.6455 321.67 74.0713C316.29 77.3068 311.08 80.8628 306.03 84.5991C300.85 88.4255 295.84 92.5124 290.96 96.7195C286.31 100.726 281.67 104.793 277.47 109.261C267.13 120.259 257.6 131.919 250.05 145.061C246.17 151.812 242.21 158.564 238.88 165.596C231.64 180.881 226.13 196.788 222.94 213.466C222.13 217.674 220.91 221.79 220.92 226.148C220.92 227.36 220.13 228.582 219.6 230.084H176C176 229.083 176 228.081 176 227.089C176.32 226.548 176.92 226.008 176.9 225.477C176.77 220.298 178.02 215.33 178.92 210.291C181.03 198.581 183.94 187.072 187.69 175.803C189.88 169.212 192.51 162.771 195.06 156.31C199.14 145.933 204.4 136.146 210.05 126.57C215.44 117.444 221.43 108.74 227.82 100.265C233.72 92.4423 240.04 84.9797 246.83 77.9879C253.05 71.5771 260.16 66.0378 266.65 59.8774C274.64 52.3046 283.78 46.2644 292.92 40.3544C303.06 33.8034 313.58 27.8033 324.82 23.0953C335.82 18.4876 346.77 13.8598 358.24 10.4941C373.31 6.07663 388.68 3.1517 404.23 1.2585C411.77 0.336948 419.45 0.136611 427.06 0.206729C436.84 0.296881 446.65 -0.714826 456.41 1.05816C463.53 2.35034 470.77 2.98141 477.92 4.14337C489.5 6.02654 500.81 9.12177 511.97 12.6778C521.29 15.6428 530.2 19.6796 539.17 23.5661C548.81 27.7432 557.74 33.1222 566.71 38.4312C572.54 41.877 577.86 46.1642 583.55 49.8705C592.62 55.7704 600.49 63.1529 608.47 70.325C615 76.1949 620.72 82.9663 626.72 89.4172C628.86 91.7211 630.91 94.1352 632.73 96.6794C638.01 104.082 643.32 111.474 648.31 119.057C655.9 130.577 662.42 142.737 667.58 155.519C673.71 170.684 679.37 186.06 682.52 202.197C683.75 208.498 685.02 214.799 685.94 221.149C686.6 225.717 686.7 230.365 687.12 234.973C687.16 235.373 687.69 235.724 687.99 236.095V277.084L688 277.074Z"
|
||
fill="#05CE45"
|
||
/>
|
||
</g>
|
||
</g>
|
||
<rect
|
||
y="194"
|
||
width="865"
|
||
height="318"
|
||
fill="url(#paint1_linear_419_237)"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_419_237"
|
||
x1="432"
|
||
y1="0"
|
||
x2="432"
|
||
y2="512"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#E7FFEF" />
|
||
<stop offset="0.678759" stop-color="white" />
|
||
</linearGradient>
|
||
<linearGradient
|
||
id="paint1_linear_419_237"
|
||
x1="432.5"
|
||
y1="194"
|
||
x2="432.5"
|
||
y2="315.861"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#F9FFFB" stop-opacity="0" />
|
||
<stop offset="1" stop-color="#F9FFFB" />
|
||
</linearGradient>
|
||
<clipPath id="clip0_419_237">
|
||
<rect x="176" width="512" height="512" rx="256" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
<svg
|
||
v-else
|
||
viewBox="0 0 512 512"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<g clip-path="url(#clip0_127_331)">
|
||
<rect width="512" height="512" fill="url(#paint0_linear_127_331)" />
|
||
<g style="mix-blend-mode: overlay">
|
||
<g opacity="0.5">
|
||
<path
|
||
d="M0 274.069H43.65C45.89 299.001 52.25 322.42 62.87 345.249C69.4 342.033 75.37 338.016 81.52 334.3C87.76 330.534 94.07 326.908 100.62 323.061C100.21 321.669 99.95 320.216 99.37 318.914C95.05 309.378 92.47 299.251 90.32 289.114C89.03 283.054 88.41 276.743 87.73 270.513C86.89 262.86 86.94 255.257 87.11 247.654C87.26 241.083 88.11 234.482 89.21 227.991C90.88 218.064 93.39 208.308 96.94 198.852C100.79 188.594 105.19 178.588 111.21 169.382C115.19 163.292 118.97 157.021 123.53 151.382C130.3 142.998 137.75 135.214 146.12 128.273C154.05 121.692 162.16 115.421 171.18 110.483C178.15 106.676 185.39 103.341 192.66 100.115C203.13 95.4674 214.24 92.873 225.39 90.4289C234.67 88.4055 254.03 87.3237 262.96 88.6158C262.51 95.9282 260.63 103.05 259.44 110.262C258.26 117.394 256.94 124.496 255.6 132.109C252.15 132.44 248.73 132.7 245.32 133.121C240.25 133.752 235.15 134.263 230.15 135.265C219.4 137.428 209.13 141.044 199.33 145.973C190.85 150.23 182.98 155.398 175.89 161.709C172.8 164.464 169.52 167.048 166.67 170.033C159.77 177.225 153.99 185.279 148.68 193.713C144.48 200.364 141.45 207.536 138.8 214.839C136.05 222.422 134.33 230.315 132.95 238.308C131.43 247.093 131.9 255.898 132.2 264.653C132.48 272.867 134.18 281 136.49 288.934C137.45 292.239 138.44 295.535 139.62 299.481C156.06 289.705 172.08 280.169 188.47 270.422C185.92 263.631 183.46 257.16 181.05 250.669C178.63 244.178 176.26 237.667 173.78 230.926C176.79 227.871 179.71 224.936 182.6 221.971C193.97 210.291 205.46 198.712 216.6 186.821C219.77 183.436 223.36 181.913 227.66 181.062C238.16 178.978 248.63 176.734 259.11 174.541C265.87 173.128 272.62 171.686 279.69 170.193C285.36 177.175 291.08 184.217 296.94 191.439C295.8 192.671 294.85 193.783 293.82 194.815C287 201.656 279.97 208.308 273.41 215.4C270.18 218.896 266.34 220.709 262.01 221.961C257.09 223.383 252.16 224.745 247.25 226.198C246.5 226.418 245.73 226.909 245.19 227.48C240.62 232.298 236.15 237.216 231.55 241.995C229.9 243.697 229.89 245.31 230.67 247.424C232.91 253.474 234.92 259.604 237.12 265.674C237.5 266.716 238.27 267.668 239.04 268.499C243.55 273.377 248.05 278.266 252.73 282.974C253.48 283.725 255.24 284.055 256.33 283.775C262.57 282.182 268.72 280.289 274.94 278.636C277.49 277.955 279.32 276.443 281.01 274.559C284.1 271.094 287.55 267.898 290.27 264.172C293.55 259.684 297.91 257.901 303.09 256.82C307.44 255.908 311.58 254.045 315.83 252.673C320.23 251.25 324.69 249.998 329.07 248.495C331.08 247.804 332.18 248.305 332.99 250.198C336.16 257.671 339.4 265.114 342.76 272.917C339.97 276.342 337.04 279.919 334.13 283.515C329.45 289.304 324.81 295.124 320.12 300.904C316.16 305.782 311.86 310.42 308.26 315.549C305.66 319.255 302.09 320.717 298.16 321.959C286.33 325.716 274.52 329.502 262.69 333.268C255.61 335.522 248.51 337.756 240.91 340.16C239.33 338.648 237.45 337.055 235.81 335.232C231.16 330.053 226.62 324.794 222.03 319.565C219.63 316.831 217.3 314.006 214.79 311.382C212.08 308.557 211.52 308.557 208.41 310.42C201.88 314.337 195.33 318.243 188.82 322.19C180.32 327.328 171.85 332.507 163.09 337.836C165.26 341.482 168.39 344.257 171.49 346.811C177.22 351.539 183.26 355.907 189.37 360.144C200.53 367.867 212.92 372.815 226.07 376.081C233.82 378.004 241.59 379.286 249.6 379.076C250.74 379.046 251.88 379.446 253.02 379.516C254.64 379.617 256.27 379.667 257.88 379.587C259.19 379.526 260.48 379.106 261.79 379.076C266.03 378.966 266.07 378.996 267.29 383.443C270.74 396.014 274.16 408.585 277.58 421.167C277.7 421.597 277.65 422.068 277.7 422.88C273 423.28 268.42 423.781 263.83 424.022C260.17 424.212 256.5 423.961 252.83 424.092C238.81 424.592 225.08 422.469 211.69 418.733C190.28 412.763 170.56 403.216 152.88 389.523C144.7 383.183 137.41 375.95 130.16 368.648C128.89 367.366 127.97 365.743 126.78 364.371C124.52 361.746 123.87 361.526 120.85 363.189C116.49 365.583 112.24 368.167 107.98 370.722C101.72 374.458 95.49 378.234 89.25 382.001C88.56 382.421 87.91 382.902 87.18 383.403C87.7 387.54 91.09 389.654 93.19 392.448C96.55 396.946 100.45 401.113 104.58 404.939C110.77 410.669 117.38 415.938 123.77 421.457C130.94 427.658 138.86 432.756 146.98 437.604C156.25 443.144 165.84 448.092 175.94 451.808C185.7 455.394 195.65 458.54 205.69 461.244C212.49 463.077 219.62 463.678 226.56 465.061C238.21 467.385 249.99 467.224 261.75 466.924C268.49 466.754 275.21 465.622 281.94 465.071C289.69 464.44 297.25 462.767 304.79 461.014C316.41 458.319 327.64 454.453 338.64 449.795C354.77 442.964 369.63 433.968 383.65 423.601C394.63 415.477 404.59 406.061 413.5 395.774C422.25 385.667 430.72 375.209 436.97 363.219C439.56 358.241 442.38 353.382 445.25 348.184C459.52 353.322 473.65 358.411 488.03 363.59C487.75 364.691 487.65 365.663 487.26 366.484C479.92 381.77 471.35 396.285 460.95 409.727C452.93 420.105 444.71 430.292 435.17 439.307C428.8 445.327 422.41 451.358 415.25 456.496C408.53 461.314 402.16 466.653 395.24 471.151C380.34 480.857 364.49 488.721 347.9 495.262C332.29 501.412 316.07 505.198 299.79 508.774C292.91 510.287 285.7 510.297 278.64 511.058C277.74 511.158 276.89 511.679 276.02 512H233.02C229.58 510.147 225.69 510.908 222.04 510.127C216.73 508.995 211.16 509.055 205.91 507.763C194.54 504.958 183.16 502.043 172.04 498.387C159.77 494.35 147.98 489.101 136.56 482.941C124.86 476.63 113.55 469.779 102.84 461.945C93.2 454.894 84.11 447.171 75.49 438.927C72.39 435.952 69.88 432.356 66.77 429.391C59.89 422.829 54.17 415.267 48.57 407.704C42.48 399.48 36.95 390.755 32.03 381.78C21.57 362.698 12.92 342.835 7.67 321.579C4.7 309.558 1.71 297.578 0.89 285.177C0.86 284.787 0.32 284.436 0.02 284.065C0.02 280.73 0.02 277.404 0.02 274.069H0Z"
|
||
fill="white"
|
||
/>
|
||
<path
|
||
d="M512 277.074C511.69 277.615 511.11 278.136 511.09 278.686C510.56 293.612 507.03 308.016 503.73 322.45C499.99 322.05 466.32 309.939 460.41 306.894C461.6 300.173 462.85 293.431 463.97 286.66C465.13 279.648 465.76 272.606 466.1 265.484C466.43 258.563 466.1 251.691 466.02 244.789C465.94 237.858 465.47 231.006 463.48 223.784C449.94 227.39 436.76 230.896 423.27 234.492C423.19 235.964 422.74 237.507 423.09 238.839C424.63 244.749 423.88 250.739 423.99 256.699C424.43 280.079 419.08 302.226 409.83 323.592C404.73 335.372 398.24 346.311 390.66 356.598C383.95 365.713 376.43 374.228 367.81 381.53C358.36 389.543 348.76 397.497 337.41 402.896C332.18 405.39 327.03 408.045 321.83 410.599C321.43 410.799 320.9 410.759 320.49 410.819C318.33 407.514 310.2 378.274 308.59 368.177C357.62 341.532 381.58 300.664 378.95 244.639C372.26 194.314 345.33 159.555 298.14 139.752C300.69 125.278 303.28 110.593 305.96 95.3973C310 96.7796 313.75 97.8414 317.32 99.3439C328.19 103.932 338.89 108.93 348.68 115.541C361.67 124.316 373.44 134.654 383.65 146.473C394.52 159.055 403.39 173.078 409.96 188.434C411.1 191.099 411.3 191.279 413.95 190.578C426.53 187.272 439.11 183.917 452.08 180.481C451.53 178.608 451.18 176.845 450.5 175.232C442.95 157.262 433.28 140.493 421.33 125.107C414.3 116.052 406.71 107.398 398.08 99.8448C385.23 88.6058 371.51 78.599 356.54 70.1948C345.76 64.1446 334.5 59.3665 322.93 55.3798C312.2 51.6836 301.17 48.8788 289.88 46.9756C274.75 44.4313 259.58 43.7201 244.33 44.221C238.75 44.4013 233.21 45.6033 227.63 46.004C218.2 46.6851 209.07 48.979 199.97 51.2128C191.14 53.3764 182.57 56.4516 174.19 60.0276C170.54 61.5903 166.73 62.8324 163.19 64.6053C157.26 67.5804 151.36 70.6455 145.67 74.0713C140.29 77.3068 135.08 80.8628 130.03 84.5991C124.85 88.4255 119.84 92.5124 114.96 96.7195C110.31 100.726 105.67 104.793 101.47 109.261C91.13 120.259 81.6 131.919 74.05 145.061C70.17 151.812 66.21 158.564 62.88 165.596C55.64 180.881 50.13 196.788 46.94 213.466C46.13 217.674 44.91 221.79 44.92 226.148C44.92 227.36 44.13 228.582 43.6 230.084H0C0 229.083 0 228.081 0 227.089C0.32 226.548 0.92 226.008 0.9 225.477C0.77 220.298 2.02 215.33 2.92 210.291C5.03 198.581 7.94 187.072 11.69 175.803C13.88 169.212 16.51 162.771 19.06 156.31C23.14 145.933 28.4 136.146 34.05 126.57C39.44 117.444 45.43 108.74 51.82 100.265C57.72 92.4423 64.04 84.9797 70.83 77.9879C77.05 71.5771 84.16 66.0378 90.65 59.8774C98.64 52.3046 107.78 46.2644 116.92 40.3544C127.06 33.8034 137.58 27.8033 148.82 23.0953C159.82 18.4876 170.77 13.8598 182.24 10.4941C197.31 6.07663 212.68 3.1517 228.23 1.2585C235.77 0.336948 243.45 0.136611 251.06 0.206729C260.84 0.296881 270.65 -0.714826 280.41 1.05816C287.53 2.35034 294.77 2.98141 301.92 4.14337C313.5 6.02654 324.81 9.12177 335.97 12.6778C345.29 15.6428 354.2 19.6796 363.17 23.5661C372.81 27.7432 381.74 33.1222 390.71 38.4312C396.54 41.877 401.86 46.1642 407.55 49.8705C416.62 55.7705 424.49 63.1529 432.47 70.325C439 76.1949 444.72 82.9663 450.72 89.4172C452.86 91.7211 454.91 94.1352 456.73 96.6795C462.01 104.082 467.32 111.474 472.31 119.057C479.9 130.577 486.42 142.737 491.58 155.519C497.71 170.684 503.37 186.06 506.52 202.197C507.75 208.498 509.02 214.799 509.94 221.149C510.6 225.717 510.7 230.365 511.12 234.973C511.16 235.373 511.69 235.724 511.99 236.095V277.084L512 277.074Z"
|
||
fill="white"
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_127_331"
|
||
x1="256"
|
||
y1="0"
|
||
x2="256"
|
||
y2="512"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop stop-color="#05CE45" />
|
||
<stop offset="0.678759" stop-color="#051F10" />
|
||
</linearGradient>
|
||
<clipPath id="clip0_127_331">
|
||
<rect width="512" height="512" rx="256" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
<div class="overlay">
|
||
<h2 class="main-header">
|
||
Read more about <br />
|
||
<strong class="main-header-strong">Modrinth</strong>
|
||
</h2>
|
||
<a
|
||
href="https://blog.modrinth.com/subscribe?utm_source=website&utm_source=homepage&utm_campaign=newsletter"
|
||
class="iconified-button brand-button"
|
||
>
|
||
Visit the blog
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Multiselect from 'vue-multiselect'
|
||
import SearchIcon from '~/assets/images/utils/search.svg?inline'
|
||
import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
|
||
import ModrinthIcon from '~/assets/images/logo.svg?inline'
|
||
import Avatar from '~/components/ui/Avatar'
|
||
import ProjectCard from '~/components/ui/ProjectCard'
|
||
|
||
export default {
|
||
components: {
|
||
Multiselect,
|
||
Avatar,
|
||
ModrinthIcon,
|
||
SearchIcon,
|
||
CalendarIcon,
|
||
ProjectCard,
|
||
},
|
||
auth: false,
|
||
async asyncData(data) {
|
||
const [projects, baseSearch, updated] = (
|
||
await Promise.all([
|
||
await data.$axios.get('projects_random?count=70'),
|
||
await data.$axios.get('search?limit=3&query=flowers'),
|
||
await data.$axios.get('search?limit=3&query=&index=updated'),
|
||
])
|
||
).map((it) => it.data)
|
||
|
||
const val = Math.ceil(projects.length / 3)
|
||
|
||
return {
|
||
rows: [
|
||
projects.slice(0, val),
|
||
projects.slice(val, val * 2),
|
||
projects.slice(val * 2, val * 3),
|
||
],
|
||
searchProjects: baseSearch.hits,
|
||
notifications: updated.hits,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
searchQuery: 'flowers',
|
||
sortType: 'relevance',
|
||
}
|
||
},
|
||
computed: {
|
||
authUrl() {
|
||
return `${process.env.authURLBase}auth/init?url=${process.env.domain}/`
|
||
},
|
||
},
|
||
methods: {
|
||
async updateSearchProjects() {
|
||
this.searchProjects = (
|
||
await this.$axios.get(
|
||
`search?query=${this.searchQuery}&limit=3&index=${this.sortType}`
|
||
)
|
||
).data.hits
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.landing-hero {
|
||
background-image: var(--landing-maze-bg);
|
||
background-size: cover;
|
||
object-fit: contain;
|
||
padding: 6rem 1rem 12rem 1rem;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
flex-direction: column;
|
||
|
||
svg {
|
||
width: 13rem;
|
||
height: 13rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.25rem;
|
||
line-height: 125%;
|
||
margin: 0 0 1.625rem;
|
||
font-weight: 400;
|
||
line-break: loose;
|
||
color: var(--landing-color-subheading);
|
||
max-width: 50rem;
|
||
}
|
||
|
||
.button-group {
|
||
width: fit-content;
|
||
gap: 1.25rem;
|
||
margin: 0 auto 5rem;
|
||
justify-content: center;
|
||
|
||
// TODO: work for both themes and move to components.scss
|
||
.outline-button {
|
||
color: var(--landing-color-heading);
|
||
background: none;
|
||
border: 1px var(--landing-color-heading) solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
.users-section-outer {
|
||
position: relative;
|
||
background: var(--landing-maze-outer-bg);
|
||
width: 100%;
|
||
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 1;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
var(--landing-transition-gradient-end) 0%,
|
||
var(--landing-transition-gradient-start) 100%
|
||
);
|
||
height: 12.5rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.projects-transition {
|
||
position: absolute;
|
||
top: calc(-12.5rem);
|
||
width: 100%;
|
||
height: 12.5rem;
|
||
background: linear-gradient(
|
||
0deg,
|
||
var(--landing-transition-gradient-end) 0%,
|
||
var(--landing-transition-gradient-start) 100%
|
||
);
|
||
}
|
||
|
||
.projects-showcase {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: -11rem;
|
||
|
||
.row {
|
||
--gap: 1.5rem;
|
||
|
||
width: 100vw;
|
||
gap: var(--gap);
|
||
margin-bottom: var(--gap);
|
||
|
||
display: flex;
|
||
overflow: hidden;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
.row__content {
|
||
animation-play-state: paused !important;
|
||
}
|
||
}
|
||
|
||
.row__content {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
min-width: 100%;
|
||
gap: var(--gap);
|
||
animation: scroll 100s linear infinite;
|
||
|
||
@media (prefers-reduced-motion) {
|
||
animation-play-state: paused !important;
|
||
}
|
||
|
||
@keyframes scroll {
|
||
from {
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
transform: translateX(calc(-100%));
|
||
}
|
||
}
|
||
|
||
&.offset {
|
||
animation: scroll-inverse 100s linear infinite;
|
||
transform: translateX(-100%);
|
||
|
||
@keyframes scroll-inverse {
|
||
from {
|
||
transform: translateX(calc(-100%));
|
||
}
|
||
to {
|
||
transform: translateX(calc(0%));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.project {
|
||
position: relative;
|
||
display: flex;
|
||
|
||
cursor: pointer;
|
||
padding: 1rem;
|
||
gap: 1rem;
|
||
border-radius: 1rem;
|
||
transition: background 0.5s ease-in-out;
|
||
// Removed due to lag on mobile :(
|
||
// backdrop-filter: blur(0.25rem);
|
||
|
||
&:hover {
|
||
z-index: -2;
|
||
background: var(--landing-hover-card-gradient);
|
||
}
|
||
|
||
img {
|
||
height: 3rem;
|
||
}
|
||
|
||
.project-info {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.title p {
|
||
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%;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.users-section {
|
||
width: 100%;
|
||
padding-top: 10rem;
|
||
padding-bottom: 5rem;
|
||
|
||
background: var(--landing-maze-gradient-bg);
|
||
background-size: cover;
|
||
background-blend-mode: multiply;
|
||
|
||
.feature-blob {
|
||
display: flex;
|
||
padding: 1.25rem 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
column-gap: 4.375rem;
|
||
margin: 0 0.75rem 0.75rem 0.75rem;
|
||
|
||
&.reverse {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.blob-text {
|
||
margin-top: 2.5rem;
|
||
width: 32.5rem;
|
||
max-width: 32.5rem;
|
||
text-align: center;
|
||
|
||
h3 {
|
||
font-weight: 500;
|
||
font-size: 2rem;
|
||
line-height: 110%;
|
||
color: var(--landing-color-heading);
|
||
}
|
||
|
||
p {
|
||
font-weight: 400;
|
||
font-size: 1.25rem;
|
||
line-height: 125%;
|
||
color: var(--landing-color-subheading);
|
||
line-break: loose;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1238px) {
|
||
padding: 5rem 1rem;
|
||
|
||
.blob-text {
|
||
margin-top: 5rem;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.blob-demonstration {
|
||
position: relative;
|
||
width: 35rem;
|
||
max-width: 35rem;
|
||
background: var(--landing-blob-gradient);
|
||
box-shadow: var(--landing-blob-shadow);
|
||
// backdrop-filter: blur(6px);
|
||
background-blend-mode: multiply;
|
||
padding: 1rem;
|
||
z-index: 1;
|
||
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
0deg,
|
||
#05ce45 0%,
|
||
rgba(5, 206, 69, 0) 100%
|
||
);
|
||
opacity: 0.2;
|
||
border-radius: 1rem;
|
||
left: -0.75rem;
|
||
bottom: -0.75rem;
|
||
margin-top: auto;
|
||
width: calc(100% + 1.5rem);
|
||
height: 55%;
|
||
}
|
||
|
||
.demo-search {
|
||
height: max-content;
|
||
|
||
.search-controls {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 1rem;
|
||
gap: 1rem;
|
||
|
||
.iconified-input {
|
||
width: 100%;
|
||
|
||
svg {
|
||
opacity: 1;
|
||
color: var(--color-button-text-active);
|
||
}
|
||
|
||
input {
|
||
box-shadow: inset 0 0 0 transparent,
|
||
0 0 0 0.25rem var(--color-brand-shadow);
|
||
color: var(--color-button-text-active);
|
||
}
|
||
}
|
||
|
||
.sort-by {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
min-width: 12.25rem;
|
||
|
||
.selector {
|
||
max-width: 8rem;
|
||
}
|
||
|
||
@media screen and (max-width: 500px) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.results {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
|
||
.small-mode {
|
||
background: var(--landing-card-bg);
|
||
box-shadow: var(--landing-card-shadow);
|
||
background-blend-mode: multiply;
|
||
// backdrop-filter: blur(4px);
|
||
}
|
||
|
||
@media screen and (max-width: 450px) {
|
||
.small-mode:nth-child(n + 2) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 500px) {
|
||
.small-mode:nth-child(n + 3) {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.notifs-demo {
|
||
h3 {
|
||
font-weight: 600;
|
||
font-size: 1.5rem;
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.notifications {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
|
||
.notification {
|
||
display: flex;
|
||
gap: 1rem;
|
||
padding: 0.75rem;
|
||
background: var(--landing-card-bg);
|
||
box-shadow: var(--landing-card-shadow);
|
||
|
||
.notif-header {
|
||
margin: 0;
|
||
font-weight: 600;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.notif-desc {
|
||
margin: 0.5rem 0;
|
||
font-weight: 500;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.date {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
|
||
span {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.launcher-view {
|
||
.minecraft-screen {
|
||
width: 100%;
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
.launcher-graphics {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 1rem;
|
||
gap: 0.5rem;
|
||
|
||
.graphic {
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--landing-card-bg);
|
||
box-shadow: var(--landing-card-shadow);
|
||
//backdrop-filter: blur(4px);
|
||
margin: 0 auto;
|
||
|
||
img {
|
||
width: 4.25rem;
|
||
height: auto;
|
||
image-rendering: crisp-edges;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.creator-section {
|
||
width: 100%;
|
||
background: var(--landing-creator-gradient);
|
||
padding: 2.5rem 0;
|
||
|
||
.features {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
max-width: 81.25rem;
|
||
justify-content: center;
|
||
margin: 5rem auto 0 auto;
|
||
row-gap: 3.5rem;
|
||
column-gap: 3rem;
|
||
padding: 1rem;
|
||
|
||
.feature {
|
||
width: 34.375rem;
|
||
padding: 1.25rem;
|
||
z-index: 1;
|
||
background: var(--landing-card-bg);
|
||
|
||
.icon {
|
||
z-index: 2;
|
||
margin: -3.25rem 0 0.75rem 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
background: #020305;
|
||
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 32px #393d5e;
|
||
border-radius: 0.75rem;
|
||
|
||
svg {
|
||
width: 2rem;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
h4,
|
||
p {
|
||
font-weight: 500;
|
||
line-height: 125%;
|
||
margin: 0;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.25rem;
|
||
color: var(--landing-color-heading);
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
p {
|
||
font-size: 1.25rem;
|
||
color: var(--landing-color-subheading);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logo-banner {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--landing-raw-bg);
|
||
padding: 1rem 1rem 2rem 1rem;
|
||
overflow: hidden;
|
||
|
||
svg {
|
||
z-index: 2;
|
||
width: auto;
|
||
height: 32rem;
|
||
}
|
||
|
||
.overlay {
|
||
z-index: 3;
|
||
position: absolute;
|
||
bottom: 8rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 1.5rem;
|
||
}
|
||
}
|
||
|
||
.gradient-border {
|
||
position: relative;
|
||
border-radius: 1rem;
|
||
|
||
&: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;
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin: 2rem;
|
||
|
||
.section-label {
|
||
margin: 1.5rem auto;
|
||
width: fit-content;
|
||
padding: 1rem 1.5rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
line-height: 125%;
|
||
|
||
&.green {
|
||
background: var(--landing-green-label-bg);
|
||
color: var(--landing-green-label);
|
||
}
|
||
&.blue {
|
||
background: var(--landing-blue-label-bg);
|
||
color: var(--landing-blue-label);
|
||
}
|
||
}
|
||
|
||
.section-tagline,
|
||
.section-description {
|
||
font-weight: 400;
|
||
font-size: 1.25rem;
|
||
line-break: loose;
|
||
line-height: 125%;
|
||
max-width: 50rem;
|
||
}
|
||
|
||
.section-tagline {
|
||
margin: 0 auto;
|
||
color: var(--landing-color-heading);
|
||
}
|
||
|
||
.section-description {
|
||
margin: 0.375rem auto;
|
||
color: var(--landing-color-subheading);
|
||
}
|
||
}
|
||
|
||
.main-header {
|
||
color: var(--landing-color-heading);
|
||
font-size: 2.25rem;
|
||
font-weight: 600;
|
||
line-height: 100%;
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.animate-strong {
|
||
height: 1.2em;
|
||
line-height: 120%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
> span {
|
||
position: absolute;
|
||
top: 0;
|
||
animation: slide 10s infinite;
|
||
|
||
@media (prefers-reduced-motion) {
|
||
animation-play-state: paused !important;
|
||
}
|
||
}
|
||
|
||
@keyframes slide {
|
||
0%,
|
||
12% {
|
||
top: 0;
|
||
}
|
||
15%,
|
||
27% {
|
||
top: -1.2em;
|
||
}
|
||
30%,
|
||
42% {
|
||
top: -2.4em;
|
||
}
|
||
45%,
|
||
57% {
|
||
top: -3.6em;
|
||
}
|
||
60%,
|
||
72% {
|
||
top: -4.8em;
|
||
}
|
||
75%,
|
||
83% {
|
||
top: -6em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.iconified-button {
|
||
font-weight: 600;
|
||
min-height: 3rem;
|
||
}
|
||
|
||
@media screen and (min-width: 560px) {
|
||
.landing-hero {
|
||
h2 {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
|
||
.users-section-outer {
|
||
.users-section {
|
||
.feature-blob {
|
||
.blob-text {
|
||
h3 {
|
||
font-size: 3rem;
|
||
}
|
||
p {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
.blob-demonstration {
|
||
.demo-search {
|
||
height: 37.5rem;
|
||
}
|
||
|
||
.launcher-view {
|
||
.launcher-graphics {
|
||
.graphic {
|
||
margin: 0;
|
||
padding: 1.25rem 2.75rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logo-banner {
|
||
padding: 3rem 1rem 3.75rem 1rem;
|
||
|
||
.overlay {
|
||
bottom: 3.5rem;
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
.section-tagline,
|
||
.section-description {
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
|
||
.main-header {
|
||
font-size: 4rem;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
.landing-hero {
|
||
h2 {
|
||
font-size: 1.625rem;
|
||
}
|
||
|
||
padding: 12rem 1rem;
|
||
// Magic number to cover header (space in rem header occupies)
|
||
margin-top: -5.75rem;
|
||
}
|
||
|
||
.users-section-outer {
|
||
.users-section {
|
||
.feature-blob {
|
||
.blob-text {
|
||
h3 {
|
||
font-size: 4rem;
|
||
}
|
||
p {
|
||
font-size: 1.625rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.creator-section {
|
||
.features {
|
||
margin-top: 7rem;
|
||
row-gap: 5.5rem;
|
||
|
||
.feature {
|
||
min-height: 12rem;
|
||
|
||
.icon {
|
||
margin-bottom: 1.25rem;
|
||
width: 5rem;
|
||
height: 5rem;
|
||
|
||
svg {
|
||
width: 2.25rem;
|
||
}
|
||
}
|
||
|
||
.additional-label {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 112px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
p {
|
||
font-size: 1.25rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logo-banner {
|
||
padding: 4rem 1rem 6.75rem 1rem;
|
||
|
||
.overlay {
|
||
bottom: 5rem;
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
.section-tagline,
|
||
.section-description {
|
||
font-size: 1.625rem;
|
||
}
|
||
}
|
||
|
||
.main-header {
|
||
font-size: 5.25rem;
|
||
}
|
||
}
|
||
</style>
|