[FEATURE] Improve empty family tree state design

[devmaster1987]

Feature Description

Improve the empty state design shown when no family members have been added yet.

Currently, the application displays a basic text message. We want to create a more engaging and helpful empty state for new users.

Problem

When a user opens the application for the first time, the empty family tree section does not provide enough visual guidance.

A better empty state can help users understand what to do next.

Proposed Solution

Create a more attractive empty state design that includes:

• A family tree illustration or icon.
• A helpful heading.
• Short explanation text.
• Clear call-to-action button.
• Better spacing and visual hierarchy.

Example:

"Start Building Your Family Tree"

"Add your first family member and begin preserving your family story."

Button:

"+ Add First Member"

Expected Behavior

When there are no family members:

• The empty state should look visually polished.
• Users should understand the next action.
• The Add Member button should open the member form.
• The design should work on desktop and mobile.

Acceptance Criteria

• Replace the current empty message with an improved design.
• Add a visual element (icon/image/illustration).
• Improve typography and spacing.
• Keep the existing Add Member functionality working.
• Maintain responsive behavior.
• Match the existing project design style.

Additional Information

This issue is suitable for beginner contributors interested in UI/UX and CSS improvements.

Suggested technologies:

• HTML
• CSS
• Basic JavaScript if required

No external UI libraries should be added.