update badge section on the main page

Author: maslianok

app/components/badge-section.tsx

@@ -1,4 +1,7 @@
 import { Link } from '@/components/link/link';
+import { BadgeMeta, BadgeRanking, BadgeType } from '@/types/badge.types';
+
+import BadgeExample from '../badge/gallery/components/badge-example';
 
 export const BadgeSection = () => {
   return (
@@ -8,8 +11,30 @@ export const BadgeSection = () => {
         Show off your coding achievements with a dynamic GitHub badge. Let the world see exactly where you stand among
         millions of developers.
       </div>
+      <div className="flex gap-3">
+        <BadgeExample label="Stars Rank" />
+        <BadgeExample
+          label="Contribution Score"
+          ranking={BadgeRanking.c}
+          type={BadgeType.Score}
+          valueBgColor="#1e3a8a"
+        />
+        <BadgeExample
+          label="Contributor Rank"
+          ranking={BadgeRanking.c}
+          type={BadgeType.Percentile}
+          valueBgColor="#7f5539"
+        />
+        <BadgeExample label="Stars Rank" meta={BadgeMeta.MonthlyChange} />
+        <BadgeExample
+          label="Total Followers"
+          ranking={BadgeRanking.f}
+          meta={BadgeMeta.Percentile}
+          valueBgColor="#1e3a8a"
+        />
+      </div>
       <div>
-        <Link href="/badge/gallery">Create a badge</Link>
+        <Link href="/badge/gallery">View Badge Gallery</Link>
       </div>
     </div>
   );