Standardize image usage by replacing <img> with next/image

### 🐛 Describe the bug

### Issue Description
**Problem**

The codebase currently uses a mix of the next/image component and standard HTML tags.
For **NextJS's website** - using next/image tags is the standard approach

**Affected files :**

1. app/components/Layout/NavBar/index.jsx
2. app/components/Features/Features.jsx
3. app/components/TechStack/TechStack.jsx
4. app/components/About/About.jsx

**Details**

Hero.jsx uses next/image
Other components still use
Even with unoptimized: true in next.config.js, inconsistent image handling reduces standardization and future maintainability

---------------

### Proposed changes

**Refactor all remaining tags to use the next/image component for :**

**app/components/Layout/NavBar/index.jsx**

- Import Image from next/image.
- Replace tag for the logo with .
- Use the imported object directly or its .src property as required by next/image.

**app/components/Features/Features.jsx**

- Import Image from next/image.
- Replace tags in the features map with .

**app/components/TechStack/TechStack.jsx**

- Import Image from next/image.
- Replace tags for Flutter and Appwrite logos with .

**app/components/About/About.jsx**

- Import Image from next/image.
- Replace tag for the AOSSIE logo with .

------------------
### Benefits :

- Better future optimization and maintainability
- Consistent image handling
- Standardized props (alt, sizes, priority)

-------------------------------

#### Scope

- No UI or layout changes
- Only refactor image components