From a96b8be120a9c3b9c20593f07b8384dde0a29d73 Mon Sep 17 00:00:00 2001 From: Satvika1825 Date: Wed, 8 Oct 2025 21:08:32 +0530 Subject: [PATCH 1/4] modified sliding cards --- Frontend/package-lock.json | 87 ++++- Frontend/package.json | 1 + .../src/Component/Animation/StepProcess.tsx | 309 ++++++------------ 3 files changed, 190 insertions(+), 207 deletions(-) diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index e4da33d..fa99cbe 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -12,6 +12,7 @@ "@fontsource/inter": "^5.2.5", "@fontsource/poppins": "^5.2.5", "@tailwindcss/vite": "^4.0.14", + "@types/react-router-dom": "^5.3.3", "axios": "^1.8.4", "dotenv": "^16.5.0", "framer-motion": "^12.6.3", @@ -401,6 +402,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -417,6 +419,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -433,6 +436,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -449,6 +453,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -465,6 +470,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -481,6 +487,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -497,6 +504,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -513,6 +521,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -529,6 +538,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -545,6 +555,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -561,6 +572,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -577,6 +589,7 @@ "cpu": [ "loong64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -593,6 +606,7 @@ "cpu": [ "mips64el" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -609,6 +623,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -625,6 +640,7 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -641,6 +657,7 @@ "cpu": [ "s390x" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -657,6 +674,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -673,6 +691,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -689,6 +708,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -705,6 +725,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -721,6 +742,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -737,6 +759,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -753,6 +776,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -769,6 +793,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -785,6 +810,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1130,6 +1156,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1143,6 +1170,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1156,6 +1184,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1169,6 +1198,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1182,6 +1212,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1195,6 +1226,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1208,6 +1240,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1221,6 +1254,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1234,6 +1268,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1247,6 +1282,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1260,6 +1296,7 @@ "cpu": [ "loong64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1273,6 +1310,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1286,6 +1324,7 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1299,6 +1338,7 @@ "cpu": [ "s390x" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1312,6 +1352,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1325,6 +1366,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1338,6 +1380,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1351,6 +1394,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1364,6 +1408,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1643,6 +1688,13 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "license": "MIT" }, "node_modules/@types/json-schema": { @@ -1656,7 +1708,6 @@ "version": "19.0.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz", "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==", - "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.0.2" @@ -1672,6 +1723,27 @@ "@types/react": "^19.0.0" } }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.26.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.26.1.tgz", @@ -2339,6 +2411,7 @@ "version": "0.25.1", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz", "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==", + "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -2768,6 +2841,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -3489,6 +3563,7 @@ "version": "3.3.10", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.10.tgz", "integrity": "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==", + "dev": true, "funding": [ { "type": "github", @@ -3604,6 +3679,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -3623,6 +3699,7 @@ "version": "8.5.3", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", + "dev": true, "funding": [ { "type": "opencollective", @@ -3797,6 +3874,7 @@ "version": "4.36.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.36.0.tgz", "integrity": "sha512-zwATAXNQxUcd40zgtQG0ZafcRK4g004WtEl7kbuhTWPvf07PsfohXl39jVUvPF7jvNAIkKPQ2XrsDlWuxBd++Q==", + "dev": true, "license": "MIT", "dependencies": { "@types/estree": "1.0.6" @@ -3904,6 +3982,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -3992,6 +4071,7 @@ "version": "0.2.14", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==", + "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.4.4", @@ -4008,6 +4088,7 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, "license": "MIT", "engines": { "node": ">=12.0.0" @@ -4025,6 +4106,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -4169,6 +4251,7 @@ "version": "6.3.6", "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz", "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==", + "dev": true, "license": "MIT", "dependencies": { "esbuild": "^0.25.0", @@ -4243,6 +4326,7 @@ "version": "6.5.0", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, "license": "MIT", "engines": { "node": ">=12.0.0" @@ -4260,6 +4344,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, "license": "MIT", "engines": { "node": ">=12" diff --git a/Frontend/package.json b/Frontend/package.json index 99d51ae..c12e6b5 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -14,6 +14,7 @@ "@fontsource/inter": "^5.2.5", "@fontsource/poppins": "^5.2.5", "@tailwindcss/vite": "^4.0.14", + "@types/react-router-dom": "^5.3.3", "axios": "^1.8.4", "dotenv": "^16.5.0", "framer-motion": "^12.6.3", diff --git a/Frontend/src/Component/Animation/StepProcess.tsx b/Frontend/src/Component/Animation/StepProcess.tsx index fe6ba43..7604b8d 100644 --- a/Frontend/src/Component/Animation/StepProcess.tsx +++ b/Frontend/src/Component/Animation/StepProcess.tsx @@ -1,238 +1,135 @@ -import { useEffect, useState, useRef } from 'react'; -import { useNavigate } from 'react-router'; -import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react'; -import disease_data from '../Ayufit/disease_data.json'; +import { useEffect, useState } from "react"; +import { useNavigate } from "react-router"; +import disease_data from "../Ayufit/disease_data.json"; export default function StepProcess() { + const [current, setCurrent] = useState(0); const [diseases, setDiseases] = useState([]); - const [currentIndex, setCurrentIndex] = useState(0); - const [cardsPerView, setCardsPerView] = useState(3); const navigate = useNavigate(); - const cardsContainerRef = useRef(null); useEffect(() => { - setDiseases(disease_data.slice(0, 12)); + const sliced = disease_data.slice(0, 12); + setDiseases(sliced); - const handleResize = () => { - const width = window.innerWidth; - if (width < 640) { - setCardsPerView(1); - } else if (width < 768) { - setCardsPerView(2); - } else if (width < 1024) { - setCardsPerView(3); - } else { - setCardsPerView(4); - } - }; + // Start from center of the sliced array + setCurrent(Math.floor(sliced.length / 2)); - handleResize(); - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); + // Auto-slide every 3 seconds + const interval = setInterval(() => { + setCurrent((prev) => (prev + 1) % sliced.length); + }, 3000); + + return () => clearInterval(interval); }, []); const handleCardClick = (disease) => { - navigate(`/fitness/${encodeURIComponent(disease.alt_text || disease.disease_name)}`); - }; - - const nextSlide = () => { - setCurrentIndex(prev => - prev + cardsPerView >= diseases.length ? 0 : prev + 1 + navigate( + `/fitness/${encodeURIComponent( + disease.alt_text || disease.disease_name + )}` ); }; - const prevSlide = () => { - setCurrentIndex(prev => - prev <= 0 ? Math.max(0, diseases.length - cardsPerView) : prev - 1 - ); - }; - - const goToSlide = (index) => { - setCurrentIndex(index); - }; - - const maxStartIndex = Math.max(0, diseases.length - cardsPerView); - return ( -
-
-
-
-
-
- -
-
-

- Explore Ayurvedic - - Remedies - -

-
- -
- +
+ {/* Heading */} +

+ Explore Ayurvedic{" "} + + Remedies + +

+ + {/* Carousel Container */} +
+
+ {diseases.map((disease, index) => { + const position = (index - current + diseases.length) % diseases.length; + + let transform = ""; + let opacity = 0; + let scale = 0.9; + + if (position === 0) { + transform = "translateX(0)"; + opacity = 1; + scale = 1; + } else if (position === 1) { + transform = "translateX(300px)"; + opacity = 0.6; + scale = 0.9; + } else if (position === diseases.length - 1) { + transform = "translateX(-300px)"; + opacity = 0.6; + scale = 0.9; + } else { + transform = `translateX(${position > 1 ? "600px" : "-600px"})`; + opacity = 0; + } - - -
-
- {diseases.map((disease, idx) => ( + return ( +
handleCardClick(disease)} + className="bg-white rounded-2xl shadow-lg hover:shadow-2xl cursor-pointer w-[460px] md:w-[500px] h-[280px] md:h-[320px] overflow-hidden flex flex-col border border-amber-100 transition-all" > -
handleCardClick(disease)} - className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer overflow-hidden border border-gray-100 hover:border-amber-200 transform hover:-translate-y-2" - > -
-
- {disease.alt_text { - e.target.style.opacity = '1'; - }} - /> - -
- -
-
- -
-
-
- -
- - Natural Remedy - -
+
+ {disease.alt_text +
+ + Natural Remedy +
+
-
-

- {disease.alt_text || 'Ayurvedic Treatment'} +
+
+

+ {disease.alt_text || "Ayurvedic Treatment"}

- -

- {disease.disease_name || 'Traditional natural healing approach for better health'} +

+ {disease.disease_name || + "Discover holistic healing with natural Ayurvedic treatments for a balanced lifestyle."}

- - {disease.symptoms?.length > 0 && ( -
- {disease.symptoms.slice(0, 2).map((symptom, i) => ( - - {symptom.length > 12 ? symptom.substring(0, 12) + '...' : symptom} - - ))} -
- )} - -
- - Learn More - - -
+

- ))} -
- -
-
- -
- {Array.from({ length: Math.ceil(diseases.length / cardsPerView) }, (_, idx) => { - const slideIndex = idx * cardsPerView; - return ( -
); })}
- + {/* Dots */} +
+ {diseases.map((_, idx) => ( +
); -} \ No newline at end of file +} From 25a56ae9d2dcfae6e2e1d0c9b1df6b362d66a8c3 Mon Sep 17 00:00:00 2001 From: Satvika1825 Date: Thu, 9 Oct 2025 13:56:03 +0530 Subject: [PATCH 2/4] added sliding to the cards in the explore ayurvedic remedies section and added 2 more cards --- .../src/Component/Animation/StepProcess.tsx | 158 +++++++++++------- Frontend/src/Component/Headers/Nav.tsx | 2 +- 2 files changed, 94 insertions(+), 66 deletions(-) diff --git a/Frontend/src/Component/Animation/StepProcess.tsx b/Frontend/src/Component/Animation/StepProcess.tsx index 7604b8d..0a81cef 100644 --- a/Frontend/src/Component/Animation/StepProcess.tsx +++ b/Frontend/src/Component/Animation/StepProcess.tsx @@ -11,7 +11,7 @@ export default function StepProcess() { const sliced = disease_data.slice(0, 12); setDiseases(sliced); - // Start from center of the sliced array + // Start from the center setCurrent(Math.floor(sliced.length / 2)); // Auto-slide every 3 seconds @@ -31,7 +31,7 @@ export default function StepProcess() { }; return ( -
+
{/* Heading */}

Explore Ayurvedic{" "} @@ -41,79 +41,107 @@ export default function StepProcess() {

{/* Carousel Container */} -
-
- {diseases.map((disease, index) => { - const position = (index - current + diseases.length) % diseases.length; +
+ {diseases.map((disease, index) => { + const position = (index - current + diseases.length) % diseases.length; - let transform = ""; - let opacity = 0; - let scale = 0.9; + let transform = ""; + let opacity = 0; + let scale = 0.9; + let filter = "none"; - if (position === 0) { - transform = "translateX(0)"; - opacity = 1; - scale = 1; - } else if (position === 1) { - transform = "translateX(300px)"; - opacity = 0.6; - scale = 0.9; - } else if (position === diseases.length - 1) { - transform = "translateX(-300px)"; - opacity = 0.6; - scale = 0.9; - } else { - transform = `translateX(${position > 1 ? "600px" : "-600px"})`; - opacity = 0; - } + // Center Card + if (position === 0) { + transform = "translateX(0)"; + opacity = 1; + scale = 1; + filter = "none"; + } + // Immediate Right + else if (position === 1) { + transform = "translateX(300px)"; + opacity = 0.7; + scale = 0.9; + filter = "blur(1px)"; + } + // Immediate Left + else if (position === diseases.length - 1) { + transform = "translateX(-300px)"; + opacity = 0.7; + scale = 0.9; + filter = "blur(1px)"; + } + // Far Right (+2) + else if (position === 2) { + transform = "translateX(550px)"; + opacity = 0.4; + scale = 0.8; + filter = "blur(3px)"; + } + // Far Left (-2) + else if (position === diseases.length - 2) { + transform = "translateX(-550px)"; + opacity = 0.4; + scale = 0.8; + filter = "blur(3px)"; + } + // Hidden cards + else { + transform = "translateX(0)"; + opacity = 0; + scale = 0.7; + filter = "blur(5px)"; + } - return ( + return ( +
handleCardClick(disease)} + className="bg-white rounded-2xl shadow-lg hover:shadow-2xl cursor-pointer w-[460px] md:w-[500px] h-[300px] md:h-[320px] overflow-hidden flex flex-col border border-amber-100 transition-all" > -
handleCardClick(disease)} - className="bg-white rounded-2xl shadow-lg hover:shadow-2xl cursor-pointer w-[460px] md:w-[500px] h-[280px] md:h-[320px] overflow-hidden flex flex-col border border-amber-100 transition-all" - > -
- {disease.alt_text -
- - Natural Remedy - -
+ {/* Image Section */} +
+ {disease.alt_text +
+ + Natural Remedy +
+
-
-
-

- {disease.alt_text || "Ayurvedic Treatment"} -

-

- {disease.disease_name || - "Discover holistic healing with natural Ayurvedic treatments for a balanced lifestyle."} -

-
- + {/* Text Section */} +
+
+

+ {disease.alt_text || "Ayurvedic Treatment"} +

+

+ {disease.disease_name || + "Discover holistic healing with natural Ayurvedic treatments for a balanced lifestyle."} +

+
- ); - })} -
+
+ ); + })}
{/* Dots */} diff --git a/Frontend/src/Component/Headers/Nav.tsx b/Frontend/src/Component/Headers/Nav.tsx index 5fde710..1c797c1 100644 --- a/Frontend/src/Component/Headers/Nav.tsx +++ b/Frontend/src/Component/Headers/Nav.tsx @@ -10,7 +10,7 @@ function Nav() { const navigate = useNavigate(); return ( -