Skip to content

Enhance Mobile Responsiveness Across Key Pages #298

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
codeunia-dev merged 4 commits into from
Nov 11, 2025
Merged

Enhance Mobile Responsiveness Across Key Pages #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93b09e7
style(footer): Refine footer layout and responsive design
akshay0611 Nov 11, 2025
847e00a
style(about): Improve responsive design and layout for About page
akshay0611 Nov 11, 2025
4e28a41
style(opportunities): Simplify card hover effects and remove gradient…
akshay0611 Nov 11, 2025
217f327
style(opportunities): Improve responsive design for Opportunities page
akshay0611 Nov 11, 2025
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
54 changes: 27 additions & 27 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,11 +431,11 @@ export default function AboutPage() {
{(() => {
if (loading) return null;
return (
<section className="py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
<section className="py-12 sm:py-16 md:py-20 lg:py-24 relative overflow-hidden bg-gradient-to-br from-primary/10 via-purple-500/10 to-background dark:from-primary/20 dark:via-purple-500/20 dark:to-background">
<div className="absolute inset-0">
<div className="absolute top-10 left-10 w-32 h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
<div className="absolute top-5 sm:top-10 left-5 sm:left-10 w-24 h-24 sm:w-32 sm:h-32 bg-primary/20 dark:bg-primary/30 rounded-full blur-xl animate-float"></div>
<div
className="absolute bottom-10 right-10 w-48 h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
className="absolute bottom-5 sm:bottom-10 right-5 sm:right-10 w-32 h-32 sm:w-48 sm:h-48 bg-purple-500/20 dark:bg-purple-500/30 rounded-full blur-xl animate-float"
style={{ animationDelay: "3s" }}
></div>
</div>
Expand All @@ -458,17 +458,17 @@ export default function AboutPage() {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="container px-4 mx-auto text-center relative z-10"
className="container px-4 sm:px-6 mx-auto text-center relative z-10"
>
<div className="max-w-3xl mx-auto space-y-8 p-8 rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
<div className="max-w-3xl mx-auto space-y-6 sm:space-y-8 p-6 sm:p-8 md:p-10 rounded-2xl sm:rounded-3xl bg-background/50 dark:bg-background/80 backdrop-blur-md border border-primary/10 dark:border-primary/20 shadow-xl">
{user ? (
<>
<div className="flex flex-col items-center justify-center gap-4">
<button className="bg-slate-800 no-underline group cursor-default relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
<div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
<button className="bg-slate-800 no-underline group cursor-default relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block">
<span className="absolute inset-0 overflow-hidden rounded-full">
<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 transition-opacity duration-500 group-hover:opacity-100" />
</span>
<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">
<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">
<span>Welcome Back!</span>
<span>
<Sparkles className="w-3 h-3" />
Expand All @@ -481,9 +481,9 @@ export default function AboutPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2"
>
Ready to Continue Your {" "}
Ready to Continue Your{" "}
<motion.span
className="gradient-text inline-block"
animate={{
Expand All @@ -509,42 +509,42 @@ export default function AboutPage() {
Coding Journey?
</motion.span>
</motion.h1>
<p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
<p className="text-base sm:text-lg md:text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed px-2">
Continue your learning journey with personalized content, track your progress, and connect with our community.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center w-full px-2">
<Button
size="sm"
variant="default"
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-all duration-300"
className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-all duration-300"
asChild
>
<Link href="/protected/dashboard" className="h-full flex items-center justify-center gap-2">
<Rocket className="w-5 h-5" />
<Rocket className="w-4 h-4 sm:w-5 sm:h-5" />
Go to Dashboard
</Link>
</Button>
<Button
size="sm"
variant="outline"
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-transform duration-300"
className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-transform duration-300"
asChild
>
<Link href="/hackathons" className="h-full flex items-center justify-center gap-2">
<Globe className="w-5 h-5" />
<Globe className="w-4 h-4 sm:w-5 sm:h-5" />
View Events
</Link>
</Button>
</div>
</>
) : (
<>
<div className="flex flex-col items-center justify-center gap-4">
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block">
<div className="flex flex-col items-center justify-center gap-3 sm:gap-4">
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs sm:text-sm font-semibold leading-6 text-white inline-block">
<span className="absolute inset-0 overflow-hidden rounded-full">
<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 transition-opacity duration-500 group-hover:opacity-100" />
</span>
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-4 ring-1 ring-white/10">
<div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-1 px-3 sm:px-4 ring-1 ring-white/10">
<span>Start Your Journey 🚀</span>
</div>
<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 transition-opacity duration-500 group-hover:opacity-40" />
Expand All @@ -554,9 +554,9 @@ export default function AboutPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-2"
>
Ready to Begin Your {" "}
Ready to Begin Your{" "}
<motion.span
className="gradient-text inline-block"
animate={{
Expand All @@ -582,29 +582,29 @@ export default function AboutPage() {
Coding Adventure?
</motion.span>
</motion.h1>
<p className="text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed">
<p className="text-base sm:text-lg md:text-xl text-muted-foreground dark:text-muted-foreground/90 leading-relaxed px-2">
Join thousands of developers who are already learning and growing with Codeunia. Transform your career with our comprehensive learning platform.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full">
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center w-full px-2">
<Button
size="sm"
variant="default"
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-all duration-300"
className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-all duration-300"
asChild
>
<Link href="/auth/signup" className="h-full flex items-center justify-center gap-2">
<UserPlus className="w-5 h-5" />
<UserPlus className="w-4 h-4 sm:w-5 sm:h-5" />
Get Started
</Link>
</Button>
<Button
size="sm"
variant="outline"
className="sm:w-auto px-6 py-3 text-base font-semibold hover:scale-105 transition-transform duration-300"
className="w-full sm:w-auto px-6 py-3 text-sm sm:text-base font-semibold hover:scale-105 transition-transform duration-300"
asChild
>
<Link href="/contact" className="h-full flex items-center justify-center gap-2">
<Mail className="w-5 h-5" />
<Mail className="w-4 h-4 sm:w-5 sm:h-5" />
Contact Us
</Link>
</Button>
Expand Down
Loading
Loading