From 2632188d04a7075527aba270e0fb6b31da7dd603 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Mon, 1 Sep 2025 18:22:38 +0530
Subject: [PATCH] shortcode new struture updated

---
 app/shortcodes/page.js                    | 94 +++++++++++++++++++++++
 public/assets/css/module-css/chooseus.css |  6 ++
 2 files changed, 100 insertions(+)
 create mode 100644 app/shortcodes/page.js

diff --git a/app/shortcodes/page.js b/app/shortcodes/page.js
new file mode 100644
index 0000000..226f67b
--- /dev/null
+++ b/app/shortcodes/page.js
@@ -0,0 +1,94 @@
+'use client'
+import Layout from "@/components/layout/Layout"
+import { useState } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+
+const items = [
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "On call 24/7 for client needs" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Flexible and fast scheduling" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Regular quality assurance" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Thorough care management and family support" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Double the care team staff of other agencies" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Assisting with walking and transferring from bed to wheelchair" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Bathing, dressing and grooming assistance" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Medication reminders" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Safety and fall prevention" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Toileting and incontinence care" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Light housekeeping" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Meal preparation and nutrition" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Grocery shopping and errands" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Transportation to social and recreational activities" },
+    { icon: "/assets/images/services/icons/trusted-physiotherapy-clinic.webp", text: "Assistance with light exercise and outdoor activity" },
+]
+
+export default function Home() {
+    const [activeIndex, setActiveIndex] = useState(null)
+
+    return (
+        <Layout 
+            headerStyle={2} 
+            footerStyle={1} 
+            breadcrumbTitle="COVID-19 UPDATES" 
+            bannerImage="/assets/images/covid/covid-19-banner.webp"
+        >
+            <section className="chooseus-section lightbg">
+                <div className="auto-container">
+                    <div className="row clearfix">
+                        <div className="col-lg-12 col-md-12 col-sm-12 content-column">
+                            <div className="content-box text-center">
+                                <div className="sec-title light mb_50">
+                                    <span className="sub-title">Why Choose Us</span>
+                                    <h2>Choose The Best For Your <br />Health</h2>
+                                </div>
+
+                                {/* ICONS in 1 row (4 columns) */}
+                                <div className="row clearfix flex flex-wrap justify-center gap-6">
+                                    {items.map((item, i) => (
+                                        <div 
+                                            key={i} 
+                                            className="col-lg-3 col-md-3 col-sm-6 mb-5"
+                                        >
+                                            <div
+                                                className="chooseus-block-one relative"
+                                                onMouseEnter={() => setActiveIndex(i)}
+                                                onMouseLeave={() => setActiveIndex(null)}
+                                            >
+                                                {/* Popup inside each icon */}
+                                                <AnimatePresence>
+                                                    {activeIndex === i && (
+                                                        <motion.div
+                                                            initial={{ opacity: 0, y: 10 }}
+                                                            animate={{ opacity: 1, y: 0 }}
+                                                            exit={{ opacity: 0, y: 10 }}
+                                                            transition={{ duration: 0.25, ease: "easeOut" }}
+                                                            className="absolute -top-24 left-1/2 -translate-x-1/2 bg-black/80 px-4 py-3 rounded-xl w-56 text-center shadow-lg z-10"
+                                                        >
+                                                            <p className="text-sm text-white mb-1">
+                                                                {item.text}
+                                                            </p>
+                                                        </motion.div>
+                                                    )}
+                                                </AnimatePresence>
+
+                                                {/* Icon replaced with Image */}
+                                                <div className="inner-box">
+                                                    <div className="icon-box bg-[#bc0000] w-20 h-20 flex items-center justify-center rounded-xl">
+                                                        <img 
+                                                            src={item.icon} 
+                                                            alt="Service Icon" 
+                                                            className="w-10 h-10 object-contain"
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </Layout>
+    )
+}
diff --git a/public/assets/css/module-css/chooseus.css b/public/assets/css/module-css/chooseus.css
index ec838de..3de170d 100644
--- a/public/assets/css/module-css/chooseus.css
+++ b/public/assets/css/module-css/chooseus.css
@@ -7,6 +7,12 @@
   background-color: #bc0000;
 }
 
+.lightbg{
+
+  background-color: #ffe6e6;
+
+}
+
 .chooseus-section .bg-layer{
   position: absolute;
   top: 0px;