refactor(frontend): clean up code by consolidating multi-line JSX into single lines where feasible

- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits.
- Improved consistency in component imports by grouping and consolidating them.
- No functional changes, purely restructuring for clarity and maintainability.

frontend/e2e/homepage.spec.ts

@@ -120,7 +120,10 @@ test.describe('Homepage - Hero Section', () => {
   test('should navigate to GitHub when clicking View on GitHub', async ({ page }) => {
     const githubLink = page.getByRole('link', { name: /View on GitHub/i }).first();
     await expect(githubLink).toBeVisible();
-    await expect(githubLink).toHaveAttribute('href', expect.stringContaining('gitea.pragmazest.com'));
+    await expect(githubLink).toHaveAttribute(
+      'href',
+      expect.stringContaining('gitea.pragmazest.com')
+    );
   });
 
   test('should navigate to components when clicking Explore Components', async ({ page }) => {