Refactor Finances component by removing the unused insurance provider list and adjusting the grid layout from three to two columns for improved responsiveness.

This commit is contained in:
iamkiddy 2025-11-22 21:31:52 +00:00
parent 466194030a
commit d6750d7c16

View File

@ -3,7 +3,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useInView } from "framer-motion"; import { useInView } from "framer-motion";
import { useRef } from "react"; import { useRef } from "react";
import { CreditCard, DollarSign, Shield } from "lucide-react"; import { CreditCard, DollarSign } from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider"; import { useAppTheme } from "@/components/ThemeProvider";
export function Finances() { export function Finances() {
@ -19,32 +19,6 @@ export function Finances() {
"Visa" "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 ( return (
<section <section
id="finances" id="finances"
@ -132,7 +106,7 @@ export function Finances() {
</motion.p> </motion.p>
</motion.div> </motion.div>
<div className="grid md:grid-cols-3 gap-6 mb-8"> <div className="grid md:grid-cols-2 gap-6 mb-8">
{/* Fees */} {/* Fees */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@ -177,34 +151,6 @@ export function Finances() {
))} ))}
</div> </div>
</motion.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>
</div> </div>
</section> </section>