contentstack · RohitKini · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025
@@ -35,7 +35,8 @@ export default function BlogPost() {
         onEntryChange(() => fetchData());
     }, []);
 
-    const { post, banner } = getPost;
+    const { post, banner } = getPost; 
+
     return (
         <>
             {blogPost?.seo && blogPost.seo.enable_search_indexing && metaData(blogPost.seo)}

@@ -1,9 +1,10 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
+import Script from "next/script";
 import Header from "@/components/header";
+import Footer from "@/components/footer";
 
 import 'react-loading-skeleton/dist/skeleton.css';
-import Footer from "@/components/footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,24 +20,17 @@ export const viewport: Viewport = {
   width: 'device-width',
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
   return (
     <html lang="en">
       <head>
-        <script
-          src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'
-          integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM'
-          crossOrigin='anonymous'
-          defer
-        />
         <link rel='preconnect' href='https://fonts.gstatic.com' />
         <link
-          href='https://fonts.googleapis.com/css?family=Inter&amp;display=swap'
+          href='https://fonts.googleapis.com/css?family=Inter&display=swap'
           rel='stylesheet'
         />
         <link
@@ -52,30 +46,22 @@ export default async function RootLayout({
           integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC'
           crossOrigin='anonymous'
         />
-        <link
-          rel='stylesheet'
-          href="/styles/globals.css"
-        />
-        <link
-          rel='stylesheet'
-          href="/styles/style.css"
-        />
-        <link
-          rel='stylesheet'
-          href="/styles/third-party.css"
-        />
-
+        <link rel='stylesheet' href="/styles/globals.css" />
+        <link rel='stylesheet' href="/styles/style.css" />
+        <link rel='stylesheet' href="/styles/third-party.css" />
       </head>
-      <body>
-        <>
-          <Header />
-          <main className='mainClass mt-5'>
-            <>
-              {children}
-            </>
-          </main>
-        </>
+      <body className={inter.className}>
+        <Header />
+        <main className='mainClass mt-5'>
+          {children}
+        </main>
         <Footer />
+        <Script
+          src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'
+          integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM'
+          crossOrigin='anonymous'
+          strategy="lazyOnload"
+        />
       </body>
     </html>
   );

@@ -10,8 +10,7 @@ import Skeleton from "react-loading-skeleton";
 
 export default function Home() {
   const entryUrl = usePathname();
-
-  const [getEntry, setEntry] = useState<Page>();
+  const [getEntry, setEntry] = useState<Page | undefined>(undefined);
 
   async function fetchData() {
     try {
@@ -27,8 +26,7 @@ export default function Home() {
     onEntryChange(() => fetchData());
   }, []);
 
-
-  return getEntry ? (
+  return getEntry?.page_components ? (
     <>
       {getEntry.seo && getEntry.seo.enable_search_indexing && metaData(getEntry.seo)}
       <RenderComponents

@@ -22,15 +22,13 @@ export default function ArchiveRelative({ blogs }: BlogListProps) {
   return (
     <>
       {blogs?.map((blog, idx) => (
-        <Link legacyBehavior href={blog.url} key={idx}>
-          <a>
-            <div>
-              <h4 {...blog.$?.title as {}}>{blog.title}</h4>
-              {typeof blog.body === 'string' && (
-                <div {...blog.$?.body as {}}>{parse(blog.body.slice(0, 80))}</div>
-              )}
-            </div>
-          </a>
+        <Link href={blog.url} key={idx}>
+          <div>
+            <h4 {...blog.$?.title as {}}>{blog.title}</h4>
+            {typeof blog.body === 'string' && (
+              <div {...blog.$?.body as {}}>{parse(blog.body.slice(0, 80))}</div>
+            )}
+          </div>
         </Link>
       ))}
     </>

@@ -37,23 +37,19 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
   return (
     <div className='blog-list'>
       {bloglist.featured_image && (
-        <Link legacyBehavior href={bloglist.url}>
-          <a>
-            <img
-              className='blog-list-img'
-              src={bloglist.featured_image.url}
-              alt='blog img'
-              {...bloglist.featured_image.$?.url as {}}
-            />
-          </a>
+        <Link href={bloglist.url}>
+          <img
+            className='blog-list-img'
+            src={bloglist.featured_image.url}
+            alt='blog img'
+            {...bloglist.featured_image.$?.url as {}}
+          />
         </Link>
       )}
       <div className='blog-content'>
         {bloglist.title && (
-          <Link legacyBehavior href={bloglist.url}>
-            <a>
-              <h3 {...bloglist.$?.title}>{bloglist.title}</h3>
-            </a>
+          <Link href={bloglist.url}>
+            <h3 {...bloglist.$?.title}>{bloglist.title}</h3>
           </Link>
         )}
         <p>
@@ -67,10 +63,8 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
         </p>
         <div {...bloglist.$?.body as {}}>{parse(body)}</div>
         {bloglist.url ? (
-          <Link legacyBehavior href={bloglist.url}>
-            <a>
-              <span>{'Read more -->'}</span>
-            </a>
+          <Link href={bloglist.url}>
+            <span>{'Read more -->'}</span>
           </Link>
         ) : (
           ''

@@ -48,13 +48,12 @@ export default function BlogSection(props: FeaturedBlogProps) {
           <h2 {...fromBlog.$?.title_h2 as {}}>{fromBlog.title_h2}</h2>
         )}
         {fromBlog.view_articles && (
-          <Link legacyBehavior href={fromBlog.view_articles.href}>
-            <a
-              className='btn secondary-btn article-btn'
-              {...fromBlog.view_articles.$?.title}
-            >
-              {fromBlog.view_articles.title}
-            </a>
+          <Link
+            href={fromBlog.view_articles.href}
+            className='btn secondary-btn article-btn'
+            {...fromBlog.view_articles.$?.title}
+          >
+            {fromBlog.view_articles.title}
           </Link>
         )}
       </div>
@@ -75,8 +74,8 @@ export default function BlogSection(props: FeaturedBlogProps) {
                 <div>{parse(blog.body.slice(0, 300))}</div>
               )}
               {blog.url && (
-                <Link legacyBehavior href={blog.url} passHref>
-                  <a className='blogpost-readmore'>{'Read More -->'}</a>
+                <Link href={blog.url} className='blogpost-readmore'>
+                  {'Read More -->'}
                 </Link>
               )}
             </div>

@@ -27,8 +27,8 @@ export default function CardSection({ cards }: CardProps) {
           {card.description && <p {...card.$?.description as {}}>{card.description}</p>}
           <div className='card-cta'>
             {card.call_to_action.title && card.call_to_action.href && (
-              <Link legacyBehavior href={card.call_to_action.href}>
-                <a className='btn primary-btn'>{card.call_to_action.title}</a>
+              <Link href={card.call_to_action.href} className='btn primary-btn'>
+                {card.call_to_action.title}
               </Link>
             )}
           </div>

@@ -68,16 +68,14 @@ export default function Footer() {
       <div className='max-width footer-div'>
         <div className='col-quarter'>
           {footerData && footerData.logo ? (
-            <Link legacyBehavior href='/'>
-              <a className='logo-tag'>
-                <img
-                  src={footerData.logo.url}
-                  alt={footerData.title}
-                  title={footerData.title}
-                  {...(footer?.logo?.$?.url as {})}
-                  className='logo footer-logo'
-                />
-              </a>
+            <Link href='/' className='logo-tag'>
+              <img
+                src={footerData.logo.url}
+                alt={footerData.title}
+                title={footerData.title}
+                {...(footer?.logo?.$?.url as {})}
+                className='logo footer-logo'
+              />
             </Link>
           ) : (
             <Skeleton width={150} />

@@ -83,16 +83,14 @@ export default function Header() {
       <div className='max-width header-div'>
         <div className='wrapper-logo'>
           {headerData ? (
-            <Link legacyBehavior href='/'>
-              <a className='logo-tag' title='Contentstack'>
-                <img
-                  className='logo'
-                  src={headerData.logo.url}
-                  alt={headerData.title}
-                  title={headerData.title}
-                  {...headerData.logo.$?.url as {}}
-                />
-              </a>
+            <Link href='/' className='logo-tag' title='Contentstack'>
+              <img
+                className='logo'
+                src={headerData.logo.url}
+                alt={headerData.title}
+                title={headerData.title}
+                {...headerData.logo.$?.url as {}}
+              />
             </Link>
           ) : (
             <Skeleton width={150} />
@@ -114,8 +112,8 @@ export default function Header() {
                     className='nav-li'
                     {...list.page_reference[0].$?.url as {}}
                   >
-                    <Link legacyBehavior href={list.page_reference[0].url}>
-                      <a className={className}>{list.label}</a>
+                    <Link href={list.page_reference[0].url} className={className}>
+                      {list.label}
                     </Link>
                   </li>
                 );

@@ -57,10 +57,8 @@ export default function HeroBanner(props: BannerProps) {
           ''
         )}
         {banner.call_to_action.title && banner.call_to_action.href ? (
-          <Link legacyBehavior href={banner?.call_to_action.href}>
-            <a className='btn tertiary-btn' {...banner.call_to_action.$?.title}>
-              {banner?.call_to_action.title}
-            </a>
+          <Link href={banner?.call_to_action.href} className='btn tertiary-btn' {...banner.call_to_action.$?.title}>
+            {banner?.call_to_action.title}
           </Link>
         ) : (
           ''

@@ -32,13 +32,12 @@ export default function Section({ section }: {section : SectionProps}) {
           <p {...section.$?.description as {}}>{section.description}</p>
         )}
         {section.call_to_action.title && section.call_to_action.href ? (
-          <Link legacyBehavior href={section.call_to_action.href}>
-            <a
-              className='btn secondary-btn'
-              {...section.call_to_action.$?.title}
-            >
-              {section.call_to_action.title}
-            </a>
+          <Link
+            href={section.call_to_action.href}
+            className='btn secondary-btn'
+            {...section.call_to_action.$?.title}
+          >
+            {section.call_to_action.title}
           </Link>
         ) : (
           ''

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, MutableRefObject } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 
 type TooltipProps = {
-  children?: JSX.Element|JSX.Element[];
+  children?: React.ReactNode;
   content: string;
   direction: string;
   status: number;
@@ -10,28 +10,44 @@ type TooltipProps = {
 }
 
 const Tooltip = (props: TooltipProps) => {
-  let timeout: any;
-  const toolTipRef = useRef() as MutableRefObject <HTMLDivElement>;
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const toolTipRef = useRef<HTMLDivElement>(null);
 
-  const showTip = () => {
-    timeout = setTimeout(() => {
-      toolTipRef.current.style.display = "block";
+  const showTip = useCallback(() => {
+    timeoutRef.current = setTimeout(() => {
+      if (toolTipRef.current) {
+        toolTipRef.current.style.display = "block";
+      }
     }, props.delay || 400);
-  };
+  }, [props.delay]);
 
-  const hideTip = () => {
-    clearInterval(timeout);
-    toolTipRef.current.style.display = "none";
-  };
+  const hideTip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (toolTipRef.current) {
+      toolTipRef.current.style.display = "none";
+    }
+  }, []);
 
   useEffect(() => {
     if (props.dynamic) {
-      props.status !== 0 && (toolTipRef.current.style.display = "block");
-      timeout = setTimeout(() => {
-        toolTipRef.current.style.display = "none";
+      if (props.status !== 0 && toolTipRef.current) {
+        toolTipRef.current.style.display = "block";
+      }
+      timeoutRef.current = setTimeout(() => {
+        if (toolTipRef.current) {
+          toolTipRef.current.style.display = "none";
+        }
       }, props.delay || 400);
     }
-  }, [props.content]);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [props.content, props.dynamic, props.status, props.delay]);
 
   return (
     <div