Merge pull request 'fix/landing-page' (#13) from fix/landing-page into master
Reviewed-on: https://gitea.blackbusinesslabs.com/ATTUNE-HEART-THERAPY/website/pulls/13
This commit is contained in:
commit
79a5bb9fb9
@ -53,7 +53,7 @@ export function Header() {
|
||||
<div className="px-3 sm:px-4 md:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-14 sm:h-16">
|
||||
{/* Logo */}
|
||||
<Link href="/admin/dashboard" className="flex items-center gap-2 sm:gap-3">
|
||||
<Link href="/" className="flex items-center gap-2 sm:gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
|
||||
<Heart className="w-4 h-4 sm:w-6 sm:h-6 text-rose-600" fill="currentColor" />
|
||||
</div>
|
||||
|
||||
@ -44,12 +44,12 @@ export default function SideNav() {
|
||||
<>
|
||||
{/* Mobile Top Bar */}
|
||||
<div className="flex md:hidden items-center justify-between px-4 py-3 border-b border-gray-200 bg-white z-30 fixed top-0 left-0 right-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
|
||||
<Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-lg font-semibold text-gray-900">Attune Heart Therapy</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@ -76,12 +76,12 @@ export default function SideNav() {
|
||||
>
|
||||
{/* Logo Section */}
|
||||
<div className="shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
|
||||
<div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
|
||||
<Link href="/" className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
|
||||
<Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-gray-900">Attune Heart</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<hr className="shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />
|
||||
|
||||
12
app/page.tsx
12
app/page.tsx
@ -3,6 +3,10 @@ import { Footer } from "../components/Footer";
|
||||
import { HeroSection } from "@/components/Hero";
|
||||
import { About } from "@/components/About";
|
||||
import { Services } from "@/components/Services";
|
||||
import { Specialties } from "@/components/Specialties";
|
||||
import { ClientFocus } from "@/components/ClientFocus";
|
||||
import { Finances } from "@/components/Finances";
|
||||
import { Location } from "@/components/Location";
|
||||
import { ContactSection } from "@/components/ContactSection";
|
||||
import { Navbar } from "../components/Navbar";
|
||||
|
||||
@ -17,6 +21,14 @@ export default function Home() {
|
||||
|
||||
<Services />
|
||||
|
||||
<Specialties />
|
||||
|
||||
<ClientFocus />
|
||||
|
||||
<Finances />
|
||||
|
||||
<Location />
|
||||
|
||||
<ContactSection />
|
||||
|
||||
<Footer />
|
||||
|
||||
179
components/ClientFocus.tsx
Normal file
179
components/ClientFocus.tsx
Normal file
@ -0,0 +1,179 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useInView } from "framer-motion";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { Users, UserCheck, Globe } from "lucide-react";
|
||||
|
||||
export function ClientFocus() {
|
||||
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 ages = [
|
||||
"Children (6 to 10)",
|
||||
"Teen",
|
||||
"Adults",
|
||||
"Elders (65+)"
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="client-focus"
|
||||
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 }}
|
||||
>
|
||||
Client Focus
|
||||
</motion.h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Age */}
|
||||
<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">
|
||||
<Users className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground">Age</h3>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{ages.map((age, index) => (
|
||||
<motion.li
|
||||
key={age}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.3, delay: 0.3 + index * 0.05 }}
|
||||
className="text-muted-foreground"
|
||||
>
|
||||
{age}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Participants */}
|
||||
<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">
|
||||
<UserCheck className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground">Participants</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground">Individuals</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Ethnicity */}
|
||||
<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">
|
||||
<Globe className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground">Ethnicity</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground">Black and African American</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
226
components/Finances.tsx
Normal file
226
components/Finances.tsx
Normal file
@ -0,0 +1,226 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@ export function HeroSection() {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
Nathalie Mac Guffie, LCSW
|
||||
Nathalie Mac-Guffie, LMHC
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
@ -155,6 +155,12 @@ export function HeroSection() {
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="cursor-pointer hover:scale-105 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-cyan-300 dark:hover:border-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all"
|
||||
onClick={() => {
|
||||
const servicesSection = document.getElementById('services');
|
||||
if (servicesSection) {
|
||||
servicesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
Learn More
|
||||
</Button>
|
||||
|
||||
263
components/Location.tsx
Normal file
263
components/Location.tsx
Normal file
@ -0,0 +1,263 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useInView } from "framer-motion";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { MapPin, Phone, Building2 } from "lucide-react";
|
||||
|
||||
export function Location() {
|
||||
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 cities = [
|
||||
"Hollywood, FL",
|
||||
"Jacksonville, FL",
|
||||
"Miami, FL",
|
||||
"Pensacola, FL"
|
||||
];
|
||||
|
||||
const counties = [
|
||||
"Broward",
|
||||
"Duval",
|
||||
"Escambia",
|
||||
"Miami-dade"
|
||||
];
|
||||
|
||||
const zips = [
|
||||
"32256",
|
||||
"32503",
|
||||
"33021",
|
||||
"33145"
|
||||
];
|
||||
|
||||
const neighborhoods = [
|
||||
"Coral Gate",
|
||||
"Coral Way",
|
||||
"Royal Lakes"
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="location"
|
||||
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 left-20 w-72 h-72 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, 80, 0],
|
||||
y: [0, 40, 0],
|
||||
scale: [1, 1.1, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 18,
|
||||
repeat: Infinity,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, -80, 0],
|
||||
y: [0, 60, 0],
|
||||
scale: [1, 1.15, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 22,
|
||||
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 }}
|
||||
>
|
||||
Location
|
||||
</motion.h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
{/* Primary Location */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, 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 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">
|
||||
<MapPin className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground">Primary Location</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-2">Miami, FL 33145</p>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Phone className="h-4 w-4" />
|
||||
<span>(954) 807-3027</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Additional Location */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, 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 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">
|
||||
<Building2 className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground">Additional Location</h3>
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-2">Hollywood, FL 33021</p>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Phone className="h-4 w-4" />
|
||||
<span>(954) 807-3027</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Nearby Areas */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50"
|
||||
>
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-6">Nearby Areas</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* Cities */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">Cities</h4>
|
||||
<ul className="space-y-2">
|
||||
{cities.map((city, index) => (
|
||||
<motion.li
|
||||
key={city}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{city}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Counties */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">Counties</h4>
|
||||
<ul className="space-y-2">
|
||||
{counties.map((county, index) => (
|
||||
<motion.li
|
||||
key={county}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.3, delay: 0.6 + index * 0.05 }}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{county}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Zips */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">Zips</h4>
|
||||
<ul className="space-y-2">
|
||||
{zips.map((zip, index) => (
|
||||
<motion.li
|
||||
key={zip}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.3, delay: 0.7 + index * 0.05 }}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{zip}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Neighborhoods */}
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-3">Neighborhoods</h4>
|
||||
<ul className="space-y-2">
|
||||
{neighborhoods.map((neighborhood, index) => (
|
||||
<motion.li
|
||||
key={neighborhood}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.3, delay: 0.8 + index * 0.05 }}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{neighborhood}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ import { ThemeToggle } from "@/components/ThemeToggle";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LoginDialog } from "@/components/LoginDialog";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export function Navbar() {
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
@ -52,19 +53,20 @@ export function Navbar() {
|
||||
>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<motion.a
|
||||
href="#home"
|
||||
<motion.div
|
||||
className="flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<div className="bg-linear-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
|
||||
<Heart className="h-5 w-5 text-white fill-white" />
|
||||
</div>
|
||||
<span className="font-bold text-lg bg-linear-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
|
||||
Attune Heart Therapy
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="bg-linear-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
|
||||
<Heart className="h-5 w-5 text-white fill-white" />
|
||||
</div>
|
||||
<span className="font-bold text-lg bg-linear-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
|
||||
Attune Heart Therapy
|
||||
</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<button
|
||||
|
||||
195
components/Specialties.tsx
Normal file
195
components/Specialties.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useInView } from "framer-motion";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { Star, Award } from "lucide-react";
|
||||
|
||||
export function Specialties() {
|
||||
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 topSpecialties = [
|
||||
"Child or Adolescent",
|
||||
"Coping Skills",
|
||||
"Self Esteem"
|
||||
];
|
||||
|
||||
const expertise = [
|
||||
"Adoption",
|
||||
"Family Conflict",
|
||||
"Geriatric and Seniors",
|
||||
"Life Transitions",
|
||||
"Parenting",
|
||||
"Peer Relationships",
|
||||
"Perinatal Mental Health",
|
||||
"Trauma and PTSD"
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="specialties"
|
||||
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 left-20 w-72 h-72 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, 80, 0],
|
||||
y: [0, 40, 0],
|
||||
scale: [1, 1.1, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 18,
|
||||
repeat: Infinity,
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, -80, 0],
|
||||
y: [0, 60, 0],
|
||||
scale: [1, 1.15, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 22,
|
||||
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 }}
|
||||
>
|
||||
Specialties and Expertise
|
||||
</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 }}
|
||||
>
|
||||
Comprehensive therapeutic support tailored to your unique needs
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Top Specialties */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<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">
|
||||
<Star className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-foreground">Top Specialties</h3>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
{topSpecialties.map((specialty, index) => (
|
||||
<motion.li
|
||||
key={specialty}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
||||
className="flex items-center gap-3 text-lg text-muted-foreground"
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-gradient-to-r from-rose-500 to-pink-600" />
|
||||
<span className="text-foreground">{specialty}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Expertise */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<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">
|
||||
<Award className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-foreground">Expertise</h3>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
{expertise.map((item, index) => (
|
||||
<motion.li
|
||||
key={item}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.5 + index * 0.1 }}
|
||||
className="flex items-center gap-3 text-lg text-muted-foreground"
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full bg-gradient-to-r from-rose-500 to-pink-600" />
|
||||
<span className="text-foreground">{item}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user