style: round footer badges and adjust footer layout for medium screens

Author: parthsali

app/page.tsx

@@ -76,16 +76,25 @@ export default async function Home() {
 
         {/* Subtle Footer with Core Offerings */}
         {/*hide this for mobile screens */}
-        <div className="mt-8 flex flex-row items-center justify-center gap-2 sm:flex-row sm:gap-x-4 hidden md:block">
-          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+        <div className="mt-8 hidden md:flex flex-row items-center justify-center gap-4">
+          <Badge
+            variant="secondary"
+            className="rounded-full px-3 py-1 text-xs font-medium sm:text-sm"
+          >
             <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Comprehensive Notes
           </Badge>
-          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+          <Badge
+            variant="secondary"
+            className="rounded-full px-3 py-1 text-xs font-medium sm:text-sm"
+          >
             <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Past Exam Papers
           </Badge>
-          <Badge variant="secondary" className="px-3 py-1 text-xs font-medium sm:text-sm">
+          <Badge
+            variant="secondary"
+            className="rounded-full px-3 py-1 text-xs font-medium sm:text-sm"
+          >
             <BadgeCheckIcon className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
             Reference Books
           </Badge>