updated hero section with smokey glow

src/pages/home.css

@@ -1,96 +1,290 @@
-/* ─── home.css ───────────────────────────────────────────── */
+/* ===================================================
+   ARRIVAL HERO EXPERIENCE
+=================================================== */
 
-/* HERO */
+.arrival-hero {
-.home-hero {
   position: relative;
-  min-height: 90vh;
+  height: 80vh;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  background:
-  overflow: hidden;
+    radial-gradient(
-  padding: 5rem 1.5rem;
+      circle at center,
-  text-align: center;
+      rgba(212, 162, 76, 0.08),
+      transparent 35%
+    ),
+    linear-gradient(135deg, #22112f, #3a1260, #5b1e8c);
 }
 
-.home-hero-bg {
+.arrival-content {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to bottom, rgba(220,198,242,0.4), var(--brand-light-lavender));
-  z-index: -1;
-}
-
-.home-hero-logo-wrap {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 4px solid rgba(212,162,76,0.35);
-  box-shadow: 0 0 40px rgba(212,162,76,0.25);
   position: relative;
-  margin: 0 auto 2rem;
+  z-index: 5;
-}
 
-.home-hero-flame {
+  height: 80vh;
-  position: absolute;
-  top: -12px;
-  right: -12px;
-  color: var(--brand-gold);
-}
 
-.home-hero h1 {
+  display: grid;
-  font-family: var(--font-serif);
+  grid-template-columns: 1fr 1fr;
-  font-size: clamp(2.5rem, 7vw, 5.5rem);
-  color: var(--brand-purple);
-  margin-bottom: 1rem;
-  drop-shadow: 0 2px 8px rgba(91,30,140,0.15);
-}
-
-.home-hero-tagline {
-  font-family: var(--font-script);
-  font-size: clamp(1.75rem, 4vw, 3rem);
-  color: var(--brand-gold);
-  margin-bottom: 3rem;
-  display: block;
-}
-
-.hero-cta {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 5rem;
-  padding: 1rem 2.5rem;
-  background: var(--brand-purple);
-  color: #ffffff;
-  font-family: var(--font-display);
-  font-size: 0.78rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  text-decoration: none;
-  border: 1px solid transparent;
-  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
 }
 
-.hero-cta:hover {
+.arrival-copy {
-  background: transparent;
+  max-width: 650px;
-  color: var(--brand-purple);
-  border-color: var(--brand-gold);
-  box-shadow: 0 0 20px rgba(212,162,76,0.35);
 }
 
-/* PHILOSOPHY */
+.arrival-logo {
-.home-philosophy {
+  width: 150px;
-  padding: 6rem 1.5rem;
+  margin-bottom: 2rem;
-  background: var(--brand-card);
+  border-radius: 50%;
 }
 
-.home-philosophy h2 {
+.arrival-copy h1 {
   font-family: var(--font-serif);
-  font-size: clamp(2rem, 4vw, 3rem);
+  font-size: clamp(3rem, 5vw, 4.8rem);
-  color: var(--brand-purple);
+  line-height: 0.9;
-  text-align: center;
+  color: white;
   margin-bottom: 0.75rem;
 }
 
+.arrival-copy h2 {
+  font-family: var(--font-script);
+  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
+  color: var(--brand-gold);
+  margin-bottom: 1.5rem;
+}
+
+.arrival-copy p {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 1rem;
+  max-width: 480px;
+  line-height: 1.8;
+  margin-bottom: 2rem;
+}
+
+.arrival-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 1rem 2.5rem;
+
+  border-radius: 999px;
+
+  background: rgba(255, 255, 255, 0.08);
+
+  backdrop-filter: blur(12px);
+
+  border: 1px solid rgba(255, 255, 255, 0.15);
+
+  color: white;
+
+  font-family: var(--font-display);
+
+  letter-spacing: 0.15em;
+
+  transition: 0.4s ease;
+}
+
+.arrival-btn:hover {
+  transform: translateY(-4px);
+
+  box-shadow: 0 0 30px rgba(212, 162, 76, 0.4);
+
+  border-color: var(--brand-gold);
+}
+
+.arrival-candle-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.arrival-candle {
+  width: min(550px, 100%);
+  position: relative;
+  z-index: 4;
+
+  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
+}
+
+.arrival-glow {
+  position: absolute;
+
+  width: 350px;
+  height: 350px;
+
+  border-radius: 50%;
+
+  filter: blur(90px);
+
+  z-index: 1;
+
+  animation: breathe 6s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: scale(1.15);
+    opacity: 0.9;
+  }
+}
+
+/* ===================================================
+   FOG
+=================================================== */
+
+.fog {
+  position: absolute;
+
+  width: 900px;
+  height: 900px;
+
+  border-radius: 50%;
+
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.05),
+    transparent 70%
+  );
+
+  filter: blur(120px);
+}
+
+.fog-1 {
+  top: -300px;
+  left: -200px;
+  animation: drift 30s infinite alternate;
+}
+
+.fog-2 {
+  right: -250px;
+  top: -100px;
+  animation: drift 35s infinite alternate-reverse;
+}
+
+.fog-3 {
+  bottom: -350px;
+  left: 25%;
+  animation: drift 40s infinite alternate;
+}
+
+@keyframes drift {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(120px);
+  }
+}
+
+/* ===================================================
+   EMBERS
+=================================================== */
+
+.embers {
+  position: absolute;
+  inset: 0;
+}
+
+.embers span {
+  position: absolute;
+
+  width: 4px;
+  height: 4px;
+
+  border-radius: 50%;
+
+  background: var(--brand-gold);
+
+  box-shadow:
+    0 0 12px var(--brand-gold),
+    0 0 24px rgba(212, 162, 76, 0.4);
+
+  animation: ember 12s linear infinite;
+}
+
+@keyframes ember {
+  from {
+    transform: translateY(110vh);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 0.8;
+  }
+
+  to {
+    transform: translateY(-20vh);
+    opacity: 0;
+  }
+}
+
+/* ===================================================
+   SCROLL INDICATOR
+=================================================== */
+
+.scroll-indicator {
+  position: absolute;
+
+  bottom: 30px;
+  left: 50%;
+
+  transform: translateX(-50%);
+
+  color: rgba(255, 255, 255, 0.7);
+
+  font-size: 0.8rem;
+
+  letter-spacing: 0.3em;
+
+  text-transform: uppercase;
+
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  50% {
+    transform: translateX(-50%) translateY(8px);
+  }
+}
+
+/* ===================================================
+   MOBILE
+=================================================== */
+
+@media (max-width: 992px) {
+  .arrival-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 2rem;
+    padding: 120px 0;
+  }
+
+  .arrival-copy {
+    margin: 0 auto;
+  }
+
+  .arrival-candle {
+    width: 320px;
+  }
+
+  .arrival-copy h1 {
+    font-size: 4rem;
+  }
+}
 .section-divider {
   width: 96px;
   height: 4px;
@@ -108,7 +302,9 @@
 }
 
 @media (min-width: 768px) {
-  .philosophy-grid { grid-template-columns: 1fr 1fr 1fr; }
+  .philosophy-grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 }
 
 .philosophy-card {
@@ -188,7 +384,9 @@
   text-decoration: none;
   border-bottom: 1px solid transparent;
   padding-bottom: 2px;
-  transition: color 0.3s ease, border-color 0.3s ease;
+  transition:
+    color 0.3s ease,
+    border-color 0.3s ease;
   white-space: nowrap;
 }
 
@@ -205,8 +403,16 @@
   margin: 0 auto;
 }
 
-@media (min-width: 600px)  { .product-grid { grid-template-columns: 1fr 1fr; } }
+@media (min-width: 600px) {
-@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
+  .product-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (min-width: 1024px) {
+  .product-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
 
 .product-card {
   cursor: pointer;
@@ -259,7 +465,9 @@
   border: none;
   cursor: pointer;
   transform: translateY(16px);
-  transition: transform 0.5s ease, background 0.3s ease;
+  transition:
+    transform 0.5s ease,
+    background 0.3s ease;
 }
 
 .product-card:hover .product-overlay-btn {
@@ -291,7 +499,7 @@
 .home-quote-texture {
   position: absolute;
   inset: 0;
-  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
+  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
   opacity: 0.1;
 }
 
@@ -348,7 +556,9 @@
 }
 
 @media (min-width: 480px) {
-  .newsletter-form { flex-direction: row; }
+  .newsletter-form {
+    flex-direction: row;
+  }
 }
 
 .newsletter-input {
@@ -384,3 +594,41 @@
 .newsletter-btn:hover {
   background: var(--brand-gold);
 }
+.smoke-overlay {
+  position: absolute;
+  inset: 0;
+
+  background: radial-gradient(
+    circle at center,
+    rgba(255, 255, 255, 0.08),
+    transparent 70%
+  );
+
+  filter: blur(120px);
+
+  pointer-events: none;
+
+  z-index: 2;
+}
+.arrival-copy h1 {
+  text-shadow: 0 10px 40px rgba(255, 255, 255, 0.08);
+}
+.arrival-candle {
+  transition:
+    filter 2s ease,
+    transform 2s ease;
+}
+.arrival-hero::after {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+
+  background: radial-gradient(
+    circle at center,
+    transparent 45%,
+    rgba(0, 0, 0, 0.35)
+  );
+
+  pointer-events: none;
+}

src/pages/home.tsx

@@ -1,9 +1,10 @@
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useState } from "react";
 import { Link } from "wouter";
 import { Flame, Heart, Leaf, Sparkles } from "lucide-react";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
-import lavenderImage from "@/assets/images/product-lavender.png";
+import lavenderImage from "@/assets/images/image-removebg-preview.png";
 import roseImage from "@/assets/images/product-rose.png";
 import eucalyptusImage from "@/assets/images/product-eucalyptus.png";
 import oudImage from "@/assets/images/product-oud.png";
@@ -21,33 +22,181 @@ const stagger = {
 };
 
 export default function Home() {
+  const moods = [
+    {
+      title: "Lavender Dreams",
+      subtitle: "Calm your mind. Light your sanctuary.",
+      glow: "#7B3DB8",
+    },
+    {
+      title: "Rose & Vanilla",
+      subtitle: "Romance captured in every flame.",
+      glow: "#D67896",
+    },
+    {
+      title: "Eucalyptus Mint",
+      subtitle: "Freshness inspired by nature.",
+      glow: "#7DDCB4",
+    },
+    {
+      title: "Oud & Amber",
+      subtitle: "Luxury crafted into fragrance.",
+      glow: "#FFB446",
+    },
+  ];
+
+  const [activeMood, setActiveMood] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveMood((prev) => (prev + 1) % moods.length);
+    }, 8000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <Box>
       {/* ── Hero ── */}
-      <section className="home-hero">
+      <section className="arrival-hero">
-        <div className="home-hero-bg" />
+
-        <motion.div initial="hidden" animate="visible" variants={stagger}>
+        <div className="arrival-bg" />
-          <motion.div variants={fadeInUp} style={{ position: "relative" }}>
+
-            <div className="home-hero-logo-wrap">
+        <div className="fog fog-1" />
-              <img src={logoPath} alt="Mani Candles Co." style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        <div className="fog fog-2" />
+        <div className="fog fog-3" />
+
+        <div className="embers">
+          {[...Array(18)].map((_, i) => (
+            <span
+              key={i}
+              style={{
+                left: `${5 + Math.random() * 90}%`,
+                animationDelay: `${Math.random() * 8}s`,
+              }}
+            />
+          ))}
         </div>
-            <div className="home-hero-flame animate-flame">
+
-              <Flame size={40} fill="currentColor" style={{ filter: "drop-shadow(0 0 12px rgba(255,211,107,0.8))" }} />
+        <Container maxWidth="xl">
+
+          <div className="arrival-content">
+
+            <motion.div
+              className="arrival-copy"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 1.5 }}
+            >
+
+              <motion.img
+                src={logoPath}
+                alt="Mani Candles"
+                className="arrival-logo"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.5, duration: 1 }}
+              />
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeMood}
+                  initial={{
+                    opacity: 0,
+                    filter: "blur(12px)",
+                    y: 20,
+                  }}
+                  animate={{
+                    opacity: 1,
+                    filter: "blur(0px)",
+                    y: 0,
+                  }}
+                  exit={{
+                    opacity: 0,
+                    filter: "blur(12px)",
+                    y: -20,
+                  }}
+                  transition={{
+                    duration: 1.2,
+                  }}
+                >
+                  <h1>{moods[activeMood].title}</h1>
+
+                  <h2>
+                    Light a Moment.
+                    Create a Memory.
+                  </h2>
+
+                  <p>{moods[activeMood].subtitle}</p>
+                </motion.div>
+              </AnimatePresence>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 2.8 }}
+              >
+                <Link
+                  href="/products"
+                  className="arrival-btn"
+                >
+                  Explore Collection
+                </Link>
+              </motion.div>
+
+            </motion.div>
+
+            <motion.div
+              className="arrival-candle-wrap"
+              animate={{
+                y: [0, -18, 0]
+              }}
+              transition={{
+                duration: 7,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+            >
+              <motion.div
+                className="arrival-glow"
+                animate={{
+                  backgroundColor: moods[activeMood].glow,
+                }}
+                transition={{
+                  duration: 3,
+                  ease: "easeInOut",
+                }}
+              />
+
+              <motion.img
+                src={lavenderImage}
+                alt="Luxury Candle"
+                className="arrival-candle"
+                initial={{
+                  opacity: 0,
+                  scale: 0.9,
+                  filter: "blur(15px)"
+                }}
+                animate={{
+                  opacity: 1,
+                  scale: 1,
+                  filter: "blur(0px)"
+                }}
+                transition={{
+                  duration: 2.5,
+                  delay: 1
+                }}
+              />
+
+            </motion.div>
+
           </div>
-          </motion.div>
 
-          <motion.h1 variants={fadeInUp}>Mani Candles Co.</motion.h1>
+        </Container>
 
-          <motion.span variants={fadeInUp} className="home-hero-tagline">
+        <div className="scroll-indicator">
-            Handmade • Natural • Heartmade
+          Scroll
-          </motion.span>
+        </div>
 
-          <motion.div variants={fadeInUp}>
-            <Link href="/products" className="hero-cta">Shop the Collection</Link>
-          </motion.div>
-        </motion.div>
       </section>
-
       {/* ── Philosophy ── */}
       <section className="home-philosophy">
         <Container maxWidth="lg">