Skip to content

fixed bg, card bg & added card shadow for visual consistency #594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Aditya948351 merged 2 commits into from
Jun 13, 2026
Merged

fixed bg, card bg & added card shadow for visual consistency #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6196fda
fixed bg, card bg & added card shadow for visual consistency
sheeeuWu Jun 11, 2026
cac7182
style: format Navbar.module.css
sheeeuWu Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/app/courses/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {

export default function CoursesPage() {
return (
<main className="pb-20 relative bg-surface-deep overflow-hidden">
<main className="pb-20 relative bg-background overflow-hidden">
<div className="container mx-auto px-4 relative z-10">
{/* Hero Section */}
<div className="text-center mb-20 max-w-4xl mx-auto">
Expand All @@ -27,7 +27,7 @@ export default function CoursesPage() {
<Sparkles size={16} />
<span>Coming March 2025</span>
</div>
<h1 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-b from-[hsl(var(--foreground))] via-[hsl(var(--foreground))] to-muted-foreground tracking-tight">
<h1 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-b from-[hsl(var(--foreground))] via-[hsl(var(--foreground))] to-[#677383] tracking-tight">
Master Full Stack
<br />
Development
Expand All @@ -47,7 +47,7 @@ export default function CoursesPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-primary/30 transition-all duration-300"
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-primary/30 transition-all duration-300 shadow-lg shadow-primary/5 dark:shadow-2xl dark:shadow-black/50"
>
<div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-3xl" />
<div className="relative z-10">
Expand Down Expand Up @@ -85,7 +85,7 @@ export default function CoursesPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-purple-500/30 transition-all duration-300"
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-purple-500/30 transition-all duration-300 shadow-lg shadow-purple-500/5 dark:shadow-2xl dark:shadow-black/50"
>
<div className="absolute inset-0 bg-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-3xl" />
<div className="relative z-10">
Expand Down Expand Up @@ -123,7 +123,7 @@ export default function CoursesPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-green-500/30 transition-all duration-300"
className="group relative bg-gradient-to-b from-card to-transparent border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 hover:border-green-500/30 transition-all duration-300 shadow-lg shadow-green-500/5 dark:shadow-2xl dark:shadow-black/50"
>
<div className="absolute inset-0 bg-green-500/5 opacity-0 group-hover:opacity-100 transition-opacity rounded-3xl" />
<div className="relative z-10">
Expand Down Expand Up @@ -168,7 +168,7 @@ export default function CoursesPage() {
<h2 className="text-3xl md:text-4xl font-bold">Launch Timeline</h2>
<div className="relative border-l border-[hsl(var(--muted-foreground)/0.3)] pl-8 space-y-10">
<div className="relative">
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-primary border-4 border-surface-deep" />
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-primary border-4 border-background" />
<span className="text-sm font-bold text-primary mb-1 block">
MARCH 2025
</span>
Expand All @@ -179,7 +179,7 @@ export default function CoursesPage() {
</p>
</div>
<div className="relative">
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-slate-700 border-4 border-surface-deep" />
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-slate-700 border-4 border-background" />
<span className="text-sm font-bold text-slate-500 mb-1 block">
APRIL 2025
</span>
Expand All @@ -190,7 +190,7 @@ export default function CoursesPage() {
</p>
</div>
<div className="relative">
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-slate-700 border-4 border-surface-deep" />
<span className="absolute -left-[39px] top-1 w-5 h-5 rounded-full bg-slate-700 border-4 border-background" />
<span className="text-sm font-bold text-slate-500 mb-1 block">
MAY 2025
</span>
Expand All @@ -206,7 +206,7 @@ export default function CoursesPage() {
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="bg-surface-deep border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 md:p-10"
className="bg-background border border-border dark:border-[hsl(var(--border)/0.3)] rounded-3xl p-8 md:p-10 shadow-xl shadow-black/5 dark:shadow-2xl dark:shadow-black/50"
>
<h3 className="text-2xl font-bold mb-6 flex items-center gap-3">
<GraduationCap className="text-yellow-400" />
Expand Down
11 changes: 5 additions & 6 deletions src/components/layout/Navbar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,11 +198,10 @@
outline-offset: 2px;
}


.navLink[aria-current="page"] {
color: var(--primary);
font-weight: 600;
background: rgb(128, 171, 240);
.navLink[aria-current='page'] {
color: var(--primary);
font-weight: 600;
background: rgb(128, 171, 240);
}

/* Mobile Menu Backdrop */
Expand Down Expand Up @@ -380,7 +379,7 @@
.navbar {
padding: 0 16px;
height: 60px;
background: rgba(15, 23, 42, 0.88);
background: rgba(10, 10, 10, 0.6);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
Expand Down
Loading