From 6df78f254d98453520e8644996b917d673ee3978 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Tue, 23 Sep 2025 15:05:48 -0700
Subject: initial mobile CSS style

---
 frontend/src/pages/Landing.tsx | 50 +++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

(limited to 'frontend/src/pages/Landing.tsx')

diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index c607cee..5ca4459 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -14,16 +14,16 @@ const Landing = () => {
               </div>
               <span className="text-white font-semibold text-lg">Mirage</span>
             </div>
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2 sm:space-x-4">
               <Link
                 to="/login"
-                className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                className="text-slate-300 hover:text-white px-2 sm:px-3 py-2 rounded-md text-sm font-medium transition-colors"
               >
                 Log In
               </Link>
               <Link
                 to="/register"
-                className="bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
+                className="bg-violet-600 hover:bg-violet-700 text-white px-3 sm:px-4 py-2 rounded-md text-sm font-medium transition-colors"
               >
                 Create Account
               </Link>
@@ -32,7 +32,7 @@ const Landing = () => {
         </div>
       </nav>
 
-      <section className="relative py-18 lg:py-24 overflow-hidden">
+      <section className="relative py-12 sm:py-18 lg:py-24 overflow-hidden">
         {/* Background Image */}
         <div
           className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
@@ -48,10 +48,10 @@ const Landing = () => {
         {/* Content */}
         <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="max-w-4xl">
-            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 sm:mb-6 leading-tight">
               Welcome to <span className="text-violet-400">Mirage!</span>
             </h1>
-            <p className="text-xl text-slate-300 mb-8 leading-relaxed">
+            <p className="text-lg sm:text-xl text-slate-300 mb-6 sm:mb-8 leading-relaxed">
               Looks like you're not logged in. If you've got an account,{" "}
               <Link
                 to="/login"
@@ -65,17 +65,17 @@ const Landing = () => {
       </section>
 
       {/* Introduction Section */}
-      <section className="py-8 border-t border-slate-800">
+      <section className="py-6 sm:py-8 border-t border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="max-w-4xl">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
               What is this?
             </h2>
-            <p className="text-lg text-slate-300 leading-relaxed">
+            <p className="text-base sm:text-lg text-slate-300 leading-relaxed">
               <span className="font-semibold text-violet-300">Mirage</span> is a
               flexible Rhythm Game Score Tracker that works without relying on
               predefined seeds. It offers a lightweight alternative that can act
-              as a holdover for tracking scores when chart metadata isn’t
+              as a holdover for tracking scores when chart metadata isn't
               readily available.
             </p>
           </div>
@@ -83,13 +83,13 @@ const Landing = () => {
       </section>
 
       {/* Track Your Scores Section */}
-      <section className="py-8 border-t border-slate-800">
+      <section className="py-6 sm:py-8 border-t border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="max-w-4xl">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
               <span className="text-violet-400">Track</span> Your Scores
             </h2>
-            <p className="text-lg text-slate-300 leading-relaxed">
+            <p className="text-base sm:text-lg text-slate-300 leading-relaxed">
               Mirage lets you import scores from the games you play for
               safe-keeping, so you can prevent losing them to the void should
               anything ever happen.
@@ -99,13 +99,13 @@ const Landing = () => {
       </section>
 
       {/* Add your own games */}
-      <section className="py-8 border-t border-slate-800">
+      <section className="py-6 sm:py-8 border-t border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="max-w-4xl">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
               <span className="text-purple-400">Add</span> Your Own Games
             </h2>
-            <p className="text-lg text-slate-300 leading-relaxed">
+            <p className="text-base sm:text-lg text-slate-300 leading-relaxed">
               While not as robust as other seed-based systems. Mirage makes it
               easy for you to track and keep score for any game, no matter how
               niche it is.
@@ -115,13 +115,13 @@ const Landing = () => {
       </section>
 
       {/* Join with others */}
-      <section className="py-8 border-t border-slate-800">
+      <section className="py-6 sm:py-8 border-t border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="max-w-4xl">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
               Mirage <span className="text-violet-400">Together</span>
             </h2>
-            <p className="text-lg text-slate-300 leading-relaxed">
+            <p className="text-base sm:text-lg text-slate-300 leading-relaxed">
               Mirage is easily self-hostable and can be used locally for a single person or hosted so you can track scores with your friends. Everything is open-source.
             </p>
           </div>
@@ -129,22 +129,22 @@ const Landing = () => {
       </section>
 
       {/* Call to Action Section */}
-      <section className="py-12 border-t border-slate-800 bg-slate-900">
+      <section className="py-8 sm:py-12 border-t border-slate-800 bg-slate-900">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center max-w-2xl mx-auto">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-6 sm:mb-8">
               Ready to Start <span className="text-violet-400">Tracking?</span>
             </h2>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <Link
                 to="/register"
-                className="bg-violet-600 hover:bg-violet-700 text-white px-8 py-3 rounded-md text-lg font-medium transition-colors min-w-[200px] shadow-lg shadow-violet-600/25"
+                className="w-full sm:w-auto bg-violet-600 hover:bg-violet-700 text-white px-6 sm:px-8 py-3 rounded-md text-base sm:text-lg font-medium transition-colors min-w-[200px] shadow-lg shadow-violet-600/25 text-center"
               >
                 Create Account
               </Link>
               <Link
                 to="/login"
-                className="border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white px-8 py-3 rounded-md text-lg font-medium transition-colors min-w-[200px]"
+                className="w-full sm:w-auto border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white px-6 sm:px-8 py-3 rounded-md text-base sm:text-lg font-medium transition-colors min-w-[200px] text-center"
               >
                 Log In
               </Link>
@@ -154,7 +154,7 @@ const Landing = () => {
       </section>
 
       {/* Footer */}
-      <footer className="border-t border-slate-800 py-12 bg-slate-950">
+      <footer className="border-t border-slate-800 py-8 sm:py-12 bg-slate-950">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center text-slate-400">
             <a className="hover:underline" href="">
@@ -167,4 +167,4 @@ const Landing = () => {
   );
 };
 
-export default Landing;
+export default Landing;
\ No newline at end of file
-- 
cgit v1.2.3