227 lines
8.4 KiB
TypeScript
227 lines
8.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { useInView } from "framer-motion";
|
||
|
|
import { useRef, useEffect, useState } from "react";
|
||
|
|
import { CreditCard, DollarSign, Shield } from "lucide-react";
|
||
|
|
|
||
|
|
export function Finances() {
|
||
|
|
const ref = useRef(null);
|
||
|
|
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||
|
|
const [isDark, setIsDark] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const checkTheme = () => {
|
||
|
|
setIsDark(document.documentElement.classList.contains('dark'));
|
||
|
|
};
|
||
|
|
|
||
|
|
checkTheme();
|
||
|
|
const observer = new MutationObserver(checkTheme);
|
||
|
|
observer.observe(document.documentElement, {
|
||
|
|
attributes: true,
|
||
|
|
attributeFilter: ['class']
|
||
|
|
});
|
||
|
|
|
||
|
|
return () => observer.disconnect();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const paymentMethods = [
|
||
|
|
"American Express",
|
||
|
|
"Discover",
|
||
|
|
"Mastercard",
|
||
|
|
"Visa"
|
||
|
|
];
|
||
|
|
|
||
|
|
const insuranceProviders = [
|
||
|
|
"Aetna",
|
||
|
|
"Aetna - Medicare",
|
||
|
|
"Aetna - WebTPA",
|
||
|
|
"All Savers",
|
||
|
|
"Ambetter",
|
||
|
|
"AvMed",
|
||
|
|
"Cigna and Evernorth",
|
||
|
|
"EAP:Cigna",
|
||
|
|
"EAP:UnitedHealthcare/Optum",
|
||
|
|
"Golden Rule",
|
||
|
|
"Harvard Pilgrim/United",
|
||
|
|
"Humana",
|
||
|
|
"Humana - Medicare",
|
||
|
|
"Humana Dual- Medicaid/Medicare",
|
||
|
|
"Medicaid",
|
||
|
|
"Optum",
|
||
|
|
"Oscar Health",
|
||
|
|
"Oxford",
|
||
|
|
"Surest (formerly Bind)",
|
||
|
|
"Tufts Health/Cigna",
|
||
|
|
"UHC/Optum - Medicare",
|
||
|
|
"United Medical Resources (UMR)",
|
||
|
|
"UnitedHealthcare UHC | UBH"
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
id="finances"
|
||
|
|
ref={ref}
|
||
|
|
className="relative py-20 px-4 overflow-hidden"
|
||
|
|
>
|
||
|
|
{/* Background Image */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 z-0"
|
||
|
|
style={{
|
||
|
|
backgroundSize: 'cover',
|
||
|
|
backgroundPosition: 'center',
|
||
|
|
backgroundRepeat: 'no-repeat',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Minimal overlay - allowing background image to show at near original opaqueness */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 z-[1]"
|
||
|
|
style={{
|
||
|
|
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.10)'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Very subtle gradient overlay */}
|
||
|
|
{!isDark && (
|
||
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
|
||
|
|
)}
|
||
|
|
{isDark && (
|
||
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Subtle animated blobs */}
|
||
|
|
<div className="absolute inset-0 overflow-hidden z-[3]">
|
||
|
|
<motion.div
|
||
|
|
className="absolute top-20 right-20 w-72 h-72 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||
|
|
animate={{
|
||
|
|
x: [0, -90, 0],
|
||
|
|
y: [0, 50, 0],
|
||
|
|
scale: [1, 1.2, 1],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 20,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: 'easeInOut',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<motion.div
|
||
|
|
className="absolute bottom-10 left-20 w-96 h-96 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||
|
|
animate={{
|
||
|
|
x: [0, 70, 0],
|
||
|
|
y: [0, -60, 0],
|
||
|
|
scale: [1, 1.15, 1],
|
||
|
|
}}
|
||
|
|
transition={{
|
||
|
|
duration: 24,
|
||
|
|
repeat: Infinity,
|
||
|
|
ease: 'easeInOut',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="container max-w-6xl mx-auto relative z-10">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
className="text-center mb-16"
|
||
|
|
>
|
||
|
|
<motion.h2
|
||
|
|
className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
>
|
||
|
|
Finances
|
||
|
|
</motion.h2>
|
||
|
|
<motion.p
|
||
|
|
className="text-xl text-muted-foreground max-w-3xl mx-auto"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
||
|
|
>
|
||
|
|
Transparent pricing and flexible payment options to support your therapeutic journey
|
||
|
|
</motion.p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||
|
|
{/* Fees */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
|
||
|
|
<DollarSign className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground">Fees</h3>
|
||
|
|
</div>
|
||
|
|
<p className="text-2xl font-bold text-foreground mb-2">Individual Sessions</p>
|
||
|
|
<p className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">$175</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Payment Methods */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
|
||
|
|
<CreditCard className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground">Payment Methods</h3>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{paymentMethods.map((method, index) => (
|
||
|
|
<motion.p
|
||
|
|
key={method}
|
||
|
|
className="text-muted-foreground"
|
||
|
|
initial={{ opacity: 0, x: -10 }}
|
||
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
|
|
transition={{ duration: 0.3, delay: 0.4 + index * 0.05 }}
|
||
|
|
>
|
||
|
|
{method}
|
||
|
|
</motion.p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
{/* Insurance */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
|
||
|
|
<Shield className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground">Insurance</h3>
|
||
|
|
</div>
|
||
|
|
<div className="max-h-64 overflow-y-auto space-y-2 pr-2">
|
||
|
|
{insuranceProviders.map((provider, index) => (
|
||
|
|
<motion.p
|
||
|
|
key={provider}
|
||
|
|
className="text-sm text-muted-foreground"
|
||
|
|
initial={{ opacity: 0, x: -10 }}
|
||
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||
|
|
transition={{ duration: 0.3, delay: 0.5 + index * 0.02 }}
|
||
|
|
>
|
||
|
|
{provider}
|
||
|
|
</motion.p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|