Fixed hover effect for icons on cards or containers.
This commit is contained in:
parent
d82d9e9fa9
commit
c3b485f37b
|
|
@ -160,7 +160,13 @@ export default function ContactPage() {
|
|||
{contactInfo.map((info) => (
|
||||
<StaggerItem key={info.label}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0, scale: 1 },
|
||||
hover: { y: -5, scale: 1.02 }
|
||||
}}
|
||||
className="group bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-xl hover:shadow-2xl transition-all border border-neutral-100 dark:border-neutral-700"
|
||||
>
|
||||
{info.href ? (
|
||||
|
|
@ -170,7 +176,10 @@ export default function ContactPage() {
|
|||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
||||
>
|
||||
|
|
@ -195,7 +204,10 @@ export default function ContactPage() {
|
|||
) : (
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
|
||||
>
|
||||
|
|
@ -417,12 +429,21 @@ export default function ContactPage() {
|
|||
<div className="space-y-8">
|
||||
{/* Address Card */}
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -5 }
|
||||
}}
|
||||
className="bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-xl border border-neutral-100 dark:border-neutral-800"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-14 h-14 rounded-xl bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
|
||||
>
|
||||
|
|
@ -448,7 +469,10 @@ export default function ContactPage() {
|
|||
href="https://maps.google.com/?q=12424+East+Weaver+Place,+Centennial,+CO+80111"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ x: 5 }}
|
||||
variants={{
|
||||
rest: { x: 0 },
|
||||
hover: { x: 5 }
|
||||
}}
|
||||
className="inline-flex items-center gap-2 text-[hsl(0,100%,40%)] font-medium hover:underline"
|
||||
>
|
||||
Get Directions
|
||||
|
|
|
|||
|
|
@ -196,11 +196,20 @@ export default function CulturePage() {
|
|||
{/* Mission */}
|
||||
<FadeIn>
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -5 }
|
||||
}}
|
||||
className="relative bg-gradient-to-br from-[hsl(0,100%,97%)] to-[hsl(0,50%,95%)] dark:from-[hsl(0,100%,10%)] dark:to-neutral-900 p-10 rounded-3xl border border-[hsl(0,100%,90%)] dark:border-[hsl(0,100%,20%)] h-full"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 360, scale: 1.1 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
|
|
@ -227,11 +236,20 @@ export default function CulturePage() {
|
|||
{/* Purpose */}
|
||||
<FadeIn delay={0.2}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -5 }
|
||||
}}
|
||||
className="relative bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-10 rounded-3xl border border-amber-100 dark:border-amber-900/50 h-full"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 360, scale: 1.1 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
|
|
@ -313,7 +331,13 @@ export default function CulturePage() {
|
|||
{coreValues.map((value) => (
|
||||
<StaggerItem key={value.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -10 }
|
||||
}}
|
||||
className={`group relative ${value.bgColor} p-8 rounded-3xl h-full border border-neutral-100 dark:border-neutral-800 overflow-hidden`}
|
||||
>
|
||||
{/* Gradient overlay on hover */}
|
||||
|
|
@ -322,7 +346,10 @@ export default function CulturePage() {
|
|||
/>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 360, scale: 1.1 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${value.color} flex items-center justify-center text-white mb-6`}
|
||||
>
|
||||
|
|
@ -338,8 +365,10 @@ export default function CulturePage() {
|
|||
|
||||
<motion.div
|
||||
className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${value.color} origin-left`}
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
variants={{
|
||||
rest: { scaleX: 0 },
|
||||
hover: { scaleX: 1 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
|
@ -464,11 +493,19 @@ export default function CulturePage() {
|
|||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ x: 10 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { x: 0 },
|
||||
hover: { x: 10 }
|
||||
}}
|
||||
className="flex items-center gap-4 group cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, rotate: 360 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.2, rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/20 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
||||
>
|
||||
|
|
|
|||
38
app/page.tsx
38
app/page.tsx
|
|
@ -424,11 +424,20 @@ export default function Home() {
|
|||
{values.map((value) => (
|
||||
<StaggerItem key={value.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10, scale: 1.02 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0, scale: 1 },
|
||||
hover: { y: -10, scale: 1.02 }
|
||||
}}
|
||||
className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 border border-neutral-100 dark:border-neutral-800"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 360, scale: 1.1 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
|
|
@ -442,8 +451,10 @@ export default function Home() {
|
|||
</p>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
variants={{
|
||||
rest: { scaleX: 0 },
|
||||
hover: { scaleX: 1 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
|
@ -485,7 +496,13 @@ export default function Home() {
|
|||
{productCategories.map((category) => (
|
||||
<StaggerItem key={category.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -10 }
|
||||
}}
|
||||
className="group relative bg-neutral-50 dark:bg-neutral-800 p-6 rounded-3xl cursor-pointer overflow-hidden"
|
||||
>
|
||||
{/* Gradient overlay on hover */}
|
||||
|
|
@ -494,7 +511,10 @@ export default function Home() {
|
|||
/>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.1, rotate: 5 }
|
||||
}}
|
||||
className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center text-white mb-5`}
|
||||
>
|
||||
<category.icon size={24} />
|
||||
|
|
@ -508,8 +528,10 @@ export default function Home() {
|
|||
</p>
|
||||
|
||||
<motion.div
|
||||
initial={{ x: -10, opacity: 0 }}
|
||||
whileHover={{ x: 0, opacity: 1 }}
|
||||
variants={{
|
||||
rest: { x: -10, opacity: 0 },
|
||||
hover: { x: 0, opacity: 1 }
|
||||
}}
|
||||
className="absolute bottom-6 right-6"
|
||||
>
|
||||
<ArrowRightIcon
|
||||
|
|
|
|||
|
|
@ -319,11 +319,19 @@ export default function ProductsPage() {
|
|||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
whileHover={{ x: 10, scale: 1.02 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { x: 0, scale: 1 },
|
||||
hover: { x: 10, scale: 1.02 }
|
||||
}}
|
||||
className="group flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, rotate: 360 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.2, rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`w-10 h-10 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
|
|
@ -333,8 +341,10 @@ export default function ProductsPage() {
|
|||
{product}
|
||||
</span>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileHover={{ opacity: 1, x: 0 }}
|
||||
variants={{
|
||||
rest: { opacity: 0, x: -10 },
|
||||
hover: { opacity: 1, x: 0 }
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
<ArrowRightIcon
|
||||
|
|
@ -405,11 +415,20 @@ export default function ProductsPage() {
|
|||
].map((feature) => (
|
||||
<StaggerItem key={feature.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -10 }
|
||||
}}
|
||||
className="group relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-all h-full"
|
||||
>
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.1 }
|
||||
}}
|
||||
className="inline-block text-4xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
||||
>
|
||||
{feature.icon}
|
||||
|
|
@ -498,11 +517,19 @@ export default function ProductsPage() {
|
|||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1, y: 0 },
|
||||
hover: { scale: 1.05, y: -5 }
|
||||
}}
|
||||
className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl text-center border border-white/20 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -340,7 +340,13 @@ export default function StateOrdinancesPage() {
|
|||
{stateOrdinances.map((ordinance) => (
|
||||
<StaggerItem key={ordinance.state}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.01 }
|
||||
}}
|
||||
className="bg-white dark:bg-neutral-900 rounded-3xl shadow-lg border border-neutral-100 dark:border-neutral-800 overflow-hidden"
|
||||
>
|
||||
{/* Header */}
|
||||
|
|
@ -348,7 +354,10 @@ export default function StateOrdinancesPage() {
|
|||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.2, rotate: 10 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.2, rotate: 10 }
|
||||
}}
|
||||
className="text-4xl"
|
||||
>
|
||||
{ordinance.flag}
|
||||
|
|
@ -363,7 +372,10 @@ export default function StateOrdinancesPage() {
|
|||
</div>
|
||||
</div>
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.05 }}
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.05 }
|
||||
}}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-sm font-medium w-fit"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
|
|
@ -493,7 +505,16 @@ export default function StateOrdinancesPage() {
|
|||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{complianceSteps.map((item, index) => (
|
||||
<FadeIn key={item.step} delay={index * 0.1}>
|
||||
<motion.div whileHover={{ y: -10 }} className="group relative">
|
||||
<motion.div
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -10 }
|
||||
}}
|
||||
className="group relative"
|
||||
>
|
||||
{/* Connector line */}
|
||||
{index < complianceSteps.length - 1 && (
|
||||
<div className="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gradient-to-r from-[hsl(0,100%,40%)] to-transparent z-0" />
|
||||
|
|
@ -501,7 +522,10 @@ export default function StateOrdinancesPage() {
|
|||
|
||||
<div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors h-full">
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.1 }
|
||||
}}
|
||||
className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
||||
>
|
||||
{item.step}
|
||||
|
|
@ -579,11 +603,19 @@ export default function StateOrdinancesPage() {
|
|||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1, y: 0 },
|
||||
hover: { scale: 1.05, y: -5 }
|
||||
}}
|
||||
className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl border border-white/20 text-center hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -280,12 +280,21 @@ export default function SustainabilityPage() {
|
|||
{definitions.map((def) => (
|
||||
<StaggerItem key={def.term}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10, scale: 1.02 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0, scale: 1 },
|
||||
hover: { y: -10, scale: 1.02 }
|
||||
}}
|
||||
className="group relative bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 p-8 rounded-3xl border border-emerald-100 dark:border-emerald-900/50 h-full"
|
||||
>
|
||||
<motion.span
|
||||
className="text-5xl block mb-6"
|
||||
whileHover={{ scale: 1.2, rotate: 10 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.2, rotate: 10 }
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
{def.icon}
|
||||
|
|
@ -304,12 +313,21 @@ export default function SustainabilityPage() {
|
|||
{/* Additional context */}
|
||||
<FadeIn delay={0.4}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.01 }
|
||||
}}
|
||||
className="mt-12 bg-neutral-50 dark:bg-neutral-800 p-8 md:p-10 rounded-3xl border border-neutral-200 dark:border-neutral-700"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
|
|
@ -362,11 +380,20 @@ export default function SustainabilityPage() {
|
|||
{benefits.map((benefit, index) => (
|
||||
<FadeIn key={benefit.title} delay={0.2 + index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ x: 10 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { x: 0 },
|
||||
hover: { x: 10 }
|
||||
}}
|
||||
className="group flex items-start gap-4"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, rotate: 360 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.1, rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
|
||||
>
|
||||
|
|
@ -490,11 +517,19 @@ export default function SustainabilityPage() {
|
|||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1, y: 0 },
|
||||
hover: { scale: 1.05, y: -5 }
|
||||
}}
|
||||
className="group flex items-center gap-3 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-lg transition-all cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
variants={{
|
||||
rest: { rotate: 0 },
|
||||
hover: { rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -361,11 +361,20 @@ export default function WhatWeDoPage() {
|
|||
{distributorServices.map((service) => (
|
||||
<StaggerItem key={service.title}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10, scale: 1.02 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0, scale: 1 },
|
||||
hover: { y: -10, scale: 1.02 }
|
||||
}}
|
||||
className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 h-full border border-neutral-100 dark:border-neutral-800"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360, scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 360, scale: 1.1 }
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
||||
>
|
||||
|
|
@ -379,8 +388,10 @@ export default function WhatWeDoPage() {
|
|||
</p>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileHover={{ scaleX: 1 }}
|
||||
variants={{
|
||||
rest: { scaleX: 0 },
|
||||
hover: { scaleX: 1 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
|
@ -391,7 +402,13 @@ export default function WhatWeDoPage() {
|
|||
{/* Additional info */}
|
||||
<FadeIn delay={0.4}>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.01 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.01 }
|
||||
}}
|
||||
className="mt-12 bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-800 dark:to-neutral-900 p-8 md:p-12 rounded-3xl text-white"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
|
|
@ -408,7 +425,10 @@ export default function WhatWeDoPage() {
|
|||
</div>
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 5, scale: 1.05 }}
|
||||
variants={{
|
||||
rest: { rotate: 0, scale: 1 },
|
||||
hover: { rotate: 5, scale: 1.05 }
|
||||
}}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[hsl(0,100%,40%)] rounded-2xl blur-xl opacity-30" />
|
||||
|
|
@ -452,11 +472,19 @@ export default function WhatWeDoPage() {
|
|||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
whileHover={{ x: 10 }}
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { x: 0 },
|
||||
hover: { x: 10 }
|
||||
}}
|
||||
className="flex items-center gap-4 group cursor-default"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.2, rotate: 360 }}
|
||||
variants={{
|
||||
rest: { scale: 1, rotate: 0 },
|
||||
hover: { scale: 1.2, rotate: 360 }
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
|
||||
>
|
||||
|
|
@ -588,7 +616,13 @@ export default function WhatWeDoPage() {
|
|||
{processSteps.map((item, index) => (
|
||||
<FadeIn key={item.step} delay={index * 0.1}>
|
||||
<motion.div
|
||||
whileHover={{ y: -10 }}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
animate="rest"
|
||||
variants={{
|
||||
rest: { y: 0 },
|
||||
hover: { y: -10 }
|
||||
}}
|
||||
className="group relative"
|
||||
>
|
||||
{/* Connector line */}
|
||||
|
|
@ -598,7 +632,10 @@ export default function WhatWeDoPage() {
|
|||
|
||||
<div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors">
|
||||
<motion.span
|
||||
whileHover={{ scale: 1.1 }}
|
||||
variants={{
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.1 }
|
||||
}}
|
||||
className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
||||
>
|
||||
{item.step}
|
||||
|
|
|
|||
Loading…
Reference in New Issue