MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shortcode new struture updated

Browse Source
This commit is contained in:
akash 2025-09-01 18:22:38 +05:30
parent c3f68da396
commit 2632188d04
2 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
app/shortcodes/page.js Normal file
View File

@ -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>
)
}

6
public/assets/css/module-css/chooseus.css
View File

@ -7,6 +7,12 @@
background-color: #bc0000;
}
.lightbg{
background-color: #ffe6e6;
}
.chooseus-section .bg-layer{
position: absolute;
top: 0px;