fix: adjust layout and styling in footer and projects page

Author: pphatdev

src/app/projects/page.tsx

@@ -191,7 +191,6 @@ const ProjectsContent = () => {
                     </InfiniteScroll>
                 </article>
             </BlurFade>
-
             <Footer />
         </main>
     );
@@ -203,7 +202,7 @@ const Projects = () => {
             <main className="w-full flex flex-col gap-7 pb-5">
                 <ProjectsStructuredData />
                 <NavigationBar />
-                <div className="flex justify-center items-center min-h-[400px]">
+                <div className="flex justify-center items-center min-h-100">
                     <Spinner variant={'bars'} />
                 </div>
             </main>

src/components/layouts/footer.tsx

@@ -10,7 +10,7 @@ import {
 import { GitHubIcon } from "../icons/github";
 // import { LinkedInIcon } from "../icons/linkedin";
 // import { TwitterLogoIcon } from "@radix-ui/react-icons";
-import { ArrowLeftIcon, ArrowRightIcon, MailCheckIcon } from "lucide-react";
+import { ArrowRightIcon, MailCheckIcon } from "lucide-react";
 import { Button } from "../ui";
 // import { Github, Linkedin, Twitter, Mail } from "lucide-react";
 
@@ -54,20 +54,16 @@ export default function Footer() {
     const currentYear = new Date().getFullYear();
 
     return (
-        <footer className="w-full border-t px-3 border-border/40 bg-gradient-to-b from-background via-background/95 to-background backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <div className="max-w-5xl mx-auto max-sm:px-5 py-12 md:py-16 lg:py-20">
+        <footer className="w-full border-t px-3 border-border/40 bg-linear-to-b from-background via-background/95 to-background backdrop-blur supports-backdrop-filter:bg-background/60">
+            <div className="max-w-5xl mx-auto max-sm:px-5 py-12 md:py-16">
                 {/* Main Footer Content */}
-                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12 mb-12">
+                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12 mb-12 sm:px-5">
                     {/* Brand Section */}
                     <div className="col-span-2 md:col-span-4 lg:col-span-1 space-y-4">
                         <Link href="/" className="inline-block group">
-                            <h2 className="text-xl font-bold text-primary group-hover:text-primary transition-colors">
-                                Sophat L.
-                            </h2>
+                            <h2 className="text-xl font-bold text-primary group-hover:text-primary transition-colors">Sophat L.</h2>
                         </Link>
-                        <p className="text-sm text-muted-foreground max-w-xs leading-relaxed">
-                            Building scalable systems & crafting digital experiences.
-                        </p>
+                        <p className="text-sm text-muted-foreground max-w-xs leading-relaxed"> Building scalable systems & crafting digital experiences. </p>
                     </div>
 
                     {/* Product Links */}
@@ -76,7 +72,7 @@ export default function Footer() {
                         <ul className="gap-2">
                             {footerLinks.product.map((link) => (
                                 <li key={link.href}>
-                                    <Button asChild className="mt-0 text-foreground hover:text-primary -translate-x-2.5">
+                                    <Button asChild className="mt-0 text-foreground/70 h-7 text-xs hover:text-primary -translate-x-2.5">
                                         <Link href={link.href}>
                                             <ArrowRightIcon className='w-4 h-4' /> {link.label}
                                         </Link>
@@ -92,7 +88,7 @@ export default function Footer() {
                         <ul className="gap-2">
                             {footerLinks.company.map((link) => (
                                 <li key={link.href}>
-                                    <Button asChild className="mt-0 text-foreground hover:text-primary -translate-x-2.5">
+                                    <Button asChild className="mt-0 text-foreground/70 h-7 text-xs hover:text-primary -translate-x-2.5">
                                         <Link href={link.href}>
                                             <ArrowRightIcon className='w-4 h-4' /> {link.label}
                                         </Link>
@@ -108,7 +104,7 @@ export default function Footer() {
                         <ul className="gap-2">
                             {footerLinks.resources.map((link) => (
                                 <li key={link.href}>
-                                    <Button asChild className="mt-0 text-foreground hover:text-primary -translate-x-2.5">
+                                    <Button asChild className="mt-0 text-foreground/70 h-7 text-xs hover:text-primary -translate-x-2.5">
                                         <Link href={link.href}>
                                             <ArrowRightIcon className='w-4 h-4' /> {link.label}
                                         </Link>
@@ -127,7 +123,7 @@ export default function Footer() {
 
                                 return (
                                     <li key={link.href}>
-                                        <Button asChild className="mt-0 text-foreground hover:text-primary -translate-x-2.5">
+                                        <Button asChild className="mt-0 text-foreground/70 h-7 text-xs hover:text-primary -translate-x-2.5">
                                             <Link href={link.href}>
                                                 <ArrowRightIcon className='w-4 h-4' /> {link.label}
                                             </Link>
@@ -141,7 +137,7 @@ export default function Footer() {
 
                 {/* Bottom Bar */}
                 <div className="pt-8 border-t border-border/40">
-                    <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+                    <div className="flex flex-col md:flex-row justify-between items-center gap-4 sm:px-5">
                         <div className="flex items-center gap-2">
                             <p className="text-sm text-muted-foreground text-center md:text-left">
                                 Copyright © {currentYear}{" "}