Skip to content

Commit

Permalink
get mobile version working
Browse files Browse the repository at this point in the history
  • Loading branch information
@gantoine
gantoine committed May 16, 2024
1 parent 2ba02bc commit 691035a
Show file tree
Hide file tree
Showing 4 changed files with 1,190 additions and 82 deletions.
195 changes: 121 additions & 74 deletions app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<script setup lang="ts">
import Button from "primevue/button";
import { default as PButton } from "primevue/button";
import Tag from "primevue/tag";
import Divider from "primevue/divider";
import Menubar from "primevue/menubar";
import type { MenuItem } from "primevue/menuitem";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
faListCheck,
Expand All @@ -25,16 +27,40 @@ function onGetStarted() {
function onJoinDiscord() {
window.open("https://discord.gg/RGPJHNMMwJ", "_blank");
}
const menuItems: MenuItem[] = [
{
label: "Features",
url: "#features",
key: "features",
},
{
label: "Wiki",
url: "https://github.com/rommapp/romm/wiki",
key: "wiki",
},
{
label: "Contact",
url: "mailto:[email protected]",
key: "contact",
},
];
</script>

<template>
<nav
class="sticky top-0 z-40 w-full backdrop-blur-lg backdrop-brightness-90 transition-colors border-b border-b-slate-800"
<Menubar
:model="menuItems"
:pt="{
root: 'sticky top-0 z-40 rounded-none w-full px-4 md:px-8 bg-transparent backdrop-blur-lg backdrop-brightness-90 transition-colors border-0 border-b border-b-slate-800',
menu: 'ml-auto bg-transparent border-x-0',
button: 'ml-auto text-white',
end: 'ml-0',
}"
>
<div class="flex justify-between items-center px-10 py-2">
<template #start>
<div class="flex items-center">
<a href="https://romm.app" class="flex items-center">
<img
<nuxt-img
:src="`images/blocks/logos/romm-dark.svg`"
alt="romm logo"
class="w-10 h-10"
Expand All @@ -45,64 +71,67 @@ function onJoinDiscord() {
href="https://github.com/rommapp/romm/releases/latest"
target="_blank"
>
<Tag value="v3.1.0" severity="primary" class="ml-3 text-xs"></Tag>
<tag value="v3.1.0" severity="primary" class="ml-3 text-xs"></tag>
</a>
</div>
<div class="md:flex items-center">
<a href="#features" class="text-900 hover:text-purple-500">Features</a>
<a
href="https://github.com/rommapp/romm/wiki"
target="_blank"
class="text-900 hover:text-purple-500 ml-6"
>
Wiki
</a>
<a
href="mailto:[email protected]"
class="text-900 hover:text-purple-500 ml-6"
</template>
<template #item="{ item, props, hasSubmenu, root }">
<a v-ripple class="flex items-center" v-bind="props.action">
<span :class="item.icon" />
<span class="ml-2">{{ item.label }}</span>
<span
v-if="item.shortcut"
class="ml-auto border border-surface-200 dark:border-surface-500 rounded-md bg-surface-100 dark:bg-surface-800 text-xs p-1"
>{{ item.shortcut }}</span
>
Contact
</a>
<a
href="https://github.com/rommapp/romm"
target="_blank"
class="text-900 hover:text-purple-500 border-l ml-6 pl-6 border-slate-800"
>
<FontAwesomeIcon :icon="faGithub" class="text-2xl" />
</a>
</div>
<div class="md:hidden">
<i class="pi pi-bars text-2xl"></i>
</div>
</div>
</nav>
<i
v-if="hasSubmenu"
:class="[
'pi pi-angle-down text-primary',
{ 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root },
]"
></i>
</a>
</template>
<template #end>
<a
href="https://github.com/rommapp/romm"
target="_blank"
class="text-900 hover:text-purple-500 border-l ml-4 pl-6 border-slate-800"
>
<font-awesome-icon :icon="faGithub" class="text-2xl" />
</a>
</template>
</Menubar>

<div class="md:grid grid-cols-2 pl-10 mb-10 bg-slate-950">
<div class="md:grid grid-cols-2 px-10 md:px-0 md:pl-10 md:mb-10 bg-slate-950">
<div class="text-center md:text-left flex items-center">
<section>
<span class="block text-6xl font-bold mb-1">
<section class="py-8">
<span class="block text-4xl sm:text-5xl md:text-6xl font-bold mb-2">
Your beautiful, powerful,
</span>
<div class="text-6xl text-purple-500 font-bold mb-3">
<div
class="text-4xl sm:text-5xl md:text-6xl text-purple-500 font-bold mb-8 md:mb-4"
>
self-hosted rom manager
</div>
<p class="mt-0 mb-4 surface-700 leading-relaxed">
<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>

<Button
<p-button
type="button"
class="mr-3 p-button-raised"
v-on:click="onGetStarted"
>Install Now</Button
>
>Install Now
</p-button>
</section>
</div>
<div>
<img
<nuxt-img
:src="`images/blocks/hero/hero-dark.png`"
alt="list of games in library"
class="hero md:ml-auto block md:h-full object-cover w-full md:w-auto"
Expand All @@ -112,16 +141,16 @@ function onJoinDiscord() {

<div
id="features"
class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center bg-slate-950"
class="surface-section px-6 py-8 lg:px-8 text-center bg-slate-950"
>
<div class="text-700 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-cols-3 grid-rows-2">
<div class="mb-12 px-6">
<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-900">
<FontAwesomeIcon
<font-awesome-icon
:icon="faWandSparkles"
class="text-4xl text-purple-500"
/>
Expand All @@ -148,9 +177,9 @@ function onJoinDiscord() {
>.
</div>
</div>
<div class="mb-12 px-6">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
<FontAwesomeIcon
<font-awesome-icon
:icon="faListCheck"
class="text-4xl text-purple-500"
/>
Expand All @@ -171,9 +200,12 @@ function onJoinDiscord() {
systems and platforms.
</div>
</div>
<div class="mb-12 px-6">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
<FontAwesomeIcon :icon="faGamepad" class="text-4xl text-purple-500" />
<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">
Expand All @@ -189,38 +221,44 @@ function onJoinDiscord() {
built-in, play your favorite games in your browser, no setup required.
</div>
</div>
<div class="mb-12 px-6">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
<FontAwesomeIcon :icon="faRotate" class="text-4xl text-purple-500" />
<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
<tag
value="COMING SOON"
severity="primary"
class="text-xs whitespace-nowrap ml-2"
></Tag>
></tag>
</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>
</div>
<div class="mb-12 px-6">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
<FontAwesomeIcon :icon="faGithub" class="text-4xl text-purple-500" />
<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>
</div>
<div class="mb-12 px-6">
<div class="mb-10 md:mb-12 md:px-6">
<span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
<FontAwesomeIcon
<font-awesome-icon
:icon="faShieldHeart"
class="text-4xl text-purple-500"
/>
Expand All @@ -243,13 +281,13 @@ function onJoinDiscord() {
<div class="text-700 text-2xl mb-6">
Get help with your setup, share your ideas, and meet other fans of RomM
</div>
<Button
<p-button
class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"
v-on:click="onJoinDiscord"
>
<FontAwesomeIcon :icon="faDiscord" class="mr-2" />
<font-awesome-icon :icon="faDiscord" class="mr-2" />
Join us
</Button>
</p-button>
</div>
</div>

Expand All @@ -258,24 +296,24 @@ function onJoinDiscord() {
>
<div class="text-4xl text-700 font-bold mb-1">People ❤️ RomM</div>

<div class="surface-section flex flex-row justify-around mt-8">
<div class="px-4 xl:px-6">
<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="flex items-center">
<FontAwesomeIcon :icon="faStar" class="text-2xl text-purple-500" />
<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="px-4 xl:px-6">
<div class="pt-4 px-4 xl:px-6">
<div class="flex items-center">
<FontAwesomeIcon :icon="faUsers" class="text-2xl text-purple-500" />
<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="px-4 xl:px-6">
<div class="pt-4 px-4 xl:px-6">
<div class="flex items-center">
<FontAwesomeIcon
<font-awesome-icon
:icon="faArrowDown"
class="text-2xl text-purple-500"
/>
Expand All @@ -286,31 +324,40 @@ function onJoinDiscord() {
</div>
</div>

<Divider class="before:border-t-slate-900 w-11/12 m-auto" />
<divider class="before:border-t-slate-900 m-auto" />

<footer class="surface-section py-8 grid grid-cols-3 w-11/12 m-auto">
<footer
class="surface-section py-4 md:py-8 px-4 md:px-8 flex items-center justify-between sm:grid grid-cols-3 m-auto"
>
<div class="flex items-center">
<img
<nuxt-img
:src="`images/blocks/logos/romm-mono-dark.svg`"
alt="romm logo"
class="w-8 h-8"
/>
<div class="text-700 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.</div>
</div>
</div>
<div class="text-700 text-md mt-1 text-center">Own your games.</div>

<div class="text-700 text-md text-center hidden sm:block">Own your games.</div>
<a
href="https://github.com/rommapp/marketing-site"
target="_blank"
class="text-900 hover:text-purple-500 text-end"
>
<FontAwesomeIcon :icon="faGithub" class="text-2xl" />
<font-awesome-icon :icon="faGithub" class="text-2xl" />
</a>
</footer>
</template>

<style>
.p-menubar.p-menubar-mobile,
.p-menubar.p-menubar-mobile .p-menubar-root-list {
background-color: theme("colors.slate.950");
}
</style>

<style scoped>
.hero {
object-position: top right;
Expand Down
16 changes: 14 additions & 2 deletions nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
devtools: { enabled: false },
modules: ["@nuxtjs/tailwindcss", "nuxt-primevue"],
modules: ["@nuxtjs/tailwindcss", "nuxt-primevue", "@nuxt/image"],
plugins: [{ src: "~/plugins/theme.ts", mode: "client" }],
primevue: {
cssLayerOrder: "tailwind-base, primevue, tailwind-utilities",
components: {
include: ["Button", "Tag", "Divider"],
include: ["Button", "Tag", "Divider", "Menubar"],
},
},
runtimeConfig: {
Expand All @@ -20,6 +20,18 @@ export default defineNuxtConfig({
preset: "github-pages",
},
css: ["primevue/resources/themes/aura-dark-purple/theme.css"],
image: {
quality: 80,
format: ['webp'],
provider: 'ipx',
presets: {
default: {
modifiers: {
format: 'webp'
}
}
}
},
app: {
head: {
charset: "utf-8",
Expand Down
Loading

0 comments on commit 691035a

Please sign in to comment.