denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): Mobile viewport optimizations

Browse Source
This commit is contained in:
Denis Lugowski
2026-01-10 08:24:57 +01:00
parent 52158a8e48
commit fd53521992
8 changed files with 275 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
landing/app/components/landing/FrameworkAgreement.vue
View File

@@ -5,8 +5,8 @@
}"
>
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Left: Content -->
<div class="order-2 lg:order-1">
<!-- Left: Content (first on mobile, first on desktop) -->
<div>
<span
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 text-sm font-medium mb-6"
>
@@ -48,7 +48,7 @@
>
<div class="flex items-center gap-3">
<div
class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center"
class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center shrink-0"
>
<UIcon name="i-lucide-tag" class="w-5 h-5 text-white" />
</div>
@@ -72,9 +72,9 @@
</div>
</div>
<!-- Right: 3D Document Preview -->
<div class="order-1 lg:order-2 flex justify-center">
<div class="relative animate-scale-in">
<!-- Right: 3D Document Preview (second on mobile, second on desktop) -->
<div class="flex justify-center px-4 sm:px-0 py-8 overflow-visible">
<div class="relative animate-scale-in overflow-visible">
<!-- 3D Document with tilt effect -->
<div
class="relative transform-gpu transition-transform duration-500 hover:rotate-0"
@@ -89,7 +89,7 @@
<!-- Document card -->
<div
class="relative bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl overflow-hidden max-w-sm"
class="relative bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl overflow-hidden w-full max-w-[320px] sm:max-w-sm"
>
<!-- Document header -->
<div class="bg-gradient-to-r from-primary-600 to-cyan-600 px-6 py-5">
@@ -156,23 +156,16 @@
</div>
</div>
<!-- Floating badge -->
<div class="absolute -top-4 -right-4 z-10 animate-float-fast">
<!-- Floating badge - hidden on very small screens to prevent overflow -->
<div class="absolute -top-4 right-0 sm:-right-4 z-10 animate-float-fast">
<div
class="bg-gradient-to-r from-accent-500 to-violet-500 text-white px-4 py-2 rounded-full shadow-lg text-sm font-semibold flex items-center gap-2"
class="bg-gradient-to-r from-accent-500 to-violet-500 text-white px-3 sm:px-4 py-2 rounded-full shadow-lg text-xs sm:text-sm font-semibold flex items-center gap-2"
>
<UIcon name="i-lucide-download" class="w-4 h-4" />
{{ $t('common.onRequest') }}
</div>
</div>
</div>
<!-- Decorative elements -->
<div class="absolute -top-8 -left-8 w-32 h-32 bg-primary-400/20 rounded-full blur-3xl animate-pulse-glow" />
<div
class="absolute -bottom-8 -right-8 w-40 h-40 bg-accent-400/20 rounded-full blur-3xl animate-pulse-glow"
style="animation-delay: 1s"
/>
</div>
</div>
</div>