replace stub info on landing page

1 files changed, 43 insertions, 27 deletions

diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index 7cd0f43..c607cee 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -1,4 +1,5 @@
-import { Link } from 'react-router';
+import { Link } from "react-router";
+import sakuraMirageImage from "../assets/games/mirage.webp";
 
 const Landing = () => {
   return (
@@ -31,11 +32,15 @@ const Landing = () => {
         </div>
       </nav>
 
-      {/* Hero Section with Banner */}
-      <section className="relative py-32 lg:py-40 overflow-hidden">
+      <section className="relative py-18 lg:py-24 overflow-hidden">
         {/* Background Image */}
-        <div className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
-             style={{backgroundImage: "url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"}}></div>
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+          style={{
+            backgroundImage: `url(${sakuraMirageImage})`,
+            backgroundPosition: "center top",
+          }}
+        ></div>
 
         {/* Overlay */}
         <div className="absolute inset-0 bg-slate-950/60"></div>
@@ -47,75 +52,84 @@ const Landing = () => {
               Welcome to <span className="text-violet-400">Mirage!</span>
             </h1>
             <p className="text-xl text-slate-300 mb-8 leading-relaxed">
-              Looks like you're not logged in. If you've got an account, <Link to="/login" className="text-violet-400 hover:text-violet-300 underline">Login!</Link>
+              Looks like you're not logged in. If you've got an account,{" "}
+              <Link
+                to="/login"
+                className="text-violet-400 hover:text-violet-300 underline"
+              >
+                Login!
+              </Link>
             </p>
           </div>
         </div>
       </section>
 
       {/* Introduction Section */}
-      <section className="py-16 border-t border-slate-800">
+      <section className="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">
-              I'm New Around Here, What is this?
+              What is this?
             </h2>
             <p className="text-lg text-slate-300 leading-relaxed">
-              <span className="font-semibold text-violet-300">Mirage</span> is a Rhythm Game Score Tracker. That means we...
+              <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
+              readily available.
             </p>
           </div>
         </div>
       </section>
 
       {/* Track Your Scores Section */}
-      <section className="py-16 border-t border-slate-800">
+      <section className="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">
-              <span className="text-violet-400">Track</span> Your Scores.
+              <span className="text-violet-400">Track</span> Your Scores
             </h2>
             <p className="text-lg text-slate-300 leading-relaxed">
-              Mirage supports a bunch of your favourite games, and integrates with many existing services to
-              make sure no score is lost to the void. Furthermore, it's backed by an Open-Source API, so your
-              scores are always available!
+              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.
             </p>
           </div>
         </div>
       </section>
 
-      {/* Analyse Your Scores Section */}
-      <section className="py-16 border-t border-slate-800">
+      {/* Add your own games */}
+      <section className="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">
-              <span className="text-purple-400">Analyse</span> Your Scores.
+              <span className="text-purple-400">Add</span> Your Own Games
             </h2>
             <p className="text-lg text-slate-300 leading-relaxed">
-              Mirage analyses your scores for you, breaking them down into all the statistics you'll ever need.
-              No more spreadsheets!
+              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.
             </p>
           </div>
         </div>
       </section>
 
-      {/* Provide Cool Features Section */}
-      <section className="py-16 border-t border-slate-800">
+      {/* Join with others */}
+      <section className="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">
-              Provide <span className="text-violet-400">Cool Features</span>.
+              Mirage <span className="text-violet-400">Together</span>
             </h2>
             <p className="text-lg text-slate-300 leading-relaxed">
-              Mirage implements the features rhythm gamers already talk about. Break your scores down
-              into sessions, showcase your best metrics on your profile, study your progress on folders - it's all
-              there, and done for you!
+              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>
         </div>
       </section>
 
       {/* Call to Action Section */}
-      <section className="py-20 border-t border-slate-800 bg-slate-900">
+      <section className="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">
@@ -143,7 +157,9 @@ const Landing = () => {
       <footer className="border-t border-slate-800 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="">GitHub</a>
+            <a className="hover:underline" href="">
+              GitHub
+            </a>
           </div>
         </div>
       </footer>