# 1. landing page

## 1.1 Discover tab

#### 1. Group cards

<Component.DataFilter />
<Component.DataGrid source="grouphubs" />

#### 2. Event cards

<Component.DataFilter />
<Component.DataGrid source="grouphubs" />

## 1.2 Your groups

#### 1. Group cards to which user is member of

<Component.DataGrid source="grouphubs" onlyWithUserMembership={true} />

#### 2. Group you might like

<Component.DataGrid source="grouphubs" />

## 1.3 Your Events

#### 1. Upcoming events

<Component.DataGrid source="events" onlyWithUserMembership={true} eventStatus="upcoming" />

#### 2. Past events

<Component.DataGrid source="events" onlyWithUserMembership={true} eventStatus="past" />

#### 2. Events you might like

<Component.DataGrid source="events" />

## 2. Groups search page

<Component.DataFilter />
<Component.DataSortOption />
<Component.DataGrid source="grouphubs" />

## 3. Events search page

<Component.DataFilter />
<Component.DataSortOption />
<Component.DataGrid source="events" />

## 4. Group info page

### 4.1 Group info page

<Component.Details source="grouphubs" filter="group id from url param" />

### 4.2 Group discussion page

<Component.Discussion source="grouphubs" filter="group id from url param" />

### 4.3 Members tab

<Component.DataGrid source="users" filter="user to group membership status" >

### 4.4 Events tab

<Component.DataGrid source="events" filter="events under current group" >

### 4.5 Resources tab

<Component.DataList source="group.resources" >

### 5. Event info page

### 5.1 Event info page

<Component.Details source="events" filter="event id from url param" />

### 5.2 Event discussion page

<Component.Discussion source="events" filter="event id from url param" />

### 5.3 Attendee's tab

<Component.DataGrid source="users" filter="user to event rsvp status" >

### 5.4 Resources tab

<Component.DataList source="event.resources" >

## Components used

1. Component.DataFilter
2. Component.DataGrid
3. Component.DataList
4. Component.Details
5. Component.Discussion
6. Component.DataSortOption