Skip to content

Commit

Permalink
refactor: make ui design change
Browse files Browse the repository at this point in the history
Signed-off-by: Sarthak160 <[email protected]>
  • Loading branch information
Sarthak160 committed Dec 12, 2024
1 parent 27c7369 commit 20775ee
Showing 1 changed file with 44 additions and 44 deletions.
88 changes: 44 additions & 44 deletions components/hero-post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,56 +19,56 @@ export default function HeroPost({
slug,
isCommunity,
}) {
const basePath = isCommunity ? "/community" : "/technology";

const cleanExcerpt = excerpt.replace("Table of Contents", "");
const basePath = isCommunity ? "/community" : "/technology";
excerpt = excerpt.replace("Table of Contents", "");

console.log("cleanExcerpt", cleanExcerpt);

return (
<section>
<div className="relative bg-gray-100 border border-gray-300 px-8 py-8 rounded-md lg:grid lg:grid-cols-2 lg:gap-x-8 mb-20 md:mb-28 content-center lg:group transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)]">
{/* Banner */}
<div className="absolute top-0 left-0 bg-orange-200 text-orange-800 text-xs font-bold py-1 px-3 rounded-br-md shadow-md">
Latest Blog
</div>
<section>
<div className="relative bg-gray-100 border border-gray-300 px-8 py-8 rounded-md lg:grid lg:grid-cols-2 lg:gap-x-8 mb-20 md:mb-28 content-center lg:group transition-all duration-500 hover:border-orange-500 hover:shadow-[0_0_10px_2px_rgba(255,165,0,0.6)] overflow-hidden">
{/* Banner */}
<div className="absolute top-0 right-0 transform rotate-45 translate-x-[25%] translate-y-[90%] bg-orange-200 text-orange-800 text-[10px] font-bold py-0.5 w-[100px] flex justify-center items-center shadow-md">
Latest Blog
</div>

{/* Content */}
<div className="mb-8 lg:mb-0 ">
{coverImage && (
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
/>
)}
</div>
<div className="">
<div>
<h3 className="heading1 text-4xl lg:text-6xl font-bold leading-none">
<Link
href={`${basePath}/${slug}`}
className="hero-title-link title-link bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
dangerouslySetInnerHTML={{ __html: title }}
></Link>
</h3>
</div>
<div className="flex items-center gap-4">
<Avatar author={author ? author : "Anonymous"} />
<div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
<div className="text-md mb-4 pt-4">
<Date dateString={date} />
</div>
</div>
<div>
<div
className="body xl:text-md text-md leading-relaxed mb-4 text-slate-600"
dangerouslySetInnerHTML={{ __html: cleanExcerpt }}
/>
</div>
{/* Content */}
<div className="mb-8 lg:mb-0 ">
{coverImage && (
<CoverImage
title={title}
coverImage={coverImage}
slug={slug}
isCommunity={isCommunity}
/>
)}
</div>
<div className="">
<div>
<h3 className="heading1 text-4xl lg:text-6xl font-bold leading-none">
<Link
href={`${basePath}/${slug}`}
className="hero-title-link title-link bg-gradient-to-r from-orange-200 to-orange-100 bg-[length:0px_10px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500 hover:bg-[length:100%_10px] group-hover:bg-[length:100%_10px]"
dangerouslySetInnerHTML={{ __html: title }}
></Link>
</h3>
</div>
<div className="flex items-center gap-4">
<Avatar author={author ? author : "Anonymous"} />
<div className="divider bg-orange-700 h-1 w-1 rounded-full"></div>
<div className="text-md mb-4 pt-4">
<Date dateString={date} />
</div>
</div>
</section>
<div>
<div
className="body xl:text-md text-md leading-relaxed mb-4 text-slate-600"
dangerouslySetInnerHTML={{ __html: excerpt }}
/>
</div>
</div>
</div>
</section>

);
}

0 comments on commit 20775ee

Please sign in to comment.