fixed sliding gallery, fixed styling

app/(auth)/login/page.tsx

@@ -76,7 +76,7 @@ const page = () => {
               {error && <DestructibleAlert text={error} extraStyles="" />}
 
               <button
-                onClick={() => router.push("/home")}
+                onClick={loginUser}
                 disabled={isLoading}
                 className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
               >

app/(auth)/register/page.tsx

@@ -89,57 +89,52 @@ export default function RegisterPage() {
               <FormField
                 title="Full name"
                 value={form.name}
-                handleChangeText={(e) =>
+                handleChangeText={(value) => setForm({ ...form, name: value })}
-                  setForm({ ...form, name: e.target.value })
-                }
               />
+
               <FormField
                 title="Institution"
-                placeholder="Enter a institution"
                 value={form.institution}
-                handleChangeText={(e) =>
+                handleChangeText={(value) =>
-                  setForm({ ...form, institution: e.target.value })
+                  setForm({ ...form, institution: value })
                 }
               />
+
               <FormField
                 title="SSC Roll No."
-                placeholder="Enter your SSC Roll No."
                 value={form.sscRoll}
-                handleChangeText={(e) =>
+                handleChangeText={(value) =>
-                  setForm({ ...form, sscRoll: e.target.value })
+                  setForm({ ...form, sscRoll: value })
                 }
               />
+
               <FormField
                 title="HSC Roll No."
-                placeholder="Enter your HSC Roll No."
                 value={form.hscRoll}
-                handleChangeText={(e) =>
+                handleChangeText={(value) =>
-                  setForm({ ...form, hscRoll: e.target.value })
+                  setForm({ ...form, hscRoll: value })
                 }
               />
+
               <FormField
                 title="Email Address"
-                placeholder="Enter your email address..."
                 value={form.email}
-                handleChangeText={(e) =>
+                handleChangeText={(value) => setForm({ ...form, email: value })}
-                  setForm({ ...form, email: e.target.value })
-                }
               />
+
               <FormField
                 title="Phone Number"
-                placeholder="Enter your phone number.."
                 value={form.phone}
-                handleChangeText={(e) =>
+                handleChangeText={(value) => setForm({ ...form, phone: value })}
-                  setForm({ ...form, phone: e.target.value })
-                }
               />
+
               <FormField
                 title="Password"
-                placeholder="Enter a password"
                 value={form.password}
-                handleChangeText={(e) =>
+                handleChangeText={(value) =>
-                  setForm({ ...form, password: e.target.value })
+                  setForm({ ...form, password: value })
                 }
+                placeholder={undefined}
               />
             </div>
 

app/(tabs)/home/page.tsx

@@ -92,8 +92,8 @@ const page = () => {
                       <Image
                         src="/images/icons/topic-test.png"
                         alt="Topic Test"
-                        width={70}
+                        width={85}
-                        height={70}
+                        height={85}
                       />
                       <span className={styles.categoryButtonText}>
                         Topic Test
@@ -106,8 +106,8 @@ const page = () => {
                       <Image
                         src="/images/icons/mock-test.png"
                         alt="Mock Test"
-                        width={70}
+                        width={85}
-                        height={70}
+                        height={85}
                       />
                       <span className={styles.categoryButtonText}>
                         Mock Test
@@ -122,8 +122,8 @@ const page = () => {
                       <Image
                         src="/images/icons/past-paper.png"
                         alt="Past Papers"
-                        width={62}
+                        width={68}
-                        height={62}
+                        height={68}
                       />
                       <span className={styles.categoryButtonText}>
                         Past Papers
@@ -136,8 +136,8 @@ const page = () => {
                       <Image
                         src="/images/icons/subject-test.png"
                         alt="Subject Test"
-                        width={70}
+                        width={80}
-                        height={70}
+                        height={80}
                       />
                       <span className={styles.categoryButtonText}>
                         Subject Test

app/(tabs)/layout.tsx

@@ -5,11 +5,13 @@ import Link from "next/link";
 import { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
+import { House, LayoutGrid, Bookmark, CircleUser } from "lucide-react";
 
 const tabs = [
-  { name: "Home", href: "/tabs/home" },
+  { name: "Home", href: "/home", component: <House size={30} /> },
-  { name: "Profile", href: "/tabs/profile" },
+  { name: "Unit", href: "/unit", component: <LayoutGrid size={30} /> },
-  { name: "Leaderboard", href: "/tabs/leaderboard" },
+  { name: "Bookmark", href: "/bookmark", component: <Bookmark size={30} /> },
+  { name: "Profile", href: "/profile", component: <CircleUser size={30} /> },
 ];
 
 export default function TabsLayout({ children }: { children: ReactNode }) {
@@ -19,7 +21,7 @@ export default function TabsLayout({ children }: { children: ReactNode }) {
     <div className="min-h-screen flex flex-col">
       <main className="flex-1">{children}</main>
 
-      <nav className="flex justify-around border-t p-4 bg-white">
+      <nav className="h-[70px] flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white">
         {tabs.map((tab) => (
           <Link
             key={tab.name}
@@ -29,7 +31,7 @@ export default function TabsLayout({ children }: { children: ReactNode }) {
               pathname === tab.href ? "text-blue-600" : "text-gray-500"
             )}
           >
-            {tab.name}
+            {tab.component}
           </Link>
         ))}
       </nav>

app/page.tsx

@@ -28,10 +28,6 @@ export default function Home() {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  const handleLogin = () => {
-    router.push("/login");
-  };
-
   return (
     <BackgroundWrapper>
       <div className="mx-10 h-screen">
@@ -62,7 +58,7 @@ export default function Home() {
           {/* Action Buttons */}
           <div className="flex flex-col gap-4">
             <button
-              onClick={handleLogin}
+              onClick={() => router.push("/login")}
               className="w-full h-[60px] flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200"
             >
               <span

components/SlidingGallery.tsx

@@ -28,6 +28,54 @@ const views = [
       </Link>
     ),
   },
+  {
+    id: "2",
+    content: (
+      <Link
+        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+        className={styles.link}
+      >
+        <div className={styles.facebook}>
+          <div className={styles.textView}>
+            <h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
+            <p className={styles.facebookTwo}>Join Facebook Community</p>
+          </div>
+          <div className={styles.logoView}>
+            <Image
+              src="/images/static/facebook-logo.png"
+              alt="Facebook Logo"
+              width={120}
+              height={120}
+            />
+          </div>
+        </div>
+      </Link>
+    ),
+  },
+  {
+    id: "3",
+    content: (
+      <Link
+        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+        className={styles.link}
+      >
+        <div className={styles.facebook}>
+          <div className={styles.textView}>
+            <h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
+            <p className={styles.facebookTwo}>Join Facebook Community</p>
+          </div>
+          <div className={styles.logoView}>
+            <Image
+              src="/images/static/facebook-logo.png"
+              alt="Facebook Logo"
+              width={120}
+              height={120}
+            />
+          </div>
+        </div>
+      </Link>
+    ),
+  },
 ];
 
 const SlidingGallery = () => {

css/Header.module.css

@@ -29,7 +29,7 @@
   }
   
   .text {
-    font-size: 24px;
+    font-size: 20px ;
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     color: #fff;
@@ -133,14 +133,14 @@
   
   @media (max-width: 480px) {
     .header {
-      height: 80px;
+      height: 100px;
       padding-top: 15px;
       padding-left: 15px;
       padding-right: 15px;
     }
     
     .text {
-      font-size: 14px;
+      font-size: 17px;
     }
     
     .profile {
@@ -148,8 +148,8 @@
     }
     
     .profileImg {
-      width: 30px;
+      width: 40px;
-      height: 30px;
+      height: 40px;
     }
     
     .timer {

css/Home.module.css

@@ -70,6 +70,7 @@
   .categoriesContainer {
     display: flex;
     flex-direction: column;
+    justify-content: space-evenly;
     gap: 16px;
     padding-top: 25px;
   }
@@ -228,7 +229,7 @@
     }
     
     .categoryButtonText {
-      font-size: 12px;
+      font-size: 14px;
     }
     
     .categoryRow {
@@ -246,11 +247,11 @@
     }
     
     .sectionTitle {
-      font-size: 18px;
+      font-size: 22px;
     }
     
     .categoryButton {
-      height: 100px;
+      height: 200px;
     }
     
     .mainContent {
@@ -258,7 +259,7 @@
     }
     
     .categoryRow {
-      flex-direction: column;
+      flex-direction: row;
     }
     
     .categoryButton {

css/SlidingGallery.module.css

@@ -22,14 +22,16 @@
   }
   
   .slide {
-    min-width: calc(100% - 72px);
+    min-width: 100%;
+    flex-shrink: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     scroll-snap-align: start;
-    padding: 0 36px;
+    box-sizing: border-box;
   }
   
+  
   .link {
     text-decoration: none;
     color: inherit;
@@ -37,14 +39,13 @@
   }
   
   .facebook {
-    flex: 1;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
     flex-direction: row;
     height: 100%;
     background-color: #fff;
     border-radius: 25px;
-    padding: 20px;
+    padding: 40px 40px;
     box-sizing: border-box;
   }
   

package.json

@@ -1,36 +1,3 @@
-{
-  "name": "nextjs-template-shadcn",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.525.0",
-    "next": "15.3.4",
-    "postcss": "^8.5.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^3.3.1"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.4",
-    "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.4",
-    "typescript": "^5"
-  }
-}
 {
   "name": "examjam-frontend",
   "version": "0.1.0",