Bug: Misspelled CSS pseudo-class and invalid MUI Typography variant cause broken UI styling

[Arslanarsal]

Describe the bug
Two styling bugs where typos/invalid values cause UI styles to silently fail:

1. In src/components/HomePage/styles.jsx (Line 58), the CSS pseudo-class "&:selcted" is misspelled — missing the letter e. It should be "&:selected". This causes the navigation selected-state border to never render.

2. In src/components/Card/CardWithPicture.jsx (Lines 118, 130) and src/components/Card/CardWithoutPicture.jsx (Lines 104, 116), MUI Typography uses variant="h7" which is not a valid MUI variant (only h1–h6 exist). It silently falls back to default body1 styling, so the author/org name on tutorial cards loses its intended heading style.

To Reproduce

1. Go to http://localhost:5173/ (HomePage after login)
2. Click on any navigation tab in the feed section
3. Observe that no selected border appears on the active tab
4. Scroll down to any tutorial card — the author name and org name appear as plain body text instead of a styled heading

Expected behavior

1. The selected navigation tab should display a 2px solid black border when active
2. The author/org name on tutorial cards should render with a proper MUI heading variant like subtitle2

Desktop:

• OS: Linux (Ubuntu)
• Browser: Chrome
• Version: Latest

Additional context

• File 1: src/components/HomePage/styles.jsx Line 58 → "&:selcted" should be "&:selected"
• File 2: src/components/Card/CardWithPicture.jsx Lines 118, 130 → variant="h7" should be variant="subtitle2"
• File 3: src/components/Card/CardWithoutPicture.jsx Lines 104, 116 → variant="h7" should be variant="subtitle2"
• Total: 5 lines to fix across 3 files

[github-actions]

Hello 👋🏻 @Arslanarsal! Thankyou for creating an issue!