mobile landing page height fix

Author: ahmedkhaleel2004

Diff for: src/app/page.tsx

@@ -3,8 +3,8 @@ import Hero from "~/components/hero";
 
 export default function HomePage() {
   return (
-    <main className="flex-grow p-8">
-      <div className="mx-auto my-4 max-w-4xl lg:my-8">
+    <main className="flex-grow px-8 pb-8 md:p-8">
+      <div className="mx-auto mb-4 max-w-4xl lg:my-8">
         <Hero />
         <div className="mt-12"></div>
         <p className="mx-auto mt-8 max-w-2xl text-center text-lg">

Diff for: src/components/hero.tsx

@@ -4,7 +4,7 @@ const Hero = () => {
   return (
     <div className="relative mx-auto flex w-full flex-col items-start justify-center sm:flex-row sm:items-center">
       <svg
-        className="left-0 h-auto w-16 flex-shrink-0 -translate-x-2 translate-y-8 p-2 sm:absolute sm:w-20 sm:-translate-y-16 md:relative md:w-24 md:-translate-y-0 md:translate-x-10 lg:absolute lg:ml-32 lg:-translate-x-full lg:-translate-y-10"
+        className="left-0 h-auto w-16 flex-shrink-0 -translate-x-2 translate-y-4 p-2 sm:absolute sm:w-20 sm:-translate-y-16 md:relative md:w-24 md:-translate-y-0 md:translate-x-10 lg:absolute lg:ml-32 lg:-translate-x-full lg:-translate-y-10"
         viewBox="0 0 91 98"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"