shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pages): add profile page

Browse Source 
fix(ui): fix minor ui bugs on some pages
This commit is contained in:
shafin-r
2026-01-19 14:06:05 +06:00
parent d208a9336f
commit d5a39add17
11 changed files with 154 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -53,11 +53,11 @@ function App() {
}, },
{ {
path: "/", path: "/",
element: <Navigate to="/student" replace />, element: <Navigate to="/student/home" replace />,
}, },
{ {
path: "*", path: "*",
element: <Navigate to="/student" replace />, element: <Navigate to="/student/home" replace />,
}, },
]); ]);

20
src/components/ui/button.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@ -33,8 +33,8 @@ const buttonVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
} },
) );
function Button({ function Button({
className, className,
@ -44,9 +44,9 @@ function Button({
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
@ -56,7 +56,7 @@ function Button({
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />
) );
} }
export { Button, buttonVariants } export { Button, buttonVariants };

2
src/components/ui/tabs.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs"; import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils"; import { cn } from "../../lib/utils";
function Tabs({ function Tabs({
className, className,

46
src/lib/utils.ts
View File

@ -24,7 +24,7 @@ export function formatTimeFilter(time: string) {
case "month": case "month":
return "Month"; return "Month";
case "alltime": case "alltime":
return "All Time"; return "All";
default: default:
return "Today"; return "Today";
} }
@ -32,14 +32,46 @@ export function formatTimeFilter(time: string) {
export function getRandomColor() { export function getRandomColor() {
const colors = [ const colors = [
"bg-red-700", "bg-cyan-700",
"bg-blue-700", "bg-lime-600",
"bg-green-700", "bg-green-500",
"bg-yellow-700", "bg-slate-700",
"bg-violet-600",
"bg-sky-500",
"bg-indigo-600",
"bg-gray-400",
"bg-red-500",
"bg-orange-500",
"bg-yellow-500",
"bg-teal-500",
"bg-blue-500",
"bg-purple-500",
"bg-pink-500",
"bg-rose-500",
"bg-amber-500",
"bg-emerald-500",
"bg-fuchsia-500",
"bg-lime-500",
"bg-cyan-500",
"bg-blue-600",
"bg-indigo-700",
"bg-purple-700", "bg-purple-700",
"bg-pink-700", "bg-pink-700",
"bg-indigo-700", "bg-red-600",
"bg-gray-700", "bg-orange-600",
"bg-yellow-600",
"bg-teal-600",
"bg-emerald-600",
"bg-rose-600",
"bg-amber-600",
"bg-fuchsia-600",
"bg-lime-700",
"bg-cyan-600",
"bg-blue-700",
"bg-indigo-800",
"bg-purple-800",
"bg-pink-800",
"bg-red-700",
]; ];
return colors[Math.floor(Math.random() * colors.length)]; return colors[Math.floor(Math.random() * colors.length)];
} }

8
src/pages/auth/Login.tsx
View File

@ -23,7 +23,7 @@ export const Login = () => {
// Redirect if already authenticated // Redirect if already authenticated
useEffect(() => { useEffect(() => {
if (isAuthenticated) { if (isAuthenticated) {
navigate("/student", { replace: true }); navigate("/student/home", { replace: true });
} }
}, [isAuthenticated, navigate]); }, [isAuthenticated, navigate]);
@ -49,8 +49,8 @@ export const Login = () => {
return ( return (
<div className="min-h-screen flex items-center justify-center "> <div className="min-h-screen flex items-center justify-center ">
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300"> <div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm border border-gray-300 space-y-6">
<div className="flex justify-center mb-6"> <div className="flex justify-center">
<img <img
src="src/assets/ed_logo.png" src="src/assets/ed_logo.png"
alt="EdBridge logo" alt="EdBridge logo"
@ -120,7 +120,7 @@ export const Login = () => {
<button <button
onClick={handleSubmit} onClick={handleSubmit}
disabled={isLoading || !email || !password} disabled={isLoading || !email || !password}
className="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi" className="w-full bg-linear-to-br from-purple-500 to-purple-600 text-white py-3 rounded-2xl hover:bg-purple-700 transition font-medium disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center font-satoshi hover:cursor-pointer"
> >
{isLoading ? ( {isLoading ? (
<> <>

27
src/pages/student/Drills.tsx
View File

@ -7,7 +7,6 @@ import {
Trophy, Trophy,
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
import { import {
Card, Card,
CardAction, CardAction,
@ -20,10 +19,8 @@ import {
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
export const Drills = () => { export const Drills = () => {
const user = useAuthStore((state) => state.user);
return ( return (
<main className="min-h-screen max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-4"> <main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
<header className="flex justify-between items-center"> <header className="flex justify-between items-center">
<div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl"> <div className="w-fit bg-linear-to-br from-purple-500 to-purple-600 p-3 rounded-2xl">
<BookOpen size={20} color="white" /> <BookOpen size={20} color="white" />
@ -39,7 +36,7 @@ export const Drills = () => {
flex-row" flex-row"
> >
<div className="space-y-4"> <div className="space-y-4">
<CardHeader className="w-1/2"> <CardHeader className="w-[65%]">
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white"> <CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
See where you stand See where you stand
</CardTitle> </CardTitle>
@ -56,7 +53,7 @@ export const Drills = () => {
</Button> </Button>
</CardFooter> </CardFooter>
</div> </div>
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20"> <div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
<DraftingCompass size={300} color="white" /> <DraftingCompass size={300} color="white" />
</div> </div>
</Card> </Card>
@ -69,8 +66,10 @@ export const Drills = () => {
<Target size={20} color="white" /> <Target size={20} color="white" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle>Targeted Practice</CardTitle> <CardTitle className="font-satoshi">Targeted Practice</CardTitle>
<CardDescription>Focus on what matters</CardDescription> <CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div> </div>
<CardAction> <CardAction>
<div className="w-fit bg-red-100 p-2 rounded-full"> <div className="w-fit bg-red-100 p-2 rounded-full">
@ -85,8 +84,10 @@ export const Drills = () => {
<Zap size={20} color="white" /> <Zap size={20} color="white" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle>Drills</CardTitle> <CardTitle className="font-satoshi">Drills</CardTitle>
<CardDescription>Train speed and accuracy</CardDescription> <CardDescription className="font-satoshi">
Train speed and accuracy
</CardDescription>
</div> </div>
<CardAction> <CardAction>
<div className="w-fit bg-cyan-100 p-3 rounded-full"> <div className="w-fit bg-cyan-100 p-3 rounded-full">
@ -101,8 +102,10 @@ export const Drills = () => {
<Trophy size={20} color="white" /> <Trophy size={20} color="white" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<CardTitle>Hard Test Modules</CardTitle> <CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
<CardDescription>Focus on what matters</CardDescription> <CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
</div> </div>
<CardAction> <CardAction>
<div className="w-fit bg-lime-100 p-3 rounded-full"> <div className="w-fit bg-lime-100 p-3 rounded-full">

24
src/pages/student/Home.tsx
View File

@ -79,7 +79,7 @@ export const Home = () => {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center"> <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"} Welcome, {user?.name || "Student"}
</h1> </h1>
@ -87,7 +87,7 @@ export const Home = () => {
<input <input
type="text" type="text"
placeholder="Search..." placeholder="Search..."
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/> />
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<Search size={22} color="gray" /> <Search size={22} color="gray" />
@ -103,24 +103,24 @@ export const Home = () => {
<TabsList className="bg-transparent p-0 w-full"> <TabsList className="bg-transparent p-0 w-full">
<TabsTrigger <TabsTrigger
value="all" value="all"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800" className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
> >
All All
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="NOT_STARTED" value="NOT_STARTED"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800" className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
> >
Not Started Not Started
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="COMPLETED" value="COMPLETED"
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800" className="font-satoshi-regular tracking-wide text-md rounded-none border-b-3 data-[state=active]:border-b-purple-800 data-[state=active]:text-purple-800"
> >
Completed Completed
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="all"> <TabsContent value="all" className="pt-6">
<div className="space-y-6"> <div className="space-y-6">
{practiceSheets.length > 0 ? ( {practiceSheets.length > 0 ? (
practiceSheets.map((sheet) => ( practiceSheets.map((sheet) => (
@ -152,7 +152,7 @@ export const Home = () => {
<CardFooter> <CardFooter>
<Button <Button
variant="outline" variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white" className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
> >
Start Start
</Button> </Button>
@ -168,7 +168,7 @@ export const Home = () => {
)} )}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="NOT_STARTED"> <TabsContent value="NOT_STARTED" className="pt-6">
<div className="space-y-6"> <div className="space-y-6">
{notStartedSheets.map((sheet) => ( {notStartedSheets.map((sheet) => (
<Card key={sheet?.id}> <Card key={sheet?.id}>
@ -197,7 +197,7 @@ export const Home = () => {
<CardFooter> <CardFooter>
<Button <Button
variant="outline" variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white" className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
> >
Start Start
</Button> </Button>
@ -206,7 +206,7 @@ export const Home = () => {
))} ))}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="COMPLETED"> <TabsContent value="COMPLETED" className="pt-6">
{completedSheets.length > 0 ? ( {completedSheets.length > 0 ? (
completedSheets.map((sheet) => ( completedSheets.map((sheet) => (
<Card key={sheet?.id}> <Card key={sheet?.id}>
@ -237,7 +237,7 @@ export const Home = () => {
<CardFooter> <CardFooter>
<Button <Button
variant="outline" variant="outline"
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white" className="font-satoshi w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 rounded-3xl text-white"
> >
Start Start
</Button> </Button>
@ -260,7 +260,7 @@ export const Home = () => {
SAT Preparation Tips SAT Preparation Tips
</h1> </h1>
<section className="space-y-4"> <section className="space-y-4">
<div className="flex items-center gap-2"> <div className="flex gap-2">
<CheckCircle size={24} color="#AD45FF" /> <CheckCircle size={24} color="#AD45FF" />
<p className="font-satoshi text-lg"> <p className="font-satoshi text-lg">
Practice regularly with official SAT materials Practice regularly with official SAT materials

2
src/pages/student/Lessons.tsx
View File

@ -17,7 +17,7 @@ export const Lessons = () => {
// const user = useAuthStore((state) => state.user); // const user = useAuthStore((state) => state.user);
return ( return (
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<header className="space-y-2"> <header className="space-y-2">
<h1 className="font-satoshi-black text-2xl">Lessons</h1> <h1 className="font-satoshi-black text-2xl">Lessons</h1>
<p className="font-satoshi-medium text-sm text-gray-500"> <p className="font-satoshi-medium text-sm text-gray-500">

76
src/pages/student/Profile.tsx
View File

@ -1,26 +1,72 @@
import { ChevronRight } from "lucide-react";
import { useAuthStore } from "../../stores/authStore"; import { useAuthStore } from "../../stores/authStore";
import { useNavigate } from "react-router-dom";
export const Profile = () => { export const Profile = () => {
const user = useAuthStore((state) => state.user); const user = useAuthStore((state) => state.user);
const navigate = useNavigate();
const handleLogout = () => {
useAuthStore.getState().logout();
navigate("/login");
};
return ( return (
<div className="min-h-screen bg-gray-50"> <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
<div className="bg-white rounded-lg shadow p-6"> <section>
<h2 className="text-2xl font-bold text-gray-800 mb-4">Profile</h2> <h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
<div className="space-y-2 text-gray-600"> <p className="text-lg font-satoshi">{user?.email}</p>
<p>Email: {user?.email}</p> </section>
<p>Role: {user?.role}</p> <section className="space-y-4">
<p>Status: {user?.status}</p> <h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
<p> <div className="border rounded-4xl">
Member since:{" "} <button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
{user?.joined_at <span className="font-satoshi text-black">Account details</span>
? new Date(user.joined_at).toLocaleDateString() <ChevronRight color="gray" size={20} />
: "N/A"} </button>
</p> <button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Redeem a code</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Manage subscription</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Preferences</span>
<ChevronRight color="gray" size={20} />
</button>
</div> </div>
</section>
<section className="space-y-4">
<h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
<div className="border rounded-4xl">
<button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Terms of Use</span>
<ChevronRight color="gray" size={20} />
</button>
<button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Privacy Policy</span>
<ChevronRight color="gray" size={20} />
</button>
</div> </div>
</section>
<section className="space-y-4">
<h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
<div className="border rounded-4xl">
<button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
<span className="font-satoshi text-black">Contact Us</span>
<ChevronRight color="gray" size={20} />
</button>
</div>
</section>
<button
onClick={handleLogout}
className="w-full border rounded-4xl bg-purple-500 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
>
Sign Out
</button>
</main> </main>
</div>
); );
}; };

2
src/pages/student/Rewards.tsx
View File

@ -44,7 +44,7 @@ export const Rewards = () => {
const trophies = [firstTrophy, secondTrophy, thirdTrophy]; const trophies = [firstTrophy, secondTrophy, thirdTrophy];
return ( return (
<main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-4 sm:px-6 lg:px-8 py-8"> <main className="flex flex-col gap-8 items-start min-h-screen mx-auto px-8 sm:px-6 lg:px-8 py-8">
<header className="flex flex-col items-center h-fit w-full gap-3"> <header className="flex flex-col items-center h-fit w-full gap-3">
<h1 className="font-satoshi-black text-3xl">Leaderboards</h1> <h1 className="font-satoshi-black text-3xl">Leaderboards</h1>
<p className="font-satoshi-medium text-md text-gray-500"> <p className="font-satoshi-medium text-md text-gray-500">

53
src/pages/student/StudentLayout.tsx
View File

@ -1,25 +1,7 @@
import { Outlet, NavLink, useNavigate } from "react-router-dom"; import { Outlet, NavLink } from "react-router-dom";
import { import { Home, BookOpen, Award, User, Video } from "lucide-react";
Home,
BookOpen,
TrendingUp,
Award,
User,
Menu,
Video,
} from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
export function StudentLayout() { export function StudentLayout() {
// const user = useAuthStore((state) => state.user);
const logout = useAuthStore((state) => state.logout);
const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate("/login");
};
const navItems = [ const navItems = [
{ to: "/student/home", icon: Home, label: "Home" }, { to: "/student/home", icon: Home, label: "Home" },
{ to: "/student/drills", icon: BookOpen, label: "Drills" }, { to: "/student/drills", icon: BookOpen, label: "Drills" },
@ -30,38 +12,13 @@ export function StudentLayout() {
return ( return (
<div className="flex flex-col min-h-screen bg-gray-50"> <div className="flex flex-col min-h-screen bg-gray-50">
{/* Top Header */}
{/* <header className="bg-white shadow-sm sticky top-0 z-10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-22">
<div className="flex items-center gap-3">
<img
src="../../src/assets/ed_logo.png"
alt="EdBridge logo"
className="h-10 w-auto object-contain"
draggable={false}
/>
</div>
<button
onClick={handleLogout}
className="flex items-center gap-2 text-slate-600 hover:text-slate-700 transition px-3 py-2 rounded-lg hover:bg-red-50"
>
<Menu size={22} />
<span className="text-sm font-medium hidden sm:inline">
Logout
</span>
</button>
</div>
</div>
</header> */}
{/* Main Content */} {/* Main Content */}
<main className="flex-1 pb-20 overflow-y-auto"> <main className="flex-1 pb-20 overflow-y-auto">
<Outlet /> <Outlet />
</main> </main>
{/* Bottom Tab Navigation */} {/* Bottom Tab Navigation */}
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg z-20"> <nav className="fixed rounded-t-4xl pt-2 bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-4xl z-20">
<div className="max-w-7xl mx-auto px-2"> <div className="max-w-7xl mx-auto px-2">
<div className="flex justify-around items-center"> <div className="flex justify-around items-center">
{navItems.map((item) => ( {navItems.map((item) => (
@ -69,9 +26,9 @@ export function StudentLayout() {
key={item.to} key={item.to}
to={item.to} to={item.to}
className={({ isActive }) => className={({ isActive }) =>
`flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 ${ `flex flex-col items-center justify-center py-3 px-4 flex-1 transition-all duration-200 font-satoshi tracking-wide ${
isActive isActive
? "text-indigo-600" ? "text-purple-600"
: "text-gray-500 hover:text-gray-700" : "text-gray-500 hover:text-gray-700"
}` }`
} }