Skip to content

Commit

Permalink
really fix mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@gantoine
gantoine committed May 16, 2024
1 parent b94e031 commit 8d7b45d
Showing 1 changed file with 175 additions and 122 deletions.
297 changes: 175 additions & 122 deletions app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ const menuItems: MenuItem[] = [
</template>
</Menubar>

<div class="md:grid grid-cols-2 px-10 md:px-0 md:pl-10 md:mb-10">
<div class="text-center md:text-left flex items-center">
<div class="md:grid grid-cols-2 px-6 md:px-0 md:pl-10 md:mb-10">
<div class="text-left flex items-center">
<section class="py-8">
<span class="block text-4xl sm:text-5xl md:text-6xl font-bold mb-2">
Your beautiful, powerful,
Expand All @@ -113,12 +113,18 @@ const menuItems: MenuItem[] = [
>
self-hosted rom manager
</div>
<p class="mt-0 mb-8 md:mb-4 surface-700 leading-relaxed">
Scan, enrich, and browse your game collection with a clean and
responsive interface. With support for multiple platforms, various
naming schemes and custom tags, RomM is a must-have for anyone who
plays on emulators.
</p>
<div
class="mb-8 md:mb-4 text-lg md:text-md surface-700 leading-relaxed"
>
<p class="mt-0">
Scan, enrich, and browse your game collection with a clean and
responsive interface.
</p>
<p class="hidden md:block mt-0">
With support for multiple platforms, various naming schemes and
custom tags, RomM is a must-have for anyone who plays on emulators.
</p>
</div>

<p-button
type="button"
Expand All @@ -139,138 +145,183 @@ const menuItems: MenuItem[] = [
</div>
</div>

<div id="features" class="surface-section px-6 py-8 lg:px-8 text-center">
<div class="text-700 mb-12 text-2xl">
<div id="features" class="surface-section px-6 py-8 lg:px-8 md:text-center">
<div class="text-700 mb-10 md:mb-12 text-2xl">
The <span class="text-purple-500">most powerful</span> all-in-one app for
managing your game collection.
</div>
<div class="grid grid-rows-6 md:grid-cols-3 md:grid-rows-2">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faWandSparkles"
class="text-4xl text-purple-500"
/>
</span>
<div class="text-900 text-xl mb-3 font-medium">Magical metadata</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
Enrich your collection with cover art and detailed metadata from
<a
href="https://www.igdb.com/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
IGDB</a
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
and
<a
href="https://www.mobygames.com/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
MobyGames</a
>.
<font-awesome-icon
:icon="faWandSparkles"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
</div>
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faListCheck"
class="text-4xl text-purple-500"
/>
</span>
<div class="text-900 text-xl mb-3 font-medium">
Broad platform support
<div class="md:px-2 xl:px-6">
<div class="text-900 text-xl mb-1 md:mb-3 font-medium">
Magical metadata
</div>
<div class="text-700 line-height-3">
Enrich your collection with cover art and detailed metadata from
<a
href="https://www.igdb.com/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
IGDB</a
>
and
<a
href="https://www.mobygames.com/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
MobyGames</a
>.
</div>
</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
Retro or modern, RomM has you covered with support for
<a
href="https://github.com/rommapp/romm/wiki/Supported-Platforms"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
</div>
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
400+</a
<font-awesome-icon
:icon="faListCheck"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
<div class="md:px-2 xl:px-6">
<div class="text-900 text-xl mb-1 md:mb-3 font-medium">
Broad platform support
</div>
<div class="text-700 line-height-3">
Retro or modern, RomM has you covered with support for
<a
href="https://github.com/rommapp/romm/wiki/Supported-Platforms"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
400+</a
>
systems and platforms.
</div>
</div>
</div>
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
systems and platforms.
<font-awesome-icon
:icon="faGamepad"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
<div class="md:px-2 xl:px-6">
<div class="text-900 text-xl mb-1 md:mb-3 font-medium">
Seamless gameplay
</div>
<div class="text-700 line-height-3">
With
<a
href="https://emulatorjs.org/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
>
EmulatorJS</a
>
built-in, play your favorite games in your browser, no setup
required.
</div>
</div>
</div>
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faGamepad"
class="text-4xl text-purple-500"
/>
</span>
<div class="text-900 text-xl mb-3 font-medium">Seamless gameplay</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
With
<a
href="https://emulatorjs.org/"
target="_blank"
rel="noopener"
class="underline hover:text-purple-500"
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
EmulatorJS</a
<font-awesome-icon
:icon="faRotate"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
<div class="md:px-2 xl:px-6">
<div
class="text-900 text-xl mb-1 md:mb-3 font-medium flex items-center md:justify-center"
>
built-in, play your favorite games in your browser, no setup required.
<span>Device sync</span>
<tag
value="COMING SOON"
severity="primary"
class="text-xs whitespace-nowrap ml-2"
></tag>
</div>
<div class="text-700 line-height-3">
Sync your games, saves and emulator settings across your devices
with ease.
</div>
</div>
</div>
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faRotate"
class="text-4xl text-purple-500"
/>
</span>
<div
class="text-900 text-xl mb-3 font-medium flex items-center justify-center"
>
<span>Device sync</span>
<tag
value="COMING SOON"
severity="primary"
class="text-xs whitespace-nowrap ml-2"
></tag>
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
<font-awesome-icon
:icon="faGithub"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
Sync your games, saves and emulator settings across your devices with
ease.
<div class="md:px-2 xl:px-6">
<div class="text-900 text-xl mb-1 md:mb-3 font-medium">
Open source
</div>
<div class="text-700 line-height-3">
Built by the community, for the community.<br />
Fully transparent and licensed under AGPL-3.0.
</div>
</div>
</div>
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faGithub"
class="text-4xl text-purple-500"
/>
</span>
<div class="text-900 text-xl mb-3 font-medium">Open source</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
Built by the community, for the community.<br />
Fully transparent and licensed under AGPL-3.0.
<div class="mb-4 sm:mb-6 md:mb-12 md:px-6 flex gap-4 md:block">
<div>
<span
class="mt-1 md:mt-0 p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900"
>
<font-awesome-icon
:icon="faShieldHeart"
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
/>
</span>
</div>
</div>
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-100 dark:bg-slate-900">
<font-awesome-icon
:icon="faShieldHeart"
class="text-4xl text-purple-500"
/>
</span>
<div class="text-900 text-xl mb-3 font-medium">Private and secure</div>
<div class="text-700 line-height-3 px-2 xl:px-6">
Maintain total control of your data.<br />
Built with security in mind and regularly updated.
<div class="md:px-2 xl:px-6">
<div class="text-900 text-xl mb-1 md:mb-3 font-medium">
Private and secure
</div>
<div class="text-700 line-height-3">
Maintain total control of your data.<br />
Built with security in mind and regularly updated.
</div>
</div>
</div>
</div>
</div>

<div id="discord" class="surface-section px-4 py-12 md:px-6 lg:px-8">
<div class="text-700 text-center">
<div id="discord" class="surface-section px-6 py-8 md:py-12 md:px-6 lg:px-8">
<div class="text-700 md:text-center">
<div class="text-purple-600 font-bold mb-3">
<i class="pi pi-discord"></i>&nbsp;POWERED BY FRIENDSHIP
</div>
Expand All @@ -289,26 +340,26 @@ const menuItems: MenuItem[] = [
</div>

<div
class="surface-section px-4 py-8 my-6 md:px-6 lg:px-8 flex flex-col items-center"
class="surface-section px-6 py-8 my-6 md:px-4 lg:px-8 flex flex-col md:items-center"
>
<div class="text-4xl text-700 font-bold mb-1">People ❤️ RomM</div>

<div class="surface-section flex flex-col sm:flex-row justify-around mt-4">
<div class="pt-4 px-4 xl:px-6">
<div class="pt-4 md:px-4 xl:px-6">
<div class="flex items-center">
<font-awesome-icon :icon="faStar" class="text-2xl text-purple-500" />
<div class="font-bold ml-3 text-2xl">1,300+</div>
</div>
<div class="ml-10">Github stars</div>
</div>
<div class="pt-4 px-4 xl:px-6">
<div class="pt-4 md:px-4 xl:px-6">
<div class="flex items-center">
<font-awesome-icon :icon="faUsers" class="text-2xl text-purple-500" />
<div class="font-bold ml-3 text-2xl">700+</div>
</div>
<div class="ml-10">Discord members</div>
</div>
<div class="pt-4 px-4 xl:px-6">
<div class="pt-4 md:px-4 xl:px-6">
<div class="flex items-center">
<font-awesome-icon
:icon="faArrowDown"
Expand All @@ -321,7 +372,9 @@ const menuItems: MenuItem[] = [
</div>
</div>

<divider class="before:border-t-slate-100 dark:before:border-t-slate-900 m-auto" />
<divider
class="before:border-t-slate-100 dark:before:border-t-slate-900 m-auto"
/>

<footer
class="surface-section py-4 px-4 md:px-8 flex items-center justify-between sm:grid grid-cols-3 m-auto"
Expand All @@ -333,7 +386,7 @@ const menuItems: MenuItem[] = [
class="w-8 h-8 footer-logo"
loading="lazy"
/>
<div class="text-700 text-xl ml-2">
<div class="text-700 text-lg md:text-xl ml-2">
romm<span class="text-purple-500">.</span>app
<div class="text-700 text-sm text-center sm:hidden">
Own your games.
Expand Down

0 comments on commit 8d7b45d

Please sign in to comment.