shortcode new struture updated
This commit is contained in:
akash
parent
c3f68da396
commit
2632188d04
94
app/shortcodes/page.js
Normal file
94
app/shortcodes/page.js
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -7,6 +7,12 @@
|
|||||||
background-color: #bc0000;
|
background-color: #bc0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lightbg{
|
||||||
|
|
||||||
|
background-color: #ffe6e6;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.chooseus-section .bg-layer{
|
.chooseus-section .bg-layer{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user