Improve landing page design with animated background

[Teddy1792]

Description

Implement a simple animated background using SVG and CSS to enhance the visual appeal of the landing page.
The background should feature thin radiating rectangles, rotating slowly around the logo.

Motivation

This will make the landing page look more polished and modern, without adding heavy assets or dependencies.

Tasks

• Create SVG from the logo
• Create SVG rays radiating from the logo
• Animate rotation with CSS keyframes
• Ensure responsiveness on different screen sizes
• Verify accessibility and performance

Result (animated with a slow rotation):

[joelamouche]

The background is slightly distracting imho. Maybe make it more transparent?

[joelamouche]

Or maybe the text blocks should have a blurred background?

[Teddy1792]

I did think about giving the text blocks a transparent-blurred bg so I'll implement that.

• I can make the logo more transparent but I fear it will make it invisible. I'll try + slow down the rotation even more, that should do it!

• added blur to cards
• slowed the rotation + decrease opacity even more on the rotating logo

[Teddy1792]

refactored the background animation into a different Background.tsx component - not hardcoded svg anymore

[joelamouche]

In #70 ?

[Teddy1792]

Yes my bad, didn't notice