unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: remove framer-motion from HeroVideo for instant content visibility

Browse Source
This commit is contained in:
Unchained
2026-03-31 13:22:45 +02:00
parent 8eb9f24b33
commit 1c5ec1a271
3 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/[locale]/layout.tsx
View File

@@ -54,8 +54,8 @@ export default async function LocaleLayout({
clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
trackScreenViews={true}
trackOutgoingLinks={true}
apiUrl="https://op.nodecrew.me/api"
scriptUrl="https://op.nodecrew.me/op1.js"
apiUrl="/api/op"
scriptUrl="/api/op1"
/>
<Script
src="/api/script.js"

19
src/app/globals.css
View File

@@ -261,6 +261,25 @@
animation: scrollBounce 1.5s ease-in-out infinite;
}
/* ============================================
FADE SLIDE UP ANIMATION
============================================ */
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fadeSlideUp {
animation: fadeSlideUp 0.6s ease-out both;
}
/* ============================================
UTILITIES
============================================ */

73
src/components/home/HeroVideo.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { motion } from "framer-motion";
import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
@@ -23,7 +22,7 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
return (
<section className="relative min-h-screen w-full overflow-hidden">
{/* Background Image with Overlay - Using next/image for LCP optimization */}
{/* Background Image with Overlay */}
<div className="absolute inset-0">
<Image
src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop"
@@ -36,21 +35,11 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/70" />
</div>
{/* Content */}
{/* Content - Visible immediately, animations are enhancements */}
<div className="relative z-10 min-h-screen flex flex-col items-center justify-center text-center text-white px-4 py-20">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="max-w-4xl mx-auto"
>
<div className="max-w-4xl mx-auto animate-fadeSlideUp">
{/* Social Proof Micro */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
className="flex items-center justify-center gap-2 mb-6"
>
<div className="flex items-center justify-center gap-2 mb-6 animate-fadeSlideUp" style={{ animationDelay: "0.1s" }}>
<div className="flex">
{[1, 2, 3, 4, 5].map((star) => (
<svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
@@ -61,36 +50,30 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
<span className="text-sm text-white/80">
{t("lovedBy")}
</span>
</motion.div>
</div>
{/* Main Heading - Outcome Focused */}
<motion.h1
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight"
{/* Main Heading */}
<h1
className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight animate-fadeSlideUp"
style={{ animationDelay: "0.2s" }}
>
{t("transformHeadline")}
<br />
<span className="text-white/90">{t("withNaturalOils")}</span>
</motion.h1>
</h1>
{/* Subtitle - Expands on how */}
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.7 }}
className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed"
{/* Subtitle */}
<p
className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed animate-fadeSlideUp"
style={{ animationDelay: "0.3s" }}
>
{t("subtitleText")}
</motion.p>
</p>
{/* CTA Button - Action verb + value */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.9 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4"
{/* CTA Buttons */}
<div
className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fadeSlideUp"
style={{ animationDelay: "0.4s" }}
>
<Link
href={`${localePath}/products`}
@@ -104,14 +87,12 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
>
{t("learnStory")}
</Link>
</motion.div>
</div>
{/* Trust Indicators */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.2, duration: 0.8 }}
className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60"
<div
className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60 animate-fadeSlideUp"
style={{ animationDelay: "0.5s" }}
>
<div className="flex items-center gap-2">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -131,15 +112,15 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
</svg>
<span>{t("crueltyFree")}</span>
</div>
</motion.div>
</motion.div>
</div>
</div>
</div>
{/* Scroll Indicator */}
<button
onClick={scrollToContent}
className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer opacity-0 animate-fade-in"
style={{ animationDelay: '1.5s', animationFillMode: 'forwards' }}
style={{ animationDelay: "1.5s", animationFillMode: "forwards" }}
aria-label="Scroll to content"
>
<div className="scroll-indicator">
@@ -148,4 +129,4 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
</button>
</section>
);
}
}