Merge pull request 'newone' (#7) from newone into main
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #7
This commit is contained in:
commit
14e6fa22a7
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
|
|
@ -20,7 +20,7 @@
|
|||
--font-display: 'Cinzel', serif;
|
||||
--font-script: 'Great Vibes', cursive;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* ─── Reset / Base ───────────────────────────────────────── */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,96 +1,290 @@
|
|||
/* ─── home.css ───────────────────────────────────────────── */
|
||||
/* ===================================================
|
||||
ARRIVAL HERO EXPERIENCE
|
||||
=================================================== */
|
||||
|
||||
/* HERO */
|
||||
.home-hero {
|
||||
.arrival-hero {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 5rem 1.5rem;
|
||||
text-align: center;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at center,
|
||||
rgba(212, 162, 76, 0.08),
|
||||
transparent 35%
|
||||
),
|
||||
linear-gradient(135deg, #22112f, #3a1260, #5b1e8c);
|
||||
}
|
||||
|
||||
.home-hero-bg {
|
||||
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);
|
||||
.arrival-content {
|
||||
position: relative;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
z-index: 5;
|
||||
|
||||
.home-hero-flame {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -12px;
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
height: 80vh;
|
||||
|
||||
.home-hero h1 {
|
||||
font-family: var(--font-serif);
|
||||
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;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.hero-cta:hover {
|
||||
background: transparent;
|
||||
color: var(--brand-purple);
|
||||
border-color: var(--brand-gold);
|
||||
box-shadow: 0 0 20px rgba(212,162,76,0.35);
|
||||
.arrival-copy {
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
/* PHILOSOPHY */
|
||||
.home-philosophy {
|
||||
padding: 6rem 1.5rem;
|
||||
background: var(--brand-card);
|
||||
.arrival-logo {
|
||||
width: 150px;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.home-philosophy h2 {
|
||||
.arrival-copy h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
color: var(--brand-purple);
|
||||
text-align: center;
|
||||
font-size: clamp(3rem, 5vw, 4.8rem);
|
||||
line-height: 0.9;
|
||||
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 {
|
||||
|
|
@ -122,14 +318,14 @@
|
|||
}
|
||||
|
||||
.philosophy-card:hover {
|
||||
background: rgba(220,198,242,0.3);
|
||||
background: rgba(220, 198, 242, 0.3);
|
||||
}
|
||||
|
||||
.philosophy-icon-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(220,198,242,0.5);
|
||||
background: rgba(220, 198, 242, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -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: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
|
||||
@media (min-width: 600px) {
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.product-card {
|
||||
cursor: pointer;
|
||||
|
|
@ -235,7 +441,7 @@
|
|||
.product-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(91,30,140,0.22);
|
||||
background: rgba(91, 30, 140, 0.22);
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -250,7 +456,7 @@
|
|||
|
||||
.product-overlay-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(239,228,250,0.92);
|
||||
background: rgba(239, 228, 250, 0.92);
|
||||
color: var(--brand-purple);
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.72rem;
|
||||
|
|
@ -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 {
|
||||
|
|
@ -364,7 +574,7 @@
|
|||
|
||||
.newsletter-input:focus {
|
||||
border-color: var(--brand-gold);
|
||||
box-shadow: 0 0 0 2px rgba(212,162,76,0.15);
|
||||
box-shadow: 0 0 0 2px rgba(212, 162, 76, 0.15);
|
||||
}
|
||||
|
||||
.newsletter-btn {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div className="home-hero-bg" />
|
||||
<motion.div initial="hidden" animate="visible" variants={stagger}>
|
||||
<motion.div variants={fadeInUp} style={{ position: "relative" }}>
|
||||
<div className="home-hero-logo-wrap">
|
||||
<img src={logoPath} alt="Mani Candles Co." style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
<section className="arrival-hero">
|
||||
|
||||
<div className="arrival-bg" />
|
||||
|
||||
<div className="fog fog-1" />
|
||||
<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">
|
||||
Handmade • Natural • Heartmade
|
||||
</motion.span>
|
||||
<div className="scroll-indicator">
|
||||
Scroll
|
||||
</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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue