feat: Better communication on homepage

This commit is contained in:
Realmy 2025-02-10 10:51:20 +01:00
parent 16e6e1050f
commit e9b8bb26dc
3 changed files with 81 additions and 59 deletions

View File

@ -105,7 +105,7 @@
); );
--bg-panel: hsl(0, 0%, 100%); --bg-panel: hsl(0, 0%, 100%);
--bg-panel-highlight: hsl(0, 0%, 92%); --bg-panel-highlight: hsl(0, 0%, 92%);
--bg-separator: hsl(0, 0%, 88%); --bg-separator: hsla(0, 0%, 0%, 0.2);
--bg-button: var(--bg-panel-highlight); --bg-button: var(--bg-panel-highlight);
--bg-badge: var(--accent-pink); --bg-badge: var(--accent-pink);
--bg-input: #e0e0e0; --bg-input: #e0e0e0;
@ -291,4 +291,8 @@ body {
input[type="text"]:focus { input[type="text"]:focus {
@apply outline outline-accent outline-2; @apply outline outline-accent outline-2;
} }
hr {
@apply border-separator;
}
} }

View File

@ -30,7 +30,7 @@
</div> </div>
<div <div
class="absolute bottom-0 left-0 w-full h-24 -z-10" class="absolute bottom-0 left-0 w-full h-24 -z-10 pointer-events-none"
style="background: linear-gradient(to bottom, transparent, var(--bg) 100%)" style="background: linear-gradient(to bottom, transparent, var(--bg) 100%)"
></div> ></div>
</footer> </footer>

View File

@ -10,78 +10,96 @@
// -- JovannMC // -- JovannMC
import Uploader from "$lib/components/functional/Uploader.svelte"; import Uploader from "$lib/components/functional/Uploader.svelte";
import { AudioLines, Check, Film, Image } from "lucide-svelte";
</script> </script>
<div <div class="max-w-6xl w-full mx-auto px-6 md:px-8">
class="w-screen px-2 md:px-8 h-full flex items-start justify-center overflow-hidden max-h-screen" <div class="flex items-center justify-center pb-10 md:py-16">
> <div
<div class="content w-screen flex items-center justify-center flex-grow"> class="flex items-center h-auto gap-12 md:gap-24 md:flex-row flex-col"
<div class="max-w-5xl w-full"> >
<div <div class="flex-grow w-full text-center md:text-left">
class="flex items-center h-auto gap-12 md:gap-24 md:flex-row flex-col" <h1
> class="text-4xl px-12 md:p-0 md:text-6xl flex-wrap tracking-tight leading-tight md:leading-[72px] mb-4 md:mb-6"
<div class="flex-grow w-full text-center md:text-left"> >
<h1 The file converter you'll love.
class="text-4xl px-12 md:p-0 md:text-6xl flex-wrap tracking-tight leading-tight md:leading-[72px] mb-4 md:mb-6" </h1>
> <p
The file converter you'll love. class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-muted dynadark:text-muted"
</h1> >
<p All processing is done on your device. No file size limit,
class="font-normal px-5 md:p-0 text-lg md:text-xl text-black text-muted dynadark:text-muted" no ads, and completely open source.
> </p>
All processing is done on your device. No file size </div>
limit, no ads, and completely open source. <div class="flex-grow w-full h-72">
</p> <Uploader class="w-full h-full" />
</div>
</div>
</div>
<hr />
<div class="mt-10 md:mt-16">
<h2 class="text-center text-4xl">VERT Supports...</h2>
<div class="grid gap-4 md:grid-cols-3 mt-8">
<div class="file-category-card">
<div class="file-category-card-inner">
<div class="icon-container bg-accent-blue">
<Image size="20" />
</div>
<span>Images</span>
</div> </div>
<div class="flex-grow w-11/12 md:w-full h-72">
<Uploader class="w-full h-full" /> <p>Animated images are not supported (yet).</p>
</div>
<div class="file-category-card">
<div class="file-category-card-inner">
<div class="icon-container bg-accent-purple">
<AudioLines size="20" />
</div>
<span>Audio</span>
</div> </div>
<p class="flex items-center justify-center gap-2">
<Check size="20" /> Fully supported
</p>
</div>
<div class="file-category-card">
<div class="file-category-card-inner">
<div class="icon-container bg-accent-red">
<Film size="20" />
</div>
<span>Video *</span>
</div>
<p>
Video requires special setup. <a
target="_blank"
href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
>Learn more</a
>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
/* Centers content on most screen sizes, excluding mobile */ .file-category-card {
@media screen and (min-width: 768px) { @apply bg-panel rounded-2xl p-5 shadow-panel;
.content {
padding-top: 10vh;
padding-bottom: 10vh;
}
} }
@media screen and (min-width: 768px) and (min-height: 576px) { .file-category-card p {
.content { @apply font-normal text-center text-sm mt-4;
padding-top: 15vh;
padding-bottom: 15vh;
}
} }
@media screen and (min-width: 768px) and (min-height: 720px) { .file-category-card-inner {
.content { @apply flex items-center justify-center gap-3 text-xl;
padding-top: 20vh;
padding-bottom: 20vh;
}
} }
@media screen and (min-width: 768px) and (min-height: 1080px) { .icon-container {
.content { @apply p-2 rounded-full text-on-accent;
padding-top: 25vh;
padding-bottom: 25vh;
}
}
@media screen and (min-width: 768px) and (min-height: 1440px) {
.content {
padding-top: 30vh;
padding-bottom: 30vh;
}
}
@media screen and (min-width: 768px) and (min-height: 2160px) {
.content {
padding-top: 35vh;
padding-bottom: 35vh;
}
} }
</style> </style>