update packages, seo andaccessibility improved, and few design polished

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(site)/blog/blog-details/page.tsx

@@ -1,16 +1,22 @@
-import Image from "next/image";
-import SharePost from "@/components/Blog/SharePost";
 import RelatedPost from "@/components/Blog/RelatedPost";
+import SharePost from "@/components/Blog/SharePost";
+import { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Blog Details Page - Solid SaaS Boilerplate",
+  description: "This is Blog details page for Solid Pro",
+  // other metadata
+};
 
 const SingleBlogPage = async () => {
   return (
     <>
-      <title>{`Blog Details - Solid`}</title>
-      <section className="pt-35 lg:pt-45 xl:pt-50 pb-20 lg:pb-25 xl:pb-30">
+      <section className="pb-20 pt-35 lg:pb-25 lg:pt-45 xl:pb-30 xl:pt-50">
         <div className="mx-auto max-w-c-1390 px-4 md:px-8 2xl:px-0">
-          <div className="flex flex-col-reverse lg:flex-row gap-7.5 xl:gap-12.5">
+          <div className="flex flex-col-reverse gap-7.5 lg:flex-row xl:gap-12.5">
             <div className="md:w-1/2 lg:w-[32%]">
-              <div className="animate_top rounded-md shadow-solid-13 bg-white dark:bg-blacksection border border-stroke dark:border-strokedark p-3.5 mb-10">
+              <div className="animate_top mb-10 rounded-md border border-stroke bg-white p-3.5 shadow-solid-13 dark:border-strokedark dark:bg-blacksection">
                 <form
                   action="https://formbold.com/s/unique_form_id"
                   method="POST"
@@ -19,15 +25,15 @@ const SingleBlogPage = async () => {
                     <input
                       type="text"
                       placeholder="Search Here..."
-                      className="w-full dark:bg-black border border-stroke dark:border-strokedark shadow-solid-12 dark:shadow-none rounded-lg focus:outline-none focus:border-primary dark:focus:border-primary py-4 px-6"
+                      className="w-full rounded-lg border border-stroke px-6 py-4 shadow-solid-12 focus:border-primary focus:outline-none dark:border-strokedark dark:bg-black dark:shadow-none dark:focus:border-primary"
                     />
 
                     <button
-                      className="absolute top-0 right-0 p-5"
+                      className="absolute right-0 top-0 p-5"
                       aria-label="search-icon"
                     >
                       <svg
-                        className="fill-black dark:fill-white hover:fill-primary dark:hover:fill-primary transition-all duration-300"
+                        className="fill-black transition-all duration-300 hover:fill-primary dark:fill-white dark:hover:fill-primary"
                         width="21"
                         height="21"
                         viewBox="0 0 21 21"
@@ -41,25 +47,25 @@ const SingleBlogPage = async () => {
                 </form>
               </div>
 
-              <div className="animate_top rounded-md shadow-solid-13 bg-white dark:bg-blacksection border border-stroke dark:border-strokedark p-9 mb-10">
-                <h4 className="font-semibold text-2xl text-black dark:text-white mb-7.5">
+              <div className="animate_top mb-10 rounded-md border border-stroke bg-white p-9 shadow-solid-13 dark:border-strokedark dark:bg-blacksection">
+                <h4 className="mb-7.5 text-2xl font-semibold text-black dark:text-white">
                   Categories
                 </h4>
 
                 <ul>
-                  <li className="last:mb-0 mb-3 transition-all duration-300 hover:text-primary">
+                  <li className="mb-3 transition-all duration-300 last:mb-0 hover:text-primary">
                     <a href="#">Blog</a>
                   </li>
-                  <li className="last:mb-0 mb-3 transition-all duration-300 hover:text-primary">
+                  <li className="mb-3 transition-all duration-300 last:mb-0 hover:text-primary">
                     <a href="#">Events</a>
                   </li>
-                  <li className="last:mb-0 mb-3 transition-all duration-300 hover:text-primary">
+                  <li className="mb-3 transition-all duration-300 last:mb-0 hover:text-primary">
                     <a href="#">Grids</a>
                   </li>
-                  <li className="last:mb-0 mb-3 transition-all duration-300 hover:text-primary">
+                  <li className="mb-3 transition-all duration-300 last:mb-0 hover:text-primary">
                     <a href="#">News</a>
                   </li>
-                  <li className="last:mb-0 mb-3 transition-all duration-300 hover:text-primary">
+                  <li className="mb-3 transition-all duration-300 last:mb-0 hover:text-primary">
                     <a href="#">Rounded</a>
                   </li>
                 </ul>
@@ -69,23 +75,23 @@ const SingleBlogPage = async () => {
             </div>
 
             <div className="lg:w-2/3">
-              <div className="animate_top rounded-md shadow-solid-13 bg-white dark:bg-blacksection border border-stroke dark:border-strokedark p-7.5 md:p-10">
+              <div className="animate_top rounded-md border border-stroke bg-white p-7.5 shadow-solid-13 dark:border-strokedark dark:bg-blacksection md:p-10">
                 <div className="mb-10 w-full overflow-hidden ">
                   <div className="relative aspect-[97/60] w-full sm:aspect-[97/44]">
                     <Image
                       src={"/images/blog/blog-01.png"}
                       alt="Kobe Steel plant that supplied"
                       fill
-                      className="object-cover object-center rounded-md"
+                      className="rounded-md object-cover object-center"
                     />
                   </div>
                 </div>
 
-                <h2 className="font-semibold text-3xl 2xl:text-sectiontitle2 text-black dark:text-white mt-11 mb-5">
+                <h2 className="mb-5 mt-11 text-3xl font-semibold text-black dark:text-white 2xl:text-sectiontitle2">
                   Kobe Steel plant that supplied
                 </h2>
 
-                <ul className="flex flex-wrap gap-5 2xl:gap-7.5 mb-9">
+                <ul className="mb-9 flex flex-wrap gap-5 2xl:gap-7.5">
                   <li>
                     <span className="text-black dark:text-white">Author: </span>{" "}
                     Jhon Doe
@@ -139,7 +145,9 @@ const SingleBlogPage = async () => {
                     />
                   </div>
 
-                  <h3 className="pt-8">Nunc elementum elit viverra, tempus quam non</h3>
+                  <h3 className="pt-8">
+                    Nunc elementum elit viverra, tempus quam non
+                  </h3>
 
                   <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.

app/(site)/blog/page.tsx

@@ -13,8 +13,8 @@ const BlogPage = async () => {
     <>
       {/* <!-- ===== Blog Grid Start ===== --> */}
       <section className="py-20 lg:py-25 xl:py-30">
-        <div className="mx-auto max-w-c-1280 px-4 md:px-8 xl:px-0 mt-15 xl:mt-20">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7.5 xl:gap-10">
+        <div className="mx-auto mt-15 max-w-c-1280 px-4 md:px-8 xl:mt-20 xl:px-0">
+          <div className="grid grid-cols-1 gap-7.5 md:grid-cols-2 lg:grid-cols-3 xl:gap-10">
             {BlogData.map((post, key) => (
               <BlogItem key={key} blog={post} />
             ))}

app/(site)/docs/page.tsx

@@ -1,31 +1,36 @@
 import SidebarLink from "@/components/Docs/SidebarLink";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Docs Page - Solid SaaS Boilerplate",
+  description: "This is Docs page for Solid Pro",
+  // other metadata
+};
 
 export default function DocsPage() {
   return (
     <>
-      <title>Docs - Startup</title>
-
-      <section className="pb-16 md:pb-20 lg:pb-24 pt-24 md:pt-28 lg:pt-32">
+      <section className="pb-16 pt-24 md:pb-20 md:pt-28 lg:pb-24 lg:pt-32">
         <div className="container mx-auto">
-          <div className="flex flex-wrap -mx-4">
+          <div className="-mx-4 flex flex-wrap">
             <div className="w-full px-4 lg:w-1/4">
-              <div className="sticky top-[74px] p-4 border border-white shadow-solid-4 rounded-lg  transition-all  dark:border-strokedark dark:bg-blacksection">
+              <div className="sticky top-[74px] rounded-lg border border-white p-4 shadow-solid-4  transition-all  dark:border-strokedark dark:bg-blacksection">
                 <ul className="space-y-2">
                   <SidebarLink />
                 </ul>
               </div>
             </div>
 
             <div className="w-full px-4 lg:w-3/4">
-              <div className="blog-details blog-details-docs rounded-sm bg-white py-11 px-8 shadow-three dark:bg-gray-dark sm:p-[55px] lg:mb-5 lg:px-8 xl:p-[55px]">
+              <div className="blog-details blog-details-docs shadow-three dark:bg-gray-dark rounded-sm bg-white px-8 py-11 sm:p-[55px] lg:mb-5 lg:px-8 xl:p-[55px]">
                 <h1>Welcome to Startup Documentation</h1>
 
-                <p className="text-base text-body-color dark:text-body-color-dark">
+                <p className="text-body-color dark:text-body-color-dark text-base">
                   This document serves as a simple template to showcase a sample
                   layout and format. It is solely created for demonstration
                   purposes and is not intended for any official use.
                 </p>
-                <p className="text-base text-body-color dark:text-body-color-dark">
+                <p className="text-body-color dark:text-body-color-dark text-base">
                   Please visit:{" "}
                   <b>
                     <a href="https://nextjstemplates.com/docs">

app/(site)/error/page.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-import Image from "next/image";
 import { Metadata } from "next";
-
+import Image from "next/image";
 
 export const metadata: Metadata = {
   title: "Error Page - Solid SaaS Boilerplate",
@@ -11,7 +9,7 @@ export const metadata: Metadata = {
 
 const ErroPage = () => {
   return (
-    <section className="pt-45 lg:pt-50 xl:pt-55 pb-25 lg:pb-32.5 xl:pb-37.5 overflow-hidden">
+    <section className="overflow-hidden pb-25 pt-45 lg:pb-32.5 lg:pt-50 xl:pb-37.5 xl:pt-55">
       <div className="animate_top mx-auto max-w-[518px] text-center">
         <Image
           src="/images/shape/404.svg"
@@ -21,7 +19,7 @@ const ErroPage = () => {
           height={400}
         />
 
-        <h2 className="font-semibold text-2xl md:text-4xl text-black dark:text-white mb-5">
+        <h2 className="mb-5 text-2xl font-semibold text-black dark:text-white md:text-4xl">
           This Page Does Not Exist
         </h2>
         <p className="mb-7.5">
@@ -31,7 +29,7 @@ const ErroPage = () => {
 
         <a
           href="/"
-          className="inline-flex items-center gap-2.5 bg-black dark:bg-btndark hover:bg-blackho ease-in-out duration-300 font-medium text-white rounded-full px-6 py-3"
+          className="inline-flex items-center gap-2.5 rounded-full bg-black px-6 py-3 font-medium text-white duration-300 ease-in-out hover:bg-blackho dark:bg-btndark dark:hover:bg-blackho"
         >
           Return to Home
           <svg

app/(site)/head.tsx

@@ -8,4 +8,3 @@ export default function Head() {
     </>
   );
 }
-

app/(site)/layout.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import Header from "@/components/Header";
 import Lines from "@/components/Lines";
 import ScrollToTop from "@/components/ScrollToTop";
-import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
-const inter = Inter({ subsets: ["latin"] });
+import { Inter } from "next/font/google";
 import "../globals.css";
+const inter = Inter({ subsets: ["latin"] });
 
 import ToasterContext from "../context/ToastContext";
 
@@ -17,20 +17,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="eng">
-      <body className={`dark:bg-black`}>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`dark:bg-black ${inter.className}`}>
         <ThemeProvider
           enableSystem={false}
           attribute="class"
           defaultTheme="light"
         >
-
-            <Lines />
-            <Header />
-            <ToasterContext />
-            {children}
-            <Footer />
-            <ScrollToTop />
+          <Lines />
+          <Header />
+          <ToasterContext />
+          {children}
+          <Footer />
+          <ScrollToTop />
         </ThemeProvider>
       </body>
     </html>

app/(site)/page.tsx

@@ -19,7 +19,6 @@ export const metadata: Metadata = {
   // other metadata
 };
 
-
 export default function Home() {
   return (
     <main>

app/(site)/support/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 const SupportPage = () => {
   return (
-    <div className="pt-40 pb-20">
+    <div className="pb-20 pt-40">
       <Contact />
     </div>
   );