Zeff01 · austriaj12 · Jul 15, 2026
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.2.4"
+    "next": "15.2.4",
+    "gsap": "^3.12.5"
   },
   "devDependencies": {
     "typescript": "^5",

diff --git a/frontend/public/images/clean-phone.jpg b/frontend/public/images/clean-phone.jpg
diff --git a/frontend/public/images/clean-phone.png b/frontend/public/images/clean-phone.png
diff --git a/frontend/public/images/foodpanda.png b/frontend/public/images/foodpanda.png
diff --git a/frontend/public/images/gift-card.png b/frontend/public/images/gift-card.png
diff --git a/frontend/public/images/gift-card.webp b/frontend/public/images/gift-card.webp
diff --git a/frontend/public/images/grab.png b/frontend/public/images/grab.png
diff --git a/frontend/public/images/hero-phone.png b/frontend/public/images/hero-phone.png
diff --git a/frontend/public/images/lazada.png b/frontend/public/images/lazada.png
diff --git a/frontend/public/images/netflix.png b/frontend/public/images/netflix.png
diff --git a/frontend/public/images/nike.jpg b/frontend/public/images/nike.jpg
diff --git a/frontend/public/images/shopee.png b/frontend/public/images/shopee.png
diff --git a/frontend/public/images/spotify.png b/frontend/public/images/spotify.png
diff --git a/frontend/public/images/starbucks.jpg b/frontend/public/images/starbucks.jpg
diff --git a/frontend/public/images/steam.png b/frontend/public/images/steam.png
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -22,5 +22,42 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  scroll-behavior: smooth;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom modern scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #08070b;
+}
+::-webkit-scrollbar-thumb {
+  background: #1e1b2b;
+  border-radius: 9999px;
+  border: 2px solid #08070b;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #2e2a47;
+}
+
+/* Custom simple keyframes for page interactions */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >