fix: improve mobile layout issues

landing-page/app/components/footer.tsx

@@ -1,4 +1,4 @@
-import { Github, Twitter, Mail, Heart } from "lucide-react"
+import { Github, Twitter, Mail, Heart } from "lucide-react";
 
 export default function Footer() {
   return (
@@ -14,7 +14,9 @@ export default function Footer() {
               />
               <span className="text-xl font-bold">Meetingnotes</span>
             </div>
-            <p className="text-gray-400 mb-4">Free Open-Source AI Notetaker for macOS</p>
+            <p className="text-gray-400 mb-4">
+              Free Open-Source AI Notetaker for macOS
+            </p>
             <div className="flex space-x-4">
               <a
                 href="https://github.com/owengretzinger/meetingnotes"
@@ -22,10 +24,16 @@ export default function Footer() {
               >
                 <Github className="w-5 h-5" />
               </a>
-              <a href="https://x.com/owengretzinger" className="text-gray-400 hover:text-white transition-colors">
+              <a
+                href="https://x.com/owengretzinger"
+                className="text-gray-400 hover:text-white transition-colors"
+              >
                 <Twitter className="w-5 h-5" />
               </a>
-              <a href="mailto:[email protected]" className="text-gray-400 hover:text-white transition-colors">
+              <a
+                href="mailto:[email protected]"
+                className="text-gray-400 hover:text-white transition-colors"
+              >
                 <Mail className="w-5 h-5" />
               </a>
             </div>
@@ -35,22 +43,34 @@ export default function Footer() {
             <h4 className="font-semibold mb-4">Product</h4>
             <ul className="space-y-2 text-gray-400">
               <li>
-                <a href="#features" className="hover:text-white transition-colors">
+                <a
+                  href="#features"
+                  className="hover:text-white transition-colors"
+                >
                   Features
                 </a>
               </li>
               <li>
-                <a href="#how-it-works" className="hover:text-white transition-colors">
+                <a
+                  href="#how-it-works"
+                  className="hover:text-white transition-colors"
+                >
                   How it Works
                 </a>
               </li>
               <li>
-                <a href="/download" className="hover:text-white transition-colors">
+                <a
+                  href="/download"
+                  className="hover:text-white transition-colors"
+                >
                   Download
                 </a>
               </li>
               <li>
-                <a href="/changelog" className="hover:text-white transition-colors">
+                <a
+                  href="/changelog"
+                  className="hover:text-white transition-colors"
+                >
                   Changelog
                 </a>
               </li>
@@ -61,7 +81,10 @@ export default function Footer() {
             <h4 className="font-semibold mb-4">Community</h4>
             <ul className="space-y-2 text-gray-400">
               <li>
-                <a href="https://github.com/owengretzinger/meetingnotes" className="hover:text-white transition-colors">
+                <a
+                  href="https://github.com/owengretzinger/meetingnotes"
+                  className="hover:text-white transition-colors"
+                >
                   GitHub Repo
                 </a>
               </li>
@@ -96,7 +119,10 @@ export default function Footer() {
             <h4 className="font-semibold mb-4">Legal</h4>
             <ul className="space-y-2 text-gray-400">
               <li>
-                <a href="/privacy" className="hover:text-white transition-colors">
+                <a
+                  href="/privacy"
+                  className="hover:text-white transition-colors"
+                >
                   Privacy Policy
                 </a>
               </li>
@@ -114,7 +140,10 @@ export default function Footer() {
                 </a>
               </li>
               <li>
-                <a href="/contact" className="hover:text-white transition-colors">
+                <a
+                  href="/contact"
+                  className="hover:text-white transition-colors"
+                >
                   Contact
                 </a>
               </li>
@@ -122,18 +151,16 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+        <div className="border-t border-gray-800 pt-8 flex flex-col items-center space-y-4 md:flex-row md:justify-between md:space-y-0">
-          <p className="text-gray-400 text-sm mb-4 md:mb-0">
+          <p className="text-gray-400 text-sm mb-0 text-center">
-            Copyright © Owen Gretzinger {new Date().getFullYear()}. Licensed under LGPL-3.0 License. All rights
+            Copyright © Owen Gretzinger {new Date().getFullYear()}. Licensed
-            reserved.
+            under LGPL-3.0 License. All rights reserved.
+          </p>
+          <p className="text-gray-400 text-sm text-center">
+            Created by Owen Gretzinger with ❤️ for the community
           </p>
-          <div className="flex items-center space-x-2 text-gray-400 text-sm">
-            <span>Created by Owen Gretzinger with</span>
-            <Heart className="w-4 h-4 text-red-500" />
-            <span>for the community</span>
-          </div>
         </div>
       </div>
     </footer>
-  )
+  );
 }

landing-page/app/components/header.tsx

@@ -40,14 +40,14 @@ export default function Header() {
             asChild
           >
             <a href="https://github.com/owengretzinger/meetingnotes">
-              <Github className="w-4 h-4 mr-2" />
+              <Github className="w-4 h-4 md:mr-2" />
-              Star
+              <span className="hidden md:inline">Star</span>
             </a>
           </Button>
           <Button size="sm" className="bg-blue-600 hover:bg-blue-700" asChild>
             <a href="/download">
-              <Download className="w-4 h-4 mr-2" />
+              <Download className="w-4 h-4 md:mr-2" />
-              Download
+              <span className="hidden md:inline">Download</span>
             </a>
           </Button>
         </div>

landing-page/app/components/hero.tsx

@@ -7,7 +7,7 @@ export default function Hero() {
     <section className="pb-6 pt-12 px-4 bg-gradient-to-b from-black to-gray-900">
       <div className="container mx-auto text-center">
         <Badge variant="secondary" className="mb-8 bg-blue-600/20 text-blue-400 border-blue-600/30">
-          ✨ Open-Source Alternative to Granola – Completely Free!
+          ✨ Free Open-Source Alternative to Granola!
         </Badge>
 
         <h1 className="text-5xl md:text-7xl font-bold mb-6 pb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">