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

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

@@ -25,43 +25,46 @@ 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">
<Image <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
src={`${ <div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
selectedCategory?.image <Image
? backendUrl + selectedCategory?.image src={`${
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg" selectedCategory?.image
}`} ? backendUrl + selectedCategory?.image
alt="Category Background" : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
layout="fill" }`}
objectFit="cover" alt="Category Background"
quality={100} layout="fill"
priority objectFit="cover"
/> quality={100}
</div> priority
/>
</div>
<div className="text-start flex justify-start flex-col h-full">
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-2xl md:text-3xl font-bold text-black mb-4"
>
{selectedCategory?.category_name || fallbackCategoryName}
</motion.h1>
<div className="relative z-10 text-center px-6 md:px-12 max-w-3xl"> <motion.div
<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.8, delay: 0.2 }}
transition={{ duration: 0.6 }} className="text-black text-sm md:text-base"
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg" dangerouslySetInnerHTML={{
> __html: cleanHTML(
{selectedCategory?.category_name || fallbackCategoryName} selectedCategory?.descriptions || fallbackDescription
</motion.h1> ),
}}
<motion.div />
initial={{ opacity: 0, y: 20 }} </div>
animate={{ opacity: 1, y: 0 }} </div>
transition={{ duration: 0.8, delay: 0.2 }}
className="text-lg md:text-xl text-gray-200 drop-shadow-md"
dangerouslySetInnerHTML={{
__html: cleanHTML(
selectedCategory?.descriptions || fallbackDescription
),
}}
/>
</div> </div>
</section> </section>
); );

75
components/subcategory/SubcategoryHero.jsx
View File

@@ -37,43 +37,46 @@ 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">
<Image <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
src={`${ <div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
selectedCategory?.image_url <Image
? backendUrl + selectedCategory?.image_url src={`${
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg" selectedCategory?.image_url
}`} ? backendUrl + selectedCategory?.image_url
alt="Category Background" : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
layout="fill" }`}
objectFit="cover" alt="Category Background"
quality={100} layout="fill"
priority objectFit="cover"
/> quality={100}
</div> priority
/>
</div>
<div className="text-start flex justify-start flex-col h-full">
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-2xl md:text-3xl font-bold text-black mb-4"
>
{selectedCategory?.subcategory_name || fallbackCategoryName}
</motion.h1>
<div className="relative z-10 text-center px-6 md:px-12 max-w-3xl"> <motion.div
<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.8, delay: 0.2 }}
transition={{ duration: 0.6 }} className="text-black text-sm md:text-base"
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg" dangerouslySetInnerHTML={{
> __html: cleanHTML(
{selectedCategory?.subcategory_name || fallbackCategoryName} selectedCategory?.description || fallbackDescription
</motion.h1> ),
}}
<motion.div />
initial={{ opacity: 0, y: 20 }} </div>
animate={{ opacity: 1, y: 0 }} </div>
transition={{ duration: 0.8, delay: 0.2 }}
className="text-lg md:text-xl text-gray-200 drop-shadow-md"
dangerouslySetInnerHTML={{
__html: cleanHTML(
selectedCategory?.description || fallbackDescription
),
}}
/>
</div> </div>
</section> </section>
); );