leadstocompany/rudarksh-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update the hero section of category and subcategory

Browse Source
This commit is contained in:
Tariq Jamal A
2025-05-15 17:56:07 +05:30
parent 6b0f177858
commit 3344ae0fea
2 changed files with 78 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/siddha-mala/categoryHero.jsx
View File

@@ -25,8 +25,10 @@ const CategoryHero = ({ params }) => {
const fallbackCategoryName = "Spiritual Essentials"; const fallbackCategoryName = "Spiritual Essentials";
return ( return (
<section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden"> <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
<div className="absolute inset-0 z-0"> <div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
<Image <Image
src={`${ src={`${
selectedCategory?.image selectedCategory?.image
@@ -40,13 +42,12 @@ const CategoryHero = ({ params }) => {
priority priority
/> />
</div> </div>
<div className="text-start flex justify-start flex-col h-full">
<div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
<motion.h1 <motion.h1
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg" className="text-2xl md:text-3xl font-bold text-black mb-4"
> >
{selectedCategory?.category_name || fallbackCategoryName} {selectedCategory?.category_name || fallbackCategoryName}
</motion.h1> </motion.h1>
@@ -55,7 +56,7 @@ const CategoryHero = ({ params }) => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
className="text-lg md:text-xl text-gray-200 drop-shadow-md" className="text-black text-sm md:text-base"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: cleanHTML( __html: cleanHTML(
selectedCategory?.descriptions || fallbackDescription selectedCategory?.descriptions || fallbackDescription
@@ -63,6 +64,8 @@ const CategoryHero = ({ params }) => {
}} }}
/> />
</div> </div>
</div>
</div>
</section> </section>
); );
}; };

15
components/subcategory/SubcategoryHero.jsx
View File

@@ -37,8 +37,10 @@ const SubcategoryHero = ({ params }) => {
const fallbackCategoryName = "Spiritual Essentials"; const fallbackCategoryName = "Spiritual Essentials";
return ( return (
<section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden"> <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
<div className="absolute inset-0 z-0"> <div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
<Image <Image
src={`${ src={`${
selectedCategory?.image_url selectedCategory?.image_url
@@ -52,13 +54,12 @@ const SubcategoryHero = ({ params }) => {
priority priority
/> />
</div> </div>
<div className="text-start flex justify-start flex-col h-full">
<div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
<motion.h1 <motion.h1
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg" className="text-2xl md:text-3xl font-bold text-black mb-4"
> >
{selectedCategory?.subcategory_name || fallbackCategoryName} {selectedCategory?.subcategory_name || fallbackCategoryName}
</motion.h1> </motion.h1>
@@ -67,7 +68,7 @@ const SubcategoryHero = ({ params }) => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
className="text-lg md:text-xl text-gray-200 drop-shadow-md" className="text-black text-sm md:text-base"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: cleanHTML( __html: cleanHTML(
selectedCategory?.description || fallbackDescription selectedCategory?.description || fallbackDescription
@@ -75,6 +76,8 @@ const SubcategoryHero = ({ params }) => {
}} }}
/> />
</div> </div>
</div>
</div>
</section> </section>
); );
}; };