From 350e96b9544d9ba65f44eb88a945851c384446f7 Mon Sep 17 00:00:00 2001
From: Eat Tren Clen Hard <125723190+eattrenclenhard@users.noreply.github.com>
Date: Thu, 28 Nov 2024 17:47:58 +0800
Subject: [PATCH] Removes white strip at the bottom border of the footer and
 crops the profile image to fit into the spherical container so that it won't
 flow out

---
 src/app/components/Footer.jsx      |  2 +-
 src/app/components/HeroSection.jsx |  4 ++--
 src/app/globals.css                | 10 ++++++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx
index 09b8e75e..f07afe17 100644
--- a/src/app/components/Footer.jsx
+++ b/src/app/components/Footer.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <footer className="footer border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-white">
+    <footer className="footer border z-10 border-t-[#33353F] border-l-transparent border-r-transparent border-b-transparent text-white">
       <div className="container p-12 flex justify-between">
         <span>LOGO</span>
         <p className="text-slate-600">All rights reserved.</p>
diff --git a/src/app/components/HeroSection.jsx b/src/app/components/HeroSection.jsx
index 6f1ab7fe..f7c87f9b 100644
--- a/src/app/components/HeroSection.jsx
+++ b/src/app/components/HeroSection.jsx
@@ -63,11 +63,11 @@ const HeroSection = () => {
           transition={{ duration: 0.5 }}
           className="col-span-4 place-self-center mt-4 lg:mt-0"
         >
-          <div className="rounded-full bg-[#181818] w-[250px] h-[250px] lg:w-[400px] lg:h-[400px] relative">
+          <div className="rounded-full bg-[#181818] w-[250px] h-[250px] lg:w-[400px] lg:h-[400px] relative pfp-container">
             <Image
               src="/images/hero-image.png"
               alt="hero image"
-              className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+              className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 pfp"
               width={300}
               height={300}
             />
diff --git a/src/app/globals.css b/src/app/globals.css
index fd81e885..d013a743 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,3 +25,13 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+.pfp-container {
+  overflow: hidden;
+}
+
+.pfp {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}