🐛(frontend) fix broken animation when motion is reduced

Feedback from one of our users.
I forgot animation can be disabled for accessibility purpose.
Fix it by bypassing the animation if reduce motion is activated.
Oopsie, mybad, I learnt something.

src/frontend/src/features/home/routes/Home.tsx

@@ -32,8 +32,13 @@ const Columns = ({ children }: { children?: ReactNode }) => {
         justifyContent: 'normal',
         padding: '0 1rem',
         width: 'calc(100% - 2rem)',
-        opacity: 0,
-        animation: '.5s ease-in fade 0s forwards',
+        '@media(prefers-reduced-motion: reduce)': {
+          opacity: 1,
+        },
+        '@media(prefers-reduced-motion: no-preference)': {
+          opacity: 0,
+          animation: '.5s ease-in fade 0s forwards',
+        },
         lg: {
           flexDirection: 'row',
           justifyContent: 'center',