Feature/photo collage mobile support

frontend/package.json

@@ -11,6 +11,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "gsap": "^3.13.0",
     "motion": "^12.23.22",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"

frontend/src/index.css

@@ -32,3 +32,59 @@ section[id] {
 .animate-fade-in {
   animation: fadeIn 1s ease-out forwards;
 }
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes floatAndSpin {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(180deg);
+  }
+}
+
+@keyframes floatAndSpinReverse {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-8px) rotate(-180deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin 8s linear infinite;
+}
+
+.animate-spin-reverse {
+  animation: spin 10s linear infinite reverse;
+}
+
+.animate-float-spin {
+  animation: floatAndSpin 6s ease-in-out infinite;
+}
+
+.animate-float-spin-reverse {
+  animation: floatAndSpinReverse 7s ease-in-out infinite;
+}

frontend/src/types/images.d.ts

@@ -19,8 +19,10 @@ declare module '*.gif' {
 }
 
 declare module '*.svg' {
-  const value: string;
-  export default value;
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
 }
 
 declare module '*.webp' {