92b6c830e1
Some checks failed
Build and Deploy / build (push) Has been cancelled
WARNING: This change breaks existing SEO URLs for Serbian locale. Changes: - Migrated from separate locale folders (src/app/en/, src/app/de/, etc.) to [locale] dynamic segments (src/app/[locale]/) - Serbian is now at /sr/ instead of / (root) - English at /en/, German at /de/, French at /fr/ - All components updated to generate locale-aware links - Root / now redirects to /sr (307 temporary redirect) SEO Impact: - Previously indexed Serbian URLs (/, /products, /about, /contact) will now return 404 or redirect to /sr/* URLs - This is a breaking change for SEO - Serbian pages should ideally remain at root (/) with only non-default locales getting prefix - Consider implementing 301 redirects from old URLs to maintain search engine rankings Technical Notes: - next-intl v4 with [locale] structure requires ALL locales to have the prefix (cannot have default locale at root) - Alternative approach would be separate folder structure per locale
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { useLocale } from "next-intl";
|
|
|
|
export default function Hero() {
|
|
const locale = useLocale();
|
|
return (
|
|
<section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background-ice/50 to-background" />
|
|
|
|
<div className="absolute inset-0 opacity-5">
|
|
<div className="absolute top-20 left-10 w-64 h-64 rounded-full bg-accent blur-3xl" />
|
|
<div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-accent-dark blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<span className="inline-block text-sm tracking-[0.3em] text-foreground-muted mb-6">
|
|
PREMIUM NATURAL OILS
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
className="text-5xl md:text-7xl lg:text-8xl font-serif mb-6 leading-tight"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
>
|
|
ManoonOils
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-xl md:text-2xl text-foreground-muted mb-10 font-light"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
>
|
|
For hair and skin care
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
|
>
|
|
<Link
|
|
href={`/${locale}/products`}
|
|
className="inline-block px-10 py-4 bg-foreground text-white text-lg tracking-wide hover:bg-accent-dark transition-colors duration-300"
|
|
>
|
|
Shop Now
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.2, duration: 0.8 }}
|
|
>
|
|
<div className="w-6 h-10 border-2 border-foreground/30 rounded-full flex justify-center pt-2">
|
|
<motion.div
|
|
className="w-1 h-2 bg-foreground/50 rounded-full"
|
|
animate={{ y: [0, 12, 0] }}
|
|
transition={{ repeat: Infinity, duration: 1.5 }}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|