import { useState, useEffect, useRef } from “react”;
const BRAND = {
navy: “#0a1628”,
deepBlue: “#142340”,
gold: “#c9a96e”,
goldLight: “#dfc699”,
cream: “#f8f5f0”,
warmWhite: “#fdfcfa”,
sand: “#e8e0d4”,
charcoal: “#2a2a2a”,
slate: “#5a6272”,
accent: “#1a3a5c”,
};
function useInView(threshold = 0.15) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setVisible(true); obs.unobserve(el); } },
{ threshold }
);
obs.observe(el);
return () => obs.disconnect();
}, [threshold]);
return [ref, visible];
}
function FadeIn({ children, delay = 0, className = “”, direction = “up” }) {
const [ref, visible] = useInView(0.1);
const transforms = {
up: “translateY(40px)”,
down: “translateY(-40px)”,
left: “translateX(40px)”,
right: “translateX(-40px)”,
none: “none”,
};
return (
{children}
);
}
function GoldDivider({ width = “80px” }) {
return (
);
}
function CTAButton({ children, variant = “gold”, onClick, style = {} }) {
const [hovered, setHovered] = useState(false);
const base = variant === “gold”
? {
background: hovered
? `linear-gradient(135deg, ${BRAND.goldLight}, ${BRAND.gold})`
: `linear-gradient(135deg, ${BRAND.gold}, #b8944f)`,
color: BRAND.navy,
border: “none”,
}
: {
background: hovered ? “rgba(201,169,110,0.12)” : “transparent”,
color: BRAND.gold,
border: `1.5px solid ${BRAND.gold}`,
};
return (
);
}
/* ─── HERO ─── */
function Hero({ onCTA }) {
const [loaded, setLoaded] = useState(false);
useEffect(() => { setTimeout(() => setLoaded(true), 200); }, []);
return (
{/* ambient light effects */}
“`
{/* subtle grid pattern */}
{/* brand mark */}
Medics Care Serbia
{/* main headline */}
The Life You{” “}
Deserve
Begins at Home
Premium wellness solutions designed for those who understand that true luxury is how you feel — every single day.
{/* trust strip */}
{[“3-Year Warranty”, “European Standards”, “Premium Service”].map((t) => (
{t}
))}
{/* scroll indicator */}
“`
);
}
/* ─── EMOTIONAL BENEFITS ─── */
function EmotionalBenefits() {
const benefits = [
{
icon: (
),
title: “Release the Day”,
desc: “Come home and let go. Feel the tension melt from your shoulders, your back, your mind. Every day becomes a reset.”,
},
{
icon: (
),
title: “Nurture Your Body”,
desc: “Support your muscles, circulation, and well-being with advanced massage technology designed around the human body.”,
},
{
icon: (
),
title: “Elevate Your Home”,
desc: “Transform your living space into a private wellness sanctuary. Premium design that belongs in the finest interiors.”,
},
{
icon: (
),
title: “Reclaim Your Time”,
desc: “No appointments, no commute, no waiting. Professional-grade wellness available the moment you need it.”,
},
];
return (
What Changes When You Choose Wellness
It’s Not About a Chair.
It’s About How You Feel.
“`
{benefits.map((b, i) => (
{
e.currentTarget.style.transform = “translateY(-6px)”;
e.currentTarget.style.boxShadow = “0 12px 50px rgba(10,22,40,0.08)”;
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = “none”;
e.currentTarget.style.boxShadow = “0 2px 40px rgba(10,22,40,0.04)”;
}}
>
{b.icon}
{b.title}
{b.desc}
))}
“`
);
}
/* ─── DREAM LIFESTYLE ─── */
function DreamLifestyle({ onCTA }) {
return (
“`
Imagine This
Close Your Eyes.{” “}
Feel the Difference.
You walk through the door after a long day. The house is quiet. You settle into your chair — your chair — and the warmth begins. Gentle pressure finds the exact spots where you carry the weight of the day.
Within minutes, your shoulders drop. Your breathing slows. The tension you forgot you were holding simply… dissolves.
This is not a luxury reserved for vacation. This is your everyday life with Medics Care.
{[
{ num: “15”, unit: “min”, label: “To complete relaxation” },
{ num: “365”, unit: “days”, label: “Of wellness at home” },
{ num: “Zero”, unit: “”, label: “Appointments needed” },
].map((s, i) => (
{s.num}{s.unit && ` ${s.unit}`}
{s.label}
))}
“`
);
}
/* ─── TRUST / SAFETY ─── */
function TrustSafety() {
const pillars = [
{
icon: “🛡️”,
title: “3-Year Full Warranty”,
desc: “Complete peace of mind. Every Medics Care product is covered by our comprehensive three-year warranty — because we stand behind what we build.”,
},
{
icon: “🇪🇺”,
title: “European Quality Standards”,
desc: “Our products meet the highest European safety and quality standards. Premium materials, rigorous testing, certified performance.”,
},
{
icon: “🤝”,
title: “Dedicated Personal Support”,
desc: “From your first question to years after purchase, our team provides hands-on guidance, maintenance advice, and care you can rely on.”,
},
{
icon: “✨”,
title: “Premium Craftsmanship”,
desc: “Every detail matters. From the stitching of the upholstery to the precision of the massage mechanism — nothing is compromised.”,
},
];
return (
Your Confidence, Our Commitment
Built on Trust.{” “}
Backed by Standards.
“`
{pillars.map((p, i) => (
{p.icon}
{p.title}
{p.desc}
))}
“`
);
}
/* ─── WHY MEDICS CARE ─── */
function WhyMedicsCare() {
return (
Why Medics Care
More Than Products.{” “}
A Philosophy.
“`
Medics Care was founded on a simple belief: everyone deserves to feel their best — at home, every day. We don’t sell furniture. We deliver a daily upgrade to how you live, recover, and enjoy your life.
Our team carefully selects and tests every product to meet the standards we would demand for our own families. From advanced massage technology to premium materials, from first contact to after-sales care — we treat every detail as if it matters, because it does.
With showrooms in Belgrade and Novi Sad, we welcome you to experience the difference in person. Touch the materials. Feel the precision. Sit down, close your eyes, and discover why thousands of families across Europe trust Medics Care.
{[
{ val: “10+”, label: “Years of expertise” },
{ val: “2”, label: “Showrooms in Serbia” },
{ val: “5000+”, label: “Happy customers” },
{ val: “3yr”, label: “Full warranty” },
].map((s, i) => (
{s.val}
{s.label}
))}
“`
);
}
/* ─── SOCIAL PROOF ─── */
function SocialProof() {
const testimonials = [
{
text: “I never imagined I’d look forward to coming home this much. After two months, my back pain has improved dramatically and I sleep better than I have in years.”,
name: “Marko D.”,
role: “Business Owner, Belgrade”,
},
{
text: “We bought one for our parents’ anniversary. Now they use it every evening together. My mother says it’s the best gift they ever received.”,
name: “Ana S.”,
role: “Marketing Director, Novi Sad”,
},
{
text: “The showroom experience convinced me immediately. The quality is unmistakable — and the team’s professionalism made the entire process effortless.”,
name: “Nikola V.”,
role: “IT Manager, Belgrade”,
},
];
return (
“`
What Our Customers Say
Real People.{” “}
Real Comfort.
{testimonials.map((t, i) => (
{/* stars */}
{[…Array(5)].map((_, s) => (
))}
“{t.text}”
{t.name}
{t.role}
))}
{/* trust badges row */}
{[
“CE Certified”,
“ISO Quality”,
“Showroom Experience”,
“Professional Setup”,
“After-Sales Care”,
].map((b) => (
{b}
))}
“`
);
}
/* ─── LEAD CAPTURE ─── */
function LeadCapture() {
const [form, setForm] = useState({ name: “”, phone: “”, email: “”, interest: “” });
const [submitted, setSubmitted] = useState(false);
const inputStyle = {
width: “100%”,
padding: “16px 20px”,
fontFamily: “‘Cormorant Garamond’, serif”,
fontSize: “17px”,
color: BRAND.navy,
background: “white”,
border: `1px solid ${BRAND.sand}`,
outline: “none”,
transition: “border-color 0.3s ease”,
boxSizing: “border-box”,
};
if (submitted) {
return (
✓
Thank You
Our wellness consultant will reach out to you shortly.
We look forward to helping you find your perfect comfort solution.
);
}
return (
Your First Step
Let Us Guide You
Share your details and our wellness consultant will personally help you find the ideal solution for your needs. No pressure — just expert guidance.
“`
setForm({ …form, name: e.target.value })}
style={inputStyle}
onFocus={(e) => e.target.style.borderColor = BRAND.gold}
onBlur={(e) => e.target.style.borderColor = BRAND.sand}
/>
setForm({ …form, phone: e.target.value })}
style={inputStyle}
onFocus={(e) => e.target.style.borderColor = BRAND.gold}
onBlur={(e) => e.target.style.borderColor = BRAND.sand}
/>
setForm({ …form, email: e.target.value })}
style={inputStyle}
onFocus={(e) => e.target.style.borderColor = BRAND.gold}
onBlur={(e) => e.target.style.borderColor = BRAND.sand}
/>
style={{ width: “100%”, padding: “18px” }}
>
Get My Personal Consultation
Your information is safe with us. We’ll contact you within 24 hours
with personalized guidance — no spam, no pressure, ever.
{[“🔒 Secure & Private”, “📞 Response in 24h”, “🤝 Zero Pressure”].map((t) => (
{t}
))}
“`
);
}
/* ─── FINAL CTA ─── */
function FinalCTA({ onCTA }) {
return (
“`
Your Better Life{” “}
Is One Decision Away
You work hard. You care for others. You’ve earned the right to come home
to something extraordinary. Let Medics Care show you what’s possible.
“`
);
}
/* ─── FOOTER ─── */
function Footer() {
return (
);
}
/* ─── FLOATING NAV ─── */
function FloatingNav({ onCTA }) {
const [show, setShow] = useState(false);
useEffect(() => {
const handler = () => setShow(window.scrollY > 400);
window.addEventListener(“scroll”, handler);
return () => window.removeEventListener(“scroll”, handler);
}, []);
return (
Medics Care
Get Consultation
);
}
/* ─── MAIN APP ─── */
export default function MedicsCareLP() {
const scrollToCTA = () => {
document.getElementById(“contact”)?.scrollIntoView({ behavior: “smooth” });
};
return (
<>
“`
“`
);
}
