Skip to content

Commit 217f327

Browse files
akshay0611akshay0611
committed
style(opportunities): Improve responsive design for Opportunities page
- Adjust section padding and spacing for better mobile responsiveness - Reduce font sizes and adjust layout for smaller screen sizes - Optimize gradient and blur effect positioning for mobile views - Resize icons, buttons, and card elements to scale appropriately - Fine-tune text and button sizes across different breakpoints - Enhance overall mobile and responsive layout for Opportunities page
1 parent 4e28a41 commit 217f327

1 file changed

Lines changed: 20 additions & 20 deletions

File tree

‎app/opportunities/page.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function OpportunitiesPage() {
6565
<div className="flex flex-col overflow-hidden bg-gradient-to-br from-background via-background to-muted/10 min-h-screen">
6666
<Header />
6767
{/* Hero Section */}
68-
<section className="py-20 md:py-32 relative overflow-hidden">
68+
<section className="py-32 sm:py-16 md:py-24 lg:py-32 relative overflow-hidden">
6969
<div
7070
className={cn(
7171
"absolute inset-0",
@@ -77,59 +77,59 @@ export default function OpportunitiesPage() {
7777
<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>
7878
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5"></div>
7979
<div className="absolute inset-0">
80-
<div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl"></div>
81-
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
80+
<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>
81+
<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>
8282
</div>
83-
<div className="container px-4 mx-auto relative z-10">
84-
<div className="max-w-4xl mx-auto text-center space-y-8">
83+
<div className="container px-4 sm:px-6 mx-auto relative z-10">
84+
<div className="max-w-4xl mx-auto text-center space-y-6 sm:space-y-8">
8585
<div>
86-
<div className="flex flex-col items-center justify-center gap-4">
87-
<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">
86+
<div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
87+
<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">
8888
<span className="absolute inset-0 overflow-hidden rounded-full">
8989
<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" />
9090
</span>
91-
<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">
91+
<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">
9292
<span>Opportunities Hub</span>
9393
<Sparkles className="w-3 h-3" />
9494
</div>
9595
<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" />
9696
</button>
9797
</div>
9898
</div>
99-
<h1 className="text-5xl md:text-6xl font-bold tracking-tight leading-tight">
99+
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2">
100100
Unlock All Tech <span className="gradient-text">Opportunities</span> in One Place
101101
</h1>
102-
<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
102+
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed px-2">
103103
Navigate to events, hackathons, projects, tests, jobs, and internships curated for the tech community.
104104
</p>
105105
</div>
106106
</div>
107107
</section>
108108
{/* Opportunities Grid */}
109-
<section className="py-16 bg-gradient-to-b from-muted/30 to-background relative">
110-
<div className="container px-4 mx-auto relative z-10">
111-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
109+
<section className="py-10 sm:py-12 md:py-16 bg-gradient-to-b from-muted/30 to-background relative">
110+
<div className="container px-4 sm:px-6 mx-auto relative z-10">
111+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
112112
{opportunities.map((item) => (
113113
<div key={item.title}>
114114
<Card className={cn(
115115
"group relative overflow-hidden border-0 shadow-xl card-hover bg-gradient-to-br from-background to-muted/20 flex flex-col h-full",
116116
`hover:shadow-2xl`)}>
117117
<CardHeader className="relative z-10 pb-2 flex flex-col items-center">
118118
<div className={cn(
119-
"w-14 h-14 rounded-2xl flex items-center justify-center mb-4 shadow-lg",
119+
"w-12 h-12 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl flex items-center justify-center mb-3 sm:mb-4 shadow-lg",
120120
`bg-gradient-to-br ${item.gradient}`
121121
)}>
122-
<item.icon className="h-7 w-7 text-white drop-shadow-lg" />
122+
<item.icon className="h-6 w-6 sm:h-7 sm:w-7 text-white drop-shadow-lg" />
123123
</div>
124-
<CardTitle className="text-2xl font-bold text-center">
124+
<CardTitle className="text-xl sm:text-2xl font-bold text-center">
125125
{item.title}
126126
</CardTitle>
127-
<CardDescription className="text-base text-muted-foreground text-center">
127+
<CardDescription className="text-sm sm:text-base text-muted-foreground text-center">
128128
{item.description}
129129
</CardDescription>
130130
</CardHeader>
131131
<CardContent className="relative z-10 flex flex-col flex-1 justify-between">
132-
<div className="flex flex-wrap gap-2 justify-center mb-6 mt-2">
132+
<div className="flex flex-wrap gap-2 justify-center mb-4 sm:mb-6 mt-2">
133133
{item.tags.map((tag) => (
134134
<Badge key={tag} variant="outline" className="text-xs bg-background/50 backdrop-blur-sm border-primary/20 hover:bg-primary/10">
135135
{tag}
@@ -139,10 +139,10 @@ export default function OpportunitiesPage() {
139139
<Button
140140
asChild
141141
size="lg"
142-
className="w-full font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg focus:ring-2 focus:ring-primary/40"
142+
className="w-full font-semibold px-4 sm:px-6 py-2 rounded-full text-sm sm:text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg focus:ring-2 focus:ring-primary/40"
143143
>
144144
<Link href={item.href} className="flex items-center justify-center whitespace-nowrap">
145-
Explore <ArrowRight className="ml-2 h-5 w-5" />
145+
Explore <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
146146
</Link>
147147
</Button>
148148
</CardContent>

0 commit comments

Comments
 (0)