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";
return (
<section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={`${
selectedCategory?.image
? backendUrl + selectedCategory?.image
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
}`}
alt="Category Background"
layout="fill"
objectFit="cover"
quality={100}
priority
/>
</div>
<section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
<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
src={`${
selectedCategory?.image
? backendUrl + selectedCategory?.image
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
}`}
alt="Category Background"
layout="fill"
objectFit="cover"
quality={100}
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.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
>
{selectedCategory?.category_name || fallbackCategoryName}
</motion.h1>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
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
),
}}
/>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-black text-sm md:text-base"
dangerouslySetInnerHTML={{
__html: cleanHTML(
selectedCategory?.descriptions || fallbackDescription
),
}}
/>
</div>
</div>
</div>
</section>
);

75
components/subcategory/SubcategoryHero.jsx
View File

@@ -37,43 +37,46 @@ const SubcategoryHero = ({ params }) => {
const fallbackCategoryName = "Spiritual Essentials";
return (
<section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={`${
selectedCategory?.image_url
? backendUrl + selectedCategory?.image_url
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
}`}
alt="Category Background"
layout="fill"
objectFit="cover"
quality={100}
priority
/>
</div>
<section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex items-center justify-center">
<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
src={`${
selectedCategory?.image_url
? backendUrl + selectedCategory?.image_url
: "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
}`}
alt="Category Background"
layout="fill"
objectFit="cover"
quality={100}
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.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
>
{selectedCategory?.subcategory_name || fallbackCategoryName}
</motion.h1>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
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
),
}}
/>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-black text-sm md:text-base"
dangerouslySetInnerHTML={{
__html: cleanHTML(
selectedCategory?.description || fallbackDescription
),
}}
/>
</div>
</div>
</div>
</section>
);