minor changes

apps/www/components/ui/Leftsidebar.tsx

@@ -1,5 +1,9 @@
 import { ScrollArea } from "./scroll-area";
 
+// import Link from "next/link";
+// import { usePathname } from "next/navigation";
+// import { cn } from "@/lib/utils";
+
 export default function LeftSidebar() {
   const items = [
     { label: "Introduction" },
@@ -26,7 +30,7 @@ export default function LeftSidebar() {
   ];
 
   return (
-    <div className="hidden lg:flex lg:flex-col  border-r text-sm lg:items-start lg:justify-start lg:w-full lg:h-full lg:top-8 lg:sticky lg:border-border lg:font-semibold">
+    <div className="hidden lg:flex lg:flex-col md:mr-16 border-r text-sm lg:items-start lg:justify-start lg:w-full lg:h-full lg:top-8 lg:sticky lg:border-border lg:font-semibold">
       <ScrollArea className="w-full">
         <div className="flex flex-col ml-4 w-full">
           <h1 className="text-white h-12 w-full text-base flex items-center mt-3">

apps/www/components/ui/Link.tsx

@@ -3,10 +3,7 @@ import { ScrollArea } from "./scroll-area";
 
 export default function SidebarContent() {
   return (
-    <div
-      className="w-64 border-l border-border bg-background p-6 overflow-y-auto scrollbar-hidden h-full -mt-10"
-      role="complementary"
-    >
+    <div className="w-64 border-l border-border bg-background p-6 h-full -mt-10">
       <ScrollArea className="h-full w-full m-2">
         <div className="space-y-4">
           <h2

apps/www/components/ui/Rightsidebar.tsx

@@ -2,8 +2,12 @@ import SidebarContent from "./Link";
 
 export default function Rightsidebar() {
   return (
-    <div className="hidden lg:flex flex-col items-start justify-start w-[16rem] h-full  lg:top-8 lg:sticky overflow-y-hidden">
+    <aside
+      role="complementary"
+      aria-label="Secondary navigation"
+      className="hidden lg:flex flex-col items-start justify-start w-[16rem] h-screen lg:top-8 lg:sticky overflow-y-auto"
+    >
       <SidebarContent />
-    </div>
+    </aside>
   );
-}
+}

apps/www/components/ui/Usagehome.tsx

@@ -1,5 +1,3 @@
-import { ScrollArea } from "./scroll-area";
-
 export default function Usagehome() {
   return (
     <div className=" w-full flex flex-col items-center overflow-x-hidden  px-4 sm:px-6 ">
@@ -14,20 +12,20 @@ export default function Usagehome() {
       </div>
       <div className="mt-8 sm:mt-10 flex flex-col items-start justify-start w-full">
         <div className="w-full flex flex-col items-start justify-start gap-y-6 sm:gap-y-8 lg:gap-y-10 px-4 sm:px-6 lg:px-10">
-          <div className="font-normal text-start w-full text-base sm:text-lg text-white">
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
             This is NOT a component library. It's a collection of re-usable
             components that you can copy and paste into your apps.
-          </div>
-          <div className="font-normal text-start w-full text-base sm:text-lg text-white">
+          </section>
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
             What do you mean by not a component library? I mean you do not
             install it as a dependency. It is not available or distributed via
             npm. Pick the components you need.
-          </div>
-          <div className="font-normal text-start w-full text-base sm:text-lg text-white">
+          </section>
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
             Copy and paste the code into your project and customize to your
             needs. The code is yours. Use this as a reference to build your own
             component libraries.
-          </div>
+          </section>
         </div>
       </div>
     </div>