feat: refactor styles and components for improved UI consistency and …

app/docs/[[...slug]]/page.tsx

@@ -30,7 +30,7 @@ export default async function Pages({ params }: PageProps) {
         <PageBreadcrumb paths={slug} />
 
         <Typography>
-          <h1 className="text-3xl !font-semibold mb-2!">{frontmatter.title}</h1>
+          <h1 className="text-3xl !font-semibold !mb-2">{frontmatter.title}</h1>
           <p className="-mt-4 text-sm">
             {frontmatter.description}
           </p>

app/layout.tsx

@@ -7,7 +7,7 @@ import { Footer } from "@/components/navigation/footer"
 import { Navbar } from "@/components/navigation/navbar"
 import { Providers } from "@/components/providers"
 
-import "./globals.css"
+import "@/styles/globals.css"
 
 const inter = Inter({
   variable: "--font-inter",

app/page.tsx

@@ -6,11 +6,13 @@ import { buttonVariants } from "@/components/ui/button"
 export default function Home() {
   return (
     <section className="min-h-[86.5vh] flex flex-col justify-center items-center text-center px-2 py-8">
+
       <h1 className="text-4xl font-bold mb-4 sm:text-7xl">Documents</h1>
       <p className="max-w-[600px] text-foreground mb-8 sm:text-base">
         A simple open-source product documentation platform. That&apos;s simple
         to use and easy to customize.
       </p>
+
       <div className="flex items-center gap-5">
         <Link
           href={`/docs${PageRoutes[0].href}`}
@@ -19,6 +21,7 @@ export default function Home() {
           Get Started
         </Link>
       </div>
+
     </section>
   )
 }

components/markdown/card.tsx

@@ -73,12 +73,12 @@ export function Card({
         )}
         <div
           className={clsx(
-            "transition-all duration-300 group-hover:font-bold",
+            "transition-all duration-300 font-semibold group-hover:font-bold",
             variant === "small"
               ? "text-sm"
               : variant === "image"
-                ? "text-sm !p-4 !py-2"
-                : "text-lg font-semibold",
+                ? "text-sm p-4"
+                : "text-lg",
             className
           )}
         >

components/markdown/copy.tsx

@@ -20,10 +20,10 @@ export default function Copy({ content }: { content: string }) {
 
   return (
     <Button
-      variant="ghost"
+      variant="outline"
       size="icon"
       onClick={handleCopy}
-      className="cursor-pointer !size-5"
+      className="cursor-pointer !size-8"
     >
       <LuCopy
         className={cn(

components/markdown/step.tsx

@@ -19,7 +19,7 @@ export function Step({ children }: PropsWithChildren<StepProps>) {
             clsx({ "pb-5": index < length - 1 })
           )}
         >
-          <div className="absolute -left-4 flex items-center justify-center w-8 h-8 rounded-full bg-secondary text-xs font-code font-medium">
+          <div className="absolute -left-4 flex items-center justify-center size-8 rounded-full border bg-secondary text-xs font-medium">
             {index + 1}
           </div>
           {child}