Skip to content

Commit d54e7d2

Browse files
akshay0611akshay0611
committed
style(zenith-hall): Improve responsive design and layout for Zenith Hall page
- Refactor hero section with responsive padding and sizing - Adjust background blur elements for better mobile responsiveness - Reduce text sizes and spacing for smaller screen breakpoints - Simplify search and filter controls for mobile compatibility - Update grid layout to be more responsive across device sizes - Optimize text content for better readability on smaller screens - Enhance mobile-first approach with tailored sizing and spacing - Improve overall visual hierarchy and layout adaptability
1 parent 217f327 commit d54e7d2

File tree

1 file changed

+40
-40
lines changed

1 file changed

+40
-40
lines changed

‎app/zenith-hall/page.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function ProjectsPage() {
7272
<Header />
7373

7474
{/* Hero Section */}
75-
<section className="py-20 md:py-32 relative overflow-hidden">
75+
<section className="py-32 sm:py-16 md:py-24 lg:py-32 relative overflow-hidden">
7676
<div
7777
className={cn(
7878
"absolute inset-0",
@@ -84,60 +84,60 @@ export default function ProjectsPage() {
8484
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
8585
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5"></div>
8686
<div className="absolute inset-0">
87-
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl"></div>
88-
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
87+
<div className="absolute top-10 sm:top-20 left-5 sm:left-10 w-48 h-48 sm:w-72 sm:h-72 bg-primary/10 rounded-full blur-3xl"></div>
88+
<div className="absolute bottom-10 sm:bottom-20 right-5 sm:right-10 w-64 h-64 sm:w-96 sm:h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
8989
</div>
90-
<div className="container px-4 mx-auto relative z-10">
91-
<div className="max-w-4xl mx-auto text-center space-y-8">
90+
<div className="container px-4 sm:px-6 mx-auto relative z-10">
91+
<div className="max-w-4xl mx-auto text-center space-y-6 sm:space-y-8">
9292
<div>
93-
<div className="flex flex-col items-center justify-center gap-4">
94-
<button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
93+
<div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
94+
<button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block cursor-default">
9595
<span className="absolute inset-0 overflow-hidden rounded-full">
9696
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 group-hover:opacity-100" />
9797
</span>
98-
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
98+
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-3 sm:px-4 ring-1 ring-white/10">
9999
<span>Hall of Excellence</span>
100100
<Sparkles className="w-3 h-3" />
101101
</div>
102102
<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 group-hover:opacity-40" />
103103
</button>
104104
</div>
105105
</div>
106-
<h1 className="text-5xl md:text-6xl font-bold tracking-tight leading-tight">
106+
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2">
107107
<span className="gradient-text">Zenith</span> Hall
108108
</h1>
109-
<p className="text-xl md:text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
110-
A tribute to Codeunia&apos;s finest minds who have risen above challenges with exceptional skill and innovation. Here, we showcase our best members whose remarkable projects and achievements reflect technical excellence, creative problem-solving, and the spirit of collaboration that defines our community.
109+
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed px-2">
110+
Showcasing exceptional projects from our most talented members. Discover remarkable achievements that reflect technical excellence, creative problem-solving, and collaborative innovation.
111111
</p>
112112
</div>
113113
</div>
114114
</section>
115115

116-
<section className="relative py-20 bg-gradient-to-b from-muted/20 to-background">
117-
<div className="container relative z-10 mx-auto px-4">
116+
<section className="relative py-10 sm:py-12 md:py-16 lg:py-20 bg-gradient-to-b from-muted/20 to-background">
117+
<div className="container relative z-10 mx-auto px-4 sm:px-6">
118118
{/* Search and Filter Controls */}
119-
<div className="mb-12 flex justify-center items-center gap-4 max-w-4xl mx-auto">
119+
<div className="mb-8 sm:mb-10 md:mb-12 flex flex-col sm:flex-row justify-center items-stretch sm:items-center gap-3 sm:gap-4 max-w-4xl mx-auto">
120120
<div className="relative flex-grow">
121-
<Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
121+
<Search className="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground z-10 pointer-events-none" />
122122
<Input
123123
type="text"
124-
placeholder="Search our hall of excellence by project, technology, or member..."
125-
className="w-full pl-12 pr-4 py-3 text-lg bg-background/70 backdrop-blur-sm rounded-full focus:ring-2 focus:ring-primary/50"
124+
placeholder="Search by project, technology, or member..."
125+
className="w-full pl-10 sm:pl-12 pr-4 py-2.5 sm:py-3 text-sm sm:text-base md:text-lg bg-background/70 backdrop-blur-sm rounded-full focus:ring-2 focus:ring-primary/50"
126126
value={searchTerm}
127127
onChange={(e) => setSearchTerm(e.target.value)}
128128
/>
129129
</div>
130130
<DropdownMenu>
131131
<DropdownMenuTrigger asChild>
132-
<Button variant="outline" className="flex items-center gap-2 rounded-full text-lg py-3 bg-background/70 backdrop-blur-sm">
132+
<Button variant="outline" className="flex items-center justify-center gap-2 rounded-full text-sm sm:text-base md:text-lg py-2.5 sm:py-3 px-4 sm:px-6 bg-background/70 backdrop-blur-sm whitespace-nowrap">
133133
<span>Technologies</span>
134134
{selectedTags.length > 0 && (
135-
<Badge variant="secondary" className="rounded-full">{selectedTags.length}</Badge>
135+
<Badge variant="secondary" className="rounded-full text-xs">{selectedTags.length}</Badge>
136136
)}
137-
<ChevronDown className="h-5 w-5 text-muted-foreground" />
137+
<ChevronDown className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground" />
138138
</Button>
139139
</DropdownMenuTrigger>
140-
<DropdownMenuContent className="w-64">
140+
<DropdownMenuContent className="w-56 sm:w-64">
141141
<DropdownMenuLabel>Filter by Expertise Areas</DropdownMenuLabel>
142142
<DropdownMenuSeparator />
143143
{allTags.map((tag) => (
@@ -153,7 +153,7 @@ export default function ProjectsPage() {
153153
</DropdownMenu>
154154
</div>
155155

156-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
156+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
157157
{filteredProjects.map((project, index) => (
158158
<div key={project.project_name} className="group" style={{ animationDelay: `${index * 100}ms` }}>
159159
<Card className="relative h-full overflow-hidden border-0 bg-background/60 backdrop-blur-sm shadow-lg transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-2">
@@ -166,28 +166,28 @@ export default function ProjectsPage() {
166166

167167
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-transparent via-primary/20 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
168168

169-
<CardHeader className="relative z-10 space-y-4 pb-4">
169+
<CardHeader className="relative z-10 space-y-3 sm:space-y-4 pb-3 sm:pb-4">
170170
<div
171171
className={cn(
172-
"mx-auto flex h-16 w-16 items-center justify-center rounded-2xl shadow-lg transition-transform duration-300 group-hover:scale-110",
172+
"mx-auto flex h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 items-center justify-center rounded-xl sm:rounded-2xl shadow-lg transition-transform duration-300 group-hover:scale-110",
173173
`bg-gradient-to-br ${project.gradient}`,
174174
)}
175175
>
176-
<Code2 className="h-8 w-8 text-white drop-shadow-sm" />
176+
<Code2 className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-white drop-shadow-sm" />
177177
</div>
178178

179179
<div className="space-y-2 text-center">
180-
<CardTitle className="text-xl font-bold transition-colors duration-300 group-hover:text-primary">
180+
<CardTitle className="text-lg sm:text-xl font-bold transition-colors duration-300 group-hover:text-primary">
181181
{project.project_name}
182182
</CardTitle>
183-
<CardDescription className="text-sm leading-relaxed text-muted-foreground">
183+
<CardDescription className="text-xs sm:text-sm leading-relaxed text-muted-foreground">
184184
{project.description}
185185
</CardDescription>
186186
</div>
187187
</CardHeader>
188188

189-
<CardContent className="relative z-10 flex flex-1 flex-col justify-between space-y-6">
190-
<div className="flex flex-wrap justify-center gap-2">
189+
<CardContent className="relative z-10 flex flex-1 flex-col justify-between space-y-4 sm:space-y-6">
190+
<div className="flex flex-wrap justify-center gap-1.5 sm:gap-2">
191191
{project.tags.map((tag) => (
192192
<Badge
193193
key={tag}
@@ -199,26 +199,26 @@ export default function ProjectsPage() {
199199
))}
200200
</div>
201201

202-
<div className="space-y-4">
203-
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
204-
<Briefcase className="h-4 w-4" />
205-
<span className="font-medium">Created by {project.intern_name}</span>
202+
<div className="space-y-3 sm:space-y-4">
203+
<div className="flex items-center justify-center gap-2 text-xs sm:text-sm text-muted-foreground">
204+
<Briefcase className="h-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" />
205+
<span className="font-medium text-center">Created by {project.intern_name}</span>
206206
</div>
207207

208-
<div className="flex justify-center gap-3">
208+
<div className="flex justify-center gap-2 sm:gap-3">
209209
<Button
210210
asChild
211211
size="sm"
212212
variant="outline"
213-
className="rounded-full transition-all duration-200 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent"
213+
className="rounded-full transition-all duration-200 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent text-xs sm:text-sm px-3 sm:px-4"
214214
>
215215
<Link
216216
href={project.github_repository_url}
217217
target="_blank"
218218
rel="noopener noreferrer"
219-
className="flex items-center gap-2"
219+
className="flex items-center gap-1.5 sm:gap-2"
220220
>
221-
<Github className="h-4 w-4" />
221+
<Github className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
222222
<span>Code</span>
223223
<ExternalLink className="h-3 w-3" />
224224
</Link>
@@ -228,15 +228,15 @@ export default function ProjectsPage() {
228228
asChild
229229
size="sm"
230230
variant="outline"
231-
className="rounded-full transition-all duration-200 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent"
231+
className="rounded-full transition-all duration-200 hover:bg-primary hover:text-primary-foreground hover:border-primary bg-transparent text-xs sm:text-sm px-3 sm:px-4"
232232
>
233233
<Link
234234
href={project.intern_linkedin}
235235
target="_blank"
236236
rel="noopener noreferrer"
237-
className="flex items-center gap-2"
237+
className="flex items-center gap-1.5 sm:gap-2"
238238
>
239-
<Linkedin className="h-4 w-4" />
239+
<Linkedin className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
240240
<span>Profile</span>
241241
<ExternalLink className="h-3 w-3" />
242242
</Link>

0 commit comments

Comments
 (0)