refactor(multi): updated buttons for blog-detail page & layout as per design

Author: Vatsal6288

src/components/blocks/hero-section/hero-section.tsx

@@ -24,7 +24,7 @@ const HeroSection = ({ blogData }: { blogData: BlogPost[] }) => {
             Learn how to design, develop, launch, and grow digital products through practical knowledge and proven
             frameworks.
           </p>
-          <form className='gap-3 py-1 max-sm:space-y-2 sm:flex sm:flex-row md:w-sm'>
+          <form className='gap-3 py-1 max-sm:w-full max-sm:space-y-2 sm:flex sm:flex-row md:w-sm'>
             <Input type='email' placeholder='Your email' className='bg-background h-10 flex-1 text-base' />
             <Button size='lg' className='text-base max-sm:w-full' asChild type='submit'>
               <a href='#'>Subscribe</a>
@@ -34,18 +34,18 @@ const HeroSection = ({ blogData }: { blogData: BlogPost[] }) => {
 
         <div className='grid grid-cols-1 gap-6 sm:grid-cols-2'>
           {featuredPosts.map((item, index) => (
-            <a href={`/blog/${item.slug}`} key={`${item.author}-${index}`} className='group'>
-              <Card className='cursor-pointer py-0 shadow-none'>
+            <div key={`${item.author}-${index}`} className='group'>
+              <Card className='cursor-default py-0 shadow-none'>
                 <CardContent className='grid grid-cols-1 px-0 xl:grid-cols-2'>
                   <div className='p-6'>
-                    <div className='h-59.5 w-full overflow-hidden rounded-lg'>
+                    <a href={`/blog/${item.slug}`} className='block h-59.5 w-full overflow-hidden rounded-lg'>
                       <img
                         src={item.imageUrl}
                         alt={item.imageAlt}
                         className='w-full object-cover transition-transform duration-300 group-hover:scale-105'
                         loading='lazy'
                       />
-                    </div>
+                    </a>
                   </div>
                   <div className='flex flex-col justify-center gap-3 p-6'>
                     <div className='flex items-center gap-1.5 py-1'>
@@ -58,27 +58,33 @@ const HeroSection = ({ blogData }: { blogData: BlogPost[] }) => {
                         onClick={e => {
                           e.preventDefault()
                           e.stopPropagation()
+                          window.location.href = `/#category-${item.category}`
                         }}
                       >
                         {item.category}
                       </Badge>
                     </div>
-                    <h3 className='text-xl font-medium'>{item.title}</h3>
+                    <a href={`/blog/${item.slug}`}>
+                      <h3 className='text-xl font-medium'>{item.title}</h3>
+                    </a>
 
                     <p className='text-muted-foreground'>{item.description}</p>
                     <div className='flex w-full items-center justify-between gap-1 py-1'>
                       <span className='cursor-pointer text-sm font-medium'>{item.author}</span>
                       <Button
                         size='icon'
                         className='group-hover:bg-primary! bg-background text-foreground hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground border group-hover:border-transparent hover:border-transparent'
+                        asChild
                       >
-                        <ArrowUpRightIcon />
+                        <a href={`/blog/${item.slug}`}>
+                          <ArrowUpRightIcon />
+                        </a>
                       </Button>
                     </div>
                   </div>
                 </CardContent>
               </Card>
-            </a>
+            </div>
           ))}
         </div>
       </div>

src/components/layout/footer.tsx

@@ -14,28 +14,37 @@ const Footer = () => {
           </div>
         </a>
         <div className='flex flex-wrap items-center justify-center gap-x-3 gap-y-2 whitespace-nowrap sm:gap-5'>
-          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
+          <a
+            href='#'
+            className='text-muted-foreground hover:text-foreground opacity-80 transition-opacity duration-300 hover:opacity-100'
+          >
             Support
           </a>
-          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
+          <a
+            href='#'
+            className='text-muted-foreground hover:text-foreground opacity-80 transition-opacity duration-300 hover:opacity-100'
+          >
             Terms & Conditions
           </a>
-          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
+          <a
+            href='#'
+            className='text-muted-foreground hover:text-foreground opacity-80 transition-opacity duration-300 hover:opacity-100'
+          >
             Privacy Policy
           </a>
         </div>
 
         <div className='flex items-center gap-4'>
-          <a href='#'>
+          <a href='#' className='text-muted-foreground hover:text-foreground'>
             <FacebookIcon className='size-5' />
           </a>
-          <a href='#'>
+          <a href='#' className='text-muted-foreground hover:text-foreground'>
             <InstagramIcon className='size-5' />
           </a>
-          <a href='#'>
+          <a href='#' className='text-muted-foreground hover:text-foreground'>
             <TwitterIcon className='size-5' />
           </a>
-          <a href='#'>
+          <a href='#' className='text-muted-foreground hover:text-foreground'>
             <YoutubeIcon className='size-5' />
           </a>
         </div>

src/components/layout/header.tsx

@@ -40,6 +40,13 @@ const Header = ({ navigationData, className }: HeaderProps) => {
 
   useEffect(() => {
     const handleScroll = () => {
+      // Only handle scroll-based active section on the home page
+      const path = window.location.pathname
+
+      if (path !== '/') {
+        return
+      }
+
       const sections = document.querySelectorAll('section[id]')
       const scrollPosition = window.scrollY + window.innerHeight / 2
 
@@ -76,7 +83,9 @@ const Header = ({ navigationData, className }: HeaderProps) => {
       if (path === '/' || path === '/#home') {
         setActiveSection('home')
       } else if (path.startsWith('/blog/')) {
-        setActiveSection('blog')
+        setActiveSection('') // Don't show any active state on blog post pages
+      } else if (path.startsWith('/contact')) {
+        setActiveSection('') // Don't show any active state on contact page
       } else {
         setActiveSection('') // Default case for other routes
       }

src/components/ui/navigation-menu.tsx

@@ -44,7 +44,7 @@ function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof
 }
 
 const navigationMenuTriggerStyle = cva(
-  'group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50'
+  'group bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50'
 )
 
 function NavigationMenuTrigger({
@@ -104,7 +104,7 @@ function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof
     <NavigationMenuPrimitive.Link
       data-slot='navigation-menu-link'
       className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

src/content/blog/ai-driven-workflows.mdx

@@ -8,7 +8,7 @@ imageAlt: 'AI development tools'
 pubDate: 'April 20, 2025'
 author: 'Allen Reilly'
 avatarUrl: '/images/avatars/1.webp'
-category: 'UI'
+category: 'Design'
 readTime: 6
 featured: true
 ---

src/content/blog/scalable-code.mdx

@@ -6,7 +6,7 @@ description: 'Architecture practices for building maintainable code that adapts
 imageUrl: '/images/blog-post/post-8.webp'
 imageAlt: 'Code architecture diagram'
 pubDate: 'March 03, 2025'
-category: 'Coding'
+category: 'Product'
 author: 'Sara Wilkerson'
 avatarUrl: '/images/avatars/8.webp'
 readTime: 8

src/pages/blog/[slug].astro

@@ -159,18 +159,23 @@ const schema = {
             <!-- Post Navigation -->
             <div class='flex w-full justify-between pt-8'>
               {
-                previousPost && (
+                previousPost ? (
                   <a href={`/blog/${previousPost.id}`}>
                     <Button className='rounded-xl' variant='outline'>
                       <ChevronLeftIcon className='size-4' />
                       Previous Post
                     </Button>
                   </a>
+                ) : (
+                  <Button className='rounded-xl' variant='outline' disabled>
+                    <ChevronLeftIcon className='size-4' />
+                    Previous Post
+                  </Button>
                 )
               }
 
               {
-                nextPost && (
+                nextPost ? (
                   <a class='ms-auto' href={`/blog/${nextPost.id}`}>
                     <Button
                       className='rounded-xl bg-sky-600/10 text-sky-600 hover:bg-sky-600/20 focus-visible:ring-sky-600/20 dark:bg-sky-400/10 dark:text-sky-400 dark:hover:bg-sky-400/20 dark:focus-visible:ring-sky-400/40'
@@ -180,6 +185,15 @@ const schema = {
                       <ChevronRightIcon className='size-4' />
                     </Button>
                   </a>
+                ) : (
+                  <Button
+                    className='ml-auto rounded-xl bg-sky-600/10 text-sky-600 hover:bg-sky-600/20 focus-visible:ring-sky-600/20 dark:bg-sky-400/10 dark:text-sky-400 dark:hover:bg-sky-400/20 dark:focus-visible:ring-sky-400/40'
+                    variant='outline'
+                    disabled
+                  >
+                    Next Post
+                    <ChevronRightIcon className='size-4' />
+                  </Button>
                 )
               }
             </div>