Redesign phase 1: Homepage polish and design system foundation

- Fix newsletter subscribe box centering on homepage - Fix header overlap on product pages (pt-[72px] instead of pt-[100px]) - Add scroll-mt-[72px] for smooth scroll anchor offset - Add HeroVideo component with video hero placeholder - Add REDESIGN_SPECIFICATION.md with 9-phase design plan - Clean up globals.css theme declarations and comments - Update Header with improved sticky behavior and cart - Update ProductDetail with better layout and spacing - Update CartDrawer with improved slide-out cart UI - Add English translations for updated pages - Various CSS refinements across pages
2026-03-21 16:22:17 +02:00
parent 9d639fbd64
commit 7c05bd2346
22 changed files with 2653 additions and 884 deletions
--- a/src/components/home/HeroVideo.tsx
+++ b/src/components/home/HeroVideo.tsx
@@ -0,0 +1,117 @@
+"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/30 via-black/20 to-black/50" />
+      </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-black/40" />
+      </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"
+        >
+          {/* Tagline */}
+          <motion.span
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.5 }}
+            className="inline-block text-xs md:text-sm uppercase tracking-[0.3em] mb-6 text-white/90"
+          >
+            Premium Organic Oils
+          </motion.span>
+
+          {/* Main Heading */}
+          <motion.h1
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.7 }}
+            className="text-5xl md:text-7xl lg:text-8xl font-medium mb-6 tracking-tight"
+          >
+            ManoonOils
+          </motion.h1>
+
+          {/* Subtitle */}
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.9 }}
+            className="text-lg md:text-xl text-white/80 mb-10 font-light max-w-xl mx-auto"
+          >
+            For hair and skin care
+          </motion.p>
+
+          {/* CTA Button */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1.1 }}
+          >
+            <Link
+              href="/products"
+              className="inline-block px-10 py-4 bg-white text-black text-[13px] uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors duration-300"
+            >
+              Shop Now
+            </Link>
+          </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/80 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>
+  );
+}