fix: light mode appearance issue

Author: lassiecoder

src/app/globals.css

@@ -18,7 +18,12 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background-color: rgb(var(--background-start-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
 }
 
 @layer utilities {

src/app/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="font-sans">
+    <div className="font-sans bg-black">
       <HomeScreen />
       <About />
       <Experience />

src/app/pages/about.tsx

@@ -7,9 +7,9 @@ import { HiMiniBellAlert } from "react-icons/hi2";
 
 const About = () => {
   return (
-    <div className="max-w-7xl mx-auto px-4">
+    <div className=" max-w-7xl mx-auto px-4">
       <div className="px-4">
-        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 ">
+        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 text-white">
           About me
         </h2>
       </div>

src/app/pages/articles.tsx

@@ -16,7 +16,7 @@ export function Article() {
   return (
     <div className="max-w-7xl mx-auto px-4 mt-32 pb-20 overflow-hidden font-medium">
       <div className="px-4">
-        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left xl:pl-0 lg:mb-0 lg:pl-5 sm:mb-0 sm:pl-2">
+        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left xl:pl-0 lg:mb-0 lg:pl-5 sm:mb-0 sm:pl-2 text-white">
           Articles
         </h2>
       </div>

src/app/pages/contact.tsx

@@ -24,7 +24,7 @@ const ContactForm = () => {
           <div className="flex flex-col items-start w-full sm:flex-row sm:header-container">
             <div className="title-box">
               <p
-                className="text"
+                className="text text-white"
                 style={{ width: "max-content", marginRight: "0.8rem" }}
               >
                 I&apos;m open for

src/app/pages/experience.tsx

@@ -311,7 +311,7 @@ export function Experience() {
   return (
     <div className="max-w-7xl mx-auto px-4 mt-20 ">
       <div className="px-4">
-        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 ">
+        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 text-white">
           Experience
         </h2>
       </div>

src/app/pages/homescreen.tsx

@@ -17,7 +17,7 @@ export default function HomeScreen() {
     <div className="h-screen ">
       {/* home screen */}
       <Footer />
-      <div className="h-screen w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
+      <div className="h-screen w-full bg-black flex flex-col items-center justify-center overflow-hidden">
         <h1 className="md:text-5xl text-2xl lg:text-6xl font-bold text-center text-white relative z-20 mt-30">
           <div className="flex header-container">
             <div className="subtitle-box ">

src/app/pages/projects.tsx

@@ -52,7 +52,7 @@ const ThreeDCard = () => {
   return (
     <div className="max-w-7xl mx-auto px-4 mt-20">
       <div className="px-4">
-        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12">
+        <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 text-white">
           Projects
         </h2>
       </div>