Fix(Landing Page): text padding issue where letters were getting cut off (#814)

Author: Aditya30ag

landing-page/src/Pages/FaqPage/FAQ.tsx

@@ -45,7 +45,7 @@ export default function FAQ() {
   }, [darkMode]);
 
   return (
-    <section className="relative py-20 overflow-hidden min-h-screen transition-colors duration-300 bg-gray-50 text-black dark:bg-black dark:text-white">
+    <section className="relative py-20 overflow-hidden min-h-screen transition-colors duration-300 text-black dark:bg-black dark:text-white">
       <BackgroundAnimation darkMode={darkMode} />
 
       <div className="container relative z-10 mx-auto px-4 md:px-8">
@@ -55,7 +55,7 @@ export default function FAQ() {
           transition={{ duration: 0.8 }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-green-600 dark:from-yellow-400 dark:to-green-500">
+          <h2 className="text-4xl md:text-5xl font-bold py-2 mb-6 bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-green-600 dark:from-yellow-400 dark:to-green-500">
             Frequently Asked Questions
           </h2>
           <p className="max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-300">

landing-page/src/Pages/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import { FaDiscord } from 'react-icons/fa'  // Import Discord icon from React Ic
 
 const Footer: React.FC = () => {
   return (
-    <footer className="relative bg-black text-white py-8 overflow-hidden">
+    <footer className="relative bg-white dark:bg-black text-black dark:text-white py-8 overflow-hidden border-t border-black dark:border-white transition-colors duration-300">
       <div className="relative container mx-auto px-6">
         <div className="flex justify-between items-center">
           {/* Left-aligned PictoPy text */}

landing-page/src/Pages/Landing page/Home1.tsx

@@ -29,7 +29,7 @@ const ShuffleHero = () => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ duration: 1, delay: 0.2 }}
-          className="text-4xl md:text-6xl font-bold tracking-tight bg-gradient-to-r from-yellow-500 to-green-500 text-transparent bg-clip-text"
+          className="text-4xl md:text-6xl font-bold tracking-tight bg-gradient-to-r from-yellow-500 to-green-500 text-transparent bg-clip-text py-2"
         >
           PictoPy
         </motion.h3>

landing-page/src/Pages/pictopy-landing.tsx

@@ -126,7 +126,7 @@ const PictopyLanding: FC = () => {
               alt="Pictopy Logo"
               className="h-16 w-16 object-contain"
             />
-            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-green-500 transition-all duration-300">
+            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-green-500 transition-all duration-300 py-2">
               PictoPy
             </h1>
           </div>