260 lines
11 KiB
Vue
260 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
UserGroupIcon,
|
|
GlobeAltIcon,
|
|
PlayIcon,
|
|
DesktopComputerIcon,
|
|
} from "@heroicons/vue/solid";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import TeamList from "@/modules/TeamList.vue";
|
|
|
|
const { t } = useI18n();
|
|
const DISCORD_URL = import.meta.env.VITE_DISCORD_URL;
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<!-- Features list -->
|
|
<div class="bg-gray-100 overflow-hidden">
|
|
<div class="container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32">
|
|
<div
|
|
class="flex flex-col lg:flex-row lg:items-center space-y-12 lg:space-y-0 lg:space-x-20"
|
|
>
|
|
<div class="lg:w-5/12 xl:w-5/12 md:py-12 space-y-10">
|
|
<div>
|
|
<div
|
|
class="text-sm uppercase font-bold tracking-wider mb-1 text-blue-700"
|
|
>
|
|
Ryujinx
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4">
|
|
{{ t("views.homepage.aboutProject") }}
|
|
</h2>
|
|
<h3
|
|
class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600"
|
|
>
|
|
{{ t("views.homepage.featureDescription") }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-7/12 xl:w-7/12 flex-none relative">
|
|
<div
|
|
class="pattern-dots-xl opacity-10 absolute top-0 left-0 w-48 h-64 md:mt-20 transform -translate-x-10 -translate-y-10"
|
|
></div>
|
|
<div
|
|
class="pattern-dots-xl opacity-10 absolute bottom-0 right-0 w-48 h-64 md:mb-20 transform translate-x-10 translate-y-10"
|
|
></div>
|
|
<div
|
|
class="relative flex flex-col md:flex-row md:space-x-6 space-y-6 md:space-y-0"
|
|
>
|
|
<div class="md:w-1/2 md:mt-24 space-y-6">
|
|
<div
|
|
class="group bg-white p-5 transition ease-out duration-200 border-2 border-gray-200 rounded-2xl hover:border-green-300"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center w-10 h-10 m-2 mb-6 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-3xl -m-2 transform rotate-6 bg-green-300 transition ease-out duration-200 group-hover:-rotate-3 group-hover:scale-105"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl transform -rotate-6 bg-green-700 bg-opacity-75 shadow-inner transition ease-out duration-200 group-hover:rotate-2 group-hover:scale-105"
|
|
></div>
|
|
<GlobeAltIcon
|
|
class="text-white relative transform transition ease-out duration-200 group-hover:scale-110 hi-solid hi-adjustments inline-block w-5 h-5"
|
|
/>
|
|
</div>
|
|
<h4 class="text-lg font-bold mb-2">
|
|
{{ t("views.homepage.openSource") }}
|
|
</h4>
|
|
<i18n-t
|
|
keypath="views.homepage.openSourceDescription"
|
|
tag="p"
|
|
class="leading-relaxed text-gray-600"
|
|
>
|
|
<a
|
|
class="text-blue-500"
|
|
href="https://github.com/Ryujinx/Ryujinx"
|
|
>
|
|
{{ t("views.homepage.github") }}</a
|
|
>.
|
|
</i18n-t>
|
|
</div>
|
|
<div
|
|
class="group bg-white p-5 transition ease-out duration-200 border-2 border-gray-200 rounded-2xl hover:border-red-300"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center w-10 h-10 m-2 mb-6 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-3xl -m-2 transform rotate-6 bg-red-300 transition ease-out duration-200 group-hover:-rotate-3 group-hover:scale-105"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl transform -rotate-6 bg-red-700 bg-opacity-75 shadow-inner transition ease-out duration-200 group-hover:rotate-2 group-hover:scale-105"
|
|
></div>
|
|
<DesktopComputerIcon
|
|
class="text-white relative transform transition ease-out duration-200 group-hover:scale-110 inline-block w-5 h-5"
|
|
/>
|
|
</div>
|
|
<h4 class="text-lg font-bold mb-2">
|
|
{{ t("views.homepage.crossPlatform") }}
|
|
</h4>
|
|
<p class="leading-relaxed text-gray-600">
|
|
{{ t("views.homepage.crossPlatformDescription") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 space-y-6">
|
|
<div
|
|
class="group bg-white p-5 transition ease-out duration-200 border-2 border-slate-200 rounded-2xl hover:border-emerald-300"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center w-10 h-10 m-2 mb-6 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-3xl -m-2 transform rotate-6 bg-teal-300 transition ease-out duration-200 group-hover:-rotate-3 group-hover:scale-105"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl transform -rotate-6 bg-teal-700 bg-opacity-75 shadow-inner transition ease-out duration-200 group-hover:rotate-2 group-hover:scale-105"
|
|
></div>
|
|
<PlayIcon
|
|
class="text-white relative transform transition ease-out duration-200 group-hover:scale-110 hi-solid hi-globe inline-block w-5 h-5"
|
|
/>
|
|
</div>
|
|
<h4 class="text-lg font-bold mb-2">
|
|
{{ t("views.homepage.compatibility") }}
|
|
</h4>
|
|
<p class="leading-relaxed text-gray-600">
|
|
{{ t("views.homepage.compatibilityDescription") }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="group bg-white p-5 transition ease-out duration-200 border-2 border-gray-200 rounded-2xl hover:border-sky-300"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center w-10 h-10 m-2 mb-6 relative"
|
|
>
|
|
<div
|
|
class="absolute inset-0 rounded-3xl -m-2 transform rotate-6 bg-sky-300 transition ease-out duration-200 group-hover:-rotate-3 group-hover:scale-105"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 rounded-2xl transform -rotate-6 bg-sky-700 bg-opacity-75 shadow-inner transition ease-out duration-200 group-hover:rotate-2 group-hover:scale-105"
|
|
></div>
|
|
|
|
<UserGroupIcon
|
|
class="text-white relative transform transition ease-out duration-200 group-hover:scale-110 inline-block w-5 h-5"
|
|
/>
|
|
</div>
|
|
<h4 class="text-lg font-bold mb-2">
|
|
{{ t("views.homepage.support") }}
|
|
</h4>
|
|
<i18n-t
|
|
keypath="views.homepage.supportDescription"
|
|
tag="p"
|
|
class="leading-relaxed text-gray-600"
|
|
>
|
|
<a class="text-blue-500" :href="DISCORD_URL">
|
|
{{ t("views.homepage.discord") }}</a
|
|
>
|
|
</i18n-t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Name -->
|
|
<div
|
|
class="bg-cover"
|
|
style="background-image: url('assets/images/wallp2.png')"
|
|
>
|
|
<div class="bg-gray-800 bg-opacity-90 backdrop-filter">
|
|
<div
|
|
class="space-y-16 container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32"
|
|
>
|
|
<div class="text-center">
|
|
<i18n-t
|
|
tag="h2"
|
|
keypath="views.homepage.nameQuestion"
|
|
class="text-3xl md:text-4xl font-extrabold mb-4 text-white"
|
|
>
|
|
<span class="text-sky-500"> {{ t("views.homepage.name") }}</span>
|
|
</i18n-t>
|
|
<i18n-t
|
|
keypath="views.homepage.nameDescription"
|
|
tag="h3"
|
|
class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-200 lg:w-2/3 mx-auto"
|
|
>
|
|
<span class="italic">{{t("views.homepage.spelled")}}</span>
|
|
</i18n-t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team List -->
|
|
<TeamList />
|
|
|
|
<!-- Stats -->
|
|
<div class="bg-gray-100 overflow-hidden">
|
|
<div class="container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32">
|
|
<div class="text-center mb-16">
|
|
<div
|
|
class="text-sm uppercase font-bold tracking-wider mb-1 text-sky-700"
|
|
>
|
|
{{ t("views.homepage.supportUs") }}
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4">
|
|
{{ t("views.homepage.trustedCommunities") }}
|
|
</h2>
|
|
<h3
|
|
class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600 lg:w-2/3 mx-auto"
|
|
>
|
|
{{ t("views.homepage.trustedCommunitiesDescription") }}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div
|
|
class="pattern-dots-md text-gray-300 absolute top-0 right-0 w-32 h-32 transform -translate-y-12 translate-x-12"
|
|
></div>
|
|
<div
|
|
class="pattern-dots-md text-gray-300 absolute bottom-0 left-0 w-32 h-32 transform translate-y-12 -translate-x-12"
|
|
></div>
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-3 text-center rounded-xl shadow-md bg-white divide-y sm:divide-y-0 sm:divide-x divide-gray-100 overflow-hidden relative"
|
|
>
|
|
<dl
|
|
class="space-y-1 px-5 py-12 hover:bg-gray-50 hover:bg-opacity-50"
|
|
>
|
|
<dt class="text-4xl font-extrabold text-sky-600">12,5k+</dt>
|
|
<dd class="text-sm uppercase tracking-wide font-semibold">
|
|
{{ t("views.homepage.githubStar") }}
|
|
</dd>
|
|
</dl>
|
|
<dl
|
|
class="space-y-1 px-5 py-12 hover:bg-gray-50 hover:bg-opacity-50"
|
|
>
|
|
<dt class="text-4xl font-extrabold text-sky-600">2,5k+</dt>
|
|
<dd class="text-sm uppercase tracking-wide font-semibold">
|
|
{{ t("views.homepage.playableGames") }}
|
|
</dd>
|
|
</dl>
|
|
<dl
|
|
class="space-y-1 px-5 py-12 hover:bg-gray-50 hover:bg-opacity-50"
|
|
>
|
|
<dt class="text-4xl font-extrabold text-sky-600">450+</dt>
|
|
<dd class="text-sm uppercase tracking-wide font-semibold">
|
|
{{ t("views.homepage.patreonContributors") }}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|