feat: complete UI/UX improvements, vuesax icons, media server, and section management
This commit is contained in:
s.esmaeili
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft, ChevronDown, HardHat } from "lucide-vue-next";
|
||||
import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
|
||||
import DynamicIcon from "~/components/ui/DynamicIcon.vue";
|
||||
|
||||
const hero = computed(() => useSiteStore().sections.hero);
|
||||
@@ -16,68 +16,81 @@ const hero = computed(() => useSiteStore().sections.hero);
|
||||
height="1008"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
class="absolute inset-0 size-full object-cover"
|
||||
class="absolute inset-0 size-full object-cover object-[center_15%] sm:object-right-top"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-l from-bg via-bg/80 to-bg/25" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-bg via-transparent to-bg/60" />
|
||||
<div class="absolute inset-0 bg-grid opacity-50" />
|
||||
<!-- Mobile Gradient: 0 at the top so image is fully clear, reaches 100% at the texts -->
|
||||
<div
|
||||
class="sm:hidden absolute inset-0 pointer-events-none"
|
||||
style="background: linear-gradient(to bottom, transparent 0%, transparent 26%, rgba(11, 18, 36, 0.45) 42%, rgba(11, 18, 36, 0.95) 54%, #0b1224 62%, #0b1224 100%);"
|
||||
/>
|
||||
|
||||
<!-- Desktop Gradient: Right side dark for text, left side fading out as requested -->
|
||||
<div class="hidden sm:block absolute inset-0 bg-gradient-to-l from-bg via-bg/65 via-25% to-transparent" />
|
||||
<div class="hidden sm:block absolute inset-0 bg-gradient-to-t from-bg via-transparent to-bg/50" />
|
||||
<div class="hidden sm:block absolute inset-0 bg-grid opacity-30" />
|
||||
</div>
|
||||
|
||||
<!-- ---- side tape ---- -->
|
||||
<div class="tape-v absolute bottom-0 end-0 z-10 h-44 w-1.5 opacity-70" />
|
||||
<div class="tape-v absolute bottom-0 end-0 z-10 h-32 sm:h-44 w-1 sm:w-1.5 opacity-70" />
|
||||
|
||||
<!-- ---- content ---- -->
|
||||
<div
|
||||
class="relative z-10 mx-auto flex w-full max-w-[1480px] flex-1 items-center px-5 pb-24 pt-36 md:px-8"
|
||||
class="relative z-10 mx-auto flex w-full max-w-[1480px] flex-1 items-end sm:items-center px-4 pb-6 pt-32 sm:pt-32 md:pt-36 sm:px-6 md:px-8 md:pb-24"
|
||||
>
|
||||
<div class="grid w-full items-center gap-12 lg:grid-cols-12">
|
||||
<div class="lg:col-span-7">
|
||||
<div class="w-full max-w-3xl">
|
||||
<div>
|
||||
<!-- Badge -->
|
||||
<div
|
||||
class="animate-fade-up-1 inline-flex items-center gap-2.5 rounded-full border border-accent/30 bg-accent/10 px-4 py-2 backdrop-blur"
|
||||
class="animate-fade-up-1 inline-flex items-center gap-1.5 sm:gap-2.5 rounded-full border border-accent/30 bg-accent/10 px-3 py-1 sm:px-4 sm:py-2 backdrop-blur"
|
||||
>
|
||||
<span class="size-1.5 animate-pulse rounded-full bg-accent" />
|
||||
<span class="text-xs font-medium text-accent">
|
||||
<span class="text-[11px] sm:text-xs font-medium text-accent">
|
||||
{{ hero.badge }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Title & Highlight -->
|
||||
<h1
|
||||
class="animate-fade-up-2 mt-7 text-5xl font-black leading-[1.15] md:text-7xl md:leading-[1.1]"
|
||||
class="animate-fade-up-2 mt-3 sm:mt-7 text-2xl sm:text-4xl md:text-6xl font-black leading-tight sm:leading-[1.15] md:leading-[1.1]"
|
||||
>
|
||||
{{ hero.title }}
|
||||
<br />
|
||||
<span
|
||||
class="mt-3 inline-block -rotate-1 rounded-lg bg-hazard px-4 py-1.5 text-bg shadow-[0_10px_50px_rgba(255,184,0,0.25)]"
|
||||
class="mt-2 inline-block whitespace-nowrap rounded-md bg-hazard px-2.5 py-1 text-lg font-black text-bg shadow-sm sm:mt-3 sm:rounded-lg sm:px-4 sm:py-1.5 sm:text-3xl sm:-rotate-1 sm:shadow-[0_10px_50px_rgba(255,184,0,0.25)] md:text-5xl"
|
||||
>
|
||||
{{ hero.titleHighlight }}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<!-- Intro text -->
|
||||
<p
|
||||
class="animate-fade-up-3 mt-7 max-w-xl text-base leading-9 text-ink/70 md:text-lg md:leading-10"
|
||||
class="animate-fade-up-3 mt-3 sm:mt-6 max-w-xl text-[12px] sm:text-base leading-relaxed sm:leading-9 text-ink/75 md:text-lg md:leading-10"
|
||||
>
|
||||
{{ hero.intro }}
|
||||
</p>
|
||||
|
||||
<div class="animate-fade-up-4 mt-9 flex flex-wrap items-center gap-4">
|
||||
<!-- CTA buttons -->
|
||||
<div class="animate-fade-up-4 mt-5 sm:mt-9 flex flex-wrap items-center gap-2.5 sm:gap-4">
|
||||
<a
|
||||
:href="hero.primaryCta.href"
|
||||
class="group inline-flex items-center gap-2.5 rounded-full bg-accent px-7 py-4 font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_8px_45px_rgba(255,90,0,0.5)]"
|
||||
class="group inline-flex items-center gap-1.5 sm:gap-2.5 rounded-full bg-accent px-4 py-2.5 sm:px-7 sm:py-4 text-xs sm:text-sm md:text-base font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_8px_45px_rgba(255,90,0,0.5)]"
|
||||
>
|
||||
{{ hero.primaryCta.label }}
|
||||
<ArrowLeft
|
||||
class="size-5 transition-transform duration-300 group-hover:-translate-x-1.5"
|
||||
<VuesaxIcon
|
||||
name="arrow-left"
|
||||
class="size-3.5 sm:size-5 transition-transform duration-300 group-hover:-translate-x-1.5"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
:href="hero.secondaryCta.href"
|
||||
class="inline-flex items-center gap-2.5 rounded-full border border-ink/25 px-7 py-4 font-bold text-ink backdrop-blur transition-colors duration-300 hover:border-accent hover:text-accent"
|
||||
class="inline-flex items-center gap-2 rounded-full border border-ink/25 px-4 py-2.5 sm:px-7 sm:py-4 text-xs sm:text-sm md:text-base font-bold text-ink backdrop-blur transition-colors duration-300 hover:border-accent hover:text-accent"
|
||||
>
|
||||
{{ hero.secondaryCta.label }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="animate-fade-up-5 mt-10 flex flex-wrap gap-3">
|
||||
<!-- Feature Chips (desktop/tablet only to keep mobile clean) -->
|
||||
<div class="animate-fade-up-5 mt-6 sm:mt-10 hidden sm:flex flex-wrap gap-3">
|
||||
<span
|
||||
v-for="c in hero.chips"
|
||||
:key="c.label"
|
||||
@@ -88,84 +101,27 @@ const hero = computed(() => useSiteStore().sections.hero);
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ---- rotating badge + status card ---- -->
|
||||
<div class="hidden flex-col items-center gap-10 lg:col-span-5 lg:flex">
|
||||
<div class="animate-fade-up-6 relative">
|
||||
<div class="relative size-44">
|
||||
<div class="animate-spin-slow absolute inset-0">
|
||||
<svg viewBox="0 0 120 120" class="size-full">
|
||||
<defs>
|
||||
<path
|
||||
id="badge-circle"
|
||||
d="M60,60 m-47,0 a47,47 0 1,1 94,0 a47,47 0 1,1 -94,0"
|
||||
/>
|
||||
</defs>
|
||||
<text font-size="9" letter-spacing="2.6" class="fill-ink/60 font-mono">
|
||||
<textPath href="#badge-circle">
|
||||
IMEN PISHGAMAN SAFETY • ISO 9001 • CE CERTIFIED • EST 2007 •
|
||||
</textPath>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span
|
||||
class="flex size-20 items-center justify-center rounded-full border border-accent/30 bg-accent/10"
|
||||
>
|
||||
<HardHat class="size-9 text-accent" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="animate-fade-up-7 w-full max-w-sm border border-line bg-bg/70 p-5 backdrop-blur-md"
|
||||
>
|
||||
<div class="flex items-center justify-between font-mono text-[11px]">
|
||||
<span class="text-muted">SITE STATUS</span>
|
||||
<span class="flex items-center gap-2 text-emerald-400">
|
||||
<span class="size-1.5 animate-pulse rounded-full bg-emerald-400" />
|
||||
SECURE
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-3.5 flex items-center justify-between font-mono text-[11px]">
|
||||
<span class="text-muted">PPE COMPLIANCE</span>
|
||||
<span class="font-semibold text-accent">۱۰۰٪</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="hero.lastInspection"
|
||||
class="mt-3.5 flex items-center justify-between font-mono text-[11px]"
|
||||
>
|
||||
<span class="text-muted">آخرین بازرسی</span>
|
||||
<span>{{ hero.lastInspection }}</span>
|
||||
</div>
|
||||
<div class="my-4 h-px bg-line" />
|
||||
<div class="font-mono text-[11px] leading-6 text-muted">
|
||||
سیستم پایش حرفهای ایمن پیشگامان<span class="animate-blink text-accent">▍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ---- scroll hint ---- -->
|
||||
<div class="animate-fade-up-9 absolute bottom-28 left-1/2 z-10 hidden md:block">
|
||||
<div class="animate-fade-up-9 absolute bottom-24 sm:bottom-28 left-1/2 z-10 hidden md:block">
|
||||
<div class="-translate-x-1/2 flex flex-col items-center gap-2">
|
||||
<span class="font-mono text-[10px] tracking-[0.35em] text-muted">SCROLL</span>
|
||||
<ChevronDown class="size-4 animate-bounce text-accent" />
|
||||
<VuesaxIcon name="arrow-down-1" class="size-4 animate-bounce text-accent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ---- bottom bar ---- -->
|
||||
<div class="animate-fade-up-8 relative z-10 border-t border-ink/10 backdrop-blur-sm">
|
||||
<div class="mx-auto grid max-w-[1480px] grid-cols-1 gap-px bg-ink/10 sm:grid-cols-3">
|
||||
<div class="mx-auto grid max-w-[1480px] grid-cols-3 gap-px bg-ink/10">
|
||||
<div
|
||||
v-for="s in hero.miniStats"
|
||||
:key="s.label"
|
||||
class="flex items-baseline gap-4 bg-bg/60 px-6 py-5 backdrop-blur-md md:px-8"
|
||||
class="flex flex-col sm:flex-row sm:items-baseline sm:gap-4 bg-bg/60 px-2.5 py-3 text-center sm:text-right backdrop-blur-md sm:px-6 sm:py-5 md:px-8"
|
||||
>
|
||||
<span class="text-2xl font-black text-ink md:text-3xl">{{ s.value }}</span>
|
||||
<span class="text-xs leading-5 text-muted md:text-sm">{{ s.label }}</span>
|
||||
<span class="text-base font-black text-ink sm:text-2xl md:text-3xl">{{ s.value }}</span>
|
||||
<span class="mt-0.5 sm:mt-0 text-[10px] sm:text-xs leading-tight text-muted md:text-sm">{{ s.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user