fix: fix the HTML code for validity

components/shared/DemoVideo.tsx

@@ -1,16 +1,11 @@
 "use client";
 import React from "react";
-import { Button } from "../ui/button";
+import { Button, buttonVariants } from "../ui/button";
 import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import HeroVideoDialog from "../ui/heroVideoAction";
 
 const DemoVideo = () => {
-  const router = useRouter();
-  const handleClick = () => {
-    router.push("/docs");
-  };
   return (
     <section
       id="partners"
@@ -27,12 +22,12 @@ const DemoVideo = () => {
           <p className="text-md font-medium bg-accent/60 px-2 py-2 rounded-md">
             Process of setting up a WordPress website running on SVR.JS.
           </p>
-          <Button
-            onClick={handleClick}
-            className="flex-center font-bold max-md:w-full max-w-xl"
+          <Link
+            className={`${buttonVariants({ font: "bold" })} flex-center max-md:w-full max-w-xl`}
+            href="/docs"
           >
             Docs <ArrowUpRight />
-          </Button>
+          </Link>
         </div>
       </div>
 

components/shared/Hero.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import HeroCards from "./HeroCards";
-import { Button } from "../ui/button";
+import { Button, buttonVariants } from "../ui/button";
 import Link from "next/link";
 import { Check, Clipboard } from "lucide-react";
 import GridPattern from "../ui/grid-pattern";
@@ -63,7 +63,7 @@ const Hero = () => {
             Expanding server functionality
           </span>
         </AnimatedGradientText>
-        <main className="text-5xl md:text-6xl font-bold">
+        <div className="text-5xl md:text-6xl font-bold">
           <h1 className="inline custom-title">
             Host&nbsp;with{" "}
             <span className="text-transparent bg-gradient-to-r from-green-300 to-primary bg-clip-text">
@@ -74,7 +74,7 @@ const Hero = () => {
               ease
             </span>
           </h1>
-        </main>
+        </div>
         <p className="text-lg text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
           Host reliably and securely, and scale effortlessly with SVR.JS, an
           open-source and configurable web server running on Node.JS that&apos;s
@@ -95,8 +95,8 @@ const Hero = () => {
           </Button>
           <p className="hidden lg:block">|</p>
           <p className="block lg:hidden">or</p>
-          <Link className="w-full" href="/downloads">
-            <Button className="w-full">Download</Button>
+          <Link className={`${buttonVariants()} w-full`} href="/downloads">
+            Download
           </Link>
           <div className="pointer-events-none dark:invert -scale-x-100 absolute -bottom-14 max-lg:left-0 lg:right-20 inline-flex justify-center items-center gap-1">
             <Image

components/shared/HeroCards.tsx

@@ -3,7 +3,7 @@
 import { BorderBeam } from "@/components/ui/border-beam";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -120,10 +120,11 @@ const HeroCards = () => {
           </div>
 
           <CardDescription>{cards.pricingCard.description}</CardDescription>
-          <Link className="w-full" href="/downloads">
-            <Button size="sm" className="w-full">
+          <Link
+            className={`${buttonVariants({ size: "sm" })} w-full`}
+            href="/downloads"
+          >
             {cards.pricingCard.primaryButtonText}
-            </Button>
           </Link>
         </CardHeader>
         <hr className="w-4/5 m-auto -mt-2 mb-4" />

components/ui/badge.tsx

@@ -24,12 +24,12 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
   );
 }
 

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -25,11 +25,16 @@ const buttonVariants = cva(
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
         smicon: "h-8 w-8"
+      },
+      font: {
+        default: "font-medium",
+        bold: "font-bold"
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "default",
+      font: "default"
     }
   }
 );
@@ -41,11 +46,11 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, font, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, font, className }))}
         ref={ref}
         {...props}
       />