diff --git a/client/package-lock.json b/client/package-lock.json
index 399da29..55e363e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@reduxjs/toolkit": "^2.5.0",
"@zegocloud/zego-uikit-prebuilt": "^2.14.0",
+ "aos": "^2.3.4",
"axios": "^1.7.9",
"client": "^0.0.1",
"date-fns": "^4.1.0",
@@ -1667,6 +1668,17 @@
"node": ">= 8"
}
},
+ "node_modules/aos": {
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+ "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+ "license": "MIT",
+ "dependencies": {
+ "classlist-polyfill": "^1.0.3",
+ "lodash.debounce": "^4.0.6",
+ "lodash.throttle": "^4.0.1"
+ }
+ },
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2237,6 +2249,12 @@
"node": ">= 6"
}
},
+ "node_modules/classlist-polyfill": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+ "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+ "license": "Unlicense"
+ },
"node_modules/client": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client/-/client-0.0.1.tgz",
@@ -4443,6 +4461,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/lodash.debounce": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+ "license": "MIT"
+ },
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4450,6 +4474,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/lodash.throttle": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+ "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+ "license": "MIT"
+ },
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/client/package.json b/client/package.json
index 4778340..abff2a0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"@reduxjs/toolkit": "^2.5.0",
"@zegocloud/zego-uikit-prebuilt": "^2.14.0",
+ "aos": "^2.3.4",
"axios": "^1.7.9",
"client": "^0.0.1",
"date-fns": "^4.1.0",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1178ad0..681f8b6 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -8,6 +8,9 @@ import { setUser } from "./store/slices/userSlice.jsx";
import ScrollToTop from "./components/ScrollToTop";
import ScrollRestoration from "./components/ScrollRestoration";
import { Toaster, toast } from 'react-hot-toast';
+import AOS from "aos";
+import "aos/dist/aos.css";
+
function App() {
const matches = useMatches();
const hideLayout = matches.some((match) => match.handle?.noLayout);
@@ -17,7 +20,7 @@ function App() {
// Restore user session on app load
const token = localStorage.getItem('token');
const userData = localStorage.getItem('userData');
-
+
if (token && userData) {
try {
const parsedUserData = JSON.parse(userData);
@@ -29,6 +32,13 @@ function App() {
localStorage.removeItem('userData');
}
}
+
+ // ✅ Initialize AOS
+ AOS.init({
+ duration: 1000, // animation duration in ms
+ once: true, // whether animation happens only once
+ easing: "ease-in-out", // default easing
+ });
}, [dispatch]);
return (
@@ -44,7 +54,7 @@ function App() {
{!hideLayout && }
-
+
);
}
diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
index 3f1169a..db522d8 100644
--- a/client/src/pages/About.jsx
+++ b/client/src/pages/About.jsx
@@ -118,14 +118,13 @@ const About = () => {
{/* Main Content */}
{/* Hero Section */}
-
+
@@ -158,12 +157,10 @@ const About = () => {
{stats.map((stat, index) => (
@@ -197,14 +194,10 @@ const About = () => {
{services.map((service, index) => (
setActiveCard(service.id)}
- onMouseLeave={() => setActiveCard(null)}
+ className="group relative overflow-hidden rounded-2xl transition-all duration-700 hover:scale-105"
+ data-aos={index % 2 === 0 ? "fade-right" : "fade-left"}
+ data-aos-delay={index * 200}
+ data-aos-duration="1000"
>
{/* Card Background */}
{
{service.features.map((feature, featureIndex) => (
@@ -267,8 +257,9 @@ const About = () => {
+
{/* CTA Section */}
-
+
diff --git a/client/src/pages/Blog.jsx b/client/src/pages/Blog.jsx
index 158d366..1e50bf5 100644
--- a/client/src/pages/Blog.jsx
+++ b/client/src/pages/Blog.jsx
@@ -220,7 +220,7 @@ const Blog = () => {
);
return (
-
+
{/* Animated Background */}
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 00ad3f9..c8322b5 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -20,6 +20,8 @@ import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import { useNavigate } from "react-router-dom";
+import AOS from "aos";
+import "aos/dist/aos.css";
const HomePage = () => {
const navigate = useNavigate(); // ✅ Add this if missing
@@ -178,7 +180,7 @@ const HomePage = () => {
{/* Mouse Follower Effect */}
{/* Hero Section */}
-
+
@@ -287,7 +289,7 @@ const HomePage = () => {
{/* Services Section */}
-
+
@@ -303,6 +305,12 @@ const HomePage = () => {
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
+ onSlideChange={() => AOS.refresh()}
+ onSwiper={(swiper) => {
+ swiper.on("slideChangeTransitionEnd", () => {
+ AOS.refreshHard(); // force re-check
+ });
+ }}
coverflowEffect={{
rotate: 30,
stretch: 0,
@@ -320,8 +328,15 @@ const HomePage = () => {
className="w-full max-w-6xl mx-auto"
>
{services.map((service, index) => (
-
-
+
+
{
{service.icon}
-
+
{service.title}
-
+
{service.description}
-
+

{
/>
-
-
-
- {service.icon}
-
- {service.title}
- {service.description}
-
-
- Learn More →
-
-
+
+
+
+ {service.icon}
+
+ {service.title}
+ {service.description}
+
+
+ Learn More →
+
+
+
))}
@@ -377,10 +400,10 @@ const HomePage = () => {
{/* Experience Section */}
-
+
-
+
Creating Magical Childhood Moments
@@ -415,17 +438,29 @@ const HomePage = () => {
{[
- "https://res.cloudinary.com/dbnticsz8/image/upload/v1734936845/Infant%20care%20Compass/rrhakzuhcryo7dewe57i.png",
- "https://res.cloudinary.com/dbnticsz8/image/upload/v1734936923/Infant%20care%20Compass/rx6c2iojkbym0u0nm8ph.png",
- "https://res.cloudinary.com/dbnticsz8/image/upload/v1734937330/Infant%20care%20Compass/ffktzdwhwkarwjhtvmnn.png",
- ].map((src, index) => (
+ {
+ src: "https://res.cloudinary.com/dbnticsz8/image/upload/v1734936845/Infant%20care%20Compass/rrhakzuhcryo7dewe57i.png",
+ aos: "fade-down",
+ },
+ {
+ src: "https://res.cloudinary.com/dbnticsz8/image/upload/v1734936923/Infant%20care%20Compass/rx6c2iojkbym0u0nm8ph.png",
+ aos: "fade-left",
+ },
+ {
+ src: "https://res.cloudinary.com/dbnticsz8/image/upload/v1734937330/Infant%20care%20Compass/ffktzdwhwkarwjhtvmnn.png",
+ aos: "fade-up",
+ },
+ ].map((item, index) => (

@@ -439,9 +474,9 @@ const HomePage = () => {
{/* Demo Section */}
-
+
-
+
See It In Action
@@ -452,7 +487,7 @@ const HomePage = () => {
-
+