Project Overview Dashboard

What is the Project Overview Dashboard?

The Project Overview Dashboard is a visual landing page that appears when you select a project but haven't selected a specific site. It serves as your project's "home" view, establishing the project's identity, goals, and visual context.

The dashboard is designed to create a distinct feeling when switching between projects, making each project feel like entering a different space with its own identity. It's about purpose and context, not duplicating functionality.

When Does It Appear?

The Project Overview Dashboard appears automatically when:

• You have a project selected in the sidebar
• No specific site is selected
• The project has been configured with overview information

If a project hasn't been configured yet, you'll see a simple empty state with an option to add project details.

Getting Started

Accessing the Dashboard

To view the Project Overview Dashboard:

1. Select a project from the sidebar
2. Make sure no site is selected (click away from any selected site if needed)
3. The dashboard will appear in the main content area

Understanding the Layout

The dashboard consists of several key sections:

• Hero Section: Displays project name, description, and goals prominently
• Video Section: Optional embedded video (if configured)
• Visual Identity: Brand colors, gradients, and styling that set the project's "feeling"

Basic Navigation

From the dashboard, you can:

• Click on any site in the project to navigate to that site
• Hover over the top-right corner to reveal the edit button
• Edit project details to customize the dashboard

Hero Section

The hero section is the primary visual element of your project dashboard, displaying key project information.

Project Name Display

The project name appears prominently at the top of the hero section, establishing the project's identity.

Project Description

The project description provides context about what the project is and its purpose. This text appears below the project name and helps visitors understand the project at a glance.

Project Goals

If configured, project goals or objectives are displayed in the hero section. Goals help communicate the project's purpose and intended outcomes.

Background Styling

The hero section supports various background styling options:

• Gradient Presets: Pre-configured gradient options for quick styling
• Custom Gradients: Create your own gradient combinations
• Brand Colors: Use your project's brand colors for consistent visual identity

Video Embedding

Projects can include embedded videos to provide additional context, demonstrations, or visual storytelling.

Adding a Video

To add a video to your project dashboard:

1. Open the project edit view (hover over the top-right corner and click the edit button)
2. Navigate to the video section
3. Enter a video URL (supports common video hosting platforms)
4. Choose a layout option (hero section or separate section)
5. Save your changes

Layout Options

Videos can be embedded in two ways:

• Hero Section: Video appears within the hero section, integrated with the project name and description
• Separate Section: Video appears in its own dedicated section below the hero

Video Validation

Hammer validates video URLs and formats to ensure they can be properly embedded. Invalid URLs will show an error message, and you'll need to provide a valid video URL.

Editing Project Details

You can customize your project dashboard by editing project details through the project edit view.

Opening the Edit View

To edit project details:

1. View the Project Overview Dashboard
2. Hover over the top-right corner of the dashboard
3. Click the edit button that appears
4. The project edit view will open

Editable Fields

In the project edit view, you can modify:

• Project Name: The name displayed on the dashboard
• Project Description: Text that describes the project's purpose
• Project Goals: Objectives or goals for the project (add multiple goals with the "Add Goal" button)
• Video URL: URL for embedded video content
• Video Layout: Where the video appears (hero or separate section)
• Header Style: Gradient presets or custom styling options
• Brand Colors: Colors that represent your project's visual identity

Saving Changes

Changes are saved automatically as you edit. You can see a preview of your changes in real-time, and the dashboard will update immediately when you close the edit view.

Visual Preview

The edit view provides a live preview of how your changes will appear on the dashboard, allowing you to see the visual impact of your edits before saving.

Visual Customization

Customize the visual identity of your project dashboard to create a distinct feeling and establish your project's brand.

Gradient Presets

Gradient presets are pre-configured gradient options that you can apply with a single click. These presets provide quick styling options for your project header:

• Choose from a variety of gradient combinations (Vibrant Blue, Vibrant Purple, Vibrant Orange, Vibrant Green, Vibrant Pink)
• Each preset creates a different visual mood
• Presets are optimized for readability and visual appeal
• Toggle between "Gradient" and "Solid Color" header styles

Brand Colors

Set brand colors that represent your project's visual identity:

• Primary brand color for key elements
• Secondary colors for accents and highlights
• Colors are used throughout the dashboard for consistency

Header Styles

Configure header styling options:

• Select gradient presets for quick styling
• Create custom gradients for unique looks
• Adjust typography and spacing

Flow Layout

The dashboard uses an adaptive flow layout that adjusts to your project structure:

• Automatically adapts to different content configurations
• Responsive design that works across screen sizes
• Optimized spacing and organization

Common Workflows

Setting Up a New Project Dashboard

To set up a project dashboard for the first time:

1. Select your project in the sidebar
2. If no dashboard appears, click "Add Project Details" or hover and click the edit button
3. Enter your project name and description
4. Add project goals if desired
5. Choose a gradient preset or configure custom styling
6. Optionally add a video URL
7. Save your changes

Updating Project Information

To update existing project details:

1. View the Project Overview Dashboard
2. Hover over the top-right corner and click the edit button
3. Modify any fields you want to change
4. Preview your changes in real-time
5. Changes are saved automatically

Customizing Visual Identity

To customize the visual appearance of your dashboard:

1. Open the project edit view
2. Navigate to the styling section
3. Choose a gradient preset or create a custom gradient
4. Set brand colors that match your project identity
5. Adjust header style options
6. Preview changes and save

Reference

Project Model Fields

The following fields are available for project configuration:

• name - Project name (required)
• description - Project description text
• goals - Project goals or objectives
• video - Video configuration object
• headerStyle - Header styling configuration
• brandPath - Path to brand assets

Video Configuration

Video objects include:

• url - Video URL (required)
• layout - Layout option: "hero" or "separate"

Header Style Options

Header styles support:

• Gradient presets (pre-configured options)
• Custom gradients (user-defined)
• Brand color integration

Known Limitations

As an early preview feature, the Project Overview Dashboard has some limitations:

• The dashboard is primarily visual/contextual, not a functional dashboard with metrics
• Some styling options may be limited compared to final implementation
• Video embedding supports common platforms but may not support all video services
• Custom branding options are in development

Next Steps

Now that you understand the Project Overview Dashboard:

• Set up your first project dashboard to establish project identity
• Experiment with different visual styles and layouts
• Provide feedback on the preview feature to help shape future improvements
• Check back for updates as the feature evolves toward final release