feat(ui): add avatar and badge components

app/(tabs)/home/page.tsx

@@ -10,6 +10,7 @@ import BackgroundWrapper from "@/components/BackgroundWrapper";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import { ChevronRight } from "lucide-react"; // Using Lucide React for icons
 import styles from "@/css/Home.module.css";
+import facebookStyles from "@/css/SlidingGallery.module.css";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api";
 
@@ -30,6 +31,37 @@ const page = () => {
     { label: "Chemistry", progress: 57 },
   ];
 
+  const facebookViews = [
+    {
+      id: "1",
+      content: (
+        <Link
+          href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+          className="w-full h-full block text-inherit  box-border"
+        >
+          <div className="w-full h-full p-6 flex   text-black  bg-blue-50 rounded-4xl border-[0.5px] border-[#113768]/30">
+            <div className="">
+              <h3 className="text-2xl text-[#113768] font-black">
+                Meet, Share, and Learn!
+              </h3>
+              <p className="font-bold text-sm text-[#113768] ">
+                Join Facebook Community
+              </p>
+            </div>
+            <div className={facebookStyles.logoView}>
+              <Image
+                src="/images/static/facebook-logo.png"
+                alt="Facebook Logo"
+                width={150}
+                height={150}
+              />
+            </div>
+          </div>
+        </Link>
+      ),
+    },
+  ];
+
   // Fetch function for leaderboard data
   useEffect(() => {
     let isMounted = true;
@@ -70,7 +102,7 @@ const page = () => {
         <Header displayTabTitle={null} displayUser image={profileImg} />
         <div className={styles.scrollContainer}>
           <div className={styles.contentWrapper}>
-            <SlidingGallery />
+            <SlidingGallery views={facebookViews} height="23vh" />
             <div className={styles.mainContent}>
               {/* Categories Section */}
               <div>