From 157e183776e617f510d96a9dab967fdd38c5c913 Mon Sep 17 00:00:00 2001
From: ejminguez <ebminguez@up.edu.ph>
Date: Fri, 11 Jul 2025 23:09:34 +0800
Subject: [PATCH] fix: changed background, more optimization

---
 frontend/src/App.tsx                            | 5 ++---
 frontend/src/components/Home/Greetings.tsx      | 8 ++++----
 frontend/src/components/Home/Hero.tsx           | 6 +++---
 frontend/src/components/Home/HomeBucketList.tsx | 2 +-
 frontend/src/components/Home/Letters.tsx        | 2 +-
 frontend/src/components/Home/MusicPlayer.tsx    | 2 +-
 frontend/src/components/Letter/LetterList.tsx   | 6 +-----
 frontend/src/index.css                          | 7 +------
 frontend/src/pages/Home.tsx                     | 1 -
 frontend/src/pages/Playlist.tsx                 | 2 +-
 frontend/src/router/router.tsx                  | 3 ++-
 11 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0008712..80a0151 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -22,7 +22,6 @@ const App = () => {
   }, []);
 
   useGSAP(() => {
-    // Only load ScrollSmoother on desktop for better performance
     if (!isMobile) {
       import("gsap/ScrollSmoother").then(({ ScrollSmoother }) => {
         import("gsap/ScrollTrigger").then(({ ScrollTrigger }) => {
@@ -31,9 +30,9 @@ const App = () => {
           ScrollSmoother.create({
             wrapper: "#smooth-wrapper",
             content: "#smooth-content",
-            smooth: 1.5, // Reduced from 2 for better performance
+            smooth: 1.5,
             effects: true,
-            smoothTouch: 0.1, // Reduced for mobile performance
+            smoothTouch: 0.1,
           });
         });
       });
diff --git a/frontend/src/components/Home/Greetings.tsx b/frontend/src/components/Home/Greetings.tsx
index f4b0cd0..757e008 100644
--- a/frontend/src/components/Home/Greetings.tsx
+++ b/frontend/src/components/Home/Greetings.tsx
@@ -32,8 +32,8 @@ const Greetings = () => {
     loopTyping();
   }, []);
   return (
-    <section className="relative min-h-screen flex flex-col items-center">
-      <div className="flex flex-col items-center text-center">
+    <section className="relative min-h-[300px] flex flex-col justify-center">
+      <div className="flex flex-col text-center">
         <h1 className="font-lore text-[3rem] text-habilin-red">
           <span ref={typewriterRef} />
         </h1>
@@ -44,14 +44,14 @@ const Greetings = () => {
       <img
         src={flower4}
         loading="lazy"
-        className="absolute top-[30%] -right-[30%] animate-[spin_50s_linear_infinite]"
+        className="absolute top-[65%] -right-[30%]"
         width={150}
         height={150}
       />
       <img
         src={flower4}
         loading="lazy"
-        className="absolute -top-[30%] -left-[25%] animate-[spin_20s_linear_infinite]"
+        className="absolute -top-[50%] -left-[25%]"
         width={200}
         height={200}
       />
diff --git a/frontend/src/components/Home/Hero.tsx b/frontend/src/components/Home/Hero.tsx
index de58477..aa43663 100644
--- a/frontend/src/components/Home/Hero.tsx
+++ b/frontend/src/components/Home/Hero.tsx
@@ -16,9 +16,9 @@ const Hero = () => {
         <img
           src={flower2}
           loading="lazy"
-          className="absolute top-[25%] right-[50%] rotate-6 -z-50 scale-150"
-          width={300}
-          height={300}
+          className="absolute top-[25%] right-[50%] rotate-6 -z-50"
+          width={700}
+          height={700}
         />
         <img
           src={flower1}
diff --git a/frontend/src/components/Home/HomeBucketList.tsx b/frontend/src/components/Home/HomeBucketList.tsx
index 97cd8a6..4bd69dc 100644
--- a/frontend/src/components/Home/HomeBucketList.tsx
+++ b/frontend/src/components/Home/HomeBucketList.tsx
@@ -30,7 +30,7 @@ const HomeBucketList = () => {
     fetchList();
   }, []);
   return (
-    <section className="flex flex-col w-full min-h-screen justify-center">
+    <section className="flex flex-col w-full  justify-center">
       <h1 className="text-[3rem] font-reenie text-right">pangarap</h1>
       {loading ? (
         <p>Loading ...</p>
diff --git a/frontend/src/components/Home/Letters.tsx b/frontend/src/components/Home/Letters.tsx
index 033301f..cea1acf 100644
--- a/frontend/src/components/Home/Letters.tsx
+++ b/frontend/src/components/Home/Letters.tsx
@@ -33,7 +33,7 @@ const Letters = () => {
   }, []);
 
   return (
-    <section className="flex flex-col w-full h-full min-h-screen justify-center">
+    <section className="flex flex-col w-full justify-center">
       <h1 className="text-[3rem] font-reenie">liham</h1>
       {loading ? (
         <div className="flex items-center justify-center h-[60vh]">
diff --git a/frontend/src/components/Home/MusicPlayer.tsx b/frontend/src/components/Home/MusicPlayer.tsx
index 074bb11..7d06010 100644
--- a/frontend/src/components/Home/MusicPlayer.tsx
+++ b/frontend/src/components/Home/MusicPlayer.tsx
@@ -7,7 +7,7 @@ import { useGlobalAudioManager } from "@/hooks/useGlobalAudioManager";
 const MusicPlayer = () => {
   const { currentSong } = useGlobalAudioManager();
   return (
-    <section className="relative flex flex-col min-h-screen justify-center">
+    <section className="relative flex flex-col justify-center">
       <div className="flex flex-col items-center gap-5">
         <div>
           <img
diff --git a/frontend/src/components/Letter/LetterList.tsx b/frontend/src/components/Letter/LetterList.tsx
index 90509d9..be52674 100644
--- a/frontend/src/components/Letter/LetterList.tsx
+++ b/frontend/src/components/Letter/LetterList.tsx
@@ -45,7 +45,7 @@ const LetterList = () => {
 
         console.log("Found cards:", cards.length); // Debug log
 
-        cards.forEach((card, index) => {
+        cards.forEach((card) => {
           gsap.fromTo(
             card,
             { opacity: 0, y: 50 },
@@ -59,15 +59,11 @@ const LetterList = () => {
                 start: "top 85%",
                 end: "bottom 15%",
                 toggleActions: "play reverse play reverse",
-                // markers: true, // enable this for scroll debug
-                onEnter: () => console.log(`Card ${index} entered`), // Debug log
-                onLeave: () => console.log(`Card ${index} left`), // Debug log
               },
             },
           );
         });
 
-        // Refresh ScrollTrigger to recalculate positions
         ScrollTrigger.refresh();
       }, containerRef);
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 03459bf..4a0fa6e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -59,12 +59,7 @@
 }
 
 body {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  background-color: #cbe87b;
-  background-image: url(http://www.transparenttextures.com/patterns/textured-paper.png);
+  background-color: #c1e1c1;
 }
 
 @theme inline {
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index cfbbb43..228b52d 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -12,7 +12,6 @@ const Home = () => {
   useGSAP(() => {
     gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
-    // Create ScrollSmoother
     ScrollSmoother.create({
       wrapper: "#smooth-wrapper",
       content: "#smooth-content",
diff --git a/frontend/src/pages/Playlist.tsx b/frontend/src/pages/Playlist.tsx
index 9f3dfcb..cb6c661 100644
--- a/frontend/src/pages/Playlist.tsx
+++ b/frontend/src/pages/Playlist.tsx
@@ -4,7 +4,7 @@ import Queue from "@/components/Playlist/Queue";
 
 const Playlist = () => {
   return (
-    <section className="relative top-[20vh]">
+    <section className="relative top-[20vh] mb-40">
       <HeroText
         title="himig"
         subtitle="the songs that speak when words fall short"
diff --git a/frontend/src/router/router.tsx b/frontend/src/router/router.tsx
index 0cfa569..0adf217 100644
--- a/frontend/src/router/router.tsx
+++ b/frontend/src/router/router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import { lazy, Suspense } from "react";
 import App from "@/App.tsx";
 import ErrorNotFound from "@/pages/ErrorNotFound.tsx";
+import flower4 from "@/assets/pictures/flower-4-medium.webp";
 
 // Lazy load page components
 const Home = lazy(() => import("@/pages/Home.tsx"));
@@ -13,7 +14,7 @@ const Pangarap = lazy(() => import("@/pages/Pangarap"));
 // Loading component
 const PageLoader = () => (
   <div className="flex items-center justify-center min-h-screen">
-    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+    <img src={flower4} width={80} height={80} className="animate-spin" />
   </div>
 );