164 lines
6.8 KiB
TypeScript
164 lines
6.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
export default function HeroVideo() {
|
|
const scrollToContent = () => {
|
|
const element = document.getElementById("main-content");
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="relative h-screen w-full overflow-hidden">
|
|
{/* Video Background */}
|
|
<div className="absolute inset-0">
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
poster="/images/hero-poster.jpg"
|
|
className="w-full h-full object-cover"
|
|
>
|
|
{/* Placeholder - Add actual video files when available */}
|
|
{/* <source src="/videos/hero.webm" type="video/webm" /> */}
|
|
{/* <source src="/videos/hero.mp4" type="video/mp4" /> */}
|
|
</video>
|
|
{/* Gradient Overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-black/60" />
|
|
</div>
|
|
|
|
{/* Fallback Background (shown when video isn't loaded) */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: `url('https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop')`,
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/70" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 h-full flex flex-col items-center justify-center text-center text-white px-4">
|
|
<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"
|
|
>
|
|
{/* 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">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<svg key={star} className="w-4 h-4 fill-[#FFD700] text-[#FFD700]" viewBox="0 0 24 24">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
</svg>
|
|
))}
|
|
</div>
|
|
<span className="text-sm text-white/80">
|
|
Loved by 50,000+ customers worldwide
|
|
</span>
|
|
</motion.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"
|
|
>
|
|
Transform Your Hair & Skin
|
|
<br />
|
|
<span className="text-white/90">with 100% Natural Oils</span>
|
|
</motion.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"
|
|
>
|
|
Cold-pressed, organic oils handcrafted with love.
|
|
No additives, no preservatives—just nature's purest goodness for your daily beauty ritual.
|
|
</motion.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"
|
|
>
|
|
<Link
|
|
href="/products"
|
|
className="inline-block px-10 py-4 bg-white text-black text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-white/90 transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl"
|
|
>
|
|
Transform My Hair & Skin
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="inline-block px-10 py-4 border border-white/50 text-white text-[13px] uppercase tracking-[0.15em] font-medium hover:bg-white/10 transition-all duration-300"
|
|
>
|
|
Learn Our Story
|
|
</Link>
|
|
</motion.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 items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span>30-Day Money Back</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
<span>Free Shipping Over 3,000 RSD</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
<span>Cruelty Free</span>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<motion.button
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.5, duration: 0.8 }}
|
|
onClick={scrollToContent}
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer"
|
|
aria-label="Scroll to content"
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, 8, 0] }}
|
|
transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" }}
|
|
>
|
|
<ChevronDown className="w-6 h-6" strokeWidth={1.5} />
|
|
</motion.div>
|
|
</motion.button>
|
|
</section>
|
|
);
|
|
}
|