Activity,

main.js

'use client';

import React from 'react';
import {
  Activity,
  BatteryWarning,
  Moon,
  ActivitySquare,
  Smartphone,
  HeartHandshake,
  BrainCircuit,
  RotateCcw,
  Stethoscope,
  Coffee
} from 'lucide-react';

const WellnessSection = () => {
  const painPoints = [
    {
      title: "Chronic Stress",
      desc: "From work-life imbalance in Delhi.",
      icon: Activity,
    },
    {
      title: "Anxiety & Fatigue",
      desc: "Despite a comfortable lifestyle in Gurgaon.",
      icon: BatteryWarning,
    },
    {
      title: "Poor Sleep Quality",
      desc: "Due to overthinking in Noida.",
      icon: Moon,
    },
    {
      title: "Physical Tension",
      desc: "Headaches, back pain, & neck stiffness from NCR's pace.",
      icon: ActivitySquare,
    },
    {
      title: "Digital Burnout",
      desc: "From constant phone & laptop use.",
      icon: Smartphone,
    },
    {
      title: "Lack of Support",
      desc: "Emotional void despite a busy social life.",
      icon: HeartHandshake,
    },
    {
      title: "Self-Care Guilt",
      desc: "Neglecting yourself while focusing on career/family.",
      icon: BrainCircuit,
    },
    {
      title: "Repetitive Patterns",
      desc: "Feeling stuck in lifestyle loops in Delhi NCR.",
      icon: RotateCcw,
    },
    {
      title: "Future Health Fears",
      desc: "Worries about long-term issues due to current habits.",
      icon: Stethoscope,
    },
    {
      title: "Quick Fix Reliance",
      desc: "Over-reliance on coffee, alcohol, or OTC meds.",
      icon: Coffee,
    },
  ];

  return (
    <section className="w-full py-24 bg-[#F2F7F4] font-sans text-[#2C3E35] relative overflow-hidden">
      {/* Decorative Tree */}
      <img src="/tree.png" alt="" className="absolute top-[20%] -right-10 w-[200px] md:w-[320px] opacity-[0.05] pointer-events-none z-0 rotate-[20deg]" />

      <div className="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col lg:flex-row gap-16 items-center relative z-10">

        {/* Left Column - Arch Image */}
        <div className="w-full lg:w-5/12 flex justify-center relative">
          {/* Soft background glow */}
          <div className="absolute -left-4 top-10 w-64 h-64 bg-[#BCE0CC] rounded-full mix-blend-multiply filter blur-3xl opacity-60"></div>

          <div className="relative w-full max-w-md aspect-[3/4] overflow-hidden rounded-t-full shadow-lg border-4 border-white">
            <img
              src="https://images.unsplash.com/photo-1591343395902-1adcb454c4e2?q=80&w=687&auto=format&fit=crop"
              alt="Wellness Counseling"
              className="w-full h-full object-cover"
            />
            {/* Subtle green tint over the image to match theme */}
            <div className="absolute inset-0 bg-[#5C8D73]/10 mix-blend-overlay" />
          </div>
        </div>

        {/* Right Column - Content */}
        <div className="w-full lg:w-7/12 flex flex-col z-10">
          <span className="text-[11px] font-bold tracking-[0.2em] text-[#5C8D73] uppercase mb-4">
            - Wellness Assessment -
          </span>

          <h2 className="text-4xl md:text-5xl font-serif text-[#1E2B24] mb-6 uppercase tracking-tight">
            Are you dealing with<span className="text-[#5C8D73]">.</span>
          </h2>

          <p className="text-sm md:text-base text-[#4A5D52] mb-10 leading-relaxed max-w-2xl font-medium">
            If any of these sound familiar, you're not alone. Our integrated wellness
            approach is designed to address the root cause, not just the symptoms
            for residents of Delhi NCR.
          </p>

          {/* Grid for Assessment Points */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-6 mb-12">
            {painPoints.map((point, index) => {
              const IconComponent = point.icon;
              return (
                <div key={index} className="flex gap-4 items-start group">
                  <div className="mt-1 p-2 bg-white rounded-xl text-[#5C8D73] shadow-sm group-hover:bg-[#5C8D73] group-hover:text-white transition-colors duration-300">
                    <IconComponent size={20} strokeWidth={1.5} />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold text-[#1E2B24] mb-1">
                      {point.title}
                    </h3>
                    <p className="text-xs text-[#6B8576] leading-relaxed pr-4">
                      {point.desc}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Action Buttons */}
          <div className="flex flex-wrap gap-4 pt-4">
            <button className="px-8 py-3.5 rounded-xl bg-primary text-white font-bold text-xs uppercase tracking-widest hover:bg-[#6FA06F] transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
              Our Doctors
            </button>
            <button className="px-8 py-3.5 rounded-xl border-2 border-[#2D4A3E]/10 text-[#2D4A3E] font-bold text-xs uppercase tracking-widest hover:border-[#2D4A3E]/30 hover:bg-[#2D4A3E]/5 transition-all">
              Patient Reviews
            </button>
          </div>
        </div>

      </div>
    </section>
  );
};

export default WellnessSection;

Run this JavaScript snippet

Open this snippet on SnIPPETsX to run the JavaScript code in your browser, edit it together with others in real time, or fork it into your own copy. No install or account is needed.

• Online JavaScript Compiler
• Share your own code snippets